@matdata/yasgui-graph-plugin 1.0.8 → 1.1.0

package/README.md

@@ -24,11 +24,11 @@ A YASGUI plugin for visualizing SPARQL CONSTRUCT and DESCRIBE query results as i
 ### NPM
 
 ```bash
-npm install @matdata/yasgui-graph-plugin @zazuko/yasgui vis-network
+npm install @matdata/yasgui-graph-plugin @matdata/yasgui vis-network
 ```
 
 ```javascript
-import Yasgui from '@zazuko/yasgui';
+import Yasgui from '@matdata/yasgui';
 import GraphPlugin from '@matdata/yasgui-graph-plugin';
 
 Yasgui.Yasr.registerPlugin('Graph', GraphPlugin);
@@ -40,8 +40,8 @@ const yasgui = new Yasgui(document.getElementById('yasgui'));
 
 ```html
 <!-- YASGUI -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4/build/yasgui.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4/build/yasgui.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@matdata/yasgui@5.0.0/build/yasgui.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui@5.0.0/build/yasgui.min.js"></script>
 
 <!-- Graph Plugin -->
 <script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui-graph-plugin/dist/yasgui-graph-plugin.min.js"></script>
@@ -197,8 +197,8 @@ Contributions welcome! Please follow the project constitution (`.specify/memory/
 ## 🙏 Acknowledgments
 
 - Built with [vis-network](https://visjs.github.io/vis-network/) for graph rendering
-- Integrates with [YASGUI](https://github.com/zazuko/yasgui) SPARQL editor
-- Follows the [yasgui-geo](https://github.com/zazuko/yasgui-geo) plugin pattern
+- Integrates with [YASGUI](https://github.com/matdata/yasgui) SPARQL editor
+- Follows the [yasgui-geo](https://github.com/matdata/yasgui-geo) plugin pattern
 
 ## 📊 Project Status
 

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

@@ -69,7 +69,7 @@ function truncateLabel(text, maxLength = 50) {
 }
 
 // src/networkConfig.js
-function getDefaultNetworkOptions() {
+function getDefaultNetworkOptions(themeColors) {
   return {
     autoResize: true,
     width: "100%",
@@ -100,27 +100,20 @@ function getDefaultNetworkOptions() {
     },
     nodes: {
       shape: "dot",
-      size: 20,
+      size: 10,
       font: {
-        size: 14,
-        color: "#000000",
-        align: "center",
-        vadjust: 0,
-        multi: false
+        size: 12,
+        color: themeColors.text
       },
-      borderWidth: 2,
-      borderWidthSelected: 3,
-      labelHighlightBold: true,
-      fixed: {
-        x: false,
-        y: false
-      }
+      borderWidth: 1,
+      borderWidthSelected: 2,
+      labelHighlightBold: true
     },
     edges: {
       arrows: {
         to: {
           enabled: true,
-          scaleFactor: 0.5
+          scaleFactor: 0.6
         }
       },
       smooth: {
@@ -129,7 +122,14 @@ function getDefaultNetworkOptions() {
       },
       font: {
         size: 12,
-        align: "middle"
+        align: "middle",
+        color: themeColors.edgeLabel,
+        background: themeColors.edgeLabelBackground,
+        strokeWidth: 0
+        // Remove white outline/halo
+      },
+      color: {
+        color: themeColors.edge
       }
     }
   };
@@ -162,24 +162,24 @@ function parseConstructResults(yasrResults) {
 }
 
 // src/colorUtils.js
-function getNodeColor(node, triples) {
+function getNodeColor(node, triples, themeColors) {
   if (node.uri && node.uri.startsWith("_:")) {
-    return "#c5c5c5ff";
+    return themeColors.blankNode;
   }
   if (node.type === "literal") {
-    return "#a6c8a6ff";
+    return themeColors.literal;
   }
   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 "#e15b13ff";
+    return themeColors.typeObject;
   }
-  return "#97C2FC";
+  return themeColors.uri;
 }
 
 // src/transformers.js
-function createNodeMap(triples, prefixMap) {
+function createNodeMap(triples, prefixMap, themeColors) {
   const nodeMap = /* @__PURE__ */ new Map();
   let nodeId = 1;
   triples.forEach((triple) => {
@@ -190,15 +190,10 @@ function createNodeMap(triples, prefixMap) {
         id: nodeId++,
         uri: triple.subject,
         label,
-        color: getNodeColor({ uri: triple.subject, type: "uri" }, triples),
+        color: getNodeColor({ uri: triple.subject, type: "uri" }, triples, themeColors),
         type: "uri",
         fullValue: triple.subject,
-        title: isBlankNode ? triple.subject : applyPrefix(triple.subject, prefixMap),
-        font: {
-          vadjust: -30,
-          // Position label above the node
-          align: "center"
-        }
+        title: isBlankNode ? triple.subject : applyPrefix(triple.subject, prefixMap)
       });
     }
     const objValue = triple.object.value;
@@ -225,16 +220,12 @@ function createNodeMap(triples, prefixMap) {
         label,
         color: getNodeColor(
           { uri: objValue, type: isLiteral ? "literal" : "uri" },
-          triples
+          triples,
+          themeColors
         ),
         type: isLiteral ? "literal" : "uri",
         fullValue,
-        title,
-        font: {
-          vadjust: -30,
-          // Position label above the node
-          align: "center"
-        }
+        title
       });
     }
   });
@@ -264,8 +255,8 @@ function createEdgesArray(triples, nodeMap, prefixMap) {
   });
   return edges;
 }
-function triplesToGraph(triples, prefixMap) {
-  const nodeMap = createNodeMap(triples, prefixMap);
+function triplesToGraph(triples, prefixMap, themeColors) {
+  const nodeMap = createNodeMap(triples, prefixMap, themeColors);
   const edges = createEdgesArray(triples, nodeMap, prefixMap);
   const nodes = Array.from(nodeMap.values());
   return { nodes, edges };
@@ -29972,6 +29963,66 @@ Network.prototype.getOptionsFromConfigurator = function() {
   return options;
 };
 
+// src/themeUtils.js
+function getCurrentTheme() {
+  return document.documentElement.getAttribute("data-theme") || "light";
+}
+function getThemeNodeColors(theme) {
+  if (theme === "dark") {
+    return {
+      uri: "#97C2FC",
+      // Light blue for URIs
+      literal: "#a6c8a6ff",
+      // Light green for literals
+      blankNode: "#888888",
+      // Medium grey for blank nodes (darker than light mode)
+      typeObject: "#e15b13ff",
+      // Orange for rdf:type objects
+      text: "#e0e0e0",
+      // Light text for dark backgrounds
+      edge: "#666666",
+      // Darker edges
+      edgeLabel: "#cccccc",
+      // Lighter edge labels
+      edgeLabelBackground: "rgba(30, 30, 30, 0.8)"
+      // Dark semi-transparent background
+    };
+  }
+  return {
+    uri: "#97C2FC",
+    // Light blue for URIs
+    literal: "#a6c8a6ff",
+    // Light green for literals
+    blankNode: "#c5c5c5ff",
+    // Light grey for blank nodes
+    typeObject: "#e15b13ff",
+    // Orange for rdf:type objects
+    text: "#000000",
+    // Black text
+    edge: "#cccccc",
+    // Light grey edges
+    edgeLabel: "#666666",
+    // Dark grey edge labels
+    edgeLabelBackground: "rgba(255, 255, 255, 0.8)"
+    // Light semi-transparent background
+  };
+}
+function watchThemeChanges(callback) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === "data-theme") {
+        const theme = getCurrentTheme();
+        callback(theme);
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"]
+  });
+  return observer;
+}
+
 // src/GraphPlugin.js
 function getVisNetwork() {
   return { Network, DataSet };
@@ -29980,6 +30031,8 @@ var GraphPlugin = class {
   constructor(yasr) {
     this.yasr = yasr;
     this.network = null;
+    this.currentTheme = getCurrentTheme();
+    this.themeObserver = null;
   }
   /**
    * Plugin priority (higher = shown first in tabs)
@@ -30022,7 +30075,9 @@ var GraphPlugin = class {
         return;
       }
       const prefixMap = extractPrefixes(this.yasr);
-      const { nodes, edges } = triplesToGraph(triples, prefixMap);
+      this.currentTheme = getCurrentTheme();
+      const themeColors = getThemeNodeColors(this.currentTheme);
+      const { nodes, edges } = triplesToGraph(triples, prefixMap, themeColors);
       const container = document.createElement("div");
       container.style.width = "100%";
       container.style.height = "600px";
@@ -30032,7 +30087,11 @@ var GraphPlugin = class {
       const { Network: Network2, DataSet: DataSet2 } = getVisNetwork();
       const nodesDataSet = new DataSet2(nodes);
       const edgesDataSet = new DataSet2(edges);
-      const options = getDefaultNetworkOptions();
+      const options = getDefaultNetworkOptions(themeColors);
+      this.nodesDataSet = nodesDataSet;
+      this.edgesDataSet = edgesDataSet;
+      this.triples = triples;
+      this.prefixMap = prefixMap;
       this.network = new Network2(
         container,
         { nodes: nodesDataSet, edges: edgesDataSet },
@@ -30043,6 +30102,11 @@ var GraphPlugin = class {
         this.network.setOptions({ physics: { enabled: true } });
         this.networkReady = true;
       });
+      if (!this.themeObserver) {
+        this.themeObserver = watchThemeChanges((newTheme) => {
+          this.applyTheme(newTheme);
+        });
+      }
       const controls = document.createElement("div");
       controls.style.position = "absolute";
       controls.style.top = "10px";
@@ -30078,16 +30142,57 @@ var GraphPlugin = class {
       this.yasr.resultsEl.innerHTML = '<div style="padding: 20px; color: red;">Error rendering graph. See console for details.</div>';
     }
   }
+  /**
+   * Apply theme to existing network
+   * @param {string} newTheme - 'light' or 'dark'
+   */
+  applyTheme(newTheme) {
+    if (!this.network || !this.nodesDataSet || !this.triples || !this.prefixMap) {
+      return;
+    }
+    this.currentTheme = newTheme;
+    const themeColors = getThemeNodeColors(newTheme);
+    const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors);
+    this.nodesDataSet.clear();
+    this.nodesDataSet.add(nodes);
+    this.edgesDataSet.clear();
+    this.edgesDataSet.add(edges);
+    const options = getDefaultNetworkOptions(themeColors);
+    this.network.setOptions(options);
+  }
   /**
    * Get icon for plugin tab
    * @returns {Element} Icon element
    */
   getIcon() {
-    const icon = document.createElement("span");
-    icon.className = "fas fa-project-diagram";
+    const icon = document.createElement("div");
     icon.setAttribute("aria-label", "Graph visualization");
+    icon.style.display = "inline-flex";
+    icon.style.alignItems = "center";
+    icon.style.justifyContent = "center";
+    icon.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="3" cy="3" r="2" />
+      <circle cx="13" cy="3" r="2" />
+      <circle cx="8" cy="13" r="2" />
+      <line x1="4.5" y1="4" x2="7" y2="11.5" stroke="currentColor" stroke-width="1.5" />
+      <line x1="11.5" y1="4" x2="9" y2="11.5" stroke="currentColor" stroke-width="1.5" />
+      <line x1="5" y1="3" x2="11" y2="3" stroke="currentColor" stroke-width="1.5" />
+    </svg>`;
     return icon;
   }
+  /**
+   * Cleanup when plugin is destroyed
+   */
+  destroy() {
+    if (this.themeObserver) {
+      this.themeObserver.disconnect();
+      this.themeObserver = null;
+    }
+    if (this.network) {
+      this.network.destroy();
+      this.network = null;
+    }
+  }
 };
 var GraphPlugin_default = GraphPlugin;