@macrostrat/feedback-components 1.1.3 → 1.1.4

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",
+        ),
+      ]),
+    ),
+  );
+}

package/src/feedback/text-visualizer.ts

@@ -6,7 +6,7 @@ import hyper from "@macrostrat/hyper";
 import { buildHighlights, getTagStyle } from "../extractions";
 import { Highlight } from "../extractions/types";
 import { useEffect, useRef } from "react";
-import { Popover } from "@blueprintjs/core";
+import { Icon } from "@blueprintjs/core";
 import { DataField, JSONView } from "@macrostrat/ui-components";
 import { LithologyList, LithologyTag } from "@macrostrat/data-components";
 
@@ -289,9 +289,7 @@ function renderNode(
     }
   }
 
-  const match = tag.match;
-
-  const TagComponent = h(
+  return h(
     "span",
     {
       onMouseEnter: (e: MouseEvent) => {
@@ -334,18 +332,6 @@ function renderNode(
           renderNode(child, dispatch, selectedNodes, isSelected, matchLinks),
         ),
   );
-
-  return matchLinks && match
-    ? h(
-        Popover,
-        {
-          autoFocus: false,
-          content: h("div.description", h(Match, { data: match, matchLinks })),
-          interactionKind: "hover",
-        },
-        TagComponent,
-      )
-    : TagComponent;
 }
 
 export function HighlightedText(props: {
@@ -396,9 +382,13 @@ export function HighlightedText(props: {
   );
 }
 
-function Match({ data, matchLinks }) {
+export function Match({ data, matchLinks, dispatch, nodeId }) {
+  if (!data || Object.keys(data).length === 0) return;
+
+  let tag = h(JSONView, { data });
+
   if (data.lith_id) {
-    return h(DataField, {
+    tag = h(DataField, {
       label: "Lithology",
       value: h(LithologyTag, {
         data: { name: data.name, id: data.lith_id, color: data.color },
@@ -413,7 +403,7 @@ function Match({ data, matchLinks }) {
   }
 
   if (data.strat_name_id) {
-    return h("div", [
+    tag = h("div", [
       h(DataField, {
         label: "Stratigraphic name",
         value: h(LithologyTag, {
@@ -445,7 +435,7 @@ function Match({ data, matchLinks }) {
   }
 
   if (data.lith_att_id) {
-    return h(DataField, {
+    tag = h(DataField, {
       label: "Lithology attribute",
       value: h(LithologyTag, {
         data: { name: data.name, id: data.lith_att_id },
@@ -459,5 +449,15 @@ function Match({ data, matchLinks }) {
     });
   }
 
-  return h(JSONView, { data });
+  return h("div.match-container", [
+    tag,
+    h(Icon, {
+      icon: "cross",
+      color: "red",
+      className: "close-btn",
+      onClick: () => {
+        dispatch({ type: "remove-match", payload: { id: nodeId } });
+      },
+    }),
+  ]);
 }

package/src/feedback/typelist.ts

@@ -0,0 +1,312 @@
+import styles from "./feedback.module.sass";
+import hyper from "@macrostrat/hyper";
+
+import { getTagStyle } from "../extractions";
+import { useState } from "react";
+import { Icon, Popover, Overlay2 } from "@blueprintjs/core";
+import { SaveButton } from "@macrostrat/ui-components";
+import { useInDarkMode } from "@macrostrat/ui-components";
+import { ColorPicker } from "@macrostrat/data-sheet";
+
+const h = hyper.styled(styles);
+
+export 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 },
+              });
+            },
+          }),
+        ]),
+      ]),
+    ),
+  );
+}