@macrostrat/column-views 3.3.5 → 3.4.0

package/src/unit-details/panel.ts

@@ -4,8 +4,6 @@ import { ReactNode, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
-  isClickable,
-  ItemInteractionProps,
   ItemList,
   LithologyList,
   LithologyTagFeature,
@@ -14,7 +12,6 @@ import {
   MacrostratItemIdentifier,
   Parenthetical,
   useInteractionManager,
-  useInteractionProps,
   Value,
 } from "@macrostrat/data-components";
 import { useColumnUnitsMap } from "../data-provider";
@@ -22,13 +19,12 @@ import {
   useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
-  useStratNames,
 } from "@macrostrat/data-provider";
 import type {
   Environment,
+  EnvironmentIdentifier,
   Interval,
   Lithology,
-  UnitLithology,
   UnitLong,
   UnitLongFull,
 } from "@macrostrat/api-types";
@@ -37,6 +33,9 @@ import classNames from "classnames";
 import { AgeField, Duration, IntervalProportions } from "./age-range";
 import { formatRange, formatSignificance } from "./utils.ts";
 import h from "./panel.module.sass";
+import { StratNameField } from "./strat-names.ts";
+import { Identifier, UnitIdentifier, UnitInfo } from "./identifiers.ts";
+import { LithologyIdentifier } from "@macrostrat/api-types/src/lithologies";
 
 export interface UnitDetailsPanelProps {
   unit: any;
@@ -49,6 +48,7 @@ export interface UnitDetailsPanelProps {
   onSelectUnit?: (unitID: number) => void;
   onClickItem?: MacrostratItemClickHandler;
   interactionManager?: MacrostratInteractionManager;
+  showJSON?: boolean;
 }
 
 export function UnitDetailsPanel({
@@ -66,11 +66,12 @@ export function UnitDetailsPanel({
   hiddenActions = null,
   onSelectUnit,
   onClickItem,
+  showJSON,
 }: UnitDetailsPanelProps) {
-  const [showJSON, setShowJSON] = useState(false);
+  const [_showJSON, setShowJSON] = useState(false);
 
   let content: ReactNode = null;
-  if (showJSON) {
+  if (showJSON ?? _showJSON) {
     content = h(JSONView, { data: unit, showRoot: false });
   } else {
     content = h(UnitDetailsContent, {
@@ -113,7 +114,7 @@ export function UnitDetailsPanel({
 
   /** Handle unit selection clicks */
   const clickHandlerForItem = useMemo(() => {
-    if (onSelectUnit == null || onClickItem == null) return null;
+    if (onSelectUnit == null && onClickItem == null) return null;
     return (item: MacrostratItemIdentifier) => {
       if ("unit_id" in item && !("col_id" in item)) {
         // We are selecting a unit within the column
@@ -367,53 +368,7 @@ export function ReferencesField({ refs, className = null, ...rest }) {
   );
 }
 
-function useStratNameData(strat_name_id: number) {
-  const stratNames = useStratNames([strat_name_id]);
-  return stratNames?.[0];
-}
-
-function StratNameField(
-  props: {
-    strat_name_id: number;
-    className?: string;
-  } & ItemInteractionProps,
-) {
-  /** Handling for stratigraphic name field */
-  const { strat_name_id, className, ...rest } = props;
-  const data = useStratNameData(strat_name_id);
-
-  const baseInteractionProps = useInteractionProps({ strat_name_id });
-
-  const coreProps = {
-    ...baseInteractionProps,
-    ...rest,
-  };
-
-  let inner: any = h(Identifier, { id: strat_name_id });
-  const name = data?.strat_name_long;
-  if (name != null) {
-    inner = h("span.strat-name", name);
-  }
-
-  const clickable = isClickable(coreProps);
-
-  return h(
-    DataField,
-    {
-      label: "Stratigraphic name",
-    },
-    h(
-      clickable ? "a" : "span",
-      {
-        className: classNames({ clickable }, className),
-        ...coreProps,
-      },
-      inner,
-    ),
-  );
-}
-
-function getThickness(unit): [string, string] {
+function getThickness(unit): [string, string | null] {
   let minThickness = unit.min_thick ?? 0;
   let maxThickness = unit.max_thick ?? unit.min_thick ?? 0;
   let _unit = "m";
@@ -484,7 +439,7 @@ function Citation({ data, tag = "p" }) {
 }
 
 function enhanceEnvironments(
-  environments?: Partial<Environment>[] | null,
+  environments?: EnvironmentIdentifier[] | null,
   envMap?: Map<number, Environment> | null,
 ) {
   return environments?.map((env) => {
@@ -495,13 +450,8 @@ function enhanceEnvironments(
   });
 }
 
-type LithID =
-  | (Partial<Lithology> & Pick<Lithology, "lith_id">)
-  | UnitLithology
-  | Lithology;
-
 function enhanceLithologies(
-  lithologies?: LithID[] | null,
+  lithologies?: LithologyIdentifier[] | null,
   lithMap?: Map<number, any> | null,
 ) {
   return lithologies?.map((lith) => {
@@ -512,44 +462,6 @@ function enhanceLithologies(
   });
 }
 
-export function ClickableText({
-  className,
-  ...rest
-}: {
-  className?: string;
-  children: ReactNode;
-} & ItemInteractionProps) {
-  /** An optionally clickable text element */
-  const clickable = isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return h(tag, { className: classNames(className, { clickable }), ...rest });
-}
-
-export function Identifier({
-  id,
-  className,
-  ...rest
-}: {
-  id: number | string;
-  className?: string;
-} & ItemInteractionProps) {
-  /** An item that displays a numeric identifier, optionally clickable */
-  return h(
-    ClickableText,
-    {
-      className: classNames("identifier", className),
-      ...rest,
-    },
-    id,
-  );
-}
-
-type UnitInfo = {
-  unitID: number;
-  colID?: number;
-  name?: string;
-};
-
 function UnitIDList({ units, showNames = false }) {
   const unitsMap = useColumnUnitsMap();
 
@@ -560,7 +472,7 @@ function UnitIDList({ units, showNames = false }) {
     if (showNames) {
       return u1.map((unitID) => {
         const unitData = unitsMap?.get(unitID);
-        let name: string = undefined;
+        let name: string | null = null;
         if (unitData != null) {
           name = defaultNameFunction(unitData);
         }
@@ -595,28 +507,3 @@ function UnitIDList({ units, showNames = false }) {
     }),
   );
 }
-
-function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}: UnitInfo & ItemInteractionProps) {
-  if (name != null) {
-    return h(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps,
-      },
-      name,
-    );
-  }
-
-  return h(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps,
-  });
-}

package/src/unit-details/popover.ts

@@ -1,11 +1,7 @@
 import hyper from "@macrostrat/hyper";
 import { Popover } from "@blueprintjs/core";
 import styles from "./popover.module.sass";
-import {
-  useAtomOverlayPosition,
-  useSelectedUnit,
-  useUnitSelectionDispatch,
-} from "../data-provider";
+import { useAtomOverlayPosition, useUnitSelection } from "../data-provider";
 import {
   UnitDetailsFeature,
   UnitDetailsPanel,
@@ -66,8 +62,7 @@ function InteractionBarrier({ children }) {
 export function UnitSelectionPopover(
   props: Omit<UnitDetailsPanelProps, "onSelectUnit" | "unit">,
 ) {
-  const unit = useSelectedUnit();
-  const selectUnit = useUnitSelectionDispatch();
+  const [unit, selectUnit] = useUnitSelection();
   const position = useAtomOverlayPosition();
   if (unit == null) {
     return null;

package/src/unit-details/strat-names.ts

@@ -0,0 +1,57 @@
+import {
+  DataField,
+  isClickable,
+  ItemInteractionProps,
+  useInteractionProps,
+} from "@macrostrat/data-components";
+import h from "./panel.module.sass";
+import classNames from "classnames";
+import { useStratNames } from "@macrostrat/data-provider";
+import { Identifier } from "./identifiers.ts";
+
+function useStratNameData(strat_name_id: number) {
+  const stratNames = useStratNames([strat_name_id]);
+  return stratNames?.[0];
+}
+
+export function StratNameField(
+  props: {
+    strat_name_id: number;
+    className?: string;
+  } & ItemInteractionProps,
+) {
+  /** Handling for stratigraphic name field */
+  const { strat_name_id, className, ...rest } = props;
+
+  const data = useStratNameData(strat_name_id);
+
+  const baseInteractionProps = useInteractionProps({ strat_name_id });
+
+  const coreProps = {
+    ...baseInteractionProps,
+    ...rest,
+  };
+
+  let inner: any = h(Identifier, { id: strat_name_id });
+  const name = data?.strat_name_long;
+  if (name != null) {
+    inner = h("span.strat-name", name);
+  }
+
+  const clickable = isClickable(coreProps);
+
+  return h(
+    DataField,
+    {
+      label: "Stratigraphic name",
+    },
+    h(
+      clickable ? "a" : "span",
+      {
+        className: classNames({ clickable }, className),
+        ...coreProps,
+      },
+      inner,
+    ),
+  );
+}

package/src/units/index.ts

@@ -13,7 +13,8 @@ import { TrackedLabeledUnit } from "./composite";
 import { useEnvironments, useLithologies } from "@macrostrat/data-provider";
 import { useMemo } from "react";
 import { resolveID } from "./resolvers";
-import { Lithology } from "@macrostrat/api-types";
+import { BaseUnit, Lithology } from "@macrostrat/api-types";
+import { UnitWithDefinedOverlap } from "../prepare-units/helpers.ts";
 
 export * from "./composite";
 export * from "./types";
@@ -56,15 +57,37 @@ export function BasicUnitComponent({ division, ...rest }) {
   });
 }
 
-export function UnitComponent({ division, nColumns = 2, ...rest }) {
-  const width = rest.width ?? useColumnLayout()?.width;
+interface UnitComponentProps<T extends BaseUnit> {
+  division: UnitWithDefinedOverlap<T> | T;
+  nColumns: number;
+  width?: number;
+}
 
-  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
-  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;
-  const columnIx = (division.column ?? 0) % _nColumns;
-  const reducedWidth = width / _nColumns;
-  const x = (columnIx * width) / _nColumns;
+export function UnitComponent<T extends BaseUnit>({
+  division,
+  nColumns = 2,
+  ...rest
+}: UnitComponentProps<T>) {
+  const width = rest.width ?? useColumnLayout()?.width;
 
+  let _nColumns = nColumns;
+  if (isNaN(_nColumns)) {
+    _nColumns = 2;
+  }
+  let columnIx = 0;
+  let x = 0;
+
+  console.log(rest, _nColumns, width);
+
+  let reducedWidth = _nColumns;
+  //const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
+  if ("overlap" in division) {
+    const overlap = division.overlap;
+    _nColumns = Math.min(_nColumns, overlap.nColumns);
+    columnIx = overlap.column;
+    reducedWidth = width / _nColumns;
+    x = (columnIx * width) / _nColumns;
+  }
   return h(TrackedLabeledUnit, {
     division,
     ...rest,