@macrostrat/map-interface 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.10] - 2024-11-05
+
+- Add documentation and examples of map easing
+- Improve floating navigation
+- Improve map padding management component
+- Improve styles
+
 ## [1.0.8] - 2024-10-26
 
 - Fix inspector colors with new version of `chroma-js`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Map interface for Macrostrat",
   "main": "dist/main.cjs",
   "module": "dist/module.mjs",
@@ -50,7 +50,9 @@
     "src"
   ],
   "devDependencies": {
-    "parcel": "^2.12.0"
+    "parcel": "^2.12.0",
+    "postcss": "^8.0.0",
+    "postcss-modules": "^4.3.0"
   },
   "repository": {
     "type": "git",

package/src/container.ts

@@ -32,6 +32,9 @@ export enum DetailPanelStyle {
   FLOATING = "floating",
 }
 
+export const MapAreaContainer = (props) =>
+  h(MapProviders, h(_MapAreaContainer, props));
+
 function _MapAreaContainer({
   children,
   className,
@@ -144,9 +147,6 @@ function ContextStack(props: ContextStackProps) {
 const MapProviders = ({ children }) =>
   h(ToasterContext, h(MapboxMapProvider, children));
 
-export const MapAreaContainer = (props) =>
-  h(MapProviders, h(_MapAreaContainer, props));
-
 interface MapContainerProps {
   className?: string;
   children?: ReactNode;

package/src/context-panel/index.ts

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
-import { Navbar, Button, InputGroup, Spinner, Card } from "@blueprintjs/core";
+import { Navbar, Button, Spinner, Card, Text } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { useMapStatus } from "@macrostrat/mapbox-react";
+import { Spacer } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -12,15 +13,18 @@ export function LoadingButton({
   isLoading = false,
   onClick,
   active = false,
+  large = false,
   icon = "menu",
+  style,
 }) {
   return h(Button, {
     className: "loading-button",
     icon: isLoading ? spinnerElement : icon,
-    large: false,
+    large,
     minimal: true,
     onClick,
     active: active && !isLoading,
+    style,
   });
 }
 
@@ -32,18 +36,57 @@ export function MapLoadingButton(props) {
 
 type AnyChildren = React.ReactNode | React.ReactFragment;
 
+export interface FloatingNavbarProps {
+  className?: string;
+  children: AnyChildren;
+  headerElement?: AnyChildren;
+  title?: AnyChildren;
+  statusElement?: AnyChildren;
+  rightElement?: AnyChildren;
+  height: number | string;
+  width: number | string;
+  style?: object;
+}
+
 export function FloatingNavbar({
   className,
   children,
+  headerElement = null,
+  title = null,
   statusElement = null,
-}: {
-  className?: string;
-  children?: AnyChildren;
-  statusElement?: AnyChildren;
-}) {
-  return h("div.searchbar-holder", { className }, [
+  rightElement = null,
+  height,
+  width,
+  style = {},
+}: FloatingNavbarProps) {
+  let _rightElement: React.ReactNode | null = null;
+  if (rightElement != null) {
+    _rightElement = h("div.right-element", rightElement);
+  }
+
+  let _headerElement: React.ReactNode | null = headerElement;
+  if (title != null && _headerElement == null) {
+    if (typeof title === "string") {
+      _headerElement = h(Text, { tagName: "h2", ellipsize: true }, title);
+    } else {
+      _headerElement = title;
+    }
+  }
+
+  if (_headerElement != null) {
+    _headerElement = h([_headerElement, h(Spacer)]);
+  }
+
+  return h("div.searchbar-holder", { className, style: { width } }, [
     h("div.navbar-holder", [
-      h(Navbar, { className: "searchbar panel" }, children),
+      h(
+        Navbar,
+        {
+          className: "searchbar navbar panel",
+          style: { height, ...style },
+        },
+        [_headerElement, children, _rightElement]
+      ),
     ]),
     h.if(statusElement != null)(
       Card,

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

@@ -3,32 +3,40 @@
   display: flex
   flex-direction: column
   margin: 0
+
   .navbar-holder
     display: flex
     flex-direction: row
+
   .searchbar
     width: 100%
     background-color: var(--panel-background-color)
     border-radius: 5px
-    padding: 0 5px
+    padding: var(--navbar-padding, 10px)
     display: flex
     flex-direction: row
     align-items: center
     gap: 5px
+
     :global(.bp5-input-group)
       flex-grow: 1
       cursor: text
 
-:global(.bp5-navbar)>.loading-button
+.navbar
+  min-height: 50px
+
+:global(.bp5-navbar) > .loading-button
   width: 40px
   height: 40px
 
 .status-tongue
   background-color: var(--panel-background-color)
   margin: 5px
+  margin-bottom: 0
   margin-top: -12px
   padding: 0
   padding-top: 12px
+  overflow: hidden
 
 @media screen and (max-width: 768px)
   .status-tongue

package/src/dev/map-page.ts

@@ -33,7 +33,6 @@ export function MapInspector({
   focusedSource = null,
   focusedSourceTitle = null,
   fitViewport = true,
-  projection = null,
 }: {
   headerElement?: React.ReactElement;
   transformRequest?: mapboxgl.TransformRequestFunction;
@@ -127,14 +126,18 @@ export function MapInspector({
   return h(
     MapAreaContainer,
     {
-      navbar: h(FloatingNavbar, [
-        headerElement ?? h("h2", title),
-        h(Spacer),
-        h(MapLoadingButton, {
+      navbar: h(FloatingNavbar, {
+        rightElement: h(MapLoadingButton, {
+          large: true,
           active: isOpen,
           onClick: () => setOpen(!isOpen),
+          style: {
+            marginRight: "-5px",
+          },
         }),
-      ]),
+        headerElement,
+        title,
+      }),
       contextPanel: h(PanelCard, [
         h(Switch, {
           checked: xRay,

package/src/helpers.ts

@@ -4,7 +4,7 @@ import {
   useMapDispatch,
   useMapStatus,
 } from "@macrostrat/mapbox-react";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { debounce } from "underscore";
 import useResizeObserver from "use-resize-observer";
 
@@ -12,6 +12,7 @@ import { getMapPosition } from "@macrostrat/mapbox-utils";
 import mapboxgl from "mapbox-gl";
 import { useCallback, useEffect, useState } from "react";
 import { getMapPadding, useMapMarker } from "./utils";
+import { useInDarkMode } from "@macrostrat/ui-components";
 
 export function MapResizeManager({ containerRef }) {
   const mapRef = useMapRef();
@@ -34,12 +35,14 @@ interface MapPaddingManagerProps {
   containerRef: React.RefObject<HTMLDivElement>;
   parentRef: React.RefObject<HTMLDivElement>;
   infoMarkerPosition: mapboxgl.LngLatLike;
+  debounceTime?: number;
 }
 
 export function MapPaddingManager({
   containerRef,
   parentRef,
   infoMarkerPosition,
+  debounceTime = 200,
 }: MapPaddingManagerProps) {
   const mapRef = useMapRef();
 
@@ -47,11 +50,16 @@ export function MapPaddingManager({
     getMapPadding(containerRef, parentRef)
   );
 
-  const updateMapPadding = useCallback(() => {
+  const _updateMapPadding = useCallback(() => {
     const newPadding = getMapPadding(containerRef, parentRef);
     setPadding(newPadding);
   }, [containerRef.current, parentRef.current]);
 
+  const updateMapPadding = useMemo(
+    () => debounce(_updateMapPadding, debounceTime),
+    [_updateMapPadding, debounceTime]
+  );
+
   useEffect(() => {
     const map = mapRef.current;
     if (map == null) return;
@@ -64,6 +72,9 @@ export function MapPaddingManager({
     onResize(sz) {
       updateMapPadding();
     },
+    round(n) {
+      return Math.round(n);
+    },
   });
 
   // Ideally, we would not have to do this when we know the infobox is loaded
@@ -170,3 +181,10 @@ export function MapMarker({ position, setPosition, centerMarker = true }) {
 
   return null;
 }
+
+export function useBasicStylePair() {
+  const inDarkMode = useInDarkMode();
+  return inDarkMode
+    ? "mapbox://styles/mapbox/dark-v10"
+    : "mapbox://styles/mapbox/light-v10";
+}

package/src/main.module.sass

@@ -101,6 +101,10 @@
     position: absolute
 
 
+.context-panel-holder>:global(.bp5-card)
+  padding: 10px
+  background-color: var(--panel-background-color)
+
 .panel-card
   padding: 10px
   background-color: var(--panel-background-color)
@@ -522,7 +526,8 @@
       .spacer
         flex: 1
 
-// Shift UI around to center elements if we're in the global view 
+
+// Shift UI around to center elements if we're in the global view
 @media only screen and (min-width: 768px)
   .map-container.detail-panel-leave .map-view-container
     margin-right: -14em