@macrostrat/feedback-components 1.1.3 → 1.1.5

package/src/feedback/edit-state.ts

@@ -17,6 +17,8 @@ interface TreeState {
   lastInternalId: number;
   isSelectingEntityType: boolean;
   viewMode: ViewMode;
+  viewOnly: boolean;
+  matchMode: boolean;
 }
 
 type TextRange = {
@@ -48,13 +50,18 @@ type TreeAction =
       type: "update-entity-type";
       payload: { id: number; name: string; description: string; color: string };
     }
-  | { type: "select-range"; payload: { ids: number[] } };
+  | { type: "select-range"; payload: { ids: number[] } }
+  | { type: "add-match"; payload: { id: number; payload: any } }
+  | { type: "remove-match"; payload: { id: number } }
+  | { type: "toggle-match-mode" };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
 export function useUpdatableTree(
   initialTree: TreeData[],
   entityTypes: Map<number, EntityType>,
+  viewOnly: boolean,
+  matchMode: boolean,
 ): [TreeState, TreeDispatch] {
   // Get the first entity type
   // issue: grabs second entity instead of selected one
@@ -69,6 +76,8 @@ export function useUpdatableTree(
     lastInternalId: 0,
     isSelectingEntityType: false,
     viewMode: ViewMode.Tree,
+    viewOnly,
+    matchMode,
   });
 }
 
@@ -83,6 +92,14 @@ export function useTreeDispatch() {
 }
 
 function treeReducer(state: TreeState, action: TreeAction) {
+  if (action.type === "toggle-match-mode") {
+    return { ...state, matchMode: !state.matchMode };
+  }
+
+  if (state.viewOnly) return viewMode(state, action);
+
+  if (state.matchMode) return matchMode(state, action);
+
   switch (action.type) {
     case "add-entity-type": {
       // Add a new entity type to the map
@@ -246,7 +263,6 @@ function treeReducer(state: TreeState, action: TreeAction) {
 
     case "delete-entity-type": {
       // Remove the entity type from the map
-      console.log("Deleting entity type:", action.payload.id);
       const { id } = action.payload;
       const newEntityTypesMap = new Map(state.entityTypesMap);
       const oldType = newEntityTypesMap.get(id);
@@ -431,7 +447,7 @@ export function treeToGraph(tree: TreeData[]): GraphData {
   return { nodes, edges };
 }
 
-function findNodeById(tree, id) {
+export function findNodeById(tree, id) {
   for (const node of tree) {
     if (node.id === id) {
       return node;
@@ -477,3 +493,83 @@ function flattenAndSort(nodes) {
   // sort by start
   return result.sort((a, b) => a.indices[0] - b.indices[0]);
 }
+
+function matchMode(state, action) {
+  if (action.type === "select-node" || action.type === "toggle-node-selected") {
+    const { ids } = action.payload;
+
+    if (ids.length != 1) return state;
+
+    if (state.selectedNodes.length === 1) {
+      if (ids[0] === state.selectedNodes[0]) {
+        // If the selected node is the same as the current selection, deselect it
+        return { ...state, selectedNodes: [] };
+      }
+    }
+
+    const type =
+      action.payload.ids.length > 0
+        ? findNodeById(state.tree, ids[0])?.type
+        : null;
+
+    return { ...state, selectedNodes: ids, selectedEntityType: type };
+  }
+
+  if (action.type === "add-match") {
+    const { id } = action.payload;
+
+    // Find the node path
+    const keyPath = findNode(state.tree, id);
+    if (!keyPath) {
+      console.warn(`Node with id ${id} not found`);
+      return state;
+    }
+
+    // Build update spec to set the `match` property
+    const matchUpdateSpec = buildNestedSpec(keyPath, {
+      match: { $set: action.payload.payload },
+    });
+
+    const updatedTree = update(state.tree, matchUpdateSpec);
+
+    return {
+      ...state,
+      tree: updatedTree,
+    };
+  }
+
+  if (action.type === "remove-match") {
+    const { id } = action.payload;
+
+    console.log("Removing match for node with id:", id);
+
+    // Find the node path
+    const keyPath = findNode(state.tree, id);
+    if (!keyPath) {
+      console.warn(`Node with id ${id} not found`);
+      return state;
+    }
+
+    // Build update spec to unset the `match` property
+    const matchUpdateSpec = buildNestedSpec(keyPath, {
+      match: { $set: null },
+    });
+
+    const updatedTree = update(state.tree, matchUpdateSpec);
+
+    return {
+      ...state,
+      tree: updatedTree,
+    };
+  }
+
+  return state;
+}
+
+function viewMode(state, action) {
+  if (action.type === "set-view-mode") {
+    return { ...state, viewMode: action.payload };
+  }
+
+  return state;
+}

package/src/feedback/feedback.module.sass

@@ -31,7 +31,6 @@
   cursor: pointer
 
 circle
-  cursor: pointer
   border: 1px solid black
 
 .selected
@@ -79,12 +78,14 @@ mark
   width: auto !important
 
 .highlight
-  cursor: pointer
   padding: .2em 0
   border-radius: .2em
   position: relative
   zIndex: 10
 
+.clickable
+  cursor: pointer
+
 .feedback-text-wrapper 
   position: relative
   z-index: 0
@@ -115,7 +116,7 @@ mark
   align-items: center
 
   .add-type-overlay
-    background-color: var(--secondary-color)
+    background-color: var(--tertiary-background)
     padding: .5em 1em
     display: flex
     flex-direction: column
@@ -146,4 +147,23 @@ mark
 .node-label
   fill: var(--text-emphasized-color)
   fontSize: 10px
-  pointerEvents: none
+  pointerEvents: none
+
+.match-item
+  color: var(--text-emphasized-color)
+  padding: .1em .2em
+  border-radius: .2em
+  margin-bottom: 4px
+  cursor: pointer
+  
+  .match-label
+    margin: 0
+    color: var(--text-color)
+
+.match-container
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+  .close-btn
+    cursor: pointer

package/src/feedback/graph.ts

@@ -24,10 +24,11 @@ export function GraphView(props: {
   height: number;
   dispatch: (action: any) => void;
   selectedNodes: number[];
+  viewOnly?: boolean;
 }) {
   // A graph view with react-flow
   // Get positions of nodes using force simulation
-  const { tree, width, height, dispatch, selectedNodes } = props;
+  const { tree, width, height, dispatch, selectedNodes, viewOnly } = props;
 
   const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);
   const [links, setLinks] = useState<SimulationLinkDatum[]>(null);
@@ -134,7 +135,9 @@ export function GraphView(props: {
                     });
                   }
                 },
-                className: active ? "selected" : "",
+                className: active
+                  ? "selected"
+                  : "" + (viewOnly ? "" : " clickable"),
                 stroke,
                 strokeWidth: 2,
               }),

package/src/feedback/index.ts

@@ -18,26 +18,20 @@ import {
   ButtonGroup,
   Card,
   SegmentedControl,
-  Icon,
-  Popover,
   Divider,
-  Overlay2,
 } from "@blueprintjs/core";
 import { OmniboxSelector } from "./type-selector";
 import {
   CancelButton,
-  DataField,
   ErrorBoundary,
-  FlexBox,
   FlexRow,
   SaveButton,
 } from "@macrostrat/ui-components";
 import useElementDimensions from "use-element-dimensions";
 import { GraphView } from "./graph";
-import { useInDarkMode } from "@macrostrat/ui-components";
-import { asChromaColor } from "@macrostrat/color-utils";
-import { ColorPicker } from "@macrostrat/data-sheet";
-import { Switch } from "@blueprintjs/core";
+
+import { Matches } from "./matches";
+import { TypeList } from "./typelist";
 
 export type { GraphData } from "./edit-state";
 export { treeToGraph } from "./edit-state";
@@ -62,13 +56,19 @@ export function FeedbackComponent({
   onSave,
   allowOverlap,
   matchLinks,
+  view = false,
 }) {
+  const [viewOnly, setViewOnly] = useState(view);
+  const [match, setMatchLinks] = useState(matchLinks);
+  const matchMode = match !== null;
+
   // Get the input arguments
   const [state, dispatch] = useUpdatableTree(
     entities.map(processEntity) as any,
     entityTypes,
+    viewOnly,
+    matchMode,
   );
-  const [match, setMatchLinks] = useState(matchLinks || {});
 
   const {
     selectedNodes,
@@ -84,6 +84,18 @@ export function FeedbackComponent({
     h(
       "div.feedback-container",
       h(TreeDispatchContext.Provider, { value: dispatch }, [
+        h.if(!view)(SegmentedControl, {
+          options: [
+            { label: "View", value: "view" },
+            { label: "Edit", value: "edit" },
+          ],
+          value: viewOnly ? "view" : "edit",
+          small: true,
+          onValueChange() {
+            setViewOnly(!viewOnly);
+          },
+          role: "toolbar",
+        }),
         h(
           ErrorBoundary,
           {
@@ -98,6 +110,7 @@ export function FeedbackComponent({
             selectedNodes,
             allowOverlap,
             matchLinks: match,
+            viewOnly,
           }),
         ),
         h(
@@ -139,6 +152,7 @@ export function FeedbackComponent({
               height,
               dispatch,
               selectedNodes,
+              viewOnly,
             }),
           ],
         ),
@@ -146,7 +160,7 @@ export function FeedbackComponent({
     ),
     h(Card, { className: "control-panel" }, [
       h("div.control-content", [
-        h(
+        h.if(!viewOnly)(
           ButtonGroup,
           {
             vertical: true,
@@ -155,13 +169,6 @@ export function FeedbackComponent({
             alignText: "left",
           },
           [
-            h.if(matchLinks)(Switch, {
-              label: "Show matches",
-              checked: match !== null,
-              onChange: (e) => {
-                setMatchLinks(match === null ? matchLinks || {} : null);
-              },
-            }),
             h(
               CancelButton,
               {
@@ -185,7 +192,15 @@ export function FeedbackComponent({
             ),
           ],
         ),
-        h(Divider),
+        h.if(!viewOnly)(Matches, {
+          match,
+          setMatchLinks,
+          matchLinks,
+          selectedNodes,
+          tree,
+          dispatch,
+        }),
+        h.if(!viewOnly)(Divider),
         h(EntityTypeSelector, {
           entityTypes: entityTypesMap,
           selected: selectedEntityType,
@@ -201,6 +216,8 @@ export function FeedbackComponent({
               type: "toggle-entity-type-selector",
               payload: isOpen,
             }),
+          viewOnly,
+          matchMode,
         }),
       ]),
     ]),
@@ -227,6 +244,8 @@ function EntityTypeSelector({
   tree,
   dispatch,
   selectedNodes = [],
+  viewOnly,
+  matchMode,
 }) {
   // Show all entity types when selected is null
   const _selected = selected != null ? selected : undefined;
@@ -247,6 +266,7 @@ function EntityTypeSelector({
       dispatch,
       selectedNodes,
       tree,
+      viewOnly: viewOnly || matchMode,
     }),
     h(OmniboxSelector, {
       isOpen,
@@ -386,304 +406,3 @@ function ManagedSelectionTree(props) {
     }),
   );
 }
-
-function TypeList({ types, selected, dispatch, selectedNodes, tree }) {
-  const [selectedType, setSelectedType] = useState(null);
-  const isSelectedNodes = selectedNodes.length > 0;
-  const darkMode = useInDarkMode();
-  const luminance = darkMode ? 0.9 : 0.4;
-
-  return h("div.type-list-container", [
-    h(
-      "div.type-list-header",
-      isSelectedNodes && !selectedType
-        ? "Change selected nodes to:"
-        : "Entity Types",
-    ),
-    h(
-      "div.type-list",
-      Array.from(types.values()).map((type) =>
-        h(TypeTag, {
-          type,
-          luminance,
-          selectedType,
-          setSelectedType,
-          dispatch,
-          tree,
-          selectedNodes,
-          selected,
-          isSelectedNodes,
-        }),
-      ),
-    ),
-    h(AddType, { dispatch }),
-  ]);
-}
-
-function collectMatchingIds(tree, id) {
-  const ids = [];
-
-  function traverse(node) {
-    if (node.type.id === id) {
-      ids.push(node.id);
-    }
-    if (Array.isArray(node.children)) {
-      node.children.forEach(traverse);
-    }
-  }
-
-  tree.forEach(traverse);
-  return ids;
-}
-
-function AddType({ dispatch }) {
-  const [overlayOpen, setOverlayOpen] = useState(false);
-
-  const saveHandler = (payload) => {
-    dispatch({
-      type: "add-entity-type",
-      payload,
-    });
-    setOverlayOpen(false);
-  };
-
-  return h("div.add-type-container", [
-    h("div.add-type", { onClick: () => setOverlayOpen(true) }, [
-      h("p.add-type-text", "Add new type"),
-      h(Icon, { icon: "plus" }),
-    ]),
-    h(TypeOverlay, {
-      setOverlayOpen,
-      overlayOpen,
-      title: "Add New Type",
-      saveHandler,
-    }),
-  ]);
-}
-
-function EditType({ dispatch, type }) {
-  const [editorOpen, setEditorOpen] = useState(false);
-
-  const saveHandler = (payload) => {
-    dispatch({
-      type: "update-entity-type",
-      payload,
-    });
-    setEditorOpen(false);
-  };
-
-  return h("div.edit-type", [
-    h(Icon, {
-      icon: "edit",
-      className: "edit-icon",
-      onClick: (e) => {
-        e.stopPropagation();
-        setEditorOpen(true);
-      },
-    }),
-    h(TypeOverlay, {
-      setOverlayOpen: setEditorOpen,
-      overlayOpen: editorOpen,
-      originalType: type,
-      title: "Edit Type",
-      saveHandler,
-    }),
-  ]);
-}
-
-function TypeOverlay({
-  setOverlayOpen,
-  overlayOpen,
-  originalType,
-  title,
-  saveHandler,
-}) {
-  const { name, description, color, id } = originalType || {};
-
-  const [nameInput, setNameInput] = useState(name || "");
-  const [descriptionInput, setDescriptionInput] = useState(description || "");
-  const [colorInput, setColorInput] = useState(color || "#fff");
-
-  return h(
-    Overlay2,
-    {
-      isOpen: overlayOpen,
-    },
-    h(
-      "div.overlay-container",
-      h("div.add-type-overlay", [
-        h("h2.title", [
-          title,
-          h(Icon, {
-            icon: "cross",
-            className: "close-icon",
-            onClick: () => {
-              setOverlayOpen(false);
-            },
-            style: { cursor: "pointer", color: "red" },
-          }),
-        ]),
-        h("div.form-group", [
-          h("div.text-inputs", [
-            h("div.form-field.name", [
-              h("p.label", "Name"),
-              h("input", {
-                type: "text",
-                placeholder: "Enter type name",
-                onChange: (e) => setNameInput(e.target.value),
-                value: nameInput,
-              }),
-            ]),
-            h("div.form-field.form-description", [
-              h("p.label", "Description"),
-              h("input", {
-                type: "text",
-                placeholder: "Enter type description",
-                onChange: (e) => setDescriptionInput(e.target.value),
-                value: descriptionInput,
-              }),
-            ]),
-          ]),
-          h("div.form-field.color", [
-            h("p.label", "Color"),
-            h(ColorPicker, {
-              value: colorInput,
-              onChange: (color) => setColorInput(color),
-              style: { width: "100%" },
-            }),
-          ]),
-        ]),
-        h(
-          SaveButton,
-          {
-            className: "save-btn",
-            small: true,
-            onClick: () =>
-              saveHandler({
-                name: nameInput,
-                description: descriptionInput,
-                color: colorInput,
-                id,
-              }),
-          },
-          "Save changes",
-        ),
-      ]),
-    ),
-  );
-}
-
-function TypeTag({
-  type,
-  luminance,
-  selectedType,
-  setSelectedType,
-  dispatch,
-  tree,
-  selectedNodes,
-  selected,
-  isSelectedNodes,
-}) {
-  const { color, name, id, description } = type;
-  const darkMode = useInDarkMode();
-  const isSelected = id === selected?.id && selectedNodes.length > 0;
-
-  const style = getTagStyle(color, {
-    active: isSelected,
-    highlighted: selectedNodes.length === 0,
-  });
-
-  const payload = {
-    id,
-    name,
-    color,
-    description,
-  };
-
-  const ids = collectMatchingIds(tree, id);
-
-  const handleTagClick = () => {
-    if (!isSelectedNodes && selectedType === null) {
-      if (ids.length > 0) {
-        setSelectedType(type);
-        dispatch({ type: "toggle-node-selected", payload: { ids } });
-      }
-    } else if (isSelectedNodes && selectedType === null) {
-      if (id === selected?.id && selectedNodes.length > 0) {
-        dispatch({
-          type: "toggle-node-selected",
-          payload: { ids: selectedNodes },
-        });
-      } else {
-        dispatch({ type: "select-entity-type", payload });
-      }
-    } else if (isSelectedNodes && selectedType.id === id) {
-      setSelectedType(null);
-      dispatch({ type: "toggle-node-selected", payload: { ids } });
-    } else if (isSelectedNodes && selectedType.id !== id) {
-      if (ids.length > 0) {
-        setSelectedType(type);
-        const oldIds = collectMatchingIds(tree, selectedType.id);
-
-        dispatch({ type: "toggle-node-selected", payload: { ids: oldIds } });
-        dispatch({ type: "toggle-node-selected", payload: { ids } });
-      }
-    } else {
-      console.warn("Unexpected state in TypeTag click handler", {
-        isSelectedNodes,
-        selectedType,
-        selectedNodes,
-        ids,
-        id,
-        selected,
-      });
-    }
-  };
-
-  return h(
-    Popover,
-    {
-      autoFocus: false,
-      content: h("div.description", description || "No description available"),
-      interactionKind: "hover",
-    },
-    h(
-      "div.type-tag",
-      {
-        onClick: handleTagClick,
-        style: {
-          cursor:
-            ids.length > 0 || (isSelectedNodes && !selectedType)
-              ? "pointer"
-              : "",
-          color: "black",
-          backgroundColor: style.backgroundColor,
-          border: isSelected
-            ? `1px solid var(--text-emphasized-color)`
-            : `1px solid var(--background-color)`,
-        },
-      },
-      h("div.type-container", [
-        h("div.type-name", name),
-        h("div.icons", [
-          h(EditType, {
-            dispatch,
-            type,
-          }),
-          h(Icon, {
-            icon: "cross",
-            className: "delete-type-icon",
-            style: { color: "red", cursor: "pointer" },
-            onClick: (e) => {
-              e.stopPropagation();
-              dispatch({
-                type: "delete-entity-type",
-                payload: { id },
-              });
-            },
-          }),
-        ]),
-      ]),
-    ),
-  );
-}