Starting point for force-directed graph

Author: davenquinn

packages/feedback-components/package.json

@@ -14,9 +14,10 @@
     "@macrostrat/color-utils": "workspace:^1.0.0",
     "@macrostrat/hyper": "^3.0.0",
     "@macrostrat/ui-components": "workspace:*",
+    "@xyflow/react": "^12.3.6",
+    "d3-force": "^3.0.0",
     "react": "^17.0.2||^18",
     "react-arborist": "^3.4.0",
-    "react-flow": "^1.0.3",
     "react-text-annotate-blend": "^1.2.0"
   },
   "exports": {
@@ -33,5 +34,8 @@
     "type": "git",
     "url": "https://github.com/UW-Macrostrat/web-components.git",
     "directory": "packages/feedback-components"
+  },
+  "devDependencies": {
+    "@types/d3-force": "^3"
   }
 }

packages/feedback-components/src/feedback/graph.ts

@@ -0,0 +1,98 @@
+import { TreeData } from "./types";
+import { treeToGraph } from "./edit-state";
+import h from "@macrostrat/hyper";
+
+import {
+  forceSimulation,
+  SimulationNodeDatum,
+  SimulationLinkDatum,
+  forceCenter,
+  forceLink,
+  forceManyBody,
+  forceCollide,
+} from "d3-force";
+import { useEffect, useState } from "react";
+import { Spinner } from "@blueprintjs/core";
+
+export function GraphView(props: {
+  tree: TreeData[];
+  width: number;
+  height: number;
+}) {
+  // A graph view with react-flow
+  // Get positions of nodes using force simulation
+  const { tree, width, height } = props;
+
+  const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);
+  const [links, setLinks] = useState<SimulationLinkDatum[]>(null);
+
+  useEffect(() => {
+    const { nodes, edges } = treeToGraph(tree);
+
+    const nodesMap = new Map<number, SimulationNodeDatum>(
+      nodes.map((d) => [d.id, d])
+    );
+
+    const links = edges.map((d) => {
+      return {
+        source: nodesMap.get(d.source),
+        target: nodesMap.get(d.dest),
+        strength: 1,
+      };
+    });
+
+    const simulation = forceSimulation(nodes)
+      .force("link", forceLink(links))
+      .force("charge", forceManyBody().strength(-50))
+      .force("center", forceCenter(width / 2, height / 2))
+      .force("collide", forceCollide().radius(20))
+      .on("tick", () => {
+        // Update the positions of the nodes
+        // setNodes(nodes);
+        console.log("Simulation tick");
+      })
+      .on("end", () => {
+        // Update the positions of the nodes
+        setNodes(nodes);
+        setLinks(links);
+      });
+
+    return () => {
+      simulation.stop();
+    };
+  }, [tree, width, height]);
+
+  if (nodes == null || links == null) {
+    return h(Spinner);
+  }
+
+  console.log("Graph", nodes, links);
+
+  return h("div.graph-view", { style: { width, height } }, [
+    h("svg", { width, height }, [
+      h(
+        "g.nodes",
+        nodes.map((d) => {
+          return h("circle", {
+            cx: d.x,
+            cy: d.y,
+            r: 5,
+            fill: "blue",
+          });
+        })
+      ),
+      h(
+        "g.links",
+        links.map((d) => {
+          return h("line", {
+            x1: d.source.x,
+            y1: d.source.y,
+            x2: d.target.x,
+            y2: d.target.y,
+            stroke: "black",
+          });
+        })
+      ),
+    ]),
+  ]);
+}

packages/feedback-components/src/feedback/index.ts

@@ -7,7 +7,12 @@ import { FeedbackText } from "./text-visualizer";
 import type { InternalEntity, TreeData } from "./types";
 import type { Entity } from "../extractions";
 import { ModelInfo } from "../extractions";
-import { TreeDispatchContext, useUpdatableTree, ViewMode } from "./edit-state";
+import {
+  TreeDispatchContext,
+  treeToGraph,
+  useUpdatableTree,
+  ViewMode,
+} from "./edit-state";
 import { useCallback, useEffect, useRef } from "react";
 import { ButtonGroup, Card, SegmentedControl } from "@blueprintjs/core";
 import { OmniboxSelector } from "./type-selector";
@@ -19,6 +24,7 @@ import {
   SaveButton,
 } from "@macrostrat/ui-components";
 import useElementDimensions from "use-element-dimensions";
+import { GraphView } from "./graph";
 
 export type { GraphData } from "./edit-state";
 export { treeToGraph } from "./edit-state";
@@ -137,6 +143,11 @@ export function FeedbackComponent({
           height,
           matchComponent,
         }),
+        h.if(state.viewMode == "graph")(GraphView, {
+          tree,
+          width,
+          height,
+        }),
       ]
     ),
   ]);