@macrostrat/map-interface 1.1.0 → 1.2.1

package/src/context-panel/index.ts

@@ -13,7 +13,7 @@ export function LoadingButton({
   isLoading = false,
   onClick,
   active = false,
-  large = false,
+  large = true,
   icon = "menu",
   style,
 }) {
@@ -37,13 +37,13 @@ type AnyChildren = React.ReactNode;
 
 export interface FloatingNavbarProps {
   className?: string;
-  children: AnyChildren;
+  children?: AnyChildren;
   headerElement?: AnyChildren;
   title?: AnyChildren;
   statusElement?: AnyChildren;
   rightElement?: AnyChildren;
-  height: number | string;
-  width: number | string;
+  height?: number | string;
+  width?: number | string;
   style?: object;
 }
 

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

@@ -11,7 +11,7 @@
   .searchbar
     width: 100%
     background-color: var(--panel-background-color)
-    border-radius: 5px
+    border-radius: var(--map-panel-border-radius, 5px)
     padding: var(--navbar-padding, 10px)
     display: flex
     flex-direction: row

package/src/dev/main.module.sass

@@ -5,22 +5,35 @@
 .key-value
   display: inline-block
   margin-right: 1em
+
   .key
     font-weight: bold
     font-size: 0.9em
+
     &:after
       content: ': '
+
   .value
     font-size: 0.9em
 
 .feature-properties
   position: relative
+
   &:before
     content: "–"
     position: absolute
     top: 4px
     left: 0
 
+  .controls
+    display: flex
+    flex-direction: row
+    align-items: flex-end
+    position: absolute
+    top: 0
+    right: 0
+    gap: 0.5em
+
 .feature-header h3
   margin-bottom: 0
   margin-top: 0.5em
@@ -28,6 +41,7 @@
 .feature-group
   border-bottom: 1px solid var(--panel-rule-inner)
   margin-bottom: 0.5em
+
   &:last-child
     border-bottom: none
 
@@ -35,11 +49,13 @@
   display: flex
   flex-direction: row
   align-items: baseline
+
   h3
     margin-right: 0.5em
 
 .opacity-slider
   margin: 0 1em 0.5em
+
   :global
     .bp5-slider-handle .bp5-slider-label
       background-color: var(--secondary-color)

package/src/dev/map-page.ts

@@ -21,14 +21,15 @@ import { MapPosition } from "@macrostrat/mapbox-utils";
 
 export const h = hyper.styled(styles);
 
-export function MapInspector({
+export function MapInspectorV2({
   title = "Map inspector",
   headerElement = null,
   transformRequest = null,
   mapPosition = null,
   mapboxToken = null,
   overlayStyle = null,
-  children,
+  controls = null,
+  children = null,
   style,
   bounds = null,
   focusedSource = null,
@@ -40,6 +41,7 @@ export function MapInspector({
   transformRequest?: mapboxgl.TransformRequestFunction;
   title?: string;
   style?: mapboxgl.Style | string;
+  controls?: React.ReactNode;
   children?: React.ReactNode;
   mapboxToken?: string;
   overlayStyle?: mapboxgl.Style | string;
@@ -49,7 +51,7 @@ export function MapInspector({
   mapPosition?: MapPosition;
   bounds?: [number, number, number, number];
   fitViewport?: boolean;
-  styleType: "standard" | "macrostrat";
+  styleType?: "standard" | "macrostrat";
 }) {
   /* We apply a custom style to the panel container when we are interacting
     with the search bar, so that we can block map interactions until search
@@ -147,7 +149,7 @@ export function MapInspector({
         title,
       }),
       contextPanel: h(PanelCard, [
-        children,
+        controls,
         h(Switch, {
           checked: xRay,
           label: "X-ray mode",
@@ -180,10 +182,23 @@ export function MapInspector({
           setPosition: onSelectPosition,
         }),
         h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+        children,
       ]
     )
   );
 }
 
+function MapInspector(props) {
+  const { children, controls, ...rest } = props;
+  /** Compatibility wrapper for MapInspectorV2 */
+  // React warning about this legacy usage
+  console.warn("MapInspector is deprecated. Use MapInspectorV2 instead");
+
+  return h(MapInspectorV2, {
+    ...rest,
+    controls: [children, controls],
+  });
+}
+
 // Legacy export
 export const DevMapPage = MapInspector;

package/src/dev/vector-tile-features.ts

@@ -1,17 +1,24 @@
-import { Spinner, Switch } from "@blueprintjs/core";
+import { Spinner, Switch, Button, Intent } from "@blueprintjs/core";
 import { useMapRef, useMapStatus } from "@macrostrat/mapbox-react";
 import mapboxgl from "mapbox-gl";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import { useEffect, useState } from "react";
-import { JSONView, usePrevious } from "@macrostrat/ui-components";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { JSONView } from "@macrostrat/ui-components";
 import { group } from "d3-array";
 import { ExpansionPanel } from "../expansion-panel";
 
 const h = hyper.styled(styles);
 
 export function FeatureProperties({ data, ...rest }) {
-  return h("div.feature-properties", [
+  // Instead of managing hover state with CSS, we use a state variable,
+  // so that the button re-renders when the state changes
+  const [showControls, setShowControls] = useState(false);
+  const onMouseEnter = useCallback(() => setShowControls(true), []);
+  const onMouseLeave = useCallback(() => setShowControls(false), []);
+
+  return h("div.feature-properties", { onMouseEnter, onMouseLeave }, [
+    h.if(showControls)("div.controls", h(CopyJSONButton, { data })),
     h(JSONView, {
       data,
       hideRoot: true,
@@ -27,6 +34,21 @@ export function FeatureRecord({ feature }) {
   ]);
 }
 
+function CopyJSONButton({ data }) {
+  const [copied, setCopied] = useState(false);
+  return h(Button, {
+    icon: copied ? "tick" : "clipboard",
+    intent: copied ? Intent.SUCCESS : Intent.NONE,
+    minimal: true,
+    small: true,
+    onClick() {
+      navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+    },
+  });
+}
+
+/** This component wraps queryRenderedFeatures to get features at a given location */
 export function FeatureSelectionHandler({
   selectedLocation,
   setFeatures,
@@ -37,8 +59,10 @@ export function FeatureSelectionHandler({
   radius?: number;
 }) {
   const mapRef = useMapRef();
-  const { isLoading } = useMapStatus();
-  const prevLocation = usePrevious(selectedLocation);
+  const isLoading = useMapStatus((s) => s.isLoading);
+  const isInitialized = useMapStatus((s) => s.isInitialized);
+  const prevLocation = useRef(null);
+  const prevFeatures = useRef([]);
 
   useEffect(() => {
     const map = mapRef?.current;
@@ -48,8 +72,18 @@ export function FeatureSelectionHandler({
       return;
     }
 
+    if (!isInitialized) return;
+
+    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+
+    const locationMemo = JSON.stringify(selectedLocation);
+    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)
+      return;
+
+    prevLocation.current = locationMemo;
+
     // Don't update if the location hasn't changed
-    if (selectedLocation == prevLocation) return;
+    //if (selectedLocation == prevLocation) return;
 
     const r = radius;
     const pt = map.project(selectedLocation);
@@ -59,8 +93,9 @@ export function FeatureSelectionHandler({
       [pt.x + r, pt.y + r],
     ];
     const features = map.queryRenderedFeatures(bbox);
+    prevFeatures.current = features ?? [];
     setFeatures(features);
-  }, [mapRef.current, prevLocation?.current, selectedLocation, isLoading]);
+  }, [isInitialized, selectedLocation, isLoading]);
 
   return null;
 }
@@ -143,11 +178,7 @@ function UnitNumber({ value, unit, precision = 1 }) {
   ]);
 }
 
-export function FeaturePanel({
-  features,
-  focusedSource = null,
-  focusedSourceTitle = null,
-}) {
+export function FeaturePanel({ features, focusedSource = null }) {
   if (features == null) return null;
 
   let focusedSourcePanel = null;

package/src/location-panel/header.ts

@@ -11,14 +11,16 @@ import {
 
 const h = hyper.styled(styles);
 
-function PositionButton({ position, showCopyLink = false }) {
+function PositionButton({ position, bounds, showCopyLink = false }) {
   const focusState = useFocusState(position);
 
   const copyLinkIsVisible = isCentered(focusState) && showCopyLink;
 
   return h("div.position-controls", [
-    h(LocationFocusButton, { location: position, focusState }, []),
-    h.if(copyLinkIsVisible)(CopyLinkButton, { itemName: "position" }),
+    h(LocationFocusButton, { location: position, bounds, focusState }, []),
+    h.if(copyLinkIsVisible && position != null)(CopyLinkButton, {
+      itemName: "position",
+    }),
   ]);
 }
 
@@ -66,26 +68,39 @@ function CopyLinkButton({ itemName, children, onClick, ...rest }) {
 }
 
 export interface InfoDrawerHeaderProps {
-  onClose: () => void;
-  position: mapboxgl.LngLat;
+  onClose?: () => void;
+  position?: mapboxgl.LngLat;
   zoom?: number;
   elevation?: number;
   showCopyPositionButton?: boolean;
+  bounds?: mapboxgl.LngLatBounds;
 }
 
 export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
   const {
     onClose,
     position,
+    bounds,
     zoom = 7,
     elevation,
     showCopyPositionButton,
+    children,
   } = props;
 
+  let leftButton = null;
+  if (bounds != null || position != null) {
+    leftButton = h(PositionButton, {
+      position,
+      bounds,
+      showCopyLink: showCopyPositionButton,
+    });
+  }
+
   return h("header.location-panel-header", [
-    h(PositionButton, { position, showCopyLink: showCopyPositionButton }),
+    leftButton,
+    children,
     h("div.spacer"),
-    h(LngLatCoords, {
+    h.if(position != null)(LngLatCoords, {
       position,
       zoom,
       className: "infodrawer-header-item",
@@ -94,6 +109,10 @@ export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
       elevation,
       className: "infodrawer-header-item",
     }),
-    h(Button, { minimal: true, icon: "cross", onClick: onClose }),
+    h.if(onClose != null)(Button, {
+      minimal: true,
+      icon: "cross",
+      onClick: onClose,
+    }),
   ]);
 }

package/src/location-panel/index.ts

@@ -1,15 +1,15 @@
-import { Card } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import { InfoDrawerHeader, InfoDrawerHeaderProps } from "./header";
 import classNames from "classnames";
 import styles from "./main.module.sass";
 import { ErrorBoundary } from "@macrostrat/ui-components";
+import { PanelCard } from "../container";
 
 const h = hyper.styled(styles);
 
 export function InfoDrawerContainer(props) {
   const className = classNames("infodrawer", props.className);
-  return h(Card, { ...props, className });
+  return h(PanelCard, { ...props, className });
 }
 
 interface BaseInfoDrawerProps extends InfoDrawerHeaderProps {
@@ -42,6 +42,8 @@ export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
   ]);
 }
 
+export const DetailsPanel = BaseInfoDrawer;
+
 export function LocationPanel(props) {
   const { children, className, loading = false, ...rest } = props;
   const cls = classNames("location-panel", className, { loading });

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

@@ -10,6 +10,7 @@
   flex-direction: row
   align-items: center
   gap: 1em
+  min-height: 40px
   border-bottom: 1px solid var(--panel-rule-color)
 
   .spacer
@@ -21,6 +22,12 @@
   .position-controls :global(.bp5-button)
     font-size: 12px !important
 
+  // Text elements should
+  h1, h2, h3, h4, h5, h6, p
+    margin: 0
+    &:first-child
+      margin-left: 10px
+
 .infodrawer-header-item
   font-size: 12px
 

package/src/main.module.sass

@@ -5,6 +5,7 @@
   width: 100%
   height: 100%
   overflow: hidden
+  --map-panel-border-radius: 4px
 
   &.show-panel-outlines
     .map-view-container
@@ -101,7 +102,7 @@
     position: absolute
 
 
-.context-panel-holder>:global(.bp5-card)
+.context-panel-holder > :global(.bp5-card)
   padding: 10px
   background-color: var(--panel-background-color)
 
@@ -109,6 +110,7 @@
   padding: 10px
   background-color: var(--panel-background-color)
   overflow: hidden
+  border-radius: var(--map-panel-border-radius)
 
   & > :last-child
     margin-bottom: 0
@@ -394,6 +396,7 @@
     display: flex
     flex-direction: column
 
+
     &.adaptive-width
       width: var(--map-context-stack-width, none)
       max-width: var(--map-context-stack-max-width, none)

package/src/map-view/index.ts

@@ -3,7 +3,6 @@ import {
   useMapRef,
   useMapDispatch,
   useMapPosition,
-  useMapStatus,
 } from "@macrostrat/mapbox-react";
 import {
   mapViewInfo,
@@ -129,6 +128,7 @@ export function MapView(props: MapViewProps) {
         style,
         projection,
         mapPosition,
+        transformRequest,
         ...rest,
       });
       dispatch({ type: "set-map", payload: map });