@macrostrat/column-views 3.2.2 → 3.3.0

package/src/maps/layers/columns.ts

@@ -0,0 +1,210 @@
+import { useMapStyleOperator, useOverlayStyle } from "@macrostrat/mapbox-react";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import GeoJSON, { FeatureCollection } from "geojson";
+import { GeoJSONFeature } from "mapbox-gl";
+import { getCSSVariable } from "@macrostrat/color-utils";
+import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import { StyleFragment } from "@macrostrat/mapbox-react";
+
+export interface ColumnsStyleOptions {
+  color?: string | any[];
+  selectedColor?: string | any[];
+  opacity?: number | any[];
+  circleRadius?: number | any[];
+  lineOpacity?: number | any[];
+  lineWidth?: number | any[];
+  lineColor?: string | any[];
+}
+
+interface ColumnLayerOptions extends ColumnsStyleOptions {
+  enabled: boolean;
+  columns: FeatureCollection | GeoJSONFeature[];
+}
+
+export function BaseColumnsLayer({
+  enabled = true,
+  columns,
+  ...rest
+}: ColumnLayerOptions) {
+  useOverlayStyle(() => (enabled ? buildColumnsStyle(rest) : null), [enabled]);
+
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+
+      setGeoJSON(map, "columns", promoteToFeatureCollection(columns));
+    },
+    [columns, enabled],
+  );
+  return null;
+}
+
+function promoteToFeatureCollection(
+  data: FeatureCollection | GeoJSONFeature | GeoJSONFeature[] | null,
+): FeatureCollection | null {
+  if (data == null) return null;
+  if ("type" in data && data.type == "Feature") {
+    return {
+      type: "FeatureCollection",
+      features: [data],
+    };
+  }
+  if (
+    "type" in data &&
+    data.type == "FeatureCollection" &&
+    "features" in data
+  ) {
+    return data;
+  }
+  return {
+    type: "FeatureCollection",
+    features: data,
+  };
+}
+
+export function buildColumnsStyle(
+  opts: ColumnsStyleOptions = {},
+): StyleFragment {
+  const { color } = opts;
+  const columnBaseColor =
+    color ?? getCSSVariable("--text-subtle-color", "black");
+  let columnColor: any = columnBaseColor;
+  const columnSelectedColor =
+    opts.selectedColor ?? getCSSVariable("--selection-color", "purple");
+
+  const lineColor = opts.lineColor ?? columnBaseColor;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  // If color is in the feature state or geojson properties, use that as second choice
+  if (typeof columnColor === "string") {
+    columnColor = [
+      "coalesce",
+      ["feature-state", "color"],
+      ["get", "color"],
+      columnColor,
+    ];
+  }
+
+  const fillOpacity = opts.opacity ?? 0.1;
+
+  const lineOpacity = opts.lineOpacity ?? 0.5;
+  const lineWidth = opts.lineWidth ?? 2;
+
+  const circleRadius = opts.circleRadius ?? 4;
+
+  return {
+    sources: {
+      columns: buildGeoJSONSource(),
+    },
+    version: 8,
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": fillOpacity,
+        },
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": circleRadius,
+          "circle-color": columnColor,
+          "circle-opacity": fillOpacity,
+        },
+        filter: ["==", "$type", "Point"],
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": ["case", isHovered, columnSelectedColor, lineColor],
+          "line-width": lineWidth,
+          "line-opacity": ["case", isHovered, 1.0, lineOpacity],
+        },
+      },
+    ],
+  };
+}
+
+export type ColumnFeature = GeoJSON.Feature & { id: number };
+
+const selectedColumnSourceID = "selectedColumn";
+
+export function SelectedColumnOverlay({
+  selectedColumn,
+  ...styleOpts
+}: { selectedColumn: ColumnFeature | null } & SelectedColumnStyleOpts) {
+  useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);
+
+  useMapStyleOperator(
+    (map) => {
+      setGeoJSON(
+        map,
+        selectedColumnSourceID,
+        promoteToFeatureCollection(selectedColumn as GeoJSONFeature | null),
+      );
+    },
+    [selectedColumn],
+  );
+
+  return null;
+}
+
+interface SelectedColumnStyleOpts {
+  color?: string | any[];
+}
+
+function buildSelectedColumnStyle(
+  opts: SelectedColumnStyleOpts = {},
+): StyleFragment {
+  const columnSelectedColor: any =
+    opts.color ?? getCSSVariable("--selection-color", "purple");
+
+  return {
+    sources: {
+      selectedColumn: buildGeoJSONSource(),
+    },
+    version: 8,
+    layers: [
+      {
+        id: "selected-column-highlight",
+        type: "fill",
+        source: selectedColumnSourceID,
+        paint: {
+          "fill-color": columnSelectedColor,
+          "fill-opacity": 0.5,
+        },
+        filter: ["==", "$type", "Polygon"],
+      },
+      {
+        id: "selected-column-edge",
+        type: "line",
+        source: selectedColumnSourceID,
+        paint: {
+          "line-color": columnSelectedColor,
+          "line-width": 2,
+          "line-opacity": 1.0,
+        },
+        filter: ["==", "$type", "Polygon"],
+      },
+      {
+        id: "selected-column-point",
+        type: "circle",
+        source: selectedColumnSourceID,
+        paint: {
+          "circle-radius": 6,
+          "circle-color": columnSelectedColor,
+          "circle-opacity": 1.0,
+        },
+        filter: ["==", "$type", "Point"],
+      },
+    ],
+  };
+}

package/src/maps/layers/index.ts

@@ -0,0 +1,2 @@
+export * from "./columns";
+export * from "./units";

package/src/maps/{units-overlay/index.ts → layers/units.ts}

@@ -3,7 +3,7 @@ import {
   useMacrostratColumns,
 } from "@macrostrat/data-provider";
 import { useAPIResult } from "@macrostrat/ui-components";
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMapStyleOperator, useOverlayStyle } from "@macrostrat/mapbox-react";
 import { FeatureCollection } from "geojson";
 import { useMemo } from "react";
 import { mergeStyles, setGeoJSON } from "@macrostrat/mapbox-utils";
@@ -15,9 +15,11 @@ import {
   loadStyleImage,
   StyleFragment,
 } from "@macrostrat/map-styles";
-import { asChromaColor, getCSSVariable } from "@macrostrat/color-utils";
+import { asChromaColor } from "@macrostrat/color-utils";
 import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 import pMap from "p-map";
+import { BaseColumnsLayer } from "./columns";
+import h from "@macrostrat/hyper";
 
 export interface UnitsOverlayProps {
   time: number;
@@ -30,6 +32,10 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
   const { time, ageSpan = 0.05, patterns = false } = props;
   const lithMap = useLithologies();
 
+  useOverlayStyle(() => {
+    return buildUnitsStyle({ patterns });
+  }, [patterns]);
+
   useMapStyleOperator(
     (map) => {
       if (!patterns) return;
@@ -60,21 +66,6 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
   const units: UnitLong[] = useAPIResult("/units", params);
   const columns = useMacrostratColumns(params.project, false);
 
-  // Set up basic columns layer
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: columns,
-      };
-      setGeoJSON(map, "columns", data);
-    },
-    [columns],
-  );
-
   useMapStyleOperator(
     (map) => {
       if (units == null || columns == null || lithMap == null) {
@@ -99,7 +90,30 @@ export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
     [units, lithMap, columns, patterns],
   );
 
-  return null;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  const isShown = ["boolean", ["feature-state", "shown"], false];
+
+  const opacity = [
+    "case",
+    ["all", isHovered, isShown],
+    0.9,
+    isShown,
+    0.8,
+    isHovered,
+    0.3,
+    0.0,
+  ];
+
+  return h([
+    h(BaseColumnsLayer, {
+      enabled: true,
+      columns,
+      opacity,
+      lineOpacity: 0.2,
+      lineColor: "lightgray",
+      color: "transparent",
+    }),
+  ]);
 }
 
 function handleUnitsLayerUpdate(
@@ -238,77 +252,13 @@ type UnitsStyleOptions = {
 };
 
 export function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {
-  const { color = null, patterns = false } = opts;
-
-  let columnBaseColor: any =
-    color ?? getCSSVariable("--text-subtle-color", "black");
-  const columnSelectedColor = getCSSVariable("--selection-color", "purple");
+  const { patterns = false } = opts;
 
   // If color is in the feature state or geojson properties, use that as second choice
 
-  let columnColor: any = [
-    "coalesce",
-    ["feature-state", "color"],
-    ["get", "color"],
-    columnBaseColor,
-  ];
-
   const baseStyle: StyleFragment = {
-    sources: {
-      columns: buildGeoJSONSource(),
-    },
+    sources: {},
     version: 8,
-    layers: [
-      {
-        id: "columns-fill",
-        type: "fill",
-        source: "columns",
-        paint: {
-          "fill-color": columnColor,
-          "fill-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1,
-          ],
-        },
-      },
-      {
-        id: "columns-line",
-        type: "line",
-        source: "columns",
-        paint: {
-          "line-color": columnColor,
-          "line-width": 1,
-          "line-opacity": 0.5,
-        },
-      },
-      {
-        id: "columns-points",
-        type: "circle",
-        source: "columns",
-        paint: {
-          "circle-radius": 4,
-          "circle-color": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            columnColor,
-            columnBaseColor,
-          ],
-          "circle-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1,
-          ],
-        },
-        filter: ["==", "$type", "Point"],
-      },
-    ],
   };
 
   if (!patterns) {

package/src/maps/unit-map.stories.ts

@@ -1,9 +1,13 @@
 import h from "@macrostrat/hyper";
 import { Meta } from "@storybook/react-vite";
-import { InsetMap } from "./_shared";
+import { InsetMap } from "./inset-map";
 import { MacrostratDataProvider } from "@macrostrat/data-provider";
-import { useMemo } from "react";
-import { buildUnitsStyle, MacrostratUnitsOverlay } from "./units-overlay";
+import { MacrostratUnitsOverlay } from "./layers/units";
+import {
+  ColumnHoverInteraction,
+  ColumnSelectionManager,
+} from "./column-navigation";
+import { useState } from "react";
 
 // @ts-ignore
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
@@ -21,13 +25,7 @@ export default {
 } as Meta<typeof InsetMap>;
 
 function UnitMapComponent(props) {
-  const overlayStyles = useMemo(() => {
-    let styles: any[] = [
-      buildUnitsStyle({ color: "#444", patterns: props.patterns }),
-    ];
-    return styles;
-  }, []);
-
+  const { children, ...rest } = props;
   return h(
     MacrostratDataProvider,
     {
@@ -40,9 +38,8 @@ function UnitMapComponent(props) {
         {
           style: { width: "800px", height: "600px" },
           accessToken: mapboxToken,
-          overlayStyles,
         },
-        h(MacrostratUnitsOverlay, props),
+        [h(MacrostratUnitsOverlay, rest), children],
       ),
     ),
   );
@@ -62,3 +59,21 @@ export const WithPatterns = {
     patterns: true,
   },
 };
+
+export const WithColumnSelection = {
+  args: {
+    time: 100,
+    ageSpan: 0.05,
+    patterns: false,
+  },
+  render(args) {
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    return h(UnitMapComponent, args, [
+      h(ColumnHoverInteraction),
+      h(ColumnSelectionManager, {
+        selectedColumn,
+        onSelectColumn: setSelectedColumn,
+      }),
+    ]);
+  },
+};

package/src/unit-details/age-range.ts

@@ -2,27 +2,50 @@ import {
   DataField,
   IntervalShort,
   IntervalTag,
+  type IntervalTagProps,
   ItemList,
   Value,
 } from "@macrostrat/data-components";
 import { useMacrostratDefs } from "@macrostrat/data-provider";
 import h from "./age-range.module.sass";
 import { formatProportion, formatRange } from "./utils";
+import classNames from "classnames";
+import { useMemo } from "react";
 
-export function AgeField({ unit, children }) {
-  const [b_age, t_age, _unit] = getAgeRange(unit);
+export function AgeField({ unit, children, ...rest }) {
+  const [_b_age, _t_age, _unit] = getAgeRange(unit);
 
   return h(
     DataField,
     {
       label: "Age",
-      value: formatRange(b_age, t_age),
+      value: formatRange(_b_age, _t_age),
       unit: _unit,
+      ...rest,
     },
     children,
   );
 }
 
+export function AgeRange({
+  data,
+  className,
+}: {
+  data: {
+    t_age: number;
+    b_age: number;
+  };
+  className?: string;
+}) {
+  const [_b_age, _t_age, _unit] = getAgeRange(data);
+
+  return h(Value, {
+    value: formatRange(_b_age, _t_age),
+    unit: _unit,
+    className,
+  });
+}
+
 export function AgeLabel({
   age,
   maximumFractionDigits = 2,
@@ -73,72 +96,127 @@ export function Duration({
   return h(Value, { value: _value, unit });
 }
 
-export function IntervalProportions({ unit, onClickItem }) {
+interface UnitIntervalConstraints {
+  b_int_id?: number;
+  t_int_id?: number;
+  b_prop?: number;
+  t_prop?: number;
+  b_int_name?: string;
+  t_int_name?: string;
+  b_age?: number;
+  t_age?: number;
+}
+
+export interface IntervalProportionsProps extends Omit<
+  IntervalTagProps,
+  "interval"
+> {
+  unit: UnitIntervalConstraints;
+  showProportions?: boolean;
+  calculateProportionsFromAges?: boolean;
+}
+
+export function IntervalProportions({
+  unit,
+  className,
+  showProportions,
+  calculateProportionsFromAges = true,
+  ...rest
+}: IntervalProportionsProps) {
   /** Display the proportions of the unit that belong to the base and top intervals, if they are different */
-  if (
-    unit.b_int_id == null &&
-    unit.t_int_id == null &&
-    unit.b_prop == null &&
-    unit.t_prop == null
-  )
-    return null;
+  if (unit.b_int_id == null && unit.t_int_id == null) return null;
+
+  let _showProps = showProportions;
 
   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;
 
+  /** Get interval information */
   const intervalMap = useMacrostratDefs("intervals");
-  const int0 = intervalMap?.get(i0) ?? {};
+  const [int0, int1] = useMemo(() => {
+    const int0 = intervalMap?.get(i0) ?? {};
+    if (i0 === i1) {
+      return [int0, int0];
+    }
+    const int1 = intervalMap?.get(i1) ?? {};
+    return [int0, int1];
+  }, [intervalMap, i0, i1]);
 
   const interval0: IntervalShort = {
-    ...int0,
     id: i0,
     name: unit.b_int_name,
+    ...int0,
   };
 
-  let p0: any = null;
-  const int1 = intervalMap?.get(i1) ?? {};
-  const p1: any = h(Proportion, { value: t_prop });
+  let b_prop = unit.b_prop;
+  let t_prop = unit.t_prop;
 
-  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
-    // We have a single interval with undefined proportions
-    p0 = h(Proportion, { value: b_prop });
+  // If we have b_age and t_age, then we can calculate proportions if they are not given
+  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {
+    b_prop = getProportion(unit.b_age, int0);
+  }
+  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {
+    t_prop = getProportion(unit.t_age, int1);
   }
 
-  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
-    p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+  // If there are no proportions given and we are not explicitly directed to show them,
+  // then we set them to hidden.
+  if (b_prop == null && t_prop == null) {
+    _showProps ??= false;
   }
 
-  const clickable = onClickItem != null;
+  /*
+    Set default proportions to 0 and 1 if they are not given,
+    so that we can display "base" and "top" labels
+   */
+  b_prop ??= 0;
+  t_prop ??= 1;
+
+  let p0: any = null;
+  let p1: any = null;
+
+  if (_showProps !== false) {
+    p1 = h(Proportion, { value: t_prop });
 
-  const handleClick = (event: MouseEvent) => {
-    if (onClickItem) {
-      onClickItem(event, interval0);
+    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
+      // We have a single interval with undefined proportions
+      p0 = h(Proportion, { value: b_prop });
     }
-  };
 
-  return h(ItemList, { className: "interval-proportions" }, [
-    h(IntervalTag, {
-      className: clickable ? "clickable" : "",
-      onClick: clickable ? handleClick : undefined,
-      interval: interval0,
-      prefix: p0,
-    }),
-    h.if(i0 != i1)("span.discourage-break", [
-      h("span.sep", " to "),
+    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
+      p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+    }
+  }
+
+  return h(
+    ItemList,
+    { className: classNames("interval-proportions", className) },
+    [
       h(IntervalTag, {
-        className: clickable ? "clickable" : "",
-        onClick: clickable ? handleClick : undefined,
-        interval: {
-          ...int1,
-          id: i1,
-          name: unit.t_int_name,
-        },
-        prefix: p1,
+        interval: interval0,
+        prefix: p0,
+        ...rest,
       }),
-    ]),
-  ]);
+      h.if(i0 != i1)("span.discourage-break", [
+        h("span.sep", " to "),
+        h(IntervalTag, {
+          interval: {
+            id: i1,
+            name: unit.t_int_name,
+            ...int1,
+          },
+          prefix: p1,
+          ...rest,
+        }),
+      ]),
+    ],
+  );
+}
+
+function getProportion(age: number, interval: IntervalShort): number | null {
+  /** Get proportion with the age */
+  console.log(age, interval);
+  return (interval.b_age - age) / (interval.b_age - interval.t_age);
 }
 
 function Proportion({ value }) {

package/dist/maps/_shared/index.d.ts

@@ -1,2 +0,0 @@
-export * from './inset-map';
-export * from './styles';

package/dist/maps/_shared/inset-map.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"inset-map.cjs","sources":["../../../src/maps/_shared/inset-map.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  MapView,\n  getBasicMapStyle,\n  MapViewProps,\n} from \"@macrostrat/map-interface\";\nimport h from \"@macrostrat/hyper\";\nimport { MapboxMapProvider } from \"@macrostrat/mapbox-react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport {\n  removeMapLabels,\n  removeSourceFromStyle,\n} from \"@macrostrat/mapbox-utils\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nexport interface InsetMapProps extends Omit<MapViewProps, \"style\"> {\n  controls?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  mapStyle?: mapboxgl.Style | string;\n  showLabels?: boolean;\n  showAdmin?: boolean;\n  showRoads?: boolean;\n}\n\nexport function InsetMap({\n  controls,\n  className,\n  children,\n  style,\n  mapStyle,\n  accessToken,\n  showLabels = false,\n  showAdmin = false,\n  showRoads = false,\n  ...rest\n}: InsetMapProps) {\n  const inDarkMode = useInDarkMode();\n  const _style = useMemo((): mapboxgl.Style | string => {\n    return mapStyle ?? getBasicMapStyle({ inDarkMode });\n  }, [mapStyle, inDarkMode]);\n\n  const transformStyle = useCallback(\n    (style) => {\n      let newStyle = style;\n      if (!showLabels) {\n        newStyle = removeMapLabels(newStyle);\n      }\n      if (!showAdmin) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"admin\");\n      }\n      if (!showRoads) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"road\");\n        newStyle = removeSourceFromStyle(newStyle, null, \"aeroway\");\n      }\n      return newStyle;\n    },\n    [mapStyle, showLabels, showRoads, showAdmin],\n  );\n\n  return h(\"div.inset-map\", { className, style }, [\n    h(MapboxMapProvider, [\n      controls,\n      h(\n        MapView,\n        {\n          style: _style,\n          accessToken,\n          standalone: true,\n          /* Default map position that centers on the bulk of Macrostrat columns\n           */\n          mapPosition: {\n            camera: {\n              lng: -100,\n              lat: 38,\n              altitude: 5000000,\n            },\n          },\n          transformStyle,\n          ...rest,\n        },\n        children,\n      ),\n    ]),\n  ]);\n}\n"],"names":["useInDarkMode","useMemo","getBasicMapStyle","useCallback","style","removeMapLabels","removeSourceFromStyle","h","MapboxMapProvider","MapView"],"mappings":";;;;;;;;;;AA0BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAkB;AAChB,QAAM,aAAaA,aAAAA,cAAA;AACnB,QAAM,SAASC,MAAAA,QAAQ,MAA+B;AACpD,WAAO,YAAYC,aAAAA,iBAAiB,EAAE,YAAY;AAAA,EACpD,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,QAAM,iBAAiBC,MAAAA;AAAAA,IACrB,CAACC,WAAU;AACT,UAAI,WAAWA;AACf,UAAI,CAAC,YAAY;AACf,mBAAWC,YAAAA,gBAAgB,QAAQ;AAAA,MACrC;AACA,UAAI,CAAC,WAAW;AACd,mBAAWC,YAAAA,sBAAsB,UAAU,MAAM,OAAO;AAAA,MAC1D;AACA,UAAI,CAAC,WAAW;AACd,mBAAWA,YAAAA,sBAAsB,UAAU,MAAM,MAAM;AACvD,mBAAWA,YAAAA,sBAAsB,UAAU,MAAM,SAAS;AAAA,MAC5D;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,YAAY,WAAW,SAAS;AAAA,EAAA;AAG7C,SAAOC,WAAAA,QAAE,iBAAiB,EAAE,WAAW,SAAS;AAAA,IAC9CA,WAAAA,QAAEC,YAAAA,mBAAmB;AAAA,MACnB;AAAA,MACAD,WAAAA;AAAAA,QACEE,aAAAA;AAAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA,YAAY;AAAA;AAAA;AAAA,UAGZ,aAAa;AAAA,YACX,QAAQ;AAAA,cACN,KAAK;AAAA,cACL,KAAK;AAAA,cACL,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF;AAAA,UACA,GAAG;AAAA,QAAA;AAAA,QAEL;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EAAA,CACF;AACH;;"}

package/dist/maps/_shared/inset-map.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inset-map.js","sources":["../../../src/maps/_shared/inset-map.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  MapView,\n  getBasicMapStyle,\n  MapViewProps,\n} from \"@macrostrat/map-interface\";\nimport h from \"@macrostrat/hyper\";\nimport { MapboxMapProvider } from \"@macrostrat/mapbox-react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport {\n  removeMapLabels,\n  removeSourceFromStyle,\n} from \"@macrostrat/mapbox-utils\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nexport interface InsetMapProps extends Omit<MapViewProps, \"style\"> {\n  controls?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  mapStyle?: mapboxgl.Style | string;\n  showLabels?: boolean;\n  showAdmin?: boolean;\n  showRoads?: boolean;\n}\n\nexport function InsetMap({\n  controls,\n  className,\n  children,\n  style,\n  mapStyle,\n  accessToken,\n  showLabels = false,\n  showAdmin = false,\n  showRoads = false,\n  ...rest\n}: InsetMapProps) {\n  const inDarkMode = useInDarkMode();\n  const _style = useMemo((): mapboxgl.Style | string => {\n    return mapStyle ?? getBasicMapStyle({ inDarkMode });\n  }, [mapStyle, inDarkMode]);\n\n  const transformStyle = useCallback(\n    (style) => {\n      let newStyle = style;\n      if (!showLabels) {\n        newStyle = removeMapLabels(newStyle);\n      }\n      if (!showAdmin) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"admin\");\n      }\n      if (!showRoads) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"road\");\n        newStyle = removeSourceFromStyle(newStyle, null, \"aeroway\");\n      }\n      return newStyle;\n    },\n    [mapStyle, showLabels, showRoads, showAdmin],\n  );\n\n  return h(\"div.inset-map\", { className, style }, [\n    h(MapboxMapProvider, [\n      controls,\n      h(\n        MapView,\n        {\n          style: _style,\n          accessToken,\n          standalone: true,\n          /* Default map position that centers on the bulk of Macrostrat columns\n           */\n          mapPosition: {\n            camera: {\n              lng: -100,\n              lat: 38,\n              altitude: 5000000,\n            },\n          },\n          transformStyle,\n          ...rest,\n        },\n        children,\n      ),\n    ]),\n  ]);\n}\n"],"names":["style"],"mappings":";;;;;;AA0BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAkB;AAChB,QAAM,aAAa,cAAA;AACnB,QAAM,SAAS,QAAQ,MAA+B;AACpD,WAAO,YAAY,iBAAiB,EAAE,YAAY;AAAA,EACpD,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,QAAM,iBAAiB;AAAA,IACrB,CAACA,WAAU;AACT,UAAI,WAAWA;AACf,UAAI,CAAC,YAAY;AACf,mBAAW,gBAAgB,QAAQ;AAAA,MACrC;AACA,UAAI,CAAC,WAAW;AACd,mBAAW,sBAAsB,UAAU,MAAM,OAAO;AAAA,MAC1D;AACA,UAAI,CAAC,WAAW;AACd,mBAAW,sBAAsB,UAAU,MAAM,MAAM;AACvD,mBAAW,sBAAsB,UAAU,MAAM,SAAS;AAAA,MAC5D;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,YAAY,WAAW,SAAS;AAAA,EAAA;AAG7C,SAAO,EAAE,iBAAiB,EAAE,WAAW,SAAS;AAAA,IAC9C,EAAE,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA,YAAY;AAAA;AAAA;AAAA,UAGZ,aAAa;AAAA,YACX,QAAQ;AAAA,cACN,KAAK;AAAA,cACL,KAAK;AAAA,cACL,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF;AAAA,UACA,GAAG;AAAA,QAAA;AAAA,QAEL;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EAAA,CACF;AACH;"}