@macrostrat/feedback-components 1.1.0 → 1.1.1

package/src/feedback/edit-state.ts

@@ -47,7 +47,8 @@ type TreeAction =
   | {
       type: "update-entity-type";
       payload: { id: number; name: string; description: string; color: string };
-    };
+    }
+  | { type: "select-range"; payload: { ids: number[] } };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
@@ -134,6 +135,27 @@ function treeReducer(state: TreeState, action: TreeAction) {
         selectedEntityType: updatedType,
       };
     }
+    case "select-range":
+      // Select a range of nodes by their IDs
+      const payloadIds = action.payload.ids;
+      const node1 = payloadIds[0];
+      const node2 = payloadIds[1];
+
+      // make list of nodes in order
+      const allNodes = flattenAndSort(state.tree);
+
+      // select all nodes between node1 and node2
+      const startIndex = allNodes.findIndex((node) => node.id === node1);
+      const endIndex = allNodes.findIndex((node) => node.id === node2);
+
+      const selectedNodes = allNodes.slice(startIndex, endIndex + 1);
+
+      console.log("Selecting range:", selectedNodes);
+      return {
+        ...state,
+        selectedNodes: selectedNodes.map((node) => node.id),
+      };
+
     case "move-node":
       // For each node in the tree, if the node is in the dragIds, remove it from the tree and collect it
       const [newTree, removedNodes] = removeNodes(
@@ -183,8 +205,6 @@ function treeReducer(state: TreeState, action: TreeAction) {
           ? findNodeById(state.tree, ids[0])?.type
           : null;
 
-      console.log("Selecting nodes:", ids, "Type:", type);
-
       return { ...state, selectedNodes: ids, selectedEntityType: type };
     // otherwise fall through to toggle-node-selected for a single ID
     case "toggle-node-selected":
@@ -439,3 +459,21 @@ function updateNodeType(node, oldType, defaultType) {
       : [],
   };
 }
+
+function flattenAndSort(nodes) {
+  const result = [];
+
+  function traverse(nodeList) {
+    for (const node of nodeList) {
+      result.push(node);
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        traverse(node.children);
+      }
+    }
+  }
+
+  traverse(nodes);
+
+  // sort by start
+  return result.sort((a, b) => a.indices[0] - b.indices[0]);
+}

package/src/feedback/feedback.module.sass

@@ -1,3 +1,25 @@
+:root
+  --text-line-height: 3em
+  --main-extra-width: 200px
+
+.page-wrapper
+  display: flex
+  flex-direction: row
+  position: relative
+  gap: 2em
+  align-items: flex-start // makes control-content lose stick
+
+.feedback-container
+  flex: 4
+
+.control-panel
+  flex: 1
+  height: auto
+
+.control-content
+  position: sticky
+  top: 0
+
 .feedback-component
   position: relative
   width: 800px
@@ -21,14 +43,7 @@ circle
 .entity-panel
   position: relative
   max-height: 600px
-
-.control-panel
-  position: absolute
-  top: 1em
-  right: 1em
-  padding: 0.2em 0.5em
-
-.entity-panel
+  width: calc(100% - 2em)
   flex: 1
   min-height: 100px
   padding: 1em
@@ -40,7 +55,6 @@ circle
 .selection-tree
   margin: -1em 0
   padding: 1em 0
-  width: 70% !important
   
 .type-list
   display: grid
@@ -75,6 +89,7 @@ mark
   position: relative
   z-index: 0
   overflow: visible
+  line-height: var(--text-line-height)
 
 .type-container
   display: flex
@@ -126,4 +141,9 @@ mark
 
 .icons
   display: flex
-  gap: .25em
+  gap: .25em
+
+.node-label
+  fill: var(--text-emphasized-color)
+  fontSize: 10px
+  pointerEvents: none

package/src/feedback/graph.ts

@@ -1,7 +1,7 @@
 import { TreeData } from "./types";
 import { treeToGraph } from "./edit-state";
-import h from "@macrostrat/hyper";
-
+import styles from "./feedback.module.sass";
+import hyper from "@macrostrat/hyper";
 import {
   forceSimulation,
   SimulationNodeDatum,
@@ -12,10 +12,12 @@ import {
   forceCollide,
 } from "d3-force";
 import { useEffect, useState } from "react";
-import { Spinner, Popover } from "@blueprintjs/core";
+import { Spinner, Switch } from "@blueprintjs/core";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 import { getTagStyle } from "../extractions";
 
+const h = hyper.styled(styles);
+
 export function GraphView(props: {
   tree: TreeData[];
   width: number;
@@ -29,6 +31,7 @@ export function GraphView(props: {
 
   const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);
   const [links, setLinks] = useState<SimulationLinkDatum[]>(null);
+  const [showLabels, setShowLabels] = useState(false);
 
   useEffect(() => {
     const { nodes, edges } = treeToGraph(tree);
@@ -78,6 +81,12 @@ export function GraphView(props: {
       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",
@@ -99,12 +108,11 @@ export function GraphView(props: {
             const highlighted = isHighlighted(d.id, selectedNodes, nodes);
             const style = getTagStyle(d.color, { highlighted, active });
 
-            return h(
-              "circle",
-              {
+            return h("g", [
+              h("circle", {
                 cx: d.x,
                 cy: d.y,
-                r: 5,
+                r: 8,
                 fill: style.backgroundColor || "blue",
                 onClick: (e) => {
                   e.stopPropagation();
@@ -116,9 +124,18 @@ export function GraphView(props: {
                 className: active ? "selected" : "",
                 stroke,
                 strokeWidth: 2,
-              },
-              h("title", d.name || `Node ${d.id}`),
-            );
+              }),
+              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}`),
+            ]);
           }),
         ),
       ]),

package/src/feedback/index.ts

@@ -6,7 +6,7 @@ import Node from "./node";
 import { FeedbackText } from "./text-visualizer";
 import type { InternalEntity, TreeData } from "./types";
 import type { Entity } from "../extractions";
-import { ModelInfo } from "../extractions";
+import { getTagStyle, ModelInfo } from "../extractions";
 import {
   TreeDispatchContext,
   treeToGraph,
@@ -59,7 +59,6 @@ export function FeedbackComponent({
   entityTypes,
   matchComponent,
   onSave,
-  lineHeight,
   allowOverlap,
 }) {
   // Get the input arguments
@@ -78,112 +77,122 @@ export function FeedbackComponent({
 
   const [{ width, height }, ref] = useElementDimensions();
 
-  return h(TreeDispatchContext.Provider, { value: dispatch }, [
+  return h("div.page-wrapper", [
     h(
-      ErrorBoundary,
-      {
-        description:
-          "An error occurred while rendering the feedback text component.",
-      },
-      h(FeedbackText, {
-        text,
-        dispatch,
-        // @ts-ignore
-        nodes: tree,
-        selectedNodes,
-        lineHeight,
-        allowOverlap,
-      }),
-    ),
-    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",
-      {
-        ref,
-      },
-      [
-        h(Card, { className: "control-panel" }, [
-          h(
-            ButtonGroup,
-            {
-              vertical: true,
-              fill: true,
-              minimal: true,
-              alignText: "left",
-            },
-            [
-              h(
-                CancelButton,
-                {
-                  icon: "trash",
-                  disabled: state.initialTree == state.tree,
-                  onClick() {
-                    dispatch({ type: "reset" });
-                  },
-                },
-                "Reset",
-              ),
-              h(
-                SaveButton,
-                {
-                  onClick() {
-                    onSave(state.tree);
-                  },
-                  disabled: state.initialTree == state.tree,
-                },
-                "Save",
-              ),
-            ],
-          ),
-          h(Divider),
-          h(EntityTypeSelector, {
-            entityTypes: entityTypesMap,
-            selected: selectedEntityType,
-            onChange(payload) {
-              dispatch({ type: "select-entity-type", payload });
-            },
+      "div.feedback-container",
+      h(TreeDispatchContext.Provider, { value: dispatch }, [
+        h(
+          ErrorBoundary,
+          {
+            description:
+              "An error occurred while rendering the feedback text component.",
+          },
+          h(FeedbackText, {
+            text,
             dispatch,
-            tree,
+            // @ts-ignore
+            nodes: tree,
             selectedNodes,
-            isOpen: isSelectingEntityType,
-            setOpen: (isOpen: boolean) =>
-              dispatch({
-                type: "toggle-entity-type-selector",
-                payload: isOpen,
-              }),
+            allowOverlap,
           }),
-        ]),
-        h.if(state.viewMode == "tree")(ManagedSelectionTree, {
-          selectedNodes,
+        ),
+        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",
+          {
+            ref,
+          },
+          [
+            h.if(state.viewMode == "tree")(ManagedSelectionTree, {
+              selectedNodes,
+              dispatch,
+              tree,
+              width,
+              height,
+              matchComponent,
+            }),
+            h.if(state.viewMode == "graph")(GraphView, {
+              tree,
+              width,
+              height,
+              dispatch,
+              selectedNodes,
+            }),
+          ],
+        ),
+      ]),
+    ),
+    h(Card, { className: "control-panel" }, [
+      h("div.control-content", [
+        h(
+          ButtonGroup,
+          {
+            vertical: true,
+            fill: true,
+            minimal: true,
+            alignText: "left",
+          },
+          [
+            h(
+              CancelButton,
+              {
+                icon: "trash",
+                disabled: state.initialTree == state.tree,
+                onClick() {
+                  dispatch({ type: "reset" });
+                },
+              },
+              "Reset",
+            ),
+            h(
+              SaveButton,
+              {
+                onClick() {
+                  onSave(state.tree);
+                },
+                disabled: state.initialTree == state.tree,
+              },
+              "Save",
+            ),
+          ],
+        ),
+        h(Divider),
+        h(EntityTypeSelector, {
+          entityTypes: entityTypesMap,
+          selected: selectedEntityType,
+          onChange(payload) {
+            dispatch({ type: "select-entity-type", payload });
+          },
           dispatch,
           tree,
-          width,
-          height,
-          matchComponent,
-        }),
-        h.if(state.viewMode == "graph")(GraphView, {
-          tree,
-          width,
-          height,
-          dispatch,
           selectedNodes,
+          isOpen: isSelectingEntityType,
+          setOpen: (isOpen: boolean) =>
+            dispatch({
+              type: "toggle-entity-type-selector",
+              payload: isOpen,
+            }),
         }),
-      ],
-    ),
+      ]),
+    ]),
   ]);
 }
 
@@ -296,18 +305,39 @@ function ManagedSelectionTree(props) {
     clickedRef.current = true;
   }
 
+  const ctrlPressedRef = useRef(false);
+
+  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 = useCallback(
     (nodes) => {
       if (!clickedRef.current) return;
       clickedRef.current = false;
-      console.log("Clicked nodes:", nodes);
+      const isMultiSelect = ctrlPressedRef.current;
 
       let ids = nodes.map((d) => parseInt(d.id));
-      if (ids.length === 1 && ids[0] === selectedNodes[0]) {
-        ids = [];
-      }
 
-      dispatch({ type: "select-node", payload: { ids } });
+      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],
   );
@@ -544,8 +574,13 @@ function TypeTag({
   isSelectedNodes,
 }) {
   const { color, name, id, description } = type;
-  const chromaColor = asChromaColor(color ?? "#000000");
   const darkMode = useInDarkMode();
+  const isSelected = id === selected?.id && selectedNodes.length > 0;
+
+  const style = getTagStyle(color, {
+    active: isSelected,
+    highlighted: selectedNodes.length === 0,
+  });
 
   const payload = {
     id,
@@ -610,12 +645,11 @@ function TypeTag({
             ids.length > 0 || (isSelectedNodes && !selectedType)
               ? "pointer"
               : "",
-          color: darkMode ? "white" : "black",
-          backgroundColor: chromaColor?.luminance(1 - luminance).hex(),
-          border:
-            id === selected?.id && selectedNodes.length > 0
-              ? `1px solid var(--text-emphasized-color)`
-              : `1px solid var(--background-color)`,
+          color: "black",
+          backgroundColor: style.backgroundColor,
+          border: isSelected
+            ? `1px solid var(--text-emphasized-color)`
+            : `1px solid var(--background-color)`,
         },
       },
       h("div.type-container", [

package/src/feedback/text-visualizer.ts

@@ -73,8 +73,7 @@ function isHighlighted(tag: Highlight, selectedNodes: number[]) {
 
 export function FeedbackText(props: FeedbackTextProps) {
   // Convert input to tags
-  const { text, selectedNodes, nodes, dispatch, lineHeight, allowOverlap } =
-    props;
+  const { text, selectedNodes, nodes, dispatch, allowOverlap } = props;
   const allTags: AnnotateBlendTag[] = buildTags(
     buildHighlights(nodes, null),
     selectedNodes,
@@ -96,7 +95,6 @@ export function FeedbackText(props: FeedbackTextProps) {
     h(HighlightedText, {
       text,
       allTags,
-      lineHeight,
       allowOverlap,
       dispatch,
       selectedNodes,
@@ -143,7 +141,18 @@ function createTagFromSelection({
 }
 
 function addTag({ tag, dispatch, text, allTags, allowOverlap }) {
-  const { start, end } = tag;
+  let { start, end } = tag;
+  // snap to text
+  if (text[end - 1] != " ") {
+    // double clicking word overselects by one, shouldn't increase to next word
+    while (start > 0 && /\w/.test(text[start - 1])) {
+      start--;
+    }
+    while (end < text.length && /\w/.test(text[end])) {
+      end++;
+    }
+  }
+
   let payload = { start, end, text: text.slice(start, end) };
 
   if (payload.text.trim() === "") {
@@ -242,10 +251,13 @@ function renderNode(
 
   const { tag, children } = node;
   const isSelected = selectedNodes?.includes(tag.id);
+  const showBorder = selectedNodes.length === 0 || isSelected;
 
   const style = {
     ...tag,
     zIndex: parentSelected ? -1 : 1,
+    border: "1px solid " + (showBorder ? tag.color : "transparent"),
+    margin: "-1px",
   };
 
   let moveText = [];
@@ -269,10 +281,31 @@ function renderNode(
       style,
       onClick: (e: MouseEvent) => {
         e.stopPropagation();
-        dispatch({
-          type: "toggle-node-selected",
-          payload: { ids: [tag.id] },
-        });
+        if (
+          e.ctrlKey ||
+          e.metaKey ||
+          (selectedNodes[0] === tag.id && selectedNodes.length === 1)
+        ) {
+          // Toggle selection on ctrl/cmd click or when node is only selected node
+          e.stopPropagation();
+          dispatch({
+            type: "toggle-node-selected",
+            payload: { ids: [tag.id] },
+          });
+        } else if (e.shiftKey && selectedNodes.length > 0) {
+          // Select range from last selected node to this one
+          const lastSelected = selectedNodes[selectedNodes.length - 1];
+
+          dispatch({
+            type: "select-range",
+            payload: { ids: [lastSelected, tag.id] },
+          });
+        } else {
+          dispatch({
+            type: "select-node",
+            payload: { ids: [tag.id] },
+          });
+        }
       },
     },
     isSelected
@@ -291,14 +324,7 @@ export function HighlightedText(props: {
   dispatch: TreeDispatch;
   selectedNodes: number[];
 }) {
-  const {
-    text,
-    allTags = [],
-    lineHeight,
-    dispatch,
-    selectedNodes,
-    allowOverlap,
-  } = props;
+  const { text, allTags = [], dispatch, selectedNodes, allowOverlap } = props;
 
   const tree = nestHighlights(text, allTags);
 
@@ -319,7 +345,7 @@ export function HighlightedText(props: {
 
   return h(
     "span",
-    { style: { lineHeight }, ref: spanRef },
+    { ref: spanRef },
     tree.children.map((child: any, i: number) =>
       renderNode(child, dispatch, selectedNodes, false),
     ),

package/dist/esm/feedback-components.4359bc80.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAnBA,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,2CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,2CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,2CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,2CAA6B,CAAC,eAAe,CAAC","sources":["packages/feedback-components/src/feedback/feedback.module.sass"],"sourcesContent":[".feedback-component\n  position: relative\n  width: 800px\n\n  & > svg\n    width: 800px\n\n.node\n  cursor: pointer\n\ncircle\n  cursor: pointer\n  border: 1px solid black\n\n.selected\n  border: 1px solid white\n  \n.feedback-text\n  margin-bottom: 2em\n\n.entity-panel\n  position: relative\n  max-height: 600px\n\n.control-panel\n  position: absolute\n  top: 1em\n  right: 1em\n  padding: 0.2em 0.5em\n\n.entity-panel\n  flex: 1\n  min-height: 100px\n  padding: 1em\n  background: var(--panel-secondary-background-color)\n  border-radius: 4px\n  // Inset box shadow\n  box-shadow: 0 0 0 1px var(--panel-border-color) inset\n\n.selection-tree\n  margin: -1em 0\n  padding: 1em 0\n  width: 70% !important\n  \n.type-list\n  display: grid\n  grid-auto-flow: column\n  grid-template-rows: repeat(10, auto)\n  gap: 0.2em\n\n  .type-tag\n    padding: .2em .5em\n    border-radius: .2em\n\n.description\n  max-width: 300px\n  padding: .5em\n\nmark\n  border-radius: .2em\n  cursor: pointer\n  color: black !important\n\n[role=\"treeitem\"]\n  width: auto !important\n\n.highlight\n  cursor: pointer\n  padding: .2em 0\n  border-radius: .2em\n  position: relative\n  zIndex: 10\n\n.feedback-text-wrapper \n  position: relative\n  z-index: 0\n  overflow: visible\n\n.type-container\n  display: flex\n  justify-content: space-between\n  align-items: center\n  column-gap: 1em\n\n.add-type\n  cursor: pointer\n  display: flex\n  justify-content: space-between\n  padding: 0 .5em\n  align-items: center\n\n  p\n    margin: 0\n\n.overlay-container\n  height: 80vh\n  width: 100vw\n  display: flex\n  justify-content: center\n  align-items: center\n\n  .add-type-overlay\n    background-color: var(--secondary-color)\n    padding: .5em 1em\n    display: flex\n    flex-direction: column\n    gap: 1em\n    border-radius: .2em\n\n    .title\n      display: flex\n      justify-content: space-between\n      align-items: center\n\n    h2\n      margin: 0\n\n    .form-group\n      display: flex\n      gap: 3em\n\n      .text-inputs\n        display: flex\n        flex-direction: column\n        gap: 1em\n\n.icons\n  display: flex\n  gap: .25em"],"names":[],"version":3,"file":"feedback-components.4359bc80.js.map"}