Merge branch 'main' of https://github.com/UW-Macrostrat/web-components

* 'main' of https://github.com/UW-Macrostrat/web-components:
  Update column selection and age axis
  Split out mouse event handlers
  Updated column mouse over

Author: davenquinn

packages/column-views/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).
 
+## [Unreleased]
+
+- Add mouseover handlers to allow age cursor to be reported
+- Add an `AgeCursor` component
+
 ## [2.0.1] - 2025-05-08
 
 Solve a problem with strict mode

packages/column-views/src/age-axis.module.sass

@@ -25,3 +25,23 @@
   max-height: 100vh
 .age-axis-unit
   color: var(--text-subtle-color)
+
+.age-cursor
+  position: absolute
+  left: 30px
+  right: 0
+  pointer-events: none
+  .line
+    border-bottom: 2px solid var(--column-axis-cursor-color, var(--column-cursor-color, var(--column-stroke-color)))
+    transform: translateY(-1px)
+
+  .label
+    writing-mode: vertical-lr
+    padding: 4px 2px
+    transform: rotate(180deg) translate(16px, 50%)
+    background-color: var(--column-background-color)
+    text-align: center
+
+
+
+    

packages/column-views/src/age-axis.ts

@@ -1,17 +1,17 @@
 import hyper from "@macrostrat/hyper";
 import {
   SVG,
-  ColumnSVG,
   ColumnAxis,
   ColumnContext,
   ColumnAxisType,
   AgeAxis,
 } from "@macrostrat/column-components";
 import { useContext } from "react";
 import styles from "./age-axis.module.sass";
-import { useMacrostratColumnData } from "./data-provider";
+import { useCompositeScale, useMacrostratColumnData } from "./data-provider";
 import { Parenthetical } from "@macrostrat/data-components";
 import { PackageScaleLayoutData } from "./prepare-units/composite-scale";
+import { AgeLabel } from "./unit-details";
 
 const h = hyper.styled(styles);
 
@@ -103,3 +103,25 @@ export function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {
     ),
   ]);
 }
+
+export function AgeCursor({ age }) {
+  /** A cursor that shows the age at a specific point on the age axis. */
+  const scale = useCompositeScale();
+  const heightPx = scale(age);
+
+  console.log(age, heightPx);
+
+  if (age == null || heightPx == null) {
+    return null;
+  }
+
+  return h(
+    "div.age-cursor",
+    {
+      style: {
+        top: heightPx,
+      },
+    },
+    [h("div.line"), h(AgeLabel, { age, className: "label" })]
+  );
+}

packages/column-views/src/column.ts

@@ -2,7 +2,7 @@ import { ColumnAxisType } from "@macrostrat/column-components";
 import { hyperStyled } from "@macrostrat/hyper";
 import { useDarkMode } from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { RefObject, useRef, HTMLAttributes } from "react";
+import { RefObject, useRef, HTMLAttributes, useCallback } from "react";
 import styles from "./column.module.sass";
 import {
   UnitSelectionProvider,
@@ -15,6 +15,7 @@ import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
 import { UnitSelectionPopover } from "./unit-details";
 import {
   MacrostratColumnDataProvider,
+  useCompositeScale,
   useMacrostratColumnData,
 } from "./data-provider";
 import {
@@ -38,6 +39,11 @@ interface BaseColumnProps extends SectionSharedProps {
   // Timescale properties
   showTimescale?: boolean;
   timescaleLevels?: number | [number, number];
+  onMouseOver?: (
+    unit: UnitLong | null,
+    height: number | null,
+    evt: MouseEvent
+  ) => void;
 }
 
 export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
@@ -134,12 +140,11 @@ function ColumnInner(props: ColumnInnerProps) {
     showTimescale,
     timescaleLevels,
     maxInternalColumns,
+    onMouseOver,
   } = props;
 
   const { axisType } = useMacrostratColumnData();
 
-  const dispatch = useUnitSelectionDispatch();
-
   let width = _width;
   let columnWidth = _columnWidth;
   if (columnWidth > width) {
@@ -159,9 +164,7 @@ function ColumnInner(props: ColumnInnerProps) {
   return h(
     ColumnContainer,
     {
-      onClick(evt) {
-        dispatch?.(null, null, evt as any);
-      },
+      ...useMouseEventHandlers(onMouseOver),
       className,
     },
     h("div.column", { ref: columnRef }, [
@@ -182,6 +185,55 @@ function ColumnInner(props: ColumnInnerProps) {
   );
 }
 
+type ColumnMouseOverHandler = (
+  unit: UnitLong | null,
+  height: number | null,
+  evt: MouseEvent
+) => void;
+
+function useMouseEventHandlers(
+  _onMouseOver: ColumnMouseOverHandler | null = null
+) {
+  /** Click event handler */
+
+  // Click handler for unit selection
+  const dispatch = useUnitSelectionDispatch();
+  const onClick = useCallback(
+    (evt) => {
+      dispatch?.(null, null, evt as any);
+    },
+    [dispatch]
+  );
+
+  /** Hover event handlers */
+  const scale = useCompositeScale();
+
+  const onMouseOver = useCallback(
+    (evt) => {
+      const height = scale.invert(
+        evt.clientY - evt.currentTarget.getBoundingClientRect().top
+      );
+      _onMouseOver?.(null, height, evt);
+    },
+    [scale, _onMouseOver]
+  );
+
+  const onMouseOut = useCallback(() => {
+    _onMouseOver?.(null, null, null);
+  }, [_onMouseOver]);
+
+  if (_onMouseOver == null) {
+    return {
+      onClick,
+      onMouseOver: undefined,
+      onMouseMove: undefined,
+      onMouseOut: undefined,
+    };
+  }
+
+  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };
+}
+
 export interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }

packages/column-views/src/prepare-units/composite-scale.ts

@@ -3,6 +3,7 @@ import { ColumnAxisType } from "@macrostrat/column-components";
 import { ensureArray, getUnitHeightRange } from "./utils";
 import { ScaleLinear, scaleLinear } from "d3-scale";
 import { UnitLong } from "@macrostrat/api-types";
+import { CompositeColumnScale } from "@macrostrat/column-views";
 
 export interface ColumnHeightScaleOptions {
   /** A fixed pixel scale to use for the section (pixels per Myr) */
@@ -268,41 +269,79 @@ function findAverageUnitHeight(
   return unitHeights.reduce((a, b) => a + b, 0) / unitHeights.length;
 }
 
+interface CompositeColumnScale {
+  (age: number): number | null;
+  copy(): CompositeColumnScale;
+  domain(): [number, number];
+  invert(pixelHeight: number): number | null;
+}
+
 export function createCompositeScale(
   sections: PackageLayoutData[],
   interpolateUnconformities: boolean = false
-): (age: number) => number | null {
+): CompositeColumnScale {
   /** Create a scale that works across multiple packages */
   // Get surfaces at which scale breaks
   let scaleBreaks: [number, number][] = [];
   for (const section of sections) {
-    const { pixelHeight, pixelScale, offset, domain } = section.scaleInfo;
+    const { pixelHeight, offset, domain } = section.scaleInfo;
 
     scaleBreaks.push([domain[1], offset]);
     scaleBreaks.push([domain[0], offset + pixelHeight]);
   }
   // Sort the scale breaks by age
   scaleBreaks.sort((a, b) => a[0] - b[0]);
 
-  return (age) => {
-    /** Given an age, find the corresponding pixel position */
-    // Iterate through the sections to find the correct one
-
+  const scale = (age) => {
     // Accumulate scale breaks and pixel height
-    let pixelHeight = 0;
-    let pixelScale = 0;
+    let lastHeight = 0;
     let lastAge = null;
     for (const [age1, height] of scaleBreaks) {
       if (age <= age1) {
-        if (lastAge != null) {
-          pixelHeight += (age - lastAge) * pixelScale;
-          return pixelHeight;
-        }
-        lastAge = age;
-        pixelHeight = height;
+        let pixelScale = (height - lastHeight) / (age1 - lastAge);
+        return lastHeight + (age - lastAge) * pixelScale;
       }
+      lastAge = age1;
+      lastHeight = height;
     }
   };
+
+  scale.copy = () => {
+    return createCompositeScale(sections, interpolateUnconformities);
+  };
+
+  scale.domain = () => {
+    /** Return the domain of the scale */
+    const firstSection = sections[0].scaleInfo.domain;
+    const lastSection = sections[sections.length - 1].scaleInfo.domain;
+    return [firstSection[0], lastSection[1]];
+  };
+
+  scale.invert = (pixelHeight) => {
+    /** Invert the scale to get the age at a given pixel height */
+    // Iterate through the sections to find the correct one
+    let lastAge = null;
+    for (const section of sections) {
+      const {
+        pixelHeight: sectionHeight,
+        pixelScale,
+        offset,
+        domain,
+      } = section.scaleInfo;
+      if (
+        pixelHeight >= offset &&
+        pixelHeight <= offset + sectionHeight &&
+        pixelScale > 0
+      ) {
+        const age = domain[1] + (pixelHeight - offset) / pixelScale;
+        return age;
+      }
+      lastAge = domain[1];
+    }
+    return null;
+  };
+
+  return scale as CompositeColumnScale;
 }
 
 /** Collapse sections separated by unconformities that are smaller than a given pixel height. */

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

@@ -346,6 +346,48 @@ function getAgeRange(_unit) {
   return [b_age, t_age, unit];
 }
 
+function getAge(value) {
+  /** Get the age value in Ma, ka, or Ga as appropriate */
+  let unit = "Ma";
+  if (value < 0.8) {
+    unit = "ka";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Ga";
+    value /= 1000;
+  }
+
+  return [value, unit];
+}
+
+export function AgeLabel({
+  age,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+  className,
+}: {
+  age: number;
+  className?: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+}) {
+  /** Component to display a single age value with unit conversion from
+   * Ma to ka or Ga as appropriate.
+   */
+  const [value, unit] = getAge(age);
+
+  const _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit, className });
+}
+
 export function Duration({
   value,
   maximumFractionDigits = 2,