@macrostrat/feedback-components 1.0.0

package/dist/main.module.ca3db294.js

@@ -0,0 +1,16 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $83cb1ce4a2b71eef$exports = {};
+
+$parcel$export($83cb1ce4a2b71eef$exports, "entities", () => $83cb1ce4a2b71eef$export$5345fd892b40e1f6, (v) => $83cb1ce4a2b71eef$export$5345fd892b40e1f6 = v);
+$parcel$export($83cb1ce4a2b71eef$exports, "entity", () => $83cb1ce4a2b71eef$export$4b5127edceda427d, (v) => $83cb1ce4a2b71eef$export$4b5127edceda427d = v);
+var $83cb1ce4a2b71eef$export$5345fd892b40e1f6;
+var $83cb1ce4a2b71eef$export$4b5127edceda427d;
+$83cb1ce4a2b71eef$export$5345fd892b40e1f6 = `UZr1Jq_entities`;
+$83cb1ce4a2b71eef$export$4b5127edceda427d = `UZr1Jq_entity`;
+
+
+export {$83cb1ce4a2b71eef$exports as default};
+//# sourceMappingURL=main.module.ca3db294.js.map

package/dist/main.module.ca3db294.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA,IAAA;AACA,IAAA;AADA,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAA2B,CAAC,aAAa,CAAC","sources":["packages/feedback-components/src/extractions/main.module.sass"],"sourcesContent":[".entities\n  list-style: none\n  padding-left: 0\n\n  .entities ul\n    list-style: none\n\n.entity\n  margin: 0.2em 0 0.5em\n  padding-right: 3px\n"],"names":[],"version":3,"file":"main.module.ca3db294.js.map"}

package/dist/main.module.d6508c0e.css

@@ -0,0 +1,14 @@
+.UZr1Jq_entities {
+  padding-left: 0;
+  list-style: none;
+}
+
+.UZr1Jq_entities .UZr1Jq_entities ul {
+  list-style: none;
+}
+
+.UZr1Jq_entity {
+  margin: .2em 0 .5em;
+  padding-right: 3px;
+}
+/*# sourceMappingURL=main.module.d6508c0e.css.map */

package/dist/main.module.d6508c0e.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;AAIE;;;;AAGF","sources":["packages/feedback-components/src/extractions/main.module.sass"],"sourcesContent":[".entities\n  list-style: none\n  padding-left: 0\n\n  .entities ul\n    list-style: none\n\n.entity\n  margin: 0.2em 0 0.5em\n  padding-right: 3px\n"],"names":[],"version":3,"file":"main.module.d6508c0e.css.map"}

package/dist/main.module.f9f92ece.css

@@ -0,0 +1,17 @@
+.WofFTa_item-container {
+  align-items: center;
+  gap: 1em;
+  min-height: 40px;
+  display: flex;
+}
+
+.WofFTa_item-container.WofFTa_selected {
+  background-color: var(--panel-background-color);
+}
+
+.WofFTa_swatch {
+  border-radius: 4px;
+  width: 30px;
+  height: 30px;
+}
+/*# sourceMappingURL=main.module.f9f92ece.css.map */

package/dist/main.module.f9f92ece.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;;AAME;;;;AAGF","sources":["packages/feedback-components/src/feedback/type-selector/main.module.sass"],"sourcesContent":[".item-container\n  min-height: 40px\n  display: flex\n  align-items: center\n  gap: 1em\n\n  &.selected\n    background-color: var(--panel-background-color)\n\n.swatch\n  width: 30px\n  height: 30px\n  border-radius: 4px\n"],"names":[],"version":3,"file":"main.module.f9f92ece.css.map"}

package/dist/node.30d0b8c3.js

@@ -0,0 +1,59 @@
+import {EntityTag as $03d8811e9c9b360d$export$117e56c71b172cde} from "./extractions.54be85f8.js";
+import {useTreeDispatch as $b79bf29960412ca7$export$e1068f2d1c68f87e} from "./edit-state.e8edb13a.js";
+import "./feedback.module.7e16830e.css";
+import $6psMB$feedbackmodulec28cbac7js from "./feedback.module.c28cbac7.js";
+import $6psMB$macrostrathyper from "@macrostrat/hyper";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+const $b6b9741bf83336eb$var$h = (0, $6psMB$macrostrathyper).styled((0, ($parcel$interopDefault($6psMB$feedbackmodulec28cbac7js))));
+function $b6b9741bf83336eb$var$isSelected(searchNode, treeNode) {
+    return searchNode.id == treeNode.id;
+// We could also select children of the search node here if we wanted to
+}
+function $b6b9741bf83336eb$var$isNodeHighlighted(node, tree) {
+    // We treat no selection as all nodes being active. We may add some nuance later
+    if (tree.selectedNodes.length == 0) return true;
+    for (const selectedNode of tree.selectedNodes){
+        if ($b6b9741bf83336eb$var$isSelected(node.data, selectedNode.data)) return true;
+    }
+    // Check if the parent node is highlighted
+    if (node.parent != null && $b6b9741bf83336eb$var$isNodeHighlighted(node.parent, tree)) return true;
+    return false;
+}
+function $b6b9741bf83336eb$var$isNodeActive(node, tree) {
+    for (const selectedNode of tree.selectedNodes){
+        if ($b6b9741bf83336eb$var$isSelected(node.data, selectedNode.data)) return true;
+    }
+    return false;
+}
+function $b6b9741bf83336eb$var$Node({ node: node, style: style, dragHandle: dragHandle, tree: tree, matchComponent: matchComponent }) {
+    let highlighted = $b6b9741bf83336eb$var$isNodeHighlighted(node, tree);
+    let active = $b6b9741bf83336eb$var$isNodeActive(node, tree);
+    const dispatch = (0, $b79bf29960412ca7$export$e1068f2d1c68f87e)();
+    return $b6b9741bf83336eb$var$h("div.node", {
+        style: style,
+        ref: dragHandle
+    }, $b6b9741bf83336eb$var$h((0, $03d8811e9c9b360d$export$117e56c71b172cde), {
+        data: node.data,
+        active: active,
+        highlighted: highlighted,
+        matchComponent: matchComponent,
+        onClickType () {
+            dispatch({
+                type: "toggle-entity-type-selector"
+            });
+        }
+    }));
+}
+var $b6b9741bf83336eb$export$2e2bcd8739ae039 = $b6b9741bf83336eb$var$Node;
+
+
+export {$b6b9741bf83336eb$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=node.30d0b8c3.js.map

package/dist/node.30d0b8c3.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;AAOA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,0EAAK;AAE5B,SAAS,iCAAW,UAAoB,EAAE,QAAkB;IAC1D,OAAO,WAAW,EAAE,IAAI,SAAS,EAAE;AACnC,wEAAwE;AAC1E;AAEA,SAAS,wCAAkB,IAAuB,EAAE,IAAuB;IACzE,gFAAgF;IAChF,IAAI,KAAK,aAAa,CAAC,MAAM,IAAI,GAC/B,OAAO;IAGT,KAAK,MAAM,gBAAgB,KAAK,aAAa,CAAE;QAC7C,IAAI,iCAAW,KAAK,IAAI,EAAE,aAAa,IAAI,GACzC,OAAO;IAEX;IAEA,0CAA0C;IAC1C,IAAI,KAAK,MAAM,IAAI,QAAQ,wCAAkB,KAAK,MAAM,EAAE,OACxD,OAAO;IAGT,OAAO;AACT;AAEA,SAAS,mCAAa,IAAuB,EAAE,IAAuB;IACpE,KAAK,MAAM,gBAAgB,KAAK,aAAa,CAAE;QAC7C,IAAI,iCAAW,KAAK,IAAI,EAAE,aAAa,IAAI,GACzC,OAAO;IAEX;IACA,OAAO;AACT;AAEA,SAAS,2BAAK,QAAE,IAAI,SAAE,KAAK,cAAE,UAAU,QAAE,IAAI,kBAAE,cAAc,EAAO;IAClE,IAAI,cAAuB,wCAAkB,MAAM;IACnD,IAAI,SAAkB,mCAAa,MAAM;IAEzC,MAAM,WAAW,CAAA,GAAA,yCAAc;IAE/B,OAAO,wBACL,YACA;eAAE;QAAO,KAAK;IAAW,GACzB,wBAAE,CAAA,GAAA,yCAAQ,GAAG;QACX,MAAM,KAAK,IAAI;gBACf;qBACA;wBACA;QACA;YACE,SAAS;gBAAE,MAAM;YAA8B;QACjD;IACF;AAEJ;IAEA,2CAAe","sources":["packages/feedback-components/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({ node, style, dragHandle, tree, matchComponent }: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  const dispatch = useTreeDispatch();\n\n  return h(\n    \"div.node\",\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active,\n      highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    })\n  );\n}\n\nexport default Node;\n"],"names":[],"version":3,"file":"node.30d0b8c3.js.map"}

package/dist/text-visualizer.77af0d24.js

@@ -0,0 +1,101 @@
+import "./feedback.module.7e16830e.css";
+import $85rLh$feedbackmodulec28cbac7js from "./feedback.module.c28cbac7.js";
+import {getTagStyle as $03d8811e9c9b360d$export$35baa338324d8550, buildHighlights as $03d8811e9c9b360d$export$c4b91360064ad200} from "./extractions.54be85f8.js";
+import {TextAnnotateBlend as $85rLh$TextAnnotateBlend} from "react-text-annotate-blend";
+import $85rLh$macrostrathyper from "@macrostrat/hyper";
+import {useCallback as $85rLh$useCallback} from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+const $156a3efbc315814c$var$h = (0, $85rLh$macrostrathyper).styled((0, ($parcel$interopDefault($85rLh$feedbackmodulec28cbac7js))));
+function $156a3efbc315814c$var$buildTags(highlights, selectedNodes) {
+    let tags = [];
+    // If entity ID has already been seen, don't add it again
+    const entities = new Set();
+    for (const highlight of highlights){
+        // Don't add multiply-linked entities multiple times
+        if (entities.has(highlight.id)) continue;
+        const highlighted = $156a3efbc315814c$var$isHighlighted(highlight, selectedNodes);
+        const active = $156a3efbc315814c$var$isActive(highlight, selectedNodes);
+        tags.push({
+            markStyle: {
+                ...(0, $03d8811e9c9b360d$export$35baa338324d8550)(highlight.backgroundColor, {
+                    highlighted: highlighted,
+                    active: active
+                }),
+                borderRadius: "0.2em",
+                padding: "0.1em",
+                borderWidth: "1.5px",
+                cursor: "pointer"
+            },
+            tagStyle: {
+                display: "none"
+            },
+            ...highlight
+        });
+        entities.add(highlight.id);
+    }
+    return tags;
+}
+function $156a3efbc315814c$var$isActive(tag, selectedNodes) {
+    return selectedNodes.includes(tag.id);
+}
+function $156a3efbc315814c$var$isHighlighted(tag, selectedNodes) {
+    if (selectedNodes.length === 0) return true;
+    return (selectedNodes.includes(tag.id) || tag.parents?.some((d)=>selectedNodes.includes(d))) ?? false;
+}
+function $156a3efbc315814c$export$6e107db9091b8219(props) {
+    // Convert input to tags
+    const { text: text, selectedNodes: selectedNodes, nodes: nodes, dispatch: dispatch } = props;
+    let allTags = $156a3efbc315814c$var$buildTags((0, $03d8811e9c9b360d$export$c4b91360064ad200)(nodes, null), selectedNodes);
+    const onChange = (0, $85rLh$useCallback)((tags)=>{
+        // New tags
+        console.log(tags);
+        const newTags = tags.filter((d)=>!("id" in d));
+        if (newTags.length > 0) {
+            const { start: start, end: end } = newTags[0];
+            const payload = {
+                start: start,
+                end: end,
+                text: text.slice(start, end)
+            };
+            dispatch({
+                type: "create-node",
+                payload: payload
+            });
+            return;
+        }
+        const tagIDs = new Set(tags.map((d)=>d.id));
+        const removedIds = allTags.map((d)=>d.id).filter((d)=>!tagIDs.has(d));
+        /* Find the id that was removed: that is the one that will be selected
+       (we are hijacking the 'click to delete' functionality to select instead) */ if (removedIds.length > 0) dispatch({
+            type: "toggle-node-selected",
+            payload: {
+                ids: removedIds
+            }
+        });
+    }, [
+        allTags,
+        text
+    ]);
+    return $156a3efbc315814c$var$h((0, $85rLh$TextAnnotateBlend), {
+        style: {
+            fontSize: "1.2em"
+        },
+        className: "feedback-text",
+        content: text,
+        onChange: onChange,
+        value: allTags
+    });
+}
+
+
+export {$156a3efbc315814c$export$6e107db9091b8219 as FeedbackText};
+//# sourceMappingURL=text-visualizer.77af0d24.js.map

package/dist/text-visualizer.77af0d24.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,0EAAK;AAU5B,SAAS,gCACP,UAAuB,EACvB,aAAuB;IAEvB,IAAI,OAA2B,EAAE;IAEjC,yDAAyD;IACzD,MAAM,WAAW,IAAI;IAErB,KAAK,MAAM,aAAa,WAAY;QAClC,oDAAoD;QACpD,IAAI,SAAS,GAAG,CAAC,UAAU,EAAE,GAAG;QAEhC,MAAM,cAAc,oCAAc,WAAW;QAC7C,MAAM,SAAS,+BAAS,WAAW;QAEnC,KAAK,IAAI,CAAC;YACR,WAAW;gBACT,GAAG,CAAA,GAAA,yCAAU,EAAE,UAAU,eAAe,EAAE;iCACxC;4BACA;gBACF,EAAE;gBACF,cAAc;gBACd,SAAS;gBACT,aAAa;gBACb,QAAQ;YACV;YACA,UAAU;gBACR,SAAS;YACX;YACA,GAAG,SAAS;QACd;QAEA,SAAS,GAAG,CAAC,UAAU,EAAE;IAC3B;IAEA,OAAO;AACT;AAEA,SAAS,+BAAS,GAAc,EAAE,aAAuB;IACvD,OAAO,cAAc,QAAQ,CAAC,IAAI,EAAE;AACtC;AAEA,SAAS,oCAAc,GAAc,EAAE,aAAuB;IAC5D,IAAI,cAAc,MAAM,KAAK,GAAG,OAAO;IACvC,OACE,AAAC,CAAA,cAAc,QAAQ,CAAC,IAAI,EAAE,KAC5B,IAAI,OAAO,EAAE,KAAK,CAAC,IAAM,cAAc,QAAQ,CAAC,GAAE,KACpD;AAEJ;AAEO,SAAS,0CAAa,KAAwB;IACnD,wBAAwB;IACxB,MAAM,QAAE,IAAI,iBAAE,aAAa,SAAE,KAAK,YAAE,QAAQ,EAAE,GAAG;IACjD,IAAI,UAA8B,gCAChC,CAAA,GAAA,yCAAc,EAAE,OAAO,OACvB;IAGF,MAAM,WAAW,CAAA,GAAA,kBAAU,EACzB,CAAC;QACC,WAAW;QACX,QAAQ,GAAG,CAAC;QACZ,MAAM,UAAU,KAAK,MAAM,CAAC,CAAC,IAAM,CAAE,CAAA,QAAQ,CAAA;QAC7C,IAAI,QAAQ,MAAM,GAAG,GAAG;YACtB,MAAM,SAAE,KAAK,OAAE,GAAG,EAAE,GAAG,OAAO,CAAC,EAAE;YACjC,MAAM,UAAU;uBAAE;qBAAO;gBAAK,MAAM,KAAK,KAAK,CAAC,OAAO;YAAK;YAC3D,SAAS;gBAAE,MAAM;yBAAe;YAAQ;YACxC;QACF;QAEA,MAAM,SAAS,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE;QAC3C,MAAM,aAAa,QAAQ,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,IAAM,CAAC,OAAO,GAAG,CAAC;QAEtE;gFAC0E,GAC1E,IAAI,WAAW,MAAM,GAAG,GACtB,SAAS;YACP,MAAM;YACN,SAAS;gBAAE,KAAK;YAAW;QAC7B;IAEJ,GACA;QAAC;QAAS;KAAK;IAGjB,OAAO,wBAAE,CAAA,GAAA,wBAAgB,GAAG;QAC1B,OAAO;YACL,UAAU;QACZ;QACA,WAAW;QACX,SAAS;kBACT;QACA,OAAO;IACT;AACF","sources":["packages/feedback-components/src/feedback/text-visualizer.ts"],"sourcesContent":["import { AnnotateBlendTag, TextAnnotateBlend } from \"react-text-annotate-blend\";\nimport { InternalEntity } from \"./types\";\nimport { TreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { buildHighlights, getTagStyle } from \"../extractions\";\nimport { Highlight } from \"../extractions/types\";\nimport { useCallback } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport interface FeedbackTextProps {\n  text: string;\n  selectedNodes: number[];\n  nodes: InternalEntity[];\n  updateNodes: (nodes: string[]) => void;\n  dispatch: TreeDispatch;\n}\n\nfunction buildTags(\n  highlights: Highlight[],\n  selectedNodes: number[]\n): AnnotateBlendTag[] {\n  let tags: AnnotateBlendTag[] = [];\n\n  // If entity ID has already been seen, don't add it again\n  const entities = new Set<number>();\n\n  for (const highlight of highlights) {\n    // Don't add multiply-linked entities multiple times\n    if (entities.has(highlight.id)) continue;\n\n    const highlighted = isHighlighted(highlight, selectedNodes);\n    const active = isActive(highlight, selectedNodes);\n\n    tags.push({\n      markStyle: {\n        ...getTagStyle(highlight.backgroundColor, {\n          highlighted,\n          active,\n        }),\n        borderRadius: \"0.2em\",\n        padding: \"0.1em\",\n        borderWidth: \"1.5px\",\n        cursor: \"pointer\",\n      },\n      tagStyle: {\n        display: \"none\",\n      },\n      ...highlight,\n    });\n\n    entities.add(highlight.id);\n  }\n\n  return tags;\n}\n\nfunction isActive(tag: Highlight, selectedNodes: number[]) {\n  return selectedNodes.includes(tag.id);\n}\n\nfunction isHighlighted(tag: Highlight, selectedNodes: number[]) {\n  if (selectedNodes.length === 0) return true;\n  return (\n    (selectedNodes.includes(tag.id) ||\n      tag.parents?.some((d) => selectedNodes.includes(d))) ??\n    false\n  );\n}\n\nexport function FeedbackText(props: FeedbackTextProps) {\n  // Convert input to tags\n  const { text, selectedNodes, nodes, dispatch } = props;\n  let allTags: AnnotateBlendTag[] = buildTags(\n    buildHighlights(nodes, null),\n    selectedNodes\n  );\n\n  const onChange = useCallback(\n    (tags) => {\n      // New tags\n      console.log(tags);\n      const newTags = tags.filter((d) => !(\"id\" in d));\n      if (newTags.length > 0) {\n        const { start, end } = newTags[0];\n        const payload = { start, end, text: text.slice(start, end) };\n        dispatch({ type: \"create-node\", payload });\n        return;\n      }\n\n      const tagIDs = new Set(tags.map((d) => d.id));\n      const removedIds = allTags.map((d) => d.id).filter((d) => !tagIDs.has(d));\n\n      /* Find the id that was removed: that is the one that will be selected\n       (we are hijacking the 'click to delete' functionality to select instead) */\n      if (removedIds.length > 0) {\n        dispatch({\n          type: \"toggle-node-selected\",\n          payload: { ids: removedIds },\n        });\n      }\n    },\n    [allTags, text]\n  );\n\n  return h(TextAnnotateBlend, {\n    style: {\n      fontSize: \"1.2em\",\n    },\n    className: \"feedback-text\",\n    content: text,\n    onChange,\n    value: allTags,\n  });\n}\n"],"names":[],"version":3,"file":"text-visualizer.77af0d24.js.map"}

package/dist/type-selector.e75dd247.js

@@ -0,0 +1,62 @@
+import "./main.module.f9f92ece.css";
+import $4V3RG$mainmodule21bbfaf4js from "./main.module.21bbfaf4.js";
+import $4V3RG$macrostrathyper from "@macrostrat/hyper";
+import $4V3RG$classnames from "classnames";
+import {Omnibar as $4V3RG$Omnibar} from "@blueprintjs/select";
+import "@blueprintjs/select/lib/css/blueprint-select.css";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/**
+ * Entity type selector
+ */ 
+
+
+
+
+const $fda9ef5406c1cfb4$var$h = (0, $4V3RG$macrostrathyper).styled((0, ($parcel$interopDefault($4V3RG$mainmodule21bbfaf4js))));
+const $fda9ef5406c1cfb4$var$TagListItem = (props)=>{
+    /** Render a tag for the omnibox list */ let { active: active, selected: selected, className: className, onSelect: onSelect, item: item, children: children } = props;
+    className = (0, $4V3RG$classnames)({
+        active: active,
+        selected: selected
+    }, className);
+    const onClick = ()=>onSelect(item);
+    return $fda9ef5406c1cfb4$var$h("div.item-container", {
+        key: item.id,
+        className: className,
+        onClick: onClick
+    }, [
+        $fda9ef5406c1cfb4$var$h("div.swatch", {
+            style: {
+                backgroundColor: item.color
+            }
+        }),
+        $fda9ef5406c1cfb4$var$h("div.item", {}, item.name)
+    ]);
+};
+function $fda9ef5406c1cfb4$export$d8660660a589068c(props) {
+    /** A general omnibox for annotation types */ const { onSelectItem: onSelectItem, items: items, isOpen: isOpen, onClose: onClose } = props;
+    return $fda9ef5406c1cfb4$var$h((0, $4V3RG$Omnibar), {
+        onItemSelect: onSelectItem,
+        items: items,
+        resetOnSelect: false,
+        isOpen: isOpen,
+        onClose: onClose,
+        itemRenderer (item, { handleClick: handleClick, modifiers: modifiers }) {
+            return $fda9ef5406c1cfb4$var$h($fda9ef5406c1cfb4$var$TagListItem, {
+                key: item.id,
+                item: item,
+                onSelect: handleClick,
+                active: modifiers.active,
+                selected: modifiers.active
+            });
+        }
+    });
+}
+
+
+export {$fda9ef5406c1cfb4$export$d8660660a589068c as OmniboxSelector};
+//# sourceMappingURL=type-selector.e75dd247.js.map

package/dist/type-selector.e75dd247.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;CAEC;;;;;AAUD,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,sEAAK;AAa5B,MAAM,oCAAoD,CAAC;IACzD,sCAAsC,GACtC,IAAI,UAAE,MAAM,YAAE,QAAQ,aAAE,SAAS,YAAE,QAAQ,QAAE,IAAI,YAAE,QAAQ,EAAE,GAAG;IAChE,YAAY,CAAA,GAAA,iBAAS,EAAE;gBAAE;kBAAQ;IAAS,GAAG;IAC7C,MAAM,UAAU,IAAM,SAAS;IAE/B,OAAO,wBACL,sBACA;QACE,KAAK,KAAK,EAAE;mBACZ;iBACA;IACF,GACA;QACE,wBAAE,cAAc;YAAE,OAAO;gBAAE,iBAAiB,KAAK,KAAK;YAAC;QAAE;QACzD,wBAAE,YAAY,CAAC,GAAG,KAAK,IAAI;KAC5B;AAEL;AAWO,SAAS,0CAAmB,KAAsB;IACvD,2CAA2C,GAC3C,MAAM,gBAAE,YAAY,SAAE,KAAK,UAAE,MAAM,WAAE,OAAO,EAAE,GAAG;IAEjD,OAAO,wBAAE,CAAA,GAAA,cAAM,GAAG;QAChB,cAAc;eACd;QACA,eAAe;gBACf;iBACA;QACA,cAAa,IAAO,EAAE,eAAE,WAAW,aAAE,SAAS,EAAE;YAC9C,OAAO,wBAAE,mCAAa;gBACpB,KAAK,KAAK,EAAE;sBACZ;gBACA,UAAU;gBACV,QAAQ,UAAU,MAAM;gBACxB,UAAU,UAAU,MAAM;YAC5B;QACF;IACF;AACF","sources":["packages/feedback-components/src/feedback/type-selector/index.ts"],"sourcesContent":["/**\n * Entity type selector\n */\n\nimport styles from \"./main.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { Omnibar, OmnibarProps } from \"@blueprintjs/select\";\nimport \"@blueprintjs/select/lib/css/blueprint-select.css\";\n\nconst h = hyper.styled(styles);\n\ninterface TagItemProps<T> {\n  selected: boolean;\n  active: boolean;\n  className?: string;\n  item: T;\n\n  onSelect(t: T): void;\n\n  children?: React.ReactElement;\n}\n\nconst TagListItem: React.ComponentType<TagItemProps<T>> = (props) => {\n  /** Render a tag for the omnibox list */\n  let { active, selected, className, onSelect, item, children } = props;\n  className = classNames({ active, selected }, className);\n  const onClick = () => onSelect(item);\n\n  return h(\n    \"div.item-container\",\n    {\n      key: item.id,\n      className,\n      onClick,\n    },\n    [\n      h(\"div.swatch\", { style: { backgroundColor: item.color } }),\n      h(\"div.item\", {}, item.name),\n    ]\n  );\n};\n\ntype BoxLifecycleProps<T> = Pick<OmnibarProps<T>, \"onClose\" | \"isOpen\">;\n\ninterface OmniboxProps<T> extends BoxLifecycleProps<T> {\n  items: T[];\n  selectedItem: T;\n  onSelectItem: (t: T) => void;\n  listItemComponent?: React.ComponentType<TagItemProps<T>>;\n}\n\nexport function OmniboxSelector<T>(props: OmniboxProps<T>) {\n  /** A general omnibox for annotation types */\n  const { onSelectItem, items, isOpen, onClose } = props;\n\n  return h(Omnibar, {\n    onItemSelect: onSelectItem,\n    items,\n    resetOnSelect: false,\n    isOpen,\n    onClose,\n    itemRenderer(item: T, { handleClick, modifiers }) {\n      return h(TagListItem, {\n        key: item.id,\n        item,\n        onSelect: handleClick,\n        active: modifiers.active,\n        selected: modifiers.active,\n      });\n    },\n  });\n}\n"],"names":[],"version":3,"file":"type-selector.e75dd247.js.map"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@macrostrat/feedback-components",
+  "version": "1.0.0",
+  "description": "",
+  "source": "src/index.ts",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rm -rf dist && parcel build"
+  },
+  "author": "Daven Quinn",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@blueprintjs/core": "^5.10.2",
+    "@blueprintjs/select": "^5.3.10",
+    "@macrostrat/color-utils": "^1.0.1",
+    "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/ui-components": "^4.1.0",
+    "@xyflow/react": "^12.3.6",
+    "classnames": "^2.5.1",
+    "d3-force": "^3.0.0",
+    "immutability-helper": "^3.1.1",
+    "react-arborist": "^3.4.0",
+    "react-text-annotate-blend": "^1.2.0",
+    "use-element-dimensions": "^2.1.3"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "^17.0.2||^18",
+    "react-dom": "^17.0.2||^18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/feedback-components"
+  },
+  "devDependencies": {
+    "parcel": "^2.13.3"
+  }
+}

package/src/extractions/index.ts

@@ -0,0 +1,219 @@
+import styles from "./main.module.sass";
+import classNames from "classnames";
+import { Tag } from "@blueprintjs/core";
+import type { Entity, EntityExt, Highlight, EntityType } from "./types";
+import { CSSProperties } from "react";
+import { asChromaColor } from "@macrostrat/color-utils";
+import hyper from "@macrostrat/hyper";
+
+export type { Entity, EntityExt };
+
+const h = hyper.styled(styles);
+
+export function buildHighlights(
+  entities: EntityExt[],
+  parent: EntityExt | null
+): Highlight[] {
+  let highlights = [];
+  let parents = [];
+  if (parent != null) {
+    parents = [parent.id, ...(parent.parents ?? [])];
+  }
+
+  for (const entity of entities) {
+    highlights.push({
+      start: entity.indices[0],
+      end: entity.indices[1],
+      text: entity.name,
+      backgroundColor: entity.type.color ?? "#ddd",
+      tag: entity.type.name,
+      id: entity.id,
+      parents,
+    });
+    highlights.push(...buildHighlights(entity.children ?? [], entity));
+  }
+  return highlights;
+}
+
+export function enhanceData(extractionData, models, entityTypes) {
+  return {
+    ...extractionData,
+    model: models.get(extractionData.model_id),
+    entities: extractionData.entities?.map((d) =>
+      enhanceEntity(d, entityTypes)
+    ),
+  };
+}
+
+export function getTagStyle(
+  baseColor: string,
+  options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean }
+): CSSProperties {
+  const _baseColor = asChromaColor(baseColor ?? "#ddd");
+  const { highlighted = true, inDarkMode = false, active = false } = options;
+
+  let mixAmount = highlighted ? 0.8 : 0.5;
+  let backgroundAlpha = highlighted ? 0.8 : 0.2;
+
+  if (active) {
+    mixAmount = 1;
+    backgroundAlpha = 1;
+  }
+
+  const mixTarget = inDarkMode ? "white" : "black";
+
+  const color = _baseColor.mix(mixTarget, mixAmount).css();
+  const borderColor = highlighted
+    ? _baseColor.mix(mixTarget, mixAmount / 2).css()
+    : "transparent";
+
+  return {
+    color,
+    backgroundColor: _baseColor.alpha(backgroundAlpha).css(),
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderColor,
+    borderWidth: "1px",
+    fontWeight: active ? "bold" : "normal",
+  };
+}
+
+function enhanceEntity(
+  entity: Entity,
+  entityTypes: Map<number, EntityType>
+): EntityExt {
+  return {
+    ...entity,
+    type: addColor(entityTypes.get(entity.type), entity.match != null),
+    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),
+  };
+}
+
+function addColor(entityType: EntityType, match = false) {
+  const color = asChromaColor(entityType.color ?? "#ddd").brighten(
+    match ? 1 : 2
+  );
+
+  return { ...entityType, color: color.css() };
+}
+
+export function ExtractionContext({
+  data,
+  entityTypes,
+  matchComponent,
+}: {
+  data: any;
+  entityTypes: Map<number, EntityType>;
+  matchComponent: MatchComponent;
+}) {
+  const highlights = buildHighlights(data.entities, null);
+
+  return h("div", [
+    h("p", h(HighlightedText, { text: data.paragraph_text, highlights })),
+    h(ModelInfo, { data: data.model }),
+    h(
+      "ul.entities",
+      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent }))
+    ),
+  ]);
+}
+
+export function ModelInfo({ data }) {
+  return h("p.model-name", ["Model: ", h("code.bp5-code", data.name)]);
+}
+
+export type MatchComponent = (props: { data: any }) => any;
+
+type EntityTagProps = {
+  data: EntityExt;
+  highlighted?: boolean;
+  active?: boolean;
+  onClickType?: (type: EntityType) => void;
+  matchComponent?: MatchComponent;
+};
+
+export function EntityTag({
+  data,
+  highlighted = true,
+  active = false,
+  onClickType,
+  matchComponent = null,
+}: EntityTagProps) {
+  const { name, type, match } = data;
+  const className = classNames(
+    {
+      matched: match != null,
+      type: data.type.name,
+    },
+    "entity"
+  );
+
+  const style = getTagStyle(type.color ?? "#aaaaaa", { highlighted, active });
+
+  let _matchLink = null;
+  if (match != null && matchComponent != null) {
+    _matchLink = h(matchComponent, { data: match });
+  }
+
+  return h(Tag, { style, className }, [
+    h("span.entity-name", name),
+    " ",
+    h(
+      "code.entity-type.bp5-code",
+      {
+        onClick(evt) {
+          if (active && onClickType != null) {
+            onClickType(type);
+            evt.stopPropagation();
+          }
+        },
+      },
+      [type.name, _matchLink]
+    ),
+  ]);
+}
+
+function ExtractionInfo({
+  data,
+  matchComponent = null,
+}: {
+  data: EntityExt;
+  matchComponent: MatchComponent;
+}) {
+  const children = data.children ?? [];
+
+  return h("li.entity-row", [
+    h(EntityTag, { data, matchComponent }),
+    h.if(children.length > 0)([
+      h(
+        "ul.children",
+        children.map((d) => h(ExtractionInfo, { data: d, matchComponent }))
+      ),
+    ]),
+  ]);
+}
+
+function HighlightedText(props: { text: string; highlights: Highlight[] }) {
+  const { text, highlights = [] } = props;
+  const parts = [];
+  let start = 0;
+
+  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);
+  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {
+    if (i === 0) return highlight;
+    const prev = sortedHighlights[i - 1];
+    if (highlight.start < prev.end) {
+      highlight.start = prev.end;
+    }
+    return highlight;
+  });
+
+  for (const highlight of deconflictedHighlights) {
+    const { start: s, end, ...rest } = highlight;
+    parts.push(text.slice(start, s));
+    parts.push(h("span.highlight", { style: rest }, text.slice(s, end)));
+    start = end;
+  }
+  parts.push(text.slice(start));
+  return h("span", parts);
+}

package/src/extractions/main.module.sass

@@ -0,0 +1,10 @@
+.entities
+  list-style: none
+  padding-left: 0
+
+  .entities ul
+    list-style: none
+
+.entity
+  margin: 0.2em 0 0.5em
+  padding-right: 3px

package/src/extractions/types.ts

@@ -0,0 +1,30 @@
+type EntityType = { name: string; color: string; id: number };
+type Match = any;
+
+export interface Entity {
+  id: number;
+  name: string;
+  type?: number;
+  indices: [number, number];
+  children: Entity[];
+  match?: Match;
+}
+
+export { EntityType };
+
+export type Highlight = {
+  start: number;
+  end: number;
+  tag?: string;
+  text?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  id: number;
+  parents?: number[];
+};
+
+export interface EntityExt extends Omit<Entity, "type" | "children"> {
+  type: EntityType;
+  children: EntityExt[];
+  parents?: number[];
+}