feat: use more standardised colour coding

Author: MathiasVDA

README.md

@@ -10,9 +10,9 @@ A YASGUI plugin for visualizing SPARQL CONSTRUCT and DESCRIBE query results as i
 - **🔷 Interactive Graph Visualization**: Automatic force-directed layout with smooth physics-based positioning
 - **🎨 Smart Color Coding**: 
   - 🔵 Light Blue (#97C2FC) = URIs
-  - 🟢 Light Green (#a6c8a6ff) = rdf:type objects (classes)
-  - ⚪ Light Grey (#c5c5c5ff) = Literals
-  - 🟠 Orange (#e15b13ff) = Blank nodes
+  - 🟢 Light Green (#a6c8a6ff) = Literals
+  - ⚪ Light Grey (#c5c5c5ff) = Blank nodes
+  - 🟠 Orange (#e15b13ff) = rdf:type objects (classes)
 - **🔍 Navigation**: Mouse wheel zoom, drag to pan, "Zoom to Fit" button
 - **✋ Drag & Drop**: Reorganize nodes by dragging them to new positions
 - **💬 Tooltips**: Hover for full URI/literal details (300ms delay)
@@ -107,11 +107,11 @@ After running the query, click the **"Graph"** tab to see the visualization.
 ### Understanding Colors
 
 | Color | Meaning | Example |
-|-------|---------|---------|
+|-------|---------|---------||
 | 🔵 Light Blue (#97C2FC) | URI nodes | `ex:Person`, `ex:Alice` |
-| 🟢 Light Green (#a6c8a6ff) | rdf:type objects (classes) | `ex:Person` in `ex:Alice rdf:type ex:Person` |
-| ⚪ Light Grey (#c5c5c5ff) | Literal values | `"Alice"`, `"30"^^xsd:integer` |
-| 🟠 Orange (#e15b13ff) | Blank nodes | `_:b1`, `_:addr1` |
+| 🟢 Light Green (#a6c8a6ff) | Literal values | `"Alice"`, `"30"^^xsd:integer` |
+| ⚪ Light Grey (#c5c5c5ff) | Blank nodes | `_:b1`, `_:addr1` |
+| 🟠 Orange (#e15b13ff) | rdf:type objects (classes) | `ex:Person` in `ex:Alice rdf:type ex:Person` |
 
 ## ⚙️ Configuration
 

specs/001-construct-graph-viz/data-model.md

@@ -14,7 +14,7 @@ Represents a unique subject or object from RDF triples in the visualization.
 - `id` (Number): Unique numeric identifier for vis-network (auto-incremented)
 - `uri` (String | null): Full URI for URI nodes, null for literals
 - `label` (String): Display text (prefixed URI or literal value, truncated if needed)
-- `color` (String): Hex color code - `#c5c5c5ff` (light grey, literals), `#a6c8a6ff` (light green, rdf:type objects), `#97C2FC` (light blue, other URIs), `#e15b13ff` (orange, blank nodes)
+- `color` (String): Hex color code - `#a6c8a6ff` (light green, literals), `#e15b13ff` (orange, rdf:type objects), `#97C2FC` (light blue, other URIs), `#c5c5c5ff` (light grey, blank nodes)
 - `type` (Enum): `'uri'` or `'literal'`
 - `fullValue` (String): Un-truncated value for tooltip display
 
@@ -33,7 +33,7 @@ Represents a unique subject or object from RDF triples in the visualization.
   id: 1,
   uri: 'http://example.org/Person',
   label: 'ex:Person',
-  color: '#a6c8a6ff', // Light green if object of rdf:type
+  color: '#e15b13ff', // Orange if object of rdf:type
   type: 'uri',
   fullValue: 'http://example.org/Person'
 }
@@ -42,7 +42,7 @@ Represents a unique subject or object from RDF triples in the visualization.
   id: 2,
   uri: null,
   label: 'John',
-  color: '#c5c5c5ff', // Light grey for literals
+  color: '#a6c8a6ff', // Light green for literals
   type: 'literal',
   fullValue: '"John"^^xsd:string'
 }

src/colorUtils.js

@@ -5,28 +5,28 @@
  * @returns {string} Hex color code
  */
 function getNodeColor(node, triples) {
-  // Blank nodes: yellow
+  // Blank nodes: light grey
   if (node.uri && node.uri.startsWith('_:')) {
-    return '#e15b13ff';
+    return '#c5c5c5ff';
   }
 
-  // Literals: grey
+  // Literals: light green
   if (node.type === 'literal') {
-    return '#c5c5c5ff';
+    return '#a6c8a6ff';
   }
 
-  // Check if node is object of rdf:type predicate: green
+  // Check if node is object of rdf:type predicate: orange
   const isTypeObject = triples.some(
     (triple) =>
       triple.predicate === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type' &&
       triple.object.value === node.uri
   );
 
   if (isTypeObject) {
-    return '#a6c8a6ff';
+    return '#e15b13ff';
   }
 
-  // Other URIs: blue
+  // Other URIs: light blue
   return '#97C2FC';
 }