@macrostrat/feedback-components 1.1.2 → 1.1.4

package/src/feedback/index.ts

@@ -18,25 +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 { Matches } from "./matches";
+import { TypeList } from "./typelist";
 
 export type { GraphData } from "./edit-state";
 export { treeToGraph } from "./edit-state";
@@ -60,12 +55,14 @@ export function FeedbackComponent({
   matchComponent,
   onSave,
   allowOverlap,
+  matchLinks,
 }) {
   // Get the input arguments
   const [state, dispatch] = useUpdatableTree(
     entities.map(processEntity) as any,
     entityTypes,
   );
+  const [match, setMatchLinks] = useState(matchLinks || {});
 
   const {
     selectedNodes,
@@ -94,6 +91,7 @@ export function FeedbackComponent({
             nodes: tree,
             selectedNodes,
             allowOverlap,
+            matchLinks: match,
           }),
         ),
         h(
@@ -174,6 +172,14 @@ export function FeedbackComponent({
             ),
           ],
         ),
+        h(Matches, {
+          match,
+          setMatchLinks,
+          matchLinks,
+          selectedNodes,
+          tree,
+          dispatch,
+        }),
         h(Divider),
         h(EntityTypeSelector, {
           entityTypes: entityTypesMap,
@@ -375,304 +381,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 },
-              });
-            },
-          }),
-        ]),
-      ]),
-    ),
-  );
-}

package/src/feedback/matches.ts

@@ -0,0 +1,241 @@
+import { Switch } from "@blueprintjs/core";
+import { Match } from "./text-visualizer";
+import { Select } from "@blueprintjs/select";
+import styles from "./feedback.module.sass";
+import hyper from "@macrostrat/hyper";
+import { useState } from "react";
+import { Icon, Divider, Overlay2 } from "@blueprintjs/core";
+import { JSONView, SaveButton } from "@macrostrat/ui-components";
+import { useAPIResult, DataField } from "@macrostrat/ui-components";
+import { LithologyTag } from "@macrostrat/data-components";
+
+const h = hyper.styled(styles);
+
+export function Matches({
+  match,
+  setMatchLinks,
+  matchLinks,
+  selectedNodes,
+  tree,
+  dispatch,
+}) {
+  const [overlayOpen, setOverlayOpen] = useState(false);
+
+  let nodeMatch = null;
+  if (selectedNodes.length === 1) {
+    nodeMatch = findMatchingNode(tree, selectedNodes[0]);
+  }
+
+  return h.if(matchLinks)("div", [
+    h(Divider),
+    h(Switch, {
+      label: "Show matches",
+      checked: match !== null,
+      onChange: (e) => {
+        setMatchLinks(match === null ? matchLinks || {} : null);
+      },
+    }),
+    h.if(nodeMatch && match)(Match, {
+      data: nodeMatch?.match,
+      matchLinks: matchLinks,
+      dispatch,
+      nodeId: nodeMatch?.id,
+    }),
+    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(
+      "div.add-match-container",
+      [
+        h(
+          "div.add-type",
+          {
+            onClick: () => {
+              setOverlayOpen(true);
+            },
+          },
+          [h("p.add-match-text", "Add match"), h(Icon, { icon: "plus" })],
+        ),
+        h(MatchOverlay, {
+          isOpen: overlayOpen,
+          setOverlayOpen,
+          nodeMatch,
+          dispatch,
+        }),
+      ],
+    ),
+  ]);
+}
+
+function findMatchingNode(tree, nodeId) {
+  let match = null;
+
+  function traverse(node) {
+    if (node.id === nodeId) {
+      match = node;
+      return true;
+    }
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        if (traverse(child)) return true;
+      }
+    }
+    return false;
+  }
+
+  tree.forEach(traverse);
+  return match;
+}
+
+function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
+  const [inputValue, setInputValue] = useState(nodeMatch?.name || "");
+  const [selectedItem, setSelectedItem] = useState(h("div", "Select a match"));
+  const [disabled, setDisabled] = useState(true);
+  const [payload, setPayload] = useState({});
+
+  const data = useAPIResult(
+    "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" +
+      inputValue +
+      "*",
+  );
+  const items = data?.map((data) => {
+    const type = data.type || "";
+
+    if (type === "lith") {
+      return h(
+        "div",
+        {
+          onClick: () => {
+            setPayload({ lith_id: data.id, name: data.name });
+          },
+        },
+        h(DataField, {
+          className: "match-item",
+          label: "Lithology",
+          value: h(LithologyTag, {
+            data: { name: data.name, id: data.lith_id, color: data.color },
+          }),
+        }),
+      );
+    }
+
+    if (type === "strat_name") {
+      return h(
+        "div",
+        {
+          onClick: () => {
+            setPayload({ strat_name_id: data.id, name: data.name });
+          },
+        },
+        h(DataField, {
+          className: "match-item",
+          label: "Stratigraphic name",
+          value: h(LithologyTag, {
+            data: { name: data.name, id: data.id, color: data.color },
+          }),
+        }),
+      );
+    }
+
+    if (type === "lith_att") {
+      return h(
+        "div",
+        {
+          onClick: () => {
+            setPayload({ lith_att_id: data.lith_att_id, name: data.name });
+          },
+        },
+        h(DataField, {
+          className: "match-item",
+          label: "Lithology attribute",
+          value: h(LithologyTag, {
+            data: { name: data.name, id: data.lith_att_id },
+          }),
+          onClick: () => {
+            setPayload({ lith_att_id: data.lith_att_id, name: data.name });
+          },
+        }),
+      );
+    }
+
+    if (type === "interval") {
+      h(
+        "div",
+        {
+          onClick: () => {
+            setPayload({ int_id: data.id, name: data.name });
+          },
+        },
+        h(DataField, {
+          label: "Interval",
+          className: "match-item",
+          value: h(LithologyTag, {
+            data: { name: data.name, id: data.id },
+          }),
+          onClick: () => {
+            setPayload({ int_id: data.id, name: data.name });
+          },
+        }),
+      );
+    }
+
+    return h(JSONView, { data });
+  });
+
+  return h(
+    Overlay2,
+    {
+      isOpen,
+    },
+    h(
+      "div.overlay-container",
+      h("div.add-type-overlay", [
+        h("h2.title", [
+          "Add match with " + nodeMatch.name,
+          h(Icon, {
+            icon: "cross",
+            className: "close-icon",
+            onClick: () => {
+              setOverlayOpen(false);
+            },
+            style: { cursor: "pointer", color: "red" },
+          }),
+        ]),
+        h("div.form-group", [
+          h(
+            Select,
+            {
+              items: items || [],
+              itemRenderer: (item, { handleClick }) => {
+                return h("div.match-item", { onClick: handleClick }, item);
+              },
+              onItemSelect: (item) => {
+                setDisabled(false);
+                setSelectedItem(item);
+              },
+              onQueryChange: (query) => setInputValue(query),
+              popoverProps: { minimal: true },
+              query: inputValue,
+              placeholder: "Enter match name",
+            },
+            selectedItem,
+          ),
+        ]),
+        h(
+          SaveButton,
+          {
+            className: "save-btn",
+            small: true,
+            onClick: () => {
+              // Handle save changes
+              dispatch({
+                type: "add-match",
+                payload: { id: nodeMatch.id, payload },
+              });
+              setOverlayOpen(false);
+            },
+            disabled,
+          },
+          "Save changes",
+        ),
+      ]),
+    ),
+  );
+}