Merge branch 'main' into postgrest-scroll-group

Author: davidsklar99

packages/data-components/src/field-locations/rockd-checkins/checkins.stories.ts

@@ -306,21 +306,27 @@ WithImage.args = {
   result: [checkinWithImage],
   mapRef: null,
   setInspectPosition: () => {},
-  rockdAPIUrl: "https://dev.rockd.org/api/v2",
+  rockdCheckinURL: "https://dev.rockd.org/checkin",
+  rockdImageURL: "https://dev.rockd.org/api/v2/protected/image",
+  rockdProfilePicURL: "https://dev.rockd.org/api/v2/protected/gravatar",
 };
 
 export const WithoutImage = Template.bind({});
 WithoutImage.args = {
   result: [checkinWithoutImage],
   mapRef: null,
   setInspectPosition: () => {},
-  rockdAPIUrl: "https://dev.rockd.org/api/v2",
+  rockdCheckinURL: "https://dev.rockd.org",
+  rockdImageURL: "https://dev.rockd.org/api/v2/protected/image",
+  rockdProfilePicURL: "https://dev.rockd.org/api/v2/protected/gravatar",
 };
 
 export const Multiple = Template.bind({});
 Multiple.args = {
   result: [checkinWithImage, checkinWithoutImage],
   mapRef: null,
   setInspectPosition: () => {},
-  rockdAPIUrl: "https://dev.rockd.org/api/v2",
+  rockdCheckinURL: "https://dev.rockd.org",
+  rockdImageURL: "https://dev.rockd.org/api/v2/protected/image",
+  rockdProfilePicURL: "https://dev.rockd.org/api/v2/protected/gravatar",
 };

packages/data-components/src/field-locations/rockd-checkins/index.ts

@@ -52,32 +52,34 @@ export interface CheckinProps {
   }>;
   mapRef?: React.RefObject<mapboxgl.Map>;
   setInspectPosition?: (position: { lat: number; lng: number }) => void;
-  rockdAPIUrl: string;
+  rockdCheckinURL: string;
+  rockdImageURL: string;
+  rockdProfilePicURL: string;
 }
 
 export function RockdWebsiteCheckinList(props: CheckinProps) {
   /** Checkin list component used in the Rockd website */
-  const { result, mapRef, setInspectPosition, rockdAPIUrl } = props;
-  const isDarkMode = useDarkMode().isEnabled;
-  let checkins = [];
+  const {
+    result,
+    mapRef,
+    setInspectPosition,
+    rockdCheckinURL,
+    rockdImageURL,
+    rockdProfilePicURL,
+  } = props;
   const map = mapRef?.current;
   const len = result.length;
-  const color = isDarkMode ? "white" : "black";
 
   return h(
     result.map((checkin) => {
       // format rating
       let ratingArr = [];
       for (var i = 0; i < checkin.rating; i++) {
-        ratingArr.push(
-          h(Icon, { className: "star", icon: "star", style: { color } }),
-        );
+        ratingArr.push(h(Icon, { className: "star", icon: "star" }));
       }
 
       for (var i = 0; i < 5 - checkin.rating; i++) {
-        ratingArr.push(
-          h(Icon, { className: "star", icon: "star-empty", style: { color } }),
-        );
+        ratingArr.push(h(Icon, { className: "star", icon: "star-empty" }));
       }
 
       let imageView = null;
@@ -86,7 +88,7 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
         const imgSrc = getImageUrl(
           checkin.person_id,
           checkin.photo,
-          rockdAPIUrl,
+          rockdImageURL,
         );
         imageView = h([
           h("img.observation-img", {
@@ -98,7 +100,6 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
             h(Icon, {
               className: "details-image",
               icon: "arrow-right",
-              style: { color },
             }),
           ]),
         ]);
@@ -108,7 +109,6 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
           h(Icon, {
             className: "details-image",
             icon: "arrow-right",
-            style: { color },
           }),
         ]);
       }
@@ -159,7 +159,10 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
                   "h3.profile-pic",
 
                   h("img.profile-pic", {
-                    src: getProfilePicUrl(checkin.person_id, rockdAPIUrl),
+                    src: getProfilePicUrl(
+                      checkin.person_id,
+                      rockdProfilePicURL,
+                    ),
                   }),
                 )
               : null,
@@ -182,35 +185,30 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
             "a",
             {
               className: "checkin-link",
-              href: "/checkin/" + checkin.checkin_id,
+              href: rockdCheckinURL + "/" + checkin.checkin_id,
               target: "_blank",
             },
             imageView,
           ),
           h("div", { className: "checkin-footer" }, [
             h("div", { className: "likes-container" }, [
               h(Icon, {
-                className: "likes-icon " + (isDarkMode ? "icon-dark-mode" : ""),
+                className: "likes-icon",
                 icon: "thumbs-up",
-                style: { color },
               }),
               h("h3", { className: "likes" }, checkin.likes),
             ]),
             h("div", { className: "observations-container" }, [
               h(Icon, {
-                className:
-                  "observations-icon " + (isDarkMode ? "icon-dark-mode" : ""),
+                className: "observations-icon",
                 icon: "camera",
-                style: { color },
               }),
               h("h3", { className: "likes" }, checkin.observations.length),
             ]),
             h("div", { className: "comments-container" }, [
               h(Icon, {
-                className:
-                  "comments-icon " + (isDarkMode ? "icon-dark-mode" : ""),
+                className: "comments-icon",
                 icon: "comment",
-                style: { color },
               }),
               h("h3", { className: "comments" }, checkin.comments),
             ]),
@@ -221,12 +219,10 @@ export function RockdWebsiteCheckinList(props: CheckinProps) {
   );
 }
 
-function getImageUrl(person_id, photo_id, rockdAPIUrl) {
-  return (
-    rockdAPIUrl + "/protected/image/" + person_id + "/thumb_large/" + photo_id
-  );
+function getImageUrl(person_id, photo_id, rockdImageURL) {
+  return rockdImageURL + "/" + person_id + "/thumb_large/" + photo_id;
 }
 
-function getProfilePicUrl(person_id, rockdAPIUrl) {
-  return rockdAPIUrl + "/protected/gravatar/" + person_id;
+function getProfilePicUrl(person_id, rockdProfilePicURL) {
+  return rockdProfilePicURL + "/" + person_id;
 }

packages/feedback-components/CHANGELOG.md

@@ -4,9 +4,24 @@ 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]
+## [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
+
+## [1.1.6] - 2025-07-24
+
+- Fix view and match glitches
+
+## [1.1.5] - 2025-07-24
 
 - Simplified match logic
+- Added view only mode
 
 ## [1.1.4] - 2025-07-16
 

packages/feedback-components/package.json

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

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

@@ -53,7 +53,8 @@ type TreeAction =
   | { type: "select-range"; payload: { ids: number[] } }
   | { type: "add-match"; payload: { id: number; payload: any } }
   | { type: "remove-match"; payload: { id: number } }
-  | { type: "toggle-match-mode" };
+  | { type: "toggle-match-mode" }
+  | { type: "toggle-view-only" };
 
 export type TreeDispatch = Dispatch<TreeAction>;
 
@@ -62,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,
@@ -96,6 +109,10 @@ function treeReducer(state: TreeState, action: TreeAction) {
     return { ...state, matchMode: !state.matchMode };
   }
 
+  if (action.type === "toggle-view-only") {
+    return { ...state, viewOnly: !state.viewOnly, selectedNodes: [] };
+  }
+
   if (state.viewOnly) return viewMode(state, action);
 
   if (state.matchMode) return matchMode(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
 
@@ -167,3 +164,6 @@ mark
 
   .close-btn
     cursor: pointer
+
+.match-link
+  padding: .5em

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

@@ -57,17 +57,19 @@ export function FeedbackComponent({
   allowOverlap,
   matchLinks,
   view = false,
+  autoSelect = [],
 }) {
   const [viewOnly, setViewOnly] = useState(view);
   const [match, setMatchLinks] = useState(matchLinks);
-  const matchMode = match !== null;
+  const matchMode = match !== undefined;
 
   // Get the input arguments
   const [state, dispatch] = useUpdatableTree(
     entities.map(processEntity) as any,
     entityTypes,
     viewOnly,
     matchMode,
+    autoSelect,
   );
 
   const {
@@ -93,6 +95,7 @@ export function FeedbackComponent({
           small: true,
           onValueChange() {
             setViewOnly(!viewOnly);
+            dispatch({ type: "toggle-view-only" });
           },
           role: "toolbar",
         }),
@@ -145,6 +148,7 @@ export function FeedbackComponent({
               width,
               height,
               matchComponent,
+              viewOnly,
             }),
             h.if(state.viewMode == "graph")(GraphView, {
               tree,
@@ -304,16 +308,23 @@ 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)
   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

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

@@ -29,9 +29,9 @@ export function Matches({
     h(Divider),
     h(Switch, {
       label: "Match mode",
-      checked: match !== null,
+      checked: match !== undefined,
       onChange: (e) => {
-        setMatchLinks(match === null ? matchLinks || {} : null);
+        setMatchLinks(match === undefined ? matchLinks || {} : undefined);
         dispatch({ type: "toggle-match-mode" });
       },
     }),
@@ -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/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" });