@jupytergis/base 0.14.0 → 0.14.1

package/lib/commands/BaseCommandIDs.d.ts

@@ -33,7 +33,6 @@ export declare const toggleLeftPanel = "jupytergis:toggleLeftPanel";
 export declare const toggleRightPanel = "jupytergis:toggleRightPanel";
 export declare const showLayersTab = "jupytergis:showLayersTab";
 export declare const showStacBrowserTab = "jupytergis:showStacBrowserTab";
-export declare const showFiltersTab = "jupytergis:showFiltersTab";
 export declare const showObjectPropertiesTab = "jupytergis:showObjectPropertiesTab";
 export declare const showAnnotationsTab = "jupytergis:showAnnotationsTab";
 export declare const showIdentifyPanelTab = "jupytergis:showIdentifyPanelTab";

package/lib/commands/BaseCommandIDs.js

@@ -46,7 +46,6 @@ export const toggleRightPanel = 'jupytergis:toggleRightPanel';
 // Left panel tabs
 export const showLayersTab = 'jupytergis:showLayersTab';
 export const showStacBrowserTab = 'jupytergis:showStacBrowserTab';
-export const showFiltersTab = 'jupytergis:showFiltersTab';
 // Right panel tabs
 export const showObjectPropertiesTab = 'jupytergis:showObjectPropertiesTab';
 export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';

package/lib/commands/index.js

@@ -1047,31 +1047,6 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             commands.notifyCommandChanged(CommandIDs.showStacBrowserTab);
         },
     });
-    commands.addCommand(CommandIDs.showFiltersTab, {
-        label: trans.__('Show Filters Tab'),
-        caption: 'Show the filters tab in the current JupyterGIS document.',
-        describedBy: {
-            args: {
-                type: 'object',
-                properties: {},
-            },
-        },
-        isEnabled: () => Boolean(tracker.currentWidget),
-        isToggled: () => tracker.currentWidget
-            ? !tracker.currentWidget.model.jgisSettings.filtersDisabled
-            : false,
-        execute: async () => {
-            var _a, _b, _c;
-            const current = tracker.currentWidget;
-            if (!current) {
-                return;
-            }
-            const settings = await current.model.getSettings();
-            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.filtersDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.filtersDisabled) !== null && _c !== void 0 ? _c : false;
-            await (settings === null || settings === void 0 ? void 0 : settings.set('filtersDisabled', !currentValue));
-            commands.notifyCommandChanged(CommandIDs.showFiltersTab);
-        },
-    });
     // Right panel tabs
     commands.addCommand(CommandIDs.showObjectPropertiesTab, {
         label: trans.__('Show Object Properties Tab'),

package/lib/dialogs/symbology/vector_layer/VectorRendering.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useGetProperties } from "../hooks/useGetProperties";
+import FilterComponent from "../../../panelview/filter-panel/Filter";
 import { getColorCodeFeatureAttributes, getFeatureAttributes, getNumericFeatureAttributes, objectEntries, } from "../../../tools";
 import Canonical from './types/Canonical';
 import Categorized from './types/Categorized';
@@ -92,8 +93,8 @@ const VectorRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverri
     const selectableRenderTypes = getSelectableRenderTypes(featureProperties, layer.type);
     const selectedRenderTypeProps = selectableRenderTypes[selectedRenderType];
     return (React.createElement(React.Fragment, null,
-        selectedRenderTypeProps.isTabbed && (React.createElement("div", { className: "jp-gis-symbology-tabs" }, ['color', 'radius'].map(tab => (React.createElement("button", { key: tab, className: `jp-gis-tab ${symbologyTab === tab ? 'active' : ''}`, onClick: () => setSymbologyTab(tab) }, tab.charAt(0).toUpperCase() + tab.slice(1)))))),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
+        selectedRenderTypeProps.isTabbed && (React.createElement("div", { className: "jp-gis-symbology-tabs" }, ['color', 'radius', 'filters'].map(tab => (React.createElement("button", { key: tab, className: `jp-gis-tab ${symbologyTab === tab ? 'active' : ''}`, onClick: () => setSymbologyTab(tab) }, tab.charAt(0).toUpperCase() + tab.slice(1)))))),
+        symbologyTab !== 'filters' && (React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: "render-type-select" }, "Render Type:"),
             React.createElement("div", { className: "jp-select-wrapper" },
                 React.createElement("select", { name: "render-type-select", id: "render-type-select", className: "jp-mod-styled", value: selectedRenderType, onChange: event => {
@@ -101,11 +102,11 @@ const VectorRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverri
                     } }, objectEntries(selectableRenderTypes)
                     .filter(([renderType, renderTypeProps]) => renderTypeProps.layerTypeSupported &&
                     !(renderType === 'Heatmap' && symbologyTab === 'radius'))
-                    .map(([renderType, _]) => (React.createElement("option", { key: renderType, value: renderType }, renderType)))))),
-        React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
+                    .map(([renderType, _]) => (React.createElement("option", { key: renderType, value: renderType }, renderType))))))),
+        symbologyTab === 'filters' ? (React.createElement(FilterComponent, { model: model, okSignalPromise: okSignalPromise })) : (React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
             ? {
                 selectableAttributesAndValues: selectedRenderTypeProps.selectableAttributesAndValues,
             }
-            : {})))));
+            : {}))))));
 };
 export default VectorRendering;

package/lib/dialogs/symbology/vector_layer/components/ValueSelect.js

@@ -2,6 +2,8 @@ import React from 'react';
 const ValueSelect = ({ featureProperties, selectedValue, setSelectedValue, }) => {
     return (React.createElement("div", { className: "jp-gis-symbology-row" },
         React.createElement("label", { htmlFor: 'vector-value-select' }, "Value:"),
-        React.createElement("select", { name: 'vector-value-select', onChange: event => setSelectedValue(event.target.value), className: "jp-mod-styled" }, Object.keys(featureProperties).map((feature, index) => (React.createElement("option", { key: index, value: feature, selected: feature === selectedValue, className: "jp-mod-styled" }, feature))))));
+        React.createElement("select", { name: 'vector-value-select', onChange: event => setSelectedValue(event.target.value), className: "jp-mod-styled" }, Object.keys(featureProperties)
+            .sort((a, b) => a.localeCompare(b))
+            .map((feature, index) => (React.createElement("option", { key: index, value: feature, selected: feature === selectedValue, className: "jp-mod-styled" }, feature))))));
 };
 export default ValueSelect;

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;

package/lib/panelview/story-maps/hooks/useStoryMap.js

@@ -16,6 +16,7 @@ export function getSpectaPresentationStyle(story) {
     return style;
 }
 export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLayer, panelRef, isSpecta, }) {
+    var _a;
     const [currentIndex, setCurrentIndex] = useState(() => { var _a; return (_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0; });
     const [storyData, setStoryData] = useState(() => { var _a; return (_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null; });
     const storySegments = useMemo(() => {
@@ -32,6 +33,7 @@ export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLa
     const activeSlide = useMemo(() => currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.parameters, [currentStorySegment]);
     const layerName = useMemo(() => { var _a; return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : ''; }, [currentStorySegment]);
     const currentStorySegmentId = useMemo(() => storySegmentIds === null || storySegmentIds === void 0 ? void 0 : storySegmentIds[currentIndex], [storySegmentIds, currentIndex]);
+    const showGradient = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.showGradient) !== null && _a !== void 0 ? _a : true;
     const hasPrev = currentIndex > 0;
     const hasNext = currentIndex < segmentCount - 1;
     const clearOverrideLayers = useCallback(() => {
@@ -236,6 +238,7 @@ export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLa
         storyData,
         storySegments,
         currentIndex,
+        showGradient,
         clearOverrideLayers,
         setIndex,
         handlePrev,

package/lib/stacBrowser/components/filter-extension/QueryableComboBox.js

@@ -105,9 +105,7 @@ export function QueryableComboBox({ queryables, selectedQueryables, updateSelect
                     };
                     return (React.createElement(SingleDatePicker, { date: parseDate(currentValue), onDateChange: handleDateChange, dateFormat: "P", showIcon: true, placeholder: "Select date", className: "jgis-queryable-combo-input jgis-queryable-combo-input-date-picker" }));
                 }
-                return (React.createElement(Input, { type: "text", className: "jgis-queryable-combo-input", 
-                    // style={{borderRadius: 0}}
-                    value: currentValue || '', onChange: e => onChange(e.target.value) }));
+                return (React.createElement(Input, { type: "text", value: currentValue || '', onChange: e => onChange(e.target.value) }));
             case 'number':
             case 'integer':
                 if (val.enum) {

package/lib/types.d.ts

@@ -6,7 +6,7 @@ import { Map } from 'ol';
 export { IDict };
 export type ValueOf<T> = T[keyof T];
 export type JupyterGISTracker = WidgetTracker<IJupyterGISWidget>;
-export type SymbologyTab = 'color' | 'radius';
+export type SymbologyTab = 'color' | 'radius' | 'filters';
 type RgbColorValue = [number, number, number] | [number, number, number, number];
 type HexColorValue = string;
 type InternalRgbArray = number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.14.0",
+    "@jupytergis/schema": "^0.14.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/shared/button.css

@@ -13,11 +13,8 @@
   border: 0.0375rem solid
     color-mix(in srgb, var(--jp-border-color1), transparent 20%);
   transition: background-color 0.2s ease;
-  height: 2.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  height: 1.5rem;
+  padding: 1rem 0.5rem;
   max-width: 20rem;
   gap: 0.25rem;
 }

package/style/shared/input.css

@@ -1,12 +1,12 @@
 [data-slot='input'] {
   box-sizing: border-box;
-  height: 1.125rem;
+  height: 2.25rem;
   width: auto;
   min-width: 0;
   border-radius: var(--jp-border-radius, 0.375rem);
   border: 1px solid var(--jp-border-color1);
   background-color: transparent;
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem 0.5rem;
   font-size: 1rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   transition:

package/style/storyPanel.css

@@ -1,5 +1,6 @@
 .jgis-story-viewer-panel {
   padding: 1rem;
+  padding-right: 0;
   overflow: auto;
   position: relative;
 }
@@ -187,10 +188,14 @@
 }
 
 .jgis-story-viewer-panel-specta-mod {
+  display: flex;
+  height: 100%;
   width: 45%;
+  align-items: center;
   font-size: var(--jp-ui-font-size3);
   padding-right: 1.7rem;
   color: var(--jgis-specta-text-color, var(--jp-ui-font-color1));
+  background-color: var(--jgis-specta-bg-color, var(--jp-layout-color0));
   overflow-y: auto;
   max-height: 100%;
 }