Merge pull request #116 from UW-Macrostrat/feedback

Feedback update

Author: davidsklar99

packages/feedback-components/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [unreleased] - 2025-07-01
+
+- new text component, following same clicking rules as tree
+- Entity panel updates
+- Entity types are editable, deletable, and addable
+
 ## [1.1.0] - 2025-06-25
 
 Major updates by David Sklar to improve usability

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

@@ -47,7 +47,8 @@ type TreeAction =
   | {
       type: "update-entity-type";
       payload: { id: number; name: string; description: string; color: string };
-    };
+    }
+  | { type: "select-range"; payload: { ids: number[] } };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
@@ -134,6 +135,27 @@ function treeReducer(state: TreeState, action: TreeAction) {
         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(
@@ -183,8 +205,6 @@ function treeReducer(state: TreeState, action: TreeAction) {
           ? findNodeById(state.tree, ids[0])?.type
           : null;
 
-      console.log("Selecting nodes:", ids, "Type:", type);
-
       return { ...state, selectedNodes: ids, selectedEntityType: type };
     // otherwise fall through to toggle-node-selected for a single ID
     case "toggle-node-selected":
@@ -439,3 +459,21 @@ function updateNodeType(node, 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]);
+}

packages/feedback-components/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
@@ -21,14 +43,7 @@ circle
 .entity-panel
   position: relative
   max-height: 600px
-
-.control-panel
-  position: absolute
-  top: 1em
-  right: 1em
-  padding: 0.2em 0.5em
-
-.entity-panel
+  width: calc(100% - 2em)
   flex: 1
   min-height: 100px
   padding: 1em
@@ -40,7 +55,6 @@ circle
 .selection-tree
   margin: -1em 0
   padding: 1em 0
-  width: 70% !important
 
 .type-list
   display: grid
@@ -75,6 +89,7 @@ mark
   position: relative
   z-index: 0
   overflow: visible
+  line-height: var(--text-line-height)
 
 .type-container
   display: flex
@@ -126,4 +141,9 @@ mark
 
 .icons
   display: flex
-  gap: .25em
+  gap: .25em
+
+.node-label
+  fill: var(--text-emphasized-color)
+  fontSize: 10px
+  pointerEvents: none

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

@@ -1,7 +1,7 @@
 import { TreeData } from "./types";
 import { treeToGraph } from "./edit-state";
-import h from "@macrostrat/hyper";
-
+import styles from "./feedback.module.sass";
+import hyper from "@macrostrat/hyper";
 import {
   forceSimulation,
   SimulationNodeDatum,
@@ -12,10 +12,12 @@ import {
   forceCollide,
 } from "d3-force";
 import { useEffect, useState } from "react";
-import { Spinner, Popover } from "@blueprintjs/core";
+import { Spinner, Switch } from "@blueprintjs/core";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 import { getTagStyle } from "../extractions";
 
+const h = hyper.styled(styles);
+
 export function GraphView(props: {
   tree: TreeData[];
   width: number;
@@ -29,6 +31,7 @@ export function GraphView(props: {
 
   const [nodes, setNodes] = useState<SimulationNodeDatum[]>(null);
   const [links, setLinks] = useState<SimulationLinkDatum[]>(null);
+  const [showLabels, setShowLabels] = useState(false);
 
   useEffect(() => {
     const { nodes, edges } = treeToGraph(tree);
@@ -78,6 +81,12 @@ export function GraphView(props: {
       description: "An error occurred while rendering the graph view.",
     },
     h("div.graph-view", { style: { width, height } }, [
+      h(Switch, {
+        className: "show-labels-switch",
+        label: "Show Labels",
+        checked: showLabels,
+        onChange: (e) => setShowLabels(e.target.checked),
+      }),
       h("svg", { width, height }, [
         h(
           "g.links",
@@ -99,12 +108,11 @@ export function GraphView(props: {
             const highlighted = isHighlighted(d.id, selectedNodes, nodes);
             const style = getTagStyle(d.color, { highlighted, active });
 
-            return h(
-              "circle",
-              {
+            return h("g", [
+              h("circle", {
                 cx: d.x,
                 cy: d.y,
-                r: 5,
+                r: 8,
                 fill: style.backgroundColor || "blue",
                 onClick: (e) => {
                   e.stopPropagation();
@@ -116,9 +124,18 @@ export function GraphView(props: {
                 className: active ? "selected" : "",
                 stroke,
                 strokeWidth: 2,
-              },
-              h("title", d.name || `Node ${d.id}`),
-            );
+              }),
+              h.if(showLabels)(
+                "text",
+                {
+                  x: d.x + 10,
+                  y: d.y + 4,
+                  className: "node-label",
+                },
+                d.name || `Node ${d.id}`,
+              ),
+              h.if(!showLabels)("title", d.name || `Node ${d.id}`),
+            ]);
           }),
         ),
       ]),