@macrostrat/feedback-components 1.0.1 → 1.1.1

package/src/feedback/node.ts

@@ -47,6 +47,12 @@ function Node({ node, style, dragHandle, tree, matchComponent }: any) {
 
   const dispatch = useTreeDispatch();
 
+  // console.log("Node render", node.data, highlighted, active);
+
+  if (!node.data?.type) {
+    node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };
+  }
+
   return h(
     "div.node",
     { style, ref: dragHandle },
@@ -58,7 +64,7 @@ function Node({ node, style, dragHandle, tree, matchComponent }: any) {
       onClickType() {
         dispatch({ type: "toggle-entity-type-selector" });
       },
-    })
+    }),
   );
 }
 

package/src/feedback/text-visualizer.ts

@@ -1,11 +1,11 @@
-import { AnnotateBlendTag, TextAnnotateBlend } from "react-text-annotate-blend";
+import { AnnotateBlendTag } from "react-text-annotate-blend";
 import { InternalEntity } from "./types";
 import { TreeDispatch } from "./edit-state";
 import styles from "./feedback.module.sass";
 import hyper from "@macrostrat/hyper";
 import { buildHighlights, getTagStyle } from "../extractions";
 import { Highlight } from "../extractions/types";
-import { useCallback } from "react";
+import { useEffect, useRef } from "react";
 
 const h = hyper.styled(styles);
 
@@ -15,14 +15,15 @@ export interface FeedbackTextProps {
   nodes: InternalEntity[];
   updateNodes: (nodes: string[]) => void;
   dispatch: TreeDispatch;
+  lineHeight: string;
+  allowOverlap?: boolean;
 }
 
 function buildTags(
   highlights: Highlight[],
-  selectedNodes: number[]
+  selectedNodes: number[],
 ): AnnotateBlendTag[] {
   let tags: AnnotateBlendTag[] = [];
-
   // If entity ID has already been seen, don't add it again
   const entities = new Set<number>();
 
@@ -32,23 +33,24 @@ function buildTags(
 
     const highlighted = isHighlighted(highlight, selectedNodes);
     const active = isActive(highlight, selectedNodes);
+    const tagStyle = getTagStyle(highlight.backgroundColor, {
+      highlighted,
+      active,
+    });
 
-    tags.push({
-      markStyle: {
-        ...getTagStyle(highlight.backgroundColor, {
-          highlighted,
-          active,
-        }),
-        borderRadius: "0.2em",
-        padding: "0.1em",
-        borderWidth: "1.5px",
-        cursor: "pointer",
-      },
+    const tag = {
+      color: tagStyle.color,
       tagStyle: {
         display: "none",
       },
+      markStyle: {
+        backgroundColor: tagStyle.backgroundColor,
+      },
       ...highlight,
-    });
+      backgroundColor: tagStyle.backgroundColor,
+    };
+
+    tags.push(tag);
 
     entities.add(highlight.id);
   }
@@ -71,46 +73,281 @@ function isHighlighted(tag: Highlight, selectedNodes: number[]) {
 
 export function FeedbackText(props: FeedbackTextProps) {
   // Convert input to tags
-  const { text, selectedNodes, nodes, dispatch } = props;
-  let allTags: AnnotateBlendTag[] = buildTags(
+  const { text, selectedNodes, nodes, dispatch, allowOverlap } = props;
+  const allTags: AnnotateBlendTag[] = buildTags(
     buildHighlights(nodes, null),
-    selectedNodes
+    selectedNodes,
   );
 
-  const onChange = useCallback(
-    (tags) => {
-      // New tags
-      console.log(tags);
-      const newTags = tags.filter((d) => !("id" in d));
-      if (newTags.length > 0) {
-        const { start, end } = newTags[0];
-        const payload = { start, end, text: text.slice(start, end) };
-        dispatch({ type: "create-node", payload });
-        return;
-      }
+  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,
+    }),
+  );
+}
+
+function createTagFromSelection({
+  container,
+}: {
+  container: HTMLElement | null;
+}) {
+  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;
 
-      const tagIDs = new Set(tags.map((d) => d.id));
-      const removedIds = allTags.map((d) => d.id).filter((d) => !tagIDs.has(d));
+  return {
+    start,
+    end,
+    text: selectedText,
+  };
+}
+
+function addTag({ tag, dispatch, text, allTags, allowOverlap }) {
+  let { start, end } = tag;
+  // snap to text
+  if (text[end - 1] != " ") {
+    // double clicking word overselects by one, shouldn't increase to next word
+    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;
+  }
 
-      /* 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 },
-        });
+  dispatch({ type: "create-node", payload });
+}
+
+function nestHighlights(text: string, tags: AnnotateBlendTag[]) {
+  const events: Array<{
+    pos: number;
+    type: "start" | "end";
+    tag: AnnotateBlendTag;
+  }> = [];
+
+  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: any,
+  dispatch: TreeDispatch,
+  selectedNodes: number[],
+  parentSelected: boolean,
+): any {
+  if (typeof node === "string") return node;
+
+  const { tag, children } = node;
+  const isSelected = selectedNodes?.includes(tag.id);
+  const showBorder = selectedNodes.length === 0 || isSelected;
+
+  const style = {
+    ...tag,
+    zIndex: parentSelected ? -1 : 1,
+    border: "1px solid " + (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);
+        }
       }
+    }
+  }
+
+  return h(
+    "span",
+    {
+      className: "highlight",
+      style,
+      onClick: (e: MouseEvent) => {
+        e.stopPropagation();
+        if (
+          e.ctrlKey ||
+          e.metaKey ||
+          (selectedNodes[0] === tag.id && selectedNodes.length === 1)
+        ) {
+          // Toggle selection on ctrl/cmd click or when node is only selected node
+          e.stopPropagation();
+          dispatch({
+            type: "toggle-node-selected",
+            payload: { ids: [tag.id] },
+          });
+        } else if (e.shiftKey && selectedNodes.length > 0) {
+          // Select range from last selected node to this one
+          const lastSelected = selectedNodes[selectedNodes.length - 1];
+
+          dispatch({
+            type: "select-range",
+            payload: { ids: [lastSelected, tag.id] },
+          });
+        } else {
+          dispatch({
+            type: "select-node",
+            payload: { ids: [tag.id] },
+          });
+        }
+      },
     },
-    [allTags, text]
+    isSelected
+      ? moveText.flat()
+      : children.map((child: any, i: number) =>
+          renderNode(child, dispatch, selectedNodes, isSelected),
+        ),
   );
+}
 
-  return h(TextAnnotateBlend, {
-    style: {
-      fontSize: "1.2em",
-    },
-    className: "feedback-text",
-    content: text,
-    onChange,
-    value: allTags,
-  });
+export function HighlightedText(props: {
+  text: string;
+  allTags: AnnotateBlendTag[];
+  lineHeight: string;
+  allowOverlap?: boolean;
+  dispatch: TreeDispatch;
+  selectedNodes: number[];
+}) {
+  const { text, allTags = [], dispatch, selectedNodes, allowOverlap } = props;
+
+  const tree = nestHighlights(text, allTags);
+
+  const spanRef = useRef<HTMLSpanElement>(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: any, i: number) =>
+      renderNode(child, dispatch, selectedNodes, false),
+    ),
+  );
 }

package/src/feedback/type-selector/index.ts

@@ -39,7 +39,7 @@ const TagListItem: React.ComponentType<TagItemProps<T>> = (props) => {
     [
       h("div.swatch", { style: { backgroundColor: item.color } }),
       h("div.item", {}, item.name),
-    ]
+    ],
   );
 };
 
@@ -49,16 +49,18 @@ interface OmniboxProps<T> extends BoxLifecycleProps<T> {
   items: T[];
   selectedItem: T;
   onSelectItem: (t: T) => void;
+  onQueryChange: (query: string) => void;
   listItemComponent?: React.ComponentType<TagItemProps<T>>;
 }
 
 export function OmniboxSelector<T>(props: OmniboxProps<T>) {
   /** A general omnibox for annotation types */
-  const { onSelectItem, items, isOpen, onClose } = props;
+  const { onSelectItem, items, isOpen, onClose, onQueryChange } = props;
 
   return h(Omnibar, {
     onItemSelect: onSelectItem,
     items,
+    onQueryChange,
     resetOnSelect: false,
     isOpen,
     onClose,

package/dist/esm/edit-state.c39d8466.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/feedback-components/src/feedback/edit-state.ts"],"sourcesContent":["import { TreeData } from \"./types\";\nimport { createContext, Dispatch, useContext, useReducer } from \"react\";\nimport update, { Spec } from \"immutability-helper\";\nimport { EntityType } from \"../extractions/types\";\n\nexport enum ViewMode {\n  Tree = \"tree\",\n  Graph = \"graph\",\n}\n\ninterface TreeState {\n  initialTree: TreeData[];\n  tree: TreeData[];\n  selectedNodes: number[];\n  entityTypesMap: Map<number, EntityType>;\n  selectedEntityType: EntityType;\n  lastInternalId: number;\n  isSelectingEntityType: boolean;\n  viewMode: ViewMode;\n}\n\ntype TextRange = {\n  start: number;\n  end: number;\n  text: string;\n};\n\ntype TreeAction =\n  | {\n      type: \"move-node\";\n      payload: { dragIds: number[]; parentId: number; index: number };\n    }\n  | { type: \"delete-node\"; payload: { ids: number[] } }\n  | { type: \"select-node\"; payload: { ids: number[] } }\n  | { type: \"toggle-node-selected\"; payload: { ids: number[] } }\n  | { type: \"set-view-mode\"; payload: ViewMode }\n  | { type: \"create-node\"; payload: TextRange }\n  | { type: \"select-entity-type\"; payload: EntityType }\n  | { type: \"toggle-entity-type-selector\"; payload?: boolean | null }\n  | { type: \"deselect\" }\n  | { type: \"reset\" };\n\nexport type TreeDispatch = Dispatch<TreeAction>;\n\nexport function useUpdatableTree(\n  initialTree: TreeData[],\n  entityTypes: Map<number, EntityType>\n): [TreeState, TreeDispatch] {\n  // Get the first entity type\n  const type = entityTypes.values().next().value;\n\n  return useReducer(treeReducer, {\n    initialTree,\n    tree: initialTree,\n    selectedNodes: [],\n    entityTypesMap: entityTypes,\n    selectedEntityType: type,\n    lastInternalId: 0,\n    isSelectingEntityType: false,\n    viewMode: ViewMode.Tree,\n  });\n}\n\nexport const TreeDispatchContext = createContext<TreeDispatch | null>(null);\n\nexport function useTreeDispatch() {\n  const dispatch = useContext(TreeDispatchContext);\n  if (dispatch == null) {\n    throw new Error(\"No dispatch context available\");\n  }\n  return dispatch;\n}\n\nfunction treeReducer(state: TreeState, action: TreeAction) {\n  console.log(action);\n  switch (action.type) {\n    case \"move-node\":\n      // For each node in the tree, if the node is in the dragIds, remove it from the tree and collect it\n      const [newTree, removedNodes] = removeNodes(\n        state.tree,\n        action.payload.dragIds\n      );\n\n      let keyPath: (number | \"children\")[] = [];\n      if (action.payload.parentId) {\n        keyPath = findNode(newTree, action.payload.parentId);\n        keyPath.push(\"children\");\n      }\n\n      // Add removed nodes to the new tree at the correct location\n      let updateSpec = buildNestedSpec(keyPath, {\n        $splice: [[action.payload.index, 0, ...removedNodes]],\n      });\n\n      return { ...state, tree: update(newTree, updateSpec) };\n    case \"delete-node\":\n      // For each node in the tree, if the node is in the ids, remove it from the tree\n      const [newTree2, _removedNodes] = removeNodes(\n        state.tree,\n        action.payload.ids\n      );\n      // Get children of the removed nodes\n      // If children are not present elsewhere in the tree, insert them\n\n      const children = _removedNodes\n        .flatMap((node) => node.children ?? [])\n        .filter((child) => !nodeIsInTree(newTree2, child.id));\n\n      // Reset the selection\n\n      return {\n        ...state,\n        tree: [...newTree2, ...children],\n        selectedNodes: state.selectedNodes.filter(\n          (id) => !action.payload.ids.includes(id)\n        ),\n      };\n    case \"select-node\":\n      const { ids } = action.payload;\n      return { ...state, selectedNodes: ids };\n    // otherwise fall through to toggle-node-selected for a single ID\n    case \"toggle-node-selected\":\n      const nodesToAdd = action.payload.ids.filter(\n        (id) => !state.selectedNodes.includes(id)\n      );\n      const nodesToKeep = state.selectedNodes.filter(\n        (id) => !action.payload.ids.includes(id)\n      );\n      return { ...state, selectedNodes: [...nodesToKeep, ...nodesToAdd] };\n\n    case \"create-node\":\n      const newId = state.lastInternalId - 1;\n      const { text, start, end } = action.payload;\n      const node: TreeData = {\n        id: newId,\n        name: text,\n        children: [],\n        indices: [start, end],\n        type: state.selectedEntityType,\n      };\n\n      return {\n        ...state,\n        tree: [...state.tree, node],\n        selectedNodes: [newId],\n        lastInternalId: newId,\n      };\n\n    /** Entity type selection */\n    case \"toggle-entity-type-selector\":\n      return {\n        ...state,\n        isSelectingEntityType: action.payload ?? !state.isSelectingEntityType,\n      };\n    case \"select-entity-type\": {\n      // For each selected node, update the type\n      let newTree2 = state.tree;\n      for (let id of state.selectedNodes) {\n        const keyPath = findNode(state.tree, id);\n        const nestedSpec = buildNestedSpec(keyPath, {\n          type: { $set: action.payload },\n        });\n        newTree2 = update(newTree2, nestedSpec);\n      }\n\n      return {\n        ...state,\n        tree: newTree2,\n        selectedEntityType: action.payload,\n      };\n    }\n    case \"deselect\":\n      return { ...state, selectedNodes: [] };\n    case \"reset\":\n      return {\n        ...state,\n        tree: state.initialTree,\n        selectedNodes: [],\n      };\n    case \"set-view-mode\":\n      return { ...state, viewMode: action.payload };\n  }\n}\n\nfunction nodeIsInTree(tree: TreeData[], id: number): boolean {\n  for (let node of tree) {\n    if (node.id == id) {\n      return true;\n    } else if (node.children) {\n      if (nodeIsInTree(node.children, id)) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\nfunction buildNestedSpec(\n  keyPath: (number | \"children\")[],\n  innerSpec: Spec<any>\n): Spec<TreeData[]> {\n  // Build a nested object from a key path\n\n  let spec = innerSpec;\n  for (let i = keyPath.length - 1; i >= 0; i--) {\n    spec = { [keyPath[i]]: spec };\n  }\n  return spec as any;\n  // Since we don't have a \"children\" key at the root, we make the top-level spec an array\n}\n\nfunction findNode(\n  tree: TreeData[],\n  id: number\n): (number | \"children\")[] | null {\n  // Find the index of the node with the given id in the tree, returning the key path\n  for (let i = 0; i < tree.length; i++) {\n    if (tree[i].id == id) {\n      return [i];\n    } else if (tree[i].children) {\n      let path = findNode(tree[i].children, id);\n      if (path != null) {\n        return [i, \"children\", ...path];\n      }\n    }\n  }\n  return null;\n}\n\nfunction removeNodes(\n  tree: TreeData[],\n  ids: number[]\n): [TreeData[], TreeData[]] {\n  /** Remove nodes with the given ids from the tree and return the new tree and the removed nodes */\n  let newTree: TreeData[] = [];\n  let removedNodes: TreeData[] = [];\n\n  for (let node of tree) {\n    if (ids.includes(node.id)) {\n      removedNodes.push(node);\n    } else {\n      // Recurse into children\n      if (node.children) {\n        let [newChildren, removedChildren] = removeNodes(node.children, ids);\n        node = { ...node, children: newChildren };\n        removedNodes.push(...removedChildren);\n      }\n      newTree.push(node);\n    }\n  }\n\n  return [newTree, removedNodes];\n}\n\nexport interface EntityOutput {\n  id: number;\n  type: number | null;\n  txt_range: number[][];\n  name: string;\n  match: any | null;\n  reasoning: string | null;\n}\n\nexport interface GraphData {\n  nodes: EntityOutput[];\n  edges: { source: number; dest: number }[];\n}\n\nexport function treeToGraph(tree: TreeData[]): GraphData {\n  // Convert the tree to a graph\n  let nodes: EntityOutput[] = [];\n  let edges: { source: number; dest: number }[] = [];\n  const nodeMap = new Map<number, TreeData>();\n\n  for (let node of tree) {\n    // If we've already found an instance of this node, we don't need to record\n    // it again\n    if (nodeMap.has(node.id)) {\n      continue;\n    }\n\n    const { indices, id, name } = node;\n\n    const nodeData: EntityOutput = {\n      id,\n      type: node.type.id,\n      name,\n      txt_range: [indices],\n      reasoning: null,\n      match: node.match,\n    };\n\n    nodeMap.set(node.id, node);\n    nodes.push(nodeData);\n\n    if (node.children) {\n      for (let child of node.children) {\n        edges.push({ source: node.id, dest: child.id });\n      }\n\n      // Now process the children\n      const { nodes: childNodes, edges: childEdges } = treeToGraph(\n        node.children\n      );\n      nodes.push(...childNodes);\n      edges.push(...childEdges);\n    }\n  }\n\n  return { nodes, edges };\n}\n"],"names":[],"version":3,"file":"edit-state.c39d8466.js.map"}

package/dist/esm/extractions.65bb73cc.js.map

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