Merge pull request #84 from UW-Macrostrat/feedback-fix

Feedback Component Features Added

Author: davenquinn

packages/feedback-components/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 };
 
@@ -25,7 +26,7 @@ export function buildHighlights(
       start: entity.indices[0],
       end: entity.indices[1],
       text: entity.name,
-      backgroundColor: entity.type?.color ?? "rgb(107, 255, 91)",
+      backgroundColor: entity.type?.color,
       tag: entity.type?.name ?? "lith",
       id: entity.id,
       parents,
@@ -49,7 +50,7 @@ export function getTagStyle(
   baseColor: string,
   options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean }
 ): CSSProperties {
-  const _baseColor = asChromaColor(baseColor ?? "#ddd");
+  const _baseColor = asChromaColor(baseColor ?? "#fff");
   const { highlighted = true, inDarkMode = false, active = false } = options;
 
   let mixAmount = highlighted ? 0.8 : 0.5;
@@ -62,19 +63,28 @@ export function getTagStyle(
 
   const mixTarget = inDarkMode ? "white" : "black";
 
-  const color = _baseColor.mix(mixTarget, mixAmount).css();
+  const color = _baseColor.mix(mixTarget, mixAmount).hex();
   const borderColor = highlighted
-    ? _baseColor.mix(mixTarget, mixAmount / 2).css()
+    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()
     : "transparent";
 
+  const backgroundColor = active ? 
+    _baseColor.alpha(backgroundAlpha).hex() :
+    normalizeColor(_baseColor.alpha(backgroundAlpha).hex()) 
+
+  if(backgroundColor.includes("56cc49")) {
+    console.warn("base color", baseColor, "normalized to", backgroundColor);
+  }
+
   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",
   };
 }
 
@@ -90,7 +100,7 @@ function enhanceEntity(
 }
 
 function addColor(entityType: EntityType, match = false) {
-  const color = asChromaColor(entityType.color ?? "#ddd").brighten(
+  const color = asChromaColor(entityType.color ?? "#fff").brighten(
     match ? 1 : 2
   );
 
@@ -149,7 +159,7 @@ export function EntityTag({
     "entity"
   );
 
-  const style = getTagStyle(type?.color ?? "#aaaaaa", { highlighted, active });
+  const style = getTagStyle(type?.color, { highlighted, active });
 
   let _matchLink = null;
   if (match != null && matchComponent != null) {
@@ -218,3 +228,29 @@ 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")
+  );
+}

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

@@ -264,6 +264,8 @@ export interface EntityOutput {
   name: string;
   match: any | null;
   reasoning: string | null;
+  color: string | null;
+  children: any[] | null;
 }
 
 export interface GraphData {
@@ -284,15 +286,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);

packages/feedback-components/src/feedback/feedback.module.sass

@@ -8,7 +8,13 @@
 .node
   cursor: pointer
 
+circle
+  cursor: pointer
+  border: 1px solid black
 
+.selected
+  border: 1px solid white
+  
 .feedback-text
   margin-bottom: 2em
 
@@ -17,7 +23,6 @@
   max-height: 600px
 
 .control-panel
-  max-width: 15em
   position: absolute
   top: 1em
   right: 1em
@@ -35,9 +40,27 @@
 .selection-tree
   margin: -1em 0
   padding: 1em 0
-  width: 80% !important
-
+  width: 70% !important
+  
 .type-list
-  display: flex
-  flex-direction: column
-  gap: .2em
+  display: grid
+  grid-auto-flow: column
+  grid-template-rows: repeat(10, auto)
+  gap: 0.2em
+  margin-bottom: .5em
+
+  .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

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

@@ -12,16 +12,20 @@ import {
   forceCollide,
 } from "d3-force";
 import { useEffect, useState } from "react";
-import { Spinner } from "@blueprintjs/core";
+import { Spinner, Popover } from "@blueprintjs/core";
+import { ErrorBoundary } from "@macrostrat/ui-components";
+import { getTagStyle } from "../extractions";
 
 export function GraphView(props: {
   tree: TreeData[];
   width: number;
   height: number;
+  dispatch: (action: any) => void;
+  selectedNodes: number[];
 }) {
   // A graph view with react-flow
   // Get positions of nodes using force simulation
-  const { tree, width, height } = props;
+  const { tree, width, height, dispatch, selectedNodes } = props;
 
   const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);
   const [links, setLinks] = useState<SimulationLinkDatum[]>(null);
@@ -66,33 +70,66 @@ export function GraphView(props: {
     return h(Spinner);
   }
 
-  console.log("Graph", nodes, links);
+  console.log("Graph", nodes, links, selectedNodes);
 
-  return h("div.graph-view", { style: { width, height } }, [
-    h("svg", { width, height }, [
+  return h(ErrorBoundary, 
+    {
+      description: "An error occurred while rendering the graph view."
+    },
+    h("div.graph-view", { style: { width, height } }, [
+      h("svg", { width, height }, [
+        h(
+          "g.links",
+          links.map((d) => {
+            return h("line", {
+              x1: d.source.x,
+              y1: d.source.y,
+              x2: d.target.x,
+            y2: d.target.y,
+            stroke: "black",
+          });
+        })
+      ),
       h(
         "g.nodes",
         nodes.map((d) => {
+          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: "blue",
-          });
+            fill: style.backgroundColor || "blue",
+            onClick: (e) => {
+              e.stopPropagation();
+              dispatch({
+                type: "toggle-node-selected",
+                payload: { ids: [d.id] },
+              });
+            },
+            className: active ? "selected" : "",
+            stroke,
+            strokeWidth: 2,
+          },
+          h(
+            "title",
+            d.name || `Node ${d.id}`
+          ) 
+        );
         })
       ),
-      h(
-        "g.links",
-        links.map((d) => {
-          return h("line", {
-            x1: d.source.x,
-            y1: d.source.y,
-            x2: d.target.x,
-            y2: d.target.y,
-            stroke: "black",
-          });
-        })
-      ),
-    ]),
-  ]);
+    ])
+  ])
+  );
+}
+
+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))
+  );
 }