@macrostrat/column-views 1.0.0

package/src/unit-details/index.ts

@@ -0,0 +1,215 @@
+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);
+}

package/src/units/boxes.module.sass

@@ -0,0 +1,3 @@
+.unit-label-container
+  pointer-events: none
+

package/src/units/boxes.ts

@@ -0,0 +1,221 @@
+import {
+  ColumnAxisType,
+  ColumnContext,
+  ColumnLayoutContext,
+  ForeignObject,
+  PatternDefsProvider,
+  useColumn,
+  useGeologicPattern,
+} from "@macrostrat/column-components";
+import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
+import hyper from "@macrostrat/hyper";
+import {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { resolveID, scalePattern } from "./resolvers";
+import { useSelectedUnit, useUnitSelectionDispatch } from "./selection";
+import { IUnit, transformAxisType } from "./types";
+import styles from "./boxes.module.sass";
+
+const h = hyper.styled(styles);
+
+export interface RectBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface UnitRectOptions {
+  widthFraction?: number;
+  axisType?: ColumnAxisType;
+}
+
+interface UnitProps extends Clickable, Partial<RectBounds>, UnitRectOptions {
+  division: IUnit;
+  resolveID?(IUnit): string;
+  UUID?: string;
+  defaultFill?: string;
+  widthFraction?: number;
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface LabeledUnitProps
+  extends UnitRectOptions,
+    Clickable,
+    Partial<RectBounds> {
+  division: IUnit;
+  label: string;
+  onLabelUpdated?(label: string, shown: boolean);
+  halfWidth?: boolean;
+}
+
+function useUnitRect(
+  division: IUnit,
+  options: UnitRectOptions = {}
+): RectBounds {
+  const { widthFraction = 1, axisType = ColumnAxisType.AGE } = options;
+  const { scale } = useContext(ColumnContext);
+  const { width } = useContext(ColumnLayoutContext);
+  const macrostratAxisKey = transformAxisType(axisType);
+  const t_key = "t_" + macrostratAxisKey;
+  const b_key = "b_" + macrostratAxisKey;
+
+  const topHeight = division[t_key];
+  const bottomHeight = division[b_key];
+  if (topHeight == null && bottomHeight == null) {
+    console.warn(
+      `Missing keys ${t_key} and ${b_key} for ${division.unit_id} (${division.unit_name})`
+    );
+  }
+
+  const y = scale(topHeight);
+  const height = Math.abs(scale(bottomHeight) - y);
+
+  return {
+    x: width * (1 - widthFraction),
+    y,
+    height,
+    width: widthFraction * width,
+  };
+}
+
+function Unit(props: UnitProps) {
+  const {
+    division: d,
+    children,
+    defaultFill = "transparent",
+    className,
+    widthFraction = 1,
+    ...baseBounds
+  } = props;
+
+  const { axisType } = useColumn();
+  const bounds = {
+    ...useUnitRect(d, { widthFraction, axisType }),
+    ...baseBounds,
+  };
+  const patternID = resolveID(d);
+  const fill = useGeologicPattern(patternID, defaultFill);
+  // Allow us to select this unit if in the proper context
+
+  const ref = useRef<HTMLElement>();
+
+  const [selected, onClick] = useUnitSelectionManager(ref, d);
+
+  return h("g.unit", { className }, [
+    h("rect.unit", {
+      ref,
+      ...bounds,
+      fill,
+      onClick,
+    }),
+    h.if(selected)("rect.selection-overlay", bounds),
+    children,
+  ]);
+}
+
+function useUnitSelectionManager(
+  ref: React.RefObject<HTMLElement>,
+  unit: IUnit
+): [boolean, (evt: Event) => void] {
+  const selectedUnit = useSelectedUnit();
+  const selected = selectedUnit?.unit_id == unit.unit_id;
+
+  const dispatch = useUnitSelectionDispatch();
+
+  const onClick = useCallback(
+    (evt: Event) => {
+      dispatch(unit, ref.current, evt);
+      evt.stopPropagation();
+    },
+    [unit, ref, dispatch]
+  );
+
+  useEffect(() => {
+    if (!selected) return;
+    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
+    dispatch(unit, ref.current, null);
+
+    // Scroll the unit into view
+    ref.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
+  }, [selected]);
+
+  return [selected, onClick];
+}
+
+function LabeledUnit(props: LabeledUnitProps) {
+  const { division, label, onLabelUpdated, widthFraction, ...baseBounds } =
+    props;
+
+  const { axisType } = useColumn();
+  const bounds = {
+    ...useUnitRect(division, { widthFraction, axisType }),
+    ...baseBounds,
+  };
+  const { width, height } = bounds;
+  return h(Unit, { className: "labeled-unit", division, ...bounds }, [
+    h(
+      ForeignObject,
+      { ...bounds, className: "unit-label-container" },
+      h(SizeAwareLabel, {
+        className: "unit-overlay",
+        labelClassName: "unit-label",
+        style: { width, height },
+        label,
+        onVisibilityChanged(viz) {
+          onLabelUpdated(label, viz);
+        },
+      })
+    ),
+  ]);
+}
+
+function UnitBoxes<T>(props: {
+  unitComponent: React.FunctionComponent<{ division: T }>;
+  unitComponentProps?: any;
+  transformDivisions?(divisions: T[]): T[];
+  transformDivision?: (
+    division: any,
+    index: number,
+    divisions: any[]
+  ) => T | null;
+}) {
+  const { unitComponent = Unit, unitComponentProps = {} } = props;
+  const { divisions } = useContext(ColumnContext);
+
+  if (divisions.length == 0) {
+    console.warn("No divisions found in column context");
+    return null;
+  }
+
+  const children = useMemo(() => {
+    return divisions.map((division: any, i) => {
+      // @ts-ignore
+      return h(unitComponent, {
+        division,
+        key: division.unit_id,
+        axisType: ColumnAxisType.HEIGHT,
+        ...unitComponentProps,
+      });
+    });
+  }, [divisions, unitComponent, unitComponentProps]);
+
+  return h(
+    PatternDefsProvider,
+    { resolveID, scalePattern },
+    h("g.divisions", children)
+  );
+}
+
+export { LabeledUnit, Unit, UnitBoxes, UnitProps };

package/src/units/composite.module.sass

@@ -0,0 +1,2 @@
+.unit-label
+  text-align: center

package/src/units/composite.ts

@@ -0,0 +1,266 @@
+import { hyperStyled } from "@macrostrat/hyper";
+import {
+  LithologyColumn,
+  useColumn,
+  ColumnLayoutContext,
+  ColumnAxisType,
+} from "@macrostrat/column-components";
+import { defaultNameFunction, UnitNamesColumn } from "./names";
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  memo,
+} from "react";
+import { BaseUnit } from "@macrostrat/api-types";
+import { LabeledUnit, UnitBoxes } from "./boxes";
+import styles from "./composite.module.sass";
+
+const h = hyperStyled(styles);
+
+interface LabelTracker {
+  [key: number]: boolean;
+}
+
+const LabelTrackerContext = createContext(null);
+const UnlabeledDivisionsContext = createContext(null);
+
+function LabelTrackerProvider(props) {
+  const { children } = props;
+  const { divisions } = useColumn();
+  const [unlabeledDivisions, setUnlabeledDivisions] = useState<
+    BaseUnit[] | null
+  >(null);
+  const labelTrackerRef = useRef<LabelTracker>({});
+  const trackLabelVisibility = useCallback(
+    (div, visible) => {
+      labelTrackerRef.current[div.unit_id] = visible;
+      if (Object.keys(labelTrackerRef.current).length == divisions.length) {
+        setUnlabeledDivisions(
+          // @ts-ignore
+          divisions.filter((d) => labelTrackerRef.current[d.unit_id] == false)
+        );
+      }
+    },
+    [labelTrackerRef, divisions]
+  );
+
+  const value = trackLabelVisibility;
+  return h(
+    LabelTrackerContext.Provider,
+    { value },
+    h(
+      UnlabeledDivisionsContext.Provider,
+      { value: unlabeledDivisions },
+      children
+    )
+  );
+}
+
+function TrackedLabeledUnit({
+  division,
+  nameForDivision = defaultNameFunction,
+  axisType,
+  ...rest
+}) {
+  const trackLabelVisibility = useContext(LabelTrackerContext);
+  return h(LabeledUnit, {
+    division,
+    //halfWidth: div.bottomOverlap,
+    label: nameForDivision(division),
+    onLabelUpdated(label, visible) {
+      trackLabelVisibility(division, visible);
+    },
+    ...rest,
+  });
+}
+
+function UnlabeledUnitNames(props) {
+  // Returns only unlabeled divisions
+  const divisions = useContext(UnlabeledDivisionsContext);
+  if (divisions == null) return null;
+  return h(UnitNamesColumn, { divisions, ...props });
+}
+
+function _BaseUnitsColumn(
+  props: React.PropsWithChildren<{
+    width: number;
+    unitComponent?: React.FC<any>;
+    unitComponentProps?: any;
+    clipToFrame?: boolean;
+  }>
+) {
+  /*
+  A column with units and names either
+  overlapping or offset to the right
+  */
+  const {
+    width,
+    children,
+    unitComponent = TrackedLabeledUnit,
+    unitComponentProps,
+    clipToFrame,
+    ...rest
+  } = props;
+
+  return h(LabelTrackerProvider, [
+    h(LithologyColumn, { width, clipToFrame }, [
+      h(UnitBoxes, {
+        unitComponent,
+        unitComponentProps,
+        ...rest,
+      }),
+    ]),
+    children,
+  ]);
+}
+
+type BaseUnitProps = {
+  width: number;
+  showLabels?: boolean;
+  columnWidth?: number;
+  clipToFrame?: boolean;
+};
+
+type ICompositeUnitProps = BaseUnitProps & {
+  gutterWidth?: number;
+  labelOffset?: number;
+  paddingLeft?: number;
+  nameForDivision?: (division: BaseUnit) => string;
+  children?: React.ReactNode;
+  unitComponent?: React.FC<any>;
+  unitComponentProps?: any;
+  noteMode?: "labeled" | "unlabeled";
+  showLabelColumn?: boolean;
+  noteComponent?: React.FC<any>;
+  shouldRenderNote?: (d: BaseUnit) => boolean;
+};
+
+type AnnotatedUnitProps = ICompositeUnitProps & {
+  minimumLabelHeight?: number;
+  axisType: ColumnAxisType;
+};
+
+function AnnotatedUnitsColumn(props: AnnotatedUnitProps) {
+  /*
+  A column with units and names either
+  overlapping or offset to the right
+  */
+  const {
+    columnWidth,
+    width = 100,
+    gutterWidth = 10,
+    labelOffset = 30,
+    showLabels = true,
+    nameForDivision,
+    minimumLabelHeight = 0,
+    axisType,
+    ...rest
+  } = props;
+
+  return h(
+    _BaseUnitsColumn,
+    {
+      width: showLabels ? columnWidth : width,
+      unitComponentProps: { nameForDivision },
+    },
+    [
+      h.if(showLabels)(UnlabeledUnitNames, {
+        transform: `translate(${columnWidth + gutterWidth})`,
+        paddingLeft: labelOffset,
+        width: width - columnWidth - gutterWidth,
+        minimumHeight: minimumLabelHeight,
+        nameForDivision,
+        ...rest,
+      }),
+      // h(UnitDataColumn, {
+      //   transform: `translate(${columnWidth + gutterWidth})`,
+      //   paddingLeft: labelOffset,
+      //   width: width - columnWidth - gutterWidth,
+      //   ...rest
+      // })
+    ]
+  );
+}
+
+function CompositeUnitsColumn(props: ICompositeUnitProps) {
+  /*
+  A column with units and names either
+  overlapping or offset to the right
+  */
+  const {
+    width = 100,
+    gutterWidth = 10,
+    labelOffset = 30,
+    noteMode = "unlabeled",
+    showLabels = true,
+    showLabelColumn = true,
+    noteComponent,
+    shouldRenderNote,
+    ...rest
+  } = props;
+
+  let { columnWidth = width } = props;
+
+  const labelColumnComponent =
+    noteMode == "unlabeled" ? UnlabeledUnitNames : UnitNamesColumn;
+
+  return h(_BaseUnitsColumn, { width: columnWidth, ...rest }, [
+    h.if(showLabelColumn)(ColumnLabel, {
+      showLabels,
+      component: labelColumnComponent,
+      columnWidth,
+      gutterWidth,
+      labelOffset,
+      width,
+      noteComponent,
+      showNote: shouldRenderNote,
+    }),
+  ]);
+}
+
+function _ColumnLabel(props) {
+  const {
+    showLabels,
+    component,
+    columnWidth,
+    gutterWidth,
+    labelOffset,
+    width,
+    noteComponent,
+    showNote,
+  } = props;
+  if (!showLabels) return null;
+  return h(component, {
+    transform: `translate(${columnWidth + gutterWidth})`,
+    paddingLeft: labelOffset,
+    width: width - columnWidth - gutterWidth,
+    noteComponent,
+    shouldRenderNote: showNote,
+  });
+}
+
+const ColumnLabel = memo(_ColumnLabel);
+
+export function CompositeUnitComponent({ division, nColumns = 2, ...rest }) {
+  // This comes from CompositeUnits
+  const { width } = useContext(ColumnLayoutContext);
+
+  //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)
+  //console.log(division);
+  return h(TrackedLabeledUnit, {
+    division,
+    ...rest,
+    width: division.overlappingUnits.length > 0 ? width / nColumns : width,
+    x: (division.column * width) / nColumns,
+  });
+}
+
+export {
+  CompositeUnitsColumn,
+  AnnotatedUnitsColumn,
+  TrackedLabeledUnit,
+  ICompositeUnitProps,
+};