@macrostrat/map-interface 0.0.1

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

@@ -0,0 +1,208 @@
+import { Spinner, Switch } 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, useRef } from "react";
+import { JSONView } from "@macrostrat/ui-components";
+import { group } from "d3-array";
+import { ExpansionPanel } from "../expansion-panel";
+
+const h = hyper.styled(styles);
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export function FeatureRecord({ feature }) {
+  const props = feature.properties;
+  return h("div.feature-record", [
+    h.if(Object.keys(props).length > 0)("div.feature-properties", [
+      h(JSONView, {
+        data: props,
+        hideRoot: true,
+      }),
+    ]),
+  ]);
+}
+
+export function FeatureSelectionHandler({
+  selectedLocation,
+  setFeatures,
+  radius = 2,
+}: {
+  selectedLocation: mapboxgl.LngLat;
+  setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;
+  radius?: number;
+}) {
+  const mapRef = useMapRef();
+  const { isLoading } = useMapStatus();
+  const prevLocation = usePrevious(selectedLocation);
+
+  useEffect(() => {
+    const map = mapRef?.current;
+    if (map == null) return;
+    if (selectedLocation == null) {
+      setFeatures(null);
+      return;
+    }
+
+    // Don't update if the location hasn't changed
+    if (selectedLocation == prevLocation) return;
+
+    const r = radius;
+    const pt = map.project(selectedLocation);
+
+    const bbox: [mapboxgl.PointLike, mapboxgl.PointLike] = [
+      [pt.x - r, pt.y - r],
+      [pt.x + r, pt.y + r],
+    ];
+    const features = map.queryRenderedFeatures(bbox);
+    setFeatures(features);
+  }, [mapRef?.current, selectedLocation, isLoading]);
+
+  return null;
+}
+
+function FeatureHeader({ feature }) {
+  return h("div.feature-header", [
+    h("h3", [
+      h(KeyValue, { label: "Source", value: feature.source }),
+      h(KeyValue, { label: "Source layer", value: feature.sourceLayer }),
+    ]),
+  ]);
+}
+
+function KeyValue({ label, value }) {
+  return h("span.key-value", [h("span.key", label), h("code.value", value)]);
+}
+
+function LoadingAwareFeatureSet({ features, sourceID }) {
+  const map = useMapRef();
+  if (map?.current == null) return null;
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const sourceFeatures = features.filter((d) => d.source == "burwell");
+
+  useEffect(() => {
+    if (sourceFeatures.length > 0) {
+      setIsLoaded(true);
+      return;
+    }
+
+    const isLoaded = map.current.isSourceLoaded(sourceID);
+    setIsLoaded(isLoaded);
+    if (!isLoaded) {
+      map.current.once("sourcedata", (e) => {
+        if (e.sourceId == sourceID) {
+          setIsLoaded(true);
+        }
+      });
+    }
+  }, [map.current, sourceID, sourceFeatures.length]);
+
+  if (!isLoaded) return h(Spinner);
+  return h(Features, { features: sourceFeatures });
+}
+
+export function TileInfo({ feature, showExtent, setShowExtent }) {
+  if (feature == null) return null;
+  const size = feature._vectorTileFeature._pbf.length;
+  return h("div.tile-info", [
+    h("h3", "Tile"),
+    h("div.tile-index", [
+      h(KeyValue, { label: "x", value: feature._x }),
+      h(KeyValue, { label: "y", value: feature._y }),
+      h(KeyValue, { label: "z", value: feature._z }),
+    ]),
+    h("div.spacer"),
+    h(KeyValue, { label: "Size", value: formatSize(size) }),
+    h(Switch, {
+      label: "Show extent",
+      alignIndicator: "right",
+      checked: showExtent,
+      onChange() {
+        setShowExtent(!showExtent);
+      },
+    }),
+  ]);
+}
+
+function formatSize(size: number) {
+  if (size > 1000000)
+    return h(UnitNumber, { value: size / 1000000, unit: "Mb" });
+  if (size > 1000) return h(UnitNumber, { value: size / 1000, unit: "Kb" });
+  return `${size} bytes`;
+}
+
+function UnitNumber({ value, unit, precision = 1 }) {
+  return h("span.unit-number", [
+    h("span.number", value.toFixed(precision)),
+    h("span.unit", unit),
+  ]);
+}
+
+export function FeaturePanel({
+  features,
+  focusedSource = null,
+  focusedSourceTitle = null,
+}) {
+  if (features == null) return null;
+
+  let focusedSourcePanel = null;
+  let filteredFeatures = features;
+  let title = "Features";
+
+  if (focusedSource != null) {
+    title = "Basemap features";
+    focusedSourcePanel = h(
+      ExpansionPanel,
+      {
+        title: "Macrostrat features",
+        className: "macrostrat-features",
+        expanded: true,
+      },
+      [
+        h(LoadingAwareFeatureSet, {
+          features,
+          sourceID: focusedSource,
+        }),
+      ]
+    );
+    filteredFeatures = features.filter((d) => d.source != focusedSource);
+  }
+
+  return h("div.feature-panel", [
+    focusedSourcePanel,
+    h(
+      ExpansionPanel,
+      { title, className: "basemap-features", expanded: focusedSource == null },
+      [
+        h(Features, {
+          features: filteredFeatures,
+        }),
+      ]
+    ),
+  ]);
+}
+
+function Features({ features }) {
+  /** Group features by source and sourceLayer */
+  if (features == null) return null;
+
+  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);
+
+  return h(
+    "div.features",
+    Array.from(groups).map(([key, features]) => {
+      return h("div.feature-group", [
+        h(FeatureHeader, { feature: features[0] }),
+        features.map((feature, i) => h(FeatureRecord, { key: i, feature })),
+      ]);
+    })
+  );
+}

package/src/dev/xray.ts

@@ -0,0 +1,118 @@
+import { getMapboxStyle, mergeStyles } from "@macrostrat/mapbox-utils";
+import chroma from "chroma-js";
+import mapboxgl from "mapbox-gl";
+
+interface XRayOptions {
+  color?: string;
+  inDarkMode?: boolean;
+  mapboxToken?: string;
+  xRaySources?: string[];
+}
+
+export async function buildXRayStyle(
+  baseStyle: string | object,
+  params: XRayOptions = null
+) {
+  const {
+    inDarkMode = false,
+    color = "rgb(74, 242, 161)",
+    mapboxToken,
+    xRaySources
+  } = params;
+  const style = await getMapboxStyle(baseStyle, { access_token: mapboxToken });
+  const sources = xRaySources ?? Object.keys(style.sources);
+
+  let layers = [];
+  for (let layer of style.layers) {
+    if (!sources.includes(layer.source)) {
+      layers.push(layer);
+      continue;
+    }
+    let newLayer = transformMapboxLayer(layer, color, inDarkMode);
+    if (newLayer != null) {
+      layers.push(newLayer);
+    }
+  }
+
+  return {
+    ...style,
+    layers,
+  };
+}
+
+function transformMapboxLayer(layer, color, inDarkMode) {
+  const c = chroma(color);
+  const xRayColor = (opacity = 1, darken = 0) => {
+    if (!inDarkMode) {
+      return chroma(color)
+        .darken(2 - darken)
+        .alpha(opacity)
+        .css();
+    }
+    return c.alpha(opacity).darken(darken).css();
+  };
+
+  if (layer.type == "background") {
+    return null;
+  }
+
+  let newLayer = { ...layer };
+
+  if (layer.type == "fill") {
+    newLayer.paint = {
+      "fill-color": xRayColor(0.1),
+      "fill-outline-color": xRayColor(0.5),
+    };
+  } else if (layer.type == "line") {
+    newLayer.paint = {
+      "line-color": xRayColor(0.5, 0),
+      "line-width": 1.5,
+    };
+  } else if (layer.type == "symbol") {
+    newLayer.paint = {
+      "text-color": xRayColor(1, -0.5),
+      "text-halo-color": "#000",
+    };
+  } else if (layer.type == "circle") {
+    newLayer.paint = {
+      "circle-color": xRayColor(0.5, 0),
+      "circle-stroke-color": xRayColor(0.5, 1),
+      "circle-radius": 2,
+    };
+  }
+
+  return newLayer;
+}
+
+type InspectorStyleOptions = XRayOptions & {
+  xRay?: boolean;
+};
+
+export async function buildInspectorStyle(
+  baseStyle: mapboxgl.Style | string,
+  overlayStyle: mapboxgl.Style | string | null = null,
+  params: InspectorStyleOptions = {}
+) {
+  const { mapboxToken, xRay = false, xRaySources: _xRaySources, ...rest } = params;
+  let xRaySources = _xRaySources;
+  let style = await getMapboxStyle(baseStyle, {
+    access_token: mapboxToken,
+  });
+
+  if (overlayStyle != null) {
+    const overlay = await getMapboxStyle(overlayStyle, {
+      access_token: mapboxToken,
+    });
+    style = mergeStyles(style, overlay);
+    xRaySources ??= Object.keys(overlay.sources);
+  }
+
+
+  if (xRay) {
+    // If we haven't specified sources, then we'll use all of them
+    xRaySources ??= Object.keys(style.sources);
+
+    style = await buildXRayStyle(style, { ...rest, mapboxToken, xRaySources });
+  }
+  return style;
+}

package/src/expansion-panel/headers.ts

@@ -0,0 +1,18 @@
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+
+const h = hyper.styled(styles);
+
+export function PanelSubhead(props) {
+  const { title, component = "h3", children, ...rest } = props;
+  return h("div.panel-subhead", rest, [
+    h(
+      component,
+      {
+        className: "title",
+      },
+      title
+    ),
+    children,
+  ]);
+}

package/src/expansion-panel/index.ts

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Collapse, Icon } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import classNames from "classnames";
+import { Button } from "@blueprintjs/core";
+import { PanelSubhead } from "./headers";
+
+const h = hyper.styled(styles);
+
+function ExpansionPanelSummary(props) {
+  const { expanded, children, onChange, className, title, titleComponent } =
+    props;
+  const icon = expanded ? "chevron-up" : "chevron-down";
+  return h(
+    PanelSubhead,
+    {
+      className: classNames("expansion-panel-header", className),
+      onClick: onChange,
+      title,
+      component: titleComponent,
+    },
+    [children, h(Icon, { icon })]
+  );
+}
+
+function ExpansionPanelBase(props) {
+  let {
+    title,
+    titleComponent = "h3",
+    children,
+    expanded,
+    helpText,
+    onChange = () => {},
+    sideComponent = null,
+    className,
+  } = props;
+  const [isOpen, setOpen] = useState(expanded || false);
+
+  const onChange_ = () => {
+    onChange();
+    setOpen(!isOpen);
+  };
+
+  return h(
+    "div.expansion-panel-base",
+    {
+      className: classNames(className, {
+        expanded: isOpen,
+        collapsed: !isOpen,
+      }),
+    },
+    [
+      h(
+        ExpansionPanelSummary,
+        {
+          onChange: onChange_,
+          expanded: isOpen,
+          title,
+          titleComponent,
+        },
+        h("div.expansion-summary-title-help", [
+          h("span.expansion-panel-subtext", helpText),
+          " ",
+          sideComponent,
+        ])
+      ),
+      h(Collapse, { isOpen }, h("div.expansion-children", null, children)),
+    ]
+  );
+}
+
+export function InfoPanelSection(props) {
+  let { title, children, className, headerElement = null } = props;
+  return h("div.info-panel-section", { className }, [
+    h("div.panel-subhead", null, headerElement ?? h("h3", title)),
+    h("div.panel-content", null, children),
+  ]);
+}
+
+function ExpansionPanel(props) {
+  return h(ExpansionPanelBase, {
+    ...props,
+    className: "expansion-panel",
+  });
+}
+
+function SubExpansionPanel(props) {
+  return h(ExpansionPanelBase, {
+    ...props,
+    className: "expansion-panel sub-expansion-panel",
+    titleComponent: "h4",
+  });
+}
+
+function ExpandableDetailsPanel(props) {
+  let { title, children, value, headerElement, className } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  headerElement ??= h([h("div.title", title), value]);
+  return h("div.expandable-details", { className }, [
+    h("div.expandable-details-main", [
+      h("div.expandable-details-header", headerElement),
+      h("div.expandable-details-toggle", [
+        h(Button, {
+          small: true,
+          minimal: true,
+          active: isOpen,
+          onClick: () => setIsOpen(!isOpen),
+          icon: "more",
+        }),
+      ]),
+    ]),
+    h(
+      Collapse,
+      { isOpen },
+      h("div.expandable-details-children", null, children)
+    ),
+  ]);
+}
+
+function ExpansionBody({ title, className, children }) {
+  return h("div.expansion-body", { className }, [
+    h("div.expansion-panel-detail-header", title),
+    h("div.expansion-panel-detail-body", null, children),
+  ]);
+}
+
+export {
+  ExpansionPanel,
+  ExpansionPanelSummary,
+  ExpandableDetailsPanel,
+  SubExpansionPanel,
+  ExpansionBody,
+};

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

@@ -0,0 +1,143 @@
+
+.panel-subhead
+  padding: 0.2em var(--box-horizontal-padding)
+  border-top: 1px solid var(--accent-border-color)
+  border-bottom: 1px solid var(--accent-border-color)
+  background-color: var(--accent-color)
+  display: flex
+  flex-direction: row
+  align-items: center
+  z-index: 1
+  gap: var(--box-horizontal-padding)
+  top: 0px
+  position: sticky
+  h1, h2, h3, h4
+    font-family: Montserrat,sans-serif
+    font-weight: 700
+    margin: 0.2em 0
+  h4
+    font-weight: 600
+  .title
+    flex-grow: 1
+
+// :global(.bp4-dark) .panel-subhead
+//   margin 0 1px
+
+.expansion-panel
+  padding: 0
+  flex-wrap: wrap
+  margin-top: -1px
+  // &.collapsed
+  //   .expansion-panel-header
+  //     border-bottom-width: 0;
+
+.sub-expansion-panel
+  margin: -1px calc(var(--panel-padding-h) * -0.5) 0
+  overflow: hidden
+  &:first-child
+    .expansion-panel-header
+      border-top-width: 0
+  .panel-subhead
+    border-top: none
+    border-bottom: none
+
+  .expansion-panel-header
+    background-color: var(--accent-secondary-color)
+    cursor: pointer
+    &:hover
+      background-color: var(--accent-secondary-hover-color)
+    h2, h3, h4
+      font-weight: 500
+      border-bottom: 1px solid var(--tertiary-border-color)
+      border-top: 1px solid var(--tertiary-border-color)
+      margin-top: -1px
+      padding: 5px 1em 5px
+      align-items: center
+
+.expansion-summary-title-help
+  margin-left: 5px
+  :global(.bp4-icon)
+    margin-left: 5px
+
+.expansion-panel-header
+  cursor: pointer
+  &:hover
+    background-color: var(--accent-hover-color)
+  :global(.bp4-icon)
+    transform: translate(0,3px)
+
+.expansion-children
+  padding: 5px 1em 10px
+  .expansion-panel
+    margin-left: -1em
+    margin-right: -1em
+    &:first-child
+      margin-top: -5px
+
+.expansion-panel-subtext
+  font-size: 85%
+  font-weight: 400
+
+:global
+  .expansion-panel-root
+    padding-left: 15px !important
+
+  .expansion-panel-detail
+    display: block !important
+    padding: 0 !important
+
+  .expansion-panel-detail-sub
+    display: block !important
+
+// New expandable panel for details
+.expandable-details-main
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+  margin: 3px 0
+
+.expandable-details-header
+  display: inline-flex
+  flex-direction: row
+  align-items: baseline
+  flex-grow: 1
+
+.expandable-details-children
+  position: relative
+
+.expandable-details-toggle
+  :global(.bp4-button)
+    font-size: 10px
+
+.expandable-details
+  &.macrostrat-unit
+    .title:after
+      content: none
+  .title
+    margin-right: 1em
+    &:after
+      content: ":"
+
+.expansion-body
+  display: inline-block
+  //flex-direction row
+  align-items: baseline
+  background-color: var(--tertiary-background)
+  padding: 2px 6px
+  border-radius: 4px
+  width: 100%
+  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)
+  margin-bottom: 6px
+
+.expansion-panel-detail-header
+  font-size: 90%
+  font-style: italic
+  margin-right: 1em
+  display: inline
+  color: var(--secondary-color)
+  &:after
+    content: ":"
+
+.expansion-panel-detail-body
+  display: inline