@macrostrat/feedback-components 1.0.0 → 1.1.0

package/src/feedback/index.ts

@@ -13,18 +13,30 @@ import {
   useUpdatableTree,
   ViewMode,
 } from "./edit-state";
-import { useCallback, useEffect, useRef } from "react";
-import { ButtonGroup, Card, SegmentedControl } from "@blueprintjs/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+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";
 
 export type { GraphData } from "./edit-state";
 export { treeToGraph } from "./edit-state";
@@ -47,27 +59,42 @@ export function FeedbackComponent({
   entityTypes,
   matchComponent,
   onSave,
+  lineHeight,
+  allowOverlap,
 }) {
   // Get the input arguments
-
   const [state, dispatch] = useUpdatableTree(
     entities.map(processEntity) as any,
-    entityTypes
+    entityTypes,
   );
 
-  const { selectedNodes, tree, selectedEntityType, isSelectingEntityType } =
-    state;
+  const {
+    selectedNodes,
+    tree,
+    selectedEntityType,
+    isSelectingEntityType,
+    entityTypesMap,
+  } = state;
 
   const [{ width, height }, ref] = useElementDimensions();
 
   return h(TreeDispatchContext.Provider, { value: dispatch }, [
-    h(FeedbackText, {
-      text,
-      dispatch,
-      // @ts-ignore
-      nodes: tree,
-      selectedNodes,
-    }),
+    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, {
@@ -108,7 +135,7 @@ export function FeedbackComponent({
                     dispatch({ type: "reset" });
                   },
                 },
-                "Reset"
+                "Reset",
               ),
               h(
                 SaveButton,
@@ -118,16 +145,20 @@ export function FeedbackComponent({
                   },
                   disabled: state.initialTree == state.tree,
                 },
-                "Save"
+                "Save",
               ),
-            ]
+            ],
           ),
+          h(Divider),
           h(EntityTypeSelector, {
-            entityTypes,
+            entityTypes: entityTypesMap,
             selected: selectedEntityType,
             onChange(payload) {
               dispatch({ type: "select-entity-type", payload });
             },
+            dispatch,
+            tree,
+            selectedNodes,
             isOpen: isSelectingEntityType,
             setOpen: (isOpen: boolean) =>
               dispatch({
@@ -148,8 +179,10 @@ export function FeedbackComponent({
           tree,
           width,
           height,
+          dispatch,
+          selectedNodes,
         }),
-      ]
+      ],
     ),
   ]);
 }
@@ -171,27 +204,41 @@ function EntityTypeSelector({
   isOpen,
   setOpen,
   onChange,
+  tree,
+  dispatch,
+  selectedNodes = [],
 }) {
   // Show all entity types when selected is null
   const _selected = selected != null ? selected : undefined;
-  return h(DataField, { label: "Entity type", inline: true }, [
-    h(
-      "code.bp5-code",
-      {
-        onClick() {
-          setOpen((d) => !d);
-        },
-      },
-      selected.name
-    ),
+  const [inputValue, setInputValue] = 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, {
+      types: entityTypes,
+      selected: _selected,
+      dispatch,
+      selectedNodes,
+      tree,
+    }),
     h(OmniboxSelector, {
       isOpen,
-      items: Array.from(entityTypes.values()),
+      items,
       selectedItem: _selected,
       onSelectItem(item) {
         setOpen(false);
         onChange(item);
       },
+      onQueryChange(query) {
+        setInputValue(query);
+      },
       onClose() {
         setOpen(false);
       },
@@ -199,33 +246,44 @@ function EntityTypeSelector({
   ]);
 }
 
+function countNodes(tree) {
+  if (!tree) return 0;
+  let count = 0;
+
+  function recurse(nodes) {
+    for (const node of nodes) {
+      count++;
+      if (node.children && Array.isArray(node.children)) {
+        recurse(node.children);
+      }
+    }
+  }
+
+  recurse(tree);
+  return count;
+}
+
 function ManagedSelectionTree(props) {
-  const {
-    selectedNodes,
-    dispatch,
-    tree,
-    height,
-    width,
-    matchComponent,
-    ...rest
-  } = props;
+  const { selectedNodes, dispatch, tree, height, width, matchComponent } =
+    props;
 
   const ref = useRef<TreeApi<TreeData>>();
+  // Use a ref to track clicks (won't cause rerender)
+  const clickedRef = useRef(false);
 
   const _Node = useCallback(
     (props) => h(Node, { ...props, matchComponent }),
-    [matchComponent]
+    [matchComponent],
   );
 
+  // Update Tree selection when selectedNodes change
   useEffect(() => {
     if (ref.current == null) return;
-    // Check if selection matches current
+
     const selection = new Set(selectedNodes.map((d) => d.toString()));
     const currentSelection = ref.current.selectedIds;
     if (setsAreTheSame(selection, currentSelection)) return;
-    // If the selection is the same, do nothing
 
-    // Set selection
     ref.current.setSelection({
       ids: selectedNodes.map((d) => d.toString()),
       anchor: null,
@@ -233,39 +291,354 @@ function ManagedSelectionTree(props) {
     });
   }, [selectedNodes]);
 
-  return h(Tree, {
-    className: "selection-tree",
-    height,
-    width,
-    ref,
-    data: tree,
-    onMove({ dragIds, parentId, index }) {
-      dispatch({
-        type: "move-node",
-        payload: {
-          dragIds: dragIds.map((d) => parseInt(d)),
-          parentId: parentId ? parseInt(parentId) : null,
-          index,
-        },
-      });
-    },
-    onDelete({ ids }) {
-      dispatch({
-        type: "delete-node",
-        payload: { ids: ids.map((d) => parseInt(d)) },
-      });
-    },
-    onSelect(nodes) {
+  // Mark clicked when user clicks inside the tree container
+  function handleClick() {
+    clickedRef.current = true;
+  }
+
+  const handleSelect = useCallback(
+    (nodes) => {
+      if (!clickedRef.current) return;
+      clickedRef.current = false;
+      console.log("Clicked nodes:", nodes);
+
       let ids = nodes.map((d) => parseInt(d.id));
-      if (ids.length == 1 && ids[0] == selectedNodes[0]) {
-        // Deselect
+      if (ids.length === 1 && ids[0] === selectedNodes[0]) {
         ids = [];
       }
+
       dispatch({ type: "select-node", payload: { ids } });
     },
-    children: _Node,
-    idAccessor(d: TreeData) {
-      return d.id.toString();
+    [selectedNodes, dispatch],
+  );
+
+  return h(
+    "div.selection-tree-wrapper",
+    { onPointerDown: handleClick },
+    h(Tree, {
+      className: "selection-tree",
+      height,
+      width,
+      ref,
+      data: tree,
+      onMove({ dragIds, parentId, index }) {
+        dispatch({
+          type: "move-node",
+          payload: {
+            dragIds: dragIds.map((d) => parseInt(d)),
+            parentId: parentId ? parseInt(parentId) : null,
+            index,
+          },
+        });
+      },
+      onDelete({ ids }) {
+        dispatch({
+          type: "delete-node",
+          payload: { ids: ids.map((d) => parseInt(d)) },
+        });
+      },
+      onSelect: handleSelect,
+      children: _Node,
+      idAccessor(d) {
+        return d.id.toString();
+      },
+    }),
+  );
+}
+
+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 chromaColor = asChromaColor(color ?? "#000000");
+  const darkMode = useInDarkMode();
+
+  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: 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)`,
+        },
+      },
+      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 },
+              });
+            },
+          }),
+        ]),
+      ]),
+    ),
+  );
 }

package/src/feedback/node.ts

@@ -47,6 +47,12 @@ function Node({ node, style, dragHandle, tree, matchComponent }: any) {
 
   const dispatch = useTreeDispatch();
 
+  // console.log("Node render", node.data, highlighted, active);
+
+  if (!node.data?.type) {
+    node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };
+  }
+
   return h(
     "div.node",
     { style, ref: dragHandle },
@@ -58,7 +64,7 @@ function Node({ node, style, dragHandle, tree, matchComponent }: any) {
       onClickType() {
         dispatch({ type: "toggle-entity-type-selector" });
       },
-    })
+    }),
   );
 }