GEODES STAC API Search (#753)

* Add a STAC browser

* Clean up

* Improve _buildLayer for StacLayers

* Swap start/end times to match geodes

* Lint

* Improve STAC hook

* Save times in local storage

* Use loading state on results panel

* Prop clean

* Update calendar and use UTC time

* Adjust zoom amount when creating STAC layer

* Css

* Adjust result list CSS

* Add rough draft metadata viewer

* Add dropdown menu

* Rework data objects

* Move STAC browser to existing panel

* Rework data objects

* Remove panel from index

* Improve type safety

* I said I'd get around to it

* Use filters object

* Progress

* Platform progress

* Again

* Add data / product dropdown section

* Dropdown CSS

* Fix icon css

* Add badge

* CSS

* Add badges to show selections

* Clean up some props

* Don't close menu on select

* Update hook query builder

* Make it toggle

* Clean up

* Use Sets instead of arrays

* Some CSS and cleaning up

* Use discriminated union

* Yes every commit is cleaning up

* ugh

* Remove metadata viewer

* Don't query on first render

* Remove log

* Use StateDb

* Adjust datepicker CSS

* Remove model from dependency array

* What does pre commit even do?

* Change proj4 version

* types

* Add test

* Use name from STAC item

* Fix STAC layer visibility bug

* Fix zoom to layer for STAC layers

* Fix error spam in console when selecting STAC layer

* Update fetchWithProxies

* Update lite detection logic

* Fix and debouce bbox update signal

* Rename signal

* Add checkbox to toggle whole world bbox

* Update test for new proxy fetch

* Really though

* Fix proxy startegy logic

* Update pagination number labels

* Re-fetch query on bbox change

* Remove old file

* Fix duplicate import

* Remove layer metadata stuff

* Prepend all shared component css classnames

* No model No fetch

* Don't move map when adding result

* Playwright appeasement

Author: gjmooney

.gitignore

@@ -145,3 +145,6 @@ packages/schema/src/schema/geojson.json
 # Automatically generated file for processing
 
 packages/schema/src/processing/_generated/*
+
+# Local example files
+examples/local_examples/*

packages/base/package.json

@@ -64,6 +64,8 @@
     "@lumino/widgets": "^2.0.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
@@ -88,7 +90,7 @@
     "proj4": "^2.19.3",
     "proj4-list": "^1.0.4",
     "react": "^18.0.1",
-    "react-day-picker": "8.10.1",
+    "react-day-picker": "^9.7.0",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

packages/base/src/formbuilder/objectform/layer/layerform.ts

@@ -42,7 +42,7 @@ export class LayerPropertiesForm extends BaseForm {
   ): void {
     super.processSchema(data, schema, uiSchema);
 
-    if (!schema.properties.source) {
+    if (!schema.properties?.source) {
       return;
     }
 

packages/base/src/index.ts

@@ -1,15 +1,16 @@
+export * from './annotations';
 export * from './classificationModes';
 export * from './commands/index';
 export * from './constants';
 export * from './dialogs/layerCreationFormDialog';
 export * from './formbuilder/objectform/baseform';
 export * from './icons';
 export * from './mainview';
+export * from './menus';
 export * from './panelview';
+export * from './stacBrowser';
 export * from './store';
 export * from './toolbar';
 export * from './tools';
 export * from './types';
 export * from './widget';
-export * from './annotations';
-export * from './menus';

packages/base/src/mainview/mainView.tsx

@@ -22,6 +22,7 @@ import {
   IRasterLayer,
   IRasterSource,
   IShapefileSource,
+  IStacLayer,
   IVectorLayer,
   IVectorTileLayer,
   IVectorTileSource,
@@ -51,15 +52,15 @@ import {
   VectorTile as VectorTileLayer,
   WebGLTile as WebGlTileLayer,
 } from 'ol/layer';
+import LayerGroup from 'ol/layer/Group';
 import TileLayer from 'ol/layer/Tile';
 import {
   fromLonLat,
-  get as getRegisteredProjection,
+  get as getProjection,
   toLonLat,
   transformExtent,
 } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
-import { get as getProjection } from 'ol/proj.js';
 import RenderFeature from 'ol/render/Feature';
 import {
   GeoTIFF as GeoTIFFSource,
@@ -74,6 +75,7 @@ import { Circle, Fill, Stroke, Style } from 'ol/style';
 import { Rule } from 'ol/style/flat';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import StacLayer from 'ol-stac';
 import proj4 from 'proj4';
 import proj4list from 'proj4-list';
 import * as React from 'react';
@@ -82,12 +84,21 @@ import AnnotationFloater from '@/src/annotations/components/AnnotationFloater';
 import { CommandIDs } from '@/src/constants';
 import { LoadingOverlay } from '@/src/shared/components/loading';
 import StatusBar from '@/src/statusbar/StatusBar';
-import { isLightTheme, loadFile, throttle } from '@/src/tools';
+import { debounce, isLightTheme, loadFile, throttle } from '@/src/tools';
 import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
 
+type OlLayerTypes =
+  | TileLayer
+  | VectorLayer
+  | VectorTileLayer
+  | WebGlTileLayer
+  | WebGlTileLayer
+  | HeatmapLayer
+  | StacLayer
+  | ImageLayer<any>;
 interface IProps {
   viewModel: MainViewModel;
 }
@@ -205,6 +216,7 @@ export class MainView extends React.Component<IProps, IStates> {
     this._contextMenu = new ContextMenu({
       commands: this._commands,
     });
+    this._updateCenter = debounce(this.updateCenter, 100);
   }
 
   async componentDidMount(): Promise<void> {
@@ -302,6 +314,8 @@ export class MainView extends React.Component<IProps, IStates> {
 
       const view = this._Map.getView();
 
+      view.on('change:center', () => this._updateCenter());
+
       // TODO: Note for the future, will need to update listeners if view changes
       view.on(
         'change:center',
@@ -409,6 +423,22 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   }
 
+  updateCenter = () => {
+    const extentIn4326 = this.getViewBbox();
+    this._model.updateBboxSignal.emit(extentIn4326);
+  };
+
+  getViewBbox = (targetProjection = 'EPSG:4326') => {
+    const view = this._Map.getView();
+    const extent = view.calculateExtent(this._Map.getSize());
+
+    if (view.getProjection().getCode() === targetProjection) {
+      return extent;
+    }
+
+    return transformExtent(extent, view.getProjection(), targetProjection);
+  };
+
   createSelectInteraction = () => {
     const pointStyle = new Style({
       image: new Circle({
@@ -870,24 +900,28 @@ export class MainView extends React.Component<IProps, IStates> {
   private async _buildMapLayer(
     id: string,
     layer: IJGISLayer,
-  ): Promise<Layer | undefined> {
-    const sourceId = layer.parameters?.source;
-    const source = this._model.sharedModel.getLayerSource(sourceId);
-    if (!source) {
-      return;
-    }
-
+  ): Promise<Layer | StacLayer | undefined> {
     this.setState(old => ({ ...old, loadingLayer: true }));
     this._loadingLayers.add(id);
 
-    if (!this._sources[sourceId]) {
-      await this.addSource(sourceId, source);
-    }
+    let newMapLayer: OlLayerTypes;
+    let layerParameters: any;
+    let sourceId: string | undefined;
+    let source: IJGISSource | undefined;
 
-    this._loadingLayers.add(id);
-
-    let newMapLayer;
-    let layerParameters;
+    if (layer.type !== 'StacLayer') {
+      sourceId = layer.parameters?.source;
+      if (!sourceId) {
+        return;
+      }
+      source = this._model.sharedModel.getLayerSource(sourceId);
+      if (!source) {
+        return;
+      }
+      if (!this._sources[sourceId]) {
+        await this.addSource(sourceId, source);
+      }
+    }
 
     // TODO: OpenLayers provides a bunch of sources for specific tile
     // providers, so maybe set up some way to use those
@@ -977,22 +1011,46 @@ export class MainView extends React.Component<IProps, IStates> {
           radius: layerParameters.radius ?? 8,
           gradient: layerParameters.color,
         });
+
         break;
       }
-    }
+      case 'StacLayer': {
+        layerParameters = layer.parameters as IStacLayer;
 
-    await this._waitForSourceReady(newMapLayer);
+        newMapLayer = new StacLayer({
+          displayPreview: true,
+          data: layerParameters.data,
+          opacity: layerParameters.opacity,
+          visible: layer.visible,
+          assets: Object.keys(layerParameters.data.assets),
+          extent: layerParameters.data.bbox,
+        });
+
+        this.setState(old => ({
+          ...old,
+          metadata: layerParameters.data.properties,
+        }));
+
+        break;
+      }
+    }
 
     // OpenLayers doesn't have name/id field so add it
     newMapLayer.set('id', id);
 
-    // we need to keep track of which source has which layers
-    this._sourceToLayerMap.set(layerParameters.source, id);
+    // STAC layers don't have source
+    if (newMapLayer instanceof Layer) {
+      // we need to keep track of which source has which layers
+      // Only set sourceToLayerMap if 'source' exists on layerParameters
+      if ('source' in layerParameters) {
+        this._sourceToLayerMap.set(layerParameters.source, id);
+      }
 
-    this.addProjection(newMapLayer);
+      this.addProjection(newMapLayer);
+      await this._waitForSourceReady(newMapLayer);
+    }
 
     this._loadingLayers.delete(id);
-
     return newMapLayer;
   }
 
@@ -1005,7 +1063,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     const projectionCode = sourceProjection.getCode();
 
-    const isProjectionRegistered = getRegisteredProjection(projectionCode);
+    const isProjectionRegistered = getProjection(projectionCode);
     if (!isProjectionRegistered) {
       // Check if the projection exists in proj4list
       if (!proj4list[projectionCode]) {
@@ -1195,16 +1253,6 @@ export class MainView extends React.Component<IProps, IStates> {
     mapLayer: Layer,
     oldLayer?: IDict,
   ): Promise<void> {
-    const sourceId = layer.parameters?.source;
-    const source = this._model.sharedModel.getLayerSource(sourceId);
-    if (!source) {
-      return;
-    }
-
-    if (!this._sources[sourceId]) {
-      await this.addSource(sourceId, source);
-    }
-
     mapLayer.setVisible(layer.visible);
 
     switch (layer.type) {
@@ -1266,6 +1314,9 @@ export class MainView extends React.Component<IProps, IStates> {
 
         break;
       }
+      case 'StacLayer':
+        mapLayer.setOpacity(layer.parameters?.opacity || 1);
+        break;
     }
   }
 
@@ -1456,7 +1507,7 @@ export class MainView extends React.Component<IProps, IStates> {
    * Wait for a layers source state to be 'ready'
    * @param layer The Layer to check
    */
-  private _waitForSourceReady(layer: Layer) {
+  private _waitForSourceReady(layer: Layer | LayerGroup) {
     return new Promise<void>((resolve, reject) => {
       const checkState = () => {
         const state = layer.getSourceState();
@@ -1771,10 +1822,6 @@ export class MainView extends React.Component<IProps, IStates> {
       const mapLayer = this.getLayer(id);
       const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
 
-      if (!mapLayer) {
-        return;
-      }
-
       if (layerTree.includes(id)) {
         this.updateLayer(id, newLayer, mapLayer, oldLayer);
       } else {
@@ -1914,6 +1961,10 @@ export class MainView extends React.Component<IProps, IStates> {
       extent = tileGrid?.getExtent();
     }
 
+    if (layer instanceof StacLayer) {
+      extent = layer.getExtent();
+    }
+
     if (!extent) {
       console.warn('Layer has no extent.');
       return;
@@ -2165,4 +2216,5 @@ export class MainView extends React.Component<IProps, IStates> {
   private _loadingLayers: Set<string>;
   private _originalFeatures: IDict<Feature<Geometry>[]> = {};
   private _highlightLayer: VectorLayer<VectorSource>;
+  private _updateCenter: CallableFunction;
 }

packages/base/src/panelview/leftpanel.tsx

@@ -12,6 +12,7 @@ import { Message } from '@lumino/messaging';
 import { MouseEvent as ReactMouseEvent } from 'react';
 
 import { CommandIDs } from '@/src/constants';
+import StacPanel from '@/src/stacBrowser/StacPanel';
 import { IControlPanelModel } from '@/src/types';
 import { FilterPanel } from './components/filter-panel/Filter';
 import { LayersPanel } from './components/layers';
@@ -55,10 +56,20 @@ export class LeftPanelWidget extends SidePanel {
       state: this._state,
       onSelect: this._onSelect,
     });
+
     layerTree.title.caption = 'Layer tree';
     layerTree.title.label = 'Layers';
     this.addWidget(layerTree);
 
+    const stacPanel = new StacPanel({
+      model: this._model,
+      tracker: options.tracker,
+    });
+
+    stacPanel.title.caption = 'STAC';
+    stacPanel.title.label = 'STAC';
+    this.addWidget(stacPanel);
+
     const filterPanel = new FilterPanel({
       model: this._model,
       tracker: options.tracker,

packages/base/src/shared/components/Badge.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IBadgeProps extends React.HTMLAttributes<HTMLButtonElement> {
+  variant?: 'destructive' | 'outline' | 'secondary';
+  size?: 'sm' | 'lg' | 'icon';
+}
+
+function Badge({ variant, ...props }: IBadgeProps) {
+  return (
+    // @ts-expect-error lol
+    <div data-variant={variant} className={'jgis-badge'} {...props} />
+  );
+}
+
+export default Badge;

packages/base/src/shared/components/Button.tsx

@@ -14,7 +14,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
       <Comp
         data-size={size}
         data-variant={variant}
-        className={`Button ${className ? className : ''}`}
+        className={`jgis-button ${className ? className : ''}`}
         ref={ref}
         {...props}
       />