Stabilize docling_graph: canonical graph builder, themeable stylesheet, filters & inspector

apps/docling_graph/assets/cytoscape-layout-forceatlas2.js

@@ -0,0 +1,60 @@
+/* Minimal ForceAtlas2-compatible layout wrapper for Cytoscape.
+   Uses COSE under the hood for stability when the real plugin bundle
+   is not available, while preserving the forceatlas2 layout name. */
+(function () {
+  if (typeof cytoscape === "undefined") {
+    return;
+  }
+
+  var defaults = {
+    iterations: 800,
+    scalingRatio: 1.0,
+    gravity: 1.0,
+    linLogMode: false,
+    preventOverlap: true,
+    fit: true,
+    padding: 30,
+    animate: false
+  };
+
+  function ForceAtlas2Layout(options) {
+    this.options = Object.assign({}, defaults, options);
+    this.cy = options.cy;
+  }
+
+  ForceAtlas2Layout.prototype.run = function () {
+    var opts = this.options;
+    if (!this.cy) {
+      return;
+    }
+
+    var scaling = Math.max(0.5, opts.scalingRatio || 1.0);
+    var layout = this.cy.layout({
+      name: "cose",
+      animate: opts.animate,
+      randomize: false,
+      fit: opts.fit,
+      padding: opts.padding,
+      gravity: opts.gravity,
+      nodeRepulsion: 2048 * scaling,
+      idealEdgeLength: 50 * scaling,
+      avoidOverlap: opts.preventOverlap,
+      numIter: opts.iterations
+    });
+
+    this._layout = layout;
+    layout.run();
+  };
+
+  ForceAtlas2Layout.prototype.stop = function () {
+    if (this._layout && typeof this._layout.stop === "function") {
+      this._layout.stop();
+    }
+  };
+
+  cytoscape("layout", "forceatlas2", ForceAtlas2Layout);
+
+  if (typeof window !== "undefined") {
+    window.cytoscapeLayoutForceatlas2 = ForceAtlas2Layout;
+  }
+})();

apps/docling_graph/assets/forceatlas2-init.js

@@ -0,0 +1,34 @@
+// Register ForceAtlas2 layout plugin if present.
+// Requires the plugin file at:
+//   apps/docling_graph/assets/cytoscape-layout-forceatlas2.js
+
+(function () {
+  function tryRegister() {
+    var cy = window.cytoscape;
+    if (!cy) return false;
+
+    var fa2 = window.cytoscapeLayoutForceatlas2 || window.forceatlas2;
+
+    if (fa2 && typeof cy.use === "function") {
+      try {
+        cy.use(fa2);
+        console.log("[docling_graph] ForceAtlas2 plugin registered");
+        return true;
+      } catch (e) {
+        console.warn("[docling_graph] ForceAtlas2 plugin present but failed to register", e);
+      }
+    }
+    return false;
+  }
+
+  var attempts = 0;
+  var timer = setInterval(function () {
+    attempts += 1;
+    if (tryRegister() || attempts >= 20) {
+      clearInterval(timer);
+      if (attempts >= 20) {
+        console.warn("[docling_graph] ForceAtlas2 plugin not detected (layout will fail if selected)");
+      }
+    }
+  }, 250);
+})();

apps/docling_graph/assets/theme.css

@@ -1,38 +1,30 @@
-html, body {
-  background: #121212;
-  color: #eaeaea;
-}
-
-.app-root {
-  display: flex;
-  background: #121212;
-}
-
-.sidebar {
-  width: 340px;
-  background: #1b1b1b;
-  padding: 12px;
-  border-right: 1px solid #333;
-}
-
-label {
-  color: #ccc;
-}
-
-.Select-control,
-.Select-menu-outer {
-  background: #222;
-  color: #fff;
+:root {
+  --gc-bg: #0b0f17;
+  --gc-panel-bg: #0f172a;
+  --gc-panel-border: #111827;
+  --gc-text: #e5e7eb;
+  --gc-muted: #94a3b8;
+  --gc-accent: #7c3aed;
+  --gc-graph-bg: #0b0f17;
+  --gc-button-bg: #111827;
+  --gc-button-border: #1f2937;
 }
 
-.rc-slider-track {
-  background-color: #9b4dff;
+@media (prefers-color-scheme: light) {
+  :root {
+    --gc-bg: #f8fafc;
+    --gc-panel-bg: #ffffff;
+    --gc-panel-border: #e2e8f0;
+    --gc-text: #0f172a;
+    --gc-muted: #475569;
+    --gc-accent: #7c3aed;
+    --gc-graph-bg: #ffffff;
+    --gc-button-bg: #f1f5f9;
+    --gc-button-border: #cbd5f5;
+  }
 }
 
-.rc-slider-handle {
-  border-color: #9b4dff;
-}
-
-.rc-slider-rail {
-  background-color: #333;
+html, body {
+  background: var(--gc-bg);
+  color: var(--gc-text);
 }