Merge pull request #99

Tag updates

Author: davenquinn

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

@@ -1,16 +1,17 @@
 import h from "@macrostrat/hyper";
 import { TagField } from "./base";
-import { Tag, TagSize } from "./tag";
+import { BaseTagProps, Tag, TagSize } from "./tag";
 import { useMemo } from "react";
+import { Lithology } from "@macrostrat/api-types";
+import classNames from "classnames";
 
-interface LithologyTagProps {
-  data: any;
-  color?: string;
+interface LithologyTagProps extends Omit<BaseTagProps, "onClick" | "name"> {
+  data: Lithology;
   className?: string;
   expandOnHover?: boolean;
   size?: TagSize;
   features?: Set<LithologyTagFeature>;
-  onClick?: (event: any) => void;
+  onClick?: (event: any, data: Lithology) => void;
 }
 
 export enum LithologyTagFeature {
@@ -22,8 +23,8 @@ export function LithologyTag({
   data,
   color,
   features,
-  size,
-  onClick,
+  onClick: _onClick,
+  ...rest
 }: LithologyTagProps) {
   let proportion = null;
   const showProportion = features?.has(LithologyTagFeature.Proportion) ?? false;
@@ -44,22 +45,21 @@ export function LithologyTag({
     });
   }
 
-  const clickable = onClick != null;
-
-  const handleClick = (event: MouseEvent) => {
-    if (onClick) {
-      onClick({ event, data });
-    }
-  };
+  const onClick = useMemo(() => {
+    if (_onClick == null) return null;
+    return (event: MouseEvent) => {
+      _onClick(event, data);
+    };
+  }, [data, _onClick]);
 
   return h(Tag, {
     prefix: atts,
     details: proportion,
     name: data.name,
-    className: clickable ? " clickable" : "",
-    size,
+    className: classNames({ clickable: onClick != null }, "lithology-tag"),
     color: color ?? data.color,
-    onClick: clickable ? handleClick : undefined,
+    onClick,
+    ...rest,
   });
 }
 
@@ -95,11 +95,17 @@ export function LithologyList({
     LithologyTagFeature.Attributes,
   ]),
   onClickItem,
+  getItemHref,
+  className,
 }: {
   label?: string;
   lithologies: any[];
   features?: Set<LithologyTagFeature>;
-  onClickItem?: (data: any) => void;
+  // Optional function to handle click events on each item
+  onClickItem?: (event: MouseEvent, data: Lithology) => void;
+  // Optional function to get a link location for each item
+  getItemHref?: (data: Lithology) => string | null | undefined;
+  className?: string;
 }) {
   const sortedLiths = useMemo(() => {
     const l1 = [...lithologies];
@@ -109,7 +115,7 @@ export function LithologyList({
 
   return h(
     TagField,
-    { label },
+    { label, className },
     sortedLiths.map((lith) => {
       let l1 = { ...lith };
       if (l1.prop == 0) {
@@ -119,9 +125,8 @@ export function LithologyList({
       return h(LithologyTag, {
         data: l1,
         features,
-        onClick: onClickItem
-          ? (data) => onClickItem({ ...data, data: l1 })
-          : undefined,
+        onClick: onClickItem,
+        href: getItemHref?.(lith),
       });
     })
   );
@@ -138,12 +143,21 @@ function lithologyComparison(a, b) {
   return dx;
 }
 
-export function EnvironmentsList({ environments, onClickItem }) {
+export function EnvironmentsList({
+  environments,
+  onClickItem,
+  getItemHref,
+  label = "Environments",
+}) {
   return h(
     TagField,
-    { label: "Environments", className: "environments-list" },
-    environments.map((lith: any) => {
-      return h(LithologyTag, { data: lith, onClick: onClickItem });
+    { label, className: "environments-list" },
+    environments.map((env: any) => {
+      return h(LithologyTag, {
+        data: env,
+        onClick: onClickItem,
+        href: getItemHref?.(env),
+      });
     })
   );
 }

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

@@ -2,8 +2,9 @@ import { useInDarkMode } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
 import { getLuminanceAdjustedColorScheme } from "@macrostrat/color-utils";
 import styles from "./tag.module.sass";
-import { ReactNode } from "react";
+import { ComponentType, ReactNode, JSX } from "react";
 import chroma from "chroma-js";
+import classNames from "classnames";
 
 const h = hyper.styled(styles);
 
@@ -26,45 +27,62 @@ export interface BaseTagProps {
   children?: ReactNode;
   size?: TagSize;
   color?: chroma.ChromaInput;
-  onClick?: (data: any) => void;
+  onClick?: (event: MouseEvent) => void;
+  href?: string;
+  component?: ComponentOrHTMLTagElement<any>;
 }
 
+export type ComponentOrHTMLTagElement<T> =
+  | ComponentType<T>
+  | keyof JSX.IntrinsicElements;
+
 export function Tag(props: BaseTagProps) {
   const inDarkMode = useInDarkMode();
   const {
     prefix,
     name,
     details,
-    classNames = {},
     className,
     children,
     size,
     color,
     onClick,
+    href,
+    component,
   } = props;
 
+  let classes = props.classNames ?? {};
+
+  let _component: ComponentOrHTMLTagElement<any> = component ?? "span";
+  if (href != null && component == null) {
+    // If a href is provided, use an anchor tag by default
+    _component = "a";
+  }
+
+  // TODO: details and prefix might be better moved outside of the component...
   let _details = null;
   if (details != null) {
-    _details = h("span.details", { className: classNames.details }, details);
+    _details = h("span.details", { className: classes.details }, details);
   }
 
-  const mainTag = h("span.main", { className: classNames.main }, [
+  const mainTag = h("span.main", { className: classes.main }, [
     h("span.name", name),
     children,
     _details,
   ]);
 
   let _prefix = null;
   if (prefix != null) {
-    _prefix = h("span.prefix", { className: classNames.prefix }, prefix);
+    _prefix = h("span.prefix", { className: classes.prefix }, prefix);
   }
 
   return h(
-    "span.tag",
+    _component,
     {
-      className,
+      className: classNames(className, "tag"),
       style: buildTagStyle({ color, size, inDarkMode }),
       onClick,
+      href,
     },
     [_prefix, mainTag]
   );

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

@@ -3,17 +3,28 @@ import h from "@macrostrat/hyper";
 import {
   LithologyTag as _LithologyTag,
   LithologyList as _LithologyList,
+  LithologyTagFeature,
 } from "./lithology-tag";
 import { TagSize } from "./tag";
 import {
   DataField as _DataField,
   IntervalField as _IntervalField,
 } from "./base";
+import {
+  useAPIResult,
+  useToaster,
+  ToasterContext,
+} from "@macrostrat/ui-components";
 
 export default {
   title: "Data components/Unit details",
   component: _LithologyTag,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes,
+  decorators: [
+    (Story) => {
+      return h(ToasterContext, {}, h(Story));
+    },
+  ],
 } as Meta<any>;
 
 export function DataField() {
@@ -59,7 +70,7 @@ LithologyTag.args = {
   size: "normal",
   onClick: (e) => {
     console.log("Clicked lith id:", e.lith_id);
-  }
+  },
 };
 
 export { LithologyTag };
@@ -72,7 +83,7 @@ export const LithologyTagWithProportion = {
       lith_id: 2,
       prop: 0.5,
     },
-    showProportion: true,
+    features: new Set([LithologyTagFeature.Proportion]),
     size: "normal",
   },
 };
@@ -86,8 +97,10 @@ export const LithologyTagWithAtts = {
       prop: 0.125,
       atts: ["red", "purple"],
     },
-    showProportion: true,
-    showAttributes: true,
+    features: new Set([
+      LithologyTagFeature.Attributes,
+      LithologyTagFeature.Proportion,
+    ]),
     size: TagSize.Normal,
   },
 };
@@ -108,6 +121,52 @@ export function LithologyList() {
     ],
     onClickItem: (e) => {
       console.log("Clicked lith id:", e.lithId);
-    }
+    },
+  });
+}
+
+export function LithologyListClickable() {
+  const toaster = useToaster();
+  const liths = useAPIResult(
+    "https://dev.macrostrat.org/api/v2/defs/lithologies",
+    {
+      lith_class: "sedimentary",
+    },
+    (res) => res.success.data
+  );
+
+  if (liths == null) {
+    return h("div", "Loading lithologies...");
+  }
+
+  return h(_LithologyList, {
+    lithologies: liths,
+    onClickItem: (e, data) => {
+      toaster.show({
+        message: `Clicked lith ID: ${data.lith_id}`,
+        intent: "success",
+      });
+    },
+  });
+}
+
+export function LithologyListWithLinks() {
+  const liths = useAPIResult(
+    "https://dev.macrostrat.org/api/v2/defs/lithologies",
+    {
+      lith_class: "sedimentary",
+    },
+    (res) => res.success.data
+  );
+
+  if (liths == null) {
+    return h("div", "Loading lithologies...");
+  }
+
+  return h(_LithologyList, {
+    lithologies: liths,
+    getItemHref(data) {
+      return `https://dev.macrostrat.org/lex/lithology/${data.lith_id}`;
+    },
   });
 }