highleted nodes work on graph

Author: davidsklar99

packages/feedback-components/src/feedback/edit-state.ts

@@ -265,6 +265,7 @@ export interface EntityOutput {
   match: any | null;
   reasoning: string | null;
   color: string | null;
+  children: any[] | null;
 }
 
 export interface GraphData {
@@ -285,7 +286,7 @@ export function treeToGraph(tree: TreeData[]): GraphData {
       continue;
     }
 
-    const { indices, id, name, type } = node;
+    const { indices, id, name, type, children } = node;
 
     const nodeData: EntityOutput = {
       id,
@@ -295,6 +296,7 @@ export function treeToGraph(tree: TreeData[]): GraphData {
       txt_range: [indices],
       reasoning: null,
       match: node.match,
+      children
     };
 
     nodeMap.set(node.id, node);

packages/feedback-components/src/feedback/graph.ts

@@ -14,6 +14,7 @@ import {
 import { useEffect, useState } from "react";
 import { Spinner, Popover } from "@blueprintjs/core";
 import { ErrorBoundary } from "@macrostrat/ui-components";
+import { getTagStyle } from "../extractions";
 
 export function GraphView(props: {
   tree: TreeData[];
@@ -92,22 +93,24 @@ export function GraphView(props: {
       h(
         "g.nodes",
         nodes.map((d) => {
-          const isSelected = selectedNodes.includes(d.id);
-          const stroke = isSelected ? "white" : "black";
+          const active = selectedNodes.includes(d.id);
+          const stroke = active ? "white" : "black";
+          const highlighted = isHighlighted(d.id, selectedNodes, nodes);
+          const style = getTagStyle(d.color, { highlighted, active });
 
           return h("circle", {
             cx: d.x,
             cy: d.y,
             r: 5,
-            fill: d.color || "blue",
+            fill: style.backgroundColor || "blue",
             onClick: (e) => {
               e.stopPropagation();
               dispatch({
                 type: "toggle-node-selected",
                 payload: { ids: [d.id] },
               });
             },
-            className: isSelected ? "selected" : "",
+            className: active ? "selected" : "",
             stroke,
             strokeWidth: 2,
           },
@@ -122,3 +125,11 @@ export function GraphView(props: {
   ])
   );
 }
+
+function isHighlighted(id: number, selectedNodes: number[], nodes: TreeData[]) {
+  if (selectedNodes.length === 0) return true;
+  return (
+    selectedNodes.includes(id) ||
+    nodes.some((node) => selectedNodes.includes(node.id) && node.children.some((child) => child.id === id))
+  );
+}