Merge pull request #160 from UW-Macrostrat/feedback

Feedback autoselect

Author: davidsklar99

packages/feedback-components/CHANGELOG.md

@@ -4,7 +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).
 
-## [1.1.7]
+## [1.1.8] - 2025-07-30
+
+- On load, have any nodes matching autoselect input automically selected
+- View only bugs fixed
+
+## [1.1.7] - 2025-07-25
 
 - Can't select tree in view only mode
 - View matches on hover in view only mode

packages/feedback-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/feedback-components",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "",
   "source": "src/index.ts",
   "type": "module",

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

@@ -63,15 +63,27 @@ export function useUpdatableTree(
   entityTypes: Map<number, EntityType>,
   viewOnly: boolean,
   matchMode: boolean,
+  autoSelect: string[] = [],
 ): [TreeState, TreeDispatch] {
   // Get the first entity type
   // issue: grabs second entity instead of selected one
   const type = entityTypes.values().next().value;
 
+  let selectedNodes = [];
+  autoSelect = autoSelect.map((name) => name.toLowerCase());
+
+  if (autoSelect.length > 0) {
+    // If autoSelect is provided, find the nodes with the matching names
+    selectedNodes = initialTree
+      .flatMap((node) => node.children ?? [])
+      .filter((node) => autoSelect.includes(node.name.toLowerCase()))
+      .map((node) => node.id);
+  }
+
   return useReducer(treeReducer, {
     initialTree,
     tree: initialTree,
-    selectedNodes: [],
+    selectedNodes,
     entityTypesMap: entityTypes,
     selectedEntityType: type,
     lastInternalId: 0,
@@ -98,7 +110,7 @@ function treeReducer(state: TreeState, action: TreeAction) {
   }
 
   if (action.type === "toggle-view-only") {
-    return { ...state, viewOnly: !state.viewOnly };
+    return { ...state, viewOnly: !state.viewOnly, selectedNodes: [] };
   }
 
   if (state.viewOnly) return viewMode(state, action);

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

@@ -27,9 +27,6 @@
   & > svg
     width: 800px
 
-.node
-  cursor: pointer
-
 circle
   border: 1px solid black
 

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

@@ -57,6 +57,7 @@ export function FeedbackComponent({
   allowOverlap,
   matchLinks,
   view = false,
+  autoSelect = [],
 }) {
   const [viewOnly, setViewOnly] = useState(view);
   const [match, setMatchLinks] = useState(matchLinks);
@@ -68,6 +69,7 @@ export function FeedbackComponent({
     entityTypes,
     viewOnly,
     matchMode,
+    autoSelect,
   );
 
   const {
@@ -321,8 +323,8 @@ function ManagedSelectionTree(props) {
   const clickedRef = useRef(false);
 
   const _Node = useCallback(
-    (props) => h(Node, { ...props, matchComponent }),
-    [matchComponent],
+    (props) => h(Node, { ...props, matchComponent, viewOnly }),
+    [matchComponent, viewOnly],
   );
 
   // Update Tree selection when selectedNodes change
@@ -410,7 +412,6 @@ function ManagedSelectionTree(props) {
       onSelect: handleSelect,
       children: _Node,
       idAccessor(d) {
-        if (viewOnly) return -1;
         return d.id.toString();
       },
     }),

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

@@ -41,25 +41,32 @@ function isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {
   return false;
 }
 
-function Node({ node, style, dragHandle, tree, matchComponent }: any) {
+function Node({
+  node,
+  style,
+  dragHandle,
+  tree,
+  matchComponent,
+  viewOnly,
+}: any) {
   let highlighted: boolean = isNodeHighlighted(node, tree);
   let active: boolean = isNodeActive(node, tree);
 
-  const dispatch = useTreeDispatch();
+  console.log("viewOnly", viewOnly);
 
-  // console.log("Node render", node.data, highlighted, active);
+  const dispatch = useTreeDispatch();
 
   if (!node.data?.type) {
     node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };
   }
 
   return h(
-    "div.node",
+    "div.node" + (!viewOnly ? ".clickable" : ""),
     { style, ref: dragHandle },
     h(EntityTag, {
       data: node.data,
-      active,
-      highlighted,
+      active: viewOnly ? false : active,
+      highlighted: viewOnly ? true : highlighted,
       matchComponent,
       onClickType() {
         dispatch({ type: "toggle-entity-type-selector" });

packages/feedback-components/stories/feedback.stories.ts

@@ -4,7 +4,14 @@ import { FeedbackComponent } from "../src";
 import { data, entityTypes, data2, data3, entityTypes2 } from "./test-data";
 import h from "@macrostrat/hyper";
 
-function FeedbackInterface({ data, types, allowOverlap, matchLinks, view }) {
+function FeedbackInterface({
+  data,
+  types,
+  allowOverlap,
+  matchLinks,
+  view,
+  autoSelect,
+}) {
   const { entities = [], paragraph_text, model, model_run, source_text } = data;
 
   return h(FeedbackComponent, {
@@ -17,6 +24,7 @@ function FeedbackInterface({ data, types, allowOverlap, matchLinks, view }) {
     allowOverlap,
     view,
     matchLinks,
+    autoSelect,
   });
 }
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -77,6 +85,21 @@ export const ViewOnly: StoryObj<{}> = {
   },
 };
 
+export const AutoSelect: StoryObj<{}> = {
+  args: {
+    data,
+    types: entityTypes,
+    matchLinks: {
+      lithology: `${lexURL}/lithology`,
+      strat_name: `${lexURL}/strat-names`,
+      lith_att: `${lexURL}/lith-atts`,
+      concept: `${lexURL}/strat-name-concepts`,
+      interval: `${lexURL}/intervals`,
+    },
+    autoSelect: ["sandstone", "structure"],
+  },
+};
+
 export const TestData2: StoryObj<{}> = {
   args: {
     data: data2,