Move band loading and change loading spinner

Author: gjmooney

packages/base/src/dialogs/components/symbology/SingleBandPseudoColor.tsx

@@ -1,5 +1,3 @@
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IDict } from '@jupytergis/schema';
 import { Button } from '@jupyterlab/ui-components';
 import { ReadonlyJSONObject } from '@lumino/coreutils';
@@ -12,6 +10,8 @@ import { IStopRow, ISymbologyDialogProps } from '../../symbologyDialog';
 import BandRow from './BandRow';
 import ColorRamp from './ColorRamp';
 import StopRow from './StopRow';
+import { getGdal } from '../../../gdal';
+import { Spinner } from '../../../mainview/spinner';
 
 export interface IBandRow {
   band: number;
@@ -137,7 +137,7 @@ const SingleBandPseudoColor = ({
       : setSelectedFunction('exact');
   };
 
-  const getBandInfo = () => {
+  const getBandInfo = async () => {
     const bandsArr: IBandRow[] = [];
     const source = context.model.getSource(layer?.parameters?.source);
     const sourceInfo = source?.parameters?.urls[0];
@@ -146,25 +146,41 @@ const SingleBandPseudoColor = ({
       return;
     }
 
-    if (stateDb && layerState && layerState.tifData) {
-      const tifData = JSON.parse(layerState.tifData as string);
-
-      tifData['bands'].forEach((bandData: TifBandData) => {
-        bandsArr.push({
-          band: bandData.band,
-          colorInterpretation: bandData.colorInterpretation,
-          stats: {
-            minimum: sourceInfo.min ?? bandData.minimum,
-            maximum: sourceInfo.max ?? bandData.maximum,
-            mean: bandData.mean,
-            stdDev: bandData.stdDev
-          },
-          metadata: bandData.metadata,
-          histogram: bandData.histogram
-        });
+    let tifData;
+
+    if (layerState && layerState.tifData) {
+      tifData = JSON.parse(layerState.tifData as string);
+    } else {
+      const Gdal = await getGdal();
+
+      const fileData = await fetch(sourceInfo.url);
+      const file = new File([await fileData.blob()], 'loaded.tif');
+
+      const result = await Gdal.open(file);
+      const tifDataset = result.datasets[0];
+      tifData = await Gdal.gdalinfo(tifDataset, ['-stats']);
+      Gdal.close(tifDataset);
+
+      stateDb?.save(`jupytergis:${layerId}`, {
+        tifData: JSON.stringify(tifData)
       });
-      setBandRows(bandsArr);
     }
+
+    tifData['bands'].forEach((bandData: TifBandData) => {
+      bandsArr.push({
+        band: bandData.band,
+        colorInterpretation: bandData.colorInterpretation,
+        stats: {
+          minimum: sourceInfo.min ?? bandData.minimum,
+          maximum: sourceInfo.max ?? bandData.maximum,
+          mean: bandData.mean,
+          stdDev: bandData.stdDev
+        },
+        metadata: bandData.metadata,
+        histogram: bandData.histogram
+      });
+    });
+    setBandRows(bandsArr);
   };
 
   const buildColorInfo = () => {
@@ -438,13 +454,7 @@ const SingleBandPseudoColor = ({
     <div className="jp-gis-layer-symbology-container">
       <div className="jp-gis-band-container">
         {bandRows.length === 0 ? (
-          <div className="jp-gis-band-info-loading-container">
-            <span>Fetching band info...</span>
-            <FontAwesomeIcon
-              icon={faSpinner}
-              className="jp-gis-loading-spinner"
-            />
-          </div>
+          <Spinner loading={bandRows.length === 0} />
         ) : (
           <BandRow
             // Band numbers are 1 indexed

packages/base/src/mainview/mainView.tsx

@@ -25,7 +25,7 @@ import {
 } from '@jupytergis/schema';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
-import { JSONValue, ReadonlyJSONObject, UUID } from '@lumino/coreutils';
+import { JSONValue, UUID } from '@lumino/coreutils';
 import { Collection, Map as OlMap, View } from 'ol';
 import { ScaleLine } from 'ol/control';
 import { GeoJSON, MVT } from 'ol/format';
@@ -54,8 +54,6 @@ import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import { Rule } from 'ol/style/flat';
 import * as React from 'react';
 import shp from 'shpjs';
-import { getGdal } from '../gdal';
-import { GlobalStateDbManager } from '../store';
 import { isLightTheme } from '../tools';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
@@ -397,40 +395,6 @@ export class MainView extends React.Component<IProps, IStates> {
       case 'GeoTiffSource': {
         const sourceParameters = source.parameters as IGeoTiffSource;
 
-        const stateDb = GlobalStateDbManager.getInstance().getStateDb();
-
-        if (stateDb) {
-          const layerState = (await stateDb.fetch(
-            `jupytergis:${layerId}`
-          )) as ReadonlyJSONObject;
-
-          if (
-            sourceParameters.urls[0].url &&
-            (!layerState || !layerState.tifData)
-          ) {
-            // get GDAL info
-            const Gdal = await getGdal();
-
-            const fileData = await fetch(sourceParameters.urls[0].url);
-            const file = new File([await fileData.blob()], 'loaded.tif');
-
-            const result = await Gdal.open(file);
-            const tifDataset = result.datasets[0];
-
-            const tifData = await Gdal.gdalinfo(tifDataset, [
-              '-stats',
-              '-hist'
-            ]);
-
-            Gdal.close(tifDataset);
-
-            stateDb.save(`jupytergis:${layerId}`, {
-              ...layerState,
-              tifData: JSON.stringify(tifData)
-            });
-          }
-        }
-
         newSource = new GeoTIFFSource({
           sources: sourceParameters.urls,
           normalize: sourceParameters.normalize,