@macrostrat/feedback-components 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.1.0] - 2026-04-29
+
+- Fix matched links searching bugs
+- Update stories with correct matched links
+
+## [2.0.3] - 2026-04-05 [_changes_](https://github.com/UW-Macrostrat/web-components/compare/@macrostrat/feedback-components-v2.0.2...@macrostrat/feedback-components-v2.0.3)
+
+### Patch Changes
+
+- Updated `@macrostrat/hyper` dependency
+  [6e9a6654](https://github.com/UW-Macrostrat/web-components/commit/6e9a665456460b31c30316a2a13d41abed94c43a)
+- Updated dependencies
+  [4bd24d9f](https://github.com/UW-Macrostrat/web-components/commit/4bd24d9f65dacfdbbede3613921182858ec1e3d1)
+- Updated dependencies
+  [6e9a6654](https://github.com/UW-Macrostrat/web-components/commit/6e9a665456460b31c30316a2a13d41abed94c43a)
+  - @macrostrat/data-sheet@3.0.4
+  - @macrostrat/data-components@1.1.5
+  - @macrostrat/ui-components@5.0.7
+
 ## [2.0.2] - 2026-04-04 [_changes_](https://github.com/UW-Macrostrat/web-components/compare/@macrostrat/feedback-components-v2.0.1...@macrostrat/feedback-components-v2.0.2)
 
 ### Patch Changes

package/dist/feedback/matches.cjs

@@ -83,9 +83,15 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   const [selectedItem, setSelectedItem] = react.useState(h("div", "Select a match"));
   const [disabled, setDisabled] = react.useState(true);
   const [payload, setPayload] = react.useState({});
-  const data = uiComponents.useAPIResult(
-    "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" + inputValue + "*"
-  );
+  const [data, setData] = react.useState([]);
+  react.useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+    fetch(
+      "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" + inputValue + "*"
+    ).then((res) => res.json()).then((res) => {
+      setData(res);
+    });
+  }, [inputValue]);
   const items = data?.map((data2) => h(MatchTag, { data: data2, setPayload }));
   return h(
     core.Overlay2,
@@ -119,7 +125,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name"
             },
@@ -171,11 +177,11 @@ function MatchTag({ data, matchLinks, setPayload }) {
       },
       h(uiComponents.DataField, {
         className: "match-item",
-        label: "Stratigraphic name",
+        label: "Lithology",
         value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
+            matchLinks.lithology + "/" + data.lith_id,
             "_blank"
           )
         })
@@ -194,7 +200,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         className: "match-item",
         label: "Stratigraphic name",
         value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () => window.open(
             matchLinks.strat_name + "/" + data.strat_name_id,
             "_blank"
@@ -215,7 +221,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         className: "match-item",
         label: "Lithology attribute",
         value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
+          data: { name: data.name, id: data.lith_att_id, lith_id: 1 },
           onClick: () => window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank")
         })
       })
@@ -233,7 +239,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         label: "Interval",
         className: "match-item",
         value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id },
+          data: { name: data.name, id: data.id, lith_id: 1 },
           onClick: () => window.open(matchLinks.interval + "/" + data.int_id, "_blank")
         })
       })

package/dist/feedback/matches.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"matches.cjs","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n\n  const data = useAPIResult(\n    \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n      inputValue +\n      \"*\",\n  );\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["hyper","styles","useState","Divider","Switch","Icon","useAPIResult","data","Overlay2","Select","SaveButton","DataField","LithologyTag","JSONView"],"mappings":"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"}
+{"version":3,"file":"matches.cjs","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState, useEffect } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    if (!inputValue || inputValue.length < 3) return;\n\n    fetch(\n      \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n        inputValue +\n        \"*\"\n    )\n      .then((res) => res.json())\n      .then((res) => {\n        setData(res);\n      });\n  }, [inputValue]);\n\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true, usePortal: false },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.lithology + \"/\" + data.lith_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id, lith_id: 1 },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, lith_id: 1 },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["hyper","styles","useState","Divider","Switch","Icon","useEffect","data","Overlay2","Select","SaveButton","DataField","LithologyTag","JSONView"],"mappings":"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"}

package/dist/feedback/matches.js

@@ -2,8 +2,8 @@ import { Divider, Switch, Icon, Overlay2 } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";
 import h$1 from "./feedback.module.sass.js";
 import hyper from "@macrostrat/hyper";
-import { useState } from "react";
-import { useAPIResult, SaveButton, DataField, JSONView } from "@macrostrat/ui-components";
+import { useState, useEffect } from "react";
+import { SaveButton, DataField, JSONView } from "@macrostrat/ui-components";
 import { LithologyTag } from "@macrostrat/data-components";
 const h = hyper.styled(h$1);
 function Matches({
@@ -79,9 +79,15 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   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 [data, setData] = useState([]);
+  useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+    fetch(
+      "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" + inputValue + "*"
+    ).then((res) => res.json()).then((res) => {
+      setData(res);
+    });
+  }, [inputValue]);
   const items = data?.map((data2) => h(MatchTag, { data: data2, setPayload }));
   return h(
     Overlay2,
@@ -115,7 +121,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name"
             },
@@ -167,11 +173,11 @@ function MatchTag({ data, matchLinks, setPayload }) {
       },
       h(DataField, {
         className: "match-item",
-        label: "Stratigraphic name",
+        label: "Lithology",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
+            matchLinks.lithology + "/" + data.lith_id,
             "_blank"
           )
         })
@@ -190,7 +196,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         className: "match-item",
         label: "Stratigraphic name",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () => window.open(
             matchLinks.strat_name + "/" + data.strat_name_id,
             "_blank"
@@ -211,7 +217,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         className: "match-item",
         label: "Lithology attribute",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
+          data: { name: data.name, id: data.lith_att_id, lith_id: 1 },
           onClick: () => window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank")
         })
       })
@@ -229,7 +235,7 @@ function MatchTag({ data, matchLinks, setPayload }) {
         label: "Interval",
         className: "match-item",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id },
+          data: { name: data.name, id: data.id, lith_id: 1 },
           onClick: () => window.open(matchLinks.interval + "/" + data.int_id, "_blank")
         })
       })

package/dist/feedback/matches.js.map

@@ -1 +1 @@
-{"version":3,"file":"matches.js","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n\n  const data = useAPIResult(\n    \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n      inputValue +\n      \"*\",\n  );\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["styles","data"],"mappings":";;;;;;;AAUA,MAAM,IAAI,MAAM,OAAOA,GAAM;AAEtB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,MAAI,YAAY;AAChB,MAAI,cAAc,WAAW,GAAG;AAC9B,gBAAY,iBAAiB,MAAM,cAAc,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO,EAAE,GAAG,UAAU,EAAE,OAAO;AAAA,IAC7B,EAAE,OAAO;AAAA,IACT,EAAE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS,UAAU;AAAA,MACnB,UAAU,CAAC,MAAM;AACf,sBAAc,UAAU,SAAY,cAAc,CAAA,IAAK,MAAS;AAChE,iBAAS,EAAE,MAAM,qBAAqB;AAAA,MACxC;AAAA,IAAA,CACD;AAAA,IACD,EAAE,GAAG,aAAa,KAAK,EAAE,OAAO;AAAA,MAC9B,MAAM,WAAW;AAAA,MACjB;AAAA,MACA;AAAA,MACA,QAAQ,WAAW;AAAA,IAAA,CACpB;AAAA,IACD,EAAE,GAAG,cAAc,UAAU,KAAK,CAAC,WAAW,SAAS,KAAK;AAAA,MAC1D;AAAA,MACA;AAAA,QACE;AAAA,UACE;AAAA,UACA;AAAA,YACE,SAAS,MAAM;AACb,6BAAe,IAAI;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,CAAC,EAAE,oBAAoB,WAAW,GAAG,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAAA,QAAA;AAAA,QAEhE,EAAE,cAAc;AAAA,UACd,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,SAAS,iBAAiB,MAAM,QAAQ;AACtC,MAAI,QAAQ;AAEZ,WAAS,SAAS,MAAM;AACtB,QAAI,KAAK,OAAO,QAAQ;AACtB,cAAQ;AACR,aAAO;AAAA,IACT;AACA,QAAI,MAAM,QAAQ,KAAK,QAAQ,GAAG;AAChC,iBAAW,SAAS,KAAK,UAAU;AACjC,YAAI,SAAS,KAAK,EAAG,QAAO;AAAA,MAC9B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,OAAK,QAAQ,QAAQ;AACrB,SAAO;AACT;AAEA,SAAS,aAAa,EAAE,QAAQ,gBAAgB,WAAW,YAAY;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,WAAW,QAAQ,EAAE;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE,OAAO,gBAAgB,CAAC;AAC3E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAA,CAAE;AAEzC,QAAM,OAAO;AAAA,IACX,+DACE,aACA;AAAA,EAAA;AAEJ,QAAM,QAAQ,MAAM,IAAI,CAACC,UAAS,EAAE,UAAU,EAAE,MAAAA,OAAM,WAAA,CAAY,CAAC;AAEnE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA,EAAE,wBAAwB;AAAA,QACxB,EAAE,YAAY;AAAA,UACZ,oBAAoB,UAAU;AAAA,UAC9B,EAAE,MAAM;AAAA,YACN,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,6BAAe,KAAK;AAAA,YACtB;AAAA,YACA,OAAO,EAAE,QAAQ,WAAW,OAAO,MAAA;AAAA,UAAM,CAC1C;AAAA,QAAA,CACF;AAAA,QACD,EAAE,kBAAkB;AAAA,UAClB;AAAA,YACE;AAAA,YACA;AAAA,cACE,OAAO,SAAS,CAAA;AAAA,cAChB,cAAc,CAAC,MAAM,EAAE,kBAAkB;AACvC,uBAAO,EAAE,kBAAkB,EAAE,SAAS,YAAA,GAAe,IAAI;AAAA,cAC3D;AAAA,cACA,cAAc,CAAC,SAAS;AACtB,4BAAY,KAAK;AACjB,gCAAgB,IAAI;AAAA,cACtB;AAAA,cACA,eAAe,CAAC,UAAU,cAAc,KAAK;AAAA,cAC7C,cAAc,EAAE,SAAS,KAAA;AAAA,cACzB,OAAO;AAAA,cACP,aAAa;AAAA,YAAA;AAAA,YAEf;AAAA,UAAA;AAAA,QACF,CACD;AAAA,QACD;AAAA,UACE;AAAA,UACA;AAAA,YACE,WAAW;AAAA,YACX,OAAO;AAAA,YACP,SAAS,MAAM;AAEb,uBAAS;AAAA,gBACP,MAAM;AAAA,gBACN,SAAS,EAAE,IAAI,UAAU,IAAI,QAAA;AAAA,cAAQ,CACtC;AACD,6BAAe,KAAK;AAAA,YACtB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,SAAS,MAAM,EAAE,MAAM,YAAY,UAAU,UAAU;AACrD,SAAO,EAAE,GAAG,IAAI,EAAE,uBAAuB;AAAA,IACvC,SAAS,EAAE,MAAM,YAAY;AAAA,IAC7B,EAAE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,EAAE,MAAM,gBAAgB,SAAS,EAAE,IAAI,OAAA,GAAU;AAAA,MAC5D;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AAQO,SAAS,SAAS,EAAE,MAAM,YAAY,cAA6B;AACxE,MAAI,CAAC,QAAQ,OAAO,KAAK,IAAI,EAAE,WAAW,EAAG;AAE7C,MAAI,KAAK,WAAW,MAAM,SAAS,QAAQ;AACzC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,SAAS,MAAM;AACb,eAAK,SAAS,SACV,WAAW,EAAE,SAAS,KAAK,IAAI,MAAM,KAAK,KAAA,CAAM,IAChD;AAAA,QACN;AAAA,MAAA;AAAA,MAEF,EAAE,WAAW;AAAA,QACX,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO,EAAE,cAAc;AAAA,UACrB,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,MAAA;AAAA,UAClD,SAAS,MACP,OAAO;AAAA,YACL,WAAW,aAAa,MAAM,KAAK;AAAA,YACnC;AAAA,UAAA;AAAA,QACF,CACH;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,KAAK,iBAAiB,MAAM,SAAS,cAAc;AACrD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,SAAS,MAAM;AACb,eAAK,SAAS,eACV,WAAW,EAAE,eAAe,KAAK,IAAI,MAAM,KAAK,KAAA,CAAM,IACtD;AAAA,QACN;AAAA,MAAA;AAAA,MAEF,EAAE,WAAW;AAAA,QACX,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO,EAAE,cAAc;AAAA,UACrB,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,MAAA;AAAA,UAClD,SAAS,MACP,OAAO;AAAA,YACL,WAAW,aAAa,MAAM,KAAK;AAAA,YACnC;AAAA,UAAA;AAAA,QACF,CACH;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,KAAK,eAAe,MAAM,SAAS,YAAY;AACjD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,SAAS,MAAM;AACb,eAAK,SAAS,aACV,WAAW,EAAE,aAAa,KAAK,IAAI,MAAM,KAAK,KAAA,CAAM,IACpD;AAAA,QACN;AAAA,MAAA;AAAA,MAEF,EAAE,WAAW;AAAA,QACX,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO,EAAE,cAAc;AAAA,UACrB,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,YAAA;AAAA,UAClC,SAAS,MACP,OAAO,KAAK,WAAW,WAAW,MAAM,KAAK,aAAa,QAAQ;AAAA,QAAA,CACrE;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,KAAK,UAAU,MAAM,SAAS,YAAY;AAC5C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,SAAS,MAAM;AACb,eAAK,SAAS,aACV,WAAW,EAAE,QAAQ,KAAK,IAAI,MAAM,KAAK,KAAA,CAAM,IAC/C;AAAA,QACN;AAAA,MAAA;AAAA,MAEF,EAAE,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAW;AAAA,QACX,OAAO,EAAE,cAAc;AAAA,UACrB,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,GAAA;AAAA,UAClC,SAAS,MACP,OAAO,KAAK,WAAW,WAAW,MAAM,KAAK,QAAQ,QAAQ;AAAA,QAAA,CAChE;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,EAAE,UAAU,EAAE,MAAM;AAC7B;"}
+{"version":3,"file":"matches.js","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState, useEffect } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    if (!inputValue || inputValue.length < 3) return;\n\n    fetch(\n      \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n        inputValue +\n        \"*\"\n    )\n      .then((res) => res.json())\n      .then((res) => {\n        setData(res);\n      });\n  }, [inputValue]);\n\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true, usePortal: false },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.lithology + \"/\" + data.lith_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id, lith_id: 1 },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, lith_id: 1 },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["styles","data"],"mappings":"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"}

package/dist/feedback/node.cjs

@@ -41,7 +41,6 @@ function Node({
 }) {
   let highlighted = isNodeHighlighted(node, tree);
   let active = isNodeActive(node, tree);
-  console.log("viewOnly", viewOnly);
   const dispatch = editState.useTreeDispatch();
   if (!node.data?.type) {
     node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };

package/dist/feedback/node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"node.cjs","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  console.log(\"viewOnly\", viewOnly);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["hyper","styles","useTreeDispatch","EntityTag"],"mappings":";;;;;;;AAOA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,uBAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,UAAQ,IAAI,YAAY,QAAQ;AAEhC,QAAM,WAAWC,UAAAA,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAEC,MAAAA,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;;"}
+{"version":3,"file":"node.cjs","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["hyper","styles","useTreeDispatch","EntityTag"],"mappings":";;;;;;;AAOA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,uBAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,QAAM,WAAWC,UAAAA,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAEC,MAAAA,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;;"}

package/dist/feedback/node.js

@@ -38,7 +38,6 @@ function Node({
 }) {
   let highlighted = isNodeHighlighted(node, tree);
   let active = isNodeActive(node, tree);
-  console.log("viewOnly", viewOnly);
   const dispatch = useTreeDispatch();
   if (!node.data?.type) {
     node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };

package/dist/feedback/node.js.map

@@ -1 +1 @@
-{"version":3,"file":"node.js","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  console.log(\"viewOnly\", viewOnly);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["styles"],"mappings":";;;;AAOA,MAAM,IAAI,MAAM,OAAOA,GAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,UAAQ,IAAI,YAAY,QAAQ;AAEhC,QAAM,WAAW,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAE,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;"}
+{"version":3,"file":"node.js","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["styles"],"mappings":";;;;AAOA,MAAM,IAAI,MAAM,OAAOA,GAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,QAAM,WAAW,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAE,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/feedback-components",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -50,10 +50,10 @@
     "@blueprintjs/core": "^6.11.3",
     "@blueprintjs/select": "^6.1.8",
     "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/data-components": "^1.1.4",
-    "@macrostrat/data-sheet": "^3.0.3",
-    "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/ui-components": "^5.0.6",
+    "@macrostrat/data-components": "^1.1.6",
+    "@macrostrat/data-sheet": "^3.1.0",
+    "@macrostrat/hyper": "^3.1.0",
+    "@macrostrat/ui-components": "^5.0.7",
     "classnames": "^2.5.1",
     "d3-force": "^3.0.0",
     "immutability-helper": "^3.1.1",

package/src/feedback/matches.ts

@@ -2,7 +2,7 @@ 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 { useState, useEffect } from "react";
 import { Icon, Divider, Overlay2 } from "@blueprintjs/core";
 import { JSONView, SaveButton } from "@macrostrat/ui-components";
 import { useAPIResult, DataField } from "@macrostrat/ui-components";
@@ -89,12 +89,22 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   const [selectedItem, setSelectedItem] = useState(h("div", "Select a match"));
   const [disabled, setDisabled] = useState(true);
   const [payload, setPayload] = useState({});
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+
+    fetch(
+      "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" +
+        inputValue +
+        "*"
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        setData(res);
+      });
+  }, [inputValue]);
 
-  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(
@@ -129,7 +139,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name",
             },
@@ -193,12 +203,12 @@ export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
       },
       h(DataField, {
         className: "match-item",
-        label: "Stratigraphic name",
+        label: "Lithology",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () =>
             window.open(
-              matchLinks.strat_name + "/" + data.strat_name_id,
+              matchLinks.lithology + "/" + data.lith_id,
               "_blank",
             ),
         }),
@@ -220,7 +230,7 @@ export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
         className: "match-item",
         label: "Stratigraphic name",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.id, color: data.color, lith_id: 1 },
           onClick: () =>
             window.open(
               matchLinks.strat_name + "/" + data.strat_name_id,
@@ -245,7 +255,7 @@ export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
         className: "match-item",
         label: "Lithology attribute",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
+          data: { name: data.name, id: data.lith_att_id, lith_id: 1 },
           onClick: () =>
             window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank"),
         }),
@@ -267,7 +277,7 @@ export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
         label: "Interval",
         className: "match-item",
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id },
+          data: { name: data.name, id: data.id, lith_id: 1 },
           onClick: () =>
             window.open(matchLinks.interval + "/" + data.int_id, "_blank"),
         }),

package/src/feedback/node.ts

@@ -52,8 +52,6 @@ function Node({
   let highlighted: boolean = isNodeHighlighted(node, tree);
   let active: boolean = isNodeActive(node, tree);
 
-  console.log("viewOnly", viewOnly);
-
   const dispatch = useTreeDispatch();
 
   if (!node.data?.type) {