Works reasonably well but for some typescript errors

Author: davenquinn

packages/api-types/src/lithologies.d.ts

@@ -15,4 +15,5 @@ export interface Lithology extends LithologyCore {
   group: string | null; // Group classification (e.g., unconsolidated)
   color: string; // Color code for visualization (e.g., hex color)
   fill?: string | number; // Optional fill value for visualization
+  prop?: number | null; // Proportion of the lithology, if applicable.
 }

packages/data-sheet/src/postgrest-table/index.ts

@@ -16,11 +16,21 @@ import {
 import { Spec } from "immutability-helper";
 import { DataSheetProviderProps } from "../provider";
 import { PostgrestFilterBuilder } from "@supabase/postgrest-js";
-import { GenericSchema } from "@supabase/postgrest-js";
+import type {
+  GenericFunction,
+  GenericTable,
+  GenericView,
+} from "@supabase/postgrest-js/dist/cjs/types";
 
 const h = hyper.styled(styles);
 
-interface PostgRESTTableViewProps<T extends GenericSchema>
+export type GenericSchema = {
+  Tables: Record<string, GenericTable>;
+  Views: Record<string, GenericView>;
+  Functions: Record<string, GenericFunction>;
+};
+
+interface PostgRESTTableViewProps<T extends object>
   extends DataSheetProviderProps<T> {
   endpoint: string;
   table: string;

packages/feedback-components/package.json

@@ -36,6 +36,7 @@
     "@blueprintjs/core": "^5.10.2",
     "@blueprintjs/select": "^5.3.10",
     "@macrostrat/color-utils": "workspace:^",
+    "@macrostrat/data-sheet": "workspace:^",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/ui-components": "workspace:^",
     "@xyflow/react": "^12.3.6",

packages/feedback-components/src/feedback/index.ts

@@ -36,7 +36,6 @@ import useElementDimensions from "use-element-dimensions";
 import { GraphView } from "./graph";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { asChromaColor } from "@macrostrat/color-utils";
-import { getIconImage } from "@macrostrat/map-styles";
 import { ColorPicker } from "@macrostrat/data-sheet";
 
 export type { GraphData } from "./edit-state";

packages/feedback-components/src/feedback/text-visualizer.ts

@@ -1,13 +1,11 @@
-import { AnnotateBlendTag, TextAnnotateBlend } from "react-text-annotate-blend";
+import { AnnotateBlendTag } from "react-text-annotate-blend";
 import { InternalEntity } from "./types";
 import { TreeDispatch } from "./edit-state";
 import styles from "./feedback.module.sass";
 import hyper from "@macrostrat/hyper";
 import { buildHighlights, getTagStyle } from "../extractions";
 import { Highlight } from "../extractions/types";
-import { useCallback, useEffect, useRef } from "react";
-import { Tag, TagField } from "@macrostrat/data-components";
-import { columnGeoJSONRecordToColumnIdentifier } from "packages/column-views/src/correlation-chart/prepare-data";
+import { useEffect, useRef } from "react";
 
 const h = hyper.styled(styles);
 

packages/map-interface/src/helpers.ts

@@ -115,8 +115,8 @@ export function MapMovedReporter({ onMapMoved = null }) {
 
 interface MapLoadingReporterProps {
   ignoredSources?: string[];
-  onMapLoading?: (evt: mapboxgl.EventData) => void;
-  onMapIdle?: (evt: mapboxgl.EventData) => void;
+  onMapLoading?: (evt: mapboxgl.MapEvent) => void;
+  onMapIdle?: (evt: mapboxgl.MapEvent) => void;
   mapIsLoading?: boolean;
 }
 

packages/map-interface/src/map-view.ts

@@ -73,6 +73,8 @@ function defaultInitializeMap(container, args: MapboxOptionsExt = {}) {
     logoPosition: "bottom-left",
     trackResize: true,
     antialias: true,
+    // This is a legacy option for Mapbox GL v2
+    // @ts-ignore
     optimizeForTerrain: true,
     ...rest,
   });

packages/map-styles/src/layer-helpers/cross-sections.ts

@@ -1,7 +1,7 @@
 import { getCSSVariable } from "@macrostrat/color-utils";
-import type { AnyLayer } from "mapbox-gl";
+import type { LayerSpecification, CircleLayerSpecification } from "mapbox-gl";
 
-export function buildCrossSectionLayers(): AnyLayer[] {
+export function buildCrossSectionLayers(): LayerSpecification[] {
   /** Build standardized layers for cross-sections */
   const ruleColor = getCSSVariable(
     "--panel-background-color",
@@ -50,7 +50,9 @@ export function buildCrossSectionLayers(): AnyLayer[] {
       id: "crossSectionEndpoint",
       type: "circle",
       source: "crossSectionEndpoints",
-      paint: crossSectionPointPaint,
+      paint: crossSectionPointPaint as Partial<
+        CircleLayerSpecification["paint"]
+      >,
     },
     {
       id: "elevationMarker",
@@ -59,7 +61,7 @@ export function buildCrossSectionLayers(): AnyLayer[] {
       paint: {
         ...crossSectionPointPaint,
         "circle-color": "#4bc0c0",
-      },
+      } as Partial<CircleLayerSpecification["paint"]>,
     },
   ];
 }

packages/mapbox-react/src/controls.ts

@@ -1,15 +1,12 @@
 import h from "@macrostrat/hyper";
 import Base from "mapbox-gl-controls/lib/Base/Base";
 import Button from "mapbox-gl-controls/lib/Button/Button";
-import {
-  CompassControl as _CompassControl,
-  ZoomControl as _ZoomControl,
-} from "mapbox-gl-controls";
+import { ZoomControl as _ZoomControl } from "mapbox-gl-controls";
 import { Icon } from "@blueprintjs/core";
 import { useRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import { useMapElement, useMapRef } from "./context";
-import { NavigationControl, Control } from "mapbox-gl";
+import { NavigationControl } from "mapbox-gl";
 
 export function MapControlWrapper({ className, control, options = {} }) {
   /** A wrapper for using Mapbox GL controls with a Mapbox GL map */

packages/mapbox-react/src/focus-state.ts

@@ -1,19 +1,34 @@
 /* Reporters and buttons for evaluating a feature's focus on the map. */
 import { Intent, Button } from "@blueprintjs/core";
-import { useMapInitialized, useMapRef, useMapStatus } from "./context";
+import { useMapInitialized, useMapRef } from "./context";
 import classNames from "classnames";
 import { useState, useRef, useEffect } from "react";
 import bbox from "@turf/bbox";
 import styles from "./main.module.scss";
 import hyper from "@macrostrat/hyper";
 
-import mapboxgl, {
+import type GeoJSON from "geojson";
+import type {
   LngLatBoundsLike,
   LngLatLike,
   PaddingOptions,
-  FlyToOptions,
+  AnimationOptions,
+  CameraOptions,
+  Map,
 } from "mapbox-gl";
 
+/**
+ * FlyToOptions
+ * For some reason, we have to shadow the mapboxgl.FlyToOptions type
+ * */
+export interface FlyToOptions extends AnimationOptions, CameraOptions {
+  curve?: number | undefined;
+  minZoom?: number | undefined;
+  speed?: number | undefined;
+  screenSpeed?: number | undefined;
+  maxDuration?: number | undefined;
+}
+
 const h = hyper.styled(styles);
 
 export enum PositionFocusState {
@@ -69,7 +84,7 @@ export function useMapEaseToCenter(position, padding) {
     );
     const map = mapRef.current;
     if (map == null) return;
-    let opts: mapboxgl.FlyToOptions = null;
+    let opts: FlyToOptions = null;
     if (position != prevPosition.current) {
       opts ??= {};
       opts.center = position;
@@ -117,7 +132,7 @@ export function useMapEaseToBounds(
     if (bounds == prevPosition.current || padding == prevPadding.current) {
       return;
     }
-    let opts: mapboxgl.FlyToOptions = {
+    let opts: FlyToOptions = {
       padding,
       duration: prevPadding.current == null ? 0 : 800,
     };
@@ -182,7 +197,7 @@ export function useMapEaseTo(props: MapEaseToProps) {
 
     const positionChanges = filterChanges(state, prevState.current);
 
-    let opts: mapboxgl.FlyToOptions = {
+    let opts: FlyToOptions = {
       padding,
       duration: initialized ? duration : 0,
     };
@@ -238,11 +253,7 @@ function stripNullKeys(obj: object) {
   return newObj;
 }
 
-function moveMap(
-  map: mapboxgl.Map,
-  state: MapEaseToState,
-  opts: mapboxgl.FlyToOptions,
-) {
+function moveMap(map: mapboxgl.Map, state: MapEaseToState, opts: FlyToOptions) {
   const { bounds, center, zoom, padding } = state;
   if (bounds != null) {
     map.fitBounds(bounds, opts);
@@ -279,8 +290,8 @@ function greatCircleDistance(
 }
 
 export function getFocusState(
-  map: mapboxgl.Map,
-  location: mapboxgl.LngLatLike | GeoJSON.Geometry | null,
+  map: Map,
+  location: LngLatLike | GeoJSON.Geometry | null,
 ): PositionFocusState | null {
   /** Determine whether the infomarker is positioned in the viewport */
   if (location == null) return null;
@@ -342,9 +353,7 @@ export function getFocusState(
   return PositionFocusState.OUT_OF_VIEW;
 }
 
-export function useFocusState(
-  position: mapboxgl.LngLatLike | GeoJSON.Geometry,
-) {
+export function useFocusState(position: LngLatLike | GeoJSON.Geometry) {
   const map = useMapRef();
   const [focusState, setFocusState] = useState<PositionFocusState | null>(null);
   const isInitialized = useMapInitialized();
@@ -373,11 +382,7 @@ export function isCentered(focusState: PositionFocusState) {
 }
 
 function getCenterAndBestZoom(
-  input:
-    | [number, number]
-    | GeoJSON.Geometry
-    | GeoJSON.BBox
-    | mapboxgl.LngLatLike,
+  input: [number, number] | GeoJSON.Geometry | GeoJSON.BBox | LngLatLike,
 ) {
   let box: GeoJSON.BBox;
   let center: [number, number] | null = null;