@macrostrat/feedback-components 1.1.3 → 1.1.5

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.5]
+
+- Simplified match logic
+- Added view only mode
+
+## [1.1.4] - 2025-07-16
+
+- Add and remove match feature added
+- Match now featured on sidebox
+
 ## [1.1.3] - 2025-07-16
 
 - Graph node clicking logic same as graph and tree

package/dist/esm/feedback-components.03f08dc7.js

@@ -0,0 +1,287 @@
+import "./feedback-components.5a8f0185.css";
+import $7mcWh$feedbackcomponents7c2fe400js from "./feedback-components.7c2fe400.js";
+import {getTagStyle as $03d8811e9c9b360d$export$35baa338324d8550} from "./feedback-components.707e3490.js";
+import $7mcWh$macrostrathyper from "@macrostrat/hyper";
+import {useState as $7mcWh$useState} from "react";
+import {Icon as $7mcWh$Icon, Overlay2 as $7mcWh$Overlay2, Popover as $7mcWh$Popover} from "@blueprintjs/core";
+import {useInDarkMode as $7mcWh$useInDarkMode, SaveButton as $7mcWh$SaveButton} from "@macrostrat/ui-components";
+import {ColorPicker as $7mcWh$ColorPicker} from "@macrostrat/data-sheet";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+const $18030469a9425911$var$h = (0, $7mcWh$macrostrathyper).styled((0, ($parcel$interopDefault($7mcWh$feedbackcomponents7c2fe400js))));
+function $18030469a9425911$export$9ebd91d75ddb6a8b({ types: types, selected: selected, dispatch: dispatch, selectedNodes: selectedNodes, tree: tree, viewOnly: viewOnly }) {
+    const [selectedType, setSelectedType] = (0, $7mcWh$useState)(null);
+    const isSelectedNodes = selectedNodes.length > 0;
+    const darkMode = (0, $7mcWh$useInDarkMode)();
+    const luminance = darkMode ? 0.9 : 0.4;
+    return $18030469a9425911$var$h("div.type-list-container", [
+        $18030469a9425911$var$h("div.type-list-header", isSelectedNodes && !selectedType ? "Change selected nodes to:" : "Entity Types"),
+        $18030469a9425911$var$h("div.type-list", Array.from(types.values()).map((type)=>$18030469a9425911$var$h($18030469a9425911$var$TypeTag, {
+                type: type,
+                luminance: luminance,
+                selectedType: selectedType,
+                setSelectedType: setSelectedType,
+                dispatch: dispatch,
+                viewOnly: viewOnly,
+                tree: tree,
+                selectedNodes: selectedNodes,
+                selected: selected,
+                isSelectedNodes: isSelectedNodes
+            }))),
+        $18030469a9425911$var$h.if(!viewOnly)($18030469a9425911$var$AddType, {
+            dispatch: dispatch
+        })
+    ]);
+}
+function $18030469a9425911$var$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 $18030469a9425911$var$AddType({ dispatch: dispatch }) {
+    const [overlayOpen, setOverlayOpen] = (0, $7mcWh$useState)(false);
+    const saveHandler = (payload)=>{
+        dispatch({
+            type: "add-entity-type",
+            payload: payload
+        });
+        setOverlayOpen(false);
+    };
+    return $18030469a9425911$var$h("div.add-type-container", [
+        $18030469a9425911$var$h("div.add-type", {
+            onClick: ()=>setOverlayOpen(true)
+        }, [
+            $18030469a9425911$var$h("p.add-type-text", "Add new type"),
+            $18030469a9425911$var$h((0, $7mcWh$Icon), {
+                icon: "plus"
+            })
+        ]),
+        $18030469a9425911$var$h($18030469a9425911$var$TypeOverlay, {
+            setOverlayOpen: setOverlayOpen,
+            overlayOpen: overlayOpen,
+            title: "Add New Type",
+            saveHandler: saveHandler
+        })
+    ]);
+}
+function $18030469a9425911$var$EditType({ dispatch: dispatch, type: type }) {
+    const [editorOpen, setEditorOpen] = (0, $7mcWh$useState)(false);
+    const saveHandler = (payload)=>{
+        dispatch({
+            type: "update-entity-type",
+            payload: payload
+        });
+        setEditorOpen(false);
+    };
+    return $18030469a9425911$var$h("div.edit-type", [
+        $18030469a9425911$var$h((0, $7mcWh$Icon), {
+            icon: "edit",
+            className: "edit-icon",
+            onClick: (e)=>{
+                e.stopPropagation();
+                setEditorOpen(true);
+            }
+        }),
+        $18030469a9425911$var$h($18030469a9425911$var$TypeOverlay, {
+            setOverlayOpen: setEditorOpen,
+            overlayOpen: editorOpen,
+            originalType: type,
+            title: "Edit Type",
+            saveHandler: saveHandler
+        })
+    ]);
+}
+function $18030469a9425911$var$TypeOverlay({ setOverlayOpen: setOverlayOpen, overlayOpen: overlayOpen, originalType: originalType, title: title, saveHandler: saveHandler }) {
+    const { name: name, description: description, color: color, id: id } = originalType || {};
+    const [nameInput, setNameInput] = (0, $7mcWh$useState)(name || "");
+    const [descriptionInput, setDescriptionInput] = (0, $7mcWh$useState)(description || "");
+    const [colorInput, setColorInput] = (0, $7mcWh$useState)(color || "#fff");
+    return $18030469a9425911$var$h((0, $7mcWh$Overlay2), {
+        isOpen: overlayOpen
+    }, $18030469a9425911$var$h("div.overlay-container", $18030469a9425911$var$h("div.add-type-overlay", [
+        $18030469a9425911$var$h("h2.title", [
+            title,
+            $18030469a9425911$var$h((0, $7mcWh$Icon), {
+                icon: "cross",
+                className: "close-icon",
+                onClick: ()=>{
+                    setOverlayOpen(false);
+                },
+                style: {
+                    cursor: "pointer",
+                    color: "red"
+                }
+            })
+        ]),
+        $18030469a9425911$var$h("div.form-group", [
+            $18030469a9425911$var$h("div.text-inputs", [
+                $18030469a9425911$var$h("div.form-field.name", [
+                    $18030469a9425911$var$h("p.label", "Name"),
+                    $18030469a9425911$var$h("input", {
+                        type: "text",
+                        placeholder: "Enter type name",
+                        onChange: (e)=>setNameInput(e.target.value),
+                        value: nameInput
+                    })
+                ]),
+                $18030469a9425911$var$h("div.form-field.form-description", [
+                    $18030469a9425911$var$h("p.label", "Description"),
+                    $18030469a9425911$var$h("input", {
+                        type: "text",
+                        placeholder: "Enter type description",
+                        onChange: (e)=>setDescriptionInput(e.target.value),
+                        value: descriptionInput
+                    })
+                ])
+            ]),
+            $18030469a9425911$var$h("div.form-field.color", [
+                $18030469a9425911$var$h("p.label", "Color"),
+                $18030469a9425911$var$h((0, $7mcWh$ColorPicker), {
+                    value: colorInput,
+                    onChange: (color)=>setColorInput(color),
+                    style: {
+                        width: "100%"
+                    }
+                })
+            ])
+        ]),
+        $18030469a9425911$var$h((0, $7mcWh$SaveButton), {
+            className: "save-btn",
+            small: true,
+            onClick: ()=>saveHandler({
+                    name: nameInput,
+                    description: descriptionInput,
+                    color: colorInput,
+                    id: id
+                })
+        }, "Save changes")
+    ])));
+}
+function $18030469a9425911$var$TypeTag({ type: type, luminance: luminance, selectedType: selectedType, setSelectedType: setSelectedType, dispatch: dispatch, tree: tree, selectedNodes: selectedNodes, selected: selected, isSelectedNodes: isSelectedNodes, viewOnly: viewOnly }) {
+    const { color: color, name: name, id: id, description: description } = type;
+    const darkMode = (0, $7mcWh$useInDarkMode)();
+    const isSelected = id === selected?.id && selectedNodes.length > 0;
+    const style = (0, $03d8811e9c9b360d$export$35baa338324d8550)(color, {
+        active: isSelected,
+        highlighted: selectedNodes.length === 0
+    });
+    const payload = {
+        id: id,
+        name: name,
+        color: color,
+        description: description
+    };
+    const ids = $18030469a9425911$var$collectMatchingIds(tree, id);
+    const handleTagClick = ()=>{
+        if (!isSelectedNodes && selectedType === null) {
+            if (ids.length > 0) {
+                setSelectedType(type);
+                dispatch({
+                    type: "toggle-node-selected",
+                    payload: {
+                        ids: 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: payload
+            });
+        } else if (isSelectedNodes && selectedType.id === id) {
+            setSelectedType(null);
+            dispatch({
+                type: "toggle-node-selected",
+                payload: {
+                    ids: ids
+                }
+            });
+        } else if (isSelectedNodes && selectedType.id !== id) {
+            if (ids.length > 0) {
+                setSelectedType(type);
+                const oldIds = $18030469a9425911$var$collectMatchingIds(tree, selectedType.id);
+                dispatch({
+                    type: "toggle-node-selected",
+                    payload: {
+                        ids: oldIds
+                    }
+                });
+                dispatch({
+                    type: "toggle-node-selected",
+                    payload: {
+                        ids: ids
+                    }
+                });
+            }
+        } else console.warn("Unexpected state in TypeTag click handler", {
+            isSelectedNodes: isSelectedNodes,
+            selectedType: selectedType,
+            selectedNodes: selectedNodes,
+            ids: ids,
+            id: id,
+            selected: selected
+        });
+    };
+    return $18030469a9425911$var$h((0, $7mcWh$Popover), {
+        autoFocus: false,
+        content: $18030469a9425911$var$h("div.description", description || "No description available"),
+        interactionKind: "hover"
+    }, $18030469a9425911$var$h("div.type-tag", {
+        onClick: handleTagClick,
+        style: {
+            cursor: (ids.length > 0 || isSelectedNodes && !selectedType) && !viewOnly ? "pointer" : "",
+            color: "black",
+            backgroundColor: style.backgroundColor,
+            border: isSelected ? `1px solid var(--text-emphasized-color)` : `1px solid var(--background-color)`
+        }
+    }, $18030469a9425911$var$h("div.type-container", [
+        $18030469a9425911$var$h("div.type-name", name),
+        $18030469a9425911$var$h.if(!viewOnly)("div.icons", [
+            $18030469a9425911$var$h($18030469a9425911$var$EditType, {
+                dispatch: dispatch,
+                type: type
+            }),
+            $18030469a9425911$var$h((0, $7mcWh$Icon), {
+                icon: "cross",
+                className: "delete-type-icon",
+                style: {
+                    color: "red",
+                    cursor: "pointer"
+                },
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    dispatch({
+                        type: "delete-entity-type",
+                        payload: {
+                            id: id
+                        }
+                    });
+                }
+            })
+        ])
+    ])));
+}
+
+
+export {$18030469a9425911$export$9ebd91d75ddb6a8b as TypeList};
+//# sourceMappingURL=feedback-components.03f08dc7.js.map

package/dist/esm/feedback-components.03f08dc7.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/feedback-components/src/feedback/typelist.ts"],"sourcesContent":["import styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport { getTagStyle } from \"../extractions\";\nimport { useState } from \"react\";\nimport { Icon, Popover, Overlay2 } from \"@blueprintjs/core\";\nimport { SaveButton } from \"@macrostrat/ui-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { ColorPicker } from \"@macrostrat/data-sheet\";\n\nconst h = hyper.styled(styles);\n\nexport function TypeList({\n  types,\n  selected,\n  dispatch,\n  selectedNodes,\n  tree,\n  viewOnly,\n}) {\n  const [selectedType, setSelectedType] = useState(null);\n  const isSelectedNodes = selectedNodes.length > 0;\n  const darkMode = useInDarkMode();\n  const luminance = darkMode ? 0.9 : 0.4;\n\n  return h(\"div.type-list-container\", [\n    h(\n      \"div.type-list-header\",\n      isSelectedNodes && !selectedType\n        ? \"Change selected nodes to:\"\n        : \"Entity Types\",\n    ),\n    h(\n      \"div.type-list\",\n      Array.from(types.values()).map((type) =>\n        h(TypeTag, {\n          type,\n          luminance,\n          selectedType,\n          setSelectedType,\n          dispatch,\n          viewOnly,\n          tree,\n          selectedNodes,\n          selected,\n          isSelectedNodes,\n        }),\n      ),\n    ),\n    h.if(!viewOnly)(AddType, { dispatch }),\n  ]);\n}\n\nfunction collectMatchingIds(tree, id) {\n  const ids = [];\n\n  function traverse(node) {\n    if (node.type.id === id) {\n      ids.push(node.id);\n    }\n    if (Array.isArray(node.children)) {\n      node.children.forEach(traverse);\n    }\n  }\n\n  tree.forEach(traverse);\n  return ids;\n}\n\nfunction AddType({ dispatch }) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  const saveHandler = (payload) => {\n    dispatch({\n      type: \"add-entity-type\",\n      payload,\n    });\n    setOverlayOpen(false);\n  };\n\n  return h(\"div.add-type-container\", [\n    h(\"div.add-type\", { onClick: () => setOverlayOpen(true) }, [\n      h(\"p.add-type-text\", \"Add new type\"),\n      h(Icon, { icon: \"plus\" }),\n    ]),\n    h(TypeOverlay, {\n      setOverlayOpen,\n      overlayOpen,\n      title: \"Add New Type\",\n      saveHandler,\n    }),\n  ]);\n}\n\nfunction EditType({ dispatch, type }) {\n  const [editorOpen, setEditorOpen] = useState(false);\n\n  const saveHandler = (payload) => {\n    dispatch({\n      type: \"update-entity-type\",\n      payload,\n    });\n    setEditorOpen(false);\n  };\n\n  return h(\"div.edit-type\", [\n    h(Icon, {\n      icon: \"edit\",\n      className: \"edit-icon\",\n      onClick: (e) => {\n        e.stopPropagation();\n        setEditorOpen(true);\n      },\n    }),\n    h(TypeOverlay, {\n      setOverlayOpen: setEditorOpen,\n      overlayOpen: editorOpen,\n      originalType: type,\n      title: \"Edit Type\",\n      saveHandler,\n    }),\n  ]);\n}\n\nfunction TypeOverlay({\n  setOverlayOpen,\n  overlayOpen,\n  originalType,\n  title,\n  saveHandler,\n}) {\n  const { name, description, color, id } = originalType || {};\n\n  const [nameInput, setNameInput] = useState(name || \"\");\n  const [descriptionInput, setDescriptionInput] = useState(description || \"\");\n  const [colorInput, setColorInput] = useState(color || \"#fff\");\n\n  return h(\n    Overlay2,\n    {\n      isOpen: overlayOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          title,\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(\"div.text-inputs\", [\n            h(\"div.form-field.name\", [\n              h(\"p.label\", \"Name\"),\n              h(\"input\", {\n                type: \"text\",\n                placeholder: \"Enter type name\",\n                onChange: (e) => setNameInput(e.target.value),\n                value: nameInput,\n              }),\n            ]),\n            h(\"div.form-field.form-description\", [\n              h(\"p.label\", \"Description\"),\n              h(\"input\", {\n                type: \"text\",\n                placeholder: \"Enter type description\",\n                onChange: (e) => setDescriptionInput(e.target.value),\n                value: descriptionInput,\n              }),\n            ]),\n          ]),\n          h(\"div.form-field.color\", [\n            h(\"p.label\", \"Color\"),\n            h(ColorPicker, {\n              value: colorInput,\n              onChange: (color) => setColorInput(color),\n              style: { width: \"100%\" },\n            }),\n          ]),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () =>\n              saveHandler({\n                name: nameInput,\n                description: descriptionInput,\n                color: colorInput,\n                id,\n              }),\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction TypeTag({\n  type,\n  luminance,\n  selectedType,\n  setSelectedType,\n  dispatch,\n  tree,\n  selectedNodes,\n  selected,\n  isSelectedNodes,\n  viewOnly,\n}) {\n  const { color, name, id, description } = type;\n  const darkMode = useInDarkMode();\n  const isSelected = id === selected?.id && selectedNodes.length > 0;\n\n  const style = getTagStyle(color, {\n    active: isSelected,\n    highlighted: selectedNodes.length === 0,\n  });\n\n  const payload = {\n    id,\n    name,\n    color,\n    description,\n  };\n\n  const ids = collectMatchingIds(tree, id);\n\n  const handleTagClick = () => {\n    if (!isSelectedNodes && selectedType === null) {\n      if (ids.length > 0) {\n        setSelectedType(type);\n        dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n      }\n    } else if (isSelectedNodes && selectedType === null) {\n      if (id === selected?.id && selectedNodes.length > 0) {\n        dispatch({\n          type: \"toggle-node-selected\",\n          payload: { ids: selectedNodes },\n        });\n      } else {\n        dispatch({ type: \"select-entity-type\", payload });\n      }\n    } else if (isSelectedNodes && selectedType.id === id) {\n      setSelectedType(null);\n      dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n    } else if (isSelectedNodes && selectedType.id !== id) {\n      if (ids.length > 0) {\n        setSelectedType(type);\n        const oldIds = collectMatchingIds(tree, selectedType.id);\n\n        dispatch({ type: \"toggle-node-selected\", payload: { ids: oldIds } });\n        dispatch({ type: \"toggle-node-selected\", payload: { ids } });\n      }\n    } else {\n      console.warn(\"Unexpected state in TypeTag click handler\", {\n        isSelectedNodes,\n        selectedType,\n        selectedNodes,\n        ids,\n        id,\n        selected,\n      });\n    }\n  };\n\n  return h(\n    Popover,\n    {\n      autoFocus: false,\n      content: h(\"div.description\", description || \"No description available\"),\n      interactionKind: \"hover\",\n    },\n    h(\n      \"div.type-tag\",\n      {\n        onClick: handleTagClick,\n        style: {\n          cursor:\n            (ids.length > 0 || (isSelectedNodes && !selectedType)) && !viewOnly\n              ? \"pointer\"\n              : \"\",\n          color: \"black\",\n          backgroundColor: style.backgroundColor,\n          border: isSelected\n            ? `1px solid var(--text-emphasized-color)`\n            : `1px solid var(--background-color)`,\n        },\n      },\n      h(\"div.type-container\", [\n        h(\"div.type-name\", name),\n        h.if(!viewOnly)(\"div.icons\", [\n          h(EditType, {\n            dispatch,\n            type,\n          }),\n          h(Icon, {\n            icon: \"cross\",\n            className: \"delete-type-icon\",\n            style: { color: \"red\", cursor: \"pointer\" },\n            onClick: (e) => {\n              e.stopPropagation();\n              dispatch({\n                type: \"delete-entity-type\",\n                payload: { id },\n              });\n            },\n          }),\n        ]),\n      ]),\n    ),\n  );\n}\n"],"names":[],"version":3,"file":"feedback-components.03f08dc7.js.map"}