Merge pull request #80 from UW-Macrostrat/lith-tag-update

Unit Details Clickable

Author: davenquinn

packages/column-views/CHANGELOG.md

@@ -6,6 +6,7 @@ project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- `UnitDetailsContent` automatically handles clicks on Lithologies, Intervals, and Environment tags and routes to their specific individual lexicon page.
 - Add mouseover handlers to allow age cursor to be reported
 - Add an `AgeCursor` component
 - Reactivate carbon isotopes column rendering

packages/column-views/src/unit-details/panel.ts

@@ -5,15 +5,16 @@ import { Button, ButtonGroup } from "@blueprintjs/core";
 import { ReactNode, useMemo, useState } from "react";
 import {
   DataField,
-  EnvironmentsList,
+  // EnvironmentsList,
   IntervalShort,
   IntervalTag,
   ItemList,
-  LithologyList,
+  // LithologyList,
   LithologyTagFeature,
   Parenthetical,
   Value,
 } from "@macrostrat/data-components";
+import { LithologyList, EnvironmentsList } from "../../../data-components/src";
 import { useMacrostratData, useMacrostratDefs } from "../data-provider";
 import { Environment, UnitLong, UnitLongFull } from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
@@ -35,6 +36,7 @@ export function UnitDetailsPanel({
   actions,
   selectUnit,
   columnUnits,
+  onClickItem,
 }: {
   unit: any;
   onClose?: any;
@@ -45,14 +47,15 @@ export function UnitDetailsPanel({
   lithologyFeatures?: Set<LithologyTagFeature>;
   columnUnits?: UnitLong[];
   selectUnit?: (unitID: number) => void;
+  onClickItem?: (item: any) => void;
 }) {
   const [showJSON, setShowJSON] = useState(false);
 
   let content = null;
   if (showJSON) {
     content = h(JSONView, { data: unit, showRoot: false });
   } else {
-    content = h(UnitDetailsContent, { unit, features, lithologyFeatures });
+    content = h(UnitDetailsContent, { unit, features, lithologyFeatures, onClickItem });
   }
 
   let title = defaultNameFunction(unit);
@@ -136,12 +139,14 @@ function UnitDetailsContent({
     UnitDetailsFeature.AdjacentUnits,
     UnitDetailsFeature.OutcropType,
   ]),
+  onClickItem,
 }: {
   unit: UnitLong;
   selectUnit?: (unitID: number) => void;
   columnUnits?: UnitLong[];
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
+  onClickItem?: (event: any) => void;
 }) {
   const lithMap = useMacrostratDefs("lithologies");
   const envMap = useMacrostratDefs("environments");
@@ -215,12 +220,19 @@ function UnitDetailsContent({
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
+      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
-      h(IntervalProportions, { unit }),
+      h(IntervalProportions, { 
+        unit,
+        onClickItem,
+       }),
     ]),
-    h(EnvironmentsList, { environments }),
+    h(EnvironmentsList, { 
+      environments,
+      onClickItem,
+     }),
     h.if(unit.strat_name_id != null)(
       DataField,
       {
@@ -470,7 +482,7 @@ function UnitIDList({ units, selectUnit }) {
   );
 }
 
-function IntervalProportions({ unit }) {
+function IntervalProportions({ unit, onClickItem }) {
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
   let b_prop = unit.b_prop ?? 0;
@@ -498,14 +510,26 @@ function IntervalProportions({ unit }) {
     p0 = h("span.joint-proportion", [p0, h("span.sep", "to"), p1]);
   }
 
+  const clickable = onClickItem != null;
+
+  const handleClick = (event: MouseEvent) => {
+    if (onClickItem) {
+      onClickItem({ event, data: interval0 });
+    }
+  };
+
   return h("div.interval-proportions", [
     h(IntervalTag, {
+      className: clickable ? "clickable" : "",
+      onClick: clickable ? handleClick : undefined,
       interval: interval0,
       prefix: p0,
     }),
     h.if(i0 != i1)("span.discourage-break", [
       h("span.sep", "to"),
       h(IntervalTag, {
+        className: clickable ? "clickable" : "",
+        onClick: clickable ? handleClick : undefined,
         interval: {
           ...int1,
           id: i1,

packages/column-views/stories/unit-details.stories.ts

@@ -31,7 +31,7 @@ function UnitDetailsExt({
     return h(Spinner);
   }
 
-  return h(LithologiesProvider, h(UnitDetailsPanel, { unit, ...rest }));
+  return h(LithologiesProvider, h(UnitDetailsPanel, { onClickItem: (e) => console.log(e), unit, ...rest }));
 }
 
 type Story = StoryObj<typeof UnitDetailsExt>;

packages/data-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [unreleased]
+
+- onClick capability added to LithologyTag, IntervalTag, and EnvironmentList, returning event and associated data
+
 ## [0.1.0] - 2025-04-09
 
 - Added fields for data and tags, which can be used for rendering lists of

packages/data-components/src/components/unit-details/base.ts

@@ -102,9 +102,11 @@ export function IntervalTag({
   interval,
   showAgeRange = false,
   color,
+  onClick,
   ...rest
 }: IntervalTagProps) {
   return h(Tag, {
+    onClick,
     name: interval.name,
     color: color ?? interval.color,
     ...rest,
@@ -126,10 +128,12 @@ export function TagField({
   label,
   className,
   children,
+  onClick,
 }: {
   label?: string;
   className?: string;
   children?: ReactNode;
+  onClick?: () => void;
 }) {
   return h(
     DataField,

packages/data-components/src/components/unit-details/lithology-tag.ts

@@ -10,6 +10,7 @@ interface LithologyTagProps {
   expandOnHover?: boolean;
   size?: TagSize;
   features?: Set<LithologyTagFeature>;
+  onClick?: (event: any) => void;
 }
 
 export enum LithologyTagFeature {
@@ -22,6 +23,7 @@ export function LithologyTag({
   color,
   features,
   size,
+  onClick,
 }: LithologyTagProps) {
   let proportion = null;
   const showProportion = features?.has(LithologyTagFeature.Proportion) ?? false;
@@ -40,16 +42,26 @@ export function LithologyTag({
     });
   }
 
+  const clickable = onClick != null;
+
+  const handleClick = (event: MouseEvent) => {
+    if (onClick) {
+      onClick({ event, data });
+    }
+  };
+
   return h(Tag, {
     prefix: atts,
     details: proportion,
     name: data.name,
-    className: "lithology-tag",
+    className: clickable ? " clickable" : "",
     size,
     color: color ?? data.color,
+    onClick: clickable ? handleClick : undefined,
   });
 }
 
+
 function List({ items, commaSeparated = false, lastSep = null, className }) {
   let items1 = items;
   if (commaSeparated) {
@@ -81,10 +93,12 @@ export function LithologyList({
     LithologyTagFeature.Proportion,
     LithologyTagFeature.Attributes,
   ]),
+  onClickItem,
 }: {
   label?: string;
   lithologies: any[];
   features?: Set<LithologyTagFeature>;
+  onClickItem?: (data: any) => void;
 }) {
   const sortedLiths = useMemo(() => {
     const l1 = [...lithologies];
@@ -104,6 +118,9 @@ export function LithologyList({
       return h(LithologyTag, {
         data: l1,
         features,
+        onClick: onClickItem
+          ? (data) => onClickItem({ ...data, data: l1 })
+          : undefined,
       });
     })
   );
@@ -120,12 +137,14 @@ function lithologyComparison(a, b) {
   return dx;
 }
 
-export function EnvironmentsList({ environments }) {
+export function EnvironmentsList({ environments, onClickItem }) {
+
+
   return h(
     TagField,
-    { label: "Environments", className: "environments-list" },
+    { label: "Environments", className: "environments-list"},
     environments.map((lith: any) => {
-      return h(LithologyTag, { data: lith });
+      return h(LithologyTag, { data: lith, onClick: onClickItem});
     })
   );
 }

packages/data-components/src/components/unit-details/tag.module.sass

@@ -6,6 +6,9 @@
 .tight-list
   padding-left: 1em
 
+.clickable
+  cursor: pointer
+
 .tag
   font-size: var(--font-size)
   align-items: center

packages/data-components/src/components/unit-details/tag.ts

@@ -26,6 +26,7 @@ export interface BaseTagProps {
   children?: ReactNode;
   size?: TagSize;
   color?: chroma.ChromaInput;
+  onClick?: (data: any) => void;
 }
 
 export function Tag(props: BaseTagProps) {
@@ -39,6 +40,7 @@ export function Tag(props: BaseTagProps) {
     children,
     size,
     color,
+    onClick,
   } = props;
 
   let _details = null;
@@ -62,6 +64,7 @@ export function Tag(props: BaseTagProps) {
     {
       className,
       style: buildTagStyle({ color, size, inDarkMode }),
+      onClick,
     },
     [_prefix, mainTag]
   );

packages/data-components/src/components/unit-details/unit-details.stories.ts

@@ -57,6 +57,9 @@ LithologyTag.args = {
   },
   expandOnHover: false,
   size: "normal",
+  onClick: (e) => {
+    console.log("Clicked lith id:", e.lith_id);
+  }
 };
 
 export { LithologyTag };
@@ -103,5 +106,8 @@ export function LithologyList() {
         lith_id: 2,
       },
     ],
+    onClickItem: (e) => {
+      console.log("Clicked lith id:", e.lithId);
+    }
   });
 }