@macrostrat/column-views 3.0.2 → 3.1.0

package/src/unit-details/panel.ts

@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
 import styles from "./panel.module.sass";
 import { JSONView } from "@macrostrat/ui-components";
 import { Button, ButtonGroup } from "@blueprintjs/core";
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
@@ -13,13 +13,21 @@ import {
   LithologyTagFeature,
   Parenthetical,
   Value,
+  MacrostratInteractionManager,
+  useInteractionProps,
+  ItemInteractionProps,
+  useInteractionManager,
+  MacrostratItemIdentifier,
+  MacrostratInteractionProvider,
+  isClickable,
 } from "@macrostrat/data-components";
+import { useColumnUnitsMap } from "../data-provider";
 import {
-  useColumnUnitsMap,
   useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
-} from "../data-provider";
+  useStratNames,
+} from "@macrostrat/data-provider";
 import type {
   Environment,
   UnitLong,
@@ -42,6 +50,7 @@ export interface UnitDetailsPanelProps {
   lithologyFeatures?: Set<LithologyTagFeature>;
   onSelectUnit?: (unitID: number) => void;
   onClickItem?: MacrostratItemClickHandler;
+  interactionManager?: MacrostratInteractionManager;
 }
 
 export function UnitDetailsPanel({
@@ -71,7 +80,6 @@ export function UnitDetailsPanel({
       features,
       lithologyFeatures,
       onClickItem,
-      onSelectUnit,
     });
   }
 
@@ -94,7 +102,7 @@ export function UnitDetailsPanel({
     ]);
   }
 
-  return h("div.unit-details-panel", { className }, [
+  const main = h("div.unit-details-panel", { className }, [
     h(LegendPanelHeader, {
       onClose,
       title,
@@ -104,6 +112,36 @@ export function UnitDetailsPanel({
     }),
     h("div.unit-details-content-holder", content),
   ]);
+
+  /** Handle unit selection clicks */
+  const clickHandlerForItem = useMemo(() => {
+    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
+        return (event: MouseEvent) => {
+          onSelectUnit(item.unit_id);
+          // Don't allow event to propagate further (e.g., to open a link)
+          event.preventDefault();
+        };
+      }
+      return undefined;
+    };
+  }, [onSelectUnit, onClickItem]);
+
+  if (clickHandlerForItem != null) {
+    // We wrap this in a MacrostratInteractionManager to handle unit selection
+    return h(
+      MacrostratInteractionProvider,
+      {
+        clickHandlerForItem,
+        inherit: true,
+      },
+      main,
+    );
+  }
+
+  return main;
 }
 
 export function LegendPanelHeader({
@@ -162,7 +200,6 @@ export type MacrostratItemClickHandler = (
 
 function UnitDetailsContent({
   unit,
-  onSelectUnit,
   lithologyFeatures = new Set([
     LithologyTagFeature.Proportion,
     LithologyTagFeature.Attributes,
@@ -175,7 +212,6 @@ function UnitDetailsContent({
   getItemHref,
 }: {
   unit: UnitLong;
-  onSelectUnit?: (unitID: number) => void;
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
   onClickItem?: MacrostratItemClickHandler;
@@ -243,12 +279,10 @@ function UnitDetailsContent({
       col_id: unit.col_id,
     }),
     thicknessOrHeightRange,
-    h.if(lithologies)(LithologyList, {
+    h.if(lithologies != null)(LithologyList, {
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
-      getItemHref,
-      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
@@ -257,10 +291,8 @@ function UnitDetailsContent({
         onClickItem,
       }),
     ]),
-    h.if(environments)(EnvironmentsList, {
+    h.if(environments != null)(EnvironmentsList, {
       environments,
-      onClickItem,
-      getItemHref,
     }),
     h.if(unit.strat_name_id != null)(StratNameField, {
       strat_name_id: unit.strat_name_id,
@@ -272,7 +304,6 @@ function UnitDetailsContent({
         { label: "Above" },
         h(UnitIDList, {
           units: unit.units_above,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -281,7 +312,6 @@ function UnitDetailsContent({
         { label: "Below" },
         h(UnitIDList, {
           units: unit.units_below,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -333,27 +363,35 @@ export function ReferencesField({ refs, className = null, ...rest }) {
   );
 }
 
-function StratNameField({
-  strat_name_id,
-  onClickItem,
-}: {
-  strat_name_id: number;
-  onClickItem?: (event: MouseEvent, item: { strat_name_id: number }) => void;
-}) {
-  const stratNames = useMemo(() => [strat_name_id], [strat_name_id]);
-  const data = useMacrostratData("strat_names", stratNames);
-  const stratNameData = data?.[0];
+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 = stratNameData?.strat_name_long;
+  const name = data?.strat_name_long;
   if (name != null) {
     inner = h("span.strat-name", name);
   }
 
-  const clickable = onClickItem != null;
-
-  const className = classNames({
-    clickable,
-  });
+  const clickable = isClickable(coreProps);
 
   return h(
     DataField,
@@ -363,8 +401,8 @@ function StratNameField({
     h(
       clickable ? "a" : "span",
       {
-        className,
-        onClick: (e) => onClickItem(e, { strat_name_id }),
+        className: classNames({ clickable }, className),
+        ...coreProps,
       },
       inner,
     ),
@@ -566,36 +604,32 @@ function enhanceLithologies(
 }
 
 export function ClickableText({
-  onClick,
   className,
-  children,
+  ...rest
 }: {
-  onClick: () => void;
   className?: string;
   children: ReactNode;
-}) {
+} & ItemInteractionProps) {
   /** An optionally clickable text element */
-  const tag = onClick != null ? "a" : "span";
-  return h(tag, { onClick, className }, children);
+  const clickable = isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return h(tag, { className: classNames(className, { clickable }), ...rest });
 }
 
 export function Identifier({
   id,
-  onClick,
   className,
+  ...rest
 }: {
   id: number | string;
-  onClick?: (id: number | string) => void;
   className?: string;
-}) {
+} & ItemInteractionProps) {
   /** An item that displays a numeric identifier, optionally clickable */
-  const _onClick = onClick != null ? () => onClick(id) : null;
-
   return h(
     ClickableText,
     {
-      onClick: _onClick,
       className: classNames("identifier", className),
+      ...rest,
     },
     id,
   );
@@ -607,9 +641,11 @@ type UnitInfo = {
   name?: string;
 };
 
-function UnitIDList({ units, onSelectUnit, showNames = false }) {
+function UnitIDList({ units, showNames = false }) {
   const unitsMap = useColumnUnitsMap();
 
+  const interactionManager = useInteractionManager();
+
   const extUnits: UnitInfo[] = useMemo(() => {
     const u1 = units.filter((d) => d != 0);
     if (showNames) {
@@ -637,9 +673,17 @@ function UnitIDList({ units, onSelectUnit, showNames = false }) {
   return h(
     ItemList,
     { className: "units-list" },
-    extUnits.map((info) =>
-      h("span.item", h(UnitIdentifier, { ...info, onSelectUnit })),
-    ),
+    extUnits.map((info) => {
+      return h(
+        "span.item",
+        h(UnitIdentifier, {
+          ...info,
+          ...interactionManager?.interactionPropsForItem({
+            unit_id: info.unitID,
+          }),
+        }),
+      );
+    }),
   );
 }
 
@@ -647,21 +691,14 @@ function UnitIdentifier({
   unitID,
   colID,
   name,
-  onSelectUnit,
-}: UnitInfo & { onSelectUnit?: (unitID: number) => void }) {
-  const onClick = useMemo(() => {
-    if (onSelectUnit == null) return null;
-    return () => {
-      onSelectUnit(unitID);
-    };
-  }, [onSelectUnit]);
-
+  ...interactionProps
+}: UnitInfo & ItemInteractionProps) {
   if (name != null) {
     return h(
       ClickableText,
       {
         className: "unit-name",
-        onClick,
+        ...interactionProps,
       },
       name,
     );
@@ -669,9 +706,9 @@ function UnitIdentifier({
 
   return h(Identifier, {
     className: "unit-id",
-    onClick,
     key: unitID,
     id: unitID,
+    ...interactionProps,
   });
 }
 

package/src/units/boxes.ts

@@ -12,7 +12,8 @@ import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
 import { forwardRef, ReactNode, useContext, useMemo } from "react";
 import { resolveID, scalePattern } from "./resolvers";
-import { useUnitSelectionTarget, useLithologies } from "../data-provider";
+import { useUnitSelectionTarget } from "../data-provider";
+import { useLithologies } from "@macrostrat/data-provider";
 import { IUnit } from "./types";
 import styles from "./boxes.module.sass";
 import classNames from "classnames";

package/src/units/index.ts

@@ -10,7 +10,7 @@ import { useColumnLayout } from "@macrostrat/column-components";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { getMixedUnitColor } from "./colors";
 import { TrackedLabeledUnit } from "./composite";
-import { useEnvironments, useLithologies } from "../data-provider";
+import { useEnvironments, useLithologies } from "@macrostrat/data-provider";
 import { useMemo } from "react";
 import { resolveID } from "./resolvers";
 import { Lithology } from "@macrostrat/api-types";

package/dist/data-provider/base.cjs

@@ -1,352 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const crossFetch = require("cross-fetch");
-const React = require("react");
-const h = require("@macrostrat/hyper");
-const zustand = require("zustand");
-const fetch = require("./fetch.cjs");
-const uiComponents = require("@macrostrat/ui-components");
-const columnComponents = require("@macrostrat/column-components");
-const store = require("./store.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const crossFetch__default = /* @__PURE__ */ _interopDefault(crossFetch);
-const h__default = /* @__PURE__ */ _interopDefault(h);
-function createMacrostratStore(baseURL = "https://macrostrat.org/api/v2") {
-  return zustand.create((set, get) => {
-    return {
-      baseURL,
-      inFlightRequests: /* @__PURE__ */ new Set(),
-      async fetch(url, options) {
-        const url1 = baseURL + url;
-        const { inFlightRequests } = get();
-        if (inFlightRequests.has(url1)) {
-          return null;
-        }
-        inFlightRequests.add(url1);
-        const res = await crossFetch__default.default(url1, options);
-        inFlightRequests.delete(url1);
-        return res;
-      },
-      ...createLithologiesSlice(set, get),
-      ...createIntervalsSlice(set, get),
-      ...createEnvironmentsSlice(set, get),
-      ...createColumnsSlice(set, get),
-      ...createRefsSlice(set, get),
-      ...createStratNamesSlice(set, get)
-    };
-  });
-}
-function createRefsSlice(set, get) {
-  return {
-    refs: /* @__PURE__ */ new Map(),
-    async getRefs(ids) {
-      const { refs, fetch: fetch$1 } = get();
-      const missing = ids.filter((id) => !refs.has(id));
-      if (missing.length == 0) {
-        return ids.map((id) => refs.get(id));
-      }
-      const data = await fetch.fetchRefs(missing, fetch$1);
-      if (data == null) return [];
-      for (const d of data) {
-        refs.set(d.ref_id, d);
-      }
-      set({ refs });
-      return ids.map((id) => refs.get(id));
-    }
-  };
-}
-function createColumnsSlice(set, get) {
-  return {
-    columnFootprints: /* @__PURE__ */ new Map(),
-    async getColumns(projectID, inProcess) {
-      const { columnFootprints, baseURL, fetch: fetch$1 } = get();
-      const key = projectID ?? -1;
-      let _inProcess = inProcess;
-      let footprints = columnFootprints.get(key);
-      if (footprints == null || footprints.inProcess != _inProcess) {
-        const statusCode = ["active"];
-        if (_inProcess) {
-          statusCode.push("in process");
-        }
-        const columns = await fetch.fetchAllColumns({
-          projectID,
-          statusCode,
-          fetch: fetch$1
-        });
-        if (columns == null) {
-          return;
-        }
-        footprints = {
-          project_id: projectID,
-          inProcess,
-          columns
-        };
-        const columnFootprints2 = new Map(columnFootprints);
-        columnFootprints2.set(key, footprints);
-        set({ columnFootprints: columnFootprints2 });
-      }
-      return footprints.columns;
-    }
-  };
-}
-function createLithologiesSlice(set, get) {
-  return {
-    lithologies: null,
-    async getLithologies(ids) {
-      const { lithologies, fetch: fetch$1 } = get();
-      let lithMap = lithologies;
-      if (lithMap == null) {
-        const data = await fetch.fetchLithologies(fetch$1);
-        if (data == null) return;
-        lithMap = new Map(data.map((d) => [d.lith_id, d]));
-        set({ lithologies: lithMap });
-      }
-      if (ids == null) return lithMap.values();
-      return ids.map((id) => lithMap.get(id));
-    }
-  };
-}
-function createEnvironmentsSlice(set, get) {
-  return {
-    environments: null,
-    async getEnvironments(ids) {
-      const { environments, fetch: fetch$1 } = get();
-      let envMap = environments;
-      if (envMap == null) {
-        const data = await fetch.fetchEnvironments(fetch$1);
-        if (data == null) return [];
-        envMap = new Map(data.map((d) => [d.environ_id, d]));
-        set({ environments: envMap });
-      }
-      if (ids == null) return envMap.values();
-      return ids.map((id) => envMap.get(id));
-    }
-  };
-}
-function createIntervalsSlice(set, get) {
-  return {
-    intervals: null,
-    async getIntervals(ids, timescaleID) {
-      const { intervals, fetch: fetch$1 } = get();
-      let _intervals = intervals;
-      if (intervals == null || !includesTimescale(intervals, timescaleID)) {
-        const data = await fetch.fetchIntervals(timescaleID, fetch$1);
-        if (data == null) {
-          return [];
-        }
-        const intervalMap = intervals ?? /* @__PURE__ */ new Map();
-        for (const d of data) {
-          intervalMap.set(d.int_id, d);
-        }
-        _intervals = intervalMap;
-        set({ intervals: _intervals });
-      }
-      if (ids == null && timescaleID == null)
-        return Array.from(_intervals.values());
-      if (timescaleID != null) {
-        return Array.from(_intervals.values()).filter(
-          (d) => d.timescale_id == timescaleID
-        );
-      }
-      return ids.map((id) => intervals.get(id));
-    }
-  };
-}
-function createStratNamesSlice(set, get) {
-  return {
-    stratNames: null,
-    async getStratNames(ids) {
-      const { stratNames, fetch: fetch$1 } = get();
-      let nameMap = stratNames ?? /* @__PURE__ */ new Map();
-      let stratNamesAlreadyLoaded = [];
-      let stratNamesToLoad = [];
-      for (const id of ids) {
-        if (nameMap.has(id)) {
-          stratNamesAlreadyLoaded.push(nameMap.get(id));
-        } else {
-          stratNamesToLoad.push(id);
-        }
-      }
-      if (stratNamesToLoad.length > 0) {
-        const data = await fetch.fetchStratNames(stratNamesToLoad, fetch$1);
-        if (data == null) return stratNamesAlreadyLoaded;
-        for (const d of data) {
-          nameMap.set(d.strat_name_id, d);
-        }
-        set({ stratNames: nameMap });
-      }
-      return ids.map((id) => nameMap.get(id));
-    }
-  };
-}
-function includesTimescale(intervals, timescaleID) {
-  if (intervals == null) return false;
-  if (timescaleID == null) return true;
-  return Array.from(intervals.values()).some(
-    (d) => d.timescale_id == timescaleID
-  );
-}
-function useMacrostratStore(selector) {
-  const ctx = React.useContext(MacrostratDataProviderContext);
-  if (ctx == null) {
-    throw new Error("Missing MacrostratDataProvider");
-  }
-  if (selector === "api") {
-    return ctx;
-  }
-  return zustand.useStore(ctx, selector);
-}
-function useMacrostratBaseURL(defaultURL = "https://macrostrat.org/api/v2") {
-  const ctx = React.useContext(MacrostratDataProviderContext);
-  if (ctx == null) {
-    return defaultURL;
-  }
-  return ctx.getState().baseURL;
-}
-function useMacrostratFetch() {
-  const ctx = React.useContext(MacrostratDataProviderContext);
-  if (ctx == null) {
-    throw new Error("Missing MacrostratDataProvider");
-  }
-  return ctx.getState().fetch;
-}
-const dataTypeMapping = {
-  lithologies: (store2) => store2.getLithologies,
-  intervals: (store2) => store2.getIntervals,
-  columns: (store2) => store2.getColumns,
-  environments: (store2) => store2.getEnvironments,
-  refs: (store2) => store2.getRefs,
-  strat_names: (store2) => store2.getStratNames
-};
-function useMacrostratDefs(dataType) {
-  if (dataType == "columns") {
-    throw new Error("Columns are not provided as a map");
-  }
-  const operator = useMacrostratStore(dataTypeMapping[dataType]);
-  React.useEffect(() => {
-    operator();
-  }, []);
-  return useMacrostratStore((state) => state[dataType]);
-}
-function useMacrostratColumns(projectID, inProcess) {
-  const getColumns = useMacrostratStore((s) => s.getColumns);
-  const columnsMap = useMacrostratStore((s) => s.columnFootprints);
-  const key = projectID ?? -1;
-  const colData = columnsMap?.get(key);
-  React.useEffect(() => {
-    if (colData == null || inProcess && !colData.inProcess) {
-      getColumns(projectID, inProcess);
-    }
-  }, [colData, inProcess, getColumns]);
-  return React.useMemo(() => {
-    if (colData == null) return null;
-    let columns = colData.columns;
-    if (!inProcess && colData.inProcess) {
-      columns.features = columns.features?.filter(
-        (d) => d.properties.status != "in process"
-      );
-    }
-    return columns;
-  }, [colData, inProcess]);
-}
-function useMacrostratColumnInfo(columnID) {
-  const columnsMap = useMacrostratStore((s) => s.columnFootprints);
-  return React.useMemo(() => {
-    for (const colData of columnsMap.values()) {
-      const col = colData.columns.find((d) => d.properties.col_id === columnID);
-      if (col != null) return col.properties;
-    }
-    return null;
-  }, [columnsMap, columnID]);
-}
-function useMacrostratData(dataType, ...args) {
-  const selector = dataTypeMapping[dataType];
-  const operator = useMacrostratStore(selector);
-  const [value, setValue] = React.useState(null);
-  React.useEffect(() => {
-    try {
-      operator(...args).then(setValue);
-    } catch (e) {
-      console.error(e);
-    }
-  }, [operator, ...args]);
-  return value;
-}
-const MacrostratDataProviderContext = React.createContext(createMacrostratStore());
-function MacrostratDataProvider(props) {
-  const { baseURL = "https://dev.macrostrat.org/api/v2", children } = props;
-  const [store2] = React.useState(() => createMacrostratStore(baseURL));
-  return h__default.default(
-    MacrostratAPIProvider,
-    { baseURL },
-    h__default.default(MacrostratDataProviderContext.Provider, { value: store2 }, children)
-  );
-}
-function MacrostratAPIProvider({
-  children,
-  useDev = false,
-  baseURL
-}) {
-  baseURL ??= useDev ? "https://dev.macrostrat.org/api/v2" : "https://macrostrat.org/api/v2";
-  return h__default.default(
-    uiComponents.APIProvider,
-    {
-      baseURL,
-      unwrapResponse: (res) => res.success.data
-    },
-    children
-  );
-}
-function MacrostratColumnProvider(props) {
-  const { axisType } = store.useMacrostratColumnData();
-  const { units, domain, pixelScale, scale, children } = props;
-  return h__default.default(
-    columnComponents.ColumnProvider,
-    {
-      axisType,
-      divisions: units,
-      range: domain,
-      pixelsPerMeter: pixelScale,
-      scale
-    },
-    children
-  );
-}
-function LithologiesProvider({ children }) {
-  React.useEffect(() => {
-    console.warn(
-      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider"
-    );
-  }, []);
-  return children;
-}
-function useLithologies() {
-  const getLithologies = useMacrostratStore((s) => s.getLithologies);
-  const lithologies = useMacrostratStore((s) => s.lithologies);
-  React.useEffect(() => {
-    if (lithologies == null) getLithologies();
-  }, [lithologies, getLithologies]);
-  return lithologies;
-}
-function useEnvironments() {
-  const getEnvironments = useMacrostratStore((s) => s.getEnvironments);
-  const environments = useMacrostratStore((s) => s.environments);
-  React.useEffect(() => {
-    if (environments == null) getEnvironments();
-  }, [environments, getEnvironments]);
-  return environments;
-}
-exports.LithologiesProvider = LithologiesProvider;
-exports.MacrostratAPIProvider = MacrostratAPIProvider;
-exports.MacrostratColumnProvider = MacrostratColumnProvider;
-exports.MacrostratDataProvider = MacrostratDataProvider;
-exports.useEnvironments = useEnvironments;
-exports.useLithologies = useLithologies;
-exports.useMacrostratBaseURL = useMacrostratBaseURL;
-exports.useMacrostratColumnInfo = useMacrostratColumnInfo;
-exports.useMacrostratColumns = useMacrostratColumns;
-exports.useMacrostratData = useMacrostratData;
-exports.useMacrostratDefs = useMacrostratDefs;
-exports.useMacrostratFetch = useMacrostratFetch;
-exports.useMacrostratStore = useMacrostratStore;
-//# sourceMappingURL=base.cjs.map