Started situating graph view

Author: davenquinn

packages/feedback-components/package.json

@@ -16,6 +16,7 @@
     "@macrostrat/ui-components": "workspace:*",
     "react": "^17.0.2||^18",
     "react-arborist": "^3.4.0",
+    "react-flow": "^1.0.3",
     "react-text-annotate-blend": "^1.2.0"
   },
   "exports": {

packages/feedback-components/src/feedback/edit-state.ts

@@ -3,6 +3,11 @@ import { createContext, Dispatch, useContext, useReducer } from "react";
 import update, { Spec } from "immutability-helper";
 import { EntityType } from "../extractions/types";
 
+export enum ViewMode {
+  Tree = "tree",
+  Graph = "graph",
+}
+
 interface TreeState {
   initialTree: TreeData[];
   tree: TreeData[];
@@ -11,6 +16,7 @@ interface TreeState {
   selectedEntityType: EntityType;
   lastInternalId: number;
   isSelectingEntityType: boolean;
+  viewMode: ViewMode;
 }
 
 type TextRange = {
@@ -27,6 +33,7 @@ type TreeAction =
   | { type: "delete-node"; payload: { ids: number[] } }
   | { type: "select-node"; payload: { ids: number[] } }
   | { type: "toggle-node-selected"; payload: { ids: number[] } }
+  | { type: "set-view-mode"; payload: ViewMode }
   | { type: "create-node"; payload: TextRange }
   | { type: "select-entity-type"; payload: EntityType }
   | { type: "toggle-entity-type-selector"; payload?: boolean | null }
@@ -50,6 +57,7 @@ export function useUpdatableTree(
     selectedEntityType: type,
     lastInternalId: 0,
     isSelectingEntityType: false,
+    viewMode: ViewMode.Tree,
   });
 }
 
@@ -169,6 +177,8 @@ function treeReducer(state: TreeState, action: TreeAction) {
         tree: state.initialTree,
         selectedNodes: [],
       };
+    case "set-view-mode":
+      return { ...state, viewMode: action.payload };
   }
 }
 

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

@@ -7,11 +7,17 @@ import { FeedbackText } from "./text-visualizer";
 import type { InternalEntity, TreeData } from "./types";
 import type { Entity } from "../extractions";
 import { ModelInfo } from "../extractions";
-import { TreeDispatchContext, useUpdatableTree } from "./edit-state";
+import { TreeDispatchContext, useUpdatableTree, ViewMode } from "./edit-state";
 import { useCallback, useEffect, useRef } from "react";
-import { ButtonGroup, Card } from "@blueprintjs/core";
+import { ButtonGroup, Card, SegmentedControl } from "@blueprintjs/core";
 import { OmniboxSelector } from "./type-selector";
-import { CancelButton, DataField, SaveButton } from "@macrostrat/ui-components";
+import {
+  CancelButton,
+  DataField,
+  FlexBox,
+  FlexRow,
+  SaveButton,
+} from "@macrostrat/ui-components";
 import useElementDimensions from "use-element-dimensions";
 
 export type { GraphData } from "./edit-state";
@@ -55,7 +61,21 @@ export function FeedbackComponent({
       nodes: tree,
       selectedNodes,
     }),
-    h(ModelInfo, { data: model }),
+    h(FlexRow, { alignItems: "baseline", justifyContent: "space-between" }, [
+      h(ModelInfo, { data: model }),
+      h(SegmentedControl, {
+        options: [
+          { label: "Tree", value: "tree" },
+          { label: "Graph", value: "graph" },
+        ],
+        value: state.viewMode,
+        small: true,
+        onValueChange(value: ViewMode) {
+          console.log("Setting view mode", value);
+          dispatch({ type: "set-view-mode", payload: value });
+        },
+      }),
+    ]),
     h(
       "div.entity-panel",
       {
@@ -109,7 +129,7 @@ export function FeedbackComponent({
               }),
           }),
         ]),
-        h(ManagedSelectionTree, {
+        h.if(state.viewMode == "tree")(ManagedSelectionTree, {
           selectedNodes,
           dispatch,
           tree,