doc: align colour scheme information

Author: MathiasVDA

README.md

@@ -9,10 +9,10 @@ A YASGUI plugin for visualizing SPARQL CONSTRUCT query results as interactive gr
 
 - **🔷 Interactive Graph Visualization**: Automatic force-directed layout with smooth physics-based positioning
 - **🎨 Smart Color Coding**: 
-  - 🔵 Blue = URIs
-  - 🟢 Green = rdf:type objects (classes)
-  - 🔘 Grey = Literals
-  - 🟡 Yellow = Blank nodes
+  - 🔵 Light Blue (#97C2FC) = URIs
+  - 🟢 Light Green (#a6c8a6ff) = rdf:type objects (classes)
+  - ⚪ Light Grey (#c5c5c5ff) = Literals
+  - 🟠 Orange (#e15b13ff) = Blank nodes
 - **🔍 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)
@@ -99,10 +99,10 @@ After running the query, click the **"Graph"** tab to see the visualization.
 
 | Color | Meaning | Example |
 |-------|---------|---------|
-| 🔵 Blue | URI nodes | `ex:Person`, `ex:Alice` |
-| 🟢 Green | rdf:type objects (classes) | `ex:Person` in `ex:Alice rdf:type ex:Person` |
-| 🔘 Grey | Literal values | `"Alice"`, `"30"^^xsd:integer` |
-| 🟡 Yellow | Blank nodes | `_:b1`, `_:addr1` |
+| 🔵 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` |
 
 ## ⚙️ 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 - `#808080` (grey, literals), `#00FF00` (green, rdf:type objects), `#0000FF` (blue, other URIs)
+- `color` (String): Hex color code - `#c5c5c5ff` (light grey, literals), `#a6c8a6ff` (light green, rdf:type objects), `#97C2FC` (light blue, other URIs), `#e15b13ff` (orange, 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: '#00FF00', // Green if object of rdf:type
+  color: '#a6c8a6ff', // Light green 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: '#808080', // Grey for literals
+  color: '#c5c5c5ff', // Light grey for literals
   type: 'literal',
   fullValue: '"John"^^xsd:string'
 }

specs/001-construct-graph-viz/research.md

@@ -240,7 +240,7 @@ function triplesToGraph(triples, prefixes) {
 
 ### 4. Color Coding Logic
 
-**Question**: How to implement the color scheme (grey for literals, green for rdf:type objects, blue for other URIs)?
+**Question**: How to implement the color scheme (light grey for literals, light green for rdf:type objects, light blue for other URIs, orange for blank nodes)?
 
 **Implementation**:
 ```javascript
@@ -272,7 +272,7 @@ nodes: {
 }
 ```
 
-**Decision**: Calculate color during node creation, pass to vis-network node data. Use hex codes: `#808080` (grey), `#00FF00` (green), `#0000FF` (blue).
+**Decision**: Calculate color during node creation, pass to vis-network node data. Use hex codes: `#c5c5c5ff` (light grey), `#a6c8a6ff` (light green), `#97C2FC` (light blue), `#e15b13ff` (orange).
 
 ### 5. Prefix Handling
 

specs/001-construct-graph-viz/spec.md

@@ -11,7 +11,7 @@
 
 - Q: What visual styling should be used for graph nodes to distinguish between different node types and content lengths? → A: All nodes use uniform shape (circle/ellipse) with fixed size, regardless of label length or type
 - Q: How should tooltips be triggered and displayed to balance information access with usability? → A: Hover only with 300ms delay before showing, auto-hide on mouse leave
-- Q: How should the plugin handle blank nodes (anonymous RDF nodes with no URI) that appear in CONSTRUCT results? → A: Display with generated label but use unique color (e.g., yellow) to distinguish from literals
+- Q: How should the plugin handle blank nodes (anonymous RDF nodes with no URI) that appear in CONSTRUCT results? → A: Display with generated label but use unique orange color (#e15b13ff) to distinguish from literals
 - Q: When the same subject and object are connected by multiple different predicates, how should these be displayed? → A: Draw separate parallel edges for each predicate (may overlap/curve to show multiple)
 
 ## User Scenarios & Testing *(mandatory)*
@@ -92,7 +92,7 @@ While exploring the graph, the user wants to see detailed information about node
 - **Very long literals**: How are literals with thousands of characters displayed? → Truncate label to ~50 characters, full value in tooltip
 - **Duplicate triples**: What happens when identical triples appear multiple times? → Display as single edge (no duplicate edges between same nodes with same predicate)
 - **Multiple predicates between same nodes**: What happens when `<A> <p1> <B>` and `<A> <p2> <B>` exist? → Draw separate parallel edges for each predicate (edges may curve/offset to avoid complete overlap)
-- **Blank nodes**: How are anonymous RDF nodes (e.g., `_:b1`) displayed? → Show with generated label ("_:b1") in unique yellow color to distinguish from literals and URIs
+- **Blank nodes**: How are anonymous RDF nodes (e.g., `_:b1`) displayed? → Show with generated label ("_:b1") in unique orange color (#e15b13ff) to distinguish from literals and URIs
 - **Self-referencing triples**: What happens when subject equals object (e.g., `<A> <related> <A>`)? → Display as loop edge from node to itself
 - **No prefixes defined**: What happens when SPARQL results don't include prefix definitions? → Only show the part of the URI after last `/` or `#` as label
 - **Large graphs (1000+ triples)**: How does the plugin handle performance with many nodes? → Initial layout completes within 2 seconds; warn user if exceeds rendering capacity
@@ -116,7 +116,7 @@ While exploring the graph, the user wants to see detailed information about node
 
 - **FR-007**: Plugin MUST render graph using a force-directed or hierarchical layout algorithm that automatically spaces nodes to minimize edge crossings and overlaps
 - **FR-008**: Plugin MUST complete initial graph layout within 2 seconds for graphs up to 1,000 nodes (performance target per constitution)
-- **FR-009**: Plugin MUST apply color coding to nodes: grey (#808080) for literals, yellow (#FFFF00) for blank nodes, green (#00FF00) for nodes that are objects of `rdf:type` predicate, blue (#0000FF) for all other URI nodes
+- **FR-009**: Plugin MUST apply color coding to nodes: light grey (#c5c5c5ff) for literals, orange (#e15b13ff) for blank nodes, light green (#a6c8a6ff) for nodes that are objects of `rdf:type` predicate, light blue (#97C2FC) for all other URI nodes
 - **FR-010**: Plugin MUST label URI nodes with prefixed form (e.g., `ex:Person` instead of `http://example.org/Person`)
 - **FR-010a**: Plugin MUST label blank nodes with their generated identifier (e.g., `_:b1`, `_:b2`)
 - **FR-011**: Plugin MUST label literal nodes with the literal value only, excluding datatype suffix (e.g., `"John"` not `"John"^^xsd:string`)
@@ -150,7 +150,7 @@ While exploring the graph, the user wants to see detailed information about node
 
 - **FR-028**: Plugin MUST display empty state message when CONSTRUCT query returns zero triples
 - **FR-029**: Plugin MUST handle self-referencing triples (subject equals object) by rendering loop edges
-- **FR-030**: Plugin MUST handle blank nodes by creating nodes with generated labels and yellow color
+- **FR-030**: Plugin MUST handle blank nodes by creating nodes with generated labels and orange color (#e15b13ff)
 - **FR-031**: Plugin MUST render multiple predicates between the same node pair as separate parallel edges with curved/offset paths
 - **FR-032**: Plugin MUST truncate very long URI labels with ellipsis while preserving full URI in tooltips
 - **FR-033**: Plugin MUST truncate literal labels exceeding ~50 characters while preserving full value in tooltips
@@ -159,7 +159,7 @@ While exploring the graph, the user wants to see detailed information about node
 ### Key Entities
 
 - **GraphNode**: Represents either a subject or object from RDF triples
-  - Attributes: URI or literal value or blank node identifier, node type (URI/literal/blank), color (grey/yellow/green/blue), shape (uniform circle/ellipse), size (fixed), position (x, y coordinates), label (abbreviated form)
+  - Attributes: URI or literal value or blank node identifier, node type (URI/literal/blank), color (light grey/orange/light green/light blue), shape (uniform circle/ellipse), size (fixed), position (x, y coordinates), label (abbreviated form)
   - Relationships: Connected to other nodes via edges (may have multiple edges with different predicates to same target)
 
 - **GraphEdge**: Represents a predicate connecting two nodes
@@ -179,7 +179,7 @@ While exploring the graph, the user wants to see detailed information about node
 ### Measurable Outcomes
 
 - **SC-001**: Users can visualize CONSTRUCT query results as graphs within 2 seconds of receiving results (for graphs up to 1,000 nodes)
-- **SC-002**: Users can identify node types (literal vs. blank node vs. URI vs. type instance) through color coding without reading labels (grey/yellow/blue/green)
+- **SC-002**: Users can identify node types (literal vs. blank node vs. URI vs. type instance) through color coding without reading labels (light grey/orange/light blue/light green)
 - **SC-003**: Users can navigate graphs of any size by zooming and panning without performance degradation
 - **SC-004**: Users can reorganize graph layouts manually to improve understanding of relationships
 - **SC-005**: Users can access full URI details for any node or edge via hover tooltips

specs/001-construct-graph-viz/tasks.md

@@ -62,7 +62,7 @@
 - [X] T020 [US1] Implement GraphPlugin.draw() method: clear this.yasr.resultsEl, parse triples via parseConstructResults(), extract prefixes via extractPrefixes(), transform via triplesToGraph()
 - [X] T021 [US1] In GraphPlugin.draw(), create container div with 100% width/height, append to this.yasr.resultsEl
 - [X] T022 [US1] In GraphPlugin.draw(), create vis.DataSet for nodes and edges, instantiate vis.Network with container, data, and options from getDefaultNetworkOptions()
-- [X] T023 [US1] In GraphPlugin.draw(), handle stabilizationIterationsDone event to disable physics after layout completes (performance optimization per constitution)
+- [X] T023 [US1] In GraphPlugin.draw(), handle stabilizationIterationsDone event to keep physics enabled after layout completes (can be disabled later if user feedback indicates performance issues)
 - [X] T024 [US1] In GraphPlugin.draw(), add error handling to display empty state message if zero triples, or error message if parsing fails
 - [X] T025 [US1] Handle blank nodes in createNodeMap(): detect _:b* identifiers, assign yellow color #FFFF00, generate label "_:b1" etc.
 - [X] T026 [US1] Handle multiple predicates between same nodes in createEdgesArray(): create separate edge for each predicate, vis-network will curve them automatically