@jupytergis/base 0.14.0 → 0.15.0

package/lib/mainview/mainView.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { JupyterGISModel, } from '@jupytergis/schema';
+import { JupyterGISModel, DEFAULT_PROJECTION, } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
-import { ContextMenu } from '@lumino/widgets';
+import { ContextMenu, Menu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
 import { FullScreen, ScaleLine, Zoom } from 'ol/control';
@@ -27,7 +27,7 @@ import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
 import RenderFeature, { toGeometry } from 'ol/render/Feature';
-import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
+import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, TileWMS as TileWMSSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
 import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
@@ -161,11 +161,54 @@ export class MainView extends React.Component {
                     });
                 },
             });
+            this._commands.addCommand('Copy-Coordinates-Map-CRS', {
+                label: () => {
+                    if (!this._Map || !this._clickCoords) {
+                        return 'Map CRS';
+                    }
+                    const proj = this._Map.getView().getProjection().getCode();
+                    const coord = this._clickCoords;
+                    return `Map CRS — ${proj} (${coord[0].toFixed(0)}E, ${coord[1].toFixed(0)}N)`;
+                },
+                execute: async () => {
+                    const coord = this._clickCoords;
+                    const text = `${coord[0].toFixed(0)}, ${coord[1].toFixed(0)}`;
+                    await navigator.clipboard.writeText(text);
+                },
+            });
+            this._commands.addCommand('Copy-Coordinates-LonLat', {
+                label: () => {
+                    if (!this._Map || !this._clickCoords) {
+                        return 'Latitude/Longitude';
+                    }
+                    const lonLat = toLonLat(this._clickCoords, this._Map.getView().getProjection());
+                    return `Latitude/Longitude: (${lonLat[1].toFixed(6)}N, ${lonLat[0].toFixed(6)}E)`;
+                },
+                execute: async () => {
+                    const lonLat = toLonLat(this._clickCoords, this._Map.getView().getProjection());
+                    const text = `${lonLat[1].toFixed(6)}, ${lonLat[0].toFixed(6)}`;
+                    await navigator.clipboard.writeText(text);
+                },
+            });
             this._contextMenu.addItem({
                 command: CommandIDs.addAnnotation,
                 selector: '.ol-viewport',
                 rank: 1,
             });
+            const copyCoordinatesMenu = new Menu({ commands: this._commands });
+            copyCoordinatesMenu.title.label = 'Copy Coordinates';
+            copyCoordinatesMenu.addItem({
+                command: 'Copy-Coordinates-Map-CRS',
+            });
+            copyCoordinatesMenu.addItem({
+                command: 'Copy-Coordinates-LonLat',
+            });
+            this._contextMenu.addItem({
+                type: 'submenu',
+                submenu: copyCoordinatesMenu,
+                selector: '.ol-viewport',
+                rank: 2,
+            });
         };
         this.vectorLayerStyleRuleBuilder = (layer) => {
             var _a, _b;
@@ -213,6 +256,70 @@ export class MainView extends React.Component {
             }
             const newStyle = Object.assign(Object.assign({}, defaultStyle), layerParams.color);
             layerStyle.style = newStyle;
+            // When fallbackColor[3] === 0, add an OL filter so features that would be
+            // drawn with a transparent color are excluded from rendering entirely.
+            // alpha === 0 is the contract: the default TRANSPARENT [0,0,0,0] triggers
+            // this automatically, and a future dedicated picker option can set it.
+            const symbologyState = layerParams.symbologyState;
+            if (Array.isArray(symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.fallbackColor) &&
+                symbologyState.fallbackColor[3] === 0) {
+                let matchFilter;
+                if (symbologyState.renderType === 'Categorized') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'case' &&
+                        fillExpr.length >= 4) {
+                        // Extract conditions from ['case', cond, val, cond, val, ..., fallback],
+                        // skipping any whose matched output color is also fully transparent.
+                        const conditions = [];
+                        for (let i = 1; i < fillExpr.length - 1; i += 2) {
+                            const output = fillExpr[i + 1];
+                            if (Array.isArray(output) && output[3] === 0) {
+                                continue;
+                            }
+                            conditions.push(fillExpr[i]);
+                        }
+                        // If every stop is transparent, use a never-true filter to hide all.
+                        matchFilter =
+                            conditions.length === 0
+                                ? ['==', 0, 1]
+                                : conditions.length === 1
+                                    ? conditions[0]
+                                    : ['any', ...conditions];
+                    }
+                }
+                else if (symbologyState.renderType === 'Graduated') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    // Graduated fill is ['case', ['has', field], interpolateExpr, fallback].
+                    // Features missing the attribute fall through to the fallback, so filter
+                    // them out with the same ['has', field] condition.
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'case' &&
+                        Array.isArray(fillExpr[1]) &&
+                        fillExpr[1][0] === 'has') {
+                        matchFilter = fillExpr[1];
+                    }
+                }
+                else if (symbologyState.renderType === 'Canonical') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    // Canonical fill is ['coalesce', ['get', field], fallback].
+                    // Features missing the attribute fall through to the fallback, so filter
+                    // them out with ['has', field]. Note: features that have the field but
+                    // with a non-color value also get the fallback — that gap is accepted.
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'coalesce' &&
+                        Array.isArray(fillExpr[1]) &&
+                        fillExpr[1][0] === 'get') {
+                        matchFilter = ['has', fillExpr[1][1]];
+                    }
+                }
+                if (matchFilter) {
+                    // Combine with any existing user-applied filter.
+                    layerStyle.filter = layerStyle.filter
+                        ? ['all', layerStyle.filter, matchFilter]
+                        : matchFilter;
+                }
+            }
             return [layerStyle];
         };
         /**
@@ -268,7 +375,7 @@ export class MainView extends React.Component {
          * to work with the temporal controller
          */
         this.handleTemporalController = (id, layer) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const selectedLayer = (_c = (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
             // Temporal Controller shouldn't be active if more than one layer is selected
             if (!selectedLayer || Object.keys(selectedLayer).length !== 1) {
@@ -286,13 +393,13 @@ export class MainView extends React.Component {
                 const activeFilter = layer.filters.appliedFilters[0];
                 // Save original features on first filter application
                 if (!Object.keys(this._originalFeatures).includes(id)) {
-                    this._originalFeatures[id] = source.getFeatures();
+                    this._originalFeatures[id] = (_e = source.getFeatures()) !== null && _e !== void 0 ? _e : [];
                 }
                 // clear current features
                 source.clear();
-                const startTime = (_e = activeFilter.betweenMin) !== null && _e !== void 0 ? _e : 0;
-                const endTime = (_f = activeFilter.betweenMax) !== null && _f !== void 0 ? _f : 1000;
-                const filteredFeatures = this._originalFeatures[id].filter(feature => {
+                const startTime = (_f = activeFilter.betweenMin) !== null && _f !== void 0 ? _f : 0;
+                const endTime = (_g = activeFilter.betweenMax) !== null && _g !== void 0 ? _g : 1000;
+                const filteredFeatures = ((_h = this._originalFeatures[id]) !== null && _h !== void 0 ? _h : []).filter(feature => {
                     const featureTime = feature.get(activeFilter.feature);
                     return featureTime >= startTime && featureTime <= endTime;
                 });
@@ -302,7 +409,7 @@ export class MainView extends React.Component {
             }
             else {
                 // Restore original features when no filters are applied
-                source.addFeatures(this._originalFeatures[id]);
+                source.addFeatures((_j = this._originalFeatures[id]) !== null && _j !== void 0 ? _j : []);
                 delete this._originalFeatures[id];
             }
         };
@@ -421,6 +528,11 @@ export class MainView extends React.Component {
         this._setupSpectaMode = () => {
             this._removeAllInteractions();
             this._setupStoryScrollListener();
+            // Ensure keybindings have a focused target in Specta mode.
+            window.requestAnimationFrame(() => {
+                var _a;
+                (_a = this.mainViewRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
         };
         this._removeAllInteractions = () => {
             // Remove all default interactions
@@ -555,6 +667,7 @@ export class MainView extends React.Component {
             });
             this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState })));
         };
+        this._lastPointerCoord = null;
         this._syncPointer = throttle((coordinates) => {
             const pointer = {
                 coordinates: { x: coordinates[0], y: coordinates[1] },
@@ -597,6 +710,7 @@ export class MainView extends React.Component {
         };
         this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
+        this.mainViewRef = React.createRef();
         this.controlsToolbarRef = React.createRef();
         this.spectaContainerRef = React.createRef();
         this.storyViewerPanelRef = React.createRef();
@@ -683,13 +797,15 @@ export class MainView extends React.Component {
         this._updateCenter = debounce(this.updateCenter, 100);
     }
     async componentDidMount() {
+        var _a;
         window.addEventListener('resize', this._handleWindowResize);
         const options = this._model.getOptions();
+        const projection = (_a = options.projection) !== null && _a !== void 0 ? _a : DEFAULT_PROJECTION;
         const center = options.longitude !== undefined && options.latitude !== undefined
-            ? fromLonLat([options.longitude, options.latitude])
+            ? fromLonLat([options.longitude, options.latitude], projection)
             : [0, 0];
         const zoom = options.zoom !== undefined ? options.zoom : 1;
-        await this.generateMap(center, zoom);
+        await this.generateMap(center, zoom, projection);
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             window.jupytergisMaps[this._documentPath] = this._Map;
@@ -717,7 +833,7 @@ export class MainView extends React.Component {
         this._cleanupStoryScrollListener();
         this._mainViewModel.dispose();
     }
-    async generateMap(center, zoom) {
+    async generateMap(center, zoom, projection = DEFAULT_PROJECTION) {
         const layers = this._model.getLayers();
         this._initialLayersCount = Object.values(layers).filter(layer => layer.type !== 'StorySegmentLayer').length;
         const scaleLine = new ScaleLine({
@@ -741,6 +857,7 @@ export class MainView extends React.Component {
                 view: new View({
                     center,
                     zoom,
+                    projection,
                 }),
                 controls,
             });
@@ -803,11 +920,12 @@ export class MainView extends React.Component {
                 }
             });
             this._Map.on('moveend', () => {
+                var _a;
                 const currentOptions = this._model.getOptions();
                 const view = this._Map.getView();
                 const center = view.getCenter() || [0, 0];
                 const zoom = view.getZoom() || 0;
-                const projection = view.getProjection();
+                const projection = (_a = getProjection(currentOptions.projection)) !== null && _a !== void 0 ? _a : view.getProjection();
                 const latLng = toLonLat(center, projection);
                 const bearing = view.getRotation();
                 const resolution = view.getResolution();
@@ -842,14 +960,18 @@ export class MainView extends React.Component {
             this._Map.getViewport().addEventListener('contextmenu', event => {
                 event.preventDefault();
                 event.stopPropagation();
-                const coordinate = this._Map.getEventCoordinate(event);
-                this._clickCoords = coordinate;
+                if (this._lastPointerCoord) {
+                    this._clickCoords = this._lastPointerCoord;
+                }
                 this._contextMenu.open(event);
             });
-            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
-                    code: view.getProjection().getCode(),
-                    units: view.getProjection().getUnits(),
-                } })));
+            this.setState(old => {
+                var _a;
+                return (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
+                        code: projection,
+                        units: ((_a = getProjection(projection)) !== null && _a !== void 0 ? _a : view.getProjection()).getUnits(),
+                    } }));
+            });
         }
     }
     /**
@@ -859,7 +981,7 @@ export class MainView extends React.Component {
      * @param source - the source object.
      */
     async addSource(id, source) {
-        var _a, _b;
+        var _a, _b, _c;
         let newSource;
         switch (source.type) {
             case 'RasterSource': {
@@ -1074,6 +1196,21 @@ export class MainView extends React.Component {
                 newSource = new VectorSource({
                     features: [marker],
                 });
+                break;
+            }
+            case 'WmsTileSource': {
+                const sourceParameters = source.parameters;
+                const url = sourceParameters.url;
+                const selectedLayer = (_c = sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.params) === null || _c === void 0 ? void 0 : _c.layers;
+                newSource = new TileWMSSource({
+                    attributions: sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.attribution,
+                    url,
+                    params: {
+                        LAYERS: selectedLayer,
+                        TILED: true,
+                    },
+                });
+                break;
             }
         }
         newSource.set('id', id);
@@ -1580,6 +1717,9 @@ export class MainView extends React.Component {
         }
     }
     _onSharedOptionsChanged() {
+        if (!this._Map) {
+            return;
+        }
         // ! would prefer a model ready signal or something, this feels hacky
         const enableSpectaPresentation = this._model.isSpectaMode();
         // Handle initialization based on specta presentation state
@@ -1632,6 +1772,12 @@ export class MainView extends React.Component {
         if (projection !== undefined && currentProjection !== projection) {
             const newProjection = getProjection(projection);
             if (newProjection) {
+                this.setState(old => ({
+                    viewProjection: {
+                        code: newProjection.getCode(),
+                        units: newProjection.getUnits(),
+                    },
+                }));
                 view = new View({ projection: newProjection });
             }
             else {
@@ -1639,6 +1785,8 @@ export class MainView extends React.Component {
                 return;
             }
         }
+        view.setRotation(bearing || 0);
+        this._Map.setView(view);
         // Use the extent only if explicitly requested (QGIS files).
         if (useExtent && extent) {
             view.fit(extent);
@@ -1652,8 +1800,6 @@ export class MainView extends React.Component {
                 this._model.setOptions(options);
             }
         }
-        view.setRotation(bearing || 0);
-        this._Map.setView(view);
     }
     _onViewChanged(sender, change) {
         // TODO SOMETHING
@@ -1932,6 +2078,7 @@ export class MainView extends React.Component {
     _onPointerMove(e) {
         const pixel = this._Map.getEventPixel(e);
         const coordinates = this._Map.getCoordinateFromPixel(pixel);
+        this._lastPointerCoord = coordinates;
         this._syncPointer(coordinates);
     }
     async _addMarker(e) {
@@ -2107,7 +2254,7 @@ export class MainView extends React.Component {
             }),
             React.createElement("div", { className: "jGIS-Mainview-Container" },
                 this.state.displayTemporalController && (React.createElement(TemporalSlider, { model: this._model, filterStates: this.state.filterStates })),
-                React.createElement("div", { className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
+                React.createElement("div", { ref: this.mainViewRef, className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
                         border: this.state.remoteUser
                             ? `solid 3px ${this.state.remoteUser.color}`
                             : 'unset',

package/lib/menus.js

@@ -33,6 +33,10 @@ export const rasterSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.openNewRasterDialog,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.openNewWmsDialog,
+    });
     subMenu.addItem({
         type: 'command',
         command: CommandIDs.openNewHillshadeDialog,

package/lib/panelview/components/layers.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { DOMUtils } from '@jupyterlab/apputils';
 import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-components';
 import React, { useEffect, useState, } from 'react';
@@ -104,8 +115,14 @@ export const LayersBodyComponent = props => {
                 };
             }
             else {
-                // If types are the same add the selection - multi-selection
-                newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                // If types are the same modify the selection (either add or remove to multi-selection)
+                if (item in selectedValue) {
+                    const _a = selectedValue, _b = item, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                    newSelection = rest;
+                }
+                else {
+                    newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                }
             }
         }
         // Set the selection

package/lib/panelview/components/legendItem.js

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
+import { findExprNode } from "../../dialogs/symbology/colorRampUtils";
 import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
 export const LegendItem = ({ layerId, model }) => {
     const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
     const [content, setContent] = useState(null);
     const parseColorStops = (expr) => {
-        if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
+        const interpolate = findExprNode(expr, 'interpolate');
+        if (!interpolate) {
             return [];
         }
         const stops = [];
-        for (let i = 3; i < expr.length; i += 2) {
-            const value = expr[i];
-            const rgba = expr[i + 1];
+        for (let i = 3; i < interpolate.length; i += 2) {
+            const value = interpolate[i];
+            const rgba = interpolate[i + 1];
             const color = Array.isArray(rgba)
                 ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
                 : String(rgba);
@@ -130,6 +132,14 @@ export const LegendItem = ({ layerId, model }) => {
                 }))));
             return;
         }
+        // Canonical
+        if (renderType === 'Canonical') {
+            setContent(React.createElement("div", { style: { padding: 6 } },
+                property && (React.createElement("div", { style: { fontSize: '1em' } },
+                    React.createElement("strong", null, property))),
+                React.createElement("div", { style: { fontSize: '0.8em', opacity: 0.7 } }, "hex color attribute")));
+            return;
+        }
         // Categorized
         if (renderType === 'Categorized') {
             const cats = parseCaseCategories(fill || stroke);

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

@@ -1,7 +1,10 @@
 import { IJupyterGISModel } from '@jupytergis/schema';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import React from 'react';
 interface IFilterComponentProps {
     model: IJupyterGISModel;
+    okSignalPromise: PromiseDelegate<Signal<any, null>>;
 }
 declare const FilterComponent: React.FC<IFilterComponentProps>;
 export default FilterComponent;

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

@@ -1,9 +1,10 @@
 import { Button } from '@jupyterlab/ui-components';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
+import { useOkSignal } from "../../dialogs/symbology/hooks/useOkSignal";
 import { debounce, loadFile } from "../../tools";
 import FilterRow from './FilterRow';
-const FilterComponent = ({ model }) => {
+const FilterComponent = ({ model, okSignalPromise, }) => {
     const featuresInLayerRef = useRef({});
     const [logicalOp, setLogicalOp] = useState('all');
     const [selectedLayer, setSelectedLayer] = useState('');
@@ -48,6 +49,9 @@ const FilterComponent = ({ model }) => {
             model === null || model === void 0 ? void 0 : model.sharedOptionsChanged.disconnect(handleSharedOptionsChanged);
         };
     }, [model]);
+    useOkSignal(okSignalPromise, () => {
+        updateLayerFilters(filterRows, logicalOp);
+    });
     useEffect(() => {
         var _a, _b, _c, _d;
         // Reset filter stuff for new layer
@@ -141,9 +145,6 @@ const FilterComponent = ({ model }) => {
         updateLayerFilters([]);
         setFilterRows([]);
     };
-    const submitFilter = () => {
-        updateLayerFilters(filterRows);
-    };
     const updateLayerFilters = (filters, op) => {
         const layer = model === null || model === void 0 ? void 0 : model.getLayer(selectedLayer);
         if (!layer) {
@@ -158,17 +159,16 @@ const FilterComponent = ({ model }) => {
     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 rjsf 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")),
+                React.createElement("select", { className: "jp-mod-styled rjsf jp-gis-logical-select", value: logicalOp, onChange: handleLogicalOpChange },
+                    React.createElement("option", { value: "all" }, "All"),
+                    React.createElement("option", { value: "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, "data-testid": "add-filter-button" }, "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")))),
+                    React.createElement(Button, { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: clearFilters }, "Clear"))))),
         !shouldDisplay && (React.createElement("div", { style: { textAlign: 'center' } }, "No layer selected"))));
 };
 export default FilterComponent;

package/lib/panelview/leftpanel.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Draggable from 'react-draggable';
 import { CommandIDs } from '../constants';
 import { LayersBodyComponent } from './components/layers';
-import FilterComponent from './filter-panel/Filter';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 import StacPanel from '../stacBrowser/components/StacPanel';
 export const LeftPanel = (props) => {
@@ -18,9 +17,6 @@ export const LeftPanel = (props) => {
         !props.settings.stacBrowserDisabled && !storyMapPresentationMode
             ? { name: 'stac', title: 'Stac Browser' }
             : false,
-        !props.settings.filtersDisabled && !storyMapPresentationMode
-            ? { name: 'filters', title: 'Filters' }
-            : false,
         !props.settings.storyMapsDisabled
             ? { name: 'segments', title: 'Segments' }
             : false,
@@ -121,7 +117,6 @@ export const LeftPanel = (props) => {
     }, [storySegmentLayerTree]);
     const allLeftTabsDisabled = props.settings.layersDisabled &&
         props.settings.stacBrowserDisabled &&
-        props.settings.filtersDisabled &&
         props.settings.storyMapsDisabled;
     const leftPanelVisible = !props.settings.leftPanelDisabled && !allLeftTabsDisabled;
     return (React.createElement(Draggable, { handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
@@ -139,8 +134,6 @@ export const LeftPanel = (props) => {
                     React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
                 !props.settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
                     React.createElement(StacPanel, { model: props.model }))),
-                !props.settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
-                    React.createElement(FilterComponent, { model: props.model }))),
                 !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
                     React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree })))))));
 };

package/lib/panelview/story-maps/SpectaPanel.js

@@ -5,7 +5,7 @@ import { useStoryMap } from './hooks/useStoryMap';
 export function SpectaPanel({ model, isSpecta, isMobile, onSegmentTransitionEnd, containerRef, storyViewerPanelRef, addLayer, removeLayer, }) {
     const overrideLayerEntriesRef = useRef([]);
     const segmentContainerRef = useRef(null);
-    const { storyData, currentIndex, setIndex, handlePrev, handleNext, hasPrev, hasNext, activeSlide, layerName, } = useStoryMap({
+    const { storyData, currentIndex, setIndex, handlePrev, handleNext, hasPrev, hasNext, activeSlide, layerName, showGradient, } = useStoryMap({
         model,
         overrideLayerEntriesRef,
         removeLayer,
@@ -31,5 +31,5 @@ export function SpectaPanel({ model, isSpecta, isMobile, onSegmentTransitionEnd,
     if (isMobile) {
         return (React.createElement(SpectaMobileView, { model: model, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
     }
-    return (React.createElement(SpectaDesktopView, { model: model, isSpecta: isSpecta, containerRef: containerRef, storyViewerPanelRef: storyViewerPanelRef, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
+    return (React.createElement(SpectaDesktopView, { model: model, isSpecta: isSpecta, containerRef: containerRef, storyViewerPanelRef: storyViewerPanelRef, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, showGradient: showGradient, setIndex: setIndex }));
 }

package/lib/panelview/story-maps/StoryViewerPanel.d.ts

@@ -5,7 +5,6 @@ interface IStoryViewerPanelProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
     isMobile?: boolean;
-    className?: string;
     /** Ref for the segment container (SpectaPanel uses it for animationend). */
     segmentContainerRef?: RefObject<HTMLDivElement>;
     storyData: IJGISStoryMap | null;
@@ -41,7 +40,7 @@ export type StoryNavPlacement = 'below-title' | 'over-image' | 'subtitle-specta'
  * Story viewer (presentational). Receives story state and callbacks from parent.
  * Desktop scroll/sentinel/imperative handle live in SpectaDesktopView.
  */
-declare function StoryViewerPanel({ model, isSpecta, isMobile, className, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: IStoryViewerPanelProps): React.JSX.Element;
+declare function StoryViewerPanel({ model, isSpecta, isMobile, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: IStoryViewerPanelProps): React.JSX.Element;
 declare namespace StoryViewerPanel {
     var displayName: string;
 }

package/lib/panelview/story-maps/StoryViewerPanel.js

@@ -20,7 +20,7 @@ function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
  * Story viewer (presentational). Receives story state and callbacks from parent.
  * Desktop scroll/sentinel/imperative handle live in SpectaDesktopView.
  */
-function StoryViewerPanel({ model, isSpecta, isMobile = false, className, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
+function StoryViewerPanel({ model, isSpecta, isMobile = false, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const [imageLoaded, setImageLoaded] = useState(false);
     // Prefetch image when slide changes

package/lib/panelview/story-maps/components/SpectaDesktopView.d.ts

@@ -15,7 +15,8 @@ interface ISpectaDesktopViewProps {
     handleNext: () => void;
     hasPrev: boolean;
     hasNext: boolean;
+    showGradient: boolean;
     setIndex: (index: number) => void;
 }
-export declare function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }: ISpectaDesktopViewProps): JSX.Element;
+export declare function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, showGradient, setIndex, }: ISpectaDesktopViewProps): JSX.Element;
 export {};

package/lib/panelview/story-maps/components/SpectaDesktopView.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useImperativeHandle, useRef, } from 'react';
 import StoryViewerPanel from "../StoryViewerPanel";
 import SpectaPresentationProgressBar from "../../../statusbar/SpectaPresentationProgressBar";
-export function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, setIndex, }) {
+export function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPanelRef, segmentContainerRef, storyData, currentIndex, activeSlide, layerName, handlePrev, handleNext, hasPrev, hasNext, showGradient, setIndex, }) {
     const scrollContainerRef = useRef(null);
     const topSentinelRef = useRef(null);
     const bottomSentinelRef = useRef(null);
@@ -39,11 +39,11 @@ export function SpectaDesktopView({ model, isSpecta, containerRef, storyViewerPa
         getScrollContainer: () => scrollContainerRef.current,
     }), [handlePrev, handleNext, isSpecta, hasPrev, hasNext]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+        React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container", style: showGradient ? undefined : { width: '25%', borderRadius: 0 } },
             React.createElement("div", { ref: containerRef, className: "jgis-specta-story-panel-container" },
-                React.createElement("div", { ref: scrollContainerRef, className: "jgis-story-viewer-panel-specta-mod", id: "jgis-story-segment-panel" },
+                React.createElement("div", { ref: scrollContainerRef, className: "jgis-story-viewer-panel-specta-mod", id: "jgis-story-segment-panel", style: showGradient ? undefined : { width: 'unset' } },
                     React.createElement("div", { ref: topSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "top", style: { height: 1, minHeight: 1, pointerEvents: 'none' } }),
-                    React.createElement(StoryViewerPanel, { model: model, isSpecta: isSpecta, className: "jgis-story-viewer-panel-specta-mod", segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }),
+                    React.createElement(StoryViewerPanel, { model: model, isSpecta: isSpecta, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }),
                     React.createElement("div", { ref: bottomSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "bottom", style: { height: 1, minHeight: 1, pointerEvents: 'none' } })))),
         React.createElement(SpectaPresentationProgressBar, { model: model })));
 }

package/lib/panelview/story-maps/hooks/useStoryMap.d.ts

@@ -22,6 +22,7 @@ export declare function useStoryMap({ model, overrideLayerEntriesRef, removeLaye
     storyData: IJGISStoryMap | null;
     storySegments: IJGISLayer[];
     currentIndex: number;
+    showGradient: boolean;
     clearOverrideLayers: () => void;
     setIndex: (index: number) => void;
     handlePrev: () => void;