@macrostrat/map-interface 0.0.1

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@macrostrat/map-interface",
+  "version": "0.0.1",
+  "description": "Map interface for Macrostrat",
+  "type": "module",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "dependencies": {
+    "@macrostrat/hyper": "^2.2.1",
+    "@macrostrat/mapbox-react": "2.0.0",
+    "@macrostrat/mapbox-utils": "1.1.1",
+    "@mapbox/tilebelt": "^1.0.2",
+    "@turf/bbox": "^6.5.0",
+    "chroma-js": "^2.4.2",
+    "classnames": "^2.3.2",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "mapbox-gl": "^2.11.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",
+    "react": "^16.8.6||^17.0.0||^18.0.0"
+  },
+  "scripts": {
+    "dev": "parcel watch",
+    "build": "parcel build"
+  },
+  "exports": {
+    "typescript": "./src/index.ts"
+  }
+}

package/src/container.ts

@@ -0,0 +1,140 @@
+import hyper from "@macrostrat/hyper";
+import { HTMLDivProps } from "@blueprintjs/core";
+import styles from "./main.module.sass";
+import classNames from "classnames";
+import { useTransition } from "transition-hook";
+import {
+  MapboxMapProvider,
+  ZoomControl,
+  useMapStatus,
+} from "@macrostrat/mapbox-react";
+import { ToasterContext } from "@macrostrat/ui-components";
+import { MapBottomControls } from "./controls";
+import { mapViewInfo, MapPosition } from "@macrostrat/mapbox-utils";
+import { Card } from "@blueprintjs/core";
+
+import { ReactNode } from "react";
+
+export * from "./location-panel";
+export * from "./context-panel";
+//export * from "./dev";
+
+export function MapInterface() {
+  return h("div", "Hello world");
+}
+
+const h = hyper.styled(styles);
+
+type AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;
+
+export const PanelCard = (props) =>
+  h(Card, { ...props, className: classNames("panel-card", props.className) });
+
+function _MapAreaContainer({
+  children,
+  className,
+  navbar,
+  contextPanel = null,
+  detailPanel = null,
+  detailPanelOpen,
+  contextPanelOpen = true,
+  bottomPanel = null,
+  mainPanel,
+  mapControls = h(MapBottomControls),
+  contextStackProps = null,
+  detailStackProps = null,
+  mapPosition = null,
+  fitViewport = true,
+  ...rest
+}: {
+  navbar: AnyElement;
+  children?: AnyElement;
+  mapControls?: AnyElement;
+  contextPanel?: AnyElement;
+  mainPanel?: AnyElement;
+  detailPanel?: AnyElement;
+  bottomPanel?: AnyElement;
+  className?: string;
+  detailPanelOpen?: boolean;
+  contextPanelOpen?: boolean;
+  contextStackProps?: HTMLDivProps;
+  detailStackProps?: HTMLDivProps;
+  mapPosition?: MapPosition;
+  fitViewport?: boolean;
+}) {
+  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
+  const contextPanelTrans = useTransition(contextPanelOpen, 800);
+  const detailPanelTrans = useTransition(_detailPanelOpen, 800);
+
+  /*- 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
+      bar focus is lost.
+    - We also apply a custom style when the infodrawer is open so we can hide
+      the search bar on mobile platforms
+    - These styles are doubly applied so we can have both namespaced and
+      outside-accessible styles for each case.
+  */
+  const _className = classNames(
+    {
+      searching: false,
+      "detail-panel-open": _detailPanelOpen,
+      "map-context-open": _detailPanelOpen,
+      "fit-viewport": fitViewport,
+    },
+    `context-panel-${contextPanelTrans.stage}`,
+    `map-context-${contextPanelTrans.stage}`,
+    `detail-panel-${detailPanelTrans.stage}`,
+    `map-detail-${detailPanelTrans.stage}`
+  );
+
+  return h(
+    MapStyledContainer,
+    { className: classNames("map-page", className), mapPosition },
+    [
+      h("div.main-ui", { className: _className, ...rest }, [
+        h("div.context-stack", contextStackProps, [
+          navbar,
+          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("div.bottom", null, bottomPanel),
+    ]
+  );
+}
+
+const MapProviders = ({ children }) =>
+  h(ToasterContext, h(MapboxMapProvider, children));
+
+export const MapAreaContainer = (props) =>
+  h(MapProviders, h(_MapAreaContainer, props));
+
+interface MapContainerProps {
+  className?: string;
+  mapPosition?: MapPosition;
+  children?: ReactNode;
+}
+
+export function MapStyledContainer({ className, children }: MapContainerProps) {
+  const { mapPosition } = useMapStatus();
+  if (mapPosition != null) {
+    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);
+    className = classNames(className, {
+      "map-is-rotated": mapIsRotated,
+      "map-3d-available": mapUse3D,
+      "map-is-global": mapIsGlobal,
+    });
+  }
+
+  return h("div", { className }, children);
+}
+
+export * from "./map-view";
+//const _MapPage = compose(HotkeysProvider, MapPage);

package/src/context-panel/index.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import { Navbar, Button, InputGroup, Spinner, Card } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import { useMapStatus } from "@macrostrat/mapbox-react";
+
+const h = hyper.styled(styles);
+
+const spinnerElement = h(Spinner, { size: 16 });
+
+export function LoadingButton({
+  isLoading = false,
+  onClick,
+  active = false,
+  icon = "menu",
+}) {
+  return h(Button, {
+    icon: isLoading ? spinnerElement : icon,
+    large: true,
+    minimal: true,
+    onClick,
+    active: active && !isLoading,
+  });
+}
+
+export function MapLoadingButton(props) {
+  const { isLoading } = useMapStatus();
+  const mapIsLoading = useMemo(() => isLoading, [isLoading]);
+  return h(LoadingButton, { ...props, isLoading: mapIsLoading });
+}
+
+type AnyChildren = React.ReactNode | React.ReactFragment;
+
+export function FloatingNavbar({
+  className,
+  children,
+  statusElement = null,
+}: {
+  className?: string;
+  children?: AnyChildren;
+  statusElement?: AnyChildren;
+}) {
+  return h("div.searchbar-holder", { className }, [
+    h("div.navbar-holder", [
+      h(Navbar, { className: "searchbar panel" }, children),
+    ]),
+    h.if(statusElement != null)(
+      Card,
+      { className: "status-tongue" },
+      statusElement
+    ),
+  ]);
+}

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

@@ -0,0 +1,37 @@
+.searchbar-holder
+  transition: margin 300ms
+  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: 3px
+    padding: 0 5px
+    display: flex
+    flex-direction: row
+    align-items: center
+    :global(.bp4-input-group)
+      flex-grow: 1
+      cursor: text
+    &>*
+      margin-right: 5px
+      &:last-child
+        margin-right: 0
+
+.status-tongue
+  background-color: var(--panel-background-color)
+  margin: 5px
+  margin-top: -12px
+  padding: 0
+  padding-top: 12px
+
+@media screen and (max-width: 768px)
+  .status-tongue
+    max-width: 100vw
+    margin: 0
+    border-radius: 0
+    margin-top: -3px

package/src/controls.ts

@@ -0,0 +1,52 @@
+import { useRef } from "react";
+import { GeolocateControl } from "mapbox-gl";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import {
+  CompassControl,
+  GlobeControl,
+  ThreeDControl,
+  MapControlWrapper,
+} from "@macrostrat/mapbox-react";
+import { ScaleControl as BaseScaleControl } from "mapbox-gl";
+
+const h = hyper.styled(styles);
+
+function ScaleControl(props) {
+  const optionsRef = useRef({
+    maxWidth: 200,
+    unit: "metric",
+  });
+  return h(MapControlWrapper, {
+    className: "map-scale-control",
+    control: BaseScaleControl,
+    options: optionsRef.current,
+    ...props,
+  });
+}
+
+function GeolocationControl(props) {
+  const optionsRef = useRef({
+    showAccuracyCircle: true,
+    showUserLocation: true,
+    trackUserLocation: true,
+    positionOptions: {
+      enableHighAccuracy: true,
+    },
+  });
+  return h(MapControlWrapper, {
+    control: GeolocateControl,
+    options: optionsRef.current,
+    ...props,
+  });
+}
+
+export function MapBottomControls() {
+  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" }),
+  ]);
+}

package/src/dev/index.ts

@@ -0,0 +1,179 @@
+// Import other components
+import { Switch } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import { Spacer, useDarkMode, useStoredState } from "@macrostrat/ui-components";
+import mapboxgl from "mapbox-gl";
+import { useCallback, useState, useEffect } from "react";
+import { buildInspectorStyle, buildXRayStyle } from "./xray";
+import { MapAreaContainer, PanelCard } from "../container";
+import { FloatingNavbar, MapLoadingButton } from "../context-panel";
+import { MapMarker } from "../helpers";
+import { LocationPanel } from "../location-panel";
+import { MapView } from "../map-view";
+import styles from "./main.module.sass";
+import { TileExtentLayer } from "./tile-extent";
+import {
+  FeaturePanel,
+  FeatureSelectionHandler,
+  TileInfo,
+} from "./vector-tile-features";
+import { MapPosition } from "@macrostrat/mapbox-utils";
+
+export enum MacrostratVectorTileset {
+  Carto = "carto",
+  CartoSlim = "carto-slim",
+  IGCPOrogens = "igcp-orogens",
+}
+
+export enum MacrostratRasterTileset {
+  Carto = "carto",
+  Emphasized = "emphasized",
+}
+
+export const h = hyper.styled(styles);
+
+export function DevMapPage({
+  title = "Map inspector",
+  headerElement = null,
+  transformRequest = null,
+  mapPosition = null,
+  mapboxToken = null,
+  overlayStyle = null,
+  children,
+  style,
+  focusedSource = null,
+  focusedSourceTitle = null,
+  projection = null,
+}: {
+  headerElement?: React.ReactElement;
+  transformRequest?: mapboxgl.TransformRequestFunction;
+  title?: string;
+  style: mapboxgl.Style | string;
+  children?: React.ReactNode;
+  mapboxToken?: string;
+  overlayStyle?: mapboxgl.Style | string;
+  focusedSource?: string;
+  focusedSourceTitle?: string;
+  projection?: string;
+  mapPosition?: MapPosition;
+}) {
+  /* 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
+    bar focus is lost.
+    We also apply a custom style when the infodrawer is open so we can hide
+    the search bar on mobile platforms
+  */
+
+  const dark = useDarkMode();
+  const isEnabled = dark?.isEnabled;
+
+  if (mapboxToken != null) {
+    mapboxgl.accessToken = mapboxToken;
+  }
+
+  style ??= isEnabled
+    ? "mapbox://styles/mapbox/dark-v10"
+    : "mapbox://styles/mapbox/light-v10";
+
+  const [isOpen, setOpen] = useState(false);
+
+  const [state, setState] = useStoredState("macrostrat:dev-map-page", {
+    showTileExtent: false,
+    xRay: false,
+  });
+  const { showTileExtent, xRay } = state;
+
+  const [actualStyle, setActualStyle] = useState(style);
+
+  useEffect(() => {
+    buildInspectorStyle(style, overlayStyle, {
+      mapboxToken,
+      inDarkMode: isEnabled,
+      xRay,
+    }).then(setActualStyle);
+  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);
+
+  const [inspectPosition, setInspectPosition] =
+    useState<mapboxgl.LngLat | null>(null);
+
+  const [data, setData] = useState(null);
+
+  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
+    setInspectPosition(position);
+  }, []);
+
+  let detailElement = null;
+  if (inspectPosition != null) {
+    detailElement = h(
+      LocationPanel,
+      {
+        onClose() {
+          setInspectPosition(null);
+        },
+        position: inspectPosition,
+      },
+      [
+        h(TileInfo, {
+          feature: data?.[0] ?? null,
+          showExtent: showTileExtent,
+          setShowExtent() {
+            setState({ ...state, showTileExtent: !showTileExtent });
+          },
+        }),
+        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),
+      ]
+    );
+  }
+
+  let tile = null;
+  if (showTileExtent && data?.[0] != null) {
+    let f = data[0];
+    tile = { x: f._x, y: f._y, z: f._z };
+  }
+
+  return h(
+    MapAreaContainer,
+    {
+      navbar: h(FloatingNavbar, [
+        headerElement ?? h("h2", title),
+        h(Spacer),
+        h(MapLoadingButton, {
+          active: isOpen,
+          onClick: () => setOpen(!isOpen),
+        }),
+      ]),
+      contextPanel: h(PanelCard, [
+        h(Switch, {
+          checked: xRay,
+          label: "X-ray mode",
+          onChange() {
+            setState({ ...state, xRay: !xRay });
+          },
+        }),
+        children,
+      ]),
+      detailPanel: detailElement,
+      contextPanelOpen: isOpen,
+    },
+    h(
+      MapView,
+      {
+        style: actualStyle,
+        transformRequest,
+        mapPosition,
+        projection: "globe",
+      },
+      [
+        h(FeatureSelectionHandler, {
+          selectedLocation: inspectPosition,
+          setFeatures: setData,
+        }),
+        h(MapMarker, {
+          position: inspectPosition,
+          setPosition: onSelectPosition,
+        }),
+        h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+      ]
+    )
+  );
+}

package/src/dev/main.module.sass

@@ -0,0 +1,63 @@
+.feature-panel
+  position: relative
+  overflow-x: hidden
+
+.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
+
+.feature-header h3
+  margin-bottom: 0
+  margin-top: 0.5em
+
+.feature-group
+  border-bottom: 1px solid var(--panel-rule-inner)
+  padding: 0 1em
+  margin-left: -1em
+  margin-right: -1em
+  margin-bottom: 0.5em
+  &:last-child
+    border-bottom: none
+
+.tile-info
+  display: flex
+  flex-direction: row
+  align-items: baseline
+  padding: 0 1em
+  h3
+    margin-right: 0.5em
+
+.opacity-slider
+  margin: 0 1em 0.5em
+  :global
+    .bp4-slider-handle .bp4-slider-label
+      background-color: var(--secondary-color)
+      color: var(--text-color)
+
+.unit-number
+  .unit
+    font-size: 0.9em
+    margin-left: 0.2em
+    font-weight: bold
+
+.page
+  margin: 2em auto
+  max-width: 50em
+
+.dev-index-page
+  overflow-y: scroll

package/src/dev/tile-extent.ts

@@ -0,0 +1,46 @@
+import { useMapConditionalStyle, useMapRef } from "@macrostrat/mapbox-react";
+import { tileToGeoJSON } from "@mapbox/tilebelt";
+import { useCallback } from "react";
+
+type TileIndex = { x: number; y: number; z: number };
+
+export function TileExtentLayer({
+  tile,
+  color = "red",
+}: {
+  tile: TileIndex | null;
+  color?: string;
+}) {
+  const styleCallback = useCallback(
+    (map, val: TileIndex) => {
+      const style = map.getStyle();
+      if (style.layers == null) return;
+      style.layers = style.layers.filter((l) => l.id != "tile-extent");
+      if (val == null) {
+        return map.setStyle(style);
+      }
+      const { x, y, z } = val;
+      const extent = tileToGeoJSON([x, y, z]);
+      const source = {
+        type: "geojson",
+        data: extent,
+      };
+      const layer = {
+        id: "tile-extent",
+        type: "line",
+        source: "tile-extent",
+        paint: {
+          "line-color": color,
+          "line-width": 2,
+        },
+      };
+      style.sources["tile-extent"] = source;
+      style.layers.push(layer);
+      map.setStyle(style);
+    },
+    [color]
+  );
+  const map = useMapRef();
+  useMapConditionalStyle(map, tile, styleCallback);
+  return null;
+}