@matdata/yasgui-graph-plugin 1.4.1 → 1.5.0

package/README.md

@@ -13,9 +13,11 @@ A YASGUI plugin for visualizing SPARQL CONSTRUCT and DESCRIBE query results as i
   - 🟢 Light Green (#a6c8a6ff) = Literals
   - ⚪ Light Grey (#c5c5c5ff) = Blank nodes
   - 🟠 Orange (#e15b13ff) = rdf:type objects (classes)
+- **🖼️ Node Icons & Images**: Render images or emoji/icons on nodes via `schema:image` / `schema:icon` properties (see [Node icons and images](#node-icons-and-images))
+- **� Compact Mode**: Hide literal and class nodes; show rdf:type and datatype properties in enhanced tooltips instead
 - **🔍 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)
+- **✋ Drag & Drop**: Reorganize nodes by dragging them to new positions (nodes stay pinned after manual drag)
+- **💬 Rich Tooltips**: Modern HTML tooltips with node type, value, namespace, and datatype information
 - **🌓 Theme Support**: Automatic light/dark mode detection and dynamic color switching
 - **⚡ Performance**: Handles up to 1,000 nodes with <2s render time
 - **♿ Accessible**: WCAG AA color contrast, keyboard navigation support
@@ -102,8 +104,8 @@ After running the query, click the **"Graph"** tab to see the visualization.
 - **Fit to View**: Click the "Zoom to Fit" button to center the entire graph
 
 ### Interaction
-- **Drag Nodes**: Click and drag any node to reposition it
-- **Tooltips**: Hover over nodes/edges for 300ms to see full details
+- **Drag Nodes**: Click and drag any node to reposition it (nodes are automatically pinned in place after dragging)
+- **Tooltips**: Hover over nodes/edges to see rich HTML tooltips with type, value, namespace, and datatype information
 
 ### Understanding Colors
 
@@ -116,23 +118,122 @@ After running the query, click the **"Graph"** tab to see the visualization.
 
 ## ⚙️ Configuration
 
-The plugin uses sensible defaults but can be customized by extending the `GraphPlugin` class:
+The plugin ships with sensible defaults and stores every change in **`localStorage`** so settings survive page reloads.
+
+### Settings panel
+
+Click the **⚙ Settings** button (top-right of the graph) to open the settings panel.
+
+| Setting | Values | Default | Description |
+|---------|--------|---------|-------------|
+| **Compact mode** | on / off | off | Hide literal and class nodes; show rdf:type and datatype properties in tooltips instead |
+| **Arrow style** | Curved / Straight | Curved | Toggle between smooth curved edges and straight lines between nodes |
+| **Predicate display** | Label / Icon / Hidden | Icon | Show the full prefixed URI on edges, a compact symbol/icon, or nothing |
+| **Show literals** | on / off | on | Include or exclude literal value nodes (strings, numbers, dates, …) |
+| **Show classes** | on / off | on | Include or exclude nodes that are objects of `rdf:type` triples (class nodes) |
+| **Show blank nodes** | on / off | on | Include or exclude blank nodes (`_:b0`, `_:b1`, …) |
+| **Show node labels** | on / off | on | Render the prefixed URI / literal text inside each node |
+| **Enable physics** | on / off | on | Keep the force-directed layout simulation running so nodes keep adjusting |
+| **Node size** | Small / Medium / Large | Medium | Set the radius of all nodes |
+
+### Predicate icons
+
+When *Predicate display* is set to **Icon**, each edge displays a compact symbol instead of the full label.  Symbols are defined for the 20+ most common predicates:
+
+| Predicate | Symbol |
+|-----------|--------|
+| `rdf:type` | `a` |
+| `rdfs:label` | `lbl` |
+| `rdfs:comment` | `cmt` |
+| `rdfs:subClassOf` | `⊂` |
+| `rdfs:subPropertyOf` | `⊆` |
+| `rdfs:domain` | `dom` |
+| `rdfs:range` | `rng` |
+| `rdfs:seeAlso` | `see` |
+| `rdfs:isDefinedBy` | `idb` |
+| `owl:sameAs` | `≡` |
+| `owl:equivalentClass` | `≅` |
+| `owl:inverseOf` | `⇄` |
+| `owl:disjointWith` | `≠` |
+| `skos:prefLabel` | `★` |
+| `skos:altLabel` | `☆` |
+| `skos:definition` | `def` |
+| `skos:broader` | `↑` |
+| `skos:narrower` | `↓` |
+| `skos:related` | `↔` |
+| `skos:note` | `note` |
+| `skos:exactMatch` | `≡` |
+| `skos:closeMatch` | `≈` |
+| `dcterms:title` | `ttl` |
+| `dcterms:description` | `dsc` |
+| `dcterms:created` | `crt` |
+| `dcterms:modified` | `mod` |
+| `dcterms:creator` | `by` |
+| `dcterms:subject` | `sbj` |
+| `foaf:name` | `nm` |
+| `foaf:knows` | `⟷` |
+| `foaf:member` | `mbr` |
+| `schema:name` | `nm` |
+| `schema:description` | `dsc` |
+
+For predicates not in the table the full prefixed label is used as a fallback.
+
+## 🖼️ Node icons and images
+
+Any URI node can display an image or an icon instead of (or in addition to) the default coloured dot by attaching `schema:image` or `schema:icon` as a property directly in the SPARQL result.
+
+| Property | Object | Effect |
+|----------|--------|--------|
+| `schema:image` (`https://schema.org/image`) | URL literal or URI | Node is rendered as a circular image |
+| `schema:icon` (`https://schema.org/icon`) | emoji / short string | The string is used as the node's label |
+
+`schema:icon` takes priority over `schema:image`. The corresponding `schema:icon`/`schema:image` triples are **not** rendered as separate nodes or edges, but their values **are** shown in the node tooltip. Similarly, any `rdfs:label` triple is consumed to determine the node's displayed label and is never drawn as an edge, even when predicate display is enabled.
+
+### Example – inline image on a resource
+
+```sparql
+CONSTRUCT {
+  ex:alice schema:image <https://example.com/alice.png> .
+  ex:alice ex:knows ex:bob .
+}
+WHERE {}
+```
+
+`ex:alice` will be drawn as a circular photograph.
+
+### Example – icon/emoji on a class
+
+```sparql
+CONSTRUCT {
+  ex:alice  rdf:type    ex:Person .
+  ex:Person schema:icon "👤" .
+}
+WHERE {}
+```
+
+`ex:alice` remains a normal dot node in regular mode.
+In **compact mode** the class node (`ex:Person`) is hidden and Alice's node inherits the `👤` emoji as its label.
+
+### Compact mode visual inheritance
+
+When compact mode is enabled, class nodes are hidden and the plugin resolves the image/icon to show on the resource node using the following priority:
+
+1. `schema:image` / `schema:icon` directly on the **resource** (highest priority)
+2. `schema:image` / `schema:icon` on the **rdf:type class**
+3. `schema:image` / `schema:icon` on a **rdfs:subClassOf superclass** (one hop)
+
+### Programmatic configuration
+
+You can also pass initial settings when extending the class:
 
 ```javascript
 class CustomGraphPlugin extends GraphPlugin {
   constructor(yasr) {
     super(yasr);
-  }
-  
-  // Override network options
-  getNetworkOptions() {
-    return {
-      ...super.getNetworkOptions(),
-      physics: {
-        enabled: true,
-        stabilization: { iterations: 100 } // Faster but less optimal layout
-      }
-    };
+    // Override defaults
+    this.settings.edgeStyle = 'straight';
+    this.settings.predicateDisplay = 'label';
+    this.settings.nodeSize = 'large';
   }
 }
 
@@ -163,6 +264,7 @@ Output:
 ### Code Quality
 
 ```bash
+npm test        # Run Jest unit tests
 npm run lint    # ESLint check
 npm run format  # Prettier format
 ```

package/dist/yasgui-graph-plugin.cjs.css

@@ -1,14 +1,21 @@
 /* styles/index.css */
 :root {
-  --yasgui-graph-uri: #97C2FC;
+  --yasgui-graph-uri: #97c2fc;
   --yasgui-graph-literal: #a6c8a6ff;
   --yasgui-graph-blank-node: #c5c5c5ff;
   --yasgui-graph-type-object: #e15b13ff;
-  --yasgui-graph-text: #000000;
-  --yasgui-graph-edge: #cccccc;
-  --yasgui-graph-edge-label: #666666;
-  --yasgui-graph-edge-label-bg: rgba(255, 255, 255, 0.8);
-  --yasgui-graph-background: #ffffff;
+  --yasgui-graph-text: var(--yasgui-text-primary, #000000);
+  --yasgui-graph-edge: var(--yasgui-border-color, #cccccc);
+  --yasgui-graph-edge-label: var(--yasgui-text-secondary, #666666);
+  --yasgui-graph-edge-label-bg: var(--yasgui-bg-primary, rgba(255, 255, 255, 0.8));
+  --yasgui-graph-background: var(--yasgui-bg-primary, #ffffff);
+  --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);
+  --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);
+  --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);
+  --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);
+  --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);
+  --yasgui-graph-error-text: #f44336;
+  --yasgui-graph-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --color-blank-node: #ffff00;
   --color-literal: #808080;
   --color-rdf-type: #00ff00;
@@ -29,15 +36,17 @@
 }
 [data-theme=dark],
 .dark-theme {
-  --yasgui-graph-uri: #97C2FC;
+  --yasgui-graph-uri: #97c2fc;
   --yasgui-graph-literal: #a6c8a6ff;
   --yasgui-graph-blank-node: #888888;
   --yasgui-graph-type-object: #e15b13ff;
-  --yasgui-graph-text: #e0e0e0;
-  --yasgui-graph-edge: #666666;
-  --yasgui-graph-edge-label: #cccccc;
-  --yasgui-graph-edge-label-bg: rgba(30, 30, 30, 0.8);
-  --yasgui-graph-background: #1e1e1e;
+  --yasgui-graph-text: var(--yasgui-text-primary, #e0e0e0);
+  --yasgui-graph-edge: var(--yasgui-border-color, #666666);
+  --yasgui-graph-edge-label: var(--yasgui-text-secondary, #cccccc);
+  --yasgui-graph-edge-label-bg: var(--yasgui-bg-secondary, rgba(30, 30, 30, 0.8));
+  --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);
+  --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);
+  --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);
 }
 .yasgui-graph-plugin-container {
   width: 100%;
@@ -46,23 +55,16 @@
   overflow: hidden;
 }
 .yasgui-graph-plugin-container canvas {
-  background-color: var(--yasgui-graph-canvas-bg, var(--bg-light));
-}
-.yasgui-graph-plugin-container[data-theme=dark] canvas,
-.dark-theme .yasgui-graph-plugin-container canvas {
-  background-color: var(--yasgui-graph-canvas-bg, var(--bg-dark));
+  background-color: var(--yasgui-graph-canvas-bg);
 }
 .yasgui-graph-plugin-empty-state {
   padding: 20px;
   text-align: center;
-  color: var(--text-light);
-}
-.dark-theme .yasgui-graph-plugin-empty-state {
-  color: var(--text-dark);
+  color: var(--yasgui-graph-empty-text);
 }
 .yasgui-graph-plugin-error {
   padding: 20px;
-  color: var(--text-error);
+  color: var(--yasgui-graph-error-text);
 }
 .yasgui-graph-controls {
   position: absolute;
@@ -75,21 +77,78 @@
 }
 .yasgui-graph-button {
   padding: 8px 12px;
-  background: var(--button-primary-bg);
-  color: var(--button-text);
+  background: var(--yasgui-graph-button-bg);
+  color: var(--yasgui-graph-button-text);
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--yasgui-graph-shadow);
   transition: background 0.2s ease;
 }
 .yasgui-graph-button:hover {
-  background: var(--button-primary-bg-hover);
+  background: var(--yasgui-graph-button-hover);
 }
 .yasgui-graph-button:active {
   transform: translateY(1px);
 }
+.yasgui-graph-settings-panel {
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  z-index: 10001;
+  background: var(--yasgui-graph-button-bg, #4caf50);
+  background: var(--yasgui-bg-primary, #ffffff);
+  color: var(--yasgui-graph-text, #333333);
+  border: 1px solid var(--yasgui-border-color, #cccccc);
+  border-radius: 6px;
+  padding: 12px 14px;
+  min-width: 240px;
+  box-shadow: var(--yasgui-graph-shadow, 0 2px 8px rgba(0,0,0,0.2));
+  font-size: 13px;
+}
+.yasgui-graph-settings-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--yasgui-border-color, #cccccc);
+}
+.yasgui-graph-settings-section {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--yasgui-text-secondary, #888888);
+  margin: 10px 0 4px;
+}
+.yasgui-graph-settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 3px 0;
+  cursor: pointer;
+}
+.yasgui-graph-settings-row input[type=checkbox] {
+  cursor: pointer;
+  accent-color: var(--yasgui-accent-color, #4caf50);
+}
+.yasgui-graph-settings-select {
+  font-size: 12px;
+  padding: 2px 4px;
+  border: 1px solid var(--yasgui-border-color, #cccccc);
+  border-radius: 3px;
+  background: var(--yasgui-bg-primary, #ffffff);
+  color: var(--yasgui-text-primary, #333333);
+  cursor: pointer;
+  max-width: 140px;
+}
+.yasgui-graph-settings-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
 .yasgui-graph-icon {
   display: inline-flex;
   align-items: center;
@@ -100,4 +159,62 @@
   height: 16px;
   fill: currentColor;
 }
+.yasgui-graph-plugin-container .vis-tooltip {
+  display: none !important;
+}
+.yasgui-graph-tooltip-container {
+  position: absolute;
+  background-color: rgba(28, 28, 32, 0.95);
+  color: #f0f0f0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 11px;
+  font-family:
+    ui-monospace,
+    "SFMono-Regular",
+    "Menlo",
+    "Consolas",
+    monospace;
+  max-width: 340px;
+  white-space: normal;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+  z-index: 1000;
+  user-select: text;
+  cursor: text;
+}
+.yasgui-graph-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.yasgui-tooltip-type {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: rgba(255, 255, 255, 0.5);
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  margin-bottom: 3px;
+}
+.yasgui-tooltip-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  line-height: 1.5;
+}
+.yasgui-tooltip-key {
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.55);
+  min-width: 58px;
+  flex-shrink: 0;
+}
+.yasgui-tooltip-val {
+  font-size: 11px;
+  color: #e8e8e8;
+  word-break: break-all;
+}
 /*# sourceMappingURL=yasgui-graph-plugin.cjs.css.map */

package/dist/yasgui-graph-plugin.cjs.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../styles/index.css"],
-  "sourcesContent": ["/* Color scheme variables */\r\n:root {\r\n  /* Light theme colors (default) */\r\n  --yasgui-graph-uri: #97C2FC;\r\n  --yasgui-graph-literal: #a6c8a6ff;\r\n  --yasgui-graph-blank-node: #c5c5c5ff;\r\n  --yasgui-graph-type-object: #e15b13ff;\r\n  --yasgui-graph-text: #000000;\r\n  --yasgui-graph-edge: #cccccc;\r\n  --yasgui-graph-edge-label: #666666;\r\n  --yasgui-graph-edge-label-bg: rgba(255, 255, 255, 0.8);\r\n  --yasgui-graph-background: #ffffff;\r\n  \r\n  /* Legacy variables for backward compatibility */\r\n  --color-blank-node: #ffff00;\r\n  --color-literal: #808080;\r\n  --color-rdf-type: #00ff00;\r\n  --color-uri: #0000ff;\r\n  \r\n  --color-blank-node-dark: #ffeb3b;\r\n  --color-literal-dark: #9e9e9e;\r\n  --color-rdf-type-dark: #4caf50;\r\n  --color-uri-dark: #2196f3;\r\n  \r\n  --bg-light: #ffffff;\r\n  --bg-dark: #1e1e1e;\r\n  \r\n  --text-light: #666666;\r\n  --text-dark: #cccccc;\r\n  --text-error: #f44336;\r\n  \r\n  --button-primary-bg: #4caf50;\r\n  --button-primary-bg-hover: #45a049;\r\n  --button-text: #ffffff;\r\n  \r\n  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n/* Dark theme colors */\r\n[data-theme='dark'],\r\n.dark-theme {\r\n  --yasgui-graph-uri: #97C2FC;\r\n  --yasgui-graph-literal: #a6c8a6ff;\r\n  --yasgui-graph-blank-node: #888888;\r\n  --yasgui-graph-type-object: #e15b13ff;\r\n  --yasgui-graph-text: #e0e0e0;\r\n  --yasgui-graph-edge: #666666;\r\n  --yasgui-graph-edge-label: #cccccc;\r\n  --yasgui-graph-edge-label-bg: rgba(30, 30, 30, 0.8);\r\n  --yasgui-graph-background: #1e1e1e;\r\n}\r\n/* Graph plugin container */\r\n.yasgui-graph-plugin-container {\r\n  width: 100%;\r\n  height: 500px; /* Initial fixed height as workaround for viz-network bug */\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.yasgui-graph-plugin-container canvas {\r\n  background-color: var(--yasgui-graph-canvas-bg, var(--bg-light));\r\n}\r\n.yasgui-graph-plugin-container[data-theme='dark'] canvas,\r\n.dark-theme .yasgui-graph-plugin-container canvas {\r\n  background-color: var(--yasgui-graph-canvas-bg, var(--bg-dark));\r\n}\r\n.yasgui-graph-plugin-empty-state {\r\n  padding: 20px;\r\n  text-align: center;\r\n  color: var(--text-light);\r\n}\r\n.dark-theme .yasgui-graph-plugin-empty-state {\r\n  color: var(--text-dark);\r\n}\r\n.yasgui-graph-plugin-error {\r\n  padding: 20px;\r\n  color: var(--text-error);\r\n}\r\n/* Controls container */\r\n.yasgui-graph-controls {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  z-index: 10000;\r\n  display: flex;\r\n  gap: 10px;\r\n  pointer-events: auto;\r\n}\r\n/* Button styles */\r\n.yasgui-graph-button {\r\n  padding: 8px 12px;\r\n  background: var(--button-primary-bg);\r\n  color: var(--button-text);\r\n  border: none;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  box-shadow: var(--box-shadow);\r\n  transition: background 0.2s ease;\r\n}\r\n.yasgui-graph-button:hover {\r\n  background: var(--button-primary-bg-hover);\r\n}\r\n.yasgui-graph-button:active {\r\n  transform: translateY(1px);\r\n}\r\n/* Icon styles */\r\n.yasgui-graph-icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.yasgui-graph-icon svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n/* Main entry point for all styles */\r\n/* This file will be imported by the TypeScript code */\r\n"],
-  "mappings": ";AACA;AAEE,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAC5B,uBAAqB;AACrB,uBAAqB;AACrB,6BAA2B;AAC3B,gCAA8B,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClD,6BAA2B;AAG3B,sBAAoB;AACpB,mBAAiB;AACjB,oBAAkB;AAClB,eAAa;AAEb,2BAAyB;AACzB,wBAAsB;AACtB,yBAAuB;AACvB,oBAAkB;AAElB,cAAY;AACZ,aAAW;AAEX,gBAAc;AACd,eAAa;AACb,gBAAc;AAEd,uBAAqB;AACrB,6BAA2B;AAC3B,iBAAe;AAEf,gBAAc,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AAEA,CAAC;AACD,CAAC;AACC,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAC5B,uBAAqB;AACrB,uBAAqB;AACrB,6BAA2B;AAC3B,gCAA8B,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC/C,6BAA2B;AAC7B;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,YAAU;AACV,YAAU;AACZ;AACA,CANC,8BAM8B;AAC7B,oBAAkB,IAAI,wBAAwB,EAAE,IAAI;AACtD;AACA,CATC,6BAS6B,CAAC,iBAAmB;AAClD,CAtBC,WAsBW,CAVX,8BAU0C;AACzC,oBAAkB,IAAI,wBAAwB,EAAE,IAAI;AACtD;AACA,CAAC;AACC,WAAS;AACT,cAAY;AACZ,SAAO,IAAI;AACb;AACA,CA9BC,WA8BW,CALX;AAMC,SAAO,IAAI;AACb;AACA,CAAC;AACC,WAAS;AACT,SAAO,IAAI;AACb;AAEA,CAAC;AACC,YAAU;AACV,OAAK;AACL,SAAO;AACP,WAAS;AACT,WAAS;AACT,OAAK;AACL,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,aAAW;AACX,cAAY,IAAI;AAChB,cAAY,WAAW,KAAK;AAC9B;AACA,CAXC,mBAWmB;AAClB,cAAY,IAAI;AAClB;AACA,CAdC,mBAcmB;AAClB,aAAW,WAAW;AACxB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACnB;AACA,CALC,kBAKkB;AACjB,SAAO;AACP,UAAQ;AACR,QAAM;AACR;",
+  "sourcesContent": ["/* Color scheme variables using YASGUI CSS custom properties with fallbacks */\r\n:root {\r\n  /* Graph-specific node colors (custom to this plugin) */\r\n  --yasgui-graph-uri: #97c2fc;\r\n  --yasgui-graph-literal: #a6c8a6ff;\r\n  --yasgui-graph-blank-node: #c5c5c5ff;\r\n  --yasgui-graph-type-object: #e15b13ff;\r\n\r\n  /* Graph text and edges - using YASGUI variables with fallbacks */\r\n  --yasgui-graph-text: var(--yasgui-text-primary, #000000);\r\n  --yasgui-graph-edge: var(--yasgui-border-color, #cccccc);\r\n  --yasgui-graph-edge-label: var(--yasgui-text-secondary, #666666);\r\n  --yasgui-graph-edge-label-bg: var(--yasgui-bg-primary, rgba(255, 255, 255, 0.8));\r\n  --yasgui-graph-background: var(--yasgui-bg-primary, #ffffff);\r\n\r\n  /* UI elements - using YASGUI variables with fallbacks */\r\n  --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);\r\n  --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);\r\n  --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);\r\n  --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);\r\n  --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);\r\n  --yasgui-graph-error-text: #f44336;\r\n\r\n  /* Shadow */\r\n  --yasgui-graph-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n  /* Legacy variables for backward compatibility */\r\n  --color-blank-node: #ffff00;\r\n  --color-literal: #808080;\r\n  --color-rdf-type: #00ff00;\r\n  --color-uri: #0000ff;\r\n\r\n  --color-blank-node-dark: #ffeb3b;\r\n  --color-literal-dark: #9e9e9e;\r\n  --color-rdf-type-dark: #4caf50;\r\n  --color-uri-dark: #2196f3;\r\n\r\n  --bg-light: #ffffff;\r\n  --bg-dark: #1e1e1e;\r\n\r\n  --text-light: #666666;\r\n  --text-dark: #cccccc;\r\n  --text-error: #f44336;\r\n\r\n  --button-primary-bg: #4caf50;\r\n  --button-primary-bg-hover: #45a049;\r\n  --button-text: #ffffff;\r\n\r\n  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n/* Dark theme colors */\r\n[data-theme='dark'],\r\n.dark-theme {\r\n  /* Graph-specific node colors in dark mode */\r\n  --yasgui-graph-uri: #97c2fc;\r\n  --yasgui-graph-literal: #a6c8a6ff;\r\n  --yasgui-graph-blank-node: #888888;\r\n  --yasgui-graph-type-object: #e15b13ff;\r\n\r\n  /* Override with YASGUI dark theme variables */\r\n  --yasgui-graph-text: var(--yasgui-text-primary, #e0e0e0);\r\n  --yasgui-graph-edge: var(--yasgui-border-color, #666666);\r\n  --yasgui-graph-edge-label: var(--yasgui-text-secondary, #cccccc);\r\n  --yasgui-graph-edge-label-bg: var(--yasgui-bg-secondary, rgba(30, 30, 30, 0.8));\r\n  --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);\r\n  --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);\r\n  --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);\r\n}\r\n/* Graph plugin container */\r\n.yasgui-graph-plugin-container {\r\n  width: 100%;\r\n  height: 500px; /* Initial fixed height as workaround for viz-network bug */\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.yasgui-graph-plugin-container canvas {\r\n  background-color: var(--yasgui-graph-canvas-bg);\r\n}\r\n.yasgui-graph-plugin-empty-state {\r\n  padding: 20px;\r\n  text-align: center;\r\n  color: var(--yasgui-graph-empty-text);\r\n}\r\n.yasgui-graph-plugin-error {\r\n  padding: 20px;\r\n  color: var(--yasgui-graph-error-text);\r\n}\r\n/* Controls container */\r\n.yasgui-graph-controls {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  z-index: 10000;\r\n  display: flex;\r\n  gap: 10px;\r\n  pointer-events: auto;\r\n}\r\n/* Button styles */\r\n.yasgui-graph-button {\r\n  padding: 8px 12px;\r\n  background: var(--yasgui-graph-button-bg);\r\n  color: var(--yasgui-graph-button-text);\r\n  border: none;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  box-shadow: var(--yasgui-graph-shadow);\r\n  transition: background 0.2s ease;\r\n}\r\n.yasgui-graph-button:hover {\r\n  background: var(--yasgui-graph-button-hover);\r\n}\r\n.yasgui-graph-button:active {\r\n  transform: translateY(1px);\r\n}\r\n/* Settings panel */\r\n.yasgui-graph-settings-panel {\r\n  position: absolute;\r\n  top: 50px;\r\n  right: 10px;\r\n  z-index: 10001;\r\n  background: var(--yasgui-graph-button-bg, #4caf50);\r\n  background: var(--yasgui-bg-primary, #ffffff);\r\n  color: var(--yasgui-graph-text, #333333);\r\n  border: 1px solid var(--yasgui-border-color, #cccccc);\r\n  border-radius: 6px;\r\n  padding: 12px 14px;\r\n  min-width: 240px;\r\n  box-shadow: var(--yasgui-graph-shadow, 0 2px 8px rgba(0,0,0,0.2));\r\n  font-size: 13px;\r\n}\r\n.yasgui-graph-settings-title {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  margin-bottom: 10px;\r\n  padding-bottom: 6px;\r\n  border-bottom: 1px solid var(--yasgui-border-color, #cccccc);\r\n}\r\n.yasgui-graph-settings-section {\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  color: var(--yasgui-text-secondary, #888888);\r\n  margin: 10px 0 4px;\r\n}\r\n.yasgui-graph-settings-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding: 3px 0;\r\n  cursor: pointer;\r\n}\r\n.yasgui-graph-settings-row input[type='checkbox'] {\r\n  cursor: pointer;\r\n  accent-color: var(--yasgui-accent-color, #4caf50);\r\n}\r\n.yasgui-graph-settings-select {\r\n  font-size: 12px;\r\n  padding: 2px 4px;\r\n  border: 1px solid var(--yasgui-border-color, #cccccc);\r\n  border-radius: 3px;\r\n  background: var(--yasgui-bg-primary, #ffffff);\r\n  color: var(--yasgui-text-primary, #333333);\r\n  cursor: pointer;\r\n  max-width: 140px;\r\n}\r\n/* Settings button icon alignment */\r\n.yasgui-graph-settings-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n}\r\n.yasgui-graph-icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.yasgui-graph-icon svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n/* Modern tooltip styles - override vis-network defaults */\r\n.yasgui-graph-plugin-container .vis-tooltip {\r\n  display: none !important; /* Hide default vis-network tooltips */\r\n}\r\n/* Custom HTML tooltip container */\r\n.yasgui-graph-tooltip-container {\r\n  position: absolute;\r\n  background-color: rgba(28, 28, 32, 0.95);\r\n  color: #f0f0f0;\r\n  border: 1px solid rgba(255, 255, 255, 0.12);\r\n  border-radius: 6px;\r\n  padding: 8px 10px;\r\n  font-size: 11px;\r\n  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;\r\n  max-width: 340px;\r\n  white-space: normal;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\r\n  pointer-events: auto;\r\n  z-index: 1000;\r\n  user-select: text;\r\n  cursor: text;\r\n}\r\n.yasgui-graph-tooltip {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 3px;\r\n}\r\n.yasgui-tooltip-type {\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.6px;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  padding-bottom: 5px;\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.12);\r\n  margin-bottom: 3px;\r\n}\r\n.yasgui-tooltip-row {\r\n  display: flex;\r\n  gap: 8px;\r\n  align-items: baseline;\r\n  line-height: 1.5;\r\n}\r\n.yasgui-tooltip-key {\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  color: rgba(255, 255, 255, 0.55);\r\n  min-width: 58px;\r\n  flex-shrink: 0;\r\n}\r\n.yasgui-tooltip-val {\r\n  font-size: 11px;\r\n  color: #e8e8e8;\r\n  word-break: break-all;\r\n}\r\n/* Main entry point for all styles */\r\n/* This file will be imported by the TypeScript code */\r\n"],
+  "mappings": "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",
   "names": []
 }