Use dagre instead of Graphology

packages/demo/package.json

@@ -18,9 +18,8 @@
     "@beoe/rehype-gnuplot": "workspace:*",
     "@beoe/rehype-graphviz": "workspace:*",
     "@beoe/rehype-vizdom": "workspace:*",
+    "@dagrejs/graphlib": "^2.2.4",
     "astro": "4.16.2",
-    "graphology": "^0.25.4",
-    "graphology-traversal": "^0.3.1",
     "sharp": "^0.33.5",
     "typescript": "^5.6.3",
     "vite-plugin-qrcode": "^0.2.3"

packages/demo/src/components/vizdom.ts

@@ -1,33 +1,31 @@
-import { MultiGraph } from "graphology";
-import { bfsFromNode } from "graphology-traversal";
+import { json } from "@dagrejs/graphlib";
 
-// highlight nodes and edges in graphviz on hover
+// highlight nodes and edges in vizdom on hover
 document.querySelectorAll(".vizdom").forEach((container) => {
   const data = container.getAttribute("data-graph")
     ? JSON.parse(container.getAttribute("data-graph")!)
     : null;
 
   if (data) {
-    const graph = new MultiGraph();
-    graph.import(data);
-
+    const graph = json.read(data);
     let current: string | null = null;
     container.addEventListener("mouseover", (e) => {
       // @ts-expect-error
       const node = e.target?.closest(".node");
       if (node) {
-        const id = node.getAttribute("id");
+        const id = node.getAttribute("id").replace("node-", "");
         if (current == id) return;
         container
           .querySelectorAll(".node")
           .forEach((node) => node.classList.remove("active"));
         container
           .querySelectorAll(".edge")
           .forEach((node) => node.classList.remove("active"));
-        bfsFromNode(graph, id, (node, _attr, _depth) => {
-          container.querySelector(`#${node}`)?.classList.add("active");
-          graph.outEdges(node).forEach((edge) => {
-            container.querySelector(`#${edge}`)?.classList.add("active");
+
+        [id, ...(graph.successors(id) || [])].forEach((node) => {
+          container.querySelector(`#node-${node}`)?.classList.add("active");
+          graph.outEdges(node)?.forEach(({ name }) => {
+            container.querySelector(`#edge-${name}`)?.classList.add("active");
           });
         });
         current = id;

packages/rehype-vizdom/README.md

@@ -81,13 +81,15 @@ You can add dark mode with something like this:
 - [ ] another script: to select several nodes and draw path between them
 - [ ] documentation about "animation" script
   - note about animation for reverse edges
-- [ ] lightweight alternative to graphology
-  - https://www.npmjs.com/package/graph-data-structure
-  - https://www.npmjs.com/package/@dagrejs/graphlib
-  - https://www.npmjs.com/search?q=graph-theory
 - [ ] search text in graph
   - See [text-search](https://github.com/stereobooster/facets/blob/main/notes/text-search.md#candidates)
 
 ## Notes
 
 - Doesn't support some unicode chars, like `label="∅"`
+- Client-side JS library
+  - graphology is about 70kb uncompressed
+  - `@dagrejs/graphlib` is about 12kb
+  - [graph-data-structure](https://www.npmjs.com/package/graph-data-structure) is about 4kb (but it doesn't support ids for edges)
+  - [DirectedGraph](https://data-structure-typed-docs.vercel.app/classes/DirectedGraph.html) is about 40kb
+  - [Other options](https://www.npmjs.com/search?q=graph-theory)

packages/rehype-vizdom/src/index.ts

@@ -13,28 +13,47 @@ export async function dotToSvg(code: string) {
   const positioned = directedGraph.layout();
   const obj = positioned.to_json().to_obj();
   // JSON in Graphology format
+  // const graph = {
+  //   attributes: { name: "g" },
+  //   options: { allowSelfLoops: true, multi: true, type: "directed" },
+  //   nodes: obj.nodes.map((node) => ({
+  //     key: `node-${node.unique_id}`,
+  //     // attributes: {
+  //     //   label: node.label,
+  //     //   x: node.x,
+  //     //   y: node.y,
+  //     //   width: node.width,
+  //     //   height: node.width,
+  //     //   // url: node.url,
+  //     // },
+  //   })),
+  //   edges: obj.edges.map((edge) => ({
+  //     key: `edge-${edge.unique_id}`,
+  //     source: `node-${edge.source}`,
+  //     target: `node-${edge.target}`,
+  //     // attributes: {
+  //     //   label: edge.label,
+  //     //   // url: edge.url,
+  //     // },
+  //   })),
+  // };
+
+  // JSON in Dagre format
   const graph = {
-    attributes: { name: "g" },
-    options: { allowSelfLoops: true, multi: true, type: "directed" },
+    options: {
+      directed: true,
+      multigraph: true,
+      compound: false,
+    },
     nodes: obj.nodes.map((node) => ({
-      key: `node-${node.unique_id}`,
-      // attributes: {
-      //   label: node.label,
-      //   x: node.x,
-      //   y: node.y,
-      //   width: node.width,
-      //   height: node.width,
-      //   // url: node.url,
-      // },
+      v: node.unique_id,
+      // value: {},
     })),
     edges: obj.edges.map((edge) => ({
-      key: `edge-${edge.unique_id}`,
-      source: `node-${edge.source}`,
-      target: `node-${edge.target}`,
-      // attributes: {
-      //   label: edge.label,
-      //   // url: edge.url,
-      // },
+      v: edge.source,
+      w: edge.target,
+      name: edge.unique_id,
+      // value: {},
     })),
   };
   const svg = await positioned.to_svg().to_string();
@@ -56,7 +75,7 @@ export type RehypeVizdomConfig = {
   cache?: MapLike;
   class?: string;
   svgo?: SvgoConfig | boolean;
-  // if true adds data-graph to each figure with JSON in Graphology format
+  // if true adds data-graph to each figure with JSON representation of graph
   dataGraph?: boolean;
 };