@macrostrat/feedback-components 1.0.1 → 1.1.1

package/src/extractions/index.ts

@@ -5,6 +5,7 @@ import type { Entity, EntityExt, Highlight, EntityType } from "./types";
 import { CSSProperties } from "react";
 import { asChromaColor } from "@macrostrat/color-utils";
 import hyper from "@macrostrat/hyper";
+import { useDarkMode } from "@macrostrat/ui-components";
 
 export type { Entity, EntityExt };
 
@@ -12,7 +13,7 @@ const h = hyper.styled(styles);
 
 export function buildHighlights(
   entities: EntityExt[],
-  parent: EntityExt | null
+  parent: EntityExt | null,
 ): Highlight[] {
   let highlights = [];
   let parents = [];
@@ -25,8 +26,8 @@ export function buildHighlights(
       start: entity.indices[0],
       end: entity.indices[1],
       text: entity.name,
-      backgroundColor: entity.type.color ?? "#ddd",
-      tag: entity.type.name,
+      backgroundColor: entity.type?.color,
+      tag: entity.type?.name ?? "lith",
       id: entity.id,
       parents,
     });
@@ -40,17 +41,21 @@ export function enhanceData(extractionData, models, entityTypes) {
     ...extractionData,
     model: models.get(extractionData.model_id),
     entities: extractionData.entities?.map((d) =>
-      enhanceEntity(d, entityTypes)
+      enhanceEntity(d, entityTypes),
     ),
   };
 }
 
 export function getTagStyle(
   baseColor: string,
-  options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean }
+  options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean },
 ): CSSProperties {
-  const _baseColor = asChromaColor(baseColor ?? "#ddd");
-  const { highlighted = true, inDarkMode = false, active = false } = options;
+  const _baseColor = asChromaColor(baseColor ?? "#fff");
+  const {
+    highlighted = true,
+    inDarkMode = useDarkMode().isEnabled,
+    active = false,
+  } = options;
 
   let mixAmount = highlighted ? 0.8 : 0.5;
   let backgroundAlpha = highlighted ? 0.8 : 0.2;
@@ -60,27 +65,38 @@ export function getTagStyle(
     backgroundAlpha = 1;
   }
 
-  const mixTarget = inDarkMode ? "white" : "black";
+  const mixTarget = "black";
 
-  const color = _baseColor.mix(mixTarget, mixAmount).css();
+  const color = active ? "#000" : _baseColor.mix(mixTarget, mixAmount).hex();
   const borderColor = highlighted
-    ? _baseColor.mix(mixTarget, mixAmount / 2).css()
+    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()
     : "transparent";
 
+  let backgroundColor = active
+    ? _baseColor.alpha(backgroundAlpha).hex()
+    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());
+
+  // handle white backgrounds in light mode
+  if (!inDarkMode && backgroundColor === "#ffffff") {
+    console.log("Adjusting background color for light mode:", backgroundColor);
+    backgroundColor = "#f0f0f0";
+  }
+
   return {
     color,
-    backgroundColor: _baseColor.alpha(backgroundAlpha).css(),
+    backgroundColor,
     boxSizing: "border-box",
     borderStyle: "solid",
     borderColor,
-    borderWidth: "1px",
+    borderWidth: "1.5px",
     fontWeight: active ? "bold" : "normal",
+    fontSize: "0.9em",
   };
 }
 
 function enhanceEntity(
   entity: Entity,
-  entityTypes: Map<number, EntityType>
+  entityTypes: Map<number, EntityType>,
 ): EntityExt {
   return {
     ...entity,
@@ -90,8 +106,8 @@ function enhanceEntity(
 }
 
 function addColor(entityType: EntityType, match = false) {
-  const color = asChromaColor(entityType.color ?? "#ddd").brighten(
-    match ? 1 : 2
+  const color = asChromaColor(entityType.color ?? "#fff").brighten(
+    match ? 1 : 2,
   );
 
   return { ...entityType, color: color.css() };
@@ -113,7 +129,7 @@ export function ExtractionContext({
     h(ModelInfo, { data: data.model }),
     h(
       "ul.entities",
-      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent }))
+      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),
     ),
   ]);
 }
@@ -140,15 +156,16 @@ export function EntityTag({
   matchComponent = null,
 }: EntityTagProps) {
   const { name, type, match } = data;
+
   const className = classNames(
     {
       matched: match != null,
-      type: data.type.name,
+      type: data.type?.name ?? "lith",
     },
-    "entity"
+    "entity",
   );
 
-  const style = getTagStyle(type.color ?? "#aaaaaa", { highlighted, active });
+  const style = getTagStyle(type?.color, { highlighted, active });
 
   let _matchLink = null;
   if (match != null && matchComponent != null) {
@@ -168,7 +185,7 @@ export function EntityTag({
           }
         },
       },
-      [type.name, _matchLink]
+      [type?.name, _matchLink],
     ),
   ]);
 }
@@ -187,7 +204,7 @@ function ExtractionInfo({
     h.if(children.length > 0)([
       h(
         "ul.children",
-        children.map((d) => h(ExtractionInfo, { data: d, matchComponent }))
+        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),
       ),
     ]),
   ]);
@@ -217,3 +234,41 @@ function HighlightedText(props: { text: string; highlights: Highlight[] }) {
   parts.push(text.slice(start));
   return h("span", parts);
 }
+
+function normalizeColor(hex8) {
+  const background = useDarkMode().isEnabled ? "#000000" : "#ffffff";
+
+  const r = parseInt(hex8.slice(1, 3), 16);
+  const g = parseInt(hex8.slice(3, 5), 16);
+  const b = parseInt(hex8.slice(5, 7), 16);
+  const a = parseInt(hex8.slice(7, 9), 16) / 255;
+
+  const bgR = parseInt(background.slice(1, 3), 16);
+  const bgG = parseInt(background.slice(3, 5), 16);
+  const bgB = parseInt(background.slice(5, 7), 16);
+
+  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);
+
+  const blendedR = blend(r, bgR);
+  const blendedG = blend(g, bgG);
+  const blendedB = blend(b, bgB);
+
+  return (
+    "#" +
+    blendedR.toString(16).padStart(2, "0") +
+    blendedG.toString(16).padStart(2, "0") +
+    blendedB.toString(16).padStart(2, "0")
+  );
+}
+
+function isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {
+  if (selectedNodes?.length === 0) return true;
+  return (
+    selectedNodes?.includes(id) ||
+    nodes?.some(
+      (node) =>
+        selectedNodes?.includes(node.id) &&
+        node.children.some((child) => child.id === id),
+    )
+  );
+}

package/src/extractions/types.ts

@@ -1,4 +1,9 @@
-type EntityType = { name: string; color: string; id: number };
+type EntityType = {
+  name: string;
+  color: string;
+  id: number;
+  description?: string;
+};
 type Match = any;
 
 export interface Entity {

package/src/feedback/edit-state.ts

@@ -38,15 +38,26 @@ type TreeAction =
   | { type: "select-entity-type"; payload: EntityType }
   | { type: "toggle-entity-type-selector"; payload?: boolean | null }
   | { type: "deselect" }
-  | { type: "reset" };
+  | { type: "reset" }
+  | { type: "delete-entity-type"; payload: { id: number } }
+  | {
+      type: "add-entity-type";
+      payload: { name: string; description: string; color: string };
+    }
+  | {
+      type: "update-entity-type";
+      payload: { id: number; name: string; description: string; color: string };
+    }
+  | { type: "select-range"; payload: { ids: number[] } };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
 export function useUpdatableTree(
   initialTree: TreeData[],
-  entityTypes: Map<number, EntityType>
+  entityTypes: Map<number, EntityType>,
 ): [TreeState, TreeDispatch] {
   // Get the first entity type
+  // issue: grabs second entity instead of selected one
   const type = entityTypes.values().next().value;
 
   return useReducer(treeReducer, {
@@ -72,13 +83,84 @@ export function useTreeDispatch() {
 }
 
 function treeReducer(state: TreeState, action: TreeAction) {
-  console.log(action);
   switch (action.type) {
+    case "add-entity-type": {
+      // Add a new entity type to the map
+      const { name, description, color } = action.payload;
+      const newId = state.lastInternalId - 1;
+      const newType: EntityType = {
+        id: newId,
+        name,
+        description: description === "" ? null : description,
+        color,
+      };
+
+      const newEntityTypesMap = new Map(state.entityTypesMap);
+      newEntityTypesMap.set(newId, newType);
+
+      return {
+        ...state,
+        entityTypesMap: newEntityTypesMap,
+        selectedEntityType: newType,
+        lastInternalId: newId,
+      };
+    }
+    case "update-entity-type": {
+      // Update an existing entity type in the map
+      const { id, name, description, color } = action.payload;
+      const newEntityTypesMap = new Map(state.entityTypesMap);
+      const oldType = newEntityTypesMap.get(id);
+
+      if (!oldType) {
+        console.warn(`Entity type with id ${id} not found`);
+        return state;
+      }
+
+      const updatedType: EntityType = {
+        ...oldType,
+        name,
+        description: description === "" ? null : description,
+        color,
+      };
+
+      newEntityTypesMap.set(id, updatedType);
+
+      // Update the tree to reflect the new type
+      const newTree = updateTreeTypes(state.tree, oldType, updatedType);
+
+      return {
+        ...state,
+        tree: newTree,
+        entityTypesMap: newEntityTypesMap,
+        selectedEntityType: updatedType,
+      };
+    }
+    case "select-range":
+      // Select a range of nodes by their IDs
+      const payloadIds = action.payload.ids;
+      const node1 = payloadIds[0];
+      const node2 = payloadIds[1];
+
+      // make list of nodes in order
+      const allNodes = flattenAndSort(state.tree);
+
+      // select all nodes between node1 and node2
+      const startIndex = allNodes.findIndex((node) => node.id === node1);
+      const endIndex = allNodes.findIndex((node) => node.id === node2);
+
+      const selectedNodes = allNodes.slice(startIndex, endIndex + 1);
+
+      console.log("Selecting range:", selectedNodes);
+      return {
+        ...state,
+        selectedNodes: selectedNodes.map((node) => node.id),
+      };
+
     case "move-node":
       // For each node in the tree, if the node is in the dragIds, remove it from the tree and collect it
       const [newTree, removedNodes] = removeNodes(
         state.tree,
-        action.payload.dragIds
+        action.payload.dragIds,
       );
 
       let keyPath: (number | "children")[] = [];
@@ -97,7 +179,7 @@ function treeReducer(state: TreeState, action: TreeAction) {
       // For each node in the tree, if the node is in the ids, remove it from the tree
       const [newTree2, _removedNodes] = removeNodes(
         state.tree,
-        action.payload.ids
+        action.payload.ids,
       );
       // Get children of the removed nodes
       // If children are not present elsewhere in the tree, insert them
@@ -112,21 +194,37 @@ function treeReducer(state: TreeState, action: TreeAction) {
         ...state,
         tree: [...newTree2, ...children],
         selectedNodes: state.selectedNodes.filter(
-          (id) => !action.payload.ids.includes(id)
+          (id) => !action.payload.ids.includes(id),
         ),
       };
     case "select-node":
       const { ids } = action.payload;
-      return { ...state, selectedNodes: ids };
+
+      const type =
+        action.payload.ids.length > 0
+          ? findNodeById(state.tree, ids[0])?.type
+          : null;
+
+      return { ...state, selectedNodes: ids, selectedEntityType: type };
     // otherwise fall through to toggle-node-selected for a single ID
     case "toggle-node-selected":
       const nodesToAdd = action.payload.ids.filter(
-        (id) => !state.selectedNodes.includes(id)
+        (id) => !state.selectedNodes.includes(id),
       );
       const nodesToKeep = state.selectedNodes.filter(
-        (id) => !action.payload.ids.includes(id)
+        (id) => !action.payload.ids.includes(id),
       );
-      return { ...state, selectedNodes: [...nodesToKeep, ...nodesToAdd] };
+
+      const newType =
+        action.payload.ids.length > 0
+          ? findNodeById(state.tree, action.payload.ids[0])?.type
+          : null;
+
+      return {
+        ...state,
+        selectedNodes: [...nodesToKeep, ...nodesToAdd],
+        selectedEntityType: newType,
+      };
 
     case "create-node":
       const newId = state.lastInternalId - 1;
@@ -146,6 +244,25 @@ function treeReducer(state: TreeState, action: TreeAction) {
         lastInternalId: newId,
       };
 
+    case "delete-entity-type": {
+      // Remove the entity type from the map
+      console.log("Deleting entity type:", action.payload.id);
+      const { id } = action.payload;
+      const newEntityTypesMap = new Map(state.entityTypesMap);
+      const oldType = newEntityTypesMap.get(id);
+      newEntityTypesMap.delete(id);
+
+      const defaultType = newEntityTypesMap.values().next().value;
+      const newTree = updateTreeTypes(state.tree, oldType, defaultType);
+
+      return {
+        ...state,
+        tree: newTree,
+        entityTypesMap: newEntityTypesMap,
+        selectedNodes: [],
+      };
+    }
+
     /** Entity type selection */
     case "toggle-entity-type-selector":
       return {
@@ -197,7 +314,7 @@ function nodeIsInTree(tree: TreeData[], id: number): boolean {
 
 function buildNestedSpec(
   keyPath: (number | "children")[],
-  innerSpec: Spec<any>
+  innerSpec: Spec<any>,
 ): Spec<TreeData[]> {
   // Build a nested object from a key path
 
@@ -211,7 +328,7 @@ function buildNestedSpec(
 
 function findNode(
   tree: TreeData[],
-  id: number
+  id: number,
 ): (number | "children")[] | null {
   // Find the index of the node with the given id in the tree, returning the key path
   for (let i = 0; i < tree.length; i++) {
@@ -229,7 +346,7 @@ function findNode(
 
 function removeNodes(
   tree: TreeData[],
-  ids: number[]
+  ids: number[],
 ): [TreeData[], TreeData[]] {
   /** Remove nodes with the given ids from the tree and return the new tree and the removed nodes */
   let newTree: TreeData[] = [];
@@ -259,6 +376,8 @@ export interface EntityOutput {
   name: string;
   match: any | null;
   reasoning: string | null;
+  color: string | null;
+  children: any[] | null;
 }
 
 export interface GraphData {
@@ -279,15 +398,17 @@ export function treeToGraph(tree: TreeData[]): GraphData {
       continue;
     }
 
-    const { indices, id, name } = node;
+    const { indices, id, name, type, children } = node;
 
     const nodeData: EntityOutput = {
       id,
-      type: node.type.id,
+      type: type.id,
+      color: type.color,
       name,
       txt_range: [indices],
       reasoning: null,
       match: node.match,
+      children,
     };
 
     nodeMap.set(node.id, node);
@@ -300,7 +421,7 @@ export function treeToGraph(tree: TreeData[]): GraphData {
 
       // Now process the children
       const { nodes: childNodes, edges: childEdges } = treeToGraph(
-        node.children
+        node.children,
       );
       nodes.push(...childNodes);
       edges.push(...childEdges);
@@ -309,3 +430,50 @@ export function treeToGraph(tree: TreeData[]): GraphData {
 
   return { nodes, edges };
 }
+
+function findNodeById(tree, id) {
+  for (const node of tree) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function updateTreeTypes(tree, oldType, defaultType) {
+  return tree.map((node) => updateNodeType(node, oldType, defaultType));
+}
+
+function updateNodeType(node, oldType, defaultType) {
+  const type = node.type.id === oldType.id ? defaultType : node.type;
+
+  return {
+    ...node,
+    type,
+    children: node.children
+      ? updateTreeTypes(node.children, oldType, defaultType)
+      : [],
+  };
+}
+
+function flattenAndSort(nodes) {
+  const result = [];
+
+  function traverse(nodeList) {
+    for (const node of nodeList) {
+      result.push(node);
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        traverse(node.children);
+      }
+    }
+  }
+
+  traverse(nodes);
+
+  // sort by start
+  return result.sort((a, b) => a.indices[0] - b.indices[0]);
+}

package/src/feedback/feedback.module.sass

@@ -1,3 +1,25 @@
+:root
+  --text-line-height: 3em
+  --main-extra-width: 200px
+
+.page-wrapper
+  display: flex
+  flex-direction: row
+  position: relative
+  gap: 2em
+  align-items: flex-start // makes control-content lose stick
+
+.feedback-container
+  flex: 4
+
+.control-panel
+  flex: 1
+  height: auto
+
+.control-content
+  position: sticky
+  top: 0
+
 .feedback-component
   position: relative
   width: 800px
@@ -8,22 +30,20 @@
 .node
   cursor: pointer
 
+circle
+  cursor: pointer
+  border: 1px solid black
 
+.selected
+  border: 1px solid white
+  
 .feedback-text
   margin-bottom: 2em
 
 .entity-panel
   position: relative
   max-height: 600px
-
-.control-panel
-  max-width: 15em
-  position: absolute
-  top: 1em
-  right: 1em
-  padding: 0.2em 0.5em
-
-.entity-panel
+  width: calc(100% - 2em)
   flex: 1
   min-height: 100px
   padding: 1em
@@ -35,3 +55,95 @@
 .selection-tree
   margin: -1em 0
   padding: 1em 0
+  
+.type-list
+  display: grid
+  grid-auto-flow: column
+  grid-template-rows: repeat(10, auto)
+  gap: 0.2em
+
+  .type-tag
+    padding: .2em .5em
+    border-radius: .2em
+
+.description
+  max-width: 300px
+  padding: .5em
+
+mark
+  border-radius: .2em
+  cursor: pointer
+  color: black !important
+
+[role="treeitem"]
+  width: auto !important
+
+.highlight
+  cursor: pointer
+  padding: .2em 0
+  border-radius: .2em
+  position: relative
+  zIndex: 10
+
+.feedback-text-wrapper 
+  position: relative
+  z-index: 0
+  overflow: visible
+  line-height: var(--text-line-height)
+
+.type-container
+  display: flex
+  justify-content: space-between
+  align-items: center
+  column-gap: 1em
+
+.add-type
+  cursor: pointer
+  display: flex
+  justify-content: space-between
+  padding: 0 .5em
+  align-items: center
+
+  p
+    margin: 0
+
+.overlay-container
+  height: 80vh
+  width: 100vw
+  display: flex
+  justify-content: center
+  align-items: center
+
+  .add-type-overlay
+    background-color: var(--secondary-color)
+    padding: .5em 1em
+    display: flex
+    flex-direction: column
+    gap: 1em
+    border-radius: .2em
+
+    .title
+      display: flex
+      justify-content: space-between
+      align-items: center
+
+    h2
+      margin: 0
+
+    .form-group
+      display: flex
+      gap: 3em
+
+      .text-inputs
+        display: flex
+        flex-direction: column
+        gap: 1em
+
+.icons
+  display: flex
+  gap: .25em
+
+.node-label
+  fill: var(--text-emphasized-color)
+  fontSize: 10px
+  pointerEvents: none