@macrostrat/feedback-components 1.1.10 → 2.0.0

package/dist/feedback/graph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.cjs","sources":["../../src/feedback/graph.ts"],"sourcesContent":["import { TreeData } from \"./types\";\nimport { treeToGraph } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport {\n  forceSimulation,\n  SimulationNodeDatum,\n  SimulationLinkDatum,\n  forceCenter,\n  forceLink,\n  forceManyBody,\n  forceCollide,\n} from \"d3-force\";\nimport { useEffect, useState } from \"react\";\nimport { Spinner, Switch } from \"@blueprintjs/core\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { getTagStyle } from \"../extractions\";\n\nconst h = hyper.styled(styles);\n\nexport function GraphView(props: {\n  tree: TreeData[];\n  width: number;\n  height: number;\n  dispatch: (action: any) => void;\n  selectedNodes: number[];\n  viewOnly?: boolean;\n}) {\n  // A graph view with react-flow\n  // Get positions of nodes using force simulation\n  const { tree, width, height, dispatch, selectedNodes, viewOnly } = props;\n\n  const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);\n  const [links, setLinks] = useState<SimulationLinkDatum[]>(null);\n  const [showLabels, setShowLabels] = useState(false);\n\n  useEffect(() => {\n    const { nodes, edges } = treeToGraph(tree);\n\n    const nodesMap = new Map<number, SimulationNodeDatum>(\n      nodes.map((d) => [d.id, d]),\n    );\n\n    const links = edges.map((d) => {\n      return {\n        source: nodesMap.get(d.source),\n        target: nodesMap.get(d.dest),\n        strength: 1,\n      };\n    });\n\n    const simulation = forceSimulation(nodes)\n      .force(\"link\", forceLink(links))\n      .force(\"charge\", forceManyBody().strength(-50))\n      .force(\"center\", forceCenter(width / 2, height / 2))\n      .force(\"collide\", forceCollide().radius(20))\n      .on(\"tick\", () => {\n        // Update the positions of the nodes\n        // setNodes(nodes);\n        console.log(\"Simulation tick\");\n      })\n      .on(\"end\", () => {\n        // Update the positions of the nodes\n        setNodes(nodes);\n        setLinks(links);\n      });\n\n    return () => {\n      simulation.stop();\n    };\n  }, [tree, width, height]);\n\n  if (nodes == null || links == null) {\n    return h(Spinner);\n  }\n\n  console.log(\"Graph\", nodes, links, selectedNodes);\n\n  return h(\n    ErrorBoundary,\n    {\n      description: \"An error occurred while rendering the graph view.\",\n    },\n    h(\"div.graph-view\", { style: { width, height } }, [\n      h(Switch, {\n        className: \"show-labels-switch\",\n        label: \"Show Labels\",\n        checked: showLabels,\n        onChange: (e) => setShowLabels(e.target.checked),\n      }),\n      h(\"svg\", { width, height }, [\n        h(\n          \"g.links\",\n          links.map((d) => {\n            return h(\"line\", {\n              x1: d.source.x,\n              y1: d.source.y,\n              x2: d.target.x,\n              y2: d.target.y,\n              stroke: \"black\",\n            });\n          }),\n        ),\n        h(\n          \"g.nodes\",\n          nodes.map((d) => {\n            const active = selectedNodes.includes(d.id);\n            const stroke = active ? \"white\" : \"black\";\n            const highlighted = isHighlighted(d.id, selectedNodes, nodes);\n            const style = getTagStyle(d.color, { highlighted, active });\n\n            return h(\"g\", [\n              h(\"circle\", {\n                cx: d.x,\n                cy: d.y,\n                r: 8,\n                fill: style.backgroundColor || \"blue\",\n                onClick: (e) => {\n                  e.stopPropagation();\n                  if (\n                    e.ctrlKey ||\n                    e.metaKey ||\n                    (selectedNodes[0] === d.id && selectedNodes.length === 1)\n                  ) {\n                    // Toggle selection on ctrl/cmd click or when node is only selected node\n                    e.stopPropagation();\n                    dispatch({\n                      type: \"toggle-node-selected\",\n                      payload: { ids: [d.id] },\n                    });\n                  } else {\n                    dispatch({\n                      type: \"select-node\",\n                      payload: { ids: [d.id] },\n                    });\n                  }\n                },\n                className: active\n                  ? \"selected\"\n                  : \"\" + (viewOnly ? \"\" : \" clickable\"),\n                stroke,\n                strokeWidth: 2,\n              }),\n              h.if(showLabels)(\n                \"text\",\n                {\n                  x: d.x + 10,\n                  y: d.y + 4,\n                  className: \"node-label\",\n                },\n                d.name || `Node ${d.id}`,\n              ),\n              h.if(!showLabels)(\"title\", d.name || `Node ${d.id}`),\n            ]);\n          }),\n        ),\n      ]),\n    ]),\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: TreeData[]) {\n  if (selectedNodes.length === 0) return true;\n  return (\n    selectedNodes.includes(id) ||\n    nodes.some(\n      (node) =>\n        selectedNodes.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["styles","useState","useEffect","nodes","treeToGraph","links","forceSimulation","forceLink","forceManyBody","forceCenter","forceCollide","Spinner","ErrorBoundary","Switch","getTagStyle"],"mappings":"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"}

package/dist/feedback/graph.d.ts

@@ -0,0 +1,9 @@
+import { TreeData } from './types';
+export declare function GraphView(props: {
+    tree: TreeData[];
+    width: number;
+    height: number;
+    dispatch: (action: any) => void;
+    selectedNodes: number[];
+    viewOnly?: boolean;
+}): import('react').DetailedReactHTMLElement<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import('react').FunctionComponentElement<import('@blueprintjs/core').SpinnerProps<HTMLElement>>;

package/dist/feedback/graph.js

@@ -0,0 +1,124 @@
+import { treeToGraph } from "./edit-state.js";
+import styles from "./feedback.module.sass.js";
+import hyper from "@macrostrat/hyper";
+import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } from "d3-force";
+import { useState, useEffect } from "react";
+import { Spinner, Switch } from "@blueprintjs/core";
+import { ErrorBoundary } from "@macrostrat/ui-components";
+import { getTagStyle } from "../extractions/index.js";
+const h = hyper.styled(styles);
+function GraphView(props) {
+  const { tree, width, height, dispatch, selectedNodes, viewOnly } = props;
+  const [nodes, setNodes] = useState(null);
+  const [links, setLinks] = useState(null);
+  const [showLabels, setShowLabels] = useState(false);
+  useEffect(() => {
+    const { nodes: nodes2, edges } = treeToGraph(tree);
+    const nodesMap = new Map(
+      nodes2.map((d) => [d.id, d])
+    );
+    const links2 = edges.map((d) => {
+      return {
+        source: nodesMap.get(d.source),
+        target: nodesMap.get(d.dest),
+        strength: 1
+      };
+    });
+    const simulation = forceSimulation(nodes2).force("link", forceLink(links2)).force("charge", forceManyBody().strength(-50)).force("center", forceCenter(width / 2, height / 2)).force("collide", forceCollide().radius(20)).on("tick", () => {
+      console.log("Simulation tick");
+    }).on("end", () => {
+      setNodes(nodes2);
+      setLinks(links2);
+    });
+    return () => {
+      simulation.stop();
+    };
+  }, [tree, width, height]);
+  if (nodes == null || links == null) {
+    return h(Spinner);
+  }
+  console.log("Graph", nodes, links, selectedNodes);
+  return h(
+    ErrorBoundary,
+    {
+      description: "An error occurred while rendering the graph view."
+    },
+    h("div.graph-view", { style: { width, height } }, [
+      h(Switch, {
+        className: "show-labels-switch",
+        label: "Show Labels",
+        checked: showLabels,
+        onChange: (e) => setShowLabels(e.target.checked)
+      }),
+      h("svg", { width, height }, [
+        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"
+            });
+          })
+        ),
+        h(
+          "g.nodes",
+          nodes.map((d) => {
+            const active = selectedNodes.includes(d.id);
+            const stroke = active ? "white" : "black";
+            const highlighted = isHighlighted(d.id, selectedNodes, nodes);
+            const style = getTagStyle(d.color, { highlighted, active });
+            return h("g", [
+              h("circle", {
+                cx: d.x,
+                cy: d.y,
+                r: 8,
+                fill: style.backgroundColor || "blue",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (e.ctrlKey || e.metaKey || selectedNodes[0] === d.id && selectedNodes.length === 1) {
+                    e.stopPropagation();
+                    dispatch({
+                      type: "toggle-node-selected",
+                      payload: { ids: [d.id] }
+                    });
+                  } else {
+                    dispatch({
+                      type: "select-node",
+                      payload: { ids: [d.id] }
+                    });
+                  }
+                },
+                className: active ? "selected" : viewOnly ? "" : " clickable",
+                stroke,
+                strokeWidth: 2
+              }),
+              h.if(showLabels)(
+                "text",
+                {
+                  x: d.x + 10,
+                  y: d.y + 4,
+                  className: "node-label"
+                },
+                d.name || `Node ${d.id}`
+              ),
+              h.if(!showLabels)("title", d.name || `Node ${d.id}`)
+            ]);
+          })
+        )
+      ])
+    ])
+  );
+}
+function isHighlighted(id, selectedNodes, nodes) {
+  if (selectedNodes.length === 0) return true;
+  return selectedNodes.includes(id) || nodes.some(
+    (node) => selectedNodes.includes(node.id) && node.children.some((child) => child.id === id)
+  );
+}
+export {
+  GraphView
+};
+//# sourceMappingURL=graph.js.map

package/dist/feedback/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","sources":["../../src/feedback/graph.ts"],"sourcesContent":["import { TreeData } from \"./types\";\nimport { treeToGraph } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport {\n  forceSimulation,\n  SimulationNodeDatum,\n  SimulationLinkDatum,\n  forceCenter,\n  forceLink,\n  forceManyBody,\n  forceCollide,\n} from \"d3-force\";\nimport { useEffect, useState } from \"react\";\nimport { Spinner, Switch } from \"@blueprintjs/core\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { getTagStyle } from \"../extractions\";\n\nconst h = hyper.styled(styles);\n\nexport function GraphView(props: {\n  tree: TreeData[];\n  width: number;\n  height: number;\n  dispatch: (action: any) => void;\n  selectedNodes: number[];\n  viewOnly?: boolean;\n}) {\n  // A graph view with react-flow\n  // Get positions of nodes using force simulation\n  const { tree, width, height, dispatch, selectedNodes, viewOnly } = props;\n\n  const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);\n  const [links, setLinks] = useState<SimulationLinkDatum[]>(null);\n  const [showLabels, setShowLabels] = useState(false);\n\n  useEffect(() => {\n    const { nodes, edges } = treeToGraph(tree);\n\n    const nodesMap = new Map<number, SimulationNodeDatum>(\n      nodes.map((d) => [d.id, d]),\n    );\n\n    const links = edges.map((d) => {\n      return {\n        source: nodesMap.get(d.source),\n        target: nodesMap.get(d.dest),\n        strength: 1,\n      };\n    });\n\n    const simulation = forceSimulation(nodes)\n      .force(\"link\", forceLink(links))\n      .force(\"charge\", forceManyBody().strength(-50))\n      .force(\"center\", forceCenter(width / 2, height / 2))\n      .force(\"collide\", forceCollide().radius(20))\n      .on(\"tick\", () => {\n        // Update the positions of the nodes\n        // setNodes(nodes);\n        console.log(\"Simulation tick\");\n      })\n      .on(\"end\", () => {\n        // Update the positions of the nodes\n        setNodes(nodes);\n        setLinks(links);\n      });\n\n    return () => {\n      simulation.stop();\n    };\n  }, [tree, width, height]);\n\n  if (nodes == null || links == null) {\n    return h(Spinner);\n  }\n\n  console.log(\"Graph\", nodes, links, selectedNodes);\n\n  return h(\n    ErrorBoundary,\n    {\n      description: \"An error occurred while rendering the graph view.\",\n    },\n    h(\"div.graph-view\", { style: { width, height } }, [\n      h(Switch, {\n        className: \"show-labels-switch\",\n        label: \"Show Labels\",\n        checked: showLabels,\n        onChange: (e) => setShowLabels(e.target.checked),\n      }),\n      h(\"svg\", { width, height }, [\n        h(\n          \"g.links\",\n          links.map((d) => {\n            return h(\"line\", {\n              x1: d.source.x,\n              y1: d.source.y,\n              x2: d.target.x,\n              y2: d.target.y,\n              stroke: \"black\",\n            });\n          }),\n        ),\n        h(\n          \"g.nodes\",\n          nodes.map((d) => {\n            const active = selectedNodes.includes(d.id);\n            const stroke = active ? \"white\" : \"black\";\n            const highlighted = isHighlighted(d.id, selectedNodes, nodes);\n            const style = getTagStyle(d.color, { highlighted, active });\n\n            return h(\"g\", [\n              h(\"circle\", {\n                cx: d.x,\n                cy: d.y,\n                r: 8,\n                fill: style.backgroundColor || \"blue\",\n                onClick: (e) => {\n                  e.stopPropagation();\n                  if (\n                    e.ctrlKey ||\n                    e.metaKey ||\n                    (selectedNodes[0] === d.id && selectedNodes.length === 1)\n                  ) {\n                    // Toggle selection on ctrl/cmd click or when node is only selected node\n                    e.stopPropagation();\n                    dispatch({\n                      type: \"toggle-node-selected\",\n                      payload: { ids: [d.id] },\n                    });\n                  } else {\n                    dispatch({\n                      type: \"select-node\",\n                      payload: { ids: [d.id] },\n                    });\n                  }\n                },\n                className: active\n                  ? \"selected\"\n                  : \"\" + (viewOnly ? \"\" : \" clickable\"),\n                stroke,\n                strokeWidth: 2,\n              }),\n              h.if(showLabels)(\n                \"text\",\n                {\n                  x: d.x + 10,\n                  y: d.y + 4,\n                  className: \"node-label\",\n                },\n                d.name || `Node ${d.id}`,\n              ),\n              h.if(!showLabels)(\"title\", d.name || `Node ${d.id}`),\n            ]);\n          }),\n        ),\n      ]),\n    ]),\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: TreeData[]) {\n  if (selectedNodes.length === 0) return true;\n  return (\n    selectedNodes.includes(id) ||\n    nodes.some(\n      (node) =>\n        selectedNodes.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["nodes","links"],"mappings":"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"}

package/dist/feedback/index.cjs

@@ -0,0 +1,347 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const feedback_module = require("./feedback.module.sass.cjs");
+const hyper = require("@macrostrat/hyper");
+const reactArborist = require("react-arborist");
+const node = require("./node.cjs");
+const textVisualizer = require("./text-visualizer.cjs");
+const index = require("../extractions/index.cjs");
+const editState = require("./edit-state.cjs");
+const react = require("react");
+const core = require("@blueprintjs/core");
+const index$1 = require("./type-selector/index.cjs");
+const uiComponents = require("@macrostrat/ui-components");
+const useElementDimensions = require("use-element-dimensions");
+const graph = require("./graph.cjs");
+const matches = require("./matches.cjs");
+const typelist = require("./typelist.cjs");
+const h = hyper.styled(feedback_module.default);
+function setsAreTheSame(a, b) {
+  if (a.size !== b.size) return false;
+  for (const item of a) {
+    if (!b.has(item)) return false;
+  }
+  return true;
+}
+function FeedbackComponent({
+  entities = [],
+  text,
+  model,
+  entityTypes,
+  matchComponent,
+  onSave,
+  allowOverlap,
+  matchLinks,
+  view = false,
+  autoSelect = []
+}) {
+  const [viewOnly, setViewOnly] = react.useState(view);
+  const [match, setMatchLinks] = react.useState(matchLinks);
+  const matchMode = match !== void 0;
+  const [state, dispatch] = editState.useUpdatableTree(
+    entities.map(processEntity),
+    entityTypes,
+    viewOnly,
+    matchMode,
+    autoSelect
+  );
+  const {
+    selectedNodes,
+    tree,
+    selectedEntityType,
+    isSelectingEntityType,
+    entityTypesMap
+  } = state;
+  const [{ width, height }, ref] = useElementDimensions();
+  return h("div.page-wrapper", [
+    h(
+      "div.feedback-container",
+      h(editState.TreeDispatchContext.Provider, { value: dispatch }, [
+        h.if(!view)(core.SegmentedControl, {
+          options: [
+            { label: "View", value: "view" },
+            { label: "Edit", value: "edit" }
+          ],
+          value: viewOnly ? "view" : "edit",
+          small: true,
+          onValueChange() {
+            setViewOnly(!viewOnly);
+            dispatch({ type: "toggle-view-only" });
+          },
+          role: "toolbar"
+        }),
+        h(
+          uiComponents.ErrorBoundary,
+          {
+            description: "An error occurred while rendering the feedback text component."
+          },
+          h(textVisualizer.FeedbackText, {
+            text,
+            dispatch,
+            // @ts-ignore
+            nodes: tree,
+            selectedNodes,
+            allowOverlap,
+            matchLinks: match,
+            viewOnly
+          })
+        ),
+        h(
+          uiComponents.FlexRow,
+          { alignItems: "baseline", justifyContent: "space-between" },
+          [
+            h(index.ModelInfo, { data: model }),
+            h(core.SegmentedControl, {
+              options: [
+                { label: "Tree", value: "tree" },
+                { label: "Graph", value: "graph" }
+              ],
+              value: state.viewMode,
+              small: true,
+              onValueChange(value) {
+                console.log("Setting view mode", value);
+                dispatch({ type: "set-view-mode", payload: value });
+              }
+            })
+          ]
+        ),
+        h(
+          "div.entity-panel",
+          {
+            ref
+          },
+          [
+            h.if(state.viewMode == "tree")(ManagedSelectionTree, {
+              selectedNodes,
+              dispatch,
+              tree,
+              width,
+              height,
+              matchComponent,
+              viewOnly
+            }),
+            h.if(state.viewMode == "graph")(graph.GraphView, {
+              tree,
+              width,
+              height,
+              dispatch,
+              selectedNodes,
+              viewOnly
+            })
+          ]
+        )
+      ])
+    ),
+    h(core.Card, { className: "control-panel" }, [
+      h("div.control-content", [
+        h.if(!viewOnly)(
+          core.ButtonGroup,
+          {
+            vertical: true,
+            fill: true,
+            minimal: true,
+            alignText: "left"
+          },
+          [
+            h(
+              uiComponents.CancelButton,
+              {
+                icon: "trash",
+                disabled: state.initialTree == state.tree,
+                onClick() {
+                  dispatch({ type: "reset" });
+                }
+              },
+              "Reset"
+            ),
+            h(
+              uiComponents.SaveButton,
+              {
+                onClick() {
+                  onSave(state.tree);
+                },
+                disabled: state.initialTree == state.tree
+              },
+              "Save"
+            )
+          ]
+        ),
+        h.if(!viewOnly)(matches.Matches, {
+          match,
+          setMatchLinks,
+          matchLinks,
+          selectedNodes,
+          tree,
+          dispatch
+        }),
+        h.if(!viewOnly)(core.Divider),
+        h(EntityTypeSelector, {
+          entityTypes: entityTypesMap,
+          selected: selectedEntityType,
+          onChange(payload) {
+            dispatch({ type: "select-entity-type", payload });
+          },
+          dispatch,
+          tree,
+          selectedNodes,
+          isOpen: isSelectingEntityType,
+          setOpen: (isOpen) => dispatch({
+            type: "toggle-entity-type-selector",
+            payload: isOpen
+          }),
+          viewOnly,
+          matchMode
+        })
+      ])
+    ])
+  ]);
+}
+function processEntity(entity) {
+  return {
+    ...entity,
+    // @ts-ignore
+    term_type: entity.type.name,
+    txt_range: [entity.indices],
+    children: entity.children?.map(processEntity) ?? []
+  };
+}
+function EntityTypeSelector({
+  entityTypes,
+  selected,
+  isOpen,
+  setOpen,
+  onChange,
+  tree,
+  dispatch,
+  selectedNodes = [],
+  viewOnly,
+  matchMode
+}) {
+  const _selected = selected != null ? selected : void 0;
+  const [inputValue, setInputValue] = react.useState("");
+  const types = Array.from(entityTypes.values());
+  const items = inputValue !== "" ? types.filter(
+    (d) => d.name.toLowerCase().includes(inputValue.toLowerCase())
+  ) : types;
+  return h("div.entity-type-selector", [
+    h(typelist.TypeList, {
+      types: entityTypes,
+      selected: _selected,
+      dispatch,
+      selectedNodes,
+      tree,
+      viewOnly: viewOnly || matchMode
+    }),
+    h(index$1.OmniboxSelector, {
+      isOpen,
+      items,
+      selectedItem: _selected,
+      onSelectItem(item) {
+        setOpen(false);
+        onChange(item);
+      },
+      onQueryChange(query) {
+        setInputValue(query);
+      },
+      onClose() {
+        setOpen(false);
+      }
+    })
+  ]);
+}
+function ManagedSelectionTree(props) {
+  const {
+    selectedNodes,
+    dispatch,
+    tree,
+    height,
+    width,
+    matchComponent,
+    viewOnly
+  } = props;
+  const ref = react.useRef();
+  const clickedRef = react.useRef(false);
+  const _Node = react.useCallback(
+    (props2) => h(node.default, { ...props2, matchComponent, viewOnly }),
+    [matchComponent, viewOnly]
+  );
+  react.useEffect(() => {
+    if (ref.current == null) return;
+    const selection = new Set(selectedNodes.map((d) => d.toString()));
+    const currentSelection = ref.current.selectedIds;
+    if (setsAreTheSame(selection, currentSelection)) return;
+    ref.current.setSelection({
+      ids: selectedNodes.map((d) => d.toString()),
+      anchor: null,
+      mostRecent: null
+    });
+  }, [selectedNodes]);
+  function handleClick() {
+    clickedRef.current = true;
+  }
+  const ctrlPressedRef = react.useRef(false);
+  react.useEffect(() => {
+    const down = (e) => {
+      if (e.ctrlKey || e.metaKey) ctrlPressedRef.current = true;
+    };
+    const up = () => ctrlPressedRef.current = false;
+    window.addEventListener("keydown", down);
+    window.addEventListener("keyup", up);
+    return () => {
+      window.removeEventListener("keydown", down);
+      window.removeEventListener("keyup", up);
+    };
+  }, []);
+  const handleSelect = react.useCallback(
+    (nodes) => {
+      if (!clickedRef.current) return;
+      clickedRef.current = false;
+      const isMultiSelect = ctrlPressedRef.current;
+      let ids = nodes.map((d) => parseInt(d.id));
+      if (isMultiSelect) {
+        dispatch({ type: "toggle-node-selected", payload: { ids } });
+      } else {
+        if (ids.length === 1 && ids[0] === selectedNodes[0]) {
+          ids = [];
+        }
+        dispatch({ type: "select-node", payload: { ids } });
+      }
+    },
+    [selectedNodes, dispatch]
+  );
+  return h(
+    "div.selection-tree-wrapper",
+    { onPointerDown: handleClick },
+    h(reactArborist.Tree, {
+      className: "selection-tree",
+      height,
+      width,
+      ref,
+      data: tree,
+      onMove({ dragIds, parentId, index: index2 }) {
+        dispatch({
+          type: "move-node",
+          payload: {
+            dragIds: dragIds.map((d) => parseInt(d)),
+            parentId: parentId ? parseInt(parentId) : null,
+            index: index2
+          }
+        });
+      },
+      onDelete({ ids }) {
+        dispatch({
+          type: "delete-node",
+          payload: { ids: ids.map((d) => parseInt(d)) }
+        });
+      },
+      onSelect: handleSelect,
+      children: _Node,
+      idAccessor(d) {
+        return d.id.toString();
+      }
+    })
+  );
+}
+exports.treeToGraph = editState.treeToGraph;
+exports.FeedbackComponent = FeedbackComponent;
+//# sourceMappingURL=index.cjs.map

package/dist/feedback/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/feedback/index.ts"],"sourcesContent":["import styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport { Tree, TreeApi } from \"react-arborist\";\nimport Node from \"./node\";\nimport { FeedbackText } from \"./text-visualizer\";\nimport type { InternalEntity, TreeData } from \"./types\";\nimport type { Entity } from \"../extractions\";\nimport { getTagStyle, ModelInfo } from \"../extractions\";\nimport {\n  TreeDispatchContext,\n  treeToGraph,\n  useUpdatableTree,\n  ViewMode,\n} from \"./edit-state\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  ButtonGroup,\n  Card,\n  SegmentedControl,\n  Divider,\n} from \"@blueprintjs/core\";\nimport { OmniboxSelector } from \"./type-selector\";\nimport {\n  CancelButton,\n  ErrorBoundary,\n  FlexRow,\n  SaveButton,\n} from \"@macrostrat/ui-components\";\nimport useElementDimensions from \"use-element-dimensions\";\nimport { GraphView } from \"./graph\";\n\nimport { Matches } from \"./matches\";\nimport { TypeList } from \"./typelist\";\n\nexport type { GraphData } from \"./edit-state\";\nexport { treeToGraph } from \"./edit-state\";\nexport type { TreeData } from \"./types\";\n\nconst h = hyper.styled(styles);\n\nfunction setsAreTheSame<T>(a: Set<T>, b: Set<T>) {\n  if (a.size !== b.size) return false;\n  for (const item of a) {\n    if (!b.has(item)) return false;\n  }\n  return true;\n}\n\nexport function FeedbackComponent({\n  entities = [],\n  text,\n  model,\n  entityTypes,\n  matchComponent,\n  onSave,\n  allowOverlap,\n  matchLinks,\n  view = false,\n  autoSelect = [],\n}) {\n  const [viewOnly, setViewOnly] = useState(view);\n  const [match, setMatchLinks] = useState(matchLinks);\n  const matchMode = match !== undefined;\n\n  // Get the input arguments\n  const [state, dispatch] = useUpdatableTree(\n    entities.map(processEntity) as any,\n    entityTypes,\n    viewOnly,\n    matchMode,\n    autoSelect,\n  );\n\n  const {\n    selectedNodes,\n    tree,\n    selectedEntityType,\n    isSelectingEntityType,\n    entityTypesMap,\n  } = state;\n\n  const [{ width, height }, ref] = useElementDimensions();\n\n  return h(\"div.page-wrapper\", [\n    h(\n      \"div.feedback-container\",\n      h(TreeDispatchContext.Provider, { value: dispatch }, [\n        h.if(!view)(SegmentedControl, {\n          options: [\n            { label: \"View\", value: \"view\" },\n            { label: \"Edit\", value: \"edit\" },\n          ],\n          value: viewOnly ? \"view\" : \"edit\",\n          small: true,\n          onValueChange() {\n            setViewOnly(!viewOnly);\n            dispatch({ type: \"toggle-view-only\" });\n          },\n          role: \"toolbar\",\n        }),\n        h(\n          ErrorBoundary,\n          {\n            description:\n              \"An error occurred while rendering the feedback text component.\",\n          },\n          h(FeedbackText, {\n            text,\n            dispatch,\n            // @ts-ignore\n            nodes: tree,\n            selectedNodes,\n            allowOverlap,\n            matchLinks: match,\n            viewOnly,\n          }),\n        ),\n        h(\n          FlexRow,\n          { alignItems: \"baseline\", justifyContent: \"space-between\" },\n          [\n            h(ModelInfo, { data: model }),\n            h(SegmentedControl, {\n              options: [\n                { label: \"Tree\", value: \"tree\" },\n                { label: \"Graph\", value: \"graph\" },\n              ],\n              value: state.viewMode,\n              small: true,\n              onValueChange(value: ViewMode) {\n                console.log(\"Setting view mode\", value);\n                dispatch({ type: \"set-view-mode\", payload: value });\n              },\n            }),\n          ],\n        ),\n        h(\n          \"div.entity-panel\",\n          {\n            ref,\n          },\n          [\n            h.if(state.viewMode == \"tree\")(ManagedSelectionTree, {\n              selectedNodes,\n              dispatch,\n              tree,\n              width,\n              height,\n              matchComponent,\n              viewOnly,\n            }),\n            h.if(state.viewMode == \"graph\")(GraphView, {\n              tree,\n              width,\n              height,\n              dispatch,\n              selectedNodes,\n              viewOnly,\n            }),\n          ],\n        ),\n      ]),\n    ),\n    h(Card, { className: \"control-panel\" }, [\n      h(\"div.control-content\", [\n        h.if(!viewOnly)(\n          ButtonGroup,\n          {\n            vertical: true,\n            fill: true,\n            minimal: true,\n            alignText: \"left\",\n          },\n          [\n            h(\n              CancelButton,\n              {\n                icon: \"trash\",\n                disabled: state.initialTree == state.tree,\n                onClick() {\n                  dispatch({ type: \"reset\" });\n                },\n              },\n              \"Reset\",\n            ),\n            h(\n              SaveButton,\n              {\n                onClick() {\n                  onSave(state.tree);\n                },\n                disabled: state.initialTree == state.tree,\n              },\n              \"Save\",\n            ),\n          ],\n        ),\n        h.if(!viewOnly)(Matches, {\n          match,\n          setMatchLinks,\n          matchLinks,\n          selectedNodes,\n          tree,\n          dispatch,\n        }),\n        h.if(!viewOnly)(Divider),\n        h(EntityTypeSelector, {\n          entityTypes: entityTypesMap,\n          selected: selectedEntityType,\n          onChange(payload) {\n            dispatch({ type: \"select-entity-type\", payload });\n          },\n          dispatch,\n          tree,\n          selectedNodes,\n          isOpen: isSelectingEntityType,\n          setOpen: (isOpen: boolean) =>\n            dispatch({\n              type: \"toggle-entity-type-selector\",\n              payload: isOpen,\n            }),\n          viewOnly,\n          matchMode,\n        }),\n      ]),\n    ]),\n  ]);\n}\n\nfunction processEntity(entity: Entity): InternalEntity {\n  // @ts-ignore\n  return {\n    ...entity,\n    // @ts-ignore\n    term_type: entity.type.name,\n    txt_range: [entity.indices],\n    children: entity.children?.map(processEntity) ?? [],\n  };\n}\n\nfunction EntityTypeSelector({\n  entityTypes,\n  selected,\n  isOpen,\n  setOpen,\n  onChange,\n  tree,\n  dispatch,\n  selectedNodes = [],\n  viewOnly,\n  matchMode,\n}) {\n  // Show all entity types when selected is null\n  const _selected = selected != null ? selected : undefined;\n  const [inputValue, setInputValue] = useState(\"\");\n  const types = Array.from(entityTypes.values());\n\n  const items =\n    inputValue !== \"\"\n      ? types.filter((d) =>\n          d.name.toLowerCase().includes(inputValue.toLowerCase()),\n        )\n      : types;\n\n  return h(\"div.entity-type-selector\", [\n    h(TypeList, {\n      types: entityTypes,\n      selected: _selected,\n      dispatch,\n      selectedNodes,\n      tree,\n      viewOnly: viewOnly || matchMode,\n    }),\n    h(OmniboxSelector, {\n      isOpen,\n      items,\n      selectedItem: _selected,\n      onSelectItem(item) {\n        setOpen(false);\n        onChange(item);\n      },\n      onQueryChange(query) {\n        setInputValue(query);\n      },\n      onClose() {\n        setOpen(false);\n      },\n    }),\n  ]);\n}\n\nfunction countNodes(tree) {\n  if (!tree) return 0;\n  let count = 0;\n\n  function recurse(nodes) {\n    for (const node of nodes) {\n      count++;\n      if (node.children && Array.isArray(node.children)) {\n        recurse(node.children);\n      }\n    }\n  }\n\n  recurse(tree);\n  return count;\n}\n\nfunction ManagedSelectionTree(props) {\n  const {\n    selectedNodes,\n    dispatch,\n    tree,\n    height,\n    width,\n    matchComponent,\n    viewOnly,\n  } = props;\n\n  const ref = useRef<TreeApi<TreeData>>();\n  // Use a ref to track clicks (won't cause rerender)\n  const clickedRef = useRef(false);\n\n  const _Node = useCallback(\n    (props) => h(Node, { ...props, matchComponent, viewOnly }),\n    [matchComponent, viewOnly],\n  );\n\n  // Update Tree selection when selectedNodes change\n  useEffect(() => {\n    if (ref.current == null) return;\n\n    const selection = new Set(selectedNodes.map((d) => d.toString()));\n    const currentSelection = ref.current.selectedIds;\n    if (setsAreTheSame(selection, currentSelection)) return;\n\n    ref.current.setSelection({\n      ids: selectedNodes.map((d) => d.toString()),\n      anchor: null,\n      mostRecent: null,\n    });\n  }, [selectedNodes]);\n\n  // Mark clicked when user clicks inside the tree container\n  function handleClick() {\n    clickedRef.current = true;\n  }\n\n  const ctrlPressedRef = useRef(false);\n\n  useEffect(() => {\n    const down = (e) => {\n      if (e.ctrlKey || e.metaKey) ctrlPressedRef.current = true;\n    };\n    const up = () => (ctrlPressedRef.current = false);\n\n    window.addEventListener(\"keydown\", down);\n    window.addEventListener(\"keyup\", up);\n    return () => {\n      window.removeEventListener(\"keydown\", down);\n      window.removeEventListener(\"keyup\", up);\n    };\n  }, []);\n\n  const handleSelect = useCallback(\n    (nodes) => {\n      if (!clickedRef.current) return;\n      clickedRef.current = false;\n      const isMultiSelect = ctrlPressedRef.current;\n\n      let ids = nodes.map((d) => parseInt(d.id));\n\n      if (isMultiSelect) {\n        dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n      } else {\n        if (ids.length === 1 && ids[0] === selectedNodes[0]) {\n          ids = [];\n        }\n\n        dispatch({ type: \"select-node\", payload: { ids } });\n      }\n    },\n    [selectedNodes, dispatch],\n  );\n\n  return h(\n    \"div.selection-tree-wrapper\",\n    { onPointerDown: handleClick },\n    h(Tree, {\n      className: \"selection-tree\",\n      height,\n      width,\n      ref,\n      data: tree,\n      onMove({ dragIds, parentId, index }) {\n        dispatch({\n          type: \"move-node\",\n          payload: {\n            dragIds: dragIds.map((d) => parseInt(d)),\n            parentId: parentId ? parseInt(parentId) : null,\n            index,\n          },\n        });\n      },\n      onDelete({ ids }) {\n        dispatch({\n          type: \"delete-node\",\n          payload: { ids: ids.map((d) => parseInt(d)) },\n        });\n      },\n      onSelect: handleSelect,\n      children: _Node,\n      idAccessor(d) {\n        return d.id.toString();\n      },\n    }),\n  );\n}\n"],"names":["styles","useState","useUpdatableTree","TreeDispatchContext","SegmentedControl","ErrorBoundary","FeedbackText","FlexRow","ModelInfo","GraphView","Card","ButtonGroup","CancelButton","SaveButton","Matches","Divider","TypeList","OmniboxSelector","useRef","useCallback","props","Node","useEffect","Tree","index"],"mappings":"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"}

package/dist/feedback/index.d.ts

@@ -0,0 +1,15 @@
+export type { GraphData } from './edit-state';
+export { treeToGraph } from './edit-state';
+export type { TreeData } from './types';
+export declare function FeedbackComponent({ entities, text, model, entityTypes, matchComponent, onSave, allowOverlap, matchLinks, view, autoSelect, }: {
+    entities?: any[];
+    text: any;
+    model: any;
+    entityTypes: any;
+    matchComponent: any;
+    onSave: any;
+    allowOverlap: any;
+    matchLinks: any;
+    view?: boolean;
+    autoSelect?: any[];
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;