@macrostrat/map-interface 0.3.0 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.1] - 2024-10-02
+
+- Bug fix: missing package specifier
+
+## [1.0.0] - 2024-10-02
+
+Updated to use BlueprintJS 5.0 

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "0.3.0",
+  "version": "1.0.1",
   "description": "Map interface for Macrostrat",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
-  "style": "dist/index.css",
+  "style": "dist/main.css",
   "dependencies": {
     "@macrostrat/hyper": "^2.2.1",
-    "@macrostrat/mapbox-react": "^2.1.0",
-    "@macrostrat/mapbox-utils": "^1.2.1",
-    "@macrostrat/ui-components": "^3.1.0",
+    "@macrostrat/mapbox-react": "2.2.1",
+    "@macrostrat/mapbox-utils": "1.3.0",
+    "@macrostrat/ui-components": "workspace:^4.1.0",
     "@mapbox/tilebelt": "^1.0.2",
     "@turf/bbox": "^6.5.0",
     "chroma-js": "^2.4.2",
@@ -19,12 +19,13 @@
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.0",
     "mapbox-gl": "^2.15.0",
+    "query-string": "^8.1.0",
     "transition-hook": "^1.5.2",
     "underscore": "^1.13.6",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "@blueprintjs/core": "^3.43.0 || ^4.3.0",
+    "@blueprintjs/core": "^3.43.0 || ^4.3.0 || ^5.0.0",
     "react": "^16.8.6||^17.0.0||^18.0.0",
     "react-dom": "^16.8.6||^17.0.0||^18.0.0"
   },
@@ -33,10 +34,10 @@
     "build": "parcel build"
   },
   "exports": {
-    "typescript": "./src/index.ts",
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "typescript": "./src",
+      "import": "./dist/module.js",
+      "require": "./dist/main.js"
     },
     "./dist/": {
       "import": "./dist/",
@@ -46,5 +47,8 @@
   "files": [
     "dist",
     "src"
-  ]
+  ],
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
 }

package/src/container.ts

@@ -1,4 +1,4 @@
-import hyper from "@macrostrat/hyper";
+import hyper, { addClassNames } from "@macrostrat/hyper";
 import { HTMLDivProps } from "@blueprintjs/core";
 import styles from "./main.module.sass";
 import classNames from "classnames";
@@ -22,6 +22,16 @@ type AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;
 export const PanelCard = (props) =>
   h(Card, { ...props, className: classNames("panel-card", props.className) });
 
+interface ContextStackProps extends HTMLDivProps {
+  adaptiveWidth: boolean;
+  navbar: AnyElement;
+}
+
+export enum DetailPanelStyle {
+  FIXED = "fixed",
+  FLOATING = "floating",
+}
+
 function _MapAreaContainer({
   children,
   className,
@@ -35,7 +45,10 @@ function _MapAreaContainer({
   mapControls = h(MapBottomControls),
   contextStackProps = null,
   detailStackProps = null,
+  detailPanelStyle = DetailPanelStyle.FLOATING,
   fitViewport = true,
+  showPanelOutlines = false,
+  preventMapInteraction = false,
   ...rest
 }: {
   navbar: AnyElement;
@@ -49,9 +62,11 @@ function _MapAreaContainer({
   className?: string;
   detailPanelOpen?: boolean;
   contextPanelOpen?: boolean;
-  contextStackProps?: HTMLDivProps;
+  contextStackProps?: ContextStackProps;
   detailStackProps?: HTMLDivProps;
+  detailPanelStyle: DetailPanelStyle;
   fitViewport?: boolean;
+  showPanelOutlines?: boolean;
 }) {
   const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
   const contextPanelTrans = useTransition(contextPanelOpen, 800);
@@ -65,45 +80,65 @@ function _MapAreaContainer({
     - These styles are doubly applied so we can have both namespaced and
       outside-accessible styles for each case.
   */
-  const mainUIClassName = classNames(
-    {
-      "detail-panel-open": _detailPanelOpen,
-      "map-context-open": contextPanelOpen,
-    },
+  const mainUIClassNames = classNames(
+    "map-container",
+    className,
+    `detail-panel-${detailPanelStyle}`,
     `context-panel-${contextPanelTrans.stage}`,
     `map-context-${contextPanelTrans.stage}`,
     `detail-panel-${detailPanelTrans.stage}`,
-    `map-detail-${detailPanelTrans.stage}`
+    `map-detail-${detailPanelTrans.stage}`,
+    {
+      "detail-panel-open": _detailPanelOpen,
+      "map-context-open": contextPanelOpen,
+      "show-panel-outlines": showPanelOutlines,
+      "fit-viewport": fitViewport,
+    }
   );
 
-  return h(
-    MapStyledContainer,
-    {
-      className: classNames("map-page", className, {
-        "fit-viewport": fitViewport,
-      }),
-    },
+  const mapControlsExt = h([
+    h(ZoomControl, { className: "zoom-control" }),
+    h("div.spacer"),
+    mapControls,
+  ]);
+
+  const detailStackExt = h(
+    "div.detail-stack.infodrawer-container",
+    detailStackProps,
     [
-      h("div.main-ui", { className: mainUIClassName, ...rest }, [
-        h("div.context-stack", [
-          navbar,
-          h("div.context-panel-holder", [
-            h.if(contextPanelTrans.shouldMount)([contextPanel]),
-          ]),
-          h("div.spacer"),
+      h("div.detail-panel-holder", null, detailPanel),
+      h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([mapControlsExt]),
+    ]
+  );
+
+  return h(MapStyledContainer, { className: mainUIClassNames }, [
+    h("div.main-row", [
+      h("div.map-ui", { ...rest }, [
+        h(ContextStack, { navbar, ...contextStackProps }, [
+          h.if(contextPanelTrans.shouldMount)([contextPanel]),
         ]),
         //h(MapView),
         children ?? mainPanel,
-        h("div.detail-stack.infodrawer-container", detailStackProps, [
-          detailPanel,
-          h(ZoomControl, { className: "zoom-control" }),
-          h("div.spacer"),
-          mapControls,
-        ]),
+        h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([detailStackExt]),
+        h.if(detailPanelStyle == DetailPanelStyle.FIXED)(
+          "div.map-control-stack",
+          mapControlsExt
+        ),
       ]),
-      h("div.bottom", null, bottomPanel),
-    ]
-  );
+      h.if(detailPanelStyle == DetailPanelStyle.FIXED)([detailStackExt]),
+    ]),
+    h("div.bottom", null, bottomPanel),
+  ]);
+}
+
+function ContextStack(props: ContextStackProps) {
+  const { adaptiveWidth, navbar, children, ...rest } = props;
+  const props1 = addClassNames(rest, { "adaptive-width": adaptiveWidth });
+  return h("div.context-stack", props1, [
+    navbar,
+    h("div.context-panel-holder", null, children),
+    h("div.spacer"),
+  ]);
 }
 
 const MapProviders = ({ children }) =>

package/src/context-panel/index.ts

@@ -15,8 +15,9 @@ export function LoadingButton({
   icon = "menu",
 }) {
   return h(Button, {
+    className: "loading-button",
     icon: isLoading ? spinnerElement : icon,
-    large: true,
+    large: false,
     minimal: true,
     onClick,
     active: active && !isLoading,

package/src/context-panel/main.module.sass

@@ -9,18 +9,19 @@
   .searchbar
     width: 100%
     background-color: var(--panel-background-color)
-    border-radius: 3px
+    border-radius: 5px
     padding: 0 5px
     display: flex
     flex-direction: row
     align-items: center
-    :global(.bp4-input-group)
+    gap: 5px
+    :global(.bp5-input-group)
       flex-grow: 1
       cursor: text
-    &>*
-      margin-right: 5px
-      &:last-child
-        margin-right: 0
+
+:global(.bp5-navbar)>.loading-button
+  width: 40px
+  height: 40px
 
 .status-tongue
   background-color: var(--panel-background-color)

package/src/controls.ts

@@ -7,8 +7,10 @@ import {
   GlobeControl,
   ThreeDControl,
   MapControlWrapper,
+  useMapStatus,
 } from "@macrostrat/mapbox-react";
 import { ScaleControl as BaseScaleControl } from "mapbox-gl";
+import { DevToolsButtonSlot } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -41,12 +43,21 @@ function GeolocationControl(props) {
   });
 }
 
-export function MapBottomControls() {
+export function MapBottomControls({ children }) {
+  const { isInitialized } = useMapStatus();
+
+  if (!isInitialized) {
+    return null;
+  }
+
   return h("div.map-controls", [
     h(ScaleControl),
     h(ThreeDControl, { className: "map-3d-control" }),
     h(CompassControl, { className: "compass-control" }),
     h(GlobeControl, { className: "globe-control" }),
     h(GeolocationControl, { className: "geolocation-control" }),
+    // If we have global development tools enabled, show the button
+    h(DevToolsButtonSlot, { className: "map-control" }),
+    children,
   ]);
 }

package/src/dev/main.module.sass

@@ -41,7 +41,7 @@
 .opacity-slider
   margin: 0 1em 0.5em
   :global
-    .bp4-slider-handle .bp4-slider-label
+    .bp5-slider-handle .bp5-slider-label
       background-color: var(--secondary-color)
       color: var(--text-color)
 

package/src/expansion-panel/main.module.sass

@@ -20,9 +20,13 @@
   .title
     flex-grow: 1
 
-// :global(.bp4-dark) .panel-subhead
+// :global(.bp5-dark) .panel-subhead
 //   margin 0 1px
 
+.info-panel-section
+  &>.panel-subhead
+    margin: -1px calc(var(--panel-padding-h) * -1) 0
+
 .expansion-panel
   padding: 0
   flex-wrap: wrap
@@ -56,14 +60,14 @@
 
 .expansion-summary-title-help
   margin-left: 5px
-  :global(.bp4-icon)
+  :global(.bp5-icon)
     margin-left: 5px
 
 .expansion-panel-header
   cursor: pointer
   &:hover
     background-color: var(--accent-hover-color)
-  :global(.bp4-icon)
+  :global(.bp5-icon)
     transform: translate(0,3px)
 
 .expansion-children
@@ -107,7 +111,7 @@
   position: relative
 
 .expandable-details-toggle
-  :global(.bp4-button)
+  :global(.bp5-button)
     font-size: 10px
 
 .expandable-details

package/src/helpers.ts

@@ -1,6 +1,6 @@
 import {
   useMapRef,
-  useMapEaseToCenter,
+  useMapEaseTo,
   useMapDispatch,
   useMapStatus,
 } from "@macrostrat/mapbox-react";
@@ -67,7 +67,7 @@ export function MapPaddingManager({
   });
 
   // Ideally, we would not have to do this when we know the infobox is loaded
-  useMapEaseToCenter(infoMarkerPosition, padding);
+  useMapEaseTo({ center: infoMarkerPosition, padding });
 
   return null;
 }

package/src/location-info/hash-string.ts

@@ -0,0 +1,102 @@
+import {
+  LatLng,
+  MapPosition,
+  formatCoordForZoomLevel,
+} from "@macrostrat/mapbox-utils";
+import { ParsedQuery } from "query-string";
+import { fmt1, fmt2, fmtInt } from "./utils";
+
+interface LocationHashParams {
+  x?: string;
+  y?: string;
+  z?: string;
+  a?: string;
+  e?: string;
+}
+
+export function applyMapPositionToHash(
+  args: LocationHashParams,
+  mapPosition: MapPosition | null
+) {
+  const pos = mapPosition?.camera;
+  if (pos == null) return;
+  const zoom = mapPosition.target?.zoom;
+
+  args.x = formatCoordForZoomLevel(pos.lng, zoom);
+  args.y = formatCoordForZoomLevel(pos.lat, zoom);
+
+  if (pos.bearing == 0 && pos.pitch == 0 && zoom != null) {
+    args.z = fmt1(zoom);
+  } else if (pos.altitude != null) {
+    if (pos.altitude > 5000) {
+      args.z = fmt2(pos.altitude / 1000) + "km";
+    } else {
+      args.z = fmtInt(pos.altitude) + "m";
+    }
+  }
+  if (pos.bearing != 0) {
+    let az = pos.bearing;
+    if (az < 0) az += 360;
+    args.a = fmtInt(az);
+  }
+  if (pos.pitch != 0) {
+    args.e = fmtInt(pos.pitch);
+  }
+}
+
+function _fmt(x: string | number | string[]) {
+  if (Array.isArray(x)) {
+    x = x[0];
+  }
+  return parseFloat(x.toString());
+}
+
+export function getMapPositionForHash(
+  hashData: ParsedQuery<string>,
+  centerPosition: LatLng | null
+): MapPosition {
+  const {
+    x = centerPosition?.lng ?? 0,
+    y = centerPosition?.lat ?? 0,
+    // Different default for zoom depending on whether we have a marker
+    z = centerPosition != null ? 7 : 2,
+    a = 0,
+    e = 0,
+  } = hashData;
+
+  const lng = _fmt(x);
+  const lat = _fmt(y);
+
+  let altitude = null;
+  let zoom = null;
+  const _z = z.toString();
+  if (_z.endsWith("km")) {
+    altitude = _fmt(_z.substring(0, _z.length - 2)) * 1000;
+  } else if (_z.endsWith("m")) {
+    altitude = _fmt(_z.substring(0, _z.length - 1));
+  } else {
+    zoom = _fmt(z);
+  }
+  const bearing = _fmt(a);
+  const pitch = _fmt(e);
+
+  let target = undefined;
+  if (bearing == 0 && pitch == 0 && zoom != null) {
+    target = {
+      lat,
+      lng,
+      zoom,
+    };
+  }
+
+  return {
+    camera: {
+      lng: _fmt(x),
+      lat: _fmt(y),
+      altitude,
+      bearing: _fmt(a),
+      pitch: _fmt(e),
+    },
+    target,
+  };
+}

package/src/location-info/index.ts

@@ -1,10 +1,12 @@
 import h from "@macrostrat/hyper";
 import {
-  formatValue,
-  normalizeLng,
-  metersToFeet,
   formatCoordForZoomLevel,
-} from "./utils";
+  metersToFeet,
+  normalizeLng,
+} from "@macrostrat/mapbox-utils";
+import { formatValue } from "./utils";
+
+export * from "./hash-string";
 
 export function ValueWithUnit(props) {
   const { value, unit } = props;

package/src/location-info/utils.ts

@@ -1,21 +1,5 @@
 import { format } from "d3-format";
 
-export function formatCoordForZoomLevel(val: number, zoom: number): string {
-  if (zoom < 2) {
-    return fmt1(val);
-  } else if (zoom < 4) {
-    return fmt2(val);
-  } else if (zoom < 7) {
-    return fmt3(val);
-  }
-  return fmt4(val);
-}
-
-export function normalizeLng(lng) {
-  // via https://github.com/Leaflet/Leaflet/blob/32c9156cb1d1c9bd53130639ec4d8575fbeef5a6/src/core/Util.js#L87
-  return (((((lng - 180) % 360) + 360) % 360) - 180).toFixed(4);
-}
-
 export const fmt4 = format(".4~f");
 export const fmt3 = format(".3~f");
 export const fmt2 = format(".2~f");
@@ -38,7 +22,3 @@ export function formatValue(val: number, precision: number = 0): string {
       return fmt4(val);
   }
 }
-
-export function metersToFeet(meters, precision = 0) {
-  return (meters * 3.28084).toFixed(precision);
-}

package/src/location-panel/header.ts

@@ -11,12 +11,14 @@ import {
 
 const h = hyper.styled(styles);
 
-function PositionButton({ position }) {
+function PositionButton({ position, showCopyLink = false }) {
   const focusState = useFocusState(position);
 
+  const copyLinkIsVisible = isCentered(focusState) && showCopyLink;
+
   return h("div.position-controls", [
     h(LocationFocusButton, { location: position, focusState }, []),
-    isCentered(focusState) ? h(CopyLinkButton, { itemName: "position" }) : null,
+    h.if(copyLinkIsVisible)(CopyLinkButton, { itemName: "position" }),
   ]);
 }
 
@@ -63,20 +65,31 @@ function CopyLinkButton({ itemName, children, onClick, ...rest }) {
   );
 }
 
-interface InfoDrawerHeaderProps {
+export interface InfoDrawerHeaderProps {
   onClose: () => void;
   position: mapboxgl.LngLat;
   zoom?: number;
   elevation?: number;
+  showCopyPositionButton?: boolean;
 }
 
 export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
-  const { onClose, position, zoom = 7, elevation } = props;
+  const {
+    onClose,
+    position,
+    zoom = 7,
+    elevation,
+    showCopyPositionButton,
+  } = props;
 
   return h("header.location-panel-header", [
-    h(PositionButton, { position }),
+    h(PositionButton, { position, showCopyLink: showCopyPositionButton }),
     h("div.spacer"),
-    h(LngLatCoords, { position, zoom, className: "infodrawer-header-item" }),
+    h(LngLatCoords, {
+      position,
+      zoom,
+      className: "infodrawer-header-item",
+    }),
     h.if(elevation != null)(Elevation, {
       elevation,
       className: "infodrawer-header-item",

package/src/location-panel/index.ts

@@ -1,6 +1,6 @@
 import { Card } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
-import { InfoDrawerHeader } from "./header";
+import { InfoDrawerHeader, InfoDrawerHeaderProps } from "./header";
 import classNames from "classnames";
 import styles from "./main.module.sass";
 import { ErrorBoundary } from "@macrostrat/ui-components";
@@ -12,11 +12,38 @@ export function InfoDrawerContainer(props) {
   return h(Card, { ...props, className });
 }
 
+interface BaseInfoDrawerProps extends InfoDrawerHeaderProps {
+  className?: string;
+  title?: string;
+  headerElement?: JSX.Element;
+  children?: React.ReactNode;
+}
+
+export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
+  const {
+    className,
+    headerElement = null,
+    title,
+    onClose,
+    children,
+    ...rest
+  } = props;
+  const header =
+    headerElement ??
+    h(InfoDrawerHeader, { onClose, ...rest }, [
+      title == null ? null : h("h3", [title]),
+    ]);
+  return h(InfoDrawerContainer, { className }, [
+    header,
+    h(
+      "div.infodrawer-body",
+      h("div.infodrawer-contents", h(ErrorBoundary, null, children))
+    ),
+  ]);
+}
+
 export function LocationPanel(props) {
   const { children, className, loading = false, ...rest } = props;
   const cls = classNames("location-panel", className, { loading });
-  return h(InfoDrawerContainer, { className: cls }, [
-    h(InfoDrawerHeader, rest),
-    h("div.infodrawer-body", h("div.infodrawer-contents", h(ErrorBoundary, null, children))),
-  ]);
+  return h(BaseInfoDrawer, { className: cls, ...rest }, children);
 }

package/src/location-panel/main.module.sass

@@ -1,4 +1,4 @@
-.copy-link-button:global(.bp4-minimal.bp4-button)
+.copy-link-button:global(.bp5-minimal.bp5-button)
   color: var(--text-subtle-color)
   svg
     fill: var(--text-subtle-color)
@@ -15,7 +15,7 @@
   .left-icon
     padding: 7px
 
-  .position-controls :global(.bp4-button)
+  .position-controls :global(.bp5-button)
     font-size: 12px !important
 
 .infodrawer-header-item
@@ -32,7 +32,7 @@
   display: flex
   flex-direction: column
   overflow: hidden
-  &:global(.bp4-card)
+  &:global(.bp5-card)
     padding: 0
 
   &.loading