@macrostrat/feedback-components 1.1.3 → 1.1.5

package/src/feedback/matches.ts

@@ -0,0 +1,279 @@
+import { Switch } from "@blueprintjs/core";
+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: "Match mode",
+      checked: match !== null,
+      onChange: (e) => {
+        setMatchLinks(match === null ? matchLinks || {} : null);
+        dispatch({ type: "toggle-match-mode" });
+      },
+    }),
+    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) => h(MatchTag, { data, setPayload }));
+
+  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",
+        ),
+      ]),
+    ),
+  );
+}
+
+function Match({ data, matchLinks, dispatch, nodeId }) {
+  return h.if(data)("div.match-container", [
+    MatchTag({ data, matchLinks }),
+    h(Icon, {
+      icon: "cross",
+      color: "red",
+      className: "close-btn",
+      onClick: () => {
+        dispatch({ type: "remove-match", payload: { id: nodeId } });
+      },
+    }),
+  ]);
+}
+
+interface MatchTagProps {
+  data: any;
+  matchLinks?: Record<string, string>;
+  setPayload?: (payload: Record<string, any>) => void;
+}
+
+function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
+  if (!data || Object.keys(data).length === 0) return;
+
+  if (data.lith_id || data?.type === "lith") {
+    return h(
+      "div",
+      {
+        onClick: () => {
+          data.type === "lith"
+            ? setPayload({ lith_id: data.id, name: data.name })
+            : null;
+        },
+      },
+      h(DataField, {
+        className: "match-item",
+        label: "Stratigraphic name",
+        value: h(LithologyTag, {
+          data: { name: data.name, id: data.id, color: data.color },
+          onClick: () =>
+            window.open(
+              matchLinks.strat_name + "/" + data.strat_name_id,
+              "_blank",
+            ),
+        }),
+      }),
+    );
+  }
+
+  if (data.strat_name_id || data?.type === "strat_name") {
+    return h(
+      "div",
+      {
+        onClick: () => {
+          data.type === "strat_name"
+            ? setPayload({ strat_name_id: data.id, name: data.name })
+            : null;
+        },
+      },
+      h(DataField, {
+        className: "match-item",
+        label: "Stratigraphic name",
+        value: h(LithologyTag, {
+          data: { name: data.name, id: data.id, color: data.color },
+          onClick: () =>
+            window.open(
+              matchLinks.strat_name + "/" + data.strat_name_id,
+              "_blank",
+            ),
+        }),
+      }),
+    );
+  }
+
+  if (data.lith_att_id || data?.type === "lith_att") {
+    return h(
+      "div",
+      {
+        onClick: () => {
+          data.type === "lith_att"
+            ? setPayload({ lith_att_id: data.id, name: data.name })
+            : null;
+        },
+      },
+      h(DataField, {
+        className: "match-item",
+        label: "Lithology attribute",
+        value: h(LithologyTag, {
+          data: { name: data.name, id: data.lith_att_id },
+          onClick: () =>
+            window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank"),
+        }),
+      }),
+    );
+  }
+
+  if (data.int_id || data?.type === "interval") {
+    return h(
+      "div",
+      {
+        onClick: () => {
+          data.type === "interval"
+            ? setPayload({ int_id: data.id, name: data.name })
+            : null;
+        },
+      },
+      h(DataField, {
+        label: "Interval",
+        className: "match-item",
+        value: h(LithologyTag, {
+          data: { name: data.name, id: data.id },
+          onClick: () =>
+            window.open(matchLinks.interval + "/" + data.int_id, "_blank"),
+        }),
+      }),
+    );
+  }
+
+  return h(JSONView, { data });
+}

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";
 
@@ -25,6 +25,7 @@ export interface FeedbackTextProps {
     strat_name: string;
     lith_att: string;
   };
+  viewOnly?: boolean;
 }
 
 function buildTags(
@@ -81,8 +82,15 @@ function isHighlighted(tag: Highlight, selectedNodes: number[]) {
 
 export function FeedbackText(props: FeedbackTextProps) {
   // Convert input to tags
-  const { text, selectedNodes, nodes, dispatch, allowOverlap, matchLinks } =
-    props;
+  const {
+    text,
+    selectedNodes,
+    nodes,
+    dispatch,
+    allowOverlap,
+    matchLinks,
+    viewOnly,
+  } = props;
   const allTags: AnnotateBlendTag[] = buildTags(
     buildHighlights(nodes, null),
     selectedNodes,
@@ -107,6 +115,7 @@ export function FeedbackText(props: FeedbackTextProps) {
       allowOverlap,
       dispatch,
       selectedNodes,
+      viewOnly,
       matchLinks,
     }),
   );
@@ -261,17 +270,25 @@ function renderNode(
     strat_name: string;
     lith_att: string;
   },
+  viewOnly?: boolean,
 ): any {
   if (typeof node === "string") return node;
 
   const { tag, children } = node;
   const isSelected = selectedNodes?.includes(tag.id);
   const showBorder = selectedNodes.length === 0 || isSelected;
+  const match = tag.match;
 
   const style = {
     ...tag,
     zIndex: parentSelected ? -1 : 1,
-    border: "1px solid " + (showBorder ? tag.color : "transparent"),
+    border:
+      "1px solid " +
+      (match != undefined && matchLinks
+        ? "orange"
+        : showBorder
+          ? tag.color
+          : "transparent"),
     margin: "-1px",
   };
 
@@ -289,15 +306,13 @@ function renderNode(
     }
   }
 
-  const match = tag.match;
-
-  const TagComponent = h(
+  return h(
     "span",
     {
       onMouseEnter: (e: MouseEvent) => {
         e.stopPropagation();
       },
-      className: "highlight",
+      className: "highlight" + (!viewOnly ? " clickable" : ""),
       style,
       onClick: (e: MouseEvent) => {
         e.stopPropagation();
@@ -331,21 +346,16 @@ function renderNode(
     isSelected
       ? moveText.flat()
       : children.map((child: any, i: number) =>
-          renderNode(child, dispatch, selectedNodes, isSelected, matchLinks),
+          renderNode(
+            child,
+            dispatch,
+            selectedNodes,
+            isSelected,
+            matchLinks,
+            viewOnly,
+          ),
         ),
   );
-
-  return matchLinks && match
-    ? h(
-        Popover,
-        {
-          autoFocus: false,
-          content: h("div.description", h(Match, { data: match, matchLinks })),
-          interactionKind: "hover",
-        },
-        TagComponent,
-      )
-    : TagComponent;
 }
 
 export function HighlightedText(props: {
@@ -360,6 +370,7 @@ export function HighlightedText(props: {
     strat_name: string;
     lith_att: string;
   };
+  viewOnly?: boolean;
 }) {
   const {
     text,
@@ -368,6 +379,7 @@ export function HighlightedText(props: {
     selectedNodes,
     allowOverlap,
     matchLinks,
+    viewOnly,
   } = props;
 
   const tree = nestHighlights(text, allTags);
@@ -391,73 +403,7 @@ export function HighlightedText(props: {
     "span",
     { ref: spanRef },
     tree.children.map((child: any, i: number) =>
-      renderNode(child, dispatch, selectedNodes, false, matchLinks),
+      renderNode(child, dispatch, selectedNodes, false, matchLinks, viewOnly),
     ),
   );
 }
-
-function Match({ data, matchLinks }) {
-  if (data.lith_id) {
-    return h(DataField, {
-      label: "Lithology",
-      value: h(LithologyTag, {
-        data: { name: data.name, id: data.lith_id, color: data.color },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (matchLinks.lithology) {
-            window.open(matchLinks.lithology + "/" + data.lith_id, "_blank");
-          }
-        },
-      }),
-    });
-  }
-
-  if (data.strat_name_id) {
-    return h("div", [
-      h(DataField, {
-        label: "Stratigraphic name",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.strat_name_id, color: data.color },
-          onClick: (e) => {
-            e.stopPropagation();
-            if (matchLinks.strat_name) {
-              window.open(
-                matchLinks.strat_name + "/" + data.strat_name_id,
-                "_blank",
-              );
-            }
-          },
-        }),
-      }),
-      h.if(data.concept_id)(DataField, {
-        label: "Stratigraphic concept",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.concept_id, color: data.color },
-          onClick: (e) => {
-            e.stopPropagation();
-            if (matchLinks.concept) {
-              window.open(matchLinks.concept + "/" + data.concept_id, "_blank");
-            }
-          },
-        }),
-      }),
-    ]);
-  }
-
-  if (data.lith_att_id) {
-    return h(DataField, {
-      label: "Lithology attribute",
-      value: h(LithologyTag, {
-        data: { name: data.name, id: data.lith_att_id },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (matchLinks.lith_att) {
-            window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank");
-          }
-        },
-      }),
-    });
-  }
-
-  return h(JSONView, { data });
-}