@jupytergis/base 0.1.1

package/lib/mainview/mainviewmodel.d.ts

@@ -0,0 +1,24 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { ObservableMap } from '@jupyterlab/observables';
+import { JSONValue } from '@lumino/coreutils';
+import { IDisposable } from '@lumino/disposable';
+export declare class MainViewModel implements IDisposable {
+    constructor(options: MainViewModel.IOptions);
+    get isDisposed(): boolean;
+    get id(): string;
+    get jGISModel(): IJupyterGISModel;
+    get viewSettingChanged(): import("@lumino/signaling").ISignal<ObservableMap<JSONValue>, import("@jupyterlab/observables").IObservableMap.IChangedArgs<JSONValue>>;
+    dispose(): void;
+    initSignal(): void;
+    private _onsharedLayersChanged;
+    private _jGISModel;
+    private _viewSetting;
+    private _id;
+    private _isDisposed;
+}
+export declare namespace MainViewModel {
+    interface IOptions {
+        jGISModel: IJupyterGISModel;
+        viewSetting: ObservableMap<JSONValue>;
+    }
+}

package/lib/mainview/mainviewmodel.js

@@ -0,0 +1,34 @@
+export class MainViewModel {
+    constructor(options) {
+        this._isDisposed = false;
+        this._jGISModel = options.jGISModel;
+        this._viewSetting = options.viewSetting;
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    get id() {
+        return this._id;
+    }
+    get jGISModel() {
+        return this._jGISModel;
+    }
+    get viewSettingChanged() {
+        return this._viewSetting.changed;
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._jGISModel.sharedLayersChanged.disconnect(this._onsharedLayersChanged, this);
+        this._isDisposed = true;
+    }
+    initSignal() {
+        this._jGISModel.sharedLayersChanged.connect(this._onsharedLayersChanged, this);
+    }
+    async _onsharedLayersChanged(_, change) {
+        if (change.layerChange) {
+            // TODO STUFF with the new updated shared model
+        }
+    }
+}

package/lib/mainview/mainviewwidget.d.ts

@@ -0,0 +1,14 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import { MainViewModel } from './mainviewmodel';
+export declare class JupyterGISMainViewPanel extends ReactWidget {
+    /**
+     * Construct a `JupyterGISPanel`.
+     *
+     * @param context - The documents context.
+     */
+    constructor(options: {
+        mainViewModel: MainViewModel;
+    });
+    render(): JSX.Element;
+    private _mainViewModel;
+}

package/lib/mainview/mainviewwidget.js

@@ -0,0 +1,18 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import * as React from 'react';
+import { MainView } from './mainView';
+export class JupyterGISMainViewPanel extends ReactWidget {
+    /**
+     * Construct a `JupyterGISPanel`.
+     *
+     * @param context - The documents context.
+     */
+    constructor(options) {
+        super();
+        this._mainViewModel = options.mainViewModel;
+        this.addClass('jp-jupytergis-panel');
+    }
+    render() {
+        return React.createElement(MainView, { viewModel: this._mainViewModel });
+    }
+}

package/lib/mainview/spinner.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface IProps {
+    loading: boolean;
+}
+export declare function Spinner(props: IProps): React.JSX.Element;
+export {};

package/lib/mainview/spinner.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export function Spinner(props) {
+    return (React.createElement("div", { className: 'jGIS-Spinner', style: { display: props.loading ? 'flex' : 'none' } },
+        React.createElement("div", { className: 'jGIS-SpinnerContent' })));
+}

package/lib/panelview/components/filter-panel/Filter.d.ts

@@ -0,0 +1,19 @@
+import { IJupyterGISTracker } from '@jupytergis/schema';
+import { Panel } from '@lumino/widgets';
+import React from 'react';
+import { IControlPanelModel } from '../../../types';
+import { RightPanelWidget } from '../../rightpanel';
+/**
+ * The filters panel widget.
+ */
+export declare class FilterPanel extends Panel {
+    constructor(options: RightPanelWidget.IOptions);
+    private _model;
+    private _tracker;
+}
+interface IFilterComponentProps {
+    model: IControlPanelModel;
+    tracker: IJupyterGISTracker;
+}
+declare const FilterComponent: (props: IFilterComponentProps) => React.JSX.Element;
+export default FilterComponent;

package/lib/panelview/components/filter-panel/Filter.js

@@ -0,0 +1,223 @@
+import { Button, ReactWidget } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import { cloneDeep } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import { debounce, getLayerTileInfo } from '../../../tools';
+import FilterRow from './FilterRow';
+/**
+ * The filters panel widget.
+ */
+export class FilterPanel extends Panel {
+    constructor(options) {
+        super();
+        this._model = options.model;
+        this._tracker = options.tracker;
+        this.id = 'jupytergis::layerTree';
+        // this.addClass(LAYERS_PANEL_CLASS);
+        this.addWidget(ReactWidget.create(React.createElement(FilterComponent, { model: this._model, tracker: this._tracker })));
+    }
+}
+const FilterComponent = (props) => {
+    var _a;
+    const featuresInLayerRef = useRef({});
+    const [widgetId, setWidgetId] = useState('');
+    const [logicalOp, setLogicalOp] = useState('all');
+    const [selectedLayer, setSelectedLayer] = useState('');
+    const [shouldDisplay, setShouldDisplay] = useState(false);
+    const [filterRows, setFilterRows] = useState([]);
+    const [featuresInLayer, setFeaturesInLayer] = useState({});
+    const [model, setModel] = useState(props.model.jGISModel);
+    (_a = props.model) === null || _a === void 0 ? void 0 : _a.documentChanged.connect((_, widget) => {
+        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+    });
+    // Reset state values when current widget changes
+    useEffect(() => {
+        const handleCurrentChanged = () => {
+            var _a;
+            if (((_a = props.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.id) === widgetId) {
+                return;
+            }
+            if (props.tracker.currentWidget) {
+                setWidgetId(props.tracker.currentWidget.id);
+            }
+            setFeaturesInLayer({});
+            setFilterRows([]);
+            setLogicalOp('all');
+            setSelectedLayer('');
+        };
+        props.tracker.currentChanged.connect(handleCurrentChanged);
+        return () => {
+            props.tracker.currentChanged.disconnect(handleCurrentChanged);
+        };
+    }, []);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        // Keep layer selected when widget changes
+        if ((_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value) {
+            setSelectedLayer(Object.keys((_d = (_c = model === null || model === void 0 ? void 0 : model.localState) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.value)[0]);
+        }
+    }, [widgetId]);
+    useEffect(() => {
+        const handleClientStateChanged = () => {
+            var _a, _b, _c, _d;
+            if (!((_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
+                return;
+            }
+            // TODO: handle multi select better
+            const currentLayer = Object.keys((_d = (_c = model === null || model === void 0 ? void 0 : model.localState) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.value)[0];
+            setSelectedLayer(currentLayer);
+        };
+        const handleSharedOptionsChanged = (_, keys) => {
+            var _a, _b, _c, _d, _e;
+            // model changes when current widget changes, don't want this to run in that case
+            if (((_a = props.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.id) === widgetId && keys.has('zoom')) {
+                if (!((_c = (_b = model === null || model === void 0 ? void 0 : model.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value)) {
+                    return;
+                }
+                const currentLayer = Object.keys((_e = (_d = model === null || model === void 0 ? void 0 : model.localState) === null || _d === void 0 ? void 0 : _d.selected) === null || _e === void 0 ? void 0 : _e.value)[0];
+                // TODO: Probably want to debounce/throttle here
+                buildFilterDebounce(currentLayer);
+            }
+        };
+        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(handleClientStateChanged);
+        // Want to rebuild filter object when zoom changes to get values for that zoom level
+        // This is because the filtering inputs may depend on the currently visible features
+        model === null || model === void 0 ? void 0 : model.sharedOptionsChanged.connect(handleSharedOptionsChanged);
+        return () => {
+            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(handleClientStateChanged);
+            model === null || model === void 0 ? void 0 : model.sharedOptionsChanged.disconnect(handleSharedOptionsChanged);
+        };
+    }, [model]);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        // Reset filter stuff for new layer
+        setFeaturesInLayer({});
+        const layer = model === null || model === void 0 ? void 0 : model.getLayer(selectedLayer);
+        if (!layer || layer.type !== 'VectorLayer') {
+            setShouldDisplay(false);
+            return;
+        }
+        setShouldDisplay(true);
+        // Add existing filters to filterRows
+        setFilterRows((_b = (_a = layer.filters) === null || _a === void 0 ? void 0 : _a.appliedFilters) !== null && _b !== void 0 ? _b : []);
+        setLogicalOp((_d = (_c = layer.filters) === null || _c === void 0 ? void 0 : _c.logicalOp) !== null && _d !== void 0 ? _d : 'all');
+        buildFilterObject();
+    }, [selectedLayer]);
+    useEffect(() => {
+        featuresInLayerRef.current = featuresInLayer;
+    }, [featuresInLayer]);
+    const buildFilterObject = async (currentLayer) => {
+        var _a, _b, _c, _d;
+        if (!model) {
+            return;
+        }
+        const layer = model.getLayer(currentLayer !== null && currentLayer !== void 0 ? currentLayer : selectedLayer);
+        const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
+        const { latitude, longitude, extent, zoom } = model.getOptions();
+        if (!source || !layer) {
+            return;
+        }
+        const aggregatedProperties = cloneDeep(featuresInLayerRef.current);
+        // When we open a map, the filter object is empty.
+        // We want to populate it with the values from the
+        // selected layers filter so they show up  on the panel
+        if (layer.filters) {
+            layer.filters.appliedFilters.map(filterItem => {
+                if (!(filterItem.feature in aggregatedProperties)) {
+                    aggregatedProperties[filterItem.feature] = new Set();
+                }
+                aggregatedProperties[filterItem.feature].add(filterItem.value);
+            });
+        }
+        switch (source.type) {
+            case 'VectorTileSource': {
+                try {
+                    const tile = await getLayerTileInfo((_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.url, {
+                        latitude,
+                        longitude,
+                        extent,
+                        zoom
+                    });
+                    const layerValue = tile.layers[(_c = layer.parameters) === null || _c === void 0 ? void 0 : _c.sourceLayer];
+                    for (let i = 0; i < layerValue.length; i++) {
+                        const feature = layerValue.feature(i);
+                        addFeatureValue(feature.properties, aggregatedProperties);
+                    }
+                }
+                catch (error) {
+                    console.warn(`Error fetching tile info: ${error}`);
+                }
+                break;
+            }
+            case 'GeoJSONSource': {
+                const data = await (model === null || model === void 0 ? void 0 : model.readGeoJSON((_d = source.parameters) === null || _d === void 0 ? void 0 : _d.path));
+                data === null || data === void 0 ? void 0 : data.features.forEach((feature) => {
+                    feature.properties &&
+                        addFeatureValue(feature.properties, aggregatedProperties);
+                });
+                break;
+            }
+            default: {
+                console.warn('Source type not supported');
+                break;
+            }
+        }
+        setFeaturesInLayer(aggregatedProperties);
+    };
+    const buildFilterDebounce = debounce(buildFilterObject, 500);
+    const addFeatureValue = (featureProperties, aggregatedProperties) => {
+        Object.entries(featureProperties).forEach(([key, value]) => {
+            if (!(key in aggregatedProperties)) {
+                aggregatedProperties[key] = new Set();
+            }
+            aggregatedProperties[key].add(value);
+        });
+    };
+    const addFilterRow = () => {
+        setFilterRows([
+            ...filterRows,
+            {
+                feature: Object.keys(featuresInLayer)[0],
+                operator: '==',
+                value: [...Object.values(featuresInLayer)[0]][0]
+            }
+        ]);
+    };
+    const deleteRow = (index) => {
+        const newFilters = [...filterRows];
+        newFilters.splice(index, 1);
+        updateLayerFilters(newFilters);
+        setFilterRows(newFilters);
+    };
+    const handleLogicalOpChange = (event) => {
+        setLogicalOp(event.target.value);
+        updateLayerFilters(filterRows, event.target.value);
+    };
+    const clearFilters = () => {
+        updateLayerFilters([]);
+        setFilterRows([]);
+    };
+    const submitFilter = () => {
+        updateLayerFilters(filterRows);
+    };
+    const updateLayerFilters = (filters, op) => {
+        const layer = model === null || model === void 0 ? void 0 : model.getLayer(selectedLayer);
+        if (!layer) {
+            return;
+        }
+        layer.filters = { logicalOp: op !== null && op !== void 0 ? op : logicalOp, appliedFilters: filters };
+        model === null || model === void 0 ? void 0 : model.sharedModel.updateLayer(selectedLayer, layer);
+    };
+    return (React.createElement(React.Fragment, null, shouldDisplay && (React.createElement("div", { className: "jp-gis-filter-main" },
+        React.createElement("div", { id: "filter-container", className: "jp-gis-filter-select-container" },
+            React.createElement("select", { className: "jp-mod-styled jp-SchemaForm jp-gis-logical-select", onChange: handleLogicalOpChange },
+                React.createElement("option", { key: "all", value: "all", selected: logicalOp === 'all' }, "All"),
+                React.createElement("option", { key: "any", value: "any", selected: logicalOp === 'any' }, "Any")),
+            filterRows.map((row, index) => (React.createElement(FilterRow, { key: index, index: index, features: featuresInLayer, filterRows: filterRows, setFilterRows: setFilterRows, deleteRow: () => deleteRow(index) })))),
+        React.createElement("div", { className: "jp-gis-filter-button-container" },
+            React.createElement("div", { style: { justifyContent: 'flex-start' } },
+                React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addFilterRow }, "Add"),
+                React.createElement(Button, { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: clearFilters }, "Clear")),
+            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: submitFilter }, "Submit"))))));
+};
+export default FilterComponent;

package/lib/panelview/components/filter-panel/FilterRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const FilterRow: ({ index, features, filterRows, setFilterRows, deleteRow }: {
+    index: number;
+    features: Record<string, Set<string | number>>;
+    filterRows: any;
+    setFilterRows: any;
+    deleteRow: () => void;
+}) => React.JSX.Element;
+export default FilterRow;

package/lib/panelview/components/filter-panel/FilterRow.js

@@ -0,0 +1,61 @@
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+const FilterRow = ({ index, features, filterRows, setFilterRows, deleteRow }) => {
+    const operators = ['==', '!=', '>', '<', '>=', '<='];
+    const [sortedFeatures, setSortedFeatures] = useState({});
+    const [selectedFeature, setSelectedFeature] = useState(filterRows[index].feature || Object.keys(features)[0]);
+    // Ensure selected feature matches filter rows and proper values are displayed
+    useEffect(() => {
+        setSelectedFeature(filterRows[index].feature);
+    }, [filterRows]);
+    useEffect(() => {
+        const sortedKeys = Object.keys(features).sort();
+        const sortedResult = {};
+        for (const key of sortedKeys) {
+            // Convert each Set to a sorted array
+            const sortedArray = Array.from(features[key]).sort();
+            sortedResult[key] = sortedArray;
+        }
+        setSortedFeatures(sortedResult);
+    }, [features]);
+    // Update the value when a new feature is selected
+    useEffect(() => {
+        var _a;
+        const valueSelect = document.getElementById(`jp-gis-value-select-${index}`);
+        if (!valueSelect) {
+            return;
+        }
+        const currentValue = (_a = valueSelect.options[valueSelect.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        currentValue && onValueChange(currentValue);
+    }, [selectedFeature]);
+    const onValueChange = (value) => {
+        const newFilters = [...filterRows];
+        const isNum = typeof sortedFeatures[selectedFeature][0] === 'number';
+        newFilters[index].value = isNum ? +value : value;
+        setFilterRows(newFilters);
+    };
+    const handleKeyChange = (event) => {
+        const newFilters = [...filterRows];
+        newFilters[index].feature = event.target.value;
+        setSelectedFeature(event.target.value);
+        setFilterRows(newFilters);
+    };
+    const handleOperatorChange = (event) => {
+        const newFilters = [...filterRows];
+        newFilters[index].operator = event.target.value;
+        setFilterRows(newFilters);
+    };
+    const handleValueChange = (event) => {
+        onValueChange(event.target.value);
+    };
+    return (React.createElement("div", { className: "jp-gis-filter-row" },
+        React.createElement("select", { id: `jp-gis-feature-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleKeyChange }, Object.keys(sortedFeatures).map((feature, featureIndex) => (React.createElement("option", { key: featureIndex, value: feature, selected: feature === filterRows[index].feature }, feature)))),
+        React.createElement("select", { id: `jp-gis-operator-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleOperatorChange }, operators.map((operator, operatorIndex) => (React.createElement("option", { key: operatorIndex, value: operator, selected: operator === filterRows[index].operator }, operator)))),
+        React.createElement("select", { id: `jp-gis-value-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleValueChange }, sortedFeatures[selectedFeature] &&
+            [...sortedFeatures[selectedFeature]].map((value, valueIndex) => (React.createElement("option", { key: valueIndex, value: value, selected: value === filterRows[index].value }, value)))),
+        React.createElement(Button, { id: `jp-gis-remove-filter-${index}`, className: "jp-Button jp-gis-filter-icon" },
+            React.createElement(FontAwesomeIcon, { icon: faTrash, onClick: deleteRow }))));
+};
+export default FilterRow;

package/lib/panelview/components/layers.d.ts

@@ -0,0 +1,13 @@
+import { Panel } from '@lumino/widgets';
+import { ILayerPanelOptions } from '../leftpanel';
+/**
+ * The layers panel widget.
+ */
+export declare class LayersPanel extends Panel {
+    constructor(options: ILayerPanelOptions);
+    private _onDragOver;
+    private _onDrop;
+    private _model;
+    private _state;
+    private _onSelect;
+}