@jupytergis/base 0.2.1 → 0.4.0

package/lib/formbuilder/objectform/pathbasedsource.js

@@ -0,0 +1,98 @@
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { BaseForm } from './baseform';
+import { loadFile } from '../../tools';
+import { FileSelectorWidget } from './fileselectorwidget';
+/**
+ * The form to modify a PathBasedSource source.
+ */
+export class PathBasedSourcePropertiesForm extends BaseForm {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        if (this.props.sourceType !== 'GeoJSONSource') {
+            this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
+        }
+    }
+    processSchema(data, schema, uiSchema) {
+        var _a;
+        super.processSchema(data, schema, uiSchema);
+        if (!schema.properties || !data) {
+            return;
+        }
+        // Customize the widget for path field
+        if (schema.properties && schema.properties.path) {
+            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
+            uiSchema.path = {
+                'ui:widget': FileSelectorWidget,
+                'ui:options': {
+                    docManager,
+                    formOptions: this.props
+                }
+            };
+        }
+        // This is not user-editable
+        delete schema.properties.valid;
+    }
+    onFormBlur(id, value) {
+        // Is there a better way to spot the path text entry?
+        if (!id.endsWith('_path')) {
+            return;
+        }
+        this._validatePath(value);
+    }
+    // we need to use `onFormChange` instead of `onFormBlur` because it's no longer a text field
+    onFormChange(e) {
+        var _a;
+        super.onFormChange(e);
+        if (((_a = e.formData) === null || _a === void 0 ? void 0 : _a.path) !== undefined) {
+            this._validatePath(e.formData.path);
+        }
+    }
+    onFormSubmit(e) {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
+            showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
+            return;
+        }
+        super.onFormSubmit(e);
+    }
+    /**
+     * Validate the path, to avoid invalid path.
+     *
+     * @param path - the path to validate.
+     */
+    async _validatePath(path) {
+        const extraErrors = this.state.extraErrors;
+        let error = '';
+        let valid = true;
+        if (!path) {
+            valid = false;
+            error = 'Path is required';
+        }
+        else {
+            try {
+                await loadFile({
+                    filepath: path,
+                    type: this.props.sourceType,
+                    model: this.props.model
+                });
+            }
+            catch (e) {
+                valid = false;
+                error = `"${path}" is not a valid ${this.props.sourceType} file.`;
+            }
+        }
+        if (!valid) {
+            extraErrors.path = {
+                __errors: [error]
+            };
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors })));
+        }
+        else {
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { path: { __errors: [] } }) })));
+        }
+        if (this.props.formErrorSignal) {
+            this.props.formErrorSignal.emit(!valid);
+        }
+    }
+}

package/lib/formbuilder/objectform/vectorlayerform.d.ts

@@ -6,10 +6,8 @@ import { ILayerProps, LayerPropertiesForm } from './layerform';
  */
 export declare class VectorLayerPropertiesForm extends LayerPropertiesForm {
     protected currentFormData: IVectorLayer;
-    private sourceLayers;
     private currentSourceId;
     constructor(props: ILayerProps);
     protected onFormChange(e: IChangeEvent): void;
     protected processSchema(data: IVectorLayer | undefined, schema: IDict, uiSchema: IDict): void;
-    private fetchSourceLayers;
 }

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/icons.d.ts

@@ -7,3 +7,4 @@ export declare const visibilityIcon: LabIcon;
 export declare const nonVisibilityIcon: LabIcon;
 export declare const geoJSONIcon: LabIcon;
 export declare const moundIcon: LabIcon;
+export declare const logoMiniIconQGZ: LabIcon;

package/lib/icons.js

@@ -12,6 +12,7 @@ import visibilitySvgStr from '../style/icons/visibility.svg';
 import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import moundSvgStr from '../style/icons/mound.svg';
+import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
 export const logoIcon = new LabIcon({
     name: 'jupytergis::logo',
     svgstr: logoSvgStr
@@ -44,3 +45,7 @@ export const moundIcon = new LabIcon({
     name: 'jupytergis::mound',
     svgstr: moundSvgStr
 });
+export const logoMiniIconQGZ = new LabIcon({
+    name: 'jupytergis::logoQGZ',
+    svgstr: logoMiniQGZ
+});

package/lib/keybindings.json

@@ -0,0 +1,62 @@
+[
+    {
+        "command": "jupytergis:undo",
+        "keys": ["Accel Z"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:redo",
+        "keys": ["Accel Shift Z"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:identify",
+        "keys": ["Escape"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:removeSource",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-source.jp-gis-sourceUnused"
+    },
+    {
+        "command": "jupytergis:renameSource",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-source"
+    },
+    {
+        "command": "jupytergis:removeLayer",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    },
+    {
+        "command": "jupytergis:renameLayer",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    },
+    {
+        "command": "jupytergis:removeGroup",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    },
+    {
+        "command": "jupytergis:renameGroup",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    },
+    {
+        "command": "jupytergis:executeConsole",
+        "keys": ["Shift Enter"],
+        "selector": ".jpgis-console .jp-CodeConsole[data-jp-interaction-mode='notebook'] .jp-CodeConsole-promptCell"
+    },
+    {
+        "command": "jupytergis:invokeConsoleCompleter",
+        "keys": ["Tab"],
+        "selector": ".jpgis-console .jp-CodeConsole-promptCell .jp-mod-completer-enabled"
+    },
+    {
+        "command": "jupytergis:selectConsoleCompleter",
+        "keys": ["Enter"],
+        "selector": ".jpgis-console .jp-ConsolePanel .jp-mod-completer-active"
+    }
+]

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;