Merge branch 'main' into columnnav-update

* main:
  Lithology tags can now be clickable or links
  Allow setting root component for tags; fix stories
  Handle entity tags in light mode
  Handle white background in light mode
  Styling
  Styling fix
  Selecting glitch fixed
  Edit entities
  Made functions for types
  Add overlay
  Clean up TypeList code
  Entity types deletable
  Select all entitties of certain type

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}`;
+    },
   });
 }

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

@@ -51,7 +51,7 @@ export function getTagStyle(
   options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean }
 ): CSSProperties {
   const _baseColor = asChromaColor(baseColor ?? "#fff");
-  const { highlighted = true, inDarkMode = false, active = false } = options;
+  const { highlighted = true, inDarkMode = useDarkMode().isEnabled, active = false } = options;
 
   let mixAmount = highlighted ? 0.8 : 0.5;
   let backgroundAlpha = highlighted ? 0.8 : 0.2;
@@ -61,17 +61,23 @@ export function getTagStyle(
     backgroundAlpha = 1;
   }
 
-  const mixTarget = inDarkMode ? "white" : "black";
+  const mixTarget = "black";
 
   const color = active ? "#000" : _baseColor.mix(mixTarget, mixAmount).hex();
   const borderColor = highlighted
     ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()
     : "transparent";
 
-  const backgroundColor = active ? 
+  let backgroundColor = active ? 
     _baseColor.alpha(backgroundAlpha).hex() :
     normalizeColor(_baseColor.alpha(backgroundAlpha).hex());
 
+  // handle white backgrounds in light mode
+  if (!inDarkMode && backgroundColor === "#ffffff") {
+    console.log("Adjusting background color for light mode:", backgroundColor);
+    backgroundColor = "#f0f0f0";
+  }
+
   return {
     color,
     backgroundColor,

packages/feedback-components/src/extractions/types.ts

@@ -1,4 +1,4 @@
-type EntityType = { name: string; color: string; id: number };
+type EntityType = { name: string; color: string; id: number, description?: string };
 type Match = any;
 
 export interface Entity {