@matdata/yasgui-graph-plugin 1.4.1 → 1.5.0

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

@@ -41,14 +41,18 @@ function truncateLabel(text, maxLength = 50) {
 }
 
 // src/networkConfig.ts
-function getDefaultNetworkOptions(themeColors) {
+function getDefaultNetworkOptions(themeColors, settings) {
+  const curved = !settings || settings.edgeStyle !== "straight";
+  const nodeSizeMap = { small: 6, medium: 10, large: 16 };
+  const nodeSize = (settings == null ? void 0 : settings.nodeSize) ? nodeSizeMap[settings.nodeSize] : 10;
+  const showNodeLabels = (settings == null ? void 0 : settings.showNodeLabels) !== false;
   return {
     // Configure canvas background color based on theme
     configure: {
       enabled: false
     },
     physics: {
-      enabled: true,
+      enabled: (settings == null ? void 0 : settings.physicsEnabled) !== false,
       stabilization: {
         enabled: true,
         iterations: 200,
@@ -68,14 +72,16 @@ function getDefaultNetworkOptions(themeColors) {
       dragView: true,
       zoomView: true,
       hover: true,
-      tooltipDelay: 300
+      tooltipDelay: 300,
       // 300ms hover delay per spec
+      hideEdgesOnDrag: false,
+      hideEdgesOnZoom: false
     },
     nodes: {
       shape: "dot",
-      size: 10,
+      size: nodeSize,
       font: {
-        size: 12,
+        size: showNodeLabels ? 12 : 0,
         color: themeColors.text
       },
       borderWidth: 1,
@@ -90,7 +96,7 @@ function getDefaultNetworkOptions(themeColors) {
         }
       },
       smooth: {
-        enabled: true,
+        enabled: curved,
         type: "dynamic",
         roundness: 0.5
       },
@@ -152,10 +158,129 @@ function getNodeColor(node, triples, themeColors) {
   return themeColors.uri;
 }
 
+// src/predicateIcons.ts
+var PREDICATE_ICONS = {
+  // RDF core
+  "http://www.w3.org/1999/02/22-rdf-syntax-ns#type": "a",
+  // Turtle's "a" shorthand
+  "http://www.w3.org/1999/02/22-rdf-syntax-ns#value": "val",
+  // RDFS
+  "http://www.w3.org/2000/01/rdf-schema#label": "lbl",
+  "http://www.w3.org/2000/01/rdf-schema#comment": "cmt",
+  "http://www.w3.org/2000/01/rdf-schema#subClassOf": "\u2282",
+  // ⊂
+  "http://www.w3.org/2000/01/rdf-schema#subPropertyOf": "\u2286",
+  // ⊆
+  "http://www.w3.org/2000/01/rdf-schema#domain": "dom",
+  "http://www.w3.org/2000/01/rdf-schema#range": "rng",
+  "http://www.w3.org/2000/01/rdf-schema#seeAlso": "see",
+  "http://www.w3.org/2000/01/rdf-schema#isDefinedBy": "idb",
+  // OWL
+  "http://www.w3.org/2002/07/owl#sameAs": "\u2261",
+  // ≡
+  "http://www.w3.org/2002/07/owl#equivalentClass": "\u2245",
+  // ≅
+  "http://www.w3.org/2002/07/owl#inverseOf": "\u21C4",
+  // ⇄
+  "http://www.w3.org/2002/07/owl#disjointWith": "\u2260",
+  // ≠
+  // SKOS
+  "http://www.w3.org/2004/02/skos/core#prefLabel": "\u2605",
+  // ★
+  "http://www.w3.org/2004/02/skos/core#altLabel": "\u2606",
+  // ☆
+  "http://www.w3.org/2004/02/skos/core#definition": "def",
+  "http://www.w3.org/2004/02/skos/core#broader": "\u2191",
+  // ↑
+  "http://www.w3.org/2004/02/skos/core#narrower": "\u2193",
+  // ↓
+  "http://www.w3.org/2004/02/skos/core#related": "\u2194",
+  // ↔
+  "http://www.w3.org/2004/02/skos/core#note": "note",
+  "http://www.w3.org/2004/02/skos/core#exactMatch": "\u2261",
+  // ≡
+  "http://www.w3.org/2004/02/skos/core#closeMatch": "\u2248",
+  // ≈
+  // Dublin Core Terms
+  "http://purl.org/dc/terms/title": "ttl",
+  "http://purl.org/dc/terms/description": "dsc",
+  "http://purl.org/dc/terms/created": "crt",
+  "http://purl.org/dc/terms/modified": "mod",
+  "http://purl.org/dc/terms/creator": "by",
+  "http://purl.org/dc/terms/subject": "sbj",
+  // FOAF
+  "http://xmlns.com/foaf/0.1/name": "nm",
+  "http://xmlns.com/foaf/0.1/knows": "\u27F7",
+  // ⟷
+  "http://xmlns.com/foaf/0.1/member": "mbr",
+  // Schema.org
+  "http://schema.org/name": "nm",
+  "http://schema.org/description": "dsc"
+};
+function getPredicateIcon(predicateUri) {
+  return PREDICATE_ICONS[predicateUri];
+}
+
 // src/transformers.ts
-function createNodeMap(triples, prefixMap, themeColors) {
+var RDF_TYPE = "http://www.w3.org/1999/02/22-rdf-syntax-ns#type";
+var SCHEMA_IMAGE = "https://schema.org/image";
+var SCHEMA_ICON = "https://schema.org/icon";
+var RDFS_LABEL = "http://www.w3.org/2000/01/rdf-schema#label";
+var RDFS_SUBCLASSOF = "http://www.w3.org/2000/01/rdf-schema#subClassOf";
+var SUPPRESSED_PREDICATES = /* @__PURE__ */ new Set([SCHEMA_IMAGE, SCHEMA_ICON, RDFS_LABEL]);
+function appendTooltipRows(title, rows) {
+  const closingTag = "</div>";
+  const idx = title.lastIndexOf(closingTag);
+  if (idx === -1) return title + rows;
+  return title.slice(0, idx) + rows + closingTag;
+}
+function buildVisualTooltipRow(key, value) {
+  return `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">${escapeHtml(key)}</span><span class="yasgui-tooltip-val">${escapeHtml(value)}</span></div>`;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function createCompactNodeTooltipHTML(uri, triples, prefixMap) {
+  const isBlankNode = uri.startsWith("_:");
+  let rows = `<div class="yasgui-tooltip-type">${isBlankNode ? "Blank Node" : "URI"}</div>`;
+  rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">${isBlankNode ? "Identifier" : "Full URI"}</span><span class="yasgui-tooltip-val">${escapeHtml(uri)}</span></div>`;
+  triples.filter((t) => t.subject === uri && t.predicate === RDF_TYPE).forEach((t) => {
+    const typeLabel = applyPrefix(t.object.value, prefixMap);
+    rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">rdf:type</span><span class="yasgui-tooltip-val">${escapeHtml(typeLabel)}</span></div>`;
+  });
+  triples.filter((t) => t.subject === uri && t.object.type === "literal").forEach((t) => {
+    const predLabel = applyPrefix(t.predicate, prefixMap);
+    rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">${escapeHtml(predLabel)}</span><span class="yasgui-tooltip-val">${escapeHtml(t.object.value)}</span></div>`;
+  });
+  return `<div class="yasgui-graph-tooltip">${rows}</div>`;
+}
+function createNodeTooltipHTML(nodeType, value, datatype, lang, prefixMap) {
+  const typeLabel = nodeType === "uri" ? "URI" : nodeType === "literal" ? "Literal" : "Blank Node";
+  let rows = `<div class="yasgui-tooltip-type">${typeLabel}</div>`;
+  if (nodeType === "literal") {
+    rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Value</span><span class="yasgui-tooltip-val">${escapeHtml(value)}</span></div>`;
+    if (datatype) {
+      const dtLabel = prefixMap ? applyPrefix(datatype, prefixMap) : datatype;
+      rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Datatype</span><span class="yasgui-tooltip-val">${escapeHtml(dtLabel)}</span></div>`;
+    }
+    if (lang) {
+      rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Language</span><span class="yasgui-tooltip-val">${escapeHtml(lang)}</span></div>`;
+    }
+  } else if (nodeType === "uri") {
+    rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Full URI</span><span class="yasgui-tooltip-val">${escapeHtml(value)}</span></div>`;
+  } else if (nodeType === "bnode") {
+    rows += `<div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Identifier</span><span class="yasgui-tooltip-val">${escapeHtml(value)}</span></div>`;
+  }
+  return `<div class="yasgui-graph-tooltip">${rows}</div>`;
+}
+function createEdgeTooltipHTML(predicateUri) {
+  const rows = `<div class="yasgui-tooltip-type">Predicate</div><div class="yasgui-tooltip-row"><span class="yasgui-tooltip-key">Full URI</span><span class="yasgui-tooltip-val">${escapeHtml(predicateUri)}</span></div>`;
+  return `<div class="yasgui-graph-tooltip">${rows}</div>`;
+}
+function createNodeMap(triples, prefixMap, themeColors, settings) {
   const nodeMap = /* @__PURE__ */ new Map();
   let nodeId = 1;
+  const sizeMultiplier = (settings == null ? void 0 : settings.nodeSize) === "small" ? 0.5 : (settings == null ? void 0 : settings.nodeSize) === "large" ? 2 : 1;
   triples.forEach((triple) => {
     if (!nodeMap.has(triple.subject)) {
       const isBlankNode = triple.subject.startsWith("_:");
@@ -167,11 +292,18 @@ function createNodeMap(triples, prefixMap, themeColors) {
         color: getNodeColor({ uri: triple.subject, type: "uri" }, triples, themeColors),
         type: "uri",
         fullValue: triple.subject,
-        title: isBlankNode ? triple.subject : applyPrefix(triple.subject, prefixMap)
+        size: 10 * sizeMultiplier,
+        title: createNodeTooltipHTML(
+          isBlankNode ? "bnode" : "uri",
+          triple.subject,
+          void 0,
+          void 0,
+          prefixMap
+        )
       });
     }
     const objValue = triple.object.value;
-    if (!nodeMap.has(objValue)) {
+    if (!nodeMap.has(objValue) && !SUPPRESSED_PREDICATES.has(triple.predicate)) {
       const isLiteral = triple.object.type === "literal";
       const isBlankNode = !isLiteral && objValue.startsWith("_:");
       let label;
@@ -180,15 +312,21 @@ function createNodeMap(triples, prefixMap, themeColors) {
       if (isLiteral) {
         label = truncateLabel(objValue);
         fullValue = objValue;
-        title = triple.object.datatype ? `"${objValue}"^^${applyPrefix(triple.object.datatype, prefixMap)}` : `"${objValue}"`;
+        title = createNodeTooltipHTML(
+          "literal",
+          objValue,
+          triple.object.datatype,
+          triple.object.lang,
+          prefixMap
+        );
       } else if (isBlankNode) {
         label = objValue;
         fullValue = objValue;
-        title = objValue;
+        title = createNodeTooltipHTML("bnode", objValue);
       } else {
         label = truncateLabel(applyPrefix(objValue, prefixMap));
         fullValue = objValue;
-        title = applyPrefix(objValue, prefixMap);
+        title = createNodeTooltipHTML("uri", objValue, void 0, void 0, prefixMap);
       }
       nodeMap.set(objValue, {
         id: nodeId++,
@@ -201,39 +339,157 @@ function createNodeMap(triples, prefixMap, themeColors) {
         ),
         type: isLiteral ? "literal" : "uri",
         fullValue,
+        size: (isLiteral ? 5 : 10) * sizeMultiplier,
         title
       });
     }
   });
   return nodeMap;
 }
-function createEdgesArray(triples, nodeMap, prefixMap) {
+function createEdgesArray(triples, nodeMap, prefixMap, settings) {
   const edges = [];
   const edgeSet = /* @__PURE__ */ new Set();
   triples.forEach((triple) => {
+    var _a, _b;
+    if (SUPPRESSED_PREDICATES.has(triple.predicate)) return;
     const fromNode = nodeMap.get(triple.subject);
     const toNode = nodeMap.get(triple.object.value);
     if (!fromNode || !toNode) return;
     const edgeKey = `${fromNode.id}-${triple.predicate}-${toNode.id}`;
     if (!edgeSet.has(edgeKey)) {
       edgeSet.add(edgeKey);
+      let edgeLabel;
+      const predicateDisplay = (_a = settings == null ? void 0 : settings.predicateDisplay) != null ? _a : "label";
+      if (predicateDisplay === "none") {
+        edgeLabel = "";
+      } else if (predicateDisplay === "icon") {
+        edgeLabel = (_b = getPredicateIcon(triple.predicate)) != null ? _b : truncateLabel(applyPrefix(triple.predicate, prefixMap));
+      } else {
+        edgeLabel = truncateLabel(applyPrefix(triple.predicate, prefixMap));
+      }
       edges.push({
         id: `edge_${fromNode.id}_${toNode.id}_${edges.length}`,
         from: fromNode.id,
         to: toNode.id,
-        label: truncateLabel(applyPrefix(triple.predicate, prefixMap)),
+        label: edgeLabel,
         predicate: triple.predicate,
-        title: applyPrefix(triple.predicate, prefixMap),
+        title: createEdgeTooltipHTML(triple.predicate),
         arrows: "to"
       });
     }
   });
   return edges;
 }
-function triplesToGraph(triples, prefixMap, themeColors) {
-  const nodeMap = createNodeMap(triples, prefixMap, themeColors);
-  const edges = createEdgesArray(triples, nodeMap, prefixMap);
-  const nodes = Array.from(nodeMap.values());
+function isNodeVisible(node, triples, settings) {
+  if (node.uri && node.uri.startsWith("_:")) {
+    return true;
+  }
+  if (!settings.compactMode) {
+    return true;
+  }
+  if (node.type === "literal") {
+    return false;
+  }
+  const isClass = triples.some(
+    (t) => t.predicate === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type" && t.object.value === node.uri
+  );
+  if (isClass) {
+    return false;
+  }
+  return true;
+}
+function triplesToGraph(triples, prefixMap, themeColors, settings) {
+  const nodeMap = createNodeMap(triples, prefixMap, themeColors, settings);
+  const sizeMultiplier = (settings == null ? void 0 : settings.nodeSize) === "small" ? 0.5 : (settings == null ? void 0 : settings.nodeSize) === "large" ? 2 : 1;
+  const tripleIndex = /* @__PURE__ */ new Map();
+  for (const t of triples) {
+    if (!tripleIndex.has(t.subject)) tripleIndex.set(t.subject, /* @__PURE__ */ new Map());
+    const sp = tripleIndex.get(t.subject);
+    if (!sp.has(t.predicate)) sp.set(t.predicate, []);
+    sp.get(t.predicate).push(t.object.value);
+  }
+  function getNodeVisualIdx(uri) {
+    const sp = tripleIndex.get(uri);
+    if (!sp) return {};
+    const icons = sp.get(SCHEMA_ICON);
+    if (icons == null ? void 0 : icons.length) return { icon: icons[0] };
+    const images = sp.get(SCHEMA_IMAGE);
+    if (images == null ? void 0 : images.length) return { image: images[0] };
+    return {};
+  }
+  function resolveCompactVisualIdx(uri) {
+    var _a, _b, _c, _d;
+    const own = getNodeVisualIdx(uri);
+    if (own.icon || own.image) return own;
+    const typeUris = (_b = (_a = tripleIndex.get(uri)) == null ? void 0 : _a.get(RDF_TYPE)) != null ? _b : [];
+    for (const typeUri of typeUris) {
+      const cv = getNodeVisualIdx(typeUri);
+      if (cv.icon || cv.image) return cv;
+    }
+    for (const typeUri of typeUris) {
+      const superUris = (_d = (_c = tripleIndex.get(typeUri)) == null ? void 0 : _c.get(RDFS_SUBCLASSOF)) != null ? _d : [];
+      for (const superUri of superUris) {
+        const sv = getNodeVisualIdx(superUri);
+        if (sv.icon || sv.image) return sv;
+      }
+    }
+    return {};
+  }
+  if (settings == null ? void 0 : settings.compactMode) {
+    const subjects = new Set(triples.map((t) => t.subject));
+    subjects.forEach((subjectUri) => {
+      const node = nodeMap.get(subjectUri);
+      if (node) {
+        node.title = createCompactNodeTooltipHTML(subjectUri, triples, prefixMap);
+      }
+    });
+  }
+  nodeMap.forEach((node) => {
+    var _a, _b;
+    if (!node.uri || node.type === "literal") return;
+    const visual = (settings == null ? void 0 : settings.compactMode) ? resolveCompactVisualIdx(node.uri) : getNodeVisualIdx(node.uri);
+    const rdfsLabel = (_b = (_a = tripleIndex.get(node.uri)) == null ? void 0 : _a.get(RDFS_LABEL)) == null ? void 0 : _b[0];
+    if (visual.icon) {
+      node.shape = "text";
+      node.label = rdfsLabel ? `${visual.icon}
+${rdfsLabel}` : visual.icon;
+      node.font = { size: 14 * sizeMultiplier };
+      if (!(settings == null ? void 0 : settings.compactMode)) {
+        node.title = appendTooltipRows(node.title, buildVisualTooltipRow("Icon", visual.icon));
+      }
+    } else if (visual.image) {
+      let imageAllowed = false;
+      try {
+        const parsed = new URL(visual.image);
+        imageAllowed = parsed.protocol === "http:" || parsed.protocol === "https:";
+      } catch (e) {
+      }
+      if (imageAllowed) {
+        node.shape = "circularImage";
+        node.image = visual.image;
+      }
+      if (rdfsLabel) {
+        node.label = rdfsLabel;
+        node.font = { size: 14 * sizeMultiplier };
+      }
+      if (!(settings == null ? void 0 : settings.compactMode)) {
+        node.title = appendTooltipRows(node.title, buildVisualTooltipRow("Image", visual.image));
+      }
+    } else if (rdfsLabel) {
+      node.label = rdfsLabel;
+    }
+    if (rdfsLabel && !(settings == null ? void 0 : settings.compactMode)) {
+      node.title = appendTooltipRows(node.title, buildVisualTooltipRow("rdfs:label", rdfsLabel));
+    }
+  });
+  const visibleNodeIds = /* @__PURE__ */ new Set();
+  nodeMap.forEach((node) => {
+    if (!settings || isNodeVisible(node, triples, settings)) {
+      visibleNodeIds.add(node.id);
+    }
+  });
+  const edges = createEdgesArray(triples, nodeMap, prefixMap, settings).filter((e) => visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to));
+  const nodes = Array.from(nodeMap.values()).filter((n) => visibleNodeIds.has(n.id));
   return { nodes, edges };
 }
 
@@ -29704,9 +29960,38 @@ function watchThemeChanges(callback) {
   return observer;
 }
 
+// src/settings.ts
+var DEFAULT_SETTINGS = {
+  edgeStyle: "curved",
+  compactMode: false,
+  predicateDisplay: "icon",
+  showNodeLabels: true,
+  physicsEnabled: true,
+  nodeSize: "medium"
+};
+var STORAGE_KEY = "yasgui-graph-plugin-settings";
+function loadSettings() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
+    }
+  } catch (e) {
+  }
+  return { ...DEFAULT_SETTINGS };
+}
+function saveSettings(settings) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch (e) {
+  }
+}
+
 // src/GraphPlugin.ts
 var GraphPlugin = class {
   constructor(yasr) {
+    this.settingsPanelOpen = false;
+    this.clickOutsideHandler = null;
     this.yasr = yasr;
     this.network = null;
     this.currentTheme = getCurrentTheme();
@@ -29716,6 +30001,7 @@ var GraphPlugin = class {
     this.edgesDataSet = null;
     this.triples = null;
     this.prefixMap = null;
+    this.settings = loadSettings();
   }
   /**
    * Plugin priority (higher = shown first in tabs)
@@ -29749,6 +30035,7 @@ var GraphPlugin = class {
    * Render the graph visualization
    */
   draw() {
+    const wasPanelOpen = this.settingsPanelOpen;
     this.yasr.resultsEl.innerHTML = "";
     try {
       this.triples = parseConstructResults(this.yasr.results);
@@ -29765,24 +30052,45 @@ var GraphPlugin = class {
       this.prefixMap = extractPrefixes(this.yasr);
       this.currentTheme = getCurrentTheme();
       const themeColors = getThemeNodeColors(this.currentTheme);
-      const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors);
+      const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors, this.settings);
       const container = document.createElement("div");
       container.className = "yasgui-graph-plugin-container";
       container.id = "yasgui-graph-plugin-container";
       this.yasr.resultsEl.appendChild(container);
       this.nodesDataSet = new DataSet(nodes);
       this.edgesDataSet = new DataSet(edges);
-      const options = getDefaultNetworkOptions(themeColors);
+      const options = getDefaultNetworkOptions(themeColors, this.settings);
       this.network = new Network(
         container,
         { nodes: this.nodesDataSet, edges: this.edgesDataSet },
         options
       );
+      this.setupHtmlTooltips(container);
       this.applyCanvasBackground(themeColors.background);
-      this.network.on("stabilizationIterationsDone", () => {
-        this.network.setOptions({ physics: { enabled: true } });
-        this.network.fit({ maxZoomLevel: 3 });
-        this.setupContainerResize(container);
+      this.setupContainerResize(container);
+      if (this.settings.physicsEnabled) {
+        this.network.on("stabilizationIterationsDone", () => {
+          this.network.setOptions({ physics: { enabled: true } });
+          this.network.fit({ maxZoomLevel: 3 });
+        });
+      } else {
+        setTimeout(() => {
+          if (this.network) {
+            this.network.fit({ maxZoomLevel: 3 });
+          }
+        }, 100);
+      }
+      this.network.on("dragEnd", (params) => {
+        if (params.nodes.length > 0) {
+          const positions = this.network.getPositions(params.nodes);
+          const updates = params.nodes.map((id2) => ({
+            id: id2,
+            x: positions[id2].x,
+            y: positions[id2].y,
+            fixed: { x: true, y: true }
+          }));
+          this.nodesDataSet.update(updates);
+        }
       });
       if (!this.themeObserver) {
         this.themeObserver = watchThemeChanges((newTheme) => {
@@ -29801,6 +30109,20 @@ var GraphPlugin = class {
         }
       };
       controls.appendChild(fitButton);
+      const settingsButton = document.createElement("button");
+      settingsButton.className = "yasgui-graph-button yasgui-graph-settings-button";
+      settingsButton.setAttribute("aria-label", "Graph settings");
+      settingsButton.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.434.901-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.892 3.434-.901 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.892-1.64-.901-3.434-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.474l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
+      </svg> Settings`;
+      settingsButton.onclick = () => {
+        this.toggleSettingsPanel(container);
+      };
+      controls.appendChild(settingsButton);
+      if (wasPanelOpen) {
+        this.toggleSettingsPanel(container);
+      }
     } catch (error) {
       console.error("Error rendering graph:", error);
       const errorDiv = document.createElement("div");
@@ -29809,6 +30131,111 @@ var GraphPlugin = class {
       this.yasr.resultsEl.appendChild(errorDiv);
     }
   }
+  /**
+   * Setup custom HTML tooltip rendering for vis-network
+   * @param container - The graph container element
+   */
+  setupHtmlTooltips(container) {
+    if (!this.network) return;
+    let hideTimeout = null;
+    this.network.on("hoverNode", (params) => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      const nodeId = params.node;
+      const node = this.nodesDataSet.get(nodeId);
+      if (node && node.title) {
+        this.showHtmlTooltip(container, node.title, params.pointer.DOM);
+      }
+    });
+    this.network.on("hoverEdge", (params) => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      const edgeId = params.edge;
+      const edge = this.edgesDataSet.get(edgeId);
+      if (edge && edge.title) {
+        this.showHtmlTooltip(container, edge.title, params.pointer.DOM);
+      }
+    });
+    this.network.on("blurNode", () => {
+      hideTimeout = window.setTimeout(() => {
+        this.hideHtmlTooltipIfNotHovered(container);
+      }, 200);
+    });
+    this.network.on("blurEdge", () => {
+      hideTimeout = window.setTimeout(() => {
+        this.hideHtmlTooltipIfNotHovered(container);
+      }, 200);
+    });
+    this.network.on("dragStart", () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      this.hideHtmlTooltip(container);
+    });
+    this.network.on("zoom", () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      this.hideHtmlTooltip(container);
+    });
+  }
+  /**
+   * Show HTML tooltip at specified position
+   * @param container - Container element
+   * @param htmlContent - HTML content to display
+   * @param position - Mouse position {x, y}
+   */
+  showHtmlTooltip(container, htmlContent, position) {
+    this.hideHtmlTooltip(container);
+    const tooltip = document.createElement("div");
+    tooltip.className = "yasgui-graph-tooltip-container";
+    tooltip.innerHTML = htmlContent;
+    tooltip.style.position = "absolute";
+    tooltip.style.left = `${position.x + 10}px`;
+    tooltip.style.top = `${position.y + 10}px`;
+    tooltip.style.zIndex = "1000";
+    tooltip.addEventListener("mouseleave", () => {
+      this.hideHtmlTooltip(container);
+    });
+    container.appendChild(tooltip);
+    const rect = tooltip.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    if (rect.right > containerRect.right) {
+      tooltip.style.left = `${position.x - rect.width - 10}px`;
+    }
+    if (rect.bottom > containerRect.bottom) {
+      tooltip.style.top = `${position.y - rect.height - 10}px`;
+    }
+  }
+  /**
+   * Hide HTML tooltip
+   * @param container - Container element
+   */
+  hideHtmlTooltip(container) {
+    const existingTooltip = container.querySelector(".yasgui-graph-tooltip-container");
+    if (existingTooltip) {
+      existingTooltip.remove();
+    }
+  }
+  /**
+   * Hide HTML tooltip only if mouse is not hovering over it
+   * @param container - Container element
+   */
+  hideHtmlTooltipIfNotHovered(container) {
+    const existingTooltip = container.querySelector(".yasgui-graph-tooltip-container");
+    if (existingTooltip) {
+      const isHovered = existingTooltip.matches(":hover");
+      if (!isHovered) {
+        existingTooltip.remove();
+      }
+    }
+  }
   /**
    * Apply theme to existing network
    * @param newTheme - 'light' or 'dark'
@@ -29819,12 +30246,30 @@ var GraphPlugin = class {
     }
     this.currentTheme = newTheme;
     const themeColors = getThemeNodeColors(newTheme);
-    const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors);
+    const fixedNodes = {};
+    this.nodesDataSet.get().forEach((node) => {
+      var _a, _b;
+      const isFixed = node.fixed === true || typeof node.fixed === "object" && ((_a = node.fixed) == null ? void 0 : _a.x) && ((_b = node.fixed) == null ? void 0 : _b.y);
+      if (isFixed && node.x !== void 0 && node.y !== void 0) {
+        fixedNodes[node.id] = { x: node.x, y: node.y };
+      }
+    });
+    const { nodes, edges } = triplesToGraph(this.triples, this.prefixMap, themeColors, this.settings);
     this.nodesDataSet.clear();
     this.nodesDataSet.add(nodes);
     this.edgesDataSet.clear();
     this.edgesDataSet.add(edges);
-    const options = getDefaultNetworkOptions(themeColors);
+    const fixedIds = Object.keys(fixedNodes);
+    if (fixedIds.length > 0) {
+      const updates = fixedIds.map((id2) => ({
+        id: id2,
+        x: fixedNodes[id2].x,
+        y: fixedNodes[id2].y,
+        fixed: { x: true, y: true }
+      }));
+      this.nodesDataSet.update(updates);
+    }
+    const options = getDefaultNetworkOptions(themeColors, this.settings);
     this.network.setOptions(options);
     this.applyCanvasBackground(themeColors.background);
   }
@@ -29860,6 +30305,174 @@ var GraphPlugin = class {
     });
     this.resizeObserver.observe(parent2);
   }
+  /**
+   * Toggle the settings panel open/closed
+   * @param container - The graph container element
+   */
+  toggleSettingsPanel(container) {
+    const existing = container.querySelector(".yasgui-graph-settings-panel");
+    if (existing) {
+      existing.remove();
+      this.settingsPanelOpen = false;
+      this.removeClickOutsideHandler();
+    } else {
+      const panel = this.createSettingsPanel(container);
+      container.appendChild(panel);
+      this.settingsPanelOpen = true;
+      this.setupClickOutsideHandler(container, panel);
+    }
+  }
+  /**
+   * Setup click-outside-to-close handler for settings panel
+   * @param container - The graph container element
+   * @param panel - The settings panel element
+   */
+  setupClickOutsideHandler(container, panel) {
+    this.removeClickOutsideHandler();
+    this.clickOutsideHandler = (event) => {
+      const target = event.target;
+      if (!panel.contains(target) && !this.isSettingsButton(target)) {
+        this.toggleSettingsPanel(container);
+      }
+    };
+    setTimeout(() => {
+      document.addEventListener("click", this.clickOutsideHandler);
+    }, 100);
+  }
+  /**
+   * Remove the click-outside handler
+   */
+  removeClickOutsideHandler() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener("click", this.clickOutsideHandler);
+      this.clickOutsideHandler = null;
+    }
+  }
+  /**
+   * Check if a node is the settings button or inside it
+   * @param node - The node to check
+   */
+  isSettingsButton(node) {
+    let current = node;
+    while (current) {
+      if (current instanceof Element && current.classList.contains("yasgui-graph-settings-button")) {
+        return true;
+      }
+      current = current.parentNode;
+    }
+    return false;
+  }
+  /**
+   * Build and return the settings panel element
+   * @param container - The graph container element (used to re-draw on change)
+   */
+  createSettingsPanel(_container) {
+    const panel = document.createElement("div");
+    panel.className = "yasgui-graph-settings-panel";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Graph settings");
+    const title = document.createElement("div");
+    title.className = "yasgui-graph-settings-title";
+    title.textContent = "Graph Settings";
+    panel.appendChild(title);
+    const addSection = (label) => {
+      const h = document.createElement("div");
+      h.className = "yasgui-graph-settings-section";
+      h.textContent = label;
+      panel.appendChild(h);
+    };
+    const addToggle = (label, checked, onChange) => {
+      const row = document.createElement("label");
+      row.className = "yasgui-graph-settings-row";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.checked = checked;
+      input.addEventListener("change", () => onChange(input.checked));
+      const span = document.createElement("span");
+      span.textContent = label;
+      row.appendChild(input);
+      row.appendChild(span);
+      panel.appendChild(row);
+    };
+    const addSelect = (label, options, current, onChange) => {
+      const row = document.createElement("div");
+      row.className = "yasgui-graph-settings-row";
+      const lbl = document.createElement("span");
+      lbl.textContent = label;
+      const sel = document.createElement("select");
+      sel.className = "yasgui-graph-settings-select";
+      options.forEach((o) => {
+        const opt = document.createElement("option");
+        opt.value = o.value;
+        opt.textContent = o.label;
+        if (o.value === current) opt.selected = true;
+        sel.appendChild(opt);
+      });
+      sel.addEventListener("change", () => onChange(sel.value));
+      row.appendChild(lbl);
+      row.appendChild(sel);
+      panel.appendChild(row);
+    };
+    const applyAndRedraw = () => {
+      saveSettings(this.settings);
+      this.draw();
+    };
+    addSection("Arrows");
+    addSelect(
+      "Style",
+      [
+        { value: "curved", label: "Curved" },
+        { value: "straight", label: "Straight" }
+      ],
+      this.settings.edgeStyle,
+      (v) => {
+        this.settings.edgeStyle = v;
+        applyAndRedraw();
+      }
+    );
+    addSection("Predicate display");
+    addSelect(
+      "Display",
+      [
+        { value: "label", label: "Label (prefixed URI)" },
+        { value: "icon", label: "Icon / symbol" },
+        { value: "none", label: "Hidden" }
+      ],
+      this.settings.predicateDisplay,
+      (v) => {
+        this.settings.predicateDisplay = v;
+        applyAndRedraw();
+      }
+    );
+    addSection("Compact mode");
+    addToggle("Compact mode", this.settings.compactMode, (v) => {
+      this.settings.compactMode = v;
+      applyAndRedraw();
+    });
+    addSection("Display");
+    addToggle("Show node labels", this.settings.showNodeLabels, (v) => {
+      this.settings.showNodeLabels = v;
+      applyAndRedraw();
+    });
+    addToggle("Enable physics", this.settings.physicsEnabled, (v) => {
+      this.settings.physicsEnabled = v;
+      applyAndRedraw();
+    });
+    addSelect(
+      "Node size",
+      [
+        { value: "small", label: "Small" },
+        { value: "medium", label: "Medium" },
+        { value: "large", label: "Large" }
+      ],
+      this.settings.nodeSize,
+      (v) => {
+        this.settings.nodeSize = v;
+        applyAndRedraw();
+      }
+    );
+    return panel;
+  }
   /**
    * Get icon for plugin tab
    * @returns Icon element
@@ -29882,6 +30495,7 @@ var GraphPlugin = class {
    * Cleanup when plugin is destroyed
    */
   destroy() {
+    this.removeClickOutsideHandler();
     if (this.themeObserver) {
       this.themeObserver.disconnect();
       this.themeObserver = null;