@macrostrat/feedback-components 1.1.3 → 1.1.4

package/dist/node/index.js.map

@@ -1 +1 @@
-{"mappings":"A,M,oD,A,O,oD,C,S,E,C,C,C,E,O,O,I,C,G,O,C,S,C,E,Y,G,A,e,G,O,S,C,c,C,I,C,E,I,O,c,C,E,E,C,W,C,E,I,W,O,C,C,E,A,C,E,G,C,C,I,E,W,E,C,E,E,C,E,E,E,iB,A,O,I,A,C,E,S,C,E,G,K,E,O,C,C,E,C,O,C,G,K,E,C,I,E,C,C,E,A,Q,C,C,E,C,I,E,C,G,E,Q,C,C,E,O,C,C,E,C,E,E,I,C,E,O,C,E,E,O,E,E,O,A,C,I,E,A,M,uB,E,I,O,E,I,C,mB,C,C,E,Q,C,S,C,C,C,E,C,C,E,C,C,E,E,iB,C,G,E,Q,C,I,E,C,E,E,E,S,E,E,S,E,E,G,E,E,U,6C,e,C,4C,W,C,6C,W,C,6C,iB,C,6C,S,C,6C,S,C,6C,iB,C,6C,W","sources":["<anon>","packages/feedback-components/src/index.ts"],"sourcesContent":["import \"./feedback-components.b22d37d1.js\";\nimport \"./feedback-components.9328e8ba.js\";\n\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      }\n    });\n  });\n\n  return dest;\n}\n\n      var $parcel$global = globalThis;\n    \nvar $parcel$modules = {};\nvar $parcel$inits = {};\n\nvar parcelRequire = $parcel$global[\"parcelRequirea149\"];\n\nif (parcelRequire == null) {\n  parcelRequire = function(id) {\n    if (id in $parcel$modules) {\n      return $parcel$modules[id].exports;\n    }\n    if (id in $parcel$inits) {\n      var init = $parcel$inits[id];\n      delete $parcel$inits[id];\n      var module = {id: id, exports: {}};\n      $parcel$modules[id] = module;\n      init.call(module.exports, module, module.exports);\n      return module.exports;\n    }\n    var err = new Error(\"Cannot find module '\" + id + \"'\");\n    err.code = 'MODULE_NOT_FOUND';\n    throw err;\n  };\n\n  parcelRequire.register = function register(id, init) {\n    $parcel$inits[id] = init;\n  };\n\n  $parcel$global[\"parcelRequirea149\"] = parcelRequire;\n}\n\nvar parcelRegister = parcelRequire.register;\nvar $c688386f08592f9c$exports = {};\n\nvar $edvRb = parcelRequire(\"edvRb\");\n\nvar $aZPCw = parcelRequire(\"aZPCw\");\n$parcel$exportWildcard($c688386f08592f9c$exports, $edvRb);\n$parcel$exportWildcard($c688386f08592f9c$exports, $aZPCw);\n\n\nexport {$8c534c0378e15a46$export$c4b91360064ad200 as buildHighlights, $8c534c0378e15a46$export$d60b563f571177d as enhanceData, $8c534c0378e15a46$export$35baa338324d8550 as getTagStyle, $8c534c0378e15a46$export$2b07158757c249e0 as ExtractionContext, $8c534c0378e15a46$export$4eb2a0ce903ce967 as ModelInfo, $8c534c0378e15a46$export$117e56c71b172cde as EntityTag, $2c86488f2f3c1edd$export$a90600c9da52b40c as FeedbackComponent, $330ae695507d96f5$export$8d9dbb7a64bf2a5e as treeToGraph};\n//# sourceMappingURL=index.js.map\n","export * from \"./extractions\";\nexport * from \"./feedback\";\n"],"names":["$parcel$exportWildcard","dest","source","Object","keys","forEach","key","prototype","hasOwnProperty","call","defineProperty","enumerable","get","$parcel$global","globalThis","$parcel$modules","$parcel$inits","parcelRequire","id","exports","init","module","err","Error","code","register","$c688386f08592f9c$exports","$edvRb","$aZPCw","$8c534c0378e15a46$export$c4b91360064ad200","buildHighlights","$8c534c0378e15a46$export$d60b563f571177d","enhanceData","$8c534c0378e15a46$export$35baa338324d8550","getTagStyle","$8c534c0378e15a46$export$2b07158757c249e0","ExtractionContext","$8c534c0378e15a46$export$4eb2a0ce903ce967","ModelInfo","$8c534c0378e15a46$export$117e56c71b172cde","EntityTag","$2c86488f2f3c1edd$export$a90600c9da52b40c","FeedbackComponent","$330ae695507d96f5$export$8d9dbb7a64bf2a5e","treeToGraph"],"version":3,"file":"index.js.map","sourceRoot":"../../../../"}
+{"mappings":"A,M,oD,A,O,oD,C,S,E,C,C,C,E,O,O,I,C,G,O,C,S,C,E,Y,G,A,e,G,O,S,C,c,C,I,C,E,I,O,c,C,E,E,C,W,C,E,I,W,O,C,C,E,A,C,E,G,C,C,I,E,W,E,C,E,E,C,E,E,E,iB,A,O,I,A,C,E,S,C,E,G,K,E,O,C,C,E,C,O,C,G,K,E,C,I,E,C,C,E,A,Q,C,C,E,C,I,E,C,G,E,Q,C,C,E,O,C,C,E,C,E,E,I,C,E,O,C,E,E,O,E,E,O,A,C,I,E,A,M,uB,E,I,O,E,I,C,mB,C,C,E,Q,C,S,C,C,C,E,C,C,E,C,C,E,E,iB,C,G,E,Q,C,I,E,C,E,E,E,S,E,E,S,E,E,G,E,E,U,6C,e,C,4C,W,C,6C,W,C,6C,iB,C,6C,S,C,6C,S,C,6C,iB,C,6C,W","sources":["<anon>","packages/feedback-components/src/index.ts"],"sourcesContent":["import \"./feedback-components.b22d37d1.js\";\nimport \"./feedback-components.0eef8d0c.js\";\n\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      }\n    });\n  });\n\n  return dest;\n}\n\n      var $parcel$global = globalThis;\n    \nvar $parcel$modules = {};\nvar $parcel$inits = {};\n\nvar parcelRequire = $parcel$global[\"parcelRequirea149\"];\n\nif (parcelRequire == null) {\n  parcelRequire = function(id) {\n    if (id in $parcel$modules) {\n      return $parcel$modules[id].exports;\n    }\n    if (id in $parcel$inits) {\n      var init = $parcel$inits[id];\n      delete $parcel$inits[id];\n      var module = {id: id, exports: {}};\n      $parcel$modules[id] = module;\n      init.call(module.exports, module, module.exports);\n      return module.exports;\n    }\n    var err = new Error(\"Cannot find module '\" + id + \"'\");\n    err.code = 'MODULE_NOT_FOUND';\n    throw err;\n  };\n\n  parcelRequire.register = function register(id, init) {\n    $parcel$inits[id] = init;\n  };\n\n  $parcel$global[\"parcelRequirea149\"] = parcelRequire;\n}\n\nvar parcelRegister = parcelRequire.register;\nvar $c688386f08592f9c$exports = {};\n\nvar $edvRb = parcelRequire(\"edvRb\");\n\nvar $aZPCw = parcelRequire(\"aZPCw\");\n$parcel$exportWildcard($c688386f08592f9c$exports, $edvRb);\n$parcel$exportWildcard($c688386f08592f9c$exports, $aZPCw);\n\n\nexport {$8c534c0378e15a46$export$c4b91360064ad200 as buildHighlights, $8c534c0378e15a46$export$d60b563f571177d as enhanceData, $8c534c0378e15a46$export$35baa338324d8550 as getTagStyle, $8c534c0378e15a46$export$2b07158757c249e0 as ExtractionContext, $8c534c0378e15a46$export$4eb2a0ce903ce967 as ModelInfo, $8c534c0378e15a46$export$117e56c71b172cde as EntityTag, $2c86488f2f3c1edd$export$a90600c9da52b40c as FeedbackComponent, $330ae695507d96f5$export$8d9dbb7a64bf2a5e as treeToGraph};\n//# sourceMappingURL=index.js.map\n","export * from \"./extractions\";\nexport * from \"./feedback\";\n"],"names":["$parcel$exportWildcard","dest","source","Object","keys","forEach","key","prototype","hasOwnProperty","call","defineProperty","enumerable","get","$parcel$global","globalThis","$parcel$modules","$parcel$inits","parcelRequire","id","exports","init","module","err","Error","code","register","$c688386f08592f9c$exports","$edvRb","$aZPCw","$8c534c0378e15a46$export$c4b91360064ad200","buildHighlights","$8c534c0378e15a46$export$d60b563f571177d","enhanceData","$8c534c0378e15a46$export$35baa338324d8550","getTagStyle","$8c534c0378e15a46$export$2b07158757c249e0","ExtractionContext","$8c534c0378e15a46$export$4eb2a0ce903ce967","ModelInfo","$8c534c0378e15a46$export$117e56c71b172cde","EntityTag","$2c86488f2f3c1edd$export$a90600c9da52b40c","FeedbackComponent","$330ae695507d96f5$export$8d9dbb7a64bf2a5e","treeToGraph"],"version":3,"file":"index.js.map","sourceRoot":"../../../../"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/feedback-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "",
   "source": "src/index.ts",
   "type": "module",

package/src/feedback/edit-state.ts

@@ -48,7 +48,9 @@ type TreeAction =
       type: "update-entity-type";
       payload: { id: number; name: string; description: string; color: string };
     }
-  | { type: "select-range"; payload: { ids: number[] } };
+  | { type: "select-range"; payload: { ids: number[] } }
+  | { type: "add-match"; payload: { id: number; payload: any } }
+  | { type: "remove-match"; payload: { id: number } };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
@@ -246,7 +248,6 @@ function treeReducer(state: TreeState, action: TreeAction) {
 
     case "delete-entity-type": {
       // Remove the entity type from the map
-      console.log("Deleting entity type:", action.payload.id);
       const { id } = action.payload;
       const newEntityTypesMap = new Map(state.entityTypesMap);
       const oldType = newEntityTypesMap.get(id);
@@ -263,6 +264,54 @@ function treeReducer(state: TreeState, action: TreeAction) {
       };
     }
 
+    case "add-match": {
+      const { id } = action.payload;
+
+      // Find the node path
+      const keyPath = findNode(state.tree, id);
+      if (!keyPath) {
+        console.warn(`Node with id ${id} not found`);
+        return state;
+      }
+
+      // Build update spec to set the `match` property
+      const matchUpdateSpec = buildNestedSpec(keyPath, {
+        match: { $set: action.payload.payload },
+      });
+
+      const updatedTree = update(state.tree, matchUpdateSpec);
+
+      return {
+        ...state,
+        tree: updatedTree,
+      };
+    }
+
+    case "remove-match": {
+      const { id } = action.payload;
+
+      console.log("Removing match for node with id:", id);
+
+      // Find the node path
+      const keyPath = findNode(state.tree, id);
+      if (!keyPath) {
+        console.warn(`Node with id ${id} not found`);
+        return state;
+      }
+
+      // Build update spec to unset the `match` property
+      const matchUpdateSpec = buildNestedSpec(keyPath, {
+        match: { $set: null },
+      });
+
+      const updatedTree = update(state.tree, matchUpdateSpec);
+
+      return {
+        ...state,
+        tree: updatedTree,
+      };
+    }
+
     /** Entity type selection */
     case "toggle-entity-type-selector":
       return {
@@ -431,7 +480,7 @@ export function treeToGraph(tree: TreeData[]): GraphData {
   return { nodes, edges };
 }
 
-function findNodeById(tree, id) {
+export function findNodeById(tree, id) {
   for (const node of tree) {
     if (node.id === id) {
       return node;

package/src/feedback/feedback.module.sass

@@ -146,4 +146,20 @@ mark
 .node-label
   fill: var(--text-emphasized-color)
   fontSize: 10px
-  pointerEvents: none
+  pointerEvents: none
+
+.match-item
+  background-color: var(--background-color)
+  color: var(--text-emphasized-color)
+  padding: .1em .2em
+  border-radius: .2em
+  margin-bottom: 4px
+  cursor: pointer
+
+.match-container
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+  .close-btn
+    cursor: pointer

package/src/feedback/index.ts

@@ -18,26 +18,20 @@ import {
   ButtonGroup,
   Card,
   SegmentedControl,
-  Icon,
-  Popover,
   Divider,
-  Overlay2,
 } from "@blueprintjs/core";
 import { OmniboxSelector } from "./type-selector";
 import {
   CancelButton,
-  DataField,
   ErrorBoundary,
-  FlexBox,
   FlexRow,
   SaveButton,
 } from "@macrostrat/ui-components";
 import useElementDimensions from "use-element-dimensions";
 import { GraphView } from "./graph";
-import { useInDarkMode } from "@macrostrat/ui-components";
-import { asChromaColor } from "@macrostrat/color-utils";
-import { ColorPicker } from "@macrostrat/data-sheet";
-import { Switch } from "@blueprintjs/core";
+
+import { Matches } from "./matches";
+import { TypeList } from "./typelist";
 
 export type { GraphData } from "./edit-state";
 export { treeToGraph } from "./edit-state";
@@ -155,13 +149,6 @@ export function FeedbackComponent({
             alignText: "left",
           },
           [
-            h.if(matchLinks)(Switch, {
-              label: "Show matches",
-              checked: match !== null,
-              onChange: (e) => {
-                setMatchLinks(match === null ? matchLinks || {} : null);
-              },
-            }),
             h(
               CancelButton,
               {
@@ -185,6 +172,14 @@ export function FeedbackComponent({
             ),
           ],
         ),
+        h(Matches, {
+          match,
+          setMatchLinks,
+          matchLinks,
+          selectedNodes,
+          tree,
+          dispatch,
+        }),
         h(Divider),
         h(EntityTypeSelector, {
           entityTypes: entityTypesMap,
@@ -386,304 +381,3 @@ function ManagedSelectionTree(props) {
     }),
   );
 }
-
-function TypeList({ types, selected, dispatch, selectedNodes, tree }) {
-  const [selectedType, setSelectedType] = useState(null);
-  const isSelectedNodes = selectedNodes.length > 0;
-  const darkMode = useInDarkMode();
-  const luminance = darkMode ? 0.9 : 0.4;
-
-  return h("div.type-list-container", [
-    h(
-      "div.type-list-header",
-      isSelectedNodes && !selectedType
-        ? "Change selected nodes to:"
-        : "Entity Types",
-    ),
-    h(
-      "div.type-list",
-      Array.from(types.values()).map((type) =>
-        h(TypeTag, {
-          type,
-          luminance,
-          selectedType,
-          setSelectedType,
-          dispatch,
-          tree,
-          selectedNodes,
-          selected,
-          isSelectedNodes,
-        }),
-      ),
-    ),
-    h(AddType, { dispatch }),
-  ]);
-}
-
-function collectMatchingIds(tree, id) {
-  const ids = [];
-
-  function traverse(node) {
-    if (node.type.id === id) {
-      ids.push(node.id);
-    }
-    if (Array.isArray(node.children)) {
-      node.children.forEach(traverse);
-    }
-  }
-
-  tree.forEach(traverse);
-  return ids;
-}
-
-function AddType({ dispatch }) {
-  const [overlayOpen, setOverlayOpen] = useState(false);
-
-  const saveHandler = (payload) => {
-    dispatch({
-      type: "add-entity-type",
-      payload,
-    });
-    setOverlayOpen(false);
-  };
-
-  return h("div.add-type-container", [
-    h("div.add-type", { onClick: () => setOverlayOpen(true) }, [
-      h("p.add-type-text", "Add new type"),
-      h(Icon, { icon: "plus" }),
-    ]),
-    h(TypeOverlay, {
-      setOverlayOpen,
-      overlayOpen,
-      title: "Add New Type",
-      saveHandler,
-    }),
-  ]);
-}
-
-function EditType({ dispatch, type }) {
-  const [editorOpen, setEditorOpen] = useState(false);
-
-  const saveHandler = (payload) => {
-    dispatch({
-      type: "update-entity-type",
-      payload,
-    });
-    setEditorOpen(false);
-  };
-
-  return h("div.edit-type", [
-    h(Icon, {
-      icon: "edit",
-      className: "edit-icon",
-      onClick: (e) => {
-        e.stopPropagation();
-        setEditorOpen(true);
-      },
-    }),
-    h(TypeOverlay, {
-      setOverlayOpen: setEditorOpen,
-      overlayOpen: editorOpen,
-      originalType: type,
-      title: "Edit Type",
-      saveHandler,
-    }),
-  ]);
-}
-
-function TypeOverlay({
-  setOverlayOpen,
-  overlayOpen,
-  originalType,
-  title,
-  saveHandler,
-}) {
-  const { name, description, color, id } = originalType || {};
-
-  const [nameInput, setNameInput] = useState(name || "");
-  const [descriptionInput, setDescriptionInput] = useState(description || "");
-  const [colorInput, setColorInput] = useState(color || "#fff");
-
-  return h(
-    Overlay2,
-    {
-      isOpen: overlayOpen,
-    },
-    h(
-      "div.overlay-container",
-      h("div.add-type-overlay", [
-        h("h2.title", [
-          title,
-          h(Icon, {
-            icon: "cross",
-            className: "close-icon",
-            onClick: () => {
-              setOverlayOpen(false);
-            },
-            style: { cursor: "pointer", color: "red" },
-          }),
-        ]),
-        h("div.form-group", [
-          h("div.text-inputs", [
-            h("div.form-field.name", [
-              h("p.label", "Name"),
-              h("input", {
-                type: "text",
-                placeholder: "Enter type name",
-                onChange: (e) => setNameInput(e.target.value),
-                value: nameInput,
-              }),
-            ]),
-            h("div.form-field.form-description", [
-              h("p.label", "Description"),
-              h("input", {
-                type: "text",
-                placeholder: "Enter type description",
-                onChange: (e) => setDescriptionInput(e.target.value),
-                value: descriptionInput,
-              }),
-            ]),
-          ]),
-          h("div.form-field.color", [
-            h("p.label", "Color"),
-            h(ColorPicker, {
-              value: colorInput,
-              onChange: (color) => setColorInput(color),
-              style: { width: "100%" },
-            }),
-          ]),
-        ]),
-        h(
-          SaveButton,
-          {
-            className: "save-btn",
-            small: true,
-            onClick: () =>
-              saveHandler({
-                name: nameInput,
-                description: descriptionInput,
-                color: colorInput,
-                id,
-              }),
-          },
-          "Save changes",
-        ),
-      ]),
-    ),
-  );
-}
-
-function TypeTag({
-  type,
-  luminance,
-  selectedType,
-  setSelectedType,
-  dispatch,
-  tree,
-  selectedNodes,
-  selected,
-  isSelectedNodes,
-}) {
-  const { color, name, id, description } = type;
-  const darkMode = useInDarkMode();
-  const isSelected = id === selected?.id && selectedNodes.length > 0;
-
-  const style = getTagStyle(color, {
-    active: isSelected,
-    highlighted: selectedNodes.length === 0,
-  });
-
-  const payload = {
-    id,
-    name,
-    color,
-    description,
-  };
-
-  const ids = collectMatchingIds(tree, id);
-
-  const handleTagClick = () => {
-    if (!isSelectedNodes && selectedType === null) {
-      if (ids.length > 0) {
-        setSelectedType(type);
-        dispatch({ type: "toggle-node-selected", payload: { ids } });
-      }
-    } else if (isSelectedNodes && selectedType === null) {
-      if (id === selected?.id && selectedNodes.length > 0) {
-        dispatch({
-          type: "toggle-node-selected",
-          payload: { ids: selectedNodes },
-        });
-      } else {
-        dispatch({ type: "select-entity-type", payload });
-      }
-    } else if (isSelectedNodes && selectedType.id === id) {
-      setSelectedType(null);
-      dispatch({ type: "toggle-node-selected", payload: { ids } });
-    } else if (isSelectedNodes && selectedType.id !== id) {
-      if (ids.length > 0) {
-        setSelectedType(type);
-        const oldIds = collectMatchingIds(tree, selectedType.id);
-
-        dispatch({ type: "toggle-node-selected", payload: { ids: oldIds } });
-        dispatch({ type: "toggle-node-selected", payload: { ids } });
-      }
-    } else {
-      console.warn("Unexpected state in TypeTag click handler", {
-        isSelectedNodes,
-        selectedType,
-        selectedNodes,
-        ids,
-        id,
-        selected,
-      });
-    }
-  };
-
-  return h(
-    Popover,
-    {
-      autoFocus: false,
-      content: h("div.description", description || "No description available"),
-      interactionKind: "hover",
-    },
-    h(
-      "div.type-tag",
-      {
-        onClick: handleTagClick,
-        style: {
-          cursor:
-            ids.length > 0 || (isSelectedNodes && !selectedType)
-              ? "pointer"
-              : "",
-          color: "black",
-          backgroundColor: style.backgroundColor,
-          border: isSelected
-            ? `1px solid var(--text-emphasized-color)`
-            : `1px solid var(--background-color)`,
-        },
-      },
-      h("div.type-container", [
-        h("div.type-name", name),
-        h("div.icons", [
-          h(EditType, {
-            dispatch,
-            type,
-          }),
-          h(Icon, {
-            icon: "cross",
-            className: "delete-type-icon",
-            style: { color: "red", cursor: "pointer" },
-            onClick: (e) => {
-              e.stopPropagation();
-              dispatch({
-                type: "delete-entity-type",
-                payload: { id },
-              });
-            },
-          }),
-        ]),
-      ]),
-    ),
-  );
-}