@jupytergis/base 0.3.0 → 0.4.0

package/lib/formbuilder/objectform/vectorlayerform.js

@@ -1,4 +1,3 @@
-import { getSourceLayerNames } from '../../tools';
 import { LayerPropertiesForm } from './layerform';
 /**
  * The form to modify a vector layer.
@@ -6,29 +5,6 @@ import { LayerPropertiesForm } from './layerform';
 export class VectorLayerPropertiesForm extends LayerPropertiesForm {
     constructor(props) {
         super(props);
-        this.sourceLayers = [];
-        this.fetchSourceLayers(this.props.sourceData);
-        // If there is a source form attached, we listen to its changes
-        if (this.sourceFormChangedSignal) {
-            this.sourceFormChangedSignal.connect((sender, sourceData) => {
-                if (this.props.sourceType === 'VectorTileSource') {
-                    this.fetchSourceLayers(this.currentFormData, sourceData);
-                }
-            });
-        }
-        props.model.clientStateChanged.connect(() => {
-            var _a;
-            if (!((_a = props.model.localState) === null || _a === void 0 ? void 0 : _a.selected.value)) {
-                return;
-            }
-            const l = this.props.model.getLayer(Object.keys(props.model.localState.selected.value)[0]);
-            const source = this.props.model.getSource(l === null || l === void 0 ? void 0 : l.parameters.source);
-            if (!source || source.type !== 'VectorTileSource') {
-                return;
-            }
-            const sourceData = source.parameters;
-            this.fetchSourceLayers(this.currentFormData, sourceData);
-        });
     }
     onFormChange(e) {
         super.onFormChange(e);
@@ -40,7 +16,6 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
         if (!source || source.type !== 'VectorTileSource') {
             return;
         }
-        this.fetchSourceLayers(this.currentFormData, source.parameters);
     }
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
@@ -49,39 +24,5 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
         if (!data) {
             return;
         }
-        // Show a dropdown for available sourceLayers if available
-        // And automatically select one
-        if (this.sourceLayers.length !== 0) {
-            if (!data.sourceLayer || !this.sourceLayers.includes(data.sourceLayer)) {
-                data.sourceLayer = this.sourceLayers[0];
-            }
-            schema.properties.sourceLayer.enum = this.sourceLayers;
-        }
-    }
-    async fetchSourceLayers(data, sourceData) {
-        if (data && data.source) {
-            this.currentSourceId = data.source;
-            if (!sourceData) {
-                const currentSource = this.props.model.getSource(data.source);
-                if (!currentSource || currentSource.type !== 'VectorTileSource') {
-                    this.sourceLayers = [];
-                    this.forceUpdate();
-                    return;
-                }
-                sourceData = currentSource.parameters;
-            }
-            try {
-                this.sourceLayers = await getSourceLayerNames(sourceData.url, sourceData.urlParameters);
-                this.forceUpdate();
-            }
-            catch (e) {
-                console.error(e);
-            }
-        }
-        else {
-            this.currentSourceId = '';
-            this.sourceLayers = [];
-            this.forceUpdate();
-        }
     }
 }

package/lib/mainview/TemporalSlider.d.ts

@@ -0,0 +1,8 @@
+import { IDict, IJGISFilterItem, IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface ITemporalSliderProps {
+    model: IJupyterGISModel;
+    filterStates: IDict<IJGISFilterItem | undefined>;
+}
+declare const TemporalSlider: ({ model, filterStates }: ITemporalSliderProps) => React.JSX.Element;
+export default TemporalSlider;

package/lib/mainview/TemporalSlider.js

@@ -0,0 +1,303 @@
+import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Slider } from '@jupyter/react-components';
+import { format, isValid, parse } from 'date-fns';
+import { daysInYear, millisecondsInDay, millisecondsInHour, millisecondsInMinute, millisecondsInSecond, millisecondsInWeek, minutesInMonth } from 'date-fns/constants';
+import React, { useEffect, useRef, useState } from 'react';
+import { useGetProperties } from '../dialogs/symbology/hooks/useGetProperties';
+// List of common date formats to try
+// TODO: Not even close to every valid format
+const commonDateFormats = [
+    'yyyy-MM-dd', // ISO format (e.g., 2023-10-05)
+    'dd/MM/yyyy', // European format (e.g., 05/10/2023)
+    'MM/dd/yyyy', // US format (e.g., 10/05/2023)
+    'yyyyMMdd', // Compact format (e.g., 20231005)
+    'dd-MM-yyyy', // European format with hyphens (e.g., 05-10-2023)
+    'MM-dd-yyyy', // US format with hyphens (e.g., 10-05-2023)
+    'yyyy/MM/dd', // ISO format with slashes (e.g., 2023/10/05)
+    'dd.MM.yyyy', // European format with dots (e.g., 05.10.2023)
+    'MM.dd.yyyy' // US format with dots (e.g., 10.05.2023)
+];
+// Time steps in milliseconds
+const stepMap = {
+    millisecond: 1,
+    second: millisecondsInSecond,
+    minute: millisecondsInMinute,
+    hour: millisecondsInHour,
+    day: millisecondsInDay,
+    week: millisecondsInWeek,
+    month: minutesInMonth * millisecondsInMinute,
+    year: millisecondsInDay * daysInYear
+};
+const TemporalSlider = ({ model, filterStates }) => {
+    const [layerId, setLayerId] = useState('');
+    const [selectedFeature, setSelectedFeature] = useState('');
+    const [range, setRange] = useState({ start: 0, end: 1 }); // min/max of current range being displayed
+    const [minMax, setMinMax] = useState({ min: 0, max: 1 }); // min/max of data values
+    const [validFeatures, setValidFeatures] = useState([]);
+    const [dateFormat, setDateFormat] = useState('yyyy-MM-dd');
+    const [step, setStep] = useState(stepMap.year);
+    const [currentValue, setCurrentValue] = useState(0);
+    const [fps, setFps] = useState(1);
+    const [validSteps, setValidSteps] = useState({});
+    const layerIdRef = useRef('');
+    const intervalRef = useRef(null);
+    const { featureProperties } = useGetProperties({ layerId, model });
+    useEffect(() => {
+        // This is for when the selected layer changes
+        const handleClientStateChanged = () => {
+            var _a, _b;
+            if (!((_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
+                return;
+            }
+            const selectedLayerId = Object.keys(model.localState.selected.value)[0];
+            // reset
+            if (selectedLayerId !== layerIdRef.current) {
+                setLayerId(selectedLayerId);
+                setDateFormat('yyyy-MM-dd');
+                setFps(1);
+            }
+        };
+        // this is for when the layer itself changes
+        const handleLayerChange = (_, change) => {
+            var _a;
+            // Get the changes for the selected layer
+            const selectedLayer = (_a = change.layerChange) === null || _a === void 0 ? void 0 : _a.find(layer => layer.id === layerIdRef.current);
+            // Bail if there's no relevant change
+            if (!(selectedLayer === null || selectedLayer === void 0 ? void 0 : selectedLayer.newValue)) {
+                return;
+            }
+            const { newValue, oldValue } = selectedLayer;
+            // If layer was deleted (empty object) or the layer type changed, close the temporal controller
+            if (Object.keys(newValue).length === 0 ||
+                newValue.type !== oldValue.type) {
+                model.toggleTemporalController();
+            }
+        };
+        // Initial state
+        handleClientStateChanged();
+        model.clientStateChanged.connect(handleClientStateChanged);
+        model.sharedLayersChanged.connect(handleLayerChange);
+        return () => {
+            model.clientStateChanged.disconnect(handleClientStateChanged);
+            model.sharedLayersChanged.disconnect(handleLayerChange);
+            removeFilter();
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        layerIdRef.current = layerId;
+    }, [layerId]);
+    useEffect(() => {
+        const results = [];
+        for (const [key, set] of Object.entries(featureProperties)) {
+            if (set.size === 0) {
+                continue;
+            }
+            const sampleValue = set.values().next().value;
+            // Validate value type
+            const isString = typeof sampleValue === 'string';
+            const isInteger = Number.isInteger(sampleValue);
+            if (!isString && !isInteger) {
+                continue;
+            }
+            // Date validation
+            if (isString) {
+                const dateFormatFromString = determineDateFormat(sampleValue);
+                if (!dateFormatFromString) {
+                    continue;
+                }
+                setDateFormat(dateFormatFromString);
+            }
+            results.push(key);
+        }
+        // if we have state then remove the ms from the converted feature name
+        const currentState = filterStates[layerId];
+        const currentFeature = currentState === null || currentState === void 0 ? void 0 : currentState.feature.slice(0, -2);
+        setValidFeatures(results);
+        setSelectedFeature(currentFeature !== null && currentFeature !== void 0 ? currentFeature : results[0]);
+    }, [featureProperties]);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (!selectedFeature || !featureProperties[selectedFeature]) {
+            return;
+        }
+        // Get and validate values
+        const valueSet = featureProperties[selectedFeature];
+        if (valueSet.size === 0) {
+            return;
+        }
+        const values = Array.from(valueSet);
+        const [firstValue] = values;
+        // Check the type of the first element
+        const isString = typeof firstValue === 'string';
+        let convertedValues;
+        if (isString) {
+            convertedValues = values.map(value => Date.parse(value)); // Convert all strings to milliseconds
+        }
+        else {
+            convertedValues = values; // Keep numbers as they are
+        }
+        // Calculate min and max
+        const min = Math.min(...convertedValues);
+        const max = Math.max(...convertedValues);
+        // Get valid step options
+        const filteredSteps = Object.fromEntries(Object.entries(stepMap).filter(([_, val]) => val < max - min));
+        //using filter item as a state object to restore prev values
+        const currentState = filterStates[layerId];
+        const step = (_a = Object.values(filteredSteps).slice(-1)[0]) !== null && _a !== void 0 ? _a : stepMap.millisecond;
+        setValidSteps(filteredSteps);
+        setStep(step);
+        setMinMax({ min, max });
+        setRange({
+            start: (_b = currentState === null || currentState === void 0 ? void 0 : currentState.betweenMin) !== null && _b !== void 0 ? _b : min,
+            end: (_c = currentState === null || currentState === void 0 ? void 0 : currentState.betweenMax) !== null && _c !== void 0 ? _c : min + step
+        });
+        model.addFeatureAsMs(layerId, selectedFeature);
+    }, [selectedFeature]);
+    // minMax needs to be set before current value so the slider displays correctly
+    useEffect(() => {
+        const currentState = filterStates[layerId];
+        setCurrentValue(typeof (currentState === null || currentState === void 0 ? void 0 : currentState.value) === 'number' ? currentState.value : minMax.min);
+    }, [minMax]);
+    // Guess the date format from a date string
+    const determineDateFormat = (dateString) => {
+        for (const format of commonDateFormats) {
+            const parsedDate = parse(dateString, format, new Date());
+            if (isValid(parsedDate)) {
+                return format; // Return the format if the date is valid
+            }
+        }
+        return null; // Return null if no format matches
+    };
+    // Convert milliseconds back to the original date string format
+    const millisecondsToDateString = (milliseconds, dateFormat) => {
+        const date = new Date(milliseconds); // Create a Date object from milliseconds
+        return format(date, dateFormat); // Format back to the original string format
+    };
+    const handleChange = (e) => {
+        setCurrentValue(+e.target.value);
+        setRange({ start: +e.target.value, end: +e.target.value + step });
+        applyFilter(+e.target.value);
+    };
+    const applyFilter = (value) => {
+        var _a, _b;
+        const newFilter = {
+            feature: `${selectedFeature}ms`,
+            operator: 'between',
+            value: value,
+            betweenMin: value,
+            betweenMax: value + step
+        };
+        const layer = model.getLayer(layerId);
+        if (!layer) {
+            return;
+        }
+        const appliedFilters = ((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.appliedFilters) || [];
+        const logicalOp = ((_b = layer.filters) === null || _b === void 0 ? void 0 : _b.logicalOp) || 'all';
+        // This is the only way to add a 'between' filter so
+        // find the index of the existing 'between' filter
+        const betweenFilterIndex = appliedFilters.findIndex(filter => filter.operator === 'between');
+        if (betweenFilterIndex !== -1) {
+            // If found, replace the existing filter
+            appliedFilters[betweenFilterIndex] = Object.assign({}, newFilter);
+        }
+        else {
+            // If not found, add the new filter
+            appliedFilters.push(newFilter);
+        }
+        // Apply the updated filters to the layer
+        layer.filters = { logicalOp, appliedFilters };
+        model.triggerLayerUpdate(layerId, layer);
+    };
+    const removeFilter = () => {
+        var _a, _b;
+        const layer = model.getLayer(layerIdRef.current);
+        if (!layer) {
+            return;
+        }
+        const appliedFilters = ((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.appliedFilters) || [];
+        const logicalOp = ((_b = layer.filters) === null || _b === void 0 ? void 0 : _b.logicalOp) || 'all';
+        // This is the only way to add a 'between' filter so
+        // find the index of the existing 'between' filter
+        const betweenFilterIndex = appliedFilters.findIndex(filter => filter.operator === 'between');
+        if (betweenFilterIndex !== -1) {
+            // If found, replace the existing filter
+            appliedFilters.splice(betweenFilterIndex, 1);
+        }
+        // Apply the updated filters to the layer
+        layer.filters = { logicalOp, appliedFilters };
+        model.triggerLayerUpdate(layerIdRef.current, layer);
+    };
+    const playAnimation = () => {
+        // Clear any existing interval first
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+        const incrementValue = () => {
+            setCurrentValue(prev => {
+                // Calculate next value with safety bounds
+                const nextValue = prev + step;
+                // Clear interval if we've reached the max
+                // step is subtracted to keep range values correct
+                if (nextValue >= minMax.max - step && intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                    return minMax.max - step;
+                }
+                return nextValue;
+            });
+        };
+        // Start animation
+        intervalRef.current = setInterval(incrementValue, 1000 / fps);
+    };
+    const pauseAnimation = () => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+    };
+    return (React.createElement("div", { className: "jp-gis-temporal-slider-container" },
+        React.createElement("div", { className: "jp-gis-temporal-slider-row" },
+            React.createElement("div", null,
+                React.createElement("label", { htmlFor: "time-feature-select" }, "Feature: "),
+                React.createElement("select", { id: "time-feature-select", onChange: e => {
+                        setSelectedFeature(e.target.value);
+                    } }, validFeatures.map(feature => {
+                    return (React.createElement("option", { value: feature, selected: selectedFeature === feature }, feature));
+                }))),
+            React.createElement("div", null,
+                React.createElement("span", null, "Current Frame:"),
+                ' ',
+                millisecondsToDateString(range.start, dateFormat),
+                " \u2264 ",
+                React.createElement("span", null, "t"),
+                " \u2264",
+                ' ',
+                millisecondsToDateString(range.end, dateFormat))),
+        React.createElement("div", { className: "jp-gis-temporal-slider-row" },
+            React.createElement("div", { className: "jp-gis-temporal-slider-controls" },
+                React.createElement("div", { className: "jp-gis-temporal-slider-sub-controls" },
+                    React.createElement(Button, { appearance: "neutral", scale: "medium", onClick: pauseAnimation },
+                        React.createElement(FontAwesomeIcon, { icon: faPause })),
+                    React.createElement(Button, { appearance: "neutral", scale: "medium", onClick: playAnimation },
+                        React.createElement(FontAwesomeIcon, { icon: faPlay }))),
+                React.createElement("div", { className: "jp-gis-temporal-slider-sub-controls", style: { minWidth: 0 } },
+                    React.createElement("label", { htmlFor: "fps-number-input" }, "FPS:"),
+                    React.createElement("input", { name: "fps-number-input", type: "number", value: fps, onChange: e => setFps(+e.target.value) }))),
+            React.createElement("div", null,
+                React.createElement(Slider, { min: minMax.min, max: minMax.max - step, value: currentValue, valueAsNumber: currentValue, step: step, onChange: handleChange, className: "jp-gis-temporal-slider" }))),
+        React.createElement("div", { className: "jp-gis-temporal-slider-row" },
+            React.createElement("div", null,
+                React.createElement("span", null, "Range: "),
+                millisecondsToDateString(minMax.min, dateFormat),
+                " ",
+                React.createElement("span", null, "to "),
+                millisecondsToDateString(minMax.max, dateFormat)),
+            React.createElement("div", null,
+                React.createElement("label", { htmlFor: "time-step-select" }, "Step: "),
+                React.createElement("select", { id: "time-step-select", onChange: e => {
+                        setStep(+e.target.value);
+                    } }, Object.entries(validSteps).map(([key, val]) => (React.createElement("option", { key: key, selected: val === step, value: val }, key))))))));
+};
+export default TemporalSlider;

package/lib/mainview/mainView.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotation, IDict, IJGISLayer, IJGISSource } from '@jupytergis/schema';
+import { IAnnotation, IDict, IJGISFilterItem, IJGISLayer, IJGISSource } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
 import { Layer } from 'ol/layer';
 import * as React from 'react';
@@ -21,6 +21,13 @@ interface IStates {
     };
     loadingLayer: boolean;
     scale: number;
+    loadingErrors: Array<{
+        id: string;
+        error: any;
+        index: number;
+    }>;
+    displayTemporalController: boolean;
+    filterStates: IDict<IJGISFilterItem | undefined>;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
     constructor(props: IProps);
@@ -29,7 +36,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     generateScene(): Promise<void>;
     createSelectInteraction: () => void;
     addContextMenu: () => void;
-    private _loadGeoTIFFWithCache;
     /**
      * Add a source in the map.
      *
@@ -97,7 +103,13 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param id - id of the layer.
      * @param layer - the layer object.
      */
-    updateLayer(id: string, layer: IJGISLayer, mapLayer: Layer): Promise<void>;
+    updateLayer(id: string, layer: IJGISLayer, mapLayer: Layer, oldLayer?: IDict): Promise<void>;
+    /**
+     * Heatmap layers don't work with style based filtering.
+     * This modifies the features in the underlying source
+     * to work with the temporal controller
+     */
+    handleTemporalController: (id: string, layer: IJGISLayer) => void;
     /**
      * Wait for all layers to be loaded.
      */
@@ -138,6 +150,12 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param index - expected index of the layer.
      */
     moveLayer(id: string, index: number): void;
+    /**
+     * Remove and recreate layer
+     * @param id ID of layer being replaced
+     * @param layer New layer to replace with
+     */
+    replaceLayer(id: string, layer: IJGISLayer): void;
     private _onLayersChanged;
     private _onLayerTreeChange;
     private _onSourcesChange;
@@ -150,12 +168,14 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _onPointerMove;
     private _syncPointer;
     private _identifyFeature;
+    private _triggerLayerUpdate;
+    private _convertFeatureToMs;
     private _handleThemeChange;
     private _handleWindowResize;
     render(): JSX.Element;
     private _clickCoords;
     private _commands;
-    private _initializedPosition;
+    private _isPositionInitialized;
     private divRef;
     private _Map;
     private _model;
@@ -166,5 +186,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _documentPath?;
     private _contextMenu;
     private _loadingLayers;
+    private _originalFeatures;
 }
 export {};