@macrostrat/feedback-components 1.1.10 → 2.0.0

package/dist/feedback/text-visualizer.cjs

@@ -0,0 +1,288 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const feedback_module = require("./feedback.module.sass.cjs");
+const hyper = require("@macrostrat/hyper");
+const index = require("../extractions/index.cjs");
+const react = require("react");
+const core = require("@blueprintjs/core");
+const matches = require("./matches.cjs");
+const h = hyper.styled(feedback_module.default);
+function buildTags(highlights, selectedNodes) {
+  let tags = [];
+  const entities = /* @__PURE__ */ new Set();
+  for (const highlight of highlights) {
+    if (entities.has(highlight.id)) continue;
+    const highlighted = isHighlighted(highlight, selectedNodes);
+    const active = isActive(highlight, selectedNodes);
+    const tagStyle = index.getTagStyle(highlight.backgroundColor, {
+      highlighted,
+      active
+    });
+    const tag = {
+      color: tagStyle.color,
+      tagStyle: {
+        display: "none"
+      },
+      markStyle: {
+        backgroundColor: tagStyle.backgroundColor
+      },
+      ...highlight,
+      backgroundColor: tagStyle.backgroundColor
+    };
+    tags.push(tag);
+    entities.add(highlight.id);
+  }
+  return tags;
+}
+function isActive(tag, selectedNodes) {
+  return selectedNodes.includes(tag.id);
+}
+function isHighlighted(tag, selectedNodes) {
+  if (selectedNodes.length === 0) return true;
+  return (selectedNodes.includes(tag.id) || tag.parents?.some((d) => selectedNodes.includes(d))) ?? false;
+}
+function FeedbackText(props) {
+  const {
+    text,
+    selectedNodes,
+    nodes,
+    dispatch,
+    allowOverlap,
+    matchLinks,
+    viewOnly
+  } = props;
+  const allTags = buildTags(
+    index.buildHighlights(nodes, null),
+    selectedNodes
+  );
+  return h(
+    "div.feedback-text-wrapper",
+    {
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Backspace") {
+          dispatch({
+            type: "delete-node",
+            payload: { ids: selectedNodes }
+          });
+        }
+      }
+    },
+    h(HighlightedText, {
+      text,
+      allTags,
+      allowOverlap,
+      dispatch,
+      selectedNodes,
+      viewOnly,
+      matchLinks
+    })
+  );
+}
+function createTagFromSelection({
+  container
+}) {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed || selection.rangeCount === 0 || !container)
+    return null;
+  const range = selection.getRangeAt(0);
+  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
+    return null;
+  }
+  const preRange = document.createRange();
+  preRange.setStart(container, 0);
+  preRange.setEnd(range.startContainer, range.startOffset);
+  const start = preRange.toString().length;
+  const selectedText = range.toString();
+  const end = start + selectedText.length;
+  return {
+    start,
+    end,
+    text: selectedText
+  };
+}
+function addTag({ tag, dispatch, text, allTags, allowOverlap }) {
+  let { start, end } = tag;
+  if (text[end - 1] != " ") {
+    while (start > 0 && /\w/.test(text[start - 1])) {
+      start--;
+    }
+    while (end < text.length && /\w/.test(text[end])) {
+      end++;
+    }
+  }
+  let payload = { start, end, text: text.slice(start, end) };
+  if (payload.text.trim() === "") {
+    console.log("Blank tag found, ignoring");
+    return;
+  }
+  const duplicate = allTags.find(
+    (t) => t.start === payload.start && (t.end === payload.end || t.end === payload.end - 1)
+  );
+  if (duplicate) {
+    console.log("Duplicate tag found, ignoring");
+    return;
+  }
+  if (payload.text.endsWith(" ")) {
+    payload.text = payload.text.slice(0, -1);
+    payload.end -= 1;
+  }
+  const inside = allTags.some(
+    (t) => t.start <= payload.start && t.end >= payload.end
+  );
+  const overlap = allTags.some(
+    (t) => t.start < payload.end && t.end > payload.start
+  );
+  if ((inside || overlap) && !allowOverlap) {
+    console.log("Tag is inside another tag, ignoring");
+    return;
+  }
+  dispatch({ type: "create-node", payload });
+}
+function nestHighlights(text, tags) {
+  const events = [];
+  for (const tag of tags) {
+    events.push({ pos: tag.start, type: "start", tag });
+    events.push({ pos: tag.end, type: "end", tag });
+  }
+  events.sort((a, b) => {
+    if (a.pos !== b.pos) return a.pos - b.pos;
+    if (a.type === "end" && b.type === "start") return -1;
+    if (a.type === "start" && b.type === "end") return 1;
+    return 0;
+  });
+  const root = { children: [], textStart: 0 };
+  const stack = [root];
+  let lastPos = 0;
+  for (const { pos, type, tag } of events) {
+    const parent = stack[stack.length - 1];
+    if (pos > lastPos) {
+      const slice = text.slice(lastPos, pos);
+      parent.children.push(slice);
+    }
+    if (type === "start") {
+      const newNode = { tag, children: [], textStart: pos };
+      parent.children.push(newNode);
+      stack.push(newNode);
+    } else {
+      stack.pop();
+    }
+    lastPos = pos;
+  }
+  if (lastPos < text.length) {
+    stack[stack.length - 1].children.push(text.slice(lastPos));
+  }
+  return root;
+}
+function renderNode(node, dispatch, selectedNodes, parentSelected, matchLinks, viewOnly) {
+  if (typeof node === "string") return node;
+  const { tag, children } = node;
+  const isSelected = selectedNodes?.includes(tag.id);
+  const showBorder = selectedNodes.length === 0 || isSelected;
+  const match = tag.match;
+  const style = {
+    ...tag,
+    zIndex: parentSelected ? -1 : 1,
+    border: "1px solid " + (match != void 0 && matchLinks ? "orange" : showBorder ? tag.color : "transparent"),
+    margin: "-1px"
+  };
+  let moveText = [];
+  if (isSelected) {
+    for (const key in children) {
+      if (Object.prototype.hasOwnProperty.call(children, key)) {
+        const child = children[key];
+        if (child?.tag) {
+          moveText.push(child.children[0]);
+        } else {
+          moveText.push(child);
+        }
+      }
+    }
+  }
+  const tagComponent = h(
+    "span",
+    {
+      onMouseEnter: (e) => {
+        e.stopPropagation();
+      },
+      className: "highlight" + (!viewOnly || match ? " clickable" : ""),
+      style,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.ctrlKey || e.metaKey || selectedNodes[0] === tag.id && selectedNodes.length === 1) {
+          e.stopPropagation();
+          dispatch({
+            type: "toggle-node-selected",
+            payload: { ids: [tag.id] }
+          });
+        } else if (e.shiftKey && selectedNodes.length > 0) {
+          const lastSelected = selectedNodes[selectedNodes.length - 1];
+          dispatch({
+            type: "select-range",
+            payload: { ids: [lastSelected, tag.id] }
+          });
+        } else {
+          dispatch({
+            type: "select-node",
+            payload: { ids: [tag.id] }
+          });
+        }
+      }
+    },
+    isSelected ? moveText.flat() : children.map(
+      (child, i) => renderNode(
+        child,
+        dispatch,
+        selectedNodes,
+        isSelected,
+        matchLinks,
+        viewOnly
+      )
+    )
+  );
+  if (viewOnly && match) {
+    return h(
+      core.Popover,
+      {
+        content: h("div.match-link", h(matches.MatchTag, { data: match, matchLinks })),
+        interactionKind: "hover"
+      },
+      tagComponent
+    );
+  }
+  return tagComponent;
+}
+function HighlightedText(props) {
+  const {
+    text,
+    allTags = [],
+    dispatch,
+    selectedNodes,
+    allowOverlap,
+    matchLinks,
+    viewOnly
+  } = props;
+  const tree = nestHighlights(text, allTags);
+  const spanRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleMouseUp = () => {
+      const tag = createTagFromSelection({ container: spanRef.current });
+      if (!tag) return;
+      addTag({ tag, dispatch, text, allTags, allowOverlap });
+    };
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [text, allTags, dispatch, allowOverlap]);
+  return h(
+    "span",
+    { ref: spanRef },
+    tree.children.map(
+      (child, i) => renderNode(child, dispatch, selectedNodes, false, matchLinks, viewOnly)
+    )
+  );
+}
+exports.FeedbackText = FeedbackText;
+exports.HighlightedText = HighlightedText;
+//# sourceMappingURL=text-visualizer.cjs.map

package/dist/feedback/text-visualizer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-visualizer.cjs","sources":["../../src/feedback/text-visualizer.ts"],"sourcesContent":["import { AnnotateBlendTag } 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 { useEffect, useRef } from \"react\";\nimport { Popover } from \"@blueprintjs/core\";\nimport { MatchTag } from \"./matches\";\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  lineHeight: string;\n  allowOverlap?: boolean;\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  };\n  viewOnly?: boolean;\n}\n\nfunction buildTags(\n  highlights: Highlight[],\n  selectedNodes: number[],\n): AnnotateBlendTag[] {\n  let tags: AnnotateBlendTag[] = [];\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    const tagStyle = getTagStyle(highlight.backgroundColor, {\n      highlighted,\n      active,\n    });\n\n    const tag = {\n      color: tagStyle.color,\n      tagStyle: {\n        display: \"none\",\n      },\n      markStyle: {\n        backgroundColor: tagStyle.backgroundColor,\n      },\n      ...highlight,\n      backgroundColor: tagStyle.backgroundColor,\n    };\n\n    tags.push(tag);\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 {\n    text,\n    selectedNodes,\n    nodes,\n    dispatch,\n    allowOverlap,\n    matchLinks,\n    viewOnly,\n  } = props;\n  const allTags: AnnotateBlendTag[] = buildTags(\n    buildHighlights(nodes, null),\n    selectedNodes,\n  );\n\n  return h(\n    \"div.feedback-text-wrapper\",\n    {\n      tabIndex: 0,\n      onKeyDown: (e) => {\n        if (e.key === \"Backspace\") {\n          dispatch({\n            type: \"delete-node\",\n            payload: { ids: selectedNodes },\n          });\n        }\n      },\n    },\n    h(HighlightedText, {\n      text,\n      allTags,\n      allowOverlap,\n      dispatch,\n      selectedNodes,\n      viewOnly,\n      matchLinks,\n    }),\n  );\n}\n\nfunction createTagFromSelection({\n  container,\n}: {\n  container: HTMLElement | null;\n}) {\n  const selection = window.getSelection();\n  if (\n    !selection ||\n    selection.isCollapsed ||\n    selection.rangeCount === 0 ||\n    !container\n  )\n    return null;\n\n  const range = selection.getRangeAt(0);\n\n  if (\n    !container.contains(range.startContainer) ||\n    !container.contains(range.endContainer)\n  ) {\n    return null;\n  }\n\n  const preRange = document.createRange();\n  preRange.setStart(container, 0);\n  preRange.setEnd(range.startContainer, range.startOffset);\n  const start = preRange.toString().length;\n\n  const selectedText = range.toString();\n  const end = start + selectedText.length;\n\n  return {\n    start,\n    end,\n    text: selectedText,\n  };\n}\n\nfunction addTag({ tag, dispatch, text, allTags, allowOverlap }) {\n  let { start, end } = tag;\n  // snap to text\n  if (text[end - 1] != \" \") {\n    // double clicking word overselects by one, shouldn't increase to next word\n    while (start > 0 && /\\w/.test(text[start - 1])) {\n      start--;\n    }\n    while (end < text.length && /\\w/.test(text[end])) {\n      end++;\n    }\n  }\n\n  let payload = { start, end, text: text.slice(start, end) };\n\n  if (payload.text.trim() === \"\") {\n    console.log(\"Blank tag found, ignoring\");\n    return;\n  }\n\n  const duplicate = allTags.find(\n    (t) =>\n      t.start === payload.start &&\n      (t.end === payload.end || t.end === payload.end - 1),\n  );\n\n  if (duplicate) {\n    console.log(\"Duplicate tag found, ignoring\");\n    return;\n  }\n\n  if (payload.text.endsWith(\" \")) {\n    payload.text = payload.text.slice(0, -1);\n    payload.end -= 1;\n  }\n\n  const inside = allTags.some(\n    (t) => t.start <= payload.start && t.end >= payload.end,\n  );\n\n  const overlap = allTags.some(\n    (t) => t.start < payload.end && t.end > payload.start,\n  );\n\n  if ((inside || overlap) && !allowOverlap) {\n    console.log(\"Tag is inside another tag, ignoring\");\n    return;\n  }\n\n  dispatch({ type: \"create-node\", payload });\n}\n\nfunction nestHighlights(text: string, tags: AnnotateBlendTag[]) {\n  const events: Array<{\n    pos: number;\n    type: \"start\" | \"end\";\n    tag: AnnotateBlendTag;\n  }> = [];\n\n  for (const tag of tags) {\n    events.push({ pos: tag.start, type: \"start\", tag });\n    events.push({ pos: tag.end, type: \"end\", tag });\n  }\n\n  events.sort((a, b) => {\n    if (a.pos !== b.pos) return a.pos - b.pos;\n    if (a.type === \"end\" && b.type === \"start\") return -1;\n    if (a.type === \"start\" && b.type === \"end\") return 1;\n    return 0;\n  });\n\n  const root = { children: [], textStart: 0 };\n  const stack = [root];\n  let lastPos = 0;\n\n  for (const { pos, type, tag } of events) {\n    const parent = stack[stack.length - 1];\n\n    if (pos > lastPos) {\n      const slice = text.slice(lastPos, pos);\n      parent.children.push(slice);\n    }\n\n    if (type === \"start\") {\n      const newNode = { tag, children: [], textStart: pos };\n      parent.children.push(newNode);\n      stack.push(newNode);\n    } else {\n      stack.pop();\n    }\n\n    lastPos = pos;\n  }\n\n  if (lastPos < text.length) {\n    stack[stack.length - 1].children.push(text.slice(lastPos));\n  }\n\n  return root;\n}\n\nfunction renderNode(\n  node: any,\n  dispatch: TreeDispatch,\n  selectedNodes: number[],\n  parentSelected: boolean,\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  },\n  viewOnly?: boolean,\n): any {\n  if (typeof node === \"string\") return node;\n\n  const { tag, children } = node;\n  const isSelected = selectedNodes?.includes(tag.id);\n  const showBorder = selectedNodes.length === 0 || isSelected;\n  const match = tag.match;\n\n  const style = {\n    ...tag,\n    zIndex: parentSelected ? -1 : 1,\n    border:\n      \"1px solid \" +\n      (match != undefined && matchLinks\n        ? \"orange\"\n        : showBorder\n          ? tag.color\n          : \"transparent\"),\n    margin: \"-1px\",\n  };\n\n  let moveText = [];\n  if (isSelected) {\n    for (const key in children) {\n      if (Object.prototype.hasOwnProperty.call(children, key)) {\n        const child = children[key];\n        if (child?.tag) {\n          moveText.push(child.children[0]);\n        } else {\n          moveText.push(child);\n        }\n      }\n    }\n  }\n\n  const tagComponent = h(\n    \"span\",\n    {\n      onMouseEnter: (e: MouseEvent) => {\n        e.stopPropagation();\n      },\n      className: \"highlight\" + (!viewOnly || match ? \" clickable\" : \"\"),\n      style,\n      onClick: (e: MouseEvent) => {\n        e.stopPropagation();\n        if (\n          e.ctrlKey ||\n          e.metaKey ||\n          (selectedNodes[0] === tag.id && selectedNodes.length === 1)\n        ) {\n          // Toggle selection on ctrl/cmd click or when node is only selected node\n          e.stopPropagation();\n          dispatch({\n            type: \"toggle-node-selected\",\n            payload: { ids: [tag.id] },\n          });\n        } else if (e.shiftKey && selectedNodes.length > 0) {\n          // Select range from last selected node to this one\n          const lastSelected = selectedNodes[selectedNodes.length - 1];\n\n          dispatch({\n            type: \"select-range\",\n            payload: { ids: [lastSelected, tag.id] },\n          });\n        } else {\n          dispatch({\n            type: \"select-node\",\n            payload: { ids: [tag.id] },\n          });\n        }\n      },\n    },\n    isSelected\n      ? moveText.flat()\n      : children.map((child: any, i: number) =>\n          renderNode(\n            child,\n            dispatch,\n            selectedNodes,\n            isSelected,\n            matchLinks,\n            viewOnly,\n          ),\n        ),\n  );\n\n  if (viewOnly && match) {\n    return h(\n      Popover,\n      {\n        content: h(\"div.match-link\", h(MatchTag, { data: match, matchLinks })),\n        interactionKind: \"hover\",\n      },\n      tagComponent,\n    );\n  }\n\n  return tagComponent;\n}\n\nexport function HighlightedText(props: {\n  text: string;\n  allTags: AnnotateBlendTag[];\n  lineHeight: string;\n  allowOverlap?: boolean;\n  dispatch: TreeDispatch;\n  selectedNodes: number[];\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  };\n  viewOnly?: boolean;\n}) {\n  const {\n    text,\n    allTags = [],\n    dispatch,\n    selectedNodes,\n    allowOverlap,\n    matchLinks,\n    viewOnly,\n  } = props;\n\n  const tree = nestHighlights(text, allTags);\n\n  const spanRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const handleMouseUp = () => {\n      const tag = createTagFromSelection({ container: spanRef.current });\n      if (!tag) return;\n      addTag({ tag, dispatch, text, allTags, allowOverlap });\n    };\n\n    document.addEventListener(\"mouseup\", handleMouseUp);\n    return () => {\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [text, allTags, dispatch, allowOverlap]);\n\n  return h(\n    \"span\",\n    { ref: spanRef },\n    tree.children.map((child: any, i: number) =>\n      renderNode(child, dispatch, selectedNodes, false, matchLinks, viewOnly),\n    ),\n  );\n}\n"],"names":["styles","getTagStyle","buildHighlights","Popover","MatchTag","useRef","useEffect"],"mappings":"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"}

package/dist/feedback/text-visualizer.d.ts

@@ -0,0 +1,36 @@
+import { AnnotateBlendTag } from 'react-text-annotate-blend';
+import { InternalEntity } from './types';
+import { TreeDispatch } from './edit-state';
+export interface FeedbackTextProps {
+    text: string;
+    selectedNodes: number[];
+    nodes: InternalEntity[];
+    updateNodes: (nodes: string[]) => void;
+    dispatch: TreeDispatch;
+    lineHeight: string;
+    allowOverlap?: boolean;
+    matchLinks?: {
+        lithology: string;
+        strat_name: string;
+        lith_att: string;
+    };
+    viewOnly?: boolean;
+}
+export declare function FeedbackText(props: FeedbackTextProps): import('react').DOMElement<{
+    tabIndex: number;
+    onKeyDown: (e: import('react').KeyboardEvent<Element>) => void;
+}, Element>;
+export declare function HighlightedText(props: {
+    text: string;
+    allTags: AnnotateBlendTag[];
+    lineHeight: string;
+    allowOverlap?: boolean;
+    dispatch: TreeDispatch;
+    selectedNodes: number[];
+    matchLinks?: {
+        lithology: string;
+        strat_name: string;
+        lith_att: string;
+    };
+    viewOnly?: boolean;
+}): import('react').DetailedReactHTMLElement<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;

package/dist/feedback/text-visualizer.js

@@ -0,0 +1,288 @@
+import styles from "./feedback.module.sass.js";
+import hyper from "@macrostrat/hyper";
+import { buildHighlights, getTagStyle } from "../extractions/index.js";
+import { useRef, useEffect } from "react";
+import { Popover } from "@blueprintjs/core";
+import { MatchTag } from "./matches.js";
+const h = hyper.styled(styles);
+function buildTags(highlights, selectedNodes) {
+  let tags = [];
+  const entities = /* @__PURE__ */ new Set();
+  for (const highlight of highlights) {
+    if (entities.has(highlight.id)) continue;
+    const highlighted = isHighlighted(highlight, selectedNodes);
+    const active = isActive(highlight, selectedNodes);
+    const tagStyle = getTagStyle(highlight.backgroundColor, {
+      highlighted,
+      active
+    });
+    const tag = {
+      color: tagStyle.color,
+      tagStyle: {
+        display: "none"
+      },
+      markStyle: {
+        backgroundColor: tagStyle.backgroundColor
+      },
+      ...highlight,
+      backgroundColor: tagStyle.backgroundColor
+    };
+    tags.push(tag);
+    entities.add(highlight.id);
+  }
+  return tags;
+}
+function isActive(tag, selectedNodes) {
+  return selectedNodes.includes(tag.id);
+}
+function isHighlighted(tag, selectedNodes) {
+  if (selectedNodes.length === 0) return true;
+  return (selectedNodes.includes(tag.id) || tag.parents?.some((d) => selectedNodes.includes(d))) ?? false;
+}
+function FeedbackText(props) {
+  const {
+    text,
+    selectedNodes,
+    nodes,
+    dispatch,
+    allowOverlap,
+    matchLinks,
+    viewOnly
+  } = props;
+  const allTags = buildTags(
+    buildHighlights(nodes, null),
+    selectedNodes
+  );
+  return h(
+    "div.feedback-text-wrapper",
+    {
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Backspace") {
+          dispatch({
+            type: "delete-node",
+            payload: { ids: selectedNodes }
+          });
+        }
+      }
+    },
+    h(HighlightedText, {
+      text,
+      allTags,
+      allowOverlap,
+      dispatch,
+      selectedNodes,
+      viewOnly,
+      matchLinks
+    })
+  );
+}
+function createTagFromSelection({
+  container
+}) {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed || selection.rangeCount === 0 || !container)
+    return null;
+  const range = selection.getRangeAt(0);
+  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
+    return null;
+  }
+  const preRange = document.createRange();
+  preRange.setStart(container, 0);
+  preRange.setEnd(range.startContainer, range.startOffset);
+  const start = preRange.toString().length;
+  const selectedText = range.toString();
+  const end = start + selectedText.length;
+  return {
+    start,
+    end,
+    text: selectedText
+  };
+}
+function addTag({ tag, dispatch, text, allTags, allowOverlap }) {
+  let { start, end } = tag;
+  if (text[end - 1] != " ") {
+    while (start > 0 && /\w/.test(text[start - 1])) {
+      start--;
+    }
+    while (end < text.length && /\w/.test(text[end])) {
+      end++;
+    }
+  }
+  let payload = { start, end, text: text.slice(start, end) };
+  if (payload.text.trim() === "") {
+    console.log("Blank tag found, ignoring");
+    return;
+  }
+  const duplicate = allTags.find(
+    (t) => t.start === payload.start && (t.end === payload.end || t.end === payload.end - 1)
+  );
+  if (duplicate) {
+    console.log("Duplicate tag found, ignoring");
+    return;
+  }
+  if (payload.text.endsWith(" ")) {
+    payload.text = payload.text.slice(0, -1);
+    payload.end -= 1;
+  }
+  const inside = allTags.some(
+    (t) => t.start <= payload.start && t.end >= payload.end
+  );
+  const overlap = allTags.some(
+    (t) => t.start < payload.end && t.end > payload.start
+  );
+  if ((inside || overlap) && !allowOverlap) {
+    console.log("Tag is inside another tag, ignoring");
+    return;
+  }
+  dispatch({ type: "create-node", payload });
+}
+function nestHighlights(text, tags) {
+  const events = [];
+  for (const tag of tags) {
+    events.push({ pos: tag.start, type: "start", tag });
+    events.push({ pos: tag.end, type: "end", tag });
+  }
+  events.sort((a, b) => {
+    if (a.pos !== b.pos) return a.pos - b.pos;
+    if (a.type === "end" && b.type === "start") return -1;
+    if (a.type === "start" && b.type === "end") return 1;
+    return 0;
+  });
+  const root = { children: [], textStart: 0 };
+  const stack = [root];
+  let lastPos = 0;
+  for (const { pos, type, tag } of events) {
+    const parent = stack[stack.length - 1];
+    if (pos > lastPos) {
+      const slice = text.slice(lastPos, pos);
+      parent.children.push(slice);
+    }
+    if (type === "start") {
+      const newNode = { tag, children: [], textStart: pos };
+      parent.children.push(newNode);
+      stack.push(newNode);
+    } else {
+      stack.pop();
+    }
+    lastPos = pos;
+  }
+  if (lastPos < text.length) {
+    stack[stack.length - 1].children.push(text.slice(lastPos));
+  }
+  return root;
+}
+function renderNode(node, dispatch, selectedNodes, parentSelected, matchLinks, viewOnly) {
+  if (typeof node === "string") return node;
+  const { tag, children } = node;
+  const isSelected = selectedNodes?.includes(tag.id);
+  const showBorder = selectedNodes.length === 0 || isSelected;
+  const match = tag.match;
+  const style = {
+    ...tag,
+    zIndex: parentSelected ? -1 : 1,
+    border: "1px solid " + (match != void 0 && matchLinks ? "orange" : showBorder ? tag.color : "transparent"),
+    margin: "-1px"
+  };
+  let moveText = [];
+  if (isSelected) {
+    for (const key in children) {
+      if (Object.prototype.hasOwnProperty.call(children, key)) {
+        const child = children[key];
+        if (child?.tag) {
+          moveText.push(child.children[0]);
+        } else {
+          moveText.push(child);
+        }
+      }
+    }
+  }
+  const tagComponent = h(
+    "span",
+    {
+      onMouseEnter: (e) => {
+        e.stopPropagation();
+      },
+      className: "highlight" + (!viewOnly || match ? " clickable" : ""),
+      style,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.ctrlKey || e.metaKey || selectedNodes[0] === tag.id && selectedNodes.length === 1) {
+          e.stopPropagation();
+          dispatch({
+            type: "toggle-node-selected",
+            payload: { ids: [tag.id] }
+          });
+        } else if (e.shiftKey && selectedNodes.length > 0) {
+          const lastSelected = selectedNodes[selectedNodes.length - 1];
+          dispatch({
+            type: "select-range",
+            payload: { ids: [lastSelected, tag.id] }
+          });
+        } else {
+          dispatch({
+            type: "select-node",
+            payload: { ids: [tag.id] }
+          });
+        }
+      }
+    },
+    isSelected ? moveText.flat() : children.map(
+      (child, i) => renderNode(
+        child,
+        dispatch,
+        selectedNodes,
+        isSelected,
+        matchLinks,
+        viewOnly
+      )
+    )
+  );
+  if (viewOnly && match) {
+    return h(
+      Popover,
+      {
+        content: h("div.match-link", h(MatchTag, { data: match, matchLinks })),
+        interactionKind: "hover"
+      },
+      tagComponent
+    );
+  }
+  return tagComponent;
+}
+function HighlightedText(props) {
+  const {
+    text,
+    allTags = [],
+    dispatch,
+    selectedNodes,
+    allowOverlap,
+    matchLinks,
+    viewOnly
+  } = props;
+  const tree = nestHighlights(text, allTags);
+  const spanRef = useRef(null);
+  useEffect(() => {
+    const handleMouseUp = () => {
+      const tag = createTagFromSelection({ container: spanRef.current });
+      if (!tag) return;
+      addTag({ tag, dispatch, text, allTags, allowOverlap });
+    };
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [text, allTags, dispatch, allowOverlap]);
+  return h(
+    "span",
+    { ref: spanRef },
+    tree.children.map(
+      (child, i) => renderNode(child, dispatch, selectedNodes, false, matchLinks, viewOnly)
+    )
+  );
+}
+export {
+  FeedbackText,
+  HighlightedText
+};
+//# sourceMappingURL=text-visualizer.js.map

package/dist/feedback/text-visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-visualizer.js","sources":["../../src/feedback/text-visualizer.ts"],"sourcesContent":["import { AnnotateBlendTag } 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 { useEffect, useRef } from \"react\";\nimport { Popover } from \"@blueprintjs/core\";\nimport { MatchTag } from \"./matches\";\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  lineHeight: string;\n  allowOverlap?: boolean;\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  };\n  viewOnly?: boolean;\n}\n\nfunction buildTags(\n  highlights: Highlight[],\n  selectedNodes: number[],\n): AnnotateBlendTag[] {\n  let tags: AnnotateBlendTag[] = [];\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    const tagStyle = getTagStyle(highlight.backgroundColor, {\n      highlighted,\n      active,\n    });\n\n    const tag = {\n      color: tagStyle.color,\n      tagStyle: {\n        display: \"none\",\n      },\n      markStyle: {\n        backgroundColor: tagStyle.backgroundColor,\n      },\n      ...highlight,\n      backgroundColor: tagStyle.backgroundColor,\n    };\n\n    tags.push(tag);\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 {\n    text,\n    selectedNodes,\n    nodes,\n    dispatch,\n    allowOverlap,\n    matchLinks,\n    viewOnly,\n  } = props;\n  const allTags: AnnotateBlendTag[] = buildTags(\n    buildHighlights(nodes, null),\n    selectedNodes,\n  );\n\n  return h(\n    \"div.feedback-text-wrapper\",\n    {\n      tabIndex: 0,\n      onKeyDown: (e) => {\n        if (e.key === \"Backspace\") {\n          dispatch({\n            type: \"delete-node\",\n            payload: { ids: selectedNodes },\n          });\n        }\n      },\n    },\n    h(HighlightedText, {\n      text,\n      allTags,\n      allowOverlap,\n      dispatch,\n      selectedNodes,\n      viewOnly,\n      matchLinks,\n    }),\n  );\n}\n\nfunction createTagFromSelection({\n  container,\n}: {\n  container: HTMLElement | null;\n}) {\n  const selection = window.getSelection();\n  if (\n    !selection ||\n    selection.isCollapsed ||\n    selection.rangeCount === 0 ||\n    !container\n  )\n    return null;\n\n  const range = selection.getRangeAt(0);\n\n  if (\n    !container.contains(range.startContainer) ||\n    !container.contains(range.endContainer)\n  ) {\n    return null;\n  }\n\n  const preRange = document.createRange();\n  preRange.setStart(container, 0);\n  preRange.setEnd(range.startContainer, range.startOffset);\n  const start = preRange.toString().length;\n\n  const selectedText = range.toString();\n  const end = start + selectedText.length;\n\n  return {\n    start,\n    end,\n    text: selectedText,\n  };\n}\n\nfunction addTag({ tag, dispatch, text, allTags, allowOverlap }) {\n  let { start, end } = tag;\n  // snap to text\n  if (text[end - 1] != \" \") {\n    // double clicking word overselects by one, shouldn't increase to next word\n    while (start > 0 && /\\w/.test(text[start - 1])) {\n      start--;\n    }\n    while (end < text.length && /\\w/.test(text[end])) {\n      end++;\n    }\n  }\n\n  let payload = { start, end, text: text.slice(start, end) };\n\n  if (payload.text.trim() === \"\") {\n    console.log(\"Blank tag found, ignoring\");\n    return;\n  }\n\n  const duplicate = allTags.find(\n    (t) =>\n      t.start === payload.start &&\n      (t.end === payload.end || t.end === payload.end - 1),\n  );\n\n  if (duplicate) {\n    console.log(\"Duplicate tag found, ignoring\");\n    return;\n  }\n\n  if (payload.text.endsWith(\" \")) {\n    payload.text = payload.text.slice(0, -1);\n    payload.end -= 1;\n  }\n\n  const inside = allTags.some(\n    (t) => t.start <= payload.start && t.end >= payload.end,\n  );\n\n  const overlap = allTags.some(\n    (t) => t.start < payload.end && t.end > payload.start,\n  );\n\n  if ((inside || overlap) && !allowOverlap) {\n    console.log(\"Tag is inside another tag, ignoring\");\n    return;\n  }\n\n  dispatch({ type: \"create-node\", payload });\n}\n\nfunction nestHighlights(text: string, tags: AnnotateBlendTag[]) {\n  const events: Array<{\n    pos: number;\n    type: \"start\" | \"end\";\n    tag: AnnotateBlendTag;\n  }> = [];\n\n  for (const tag of tags) {\n    events.push({ pos: tag.start, type: \"start\", tag });\n    events.push({ pos: tag.end, type: \"end\", tag });\n  }\n\n  events.sort((a, b) => {\n    if (a.pos !== b.pos) return a.pos - b.pos;\n    if (a.type === \"end\" && b.type === \"start\") return -1;\n    if (a.type === \"start\" && b.type === \"end\") return 1;\n    return 0;\n  });\n\n  const root = { children: [], textStart: 0 };\n  const stack = [root];\n  let lastPos = 0;\n\n  for (const { pos, type, tag } of events) {\n    const parent = stack[stack.length - 1];\n\n    if (pos > lastPos) {\n      const slice = text.slice(lastPos, pos);\n      parent.children.push(slice);\n    }\n\n    if (type === \"start\") {\n      const newNode = { tag, children: [], textStart: pos };\n      parent.children.push(newNode);\n      stack.push(newNode);\n    } else {\n      stack.pop();\n    }\n\n    lastPos = pos;\n  }\n\n  if (lastPos < text.length) {\n    stack[stack.length - 1].children.push(text.slice(lastPos));\n  }\n\n  return root;\n}\n\nfunction renderNode(\n  node: any,\n  dispatch: TreeDispatch,\n  selectedNodes: number[],\n  parentSelected: boolean,\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  },\n  viewOnly?: boolean,\n): any {\n  if (typeof node === \"string\") return node;\n\n  const { tag, children } = node;\n  const isSelected = selectedNodes?.includes(tag.id);\n  const showBorder = selectedNodes.length === 0 || isSelected;\n  const match = tag.match;\n\n  const style = {\n    ...tag,\n    zIndex: parentSelected ? -1 : 1,\n    border:\n      \"1px solid \" +\n      (match != undefined && matchLinks\n        ? \"orange\"\n        : showBorder\n          ? tag.color\n          : \"transparent\"),\n    margin: \"-1px\",\n  };\n\n  let moveText = [];\n  if (isSelected) {\n    for (const key in children) {\n      if (Object.prototype.hasOwnProperty.call(children, key)) {\n        const child = children[key];\n        if (child?.tag) {\n          moveText.push(child.children[0]);\n        } else {\n          moveText.push(child);\n        }\n      }\n    }\n  }\n\n  const tagComponent = h(\n    \"span\",\n    {\n      onMouseEnter: (e: MouseEvent) => {\n        e.stopPropagation();\n      },\n      className: \"highlight\" + (!viewOnly || match ? \" clickable\" : \"\"),\n      style,\n      onClick: (e: MouseEvent) => {\n        e.stopPropagation();\n        if (\n          e.ctrlKey ||\n          e.metaKey ||\n          (selectedNodes[0] === tag.id && selectedNodes.length === 1)\n        ) {\n          // Toggle selection on ctrl/cmd click or when node is only selected node\n          e.stopPropagation();\n          dispatch({\n            type: \"toggle-node-selected\",\n            payload: { ids: [tag.id] },\n          });\n        } else if (e.shiftKey && selectedNodes.length > 0) {\n          // Select range from last selected node to this one\n          const lastSelected = selectedNodes[selectedNodes.length - 1];\n\n          dispatch({\n            type: \"select-range\",\n            payload: { ids: [lastSelected, tag.id] },\n          });\n        } else {\n          dispatch({\n            type: \"select-node\",\n            payload: { ids: [tag.id] },\n          });\n        }\n      },\n    },\n    isSelected\n      ? moveText.flat()\n      : children.map((child: any, i: number) =>\n          renderNode(\n            child,\n            dispatch,\n            selectedNodes,\n            isSelected,\n            matchLinks,\n            viewOnly,\n          ),\n        ),\n  );\n\n  if (viewOnly && match) {\n    return h(\n      Popover,\n      {\n        content: h(\"div.match-link\", h(MatchTag, { data: match, matchLinks })),\n        interactionKind: \"hover\",\n      },\n      tagComponent,\n    );\n  }\n\n  return tagComponent;\n}\n\nexport function HighlightedText(props: {\n  text: string;\n  allTags: AnnotateBlendTag[];\n  lineHeight: string;\n  allowOverlap?: boolean;\n  dispatch: TreeDispatch;\n  selectedNodes: number[];\n  matchLinks?: {\n    lithology: string;\n    strat_name: string;\n    lith_att: string;\n  };\n  viewOnly?: boolean;\n}) {\n  const {\n    text,\n    allTags = [],\n    dispatch,\n    selectedNodes,\n    allowOverlap,\n    matchLinks,\n    viewOnly,\n  } = props;\n\n  const tree = nestHighlights(text, allTags);\n\n  const spanRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const handleMouseUp = () => {\n      const tag = createTagFromSelection({ container: spanRef.current });\n      if (!tag) return;\n      addTag({ tag, dispatch, text, allTags, allowOverlap });\n    };\n\n    document.addEventListener(\"mouseup\", handleMouseUp);\n    return () => {\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [text, allTags, dispatch, allowOverlap]);\n\n  return h(\n    \"span\",\n    { ref: spanRef },\n    tree.children.map((child: any, i: number) =>\n      renderNode(child, dispatch, selectedNodes, false, matchLinks, viewOnly),\n    ),\n  );\n}\n"],"names":[],"mappings":"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"}