Add new 'minimal' option to unconformityLabels

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).
 
+## [2.2.2] - 2025-12-04
+
+- Fix a bug with unit deselection
+- Fix a lack of updates in state management code
+
 ## [2.2.1] - 2025-11-29
 
 - Start unifying state management components

packages/column-views/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Data views for Macrostrat stratigraphic columns",
   "type": "module",
   "source": "src/index.ts",

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

@@ -137,12 +137,11 @@ body:global(.dark-mode) .column-container
   --unit-font-weight: 400
 
 .unconformity-inner
-  //border-left: 1.5px dotted var(--secondary-color)
   position: absolute
-  top: 5px
-  bottom: 5px
-  left: -3px
-  right: -2px
+  top: 3px
+  bottom: 3px
+  left: 0
+  right: 0
   display: flex
   justify-content: center
   align-items: center
@@ -155,6 +154,9 @@ body:global(.dark-mode) .column-container
     font-weight: 400
     color: var(--secondary-color)
 
+.timescale-column .unconformity-inner
+  border-left: 1.5px dotted var(--secondary-color)
+  left: -3px // align with age axis
 
 
 .column-title-row

packages/column-views/src/column.ts

@@ -61,13 +61,16 @@ interface BaseColumnProps extends SectionSharedProps {
   // Timescale properties
   showTimescale?: boolean;
   timescaleLevels?: number | [number, number];
+  unconformityLabels?: boolean | UnconformityLabelPlacement;
   onMouseOver?: (
     unit: UnitLong | null,
     height: number | null,
     evt: MouseEvent,
   ) => void;
 }
 
+export type UnconformityLabelPlacement = "minimal" | "prominent" | "none";
+
 export interface ColumnProps
   extends Padding,
     BaseColumnProps,
@@ -224,7 +227,7 @@ function ColumnInner(props: ColumnInnerProps) {
 
   const {
     unitComponent = UnitComponent,
-    unconformityLabels = true,
+    unconformityLabels = "minimal",
     showLabels = true,
     width: _width = 300,
     columnWidth: _columnWidth = 150,
@@ -242,6 +245,15 @@ function ColumnInner(props: ColumnInnerProps) {
 
   const { axisType } = useMacrostratColumnData();
 
+  // Coalesce unconformity label setting to a boolean
+  let _timescaleUnconformityLabels = false;
+  let _sectionUnconformityLabels = false;
+  if (unconformityLabels === true || unconformityLabels === "prominent") {
+    _sectionUnconformityLabels = true;
+  } else if (unconformityLabels === "minimal") {
+    _timescaleUnconformityLabels = true;
+  }
+
   let width = _width;
   let columnWidth = _columnWidth;
   if (columnWidth > width) {
@@ -267,15 +279,18 @@ function ColumnInner(props: ColumnInnerProps) {
     },
     h("div.column", { ref: columnRef }, [
       h(ageAxisComponent),
-      h.if(_showTimescale)(CompositeTimescale, { levels: timescaleLevels }),
+      h.if(_showTimescale)(CompositeTimescale, {
+        levels: timescaleLevels,
+        unconformityLabels: _timescaleUnconformityLabels,
+      }),
       h(SectionsColumn, {
         unitComponent,
         showLabels,
         width,
         columnWidth,
         showLabelColumn,
         clipUnits,
-        unconformityLabels,
+        unconformityLabels: _sectionUnconformityLabels,
         maxInternalColumns,
       }),
       children,

packages/column-views/src/section.ts

@@ -199,6 +199,7 @@ function SectionUnits(props: SectionProps) {
 
 interface CompositeTimescaleProps {
   levels?: [number, number] | number;
+  unconformityLabels?: boolean;
 }
 
 export function CompositeTimescale(props: CompositeTimescaleProps) {
@@ -215,7 +216,6 @@ export function CompositeTimescale(props: CompositeTimescaleProps) {
 
 type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
   packages: PackageScaleLayoutData[];
-  unconformityLabels?: boolean;
 };
 
 export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
@@ -316,6 +316,8 @@ function Unconformity({
 
   const ageGap = Math.abs(upperAge - lowerAge);
 
+  let maximumFractionDigits = 0;
+
   let className: string = null;
   if (ageGap > 1000) {
     className = "giga";
@@ -325,14 +327,17 @@ function Unconformity({
     className = "large";
   } else if (ageGap < 1) {
     className = "small";
+    maximumFractionDigits = 2;
+  } else {
+    maximumFractionDigits = 1;
   }
 
   let val: ReactNode;
   if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {
-    const _txt = ageGap.toLocaleString("en-US", { maximumFractionDigits: 2 });
+    const _txt = ageGap.toLocaleString("en-US", { maximumFractionDigits });
     val = h(Value, { value: _txt, unit: "m" });
   } else {
-    val = h(Duration, { value: ageGap });
+    val = h(Duration, { value: ageGap, maximumFractionDigits });
   }
 
   let prefix: ReactNode = null;

packages/column-views/stories/arg-types.ts

@@ -0,0 +1,64 @@
+export const sharedColumnArgTypes = {
+  columnID: {
+    control: {
+      type: "number",
+    },
+  },
+  selectedUnit: {
+    control: {
+      type: "number",
+    },
+  },
+  t_age: {
+    control: {
+      type: "number",
+    },
+  },
+  b_age: {
+    control: {
+      type: "number",
+    },
+  },
+  unconformityLabels: {
+    options: ["minimal", "prominent", "none"],
+    control: { type: "radio" },
+  },
+  axisType: {
+    options: ["age", "ordinal", "depth"],
+    control: { type: "radio" },
+  },
+  mergeSections: {
+    options: ["all", "overlapping", null],
+    control: { type: "radio" },
+  },
+  pixelScale: {
+    control: {
+      type: "number",
+    },
+  },
+  collapseSmallUnconformities: {
+    control: {
+      type: "boolean",
+    },
+  },
+  minSectionHeight: {
+    control: {
+      type: "number",
+    },
+  },
+  targetUnitHeight: {
+    control: {
+      type: "number",
+    },
+  },
+  showLabelColumn: {
+    control: {
+      type: "boolean",
+    },
+  },
+  maxInternalColumns: {
+    control: {
+      type: "number",
+    },
+  },
+};

packages/column-views/stories/column-navigation.stories.ts

@@ -9,29 +9,7 @@ import {
   EnvironmentColoredUnitComponent,
 } from "../src";
 import { useColumnSelection } from "./column-ui/utils";
-
-const baseArgTypes = {
-  columnID: {
-    control: {
-      type: "number",
-    },
-  },
-  selectedUnit: {
-    control: {
-      type: "number",
-    },
-  },
-  t_age: {
-    control: {
-      type: "number",
-    },
-  },
-  b_age: {
-    control: {
-      type: "number",
-    },
-  },
-};
+import { sharedColumnArgTypes } from "./arg-types";
 
 export default {
   title: "Column views/Column navigation",
@@ -43,45 +21,7 @@ export default {
     targetUnitHeight: 20,
   },
   argTypes: {
-    ...baseArgTypes,
-    axisType: {
-      options: ["age", "ordinal", "depth"],
-      control: { type: "radio" },
-    },
-    mergeSections: {
-      options: ["all", "overlapping", null],
-      control: { type: "radio" },
-    },
-    pixelScale: {
-      control: {
-        type: "number",
-      },
-    },
-    collapseSmallUnconformities: {
-      control: {
-        type: "boolean",
-      },
-    },
-    minSectionHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    targetUnitHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    showLabelColumn: {
-      control: {
-        type: "boolean",
-      },
-    },
-    maxInternalColumns: {
-      control: {
-        type: "number",
-      },
-    },
+    ...sharedColumnArgTypes,
   },
 } as Meta<typeof ColumnStoryUI>;
 
@@ -115,7 +55,6 @@ Minimal.args = {
 export const eODP = Template.bind({});
 eODP.args = {
   columnID: 5576,
-  inProcess: true,
   axisType: "depth",
   projectID: 3,
   pixelScale: undefined,

packages/column-views/stories/column-page.stories.ts

@@ -8,22 +8,24 @@ import {
   UnitDetailsPanelWithNavigation,
   ReferencesField,
   UnitDetailsFeature,
-  Identifier,
   ColumnBasicInfo,
 } from "../src";
 import { useColumnBasicInfo, useColumnUnits } from "./column-ui/utils";
 import styles from "./column-page.stories.module.sass";
 import { UnitLong } from "@macrostrat/api-types";
 import { useArgs } from "storybook/preview-api";
-import { DataField } from "@macrostrat/data-components";
-import { FlexRow } from "@macrostrat/ui-components";
+import { sharedColumnArgTypes } from "./arg-types";
 
 export default {
   title: "Column views/Column page",
   component: ColumnStoryUI,
   args: {
     columnID: 494,
     selectedUnitID: 15160,
+    unconformityLabels: "minimal",
+  },
+  argTypes: {
+    ...sharedColumnArgTypes,
   },
 } as Meta<typeof ColumnStoryUI>;
 
@@ -62,7 +64,6 @@ function ColumnStoryUI({
         units,
         selectedUnit: selectedUnitID,
         onUnitSelected: setSelectedUnitID,
-        unconformityLabels: true,
         keyboardNavigation: true,
         columnWidth: 300,
         showUnitPopover: false,