@jupytergis/base 0.4.5 → 0.6.0

package/lib/console/consoleview.js

@@ -1,7 +1,7 @@
 import { ConsolePanel } from '@jupyterlab/console';
+import { closeIcon, CommandToolbarButton, expandIcon, Toolbar, } from '@jupyterlab/ui-components';
 import { BoxPanel } from '@lumino/widgets';
-import { debounce } from '../tools';
-import { closeIcon, CommandToolbarButton, expandIcon, Toolbar } from '@jupyterlab/ui-components';
+import { debounce } from "../tools";
 export class ConsoleView extends BoxPanel {
     constructor(options) {
         super({ direction: 'top-to-bottom' });
@@ -16,7 +16,7 @@ export class ConsoleView extends BoxPanel {
             contentFactory,
             mimeTypeService,
             rendermime: clonedRendermime,
-            kernelPreference: { name: 'python3', shutdownOnDispose: true }
+            kernelPreference: { name: 'python3', shutdownOnDispose: true },
         });
         this._consolePanel.console.node.dataset.jpInteractionMode = 'notebook';
         this.addWidget(this._consolePanel);
@@ -26,13 +26,13 @@ export class ConsoleView extends BoxPanel {
             label: '',
             icon: expandIcon,
             id: 'jupytergis:toggleConsole',
-            commands: options.commandRegistry
+            commands: options.commandRegistry,
         }));
         this._consolePanel.toolbar.addItem('close', new CommandToolbarButton({
             label: '',
             icon: closeIcon,
             id: 'jupytergis:removeConsole',
-            commands: options.commandRegistry
+            commands: options.commandRegistry,
         }));
     }
     get consolePanel() {

package/lib/constants.d.ts

@@ -1,58 +1,9 @@
+import { IDict } from '@jupytergis/schema';
 import { LabIcon } from '@jupyterlab/ui-components';
 /**
  * The command IDs.
  */
-export declare namespace CommandIDs {
-    const createNew = "jupytergis:create-new-jGIS-file";
-    const redo = "jupytergis:redo";
-    const undo = "jupytergis:undo";
-    const symbology = "jupytergis:symbology";
-    const identify = "jupytergis:identify";
-    const temporalController = "jupytergis:temporalController";
-    const getGeolocation = "jupytergis:getGeolocation";
-    const openLayerBrowser = "jupytergis:openLayerBrowser";
-    const newRasterEntry = "jupytergis:newRasterEntry";
-    const newVectorTileEntry = "jupytergis:newVectorTileEntry";
-    const newGeoJSONEntry = "jupytergis:newGeoJSONEntry";
-    const newHillshadeEntry = "jupytergis:newHillshadeEntry";
-    const newImageEntry = "jupytergis:newImageEntry";
-    const newVideoEntry = "jupytergis:newVideoEntry";
-    const newGeoTiffEntry = "jupytergis:newGeoTiffEntry";
-    const buffer = "jupytergis:buffer";
-    const dissolve = "jupytergis:dissolve";
-    const newRasterSource = "jupytergis:newRasterSource";
-    const newRasterDemSource = "jupytergis:newRasterDemSource";
-    const newVectorSource = "jupytergis:newVectorSource";
-    const newGeoJSONSource = "jupytergis:newGeoJSONSource";
-    const newImageSource = "jupytergis:imageSource";
-    const newVideoSource = "jupytergis:videoSource";
-    const newShapefileSource = "jupytergis:shapefileSource";
-    const newGeoTiffSource = "jupytergis:newGeoTiffSource";
-    const newRasterLayer = "jupytergis:newRasterLayer";
-    const newVectorLayer = "jupytergis:newVectorLayer";
-    const newHillshadeLayer = "jupytergis:newHillshadeLayer";
-    const newImageLayer = "jupytergis:newImageLayer";
-    const newVideoLayer = "jupytergis:newVideoLayer";
-    const newShapefileLayer = "jupytergis:newShapefileLayer";
-    const newWebGlTileLayer = "jupytergis:newWebGlTileLayer";
-    const newHeatmapLayer = "jupytergis:newHeatmapLayer";
-    const renameLayer = "jupytergis:renameLayer";
-    const removeLayer = "jupytergis:removeLayer";
-    const renameGroup = "jupytergis:renameGroup";
-    const removeGroup = "jupytergis:removeGroup";
-    const moveLayersToGroup = "jupytergis:moveLayersToGroup";
-    const moveLayerToNewGroup = "jupytergis:moveLayerToNewGroup";
-    const renameSource = "jupytergis:renameSource";
-    const removeSource = "jupytergis:removeSource";
-    const toggleConsole = "jupytergis:toggleConsole";
-    const invokeCompleter = "jupytergis:invokeConsoleCompleter";
-    const removeConsole = "jupytergis:removeConsole";
-    const executeConsole = "jupytergis:executeConsole";
-    const selectCompleter = "jupytergis:selectConsoleCompleter";
-    const addAnnotation = "jupytergis:addAnnotation";
-    const zoomToLayer = "jupytergis:zoomToLayer";
-    const downloadGeoJSON = "jupytergis:downloadGeoJSON";
-}
+export declare const CommandIDs: IDict;
 interface IRegisteredIcon {
     icon?: LabIcon;
     iconClass?: string;

package/lib/constants.js

@@ -1,70 +1,11 @@
+import { ProcessingCommandIDs } from '@jupytergis/schema';
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
-import { bookOpenIcon, clockIcon, geoJSONIcon, infoIcon, moundIcon, rasterIcon, vectorSquareIcon } from './icons';
+import * as BaseCommandIDs from './commands/BaseCommandIDs';
+import { bookOpenIcon, clockIcon, geoJSONIcon, infoIcon, moundIcon, rasterIcon, vectorSquareIcon, } from './icons';
 /**
  * The command IDs.
  */
-export var CommandIDs;
-(function (CommandIDs) {
-    CommandIDs.createNew = 'jupytergis:create-new-jGIS-file';
-    CommandIDs.redo = 'jupytergis:redo';
-    CommandIDs.undo = 'jupytergis:undo';
-    CommandIDs.symbology = 'jupytergis:symbology';
-    CommandIDs.identify = 'jupytergis:identify';
-    CommandIDs.temporalController = 'jupytergis:temporalController';
-    // geolocation
-    CommandIDs.getGeolocation = 'jupytergis:getGeolocation';
-    // Layers and sources creation commands
-    CommandIDs.openLayerBrowser = 'jupytergis:openLayerBrowser';
-    // Layer and source
-    CommandIDs.newRasterEntry = 'jupytergis:newRasterEntry';
-    CommandIDs.newVectorTileEntry = 'jupytergis:newVectorTileEntry';
-    CommandIDs.newGeoJSONEntry = 'jupytergis:newGeoJSONEntry';
-    CommandIDs.newHillshadeEntry = 'jupytergis:newHillshadeEntry';
-    CommandIDs.newImageEntry = 'jupytergis:newImageEntry';
-    CommandIDs.newVideoEntry = 'jupytergis:newVideoEntry';
-    CommandIDs.newGeoTiffEntry = 'jupytergis:newGeoTiffEntry';
-    // Processing commands
-    CommandIDs.buffer = 'jupytergis:buffer';
-    CommandIDs.dissolve = 'jupytergis:dissolve';
-    // Sources only commands
-    CommandIDs.newRasterSource = 'jupytergis:newRasterSource';
-    CommandIDs.newRasterDemSource = 'jupytergis:newRasterDemSource';
-    CommandIDs.newVectorSource = 'jupytergis:newVectorSource';
-    CommandIDs.newGeoJSONSource = 'jupytergis:newGeoJSONSource';
-    CommandIDs.newImageSource = 'jupytergis:imageSource';
-    CommandIDs.newVideoSource = 'jupytergis:videoSource';
-    CommandIDs.newShapefileSource = 'jupytergis:shapefileSource';
-    CommandIDs.newGeoTiffSource = 'jupytergis:newGeoTiffSource';
-    // Layers only commands
-    CommandIDs.newRasterLayer = 'jupytergis:newRasterLayer';
-    CommandIDs.newVectorLayer = 'jupytergis:newVectorLayer';
-    CommandIDs.newHillshadeLayer = 'jupytergis:newHillshadeLayer';
-    CommandIDs.newImageLayer = 'jupytergis:newImageLayer';
-    CommandIDs.newVideoLayer = 'jupytergis:newVideoLayer';
-    CommandIDs.newShapefileLayer = 'jupytergis:newShapefileLayer';
-    CommandIDs.newWebGlTileLayer = 'jupytergis:newWebGlTileLayer';
-    CommandIDs.newHeatmapLayer = 'jupytergis:newHeatmapLayer';
-    // Layer and group actions
-    CommandIDs.renameLayer = 'jupytergis:renameLayer';
-    CommandIDs.removeLayer = 'jupytergis:removeLayer';
-    CommandIDs.renameGroup = 'jupytergis:renameGroup';
-    CommandIDs.removeGroup = 'jupytergis:removeGroup';
-    CommandIDs.moveLayersToGroup = 'jupytergis:moveLayersToGroup';
-    CommandIDs.moveLayerToNewGroup = 'jupytergis:moveLayerToNewGroup';
-    // Source actions
-    CommandIDs.renameSource = 'jupytergis:renameSource';
-    CommandIDs.removeSource = 'jupytergis:removeSource';
-    // Console commands
-    CommandIDs.toggleConsole = 'jupytergis:toggleConsole';
-    CommandIDs.invokeCompleter = 'jupytergis:invokeConsoleCompleter';
-    CommandIDs.removeConsole = 'jupytergis:removeConsole';
-    CommandIDs.executeConsole = 'jupytergis:executeConsole';
-    CommandIDs.selectCompleter = 'jupytergis:selectConsoleCompleter';
-    // Map Commands
-    CommandIDs.addAnnotation = 'jupytergis:addAnnotation';
-    CommandIDs.zoomToLayer = 'jupytergis:zoomToLayer';
-    CommandIDs.downloadGeoJSON = 'jupytergis:downloadGeoJSON';
-})(CommandIDs || (CommandIDs = {}));
+export const CommandIDs = Object.assign(Object.assign({}, BaseCommandIDs), ProcessingCommandIDs);
 const iconObject = {
     RasterSource: { icon: rasterIcon },
     RasterDemSource: { icon: moundIcon },
@@ -87,11 +28,11 @@ const iconObject = {
     [CommandIDs.newHillshadeEntry]: { icon: moundIcon },
     [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
     [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
-    [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
+    [CommandIDs.newShapefileEntry]: { iconClass: 'fa fa-file' },
     [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
     [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
     [CommandIDs.identify]: { icon: infoIcon },
-    [CommandIDs.temporalController]: { icon: clockIcon }
+    [CommandIDs.temporalController]: { icon: clockIcon },
 };
 /**
  * The registered icons

package/lib/dialogs/ProcessingFormDialog.d.ts

@@ -1,8 +1,8 @@
-import { IDict, IJupyterGISModel } from '@jupytergis/schema';
+import { ProcessingType, IDict, IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
-import { IBaseFormProps } from '../formbuilder/objectform/baseform';
-import { Signal } from '@lumino/signaling';
 import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import { IBaseFormProps } from "../formbuilder/objectform/baseform";
 export interface IProcessingFormDialogOptions extends IBaseFormProps {
     formContext: 'update' | 'create';
     schema: IDict;
@@ -11,7 +11,7 @@ export interface IProcessingFormDialogOptions extends IBaseFormProps {
     syncData: (props: IDict) => void;
     syncSelectedPropField?: (id: string | null, value: any, parentType: 'dialog' | 'panel') => void;
     model: IJupyterGISModel;
-    processingType: 'Buffer' | 'Dissolve' | 'Export';
+    processingType: 'Export' | ProcessingType;
 }
 /**
  * Wrapper component to handle OK button state

package/lib/dialogs/ProcessingFormDialog.js

@@ -1,17 +1,17 @@
 import { Dialog } from '@jupyterlab/apputils';
-import * as React from 'react';
-import { BaseForm } from '../formbuilder/objectform/baseform';
-import { DissolveForm } from '../formbuilder/objectform/process';
-import { Signal } from '@lumino/signaling';
 import { PromiseDelegate } from '@lumino/coreutils';
-const ProcessingFormWrapper = (props) => {
+import { Signal } from '@lumino/signaling';
+import * as React from 'react';
+import { BaseForm, } from "../formbuilder/objectform/baseform";
+import { DissolveForm } from "../formbuilder/objectform/process";
+const ProcessingFormWrapper = props => {
     var _a;
     const [ready, setReady] = React.useState(false);
     const okSignal = React.useRef();
     const formErrorSignal = React.useRef();
     Promise.all([
         props.okSignalPromise.promise,
-        (_a = props.formErrorSignalPromise) === null || _a === void 0 ? void 0 : _a.promise
+        (_a = props.formErrorSignalPromise) === null || _a === void 0 ? void 0 : _a.promise,
     ]).then(([ok, formChanged]) => {
         okSignal.current = ok;
         formErrorSignal.current = formChanged;
@@ -22,8 +22,6 @@ const ProcessingFormWrapper = (props) => {
         case 'Dissolve':
             FormComponent = DissolveForm;
             break;
-        case 'Buffer':
-        case 'Export':
         default:
             FormComponent = BaseForm;
     }
@@ -39,7 +37,7 @@ export class ProcessingFormDialog extends Dialog {
         const layers = (_a = options.model.sharedModel.layers) !== null && _a !== void 0 ? _a : {};
         const layerOptions = Object.keys(layers).map(layerId => ({
             value: layerId,
-            label: layers[layerId].name
+            label: layers[layerId].name,
         }));
         // Modify schema to include layer options and layer name field
         if (options.schema) {
@@ -51,7 +49,7 @@ export class ProcessingFormDialog extends Dialog {
             if (!((_c = options.schema.properties) === null || _c === void 0 ? void 0 : _c.outputLayerName)) {
                 options.schema.properties.outputLayerName = {
                     type: 'string',
-                    title: 'outputLayerName'
+                    title: 'outputLayerName',
                     // default: ''
                 };
             }
@@ -74,7 +72,7 @@ export class ProcessingFormDialog extends Dialog {
         super({
             title: options.title,
             body,
-            buttons: [Dialog.cancelButton(), Dialog.okButton()]
+            buttons: [Dialog.cancelButton(), Dialog.okButton()],
         });
         this.okSignal = new Signal(this);
         const formErrorSignal = new Signal(this);

package/lib/dialogs/layerBrowserDialog.d.ts

@@ -10,7 +10,7 @@ interface ILayerBrowserDialogProps {
     okSignalPromise: PromiseDelegate<Signal<Dialog<any>, number>>;
     cancel: () => void;
 }
-export declare const LayerBrowserComponent: ({ model, registry, formSchemaRegistry, okSignalPromise, cancel }: ILayerBrowserDialogProps) => React.JSX.Element;
+export declare const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps>;
 export interface ILayerBrowserOptions {
     model: IJupyterGISModel;
     registry: IRasterLayerGalleryEntry[];

package/lib/dialogs/layerBrowserDialog.js

@@ -4,9 +4,9 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
-import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
 import { CreationFormWrapper } from './layerCreationFormDialog';
-export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel }) => {
+import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
+export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
@@ -54,15 +54,15 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
         const sourceModel = {
             type: 'RasterSource',
             name: tile.name,
-            parameters: tile.source
+            parameters: tile.source,
         };
         const layerModel = {
             type: 'RasterLayer',
             parameters: {
-                source: sourceId
+                source: sourceId,
             },
             visible: true,
-            name: tile.name + ' Layer'
+            name: tile.name + ' Layer',
         };
         model.sharedModel.addSource(sourceId, sourceModel);
         model.addLayer(UUID.uuid4(), layerModel);
@@ -74,12 +74,12 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
         });
         return (React.createElement("div", { className: "jGIS-customlayer-form" },
             React.createElement(CreationFormWrapper, { model: model, formSchemaRegistry: formSchemaRegistry, createLayer: true, createSource: true, layerType: 'RasterLayer', sourceType: 'RasterSource', layerData: {
-                    name: 'Custom Raster'
+                    name: 'Custom Raster',
                 }, sourceData: {
                     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     maxZoom: 24,
                     minZoom: 0,
-                    attribution: '(C) OpenStreetMap contributors'
+                    attribution: '(C) OpenStreetMap contributors',
                 }, okSignalPromise: okSignalPromise, cancel: cancel })));
     }
     // Ok is like cancel in the case of gallery item selections

package/lib/dialogs/layerCreationFormDialog.d.ts

@@ -1,9 +1,9 @@
 import { IDict } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
-import * as React from 'react';
-import { ICreationFormProps } from '../formbuilder';
-import { Signal } from '@lumino/signaling';
 import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import * as React from 'react';
+import { ICreationFormProps } from "../formbuilder";
 export interface ICreationFormWrapperProps extends ICreationFormProps {
     /**
      * A promise resolving when the dialog is ready.
@@ -25,7 +25,7 @@ export interface ICreationFormWrapperProps extends ICreationFormProps {
 export interface ICreationFormDialogOptions extends ICreationFormProps {
     title: string;
 }
-export declare const CreationFormWrapper: (props: ICreationFormWrapperProps) => false | React.JSX.Element;
+export declare const CreationFormWrapper: React.FC<ICreationFormWrapperProps>;
 /**
  * Form for creating a source, a layer or both at the same time
  */

package/lib/dialogs/layerCreationFormDialog.js

@@ -1,16 +1,16 @@
 import { Dialog } from '@jupyterlab/apputils';
-import * as React from 'react';
-import { CreationForm } from '../formbuilder';
-import { Signal } from '@lumino/signaling';
 import { PromiseDelegate } from '@lumino/coreutils';
-export const CreationFormWrapper = (props) => {
+import { Signal } from '@lumino/signaling';
+import * as React from 'react';
+import { CreationForm } from "../formbuilder";
+export const CreationFormWrapper = props => {
     var _a;
     const [ready, setReady] = React.useState(false);
     const okSignal = React.useRef();
     const formErrorSignal = React.useRef();
     Promise.all([
         props.okSignalPromise.promise,
-        (_a = props.formErrorSignalPromise) === null || _a === void 0 ? void 0 : _a.promise
+        (_a = props.formErrorSignalPromise) === null || _a === void 0 ? void 0 : _a.promise,
     ]).then(([ok, formChanged]) => {
         okSignal.current = ok;
         formErrorSignal.current = formChanged;
@@ -33,7 +33,7 @@ export class LayerCreationFormDialog extends Dialog {
         super({
             title: options.title,
             body,
-            buttons: [Dialog.cancelButton(), Dialog.okButton()]
+            buttons: [Dialog.cancelButton(), Dialog.okButton()],
         });
         this.okSignal = new Signal(this);
         const formErrorSignal = new Signal(this);

package/lib/dialogs/symbology/components/color_ramp/CanvasSelectComponent.d.ts

@@ -7,5 +7,5 @@ interface ICanvasSelectComponentProps {
     selectedRamp: string;
     setSelected: (item: any) => void;
 }
-declare const CanvasSelectComponent: ({ selectedRamp, setSelected }: ICanvasSelectComponentProps) => React.JSX.Element;
+declare const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps>;
 export default CanvasSelectComponent;

package/lib/dialogs/symbology/components/color_ramp/CanvasSelectComponent.js

@@ -2,7 +2,7 @@ import { Button } from '@jupyterlab/ui-components';
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
 import ColorRampEntry from './ColorRampEntry';
-const CanvasSelectComponent = ({ selectedRamp, setSelected }) => {
+const CanvasSelectComponent = ({ selectedRamp, setSelected, }) => {
     const colorRampNames = [
         'jet',
         // 'hsv', 11 steps min
@@ -45,7 +45,7 @@ const CanvasSelectComponent = ({ selectedRamp, setSelected }) => {
         'temperature',
         'turbidity',
         'velocity-blue',
-        'velocity-green'
+        'velocity-green',
         // 'cubehelix' 16 steps min
     ];
     const containerRef = useRef(null);
@@ -57,7 +57,7 @@ const CanvasSelectComponent = ({ selectedRamp, setSelected }) => {
             const colorRamp = colormap({
                 colormap: name,
                 nshades: 255,
-                format: 'rgbaString'
+                format: 'rgbaString',
             });
             const colorMap = { name: name, colors: colorRamp };
             colorMapList.push(colorMap);

package/lib/dialogs/symbology/components/color_ramp/ColorRamp.d.ts

@@ -1,15 +1,16 @@
-import React from 'react';
 import { IDict } from '@jupytergis/schema';
+import React from 'react';
 interface IColorRampProps {
     modeOptions: string[];
     layerParams: IDict;
     classifyFunc: (selectedMode: string, numberOfShades: string, selectedRamp: string, setIsLoading: (isLoading: boolean) => void) => void;
     showModeRow: boolean;
+    showRampSelector: boolean;
 }
 export type ColorRampOptions = {
     selectedRamp: string;
     numberOfShades: string;
     selectedMode: string;
 };
-declare const ColorRamp: ({ layerParams, modeOptions, classifyFunc, showModeRow }: IColorRampProps) => React.JSX.Element;
+declare const ColorRamp: React.FC<IColorRampProps>;
 export default ColorRamp;

package/lib/dialogs/symbology/components/color_ramp/ColorRamp.js

@@ -1,17 +1,16 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
+import { LoadingIcon } from "../../../../shared/components/loading";
 import CanvasSelectComponent from './CanvasSelectComponent';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ModeSelectRow from './ModeSelectRow';
-const ColorRamp = ({ layerParams, modeOptions, classifyFunc, showModeRow }) => {
+const ColorRamp = ({ layerParams, modeOptions, classifyFunc, showModeRow, showRampSelector, }) => {
     const [selectedRamp, setSelectedRamp] = useState('');
     const [selectedMode, setSelectedMode] = useState('');
     const [numberOfShades, setNumberOfShades] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
         populateOptions();
-    }, []);
+    }, [layerParams]);
     const populateOptions = async () => {
         let nClasses, singleBandMode, colorRamp;
         if (layerParams.symbologyState) {
@@ -24,10 +23,10 @@ const ColorRamp = ({ layerParams, modeOptions, classifyFunc, showModeRow }) => {
         setSelectedRamp(colorRamp ? colorRamp : 'cool');
     };
     return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
-        React.createElement("div", { className: "jp-gis-symbology-row" },
+        showRampSelector && (React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp }))),
         showModeRow && (React.createElement(ModeSelectRow, { modeOptions: modeOptions, numberOfShades: numberOfShades, setNumberOfShades: setNumberOfShades, selectedMode: selectedMode, setSelectedMode: setSelectedMode })),
-        isLoading ? (React.createElement(FontAwesomeIcon, { icon: faSpinner, className: "jp-gis-loading-spinner" })) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, setIsLoading) }, "Classify"))));
+        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, setIsLoading) }, "Classify"))));
 };
 export default ColorRamp;

package/lib/dialogs/symbology/components/color_ramp/ColorRampEntry.d.ts

@@ -5,5 +5,5 @@ interface IColorRampEntryProps {
     colorMap: IColorMap;
     onClick: (item: any) => void;
 }
-declare const ColorRampEntry: ({ index, colorMap, onClick }: IColorRampEntryProps) => React.JSX.Element;
+declare const ColorRampEntry: React.FC<IColorRampEntryProps>;
 export default ColorRampEntry;

package/lib/dialogs/symbology/components/color_ramp/ColorRampEntry.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-const ColorRampEntry = ({ index, colorMap, onClick }) => {
+const ColorRampEntry = ({ index, colorMap, onClick, }) => {
     const canvasHeight = 30;
     useEffect(() => {
         const canvas = document.getElementById(`cv-${index}`);

package/lib/dialogs/symbology/components/color_ramp/ModeSelectRow.d.ts

@@ -6,5 +6,5 @@ interface IModeSelectRowProps {
     setSelectedMode: (value: string) => void;
     modeOptions: string[];
 }
-declare const ModeSelectRow: ({ numberOfShades, setNumberOfShades, selectedMode, setSelectedMode, modeOptions }: IModeSelectRowProps) => React.JSX.Element;
+declare const ModeSelectRow: React.FC<IModeSelectRowProps>;
 export default ModeSelectRow;

package/lib/dialogs/symbology/components/color_ramp/ModeSelectRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const ModeSelectRow = ({ numberOfShades, setNumberOfShades, selectedMode, setSelectedMode, modeOptions }) => {
+const ModeSelectRow = ({ numberOfShades, setNumberOfShades, selectedMode, setSelectedMode, modeOptions, }) => {
     return (React.createElement("div", { className: "jp-gis-symbology-row" },
         React.createElement("div", { className: "jp-gis-color-ramp-div" },
             React.createElement("label", { htmlFor: "class-number-input" }, "Classes:"),

package/lib/dialogs/symbology/components/color_stops/StopContainer.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IStopRow } from '../../symbologyDialog';
+import { IStopRow } from "../../symbologyDialog";
 interface IStopContainerProps {
     selectedMethod: string;
     stopRows: IStopRow[];
     setStopRows: (stops: IStopRow[]) => void;
 }
-declare const StopContainer: ({ selectedMethod, stopRows, setStopRows }: IStopContainerProps) => React.JSX.Element;
+declare const StopContainer: React.FC<IStopContainerProps>;
 export default StopContainer;

package/lib/dialogs/symbology/components/color_stops/StopContainer.js

@@ -1,14 +1,14 @@
-import React from 'react';
 import { Button } from '@jupyterlab/ui-components';
+import React from 'react';
 import StopRow from './StopRow';
-const StopContainer = ({ selectedMethod, stopRows, setStopRows }) => {
+const StopContainer = ({ selectedMethod, stopRows, setStopRows, }) => {
     const addStopRow = () => {
         setStopRows([
             {
                 stop: 0,
-                output: [0, 0, 0, 1]
+                output: [0, 0, 0, 1],
             },
-            ...stopRows
+            ...stopRows,
         ]);
     };
     const deleteStopRow = (index) => {

package/lib/dialogs/symbology/components/color_stops/StopRow.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IStopRow } from '../../symbologyDialog';
-declare const StopRow: ({ index, value, outputValue, stopRows, setStopRows, deleteRow, useNumber }: {
+import { IStopRow } from "../../symbologyDialog";
+declare const StopRow: React.FC<{
     index: number;
     value: number;
     outputValue: number | number[];
@@ -8,5 +8,5 @@ declare const StopRow: ({ index, value, outputValue, stopRows, setStopRows, dele
     setStopRows: (stopRows: IStopRow[]) => void;
     deleteRow: () => void;
     useNumber?: boolean;
-}) => React.JSX.Element;
+}>;
 export default StopRow;

package/lib/dialogs/symbology/components/color_stops/StopRow.js

@@ -2,7 +2,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
-const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow, useNumber }) => {
+const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow, useNumber, }) => {
     const inputRef = useRef(null);
     useEffect(() => {
         var _a;
@@ -32,7 +32,7 @@ const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow,
             parseInt(result[1], 16),
             parseInt(result[2], 16),
             parseInt(result[3], 16),
-            1 // TODO: Make alpha customizable?
+            1, // TODO: Make alpha customizable?
         ];
         return rgbValues;
     };

package/lib/dialogs/symbology/hooks/useGetBandInfo.js

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
 import { fromUrl, fromBlob } from 'geotiff';
-import { loadFile } from '../../../tools';
+import { useEffect, useState } from 'react';
+import { loadFile } from "../../../tools";
 const useGetBandInfo = (model, layer) => {
     const [bandRows, setBandRows] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -29,7 +29,7 @@ const useGetBandInfo = (model, layer) => {
                 const preloadedFile = await loadFile({
                     filepath: sourceInfo.url,
                     type: 'GeoTiffSource',
-                    model
+                    model,
                 });
                 if (!preloadedFile.file) {
                     setError('Failed to load local file.');
@@ -45,8 +45,8 @@ const useGetBandInfo = (model, layer) => {
                     band: i,
                     stats: {
                         minimum: (_c = sourceInfo.min) !== null && _c !== void 0 ? _c : 0,
-                        maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100
-                    }
+                        maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100,
+                    },
                 });
             }
             setBandRows(bandsArr);

package/lib/dialogs/symbology/hooks/useGetProperties.d.ts

@@ -8,5 +8,5 @@ interface IUseGetPropertiesResult {
     isLoading: boolean;
     error?: Error;
 }
-export declare const useGetProperties: ({ layerId, model }: IUseGetPropertiesProps) => IUseGetPropertiesResult;
+export declare const useGetProperties: ({ layerId, model, }: IUseGetPropertiesProps) => IUseGetPropertiesResult;
 export {};

package/lib/dialogs/symbology/hooks/useGetProperties.js

@@ -1,10 +1,10 @@
 // import { GeoJSONFeature } from 'geojson';
 import { useEffect, useState } from 'react';
-import { loadFile } from '../../../tools';
-export const useGetProperties = ({ layerId, model }) => {
+import { loadFile } from "../../../tools";
+export const useGetProperties = ({ layerId, model, }) => {
     const [featureProperties, setFeatureProperties] = useState({});
     const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(undefined);
+    const [error, setError] = useState();
     const getProperties = async () => {
         var _a, _b;
         if (!layerId) {
@@ -19,7 +19,7 @@ export const useGetProperties = ({ layerId, model }) => {
             const data = await loadFile({
                 filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
                 type: 'GeoJSONSource',
-                model: model
+                model: model,
             });
             if (!data) {
                 throw new Error('Failed to read GeoJSON data');