@macrostrat/column-views 1.0.3 → 2.0.1

package/src/section.ts

@@ -1,69 +1,151 @@
-import { CompositeUnitsColumn, IUnit } from "./units";
-import { ReactNode, useMemo } from "react";
-import { AgeAxis } from "./age-axis";
+import {
+  CompositeUnitsColumn,
+  LabelTrackerProvider,
+  SectionLabelsColumn,
+} from "./units";
+import { ReactNode, FunctionComponent, useMemo } from "react";
 import { Timescale, TimescaleOrientation } from "@macrostrat/timescale";
-import { ColumnSVG } from "@macrostrat/column-components";
-import { MacrostratColumnProvider } from "./index";
+import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import hyper from "@macrostrat/hyper";
 import styles from "./column.module.sass";
+import type { ExtUnit } from "./prepare-units/helpers";
+import { PackageScaleLayoutData } from "./prepare-units/composite-scale";
+import {
+  useMacrostratColumnData,
+  useMacrostratUnits,
+  MacrostratColumnProvider,
+} from "./data-provider";
+import { Duration } from "./unit-details";
 
 const h = hyper.styled(styles);
 
-export interface SectionInfo {
-  section_id: number | number[];
-  t_age: number;
-  b_age: number;
-  units: IUnit[];
-}
-
-export interface IColumnProps {
-  data: IUnit[];
-  pixelScale?: number;
-  range?: [number, number];
-  unitComponent?: React.FunctionComponent<any>;
+export interface SectionSharedProps {
+  unitComponent?: FunctionComponent<any>;
   unitComponentProps?: any;
   showLabels?: boolean;
   width?: number;
   columnWidth?: number;
-  targetUnitHeight?: number;
   children?: ReactNode;
   showLabelColumn?: boolean;
+  axisType?: ColumnAxisType;
+  className?: string;
+  clipUnits?: boolean;
+  maxInternalColumns?: number;
+  // Space between sections
+  verticalSpacing?: number;
+  // Whether to render unconformity labels
+  unconformityLabels?: boolean;
+}
+
+export interface SectionProps extends SectionSharedProps {
+  units: ExtUnit[];
+  scaleInfo: PackageScaleLayoutData;
 }
 
-export function Section(props: IColumnProps) {
-  // Section with "squishy" time scale
+export function SectionsColumn(props: SectionSharedProps) {
   const {
-    data,
-    range: _range,
-    pixelScale: _pixelScale,
+    unconformityLabels = true,
     unitComponent,
+    unitComponentProps,
     showLabels = true,
-    targetUnitHeight = 20,
     width = 300,
     columnWidth = 150,
-    unitComponentProps,
     showLabelColumn = true,
+    clipUnits = true,
+    maxInternalColumns,
   } = props;
 
-  const b_age = Math.max(...data.map((d) => d.b_age));
-  const t_age = Math.min(...data.map((d) => d.t_age));
+  const units = useMacrostratUnits();
 
-  const range = useMemo(() => {
-    if (_range == null) {
-      return [b_age, t_age];
-    }
-    return _range;
-  }, [_range, b_age, t_age]);
+  // Get a unique key for the column
+  const key = units[0]?.unit_id;
 
-  const dAge = useMemo(() => range[0] - range[1], [range]);
+  return h(LabelTrackerProvider, { units, key }, [
+    h(SectionUnitsColumn, {
+      width: columnWidth,
+      unitComponent,
+      unitComponentProps,
+      showLabels,
+      clipUnits,
+      maxInternalColumns,
+      unconformityLabels,
+    }),
+    h.if(showLabelColumn)(SectionLabelsColumn, {
+      width: width - columnWidth,
+    }),
+  ]);
+}
+
+function SectionUnitsColumn(props: SectionSharedProps) {
+  const {
+    width,
+    showLabels,
+    unitComponent,
+    unitComponentProps,
+    clipUnits,
+    maxInternalColumns,
+    unconformityLabels = true,
+  } = props;
 
-  const pixelScale = useMemo(() => {
-    if (_pixelScale != null) return _pixelScale;
-    const targetHeight = targetUnitHeight * data.length;
-    return Math.ceil(targetHeight / dAge);
-  }, [_pixelScale, targetUnitHeight, data.length, dAge]);
+  const { sections, totalHeight } = useMacrostratColumnData();
+
+  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {
+    return section.scaleInfo;
+  });
+
+  const innerWidth = width - 2;
+
+  return h("div.section-units-container", { style: { width } }, [
+    h(
+      SVG,
+      {
+        className: "sections",
+        height: totalHeight,
+        innerWidth,
+        paddingH: 1,
+      },
+      sections.map((group) => {
+        const { units, scaleInfo, section_id } = group;
+
+        const key = `section-${section_id}`;
+        return h(
+          SectionUnits,
+          {
+            units,
+            scaleInfo,
+            key,
+            unitComponent,
+            unitComponentProps,
+            showLabels,
+            width: innerWidth,
+            clipUnits,
+            maxInternalColumns,
+          } // This unconformity is with the section _above_
+        );
+      })
+    ),
+    h.if(unconformityLabels)(UnconformityLabels, {
+      width,
+      sections: scaleData,
+    }),
+  ]);
+}
+
+function SectionUnits(props: SectionProps) {
+  // Section with "squishy" timescale
+  const {
+    units,
+    scaleInfo,
+    unitComponent,
+    showLabels = true,
+    width = 300,
+    unitComponentProps,
+    className,
+    clipUnits = true,
+    maxInternalColumns,
+  } = props;
 
-  const height = useMemo(() => dAge * pixelScale, [dAge, pixelScale]);
+  const { domain, pixelScale, pixelHeight } = scaleInfo;
 
   /** Ensure that we can arrange units into the maximum number
    * of columns defined by unitComponentProps, but that we don't
@@ -73,57 +155,155 @@ export function Section(props: IColumnProps) {
     return {
       ...unitComponentProps,
       nColumns: Math.min(
-        Math.max(...data.map((d) => d.column)) + 1,
-        unitComponentProps?.nColumns ?? 2
+        maxInternalColumns ?? Math.floor(width / 10),
+        unitComponentProps?.nColumns ?? Infinity,
+        Math.max(...units.map((d) => d.column)) + 1
       ),
+      //axisType,
     };
-  }, [data, unitComponentProps]);
+  }, [units, unitComponentProps, maxInternalColumns, width]);
+
+  const style = {
+    "--section-height": `${pixelHeight}px`,
+    "--section-width": `${width}px`,
+  };
 
   return h(
-    MacrostratColumnProvider,
+    "g.section",
+    { className, style, transform: `translate(0 ${scaleInfo.offset})` },
+    h(
+      MacrostratColumnProvider,
+      {
+        units,
+        domain,
+        pixelScale, // Actually pixels per myr,
+      },
+      h(CompositeUnitsColumn, {
+        width,
+        showLabels,
+        unitComponent,
+        unitComponentProps: _unitComponentProps,
+        clipToFrame: clipUnits,
+      })
+    )
+  );
+}
+
+interface CompositeTimescaleProps {
+  levels?: [number, number] | number;
+}
+
+export function CompositeTimescale(props: CompositeTimescaleProps) {
+  const { sections } = useMacrostratColumnData();
+  const sectionScales = sections.map((section) => {
+    return section.scaleInfo;
+  });
+
+  return h(CompositeTimescaleCore, {
+    packages: sectionScales,
+    ...props,
+  });
+}
+
+type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
+  packages: PackageScaleLayoutData[];
+  unconformityLabels?: boolean;
+};
+
+export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
+  const { levels = 3, packages, unconformityLabels = false } = props;
+
+  let _levels: [number, number];
+  if (typeof levels === "number") {
+    // If levels is a number, use the most common starting level
+    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];
+  } else {
+    _levels = levels;
+  }
+
+  const nCols = _levels[1] - _levels[0] + 1;
+
+  return h("div.timescale-column", [
+    h(
+      "div.timescales",
+      packages.map((group) => {
+        const { domain, pixelHeight, paddingTop, key } = group;
+        return h(
+          "div.timescale-container",
+          { style: { paddingTop, "--timescale-level-count": nCols }, key },
+          [
+            h(Timescale, {
+              orientation: TimescaleOrientation.VERTICAL,
+              length: pixelHeight,
+              levels: _levels,
+              absoluteAgeScale: true,
+              showAgeAxis: false,
+              ageRange: domain as [number, number],
+            }),
+          ]
+        );
+      })
+    ),
+    h.if(unconformityLabels)(UnconformityLabels, {
+      width: "100%",
+      sections: packages,
+      className: "unconformity-labels",
+    }),
+  ]);
+}
+
+export function UnconformityLabels(props: {
+  width: string | number;
+  sections: PackageScaleLayoutData[];
+  className?: string;
+}) {
+  const { width, sections, className } = props;
+
+  return h(
+    "div.unconformity-labels",
     {
-      divisions: data,
-      range,
-      pixelsPerMeter: pixelScale, // Actually pixels per myr
+      style: {
+        width,
+      },
+      className,
     },
-    [
-      h(AgeAxis, {
-        width: 20,
-        padding: 0,
-        paddingV: 10,
-        showLabel: false,
-      }),
-      h("div.timescale-container", { style: { marginTop: `10px` } }, [
-        h(Timescale, {
-          orientation: TimescaleOrientation.VERTICAL,
-          length: height,
-          levels: timescaleLevels as [number, number],
-          absoluteAgeScale: true,
-          showAgeAxis: false,
-          ageRange: range as [number, number],
-        }),
-      ]),
-      h(
-        ColumnSVG,
-        {
-          innerWidth: showLabels ? width : columnWidth,
-          paddingRight: 1,
-          paddingLeft: 1,
-          paddingV: 10,
-          innerHeight: height,
+    sections.map((scaleInfo, i) => {
+      const lastGroup = sections[i - 1];
+      const top = scaleInfo.offset - scaleInfo.paddingTop;
+      const upperAge = lastGroup?.domain[0];
+      const lowerAge = scaleInfo.domain[1];
+      return h(Unconformity, {
+        upperAge,
+        lowerAge,
+        style: {
+          width,
+          height: scaleInfo.paddingTop,
+          top,
         },
-        h(CompositeUnitsColumn, {
-          showLabelColumn: showLabelColumn,
-          width: showLabels ? width : columnWidth,
-          columnWidth,
-          gutterWidth: 5,
-          showLabels,
-          unitComponent,
-          unitComponentProps: _unitComponentProps,
-        })
-      ),
-    ]
+      });
+    })
   );
 }
 
-const timescaleLevels = [2, 5];
+function Unconformity({ upperAge, lowerAge, style }) {
+  if (upperAge == null || lowerAge == null) {
+    return null;
+  }
+
+  const ageGap = Math.abs(upperAge - lowerAge);
+
+  let className: string = null;
+  if (ageGap > 1000) {
+    className = "giga";
+  } else if (ageGap > 100) {
+    className = "mega";
+  } else if (ageGap > 10) {
+    className = "large";
+  } else if (ageGap < 1) {
+    className = "small";
+  }
+
+  return h("div.unconformity", { style, className }, [
+    h("div.unconformity-text", h(Duration, { value: ageGap })),
+  ]);
+}

package/src/unit-details/index.ts

@@ -1,215 +1,2 @@
-import hyper from "@macrostrat/hyper";
-import styles from "./index.module.sass";
-import { JSONView } from "@macrostrat/ui-components";
-import { Button } from "@blueprintjs/core";
-import { useState } from "react";
-import {
-  DataField,
-  EnvironmentsList,
-  Interval,
-  ItemList,
-  LithologyList,
-} from "@macrostrat/data-components";
-import { useUnitSelectionDispatch } from "../units/selection";
-import { useMacrostratUnits } from "../store";
-
-const h = hyper.styled(styles);
-
-export function UnitDetailsPanel({
-  unit,
-  onClose,
-}: {
-  unit: any;
-  onClose?: any;
-}) {
-  const [showJSON, setShowJSON] = useState(false);
-
-  let content = null;
-  if (showJSON) {
-    content = h(JSONView, { data: unit, showRoot: false });
-  } else {
-    content = h(UnitDetailsContent, { unit });
-  }
-
-  return h("div.unit-details-panel", [
-    h(LegendPanelHeader, {
-      onClose,
-      title: unit.unit_name,
-      id: unit.unit_id,
-      actions: [
-        h(Button, {
-          icon: "code",
-          small: true,
-          minimal: true,
-          className: "json-view-toggle",
-          onClick() {
-            setShowJSON(!showJSON);
-          },
-        }),
-      ],
-    }),
-    h("div.unit-details-content", [content]),
-  ]);
-}
-
-export function LegendPanelHeader({ title, id, onClose, actions = null }) {
-  return h("header.legend-panel-header", [
-    h.if(title != null)("h3", title),
-    h("div.spacer"),
-    h.if(id != null)("code", id),
-    actions,
-    h.if(onClose != null)(Button, {
-      icon: "cross",
-      minimal: true,
-      small: true,
-      onClick() {
-        onClose();
-      },
-    }),
-  ]);
-}
-
-function UnitDetailsContent({ unit }) {
-  let outcrop = unit.outcrop;
-  if (outcrop == "both") {
-    outcrop = "surface and subsurface";
-  }
-
-  return h("div.unit-details-content", [
-    h(DataField, {
-      label: "Thickness",
-      value: `${unit.min_thick}–${unit.max_thick}`,
-      unit: "m",
-    }),
-    h(LithologyList, { lithologies: unit.lith }),
-    h(DataField, {
-      label: "Age range",
-      value: `${unit.b_age}–${unit.t_age}`,
-      unit: "Ma",
-    }),
-    h(IntervalField, { unit }),
-    h(EnvironmentsList, { environments: unit.environ }),
-    h(DataField, { label: "Outcrop", value: outcrop }),
-    h(
-      DataField,
-      {
-        label: "Stratigraphic name",
-      },
-      h("span.strat-name-id", unit.strat_name_id)
-    ),
-    h(
-      DataField,
-      { label: "Above" },
-      h(UnitIDList, { units: unit.units_above })
-    ),
-    h(
-      DataField,
-      { label: "Below" },
-      h(UnitIDList, { units: unit.units_below })
-    ),
-    h(
-      DataField,
-      { label: "Color" },
-      h("span.color-swatch", { style: { backgroundColor: unit.color } })
-    ),
-  ]);
-}
-
-function UnitIDList({ units }) {
-  const u1 = units.filter((d) => d != 0);
-  const dispatch = useUnitSelectionDispatch();
-  const allUnits = useMacrostratUnits();
-
-  if (u1.length === 0) {
-    return h("span.no-units", "None");
-  }
-
-  let onClickHandler = null;
-  let tag = "span";
-  if (dispatch != null) {
-    onClickHandler = (id: number) => (evt) => {
-      console.log(units);
-      const unit = allUnits.find((d) => d.unit_id == id);
-      dispatch(unit, null, null);
-      evt.stopPropagation();
-    };
-    tag = "a";
-  }
-
-  return h(ItemList, { className: "unit-id-list" }, [
-    u1.map((unit) => {
-      return h(
-        tag,
-        { className: "unit-id", onClick: onClickHandler?.(unit) },
-        unit
-      );
-    }),
-  ]);
-}
-
-function IntervalField({ unit }) {
-  return h([
-    h(
-      DataField,
-      {
-        label: "Intervals",
-      },
-      h(IntervalProportions, { unit })
-    ),
-  ]);
-}
-
-function IntervalProportions({ unit }) {
-  const i0 = unit.b_int_id;
-  const i1 = unit.t_int_id;
-  let b_prop = unit.b_prop ?? 0;
-  let t_prop = unit.t_prop ?? 1;
-
-  if (i0 === i1 && b_prop === 0 && t_prop === 1) {
-    // We have a single interval with undefined proportions
-    return h(Interval, {
-      interval: {
-        id: i0,
-        name: unit.b_int_name,
-      },
-    });
-  }
-
-  return h(ItemList, { className: "interval-proportions" }, [
-    h(Proportion, { value: b_prop }),
-    h.if(i0 != i1)(Interval, {
-      interval: {
-        id: i0,
-        name: unit.b_int_name,
-      },
-      proportion: b_prop,
-    }),
-    h("span.sep", "to"),
-    h(Proportion, { value: t_prop }),
-    h(Interval, {
-      interval: {
-        id: i1,
-        name: unit.t_int_name,
-      },
-      proportion: t_prop,
-    }),
-  ]);
-}
-
-const formatProportion = (d) => {
-  if (d == null) return null;
-  return d.toFixed(1);
-};
-
-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 * from "./panel";
+export * from "./popover";

package/src/unit-details/{index.module.sass → panel.module.sass}

@@ -7,9 +7,25 @@
   position: sticky
   top: 0
   background-color: var(--panel-secondary-background-color)
-  margin: -1em -1em 0
   padding: 0.5em 1em
   z-index: 50
+  .title-container
+    display: flex
+    flex-direction: row
+    gap: 0.5em
+    align-items: center
+    margin: -0.5em 0
+    &:hover
+      .hidden-actions
+        display: flex
+        opacity: 0.5
+    h1, h2, h3
+      margin: 0.5em 0
+    .hidden-actions
+      display: none
+    button
+      transform: translateY(0px)
+
   code
     font-size: 0.9em
     color: var(--secondary-color)
@@ -19,24 +35,24 @@
     line-height: 1.5
     transform: translateY(2px)
 
-  h3
-    margin: 0 0 0.5em
-    font-size: 1.1em
+.unit-details-panel
+  display: flex
+  flex-direction: column
+  .unit-details-content-holder
+    flex: 1
+    overflow-y: scroll
 
 .unit-details-content
   position: relative
-  margin-top: 1em
-  margin-bottom: -0.5em
+  margin: 1em
 
 .proportion, .sep, .no-units
   color: var(--secondary-color)
   font-style: italic
-  font-size: 0.9em
 
 .strat-name-id, .unit-id
   font-family: var(--monospace-font)
   color: var(--secondary-color)
-  font-size: 0.9em
 
   &::before
     content: '#'
@@ -49,3 +65,18 @@
   margin-right: 0.2em
   border: 1px solid var(--panel-rule-color)
   display: inline-block
+
+.refs
+  list-style: none
+  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
+