@macrostrat/column-views 3.2.1 → 3.3.0

package/src/maps/{units-overlay/index.ts → layers/units.ts}

@@ -3,7 +3,7 @@ import {
   useMacrostratColumns,
 } from "@macrostrat/data-provider";
 import { useAPIResult } from "@macrostrat/ui-components";
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMapStyleOperator, useOverlayStyle } from "@macrostrat/mapbox-react";
 import { FeatureCollection } from "geojson";
 import { useMemo } from "react";
 import { mergeStyles, setGeoJSON } from "@macrostrat/mapbox-utils";
@@ -15,9 +15,11 @@ import {
   loadStyleImage,
   StyleFragment,
 } from "@macrostrat/map-styles";
-import { asChromaColor, getCSSVariable } from "@macrostrat/color-utils";
+import { asChromaColor } from "@macrostrat/color-utils";
 import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 import pMap from "p-map";
+import { BaseColumnsLayer } from "./columns";
+import h from "@macrostrat/hyper";
 
 export interface UnitsOverlayProps {
   time: number;
@@ -30,6 +32,10 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
   const { time, ageSpan = 0.05, patterns = false } = props;
   const lithMap = useLithologies();
 
+  useOverlayStyle(() => {
+    return buildUnitsStyle({ patterns });
+  }, [patterns]);
+
   useMapStyleOperator(
     (map) => {
       if (!patterns) return;
@@ -60,21 +66,6 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
   const units: UnitLong[] = useAPIResult("/units", params);
   const columns = useMacrostratColumns(params.project, false);
 
-  // Set up basic columns layer
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: columns,
-      };
-      setGeoJSON(map, "columns", data);
-    },
-    [columns],
-  );
-
   useMapStyleOperator(
     (map) => {
       if (units == null || columns == null || lithMap == null) {
@@ -99,7 +90,30 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
     [units, lithMap, columns, patterns],
   );
 
-  return null;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  const isShown = ["boolean", ["feature-state", "shown"], false];
+
+  const opacity = [
+    "case",
+    ["all", isHovered, isShown],
+    0.9,
+    isShown,
+    0.8,
+    isHovered,
+    0.3,
+    0.0,
+  ];
+
+  return h([
+    h(BaseColumnsLayer, {
+      enabled: true,
+      columns,
+      opacity,
+      lineOpacity: 0.2,
+      lineColor: "lightgray",
+      color: "transparent",
+    }),
+  ]);
 }
 
 function handleUnitsLayerUpdate(
@@ -238,77 +252,13 @@ type UnitsStyleOptions = {
 };
 
 export function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {
-  const { color = null, patterns = false } = opts;
-
-  let columnBaseColor: any =
-    color ?? getCSSVariable("--text-subtle-color", "black");
-  const columnSelectedColor = getCSSVariable("--selection-color", "purple");
+  const { patterns = false } = opts;
 
   // If color is in the feature state or geojson properties, use that as second choice
 
-  let columnColor: any = [
-    "coalesce",
-    ["feature-state", "color"],
-    ["get", "color"],
-    columnBaseColor,
-  ];
-
   const baseStyle: StyleFragment = {
-    sources: {
-      columns: buildGeoJSONSource(),
-    },
+    sources: {},
     version: 8,
-    layers: [
-      {
-        id: "columns-fill",
-        type: "fill",
-        source: "columns",
-        paint: {
-          "fill-color": columnColor,
-          "fill-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1,
-          ],
-        },
-      },
-      {
-        id: "columns-line",
-        type: "line",
-        source: "columns",
-        paint: {
-          "line-color": columnColor,
-          "line-width": 1,
-          "line-opacity": 0.5,
-        },
-      },
-      {
-        id: "columns-points",
-        type: "circle",
-        source: "columns",
-        paint: {
-          "circle-radius": 4,
-          "circle-color": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            columnColor,
-            columnBaseColor,
-          ],
-          "circle-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1,
-          ],
-        },
-        filter: ["==", "$type", "Point"],
-      },
-    ],
   };
 
   if (!patterns) {

package/src/maps/unit-map.stories.ts

@@ -1,9 +1,13 @@
 import h from "@macrostrat/hyper";
 import { Meta } from "@storybook/react-vite";
-import { InsetMap } from "./_shared";
+import { InsetMap } from "./inset-map";
 import { MacrostratDataProvider } from "@macrostrat/data-provider";
-import { useMemo } from "react";
-import { buildUnitsStyle, MacrostratUnitsOverlay } from "./units-overlay";
+import { MacrostratUnitsOverlay } from "./layers/units";
+import {
+  ColumnHoverInteraction,
+  ColumnSelectionManager,
+} from "./column-navigation";
+import { useState } from "react";
 
 // @ts-ignore
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
@@ -21,13 +25,7 @@ export default {
 } as Meta<typeof InsetMap>;
 
 function UnitMapComponent(props) {
-  const overlayStyles = useMemo(() => {
-    let styles: any[] = [
-      buildUnitsStyle({ color: "#444", patterns: props.patterns }),
-    ];
-    return styles;
-  }, []);
-
+  const { children, ...rest } = props;
   return h(
     MacrostratDataProvider,
     {
@@ -40,9 +38,8 @@ function UnitMapComponent(props) {
         {
           style: { width: "800px", height: "600px" },
           accessToken: mapboxToken,
-          overlayStyles,
         },
-        h(MacrostratUnitsOverlay, props),
+        [h(MacrostratUnitsOverlay, rest), children],
       ),
     ),
   );
@@ -62,3 +59,21 @@ export const WithPatterns = {
     patterns: true,
   },
 };
+
+export const WithColumnSelection = {
+  args: {
+    time: 100,
+    ageSpan: 0.05,
+    patterns: false,
+  },
+  render(args) {
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    return h(UnitMapComponent, args, [
+      h(ColumnHoverInteraction),
+      h(ColumnSelectionManager, {
+        selectedColumn,
+        onSelectColumn: setSelectedColumn,
+      }),
+    ]);
+  },
+};

package/src/unit-details/age-range.module.sass

@@ -0,0 +1,15 @@
+.interval-proportions
+  display: inline-flex
+  flex-flow: row wrap
+  gap: 0.5em
+  text-align: right
+  align-items: baseline
+
+.interval-proportions, .discourage-break
+  align-items: baseline
+  white-space: nowrap
+  display: inline-flex
+  gap: 0.5em
+
+.sep
+  color: var(--secondary-color)

package/src/unit-details/age-range.ts

@@ -0,0 +1,269 @@
+import {
+  DataField,
+  IntervalShort,
+  IntervalTag,
+  type IntervalTagProps,
+  ItemList,
+  Value,
+} from "@macrostrat/data-components";
+import { useMacrostratDefs } from "@macrostrat/data-provider";
+import h from "./age-range.module.sass";
+import { formatProportion, formatRange } from "./utils";
+import classNames from "classnames";
+import { useMemo } from "react";
+
+export function AgeField({ unit, children, ...rest }) {
+  const [_b_age, _t_age, _unit] = getAgeRange(unit);
+
+  return h(
+    DataField,
+    {
+      label: "Age",
+      value: formatRange(_b_age, _t_age),
+      unit: _unit,
+      ...rest,
+    },
+    children,
+  );
+}
+
+export function AgeRange({
+  data,
+  className,
+}: {
+  data: {
+    t_age: number;
+    b_age: number;
+  };
+  className?: string;
+}) {
+  const [_b_age, _t_age, _unit] = getAgeRange(data);
+
+  return h(Value, {
+    value: formatRange(_b_age, _t_age),
+    unit: _unit,
+    className,
+  });
+}
+
+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,
+  minimumFractionDigits = 0,
+}) {
+  let unit = "Myr";
+  if (value < 0.8) {
+    unit = "kyr";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Gyr";
+    value /= 1000;
+  }
+
+  let _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit });
+}
+
+interface UnitIntervalConstraints {
+  b_int_id?: number;
+  t_int_id?: number;
+  b_prop?: number;
+  t_prop?: number;
+  b_int_name?: string;
+  t_int_name?: string;
+  b_age?: number;
+  t_age?: number;
+}
+
+export interface IntervalProportionsProps extends Omit<
+  IntervalTagProps,
+  "interval"
+> {
+  unit: UnitIntervalConstraints;
+  showProportions?: boolean;
+  calculateProportionsFromAges?: boolean;
+}
+
+export function IntervalProportions({
+  unit,
+  className,
+  showProportions,
+  calculateProportionsFromAges = true,
+  ...rest
+}: IntervalProportionsProps) {
+  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */
+  if (unit.b_int_id == null && unit.t_int_id == null) return null;
+
+  let _showProps = showProportions;
+
+  const i0 = unit.b_int_id;
+  const i1 = unit.t_int_id;
+
+  /** Get interval information */
+  const intervalMap = useMacrostratDefs("intervals");
+  const [int0, int1] = useMemo(() => {
+    const int0 = intervalMap?.get(i0) ?? {};
+    if (i0 === i1) {
+      return [int0, int0];
+    }
+    const int1 = intervalMap?.get(i1) ?? {};
+    return [int0, int1];
+  }, [intervalMap, i0, i1]);
+
+  const interval0: IntervalShort = {
+    id: i0,
+    name: unit.b_int_name,
+    ...int0,
+  };
+
+  let b_prop = unit.b_prop;
+  let t_prop = unit.t_prop;
+
+  // If we have b_age and t_age, then we can calculate proportions if they are not given
+  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {
+    b_prop = getProportion(unit.b_age, int0);
+  }
+  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {
+    t_prop = getProportion(unit.t_age, int1);
+  }
+
+  // If there are no proportions given and we are not explicitly directed to show them,
+  // then we set them to hidden.
+  if (b_prop == null && t_prop == null) {
+    _showProps ??= false;
+  }
+
+  /*
+    Set default proportions to 0 and 1 if they are not given,
+    so that we can display "base" and "top" labels
+   */
+  b_prop ??= 0;
+  t_prop ??= 1;
+
+  let p0: any = null;
+  let p1: any = null;
+
+  if (_showProps !== false) {
+    p1 = h(Proportion, { value: t_prop });
+
+    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
+      // We have a single interval with undefined proportions
+      p0 = h(Proportion, { value: b_prop });
+    }
+
+    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
+      p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+    }
+  }
+
+  return h(
+    ItemList,
+    { className: classNames("interval-proportions", className) },
+    [
+      h(IntervalTag, {
+        interval: interval0,
+        prefix: p0,
+        ...rest,
+      }),
+      h.if(i0 != i1)("span.discourage-break", [
+        h("span.sep", " to "),
+        h(IntervalTag, {
+          interval: {
+            id: i1,
+            name: unit.t_int_name,
+            ...int1,
+          },
+          prefix: p1,
+          ...rest,
+        }),
+      ]),
+    ],
+  );
+}
+
+function getProportion(age: number, interval: IntervalShort): number | null {
+  /** Get proportion with the age */
+  console.log(age, interval);
+  return (interval.b_age - age) / (interval.b_age - interval.t_age);
+}
+
+function Proportion({ value }) {
+  let content = null;
+  if (value == 0) {
+    content = "base";
+  } else if (value == 1) {
+    content = "top";
+  } else {
+    content = formatProportion(value * 100) + "%";
+  }
+
+  return h("span.proportion", content);
+}
+
+export function getAgeRange(_unit) {
+  let b_age = _unit.b_age;
+  let t_age = _unit.t_age;
+  let unit = "Ma";
+
+  if (b_age < 0.8 && t_age < 1.2) {
+    b_age *= 1000;
+    t_age *= 1000;
+    unit = "ka";
+  } else if (b_age > 800 && t_age > 1200) {
+    b_age /= 1000;
+    t_age /= 1000;
+    unit = "Ga";
+  }
+
+  return [b_age, t_age, unit];
+}
+
+export 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];
+}

package/src/unit-details/index.ts

@@ -1,3 +1,4 @@
 export * from "./panel";
 export * from "./popover";
 export * from "./modal-panel";
+export * from "./age-range";

package/src/unit-details/panel.module.sass

@@ -82,15 +82,6 @@
   margin: 0
   padding-left: 0
 
-.interval-proportions
-  flex-grow: 1
-  width: 100%
-  text-align: right
-  .discourage-break
-    white-space: nowrap
-  .sep
-    margin: 0 0.3em
-
 .clickable
   cursor: pointer