Merge pull request #156 from UW-Macrostrat/feedback

Feedback update to 1.1.7

Author: davidsklar99

packages/feedback-components/CHANGELOG.md

@@ -4,6 +4,11 @@ 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]
+
+- Can't select tree in view only mode
+- View matches on hover in view only mode
+
 ## [1.1.6] - 2025-07-24
 
 - Fix view and match glitches

packages/feedback-components/package.json

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

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

@@ -167,3 +167,6 @@ mark
 
   .close-btn
     cursor: pointer
+
+.match-link
+  padding: .5em

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

@@ -146,6 +146,7 @@ export function FeedbackComponent({
               width,
               height,
               matchComponent,
+              viewOnly,
             }),
             h.if(state.viewMode == "graph")(GraphView, {
               tree,
@@ -305,8 +306,15 @@ function countNodes(tree) {
 }
 
 function ManagedSelectionTree(props) {
-  const { selectedNodes, dispatch, tree, height, width, matchComponent } =
-    props;
+  const {
+    selectedNodes,
+    dispatch,
+    tree,
+    height,
+    width,
+    matchComponent,
+    viewOnly,
+  } = props;
 
   const ref = useRef<TreeApi<TreeData>>();
   // Use a ref to track clicks (won't cause rerender)
@@ -402,6 +410,7 @@ function ManagedSelectionTree(props) {
       onSelect: handleSelect,
       children: _Node,
       idAccessor(d) {
+        if (viewOnly) return -1;
         return d.id.toString();
       },
     }),

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

@@ -178,7 +178,7 @@ interface MatchTagProps {
   setPayload?: (payload: Record<string, any>) => void;
 }
 
-function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
+export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
   if (!data || Object.keys(data).length === 0) return;
 
   if (data.lith_id || data?.type === "lith") {

packages/feedback-components/src/feedback/text-visualizer.ts

@@ -6,9 +6,9 @@ import hyper from "@macrostrat/hyper";
 import { buildHighlights, getTagStyle } from "../extractions";
 import { Highlight } from "../extractions/types";
 import { useEffect, useRef } from "react";
-import { Icon } from "@blueprintjs/core";
-import { DataField, JSONView } from "@macrostrat/ui-components";
-import { LithologyList, LithologyTag } from "@macrostrat/data-components";
+import { Popover } from "@blueprintjs/core";
+import { MatchTag } from "./matches";
+import { data } from "packages/feedback-components/stories/test-data";
 
 const h = hyper.styled(styles);
 
@@ -284,7 +284,7 @@ function renderNode(
     zIndex: parentSelected ? -1 : 1,
     border:
       "1px solid " +
-      (match != undefined && matchLinks && !viewOnly
+      (match != undefined && matchLinks
         ? "orange"
         : showBorder
           ? tag.color
@@ -306,13 +306,13 @@ function renderNode(
     }
   }
 
-  return h(
+  const tagComponent = h(
     "span",
     {
       onMouseEnter: (e: MouseEvent) => {
         e.stopPropagation();
       },
-      className: "highlight" + (!viewOnly ? " clickable" : ""),
+      className: "highlight" + (!viewOnly || match ? " clickable" : ""),
       style,
       onClick: (e: MouseEvent) => {
         e.stopPropagation();
@@ -356,6 +356,19 @@ function renderNode(
           ),
         ),
   );
+
+  if (viewOnly && match) {
+    return h(
+      Popover,
+      {
+        content: h("div.match-link", h(MatchTag, { data: match, matchLinks })),
+        interactionKind: "hover",
+      },
+      tagComponent,
+    );
+  }
+
+  return tagComponent;
 }
 
 export function HighlightedText(props: {

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

@@ -67,6 +67,13 @@ export const ViewOnly: StoryObj<{}> = {
     types: entityTypes,
     allowOverlap: false,
     view: true,
+    matchLinks: {
+      lithology: `${lexURL}/lithology`,
+      strat_name: `${lexURL}/strat-names`,
+      lith_att: `${lexURL}/lith-atts`,
+      concept: `${lexURL}/strat-name-concepts`,
+      interval: `${lexURL}/intervals`,
+    },
   },
 };