@macrostrat/column-views 1.0.0

package/src/map/layers.ts

@@ -0,0 +1,316 @@
+import h from "@macrostrat/hyper";
+import {
+  Feature,
+  FeatureLayer,
+  MapContext,
+} from "@macrostrat/svg-map-components";
+import { useAPIResult, useKeyHandler } from "@macrostrat/ui-components";
+import chroma from "chroma-js";
+import { ExtendedFeature, geoCentroid } from "d3-geo";
+import { geoVoronoi } from "d3-geo-voronoi";
+import { FeatureCollection, GeometryCollection, Polygon } from "geojson";
+import { useContext, useEffect, useMemo } from "react";
+import { feature } from "topojson-client";
+
+const defaultStyle = {
+  fill: "rgb(239, 180, 249)",
+  stroke: "magenta",
+};
+
+export function MeasurementsLayer(props) {
+  const { style = defaultStyle, ...params } = props;
+  const res: any = useAPIResult("/measurements", {
+    ...params,
+    format: "geojson",
+    response: "light",
+  });
+  if (res == null) return null;
+
+  return h(FeatureLayer, {
+    useCanvas: false,
+    style,
+    features: res.features.filter((d) => d.properties.unit_id != null),
+  });
+}
+
+type ColumnProps = { col_id: number };
+
+type ColumnFeature = ExtendedFeature<Polygon, ColumnProps>;
+
+function processTopoJSON(res) {
+  try {
+    const { data } = res.success;
+    const { features: f } = feature(data, data.objects.output) as any;
+    return f;
+  } catch (err) {
+    console.error(err);
+    return [];
+  }
+}
+function ColumnFeatures(props) {
+  const {
+    features,
+    onClick,
+    color = "rgba(150,150,150, 1)",
+    singleFeature = true,
+  } = props;
+
+  const c = chroma(color);
+
+  return h(
+    FeatureLayer,
+    {
+      className: "columns",
+      useCanvas: onClick == null,
+      style: {
+        fill: c.alpha(0.2).css(),
+        stroke: c.alpha(0.4).css(),
+      },
+    },
+    features.map((f) => {
+      return h(Feature, {
+        id: f.id ?? f.properties.col_id,
+        onClick,
+        feature: f,
+      });
+    })
+  );
+}
+
+enum MacrostratStatusCode {
+  InProcess = "in process",
+}
+
+interface ColumnNavProps {
+  col_id: number;
+  status_code?: MacrostratStatusCode;
+  project_id?: number;
+  onChange(col_id: number): void;
+}
+
+interface KeyboardNavProps extends ColumnNavProps {
+  features: ColumnFeature[];
+  showLayers: boolean;
+}
+
+function normalize(angle) {
+  if (angle > Math.PI) {
+    angle -= 2 * Math.PI;
+  } else if (angle <= -Math.PI) {
+    angle += 2 * Math.PI;
+  }
+  return angle;
+}
+
+function buildTriangulation(features) {
+  console.log("Computing triangulation");
+  const centroids = features.map(geoCentroid);
+  const tri = geoVoronoi(centroids);
+  return { centroids, tri };
+}
+
+function buildKeyMapping(neighbors, centroids, currentIndex, projection) {
+  if (neighbors == null) return;
+
+  const currentCentroid = projection(centroids[currentIndex]);
+
+  let edgeAngles = neighbors.map((index) => {
+    const centroid = projection(centroids[index]);
+    const dx = centroid[0] - currentCentroid[0];
+    const dy = centroid[1] - currentCentroid[1];
+    return { col_index: index, angle: Math.atan2(dy, dx) };
+  });
+
+  edgeAngles.sort((d) => d.angle);
+
+  function closestAngle(num) {
+    // Find closest angle in array of neighbors
+    let curr = edgeAngles[0];
+    for (let next of edgeAngles) {
+      if (
+        Math.abs(normalize(num - next.angle)) <
+        Math.abs(normalize(num - curr.angle))
+      ) {
+        curr = next;
+      }
+    }
+    return curr.col_index;
+  }
+
+  return {
+    37: closestAngle(Math.PI), // left
+    38: closestAngle((3 * Math.PI) / 2), // up
+    39: closestAngle(0), // right
+    40: closestAngle(Math.PI / 2), // down
+  };
+}
+
+function ColumnKeyboardNavigation(props: KeyboardNavProps) {
+  /** Keyboard navigation of columns using a Delaunay triangulation */
+  const {
+    features = [],
+    col_id = null,
+    onChange,
+    showLayers = false,
+    ...projectArgs
+  } = props;
+  const { projection } = useContext(MapContext);
+  const { centroids, tri } = useMemo(
+    () => buildTriangulation(features),
+    [features]
+  );
+
+  const currentIndex = useMemo(() => {
+    return features.findIndex((d) => d.properties.col_id == col_id);
+  }, [features, col_id]);
+
+  const neighbors = tri.delaunay.neighbors[currentIndex];
+
+  const keyMapping = useMemo(() => {
+    return buildKeyMapping(neighbors, centroids, currentIndex, projection);
+  }, [neighbors, currentIndex]);
+
+  useKeyHandler(
+    (event) => {
+      const nextColumnIx = keyMapping[event.keyCode];
+      if (nextColumnIx == null) return;
+      const { col_id } = features[nextColumnIx].properties;
+
+      // @ts-ignore
+      onChange({ col_id, ...projectArgs });
+    },
+    [keyMapping]
+  );
+
+  if (neighbors == null) return null;
+  const neighborFeatures = neighbors.map((d) => features[d]);
+
+  return h.if(showLayers)([
+    h(FeatureLayer, {
+      features: tri.links().features,
+      useCanvas: false,
+      style: {
+        stroke: "purple",
+        fill: "transparent",
+      },
+    }),
+    h(FeatureLayer, {
+      features: neighborFeatures,
+      useCanvas: false,
+      style: {
+        stroke: "rgb(93, 101, 212)",
+        strokeWidth: 3,
+        fill: "rgba(93, 101, 212, 0.5)",
+      },
+    }),
+
+    //h(FeatureLayer, {features: tri.centers, useCanvas: false})
+  ]);
+}
+
+function processGeoJSON(res) {
+  return processGeoJSONBare(res?.success?.data);
+}
+
+function processGeoJSONBare(res) {
+  return res?.features;
+}
+
+const processors = {
+  topojson: processTopoJSON,
+  geojson: processGeoJSON,
+  geojson_bare: processGeoJSONBare,
+};
+
+function useColumnData({
+  apiRoute = "/columns",
+  status_code,
+  project_id,
+  format = "topojson",
+}) {
+  let all: boolean = undefined;
+  if (status_code == null && project_id == null) {
+    all = true;
+  }
+
+  const processor = processors[format];
+
+  return useAPIResult(
+    apiRoute,
+    { format, all, status_code, project_id },
+    processor
+  );
+}
+
+interface ColumnExtraInfo {
+  apiRoute?: string;
+  color?: string;
+  filterColumns?(d: ColumnFeature): boolean;
+  showDebugLayers?: boolean;
+  format?: "topojson" | "geojson";
+}
+
+const Columns = (props: ColumnNavProps & ColumnExtraInfo) => {
+  const {
+    apiRoute = "/columns",
+    onChange,
+    col_id = null,
+    status_code,
+    project_id,
+    color,
+    filterColumns,
+    showDebugLayers = false,
+    format = "topojson",
+  } = props;
+
+  let features: any[] = useColumnData({
+    apiRoute,
+    status_code,
+    project_id,
+    format,
+  }) as any;
+
+  if (features == null) return null;
+
+  if (filterColumns != null) {
+    features = features.filter(filterColumns);
+  }
+
+  return h([
+    h(ColumnKeyboardNavigation, {
+      features,
+      col_id,
+      onChange,
+      status_code,
+      project_id,
+      showLayers: showDebugLayers,
+    }),
+    h(ColumnFeatures, { features, onClick: onChange, color }),
+  ]);
+};
+
+const ColumnCenters = (props: ColumnNavProps) => {
+  return h(Columns, { apiRoute: "/defs/columns", ...props });
+};
+
+const CurrentColumn = (props) => {
+  const { feature } = props;
+  return h(FeatureLayer, {
+    features: [feature],
+    style: {
+      fill: "rgba(255,0,0,0.4)",
+      stroke: "rgba(255,0,0,0.6)",
+      strokeWidth: 2,
+    },
+  });
+};
+
+export {
+  Columns,
+  CurrentColumn,
+  processTopoJSON,
+  ColumnCenters,
+  ColumnFeatures,
+  ColumnKeyboardNavigation,
+  useColumnData,
+};

package/src/providers.ts

@@ -0,0 +1,34 @@
+import h from "@macrostrat/hyper";
+import { ColumnProvider, ColumnAxisType } from "@macrostrat/column-components";
+import { APIProvider } from "@macrostrat/ui-components";
+import { ReactNode } from "react";
+
+export function MacrostratColumnProvider(props) {
+  // A column provider specialized the Macrostrat API
+  return h(ColumnProvider, { axisType: ColumnAxisType.AGE, ...props });
+}
+
+type APIProviderProps = {
+  children: ReactNode;
+  useDev?: boolean;
+  baseURL?: string;
+};
+
+export function MacrostratAPIProvider({
+  children,
+  useDev = false,
+  baseURL,
+}: APIProviderProps) {
+  baseURL ??= useDev
+    ? "https://dev2.macrostrat.org/api/v2"
+    : "https://macrostrat.org/api/v2";
+
+  return h(
+    APIProvider,
+    {
+      baseURL,
+      unwrapResponse: (res) => res.success.data,
+    },
+    children
+  );
+}

package/src/section.ts

@@ -0,0 +1,129 @@
+import { CompositeUnitsColumn, IUnit } from "./units";
+import { ReactNode, useMemo } from "react";
+import { AgeAxis } from "./age-axis";
+import { Timescale, TimescaleOrientation } from "@macrostrat/timescale";
+import { ColumnSVG } from "@macrostrat/column-components";
+import { MacrostratColumnProvider } from "./index";
+import hyper from "@macrostrat/hyper";
+import styles from "./column.module.sass";
+
+const h = hyper.styled(styles);
+
+export interface SectionInfo {
+  section_id: number | number[];
+  t_age: number;
+  b_age: number;
+  units: IUnit[];
+}
+
+export interface IColumnProps {
+  data: IUnit[];
+  pixelScale?: number;
+  range?: [number, number];
+  unitComponent?: React.FunctionComponent<any>;
+  unitComponentProps?: any;
+  showLabels?: boolean;
+  width?: number;
+  columnWidth?: number;
+  targetUnitHeight?: number;
+  children?: ReactNode;
+  showLabelColumn?: boolean;
+}
+
+export function Section(props: IColumnProps) {
+  // Section with "squishy" time scale
+  const {
+    data,
+    range: _range,
+    pixelScale: _pixelScale,
+    unitComponent,
+    showLabels = true,
+    targetUnitHeight = 20,
+    width = 300,
+    columnWidth = 150,
+    unitComponentProps,
+    showLabelColumn = true,
+  } = props;
+
+  const b_age = Math.max(...data.map((d) => d.b_age));
+  const t_age = Math.min(...data.map((d) => d.t_age));
+
+  const range = useMemo(() => {
+    if (_range == null) {
+      return [b_age, t_age];
+    }
+    return _range;
+  }, [_range, b_age, t_age]);
+
+  const dAge = useMemo(() => range[0] - range[1], [range]);
+
+  const pixelScale = useMemo(() => {
+    if (_pixelScale != null) return _pixelScale;
+    const targetHeight = targetUnitHeight * data.length;
+    return Math.ceil(targetHeight / dAge);
+  }, [_pixelScale, targetUnitHeight, data.length, dAge]);
+
+  const height = useMemo(() => dAge * pixelScale, [dAge, pixelScale]);
+
+  /** Ensure that we can arrange units into the maximum number
+   * of columns defined by unitComponentProps, but that we don't
+   * use more than necessary.
+   */
+  const _unitComponentProps = useMemo(() => {
+    return {
+      ...unitComponentProps,
+      nColumns: Math.min(
+        Math.max(...data.map((d) => d.column)) + 1,
+        unitComponentProps?.nColumns ?? 2
+      ),
+    };
+  }, [data, unitComponentProps]);
+
+  return h(
+    MacrostratColumnProvider,
+    {
+      divisions: data,
+      range,
+      pixelsPerMeter: pixelScale, // Actually pixels per myr
+    },
+    [
+      h(AgeAxis, {
+        width: 20,
+        padding: 0,
+        paddingV: 10,
+        showLabel: false,
+      }),
+      h("div.timescale-container", { style: { marginTop: `10px` } }, [
+        h(Timescale, {
+          orientation: TimescaleOrientation.VERTICAL,
+          length: height,
+          levels: timescaleLevels as [number, number],
+          absoluteAgeScale: true,
+          showAgeAxis: false,
+          ageRange: range as [number, number],
+        }),
+      ]),
+      h(
+        ColumnSVG,
+        {
+          innerWidth: showLabels ? width : columnWidth,
+          paddingRight: 1,
+          paddingLeft: 1,
+          paddingV: 10,
+          innerHeight: height,
+        },
+        h(CompositeUnitsColumn, {
+          showLabelColumn: showLabelColumn,
+          width: showLabels ? width : columnWidth,
+          columnWidth,
+          gutterWidth: 5,
+          showLabels,
+          unitComponent,
+          unitComponentProps: _unitComponentProps,
+        })
+      ),
+    ]
+  );
+}
+
+const timescaleLevels = [2, 5];

package/src/selection-popover.module.sass

@@ -0,0 +1,27 @@
+.popover-main
+  position: absolute
+  pointer-events: none
+
+  :global(.bp5-overlay)
+    pointer-events: all
+
+  :global(.bp5-popover-target)
+    height: 100%
+    width: 100%
+    display: block
+    line-height: 0
+    pointer-events: none
+    outline: 2px solid #f22
+
+.legend-panel-outer
+  width: 25em
+  max-height: 60vh
+  overflow-y: scroll
+  background-color: var(--panel-background-color)
+
+.legend-info-panel
+  padding: 1em
+
+.legend-json-view
+  padding-left: 0
+  margin-left: -0.5em

package/src/selection-popover.ts

@@ -0,0 +1,71 @@
+import hyper from "@macrostrat/hyper";
+import { Button, Popover } from "@blueprintjs/core";
+import { DOMElement } from "react";
+import styles from "./selection-popover.module.sass";
+import { useSelectedUnit } from "./units";
+import { UnitDetailsPanel } from "./unit-details";
+
+const h = hyper.styled(styles);
+
+export function UnitDetailsPopover({
+  style,
+  children,
+  boundary,
+}: {
+  style: object;
+  children: React.ReactNode;
+  boundary?: DOMElement<any, any>;
+}) {
+  const content = h(LegendPopoverContainer, children);
+
+  return h(
+    "div.popover-main",
+    {
+      style,
+    },
+    h(
+      Popover,
+      // @ts-ignore
+      { content, isOpen: true, usePortal: false, boundary, position: "right" },
+      h("span.popover-target")
+    )
+  );
+}
+
+export function LegendPopoverContainer({ children }) {
+  return h(
+    "div.legend-panel-outer",
+    {
+      onClick(e) {
+        // Stop events from leaking to the parent
+        e.stopPropagation();
+      },
+    },
+    [h("div.legend-info-panel", children)]
+  );
+}
+
+export function UnitSelectionPopover(props) {
+  const { position } = props;
+  const unit = useSelectedUnit();
+  if (unit == null) {
+    return null;
+  }
+
+  return h(
+    "div.unit-popover-container",
+    h(
+      UnitDetailsPopover,
+      {
+        style: {
+          position: "absolute",
+          top: position?.y,
+          width: position?.width,
+          left: position?.x,
+          height: position?.height,
+        },
+      },
+      h(UnitDetailsPanel, { unit })
+    )
+  );
+}

package/src/store.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import h from "@macrostrat/hyper";
+
+const MacrostratUnitsContext = createContext(null);
+
+export function MacrostratUnitsProvider({ children, units }) {
+  return h(MacrostratUnitsContext.Provider, { value: units }, children);
+}
+
+export function useMacrostratUnits() {
+  return useContext(MacrostratUnitsContext);
+}

package/src/unit-details/index.module.sass

@@ -0,0 +1,51 @@
+.legend-panel-header
+  display: flex
+  justify-content: space-between
+  align-items: baseline
+  gap: 1em
+  border-bottom: 1px solid var(--panel-rule-color)
+  position: sticky
+  top: 0
+  background-color: var(--panel-secondary-background-color)
+  margin: -1em -1em 0
+  padding: 0.5em 1em
+  z-index: 50
+  code
+    font-size: 0.9em
+    color: var(--secondary-color)
+  .spacer
+    flex: 1
+  button
+    line-height: 1.5
+    transform: translateY(2px)
+
+  h3
+    margin: 0 0 0.5em
+    font-size: 1.1em
+
+.unit-details-content
+  position: relative
+  margin-top: 1em
+  margin-bottom: -0.5em
+
+.proportion, .sep, .no-units
+  color: var(--secondary-color)
+  font-style: italic
+  font-size: 0.9em
+
+.strat-name-id, .unit-id
+  font-family: var(--monospace-font)
+  color: var(--secondary-color)
+  font-size: 0.9em
+
+  &::before
+    content: '#'
+    color: var(--tertiary-color)
+
+.color-swatch
+  width: 1em
+  height: 1em
+  border-radius: 0.2em
+  margin-right: 0.2em
+  border: 1px solid var(--panel-rule-color)
+  display: inline-block