@macrostrat/feedback-components 1.0.0

package/src/feedback/node.ts

@@ -0,0 +1,65 @@
+import { NodeApi, TreeApi } from "react-arborist";
+import { TreeData } from "./types";
+import { EntityTag } from "../extractions";
+import { useTreeDispatch } from "./edit-state";
+import styles from "./feedback.module.sass";
+import hyper from "@macrostrat/hyper";
+
+const h = hyper.styled(styles);
+
+function isSelected(searchNode: TreeData, treeNode: TreeData) {
+  return searchNode.id == treeNode.id;
+  // We could also select children of the search node here if we wanted to
+}
+
+function isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {
+  // 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 (isSelected(node.data, selectedNode.data)) {
+      return true;
+    }
+  }
+
+  // Check if the parent node is highlighted
+  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {
+    return true;
+  }
+
+  return false;
+}
+
+function isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {
+  for (const selectedNode of tree.selectedNodes) {
+    if (isSelected(node.data, selectedNode.data)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function Node({ node, style, dragHandle, tree, matchComponent }: any) {
+  let highlighted: boolean = isNodeHighlighted(node, tree);
+  let active: boolean = isNodeActive(node, tree);
+
+  const dispatch = useTreeDispatch();
+
+  return h(
+    "div.node",
+    { style, ref: dragHandle },
+    h(EntityTag, {
+      data: node.data,
+      active,
+      highlighted,
+      matchComponent,
+      onClickType() {
+        dispatch({ type: "toggle-entity-type-selector" });
+      },
+    })
+  );
+}
+
+export default Node;

package/src/feedback/text-visualizer.ts

@@ -0,0 +1,116 @@
+import { AnnotateBlendTag, TextAnnotateBlend } 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";
+
+const h = hyper.styled(styles);
+
+export interface FeedbackTextProps {
+  text: string;
+  selectedNodes: number[];
+  nodes: InternalEntity[];
+  updateNodes: (nodes: string[]) => void;
+  dispatch: TreeDispatch;
+}
+
+function buildTags(
+  highlights: Highlight[],
+  selectedNodes: number[]
+): AnnotateBlendTag[] {
+  let tags: AnnotateBlendTag[] = [];
+
+  // If entity ID has already been seen, don't add it again
+  const entities = new Set<number>();
+
+  for (const highlight of highlights) {
+    // Don't add multiply-linked entities multiple times
+    if (entities.has(highlight.id)) continue;
+
+    const highlighted = isHighlighted(highlight, selectedNodes);
+    const active = isActive(highlight, selectedNodes);
+
+    tags.push({
+      markStyle: {
+        ...getTagStyle(highlight.backgroundColor, {
+          highlighted,
+          active,
+        }),
+        borderRadius: "0.2em",
+        padding: "0.1em",
+        borderWidth: "1.5px",
+        cursor: "pointer",
+      },
+      tagStyle: {
+        display: "none",
+      },
+      ...highlight,
+    });
+
+    entities.add(highlight.id);
+  }
+
+  return tags;
+}
+
+function isActive(tag: Highlight, selectedNodes: number[]) {
+  return selectedNodes.includes(tag.id);
+}
+
+function isHighlighted(tag: Highlight, selectedNodes: number[]) {
+  if (selectedNodes.length === 0) return true;
+  return (
+    (selectedNodes.includes(tag.id) ||
+      tag.parents?.some((d) => selectedNodes.includes(d))) ??
+    false
+  );
+}
+
+export function FeedbackText(props: FeedbackTextProps) {
+  // Convert input to tags
+  const { text, selectedNodes, nodes, dispatch } = props;
+  let allTags: AnnotateBlendTag[] = buildTags(
+    buildHighlights(nodes, null),
+    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;
+      }
+
+      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 h(TextAnnotateBlend, {
+    style: {
+      fontSize: "1.2em",
+    },
+    className: "feedback-text",
+    content: text,
+    onChange,
+    value: allTags,
+  });
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Entity type selector
+ */
+
+import styles from "./main.module.sass";
+import hyper from "@macrostrat/hyper";
+
+import classNames from "classnames";
+import React from "react";
+import { Omnibar, OmnibarProps } from "@blueprintjs/select";
+import "@blueprintjs/select/lib/css/blueprint-select.css";
+
+const h = hyper.styled(styles);
+
+interface TagItemProps<T> {
+  selected: boolean;
+  active: boolean;
+  className?: string;
+  item: T;
+
+  onSelect(t: T): void;
+
+  children?: React.ReactElement;
+}
+
+const TagListItem: React.ComponentType<TagItemProps<T>> = (props) => {
+  /** Render a tag for the omnibox list */
+  let { active, selected, className, onSelect, item, children } = props;
+  className = classNames({ active, selected }, className);
+  const onClick = () => onSelect(item);
+
+  return h(
+    "div.item-container",
+    {
+      key: item.id,
+      className,
+      onClick,
+    },
+    [
+      h("div.swatch", { style: { backgroundColor: item.color } }),
+      h("div.item", {}, item.name),
+    ]
+  );
+};
+
+type BoxLifecycleProps<T> = Pick<OmnibarProps<T>, "onClose" | "isOpen">;
+
+interface OmniboxProps<T> extends BoxLifecycleProps<T> {
+  items: T[];
+  selectedItem: T;
+  onSelectItem: (t: T) => 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;
+
+  return h(Omnibar, {
+    onItemSelect: onSelectItem,
+    items,
+    resetOnSelect: false,
+    isOpen,
+    onClose,
+    itemRenderer(item: T, { handleClick, modifiers }) {
+      return h(TagListItem, {
+        key: item.id,
+        item,
+        onSelect: handleClick,
+        active: modifiers.active,
+        selected: modifiers.active,
+      });
+    },
+  });
+}

package/src/feedback/type-selector/main.module.sass

@@ -0,0 +1,13 @@
+.item-container
+  min-height: 40px
+  display: flex
+  align-items: center
+  gap: 1em
+
+  &.selected
+    background-color: var(--panel-background-color)
+
+.swatch
+  width: 30px
+  height: 30px
+  border-radius: 4px

package/src/feedback/types.ts

@@ -0,0 +1,76 @@
+import { EntityExt } from "../extractions/types";
+
+export interface InternalEntity extends EntityExt {
+  term_type: string;
+  txt_range: number[][];
+  children: InternalEntity[];
+  orig_id: number;
+  id: string;
+}
+
+export interface TextData {
+  preprocessor_id: string;
+  extraction_pipeline_id: string;
+  model_id: string;
+  paper_id: string;
+  hashed_text: string;
+  weaviate_id: string;
+  paragraph_text: string;
+}
+
+export interface Result {
+  text: TextData;
+  entities?: InternalEntity[];
+}
+
+export type TreeData = EntityExt;
+
+export interface ServerRelationship {
+  src_name: string;
+  dst_name: string;
+  relationship_type: string;
+}
+
+export interface ServerEntity {
+  entity_name: string;
+  entity_type: string;
+}
+
+export interface ServerResponse {
+  text: TextData;
+  relationships: ServerRelationship[];
+  just_entities: ServerEntity[];
+}
+
+export interface RunText {
+  preprocessor_id: string;
+  paper_id: string;
+  hashed_text: string;
+  weaviate_id: string;
+  paragraph_text: string;
+}
+
+export interface RunRelationship {
+  src: string;
+  dst: string;
+  relationship_type: string;
+}
+
+export interface RunEntity {
+  entity: string;
+  entity_type: string;
+}
+
+export interface RunSource {
+  text: RunText;
+  relationships: RunRelationship[];
+  just_entities: RunEntity[];
+}
+
+export interface RunRecord {
+  run_id: string;
+  extraction_pipeline_id: string;
+  user_name: string;
+  model_id: string;
+  results: RunSource[];
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./extractions";
+export * from "./feedback";

package/stories/feedback.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FeedbackComponent } from "../src";
+import { data, entityTypes } from "./test-data";
+import h from "@macrostrat/hyper";
+
+function FeedbackInterface({ data, types }) {
+  const { entities = [], paragraph_text, model, model_run, source_text } = data;
+
+  return h(FeedbackComponent, {
+    entities,
+    text: paragraph_text,
+    model,
+    entityTypes: createMap(types),
+    sourceTextID: source_text,
+    runID: model_run,
+  });
+}
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<any> = {
+  title: "Text extractions/Text extraction",
+  component: FeedbackInterface,
+};
+
+export default meta;
+
+export const Primary: StoryObj<{}> = {
+  args: {
+    data,
+    types: entityTypes,
+  },
+};
+
+function createMap(arr) {
+  const out = new Map();
+  for (const d of arr) {
+    out.set(d.id, d);
+  }
+  return out;
+}