@matdata/yasgui-graph-plugin 1.5.0 → 1.6.0

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

@@ -116,6 +116,40 @@ function getDefaultNetworkOptions(themeColors, settings) {
 }
 
 // src/parsers.ts
+async function parseBackgroundQueryResponse(response) {
+  var _a, _b;
+  if (!response) return [];
+  try {
+    let data2;
+    if (typeof response.json === "function") {
+      data2 = await response.json();
+    } else if (typeof response.data === "string") {
+      data2 = JSON.parse(response.data);
+    } else if (typeof response === "object") {
+      data2 = response;
+    } else {
+      return [];
+    }
+    const bindings = (_b = (_a = data2 == null ? void 0 : data2.results) == null ? void 0 : _a.bindings) != null ? _b : [];
+    const triples = [];
+    for (const binding of bindings) {
+      if (!binding.subject || !binding.predicate || !binding.object || typeof binding.subject.value !== "string" || typeof binding.predicate.value !== "string" || typeof binding.object.value !== "string") continue;
+      triples.push({
+        subject: binding.subject.value,
+        predicate: binding.predicate.value,
+        object: {
+          value: binding.object.value,
+          type: binding.object.type || "uri",
+          datatype: binding.object.datatype,
+          lang: binding.object["xml:lang"]
+        }
+      });
+    }
+    return triples;
+  } catch (e) {
+    return [];
+  }
+}
 function parseConstructResults(yasrResults) {
   const triples = [];
   if (!yasrResults || !yasrResults.getBindings) {
@@ -29988,10 +30022,16 @@ function saveSettings(settings) {
 }
 
 // src/GraphPlugin.ts
+var LOADING_BORDER_WIDTH = 4;
+var LOADING_BORDER_COLOR = "#ffa500";
+var EXPANDED_BORDER_WIDTH = 3;
+var DEFAULT_BORDER_WIDTH = 2;
 var GraphPlugin = class {
   constructor(yasr) {
     this.settingsPanelOpen = false;
     this.clickOutsideHandler = null;
+    this.expansionAbortController = null;
+    this.uriToNodeId = /* @__PURE__ */ new Map();
     this.yasr = yasr;
     this.network = null;
     this.currentTheme = getCurrentTheme();
@@ -30015,6 +30055,12 @@ var GraphPlugin = class {
   static get label() {
     return "Graph";
   }
+  /**
+   * Help/documentation URL
+   */
+  static get helpReference() {
+    return "https://yasgui-doc.matdata.eu/docs/user-guide#graph-plugin";
+  }
   /**
    * Check if plugin can handle the current results
    * @returns True if results are from CONSTRUCT or DESCRIBE query
@@ -30036,6 +30082,12 @@ var GraphPlugin = class {
    */
   draw() {
     const wasPanelOpen = this.settingsPanelOpen;
+    if (this.expansionAbortController) {
+      this.expansionAbortController.abort();
+      this.expansionAbortController = null;
+    }
+    this.expandedNodes = /* @__PURE__ */ new Set();
+    this.uriToNodeId = /* @__PURE__ */ new Map();
     this.yasr.resultsEl.innerHTML = "";
     try {
       this.triples = parseConstructResults(this.yasr.results);
@@ -30092,6 +30144,13 @@ var GraphPlugin = class {
           this.nodesDataSet.update(updates);
         }
       });
+      this.setupNodeExpansion();
+      this.uriToNodeId = /* @__PURE__ */ new Map();
+      this.nodesDataSet.get().forEach((node) => {
+        if (node.uri) {
+          this.uriToNodeId.set(node.uri, node.id);
+        }
+      });
       if (!this.themeObserver) {
         this.themeObserver = watchThemeChanges((newTheme) => {
           this.applyTheme(newTheme);
@@ -30474,7 +30533,119 @@ var GraphPlugin = class {
     return panel;
   }
   /**
-   * Get icon for plugin tab
+   * Setup double-click handler for node expansion
+   */
+  setupNodeExpansion() {
+    if (!this.network) return;
+    this.network.on("doubleClick", (params) => {
+      if (params.nodes.length === 0) return;
+      const nodeId = params.nodes[0];
+      const node = this.nodesDataSet.get(nodeId);
+      if (node && node.uri && !node.uri.startsWith("_:")) {
+        this.expandNode(node.uri);
+      }
+    });
+  }
+  /**
+   * Expand a node by executing a DESCRIBE query for the given URI and
+   * merging the returned triples into the existing graph.
+   * @param uri - URI of the node to expand
+   */
+  async expandNode(uri) {
+    if (!this.yasr.executeQuery) {
+      console.warn("yasgui-graph-plugin: background query execution not available (yasr.executeQuery is not configured)");
+      return;
+    }
+    if (!this.triples || !this.prefixMap) return;
+    if (this.expansionAbortController) {
+      this.expansionAbortController.abort();
+    }
+    const controller = new AbortController();
+    this.expansionAbortController = controller;
+    const nodeId = this.uriToNodeId.get(uri);
+    let originalColor = void 0;
+    let originalBorderWidth = void 0;
+    if (nodeId !== void 0) {
+      const node = this.nodesDataSet.get(nodeId);
+      if (node) {
+        originalColor = node.color;
+        originalBorderWidth = node.borderWidth;
+      }
+      this.nodesDataSet.update({
+        id: nodeId,
+        borderWidth: LOADING_BORDER_WIDTH,
+        color: typeof originalColor === "object" && originalColor !== null ? { ...originalColor, border: LOADING_BORDER_COLOR } : { border: LOADING_BORDER_COLOR, background: originalColor != null ? originalColor : void 0 }
+      });
+    }
+    const restoreNode = (borderWidth) => {
+      if (nodeId !== void 0) {
+        this.nodesDataSet.update({ id: nodeId, borderWidth, color: originalColor });
+      }
+    };
+    try {
+      const response = await this.yasr.executeQuery(`DESCRIBE <${uri}>`, {
+        acceptHeader: "application/sparql-results+json",
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) {
+        restoreNode(originalBorderWidth != null ? originalBorderWidth : DEFAULT_BORDER_WIDTH);
+        return;
+      }
+      const newTriples = await parseBackgroundQueryResponse(response);
+      if (controller.signal.aborted) {
+        restoreNode(originalBorderWidth != null ? originalBorderWidth : DEFAULT_BORDER_WIDTH);
+        return;
+      }
+      const existingKeys = new Set(
+        this.triples.map((t) => `${t.subject}|${t.predicate}|${t.object.value}`)
+      );
+      const uniqueNew = newTriples.filter(
+        (t) => !existingKeys.has(`${t.subject}|${t.predicate}|${t.object.value}`)
+      );
+      if (uniqueNew.length > 0) {
+        this.triples = [...this.triples, ...uniqueNew];
+        this.mergeNewTriples();
+      }
+      restoreNode(EXPANDED_BORDER_WIDTH);
+    } catch (error) {
+      if ((error == null ? void 0 : error.name) === "AbortError") {
+        restoreNode(originalBorderWidth != null ? originalBorderWidth : DEFAULT_BORDER_WIDTH);
+        return;
+      }
+      console.error("yasgui-graph-plugin: error expanding node", uri, error);
+      restoreNode(originalBorderWidth != null ? originalBorderWidth : DEFAULT_BORDER_WIDTH);
+    }
+  }
+  /**
+   * Incrementally add new triples to the vis-network DataSets without a full redraw.
+   * New nodes and edges are added; existing ones are left untouched.
+   * Expects `this.triples` to already include the new triples.
+   */
+  mergeNewTriples() {
+    if (!this.triples || !this.prefixMap || !this.nodesDataSet || !this.edgesDataSet) return;
+    const themeColors = getThemeNodeColors(this.currentTheme);
+    const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors, this.settings);
+    const existingValues = new Set(this.nodesDataSet.get().map((n) => n.fullValue));
+    const nodesToAdd = nodes.filter((n) => !existingValues.has(n.fullValue));
+    const existingEdgeKeys = new Set(
+      this.edgesDataSet.get().map((e) => `${e.from}|${e.predicate}|${e.to}`)
+    );
+    const edgesToAdd = edges.filter(
+      (e) => !existingEdgeKeys.has(`${e.from}|${e.predicate}|${e.to}`)
+    );
+    if (nodesToAdd.length > 0) {
+      this.nodesDataSet.add(nodesToAdd);
+      nodesToAdd.forEach((n) => {
+        if (n.uri != null) {
+          this.uriToNodeId.set(n.uri, n.id);
+        }
+      });
+    }
+    if (edgesToAdd.length > 0) {
+      this.edgesDataSet.add(edgesToAdd);
+    }
+  }
+  /**
    * @returns Icon element
    */
   getIcon() {
@@ -30496,6 +30667,10 @@ var GraphPlugin = class {
    */
   destroy() {
     this.removeClickOutsideHandler();
+    if (this.expansionAbortController) {
+      this.expansionAbortController.abort();
+      this.expansionAbortController = null;
+    }
     if (this.themeObserver) {
       this.themeObserver.disconnect();
       this.themeObserver = null;