@jupytergis/base 0.6.1 → 0.7.0

package/lib/annotations/components/Annotation.d.ts

@@ -1,10 +1,9 @@
-import { IAnnotationModel } from '@jupytergis/schema';
+import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
 import React from 'react';
-import { IControlPanelModel } from "../../types";
 export interface IAnnotationProps {
     itemId: string;
     annotationModel: IAnnotationModel;
-    rightPanelModel?: IControlPanelModel;
+    jgisModel?: IJupyterGISModel;
     children?: JSX.Element[] | JSX.Element;
 }
 declare const Annotation: React.FC<IAnnotationProps>;

package/lib/annotations/components/Annotation.js

@@ -4,17 +4,10 @@ import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useMemo, useState } from 'react';
 import { Message } from './Message';
-const Annotation = ({ itemId, annotationModel, rightPanelModel, children, }) => {
+const Annotation = ({ itemId, annotationModel, jgisModel, children, }) => {
     const [messageContent, setMessageContent] = useState('');
-    const [jgisModel, setJgisModel] = useState(rightPanelModel === null || rightPanelModel === void 0 ? void 0 : rightPanelModel.jGISModel);
     const annotation = annotationModel.getAnnotation(itemId);
     const contents = useMemo(() => { var _a; return (_a = annotation === null || annotation === void 0 ? void 0 : annotation.contents) !== null && _a !== void 0 ? _a : []; }, [annotation]);
-    /**
-     * Update the model when it changes.
-     */
-    rightPanelModel === null || rightPanelModel === void 0 ? void 0 : rightPanelModel.documentChanged.connect((_, widget) => {
-        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.model);
-    });
     const handleSubmit = () => {
         annotationModel.addContent(itemId, messageContent);
         setMessageContent('');
@@ -53,7 +46,7 @@ const Annotation = ({ itemId, annotationModel, rightPanelModel, children, }) =>
         React.createElement("div", { className: "jGIS-Annotation-Buttons" },
             React.createElement(Button, { className: "jp-mod-styled jp-mod-warn", onClick: handleDelete },
                 React.createElement(FontAwesomeIcon, { icon: faTrash })),
-            rightPanelModel && (React.createElement(Button, { className: "jp-mod-styled jp-mod-accept", onClick: centerOnAnnotation },
+            jgisModel && (React.createElement(Button, { className: "jp-mod-styled jp-mod-accept", onClick: centerOnAnnotation },
                 React.createElement(FontAwesomeIcon, { icon: faArrowsToDot }))),
             React.createElement(Button, { className: "jp-mod-styled jp-mod-accept", onClick: handleSubmit },
                 React.createElement(FontAwesomeIcon, { icon: faPaperPlane })))));

package/lib/commands/BaseCommandIDs.d.ts

@@ -14,6 +14,7 @@ export declare const newHillshadeEntry = "jupytergis:newHillshadeEntry";
 export declare const newImageEntry = "jupytergis:newImageEntry";
 export declare const newVideoEntry = "jupytergis:newVideoEntry";
 export declare const newGeoTiffEntry = "jupytergis:newGeoTiffEntry";
+export declare const newGeoParquetEntry = "jupytergis:newGeoParquetEntry";
 export declare const renameLayer = "jupytergis:renameLayer";
 export declare const removeLayer = "jupytergis:removeLayer";
 export declare const renameGroup = "jupytergis:renameGroup";

package/lib/commands/BaseCommandIDs.js

@@ -21,6 +21,7 @@ export const newHillshadeEntry = 'jupytergis:newHillshadeEntry';
 export const newImageEntry = 'jupytergis:newImageEntry';
 export const newVideoEntry = 'jupytergis:newVideoEntry';
 export const newGeoTiffEntry = 'jupytergis:newGeoTiffEntry';
+export const newGeoParquetEntry = 'jupytergis:newGeoParquetEntry';
 // Layer and group actions
 export const renameLayer = 'jupytergis:renameLayer';
 export const removeLayer = 'jupytergis:removeLayer';

package/lib/commands/index.js

@@ -198,6 +198,21 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'VectorTileSource',
             layerType: 'VectorTileLayer',
         }) }, icons.get(CommandIDs.newVectorTileEntry)));
+    commands.addCommand(CommandIDs.newGeoParquetEntry, Object.assign({ label: trans.__('New GeoParquet Layer'), isEnabled: () => {
+            return tracker.currentWidget
+                ? tracker.currentWidget.model.sharedModel.editable
+                : false;
+        }, execute: Private.createEntry({
+            tracker,
+            formSchemaRegistry,
+            title: 'Create GeoParquet Layer',
+            createLayer: true,
+            createSource: true,
+            sourceData: { name: 'Custom GeoParquet Source' },
+            layerData: { name: 'Custom GeoParquet Layer' },
+            sourceType: 'GeoParquetSource',
+            layerType: 'VectorLayer',
+        }) }, icons.get(CommandIDs.newGeoParquetEntry)));
     commands.addCommand(CommandIDs.newGeoJSONEntry, Object.assign({ label: trans.__('New GeoJSON layer'), isEnabled: () => {
             return tracker.currentWidget
                 ? tracker.currentWidget.model.sharedModel.editable

package/lib/constants.js

@@ -30,6 +30,7 @@ const iconObject = {
     [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
     [CommandIDs.newShapefileEntry]: { iconClass: 'fa fa-file' },
     [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
+    [CommandIDs.newGeoParquetEntry]: { iconClass: 'fa fa-file' },
     [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
     [CommandIDs.identify]: { icon: infoIcon },
     [CommandIDs.temporalController]: { icon: clockIcon },

package/lib/dialogs/symbology/components/color_ramp/ColorRamp.js

@@ -20,7 +20,7 @@ const ColorRamp = ({ layerParams, modeOptions, classifyFunc, showModeRow, showRa
         }
         setNumberOfShades(nClasses ? nClasses : '9');
         setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
-        setSelectedRamp(colorRamp ? colorRamp : 'cool');
+        setSelectedRamp(colorRamp ? colorRamp : 'viridis');
     };
     return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
         showRampSelector && (React.createElement("div", { className: "jp-gis-symbology-row" },

package/lib/dialogs/symbology/vector_layer/types/Heatmap.js

@@ -14,7 +14,7 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         radius: 8,
         blur: 15,
     });
-    const selectedRampRef = useRef('cool');
+    const selectedRampRef = useRef('viridis');
     const heatmapOptionsRef = useRef({
         radius: 8,
         blur: 15,
@@ -40,7 +40,7 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         if ((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) {
             colorRamp = layer.parameters.symbologyState.colorRamp;
         }
-        setSelectedRamp(colorRamp ? colorRamp : 'cool');
+        setSelectedRamp(colorRamp ? colorRamp : 'viridis');
     };
     const handleOk = () => {
         if (!layer.parameters) {

package/lib/formbuilder/formselectors.js

@@ -38,6 +38,9 @@ export function getSourceTypeForm(sourceType) {
         case 'VectorTileSource':
             SourceForm = TileSourcePropertiesForm;
             break;
+        case 'GeoParquetSource':
+            SourceForm = PathBasedSourcePropertiesForm;
+            break;
         // ADD MORE FORM TYPES HERE
     }
     return SourceForm;

package/lib/index.d.ts

@@ -8,8 +8,8 @@ export * from './icons';
 export * from './mainview';
 export * from './menus';
 export * from './panelview';
-export * from './stacBrowser';
 export * from './store';
+export * from './stacBrowser';
 export * from './toolbar';
 export * from './tools';
 export * from './types';

package/lib/index.js

@@ -8,8 +8,8 @@ export * from './icons';
 export * from './mainview';
 export * from './menus';
 export * from './panelview';
-export * from './stacBrowser';
 export * from './store';
+export * from './stacBrowser';
 export * from './toolbar';
 export * from './tools';
 export * from './types';

package/lib/keybindings.json

@@ -37,7 +37,7 @@
     {
         "command": "jupytergis:renameLayer",
         "keys": ["F2"],
-        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+        "selector": ".jp-gis-layerItem"
     },
     {
         "command": "jupytergis:removeGroup",
@@ -47,7 +47,7 @@
     {
         "command": "jupytergis:renameGroup",
         "keys": ["F2"],
-        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+        "selector": ".jp-gis-layerGroupHeader"
     },
     {
         "command": "jupytergis:executeConsole",

package/lib/mainview/mainView.d.ts

@@ -1,11 +1,15 @@
-import { IAnnotation, IDict, IJGISFilterItem, IJGISLayer, IJGISSource } from '@jupytergis/schema';
+import { IAnnotation, IAnnotationModel, IDict, IJGISFilterItem, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { Layer } from 'ol/layer';
 import * as React from 'react';
 import { ClientPointer } from './CollaboratorPointers';
 import { MainViewModel } from './mainviewmodel';
 interface IProps {
     viewModel: MainViewModel;
+    state?: IStateDB;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+    annotationModel?: IAnnotationModel;
 }
 interface IStates {
     id: string;
@@ -194,5 +198,8 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _originalFeatures;
     private _highlightLayer;
     private _updateCenter;
+    private _state?;
+    private _formSchemaRegistry?;
+    private _annotationModel?;
 }
 export {};

package/lib/mainview/mainView.js

@@ -33,6 +33,7 @@ import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
+import { LeftPanel, RightPanel } from '../panelview';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -441,6 +442,9 @@ export class MainView extends React.Component {
         this._ready = false;
         this._sourceToLayerMap = new Map();
         this._originalFeatures = {};
+        this._state = props.state;
+        this._formSchemaRegistry = props.formSchemaRegistry;
+        this._annotationModel = props.annotationModel;
         // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
         const el = document.getElementById('main-panel');
         if (el) {
@@ -819,6 +823,23 @@ export class MainView extends React.Component {
                 });
                 break;
             }
+            case 'GeoParquetSource': {
+                const parameters = source.parameters;
+                const geojson = await loadFile({
+                    filepath: parameters.path,
+                    type: 'GeoParquetSource',
+                    model: this._model,
+                });
+                const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
+                const format = new GeoJSON();
+                newSource = new VectorSource({
+                    features: format.readFeatures(geojsonData, {
+                        dataProjection: parameters.projection,
+                        featureProjection: this._Map.getView().getProjection(),
+                    }),
+                });
+                break;
+            }
         }
         newSource.set('id', id);
         // _sources is a list of OpenLayers sources
@@ -1642,6 +1663,8 @@ export class MainView extends React.Component {
                             width: '100%',
                             height: '100%',
                         } })),
-                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
+                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })),
+            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
+            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel }))));
     }
 }

package/lib/mainview/mainviewwidget.d.ts

@@ -1,12 +1,19 @@
+import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { IStateDB } from '@jupyterlab/statedb';
 import { MainViewModel } from './mainviewmodel';
+export interface IOptions {
+    mainViewModel: MainViewModel;
+    state?: IStateDB;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+    annotationModel?: IAnnotationModel;
+}
 export declare class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
      */
-    constructor(options: {
-        mainViewModel: MainViewModel;
-    });
+    constructor(options: IOptions);
     render(): JSX.Element;
-    private _mainViewModel;
+    private _state?;
+    private _options;
 }

package/lib/mainview/mainviewwidget.js

@@ -7,10 +7,11 @@ export class JupyterGISMainViewPanel extends ReactWidget {
      */
     constructor(options) {
         super();
-        this._mainViewModel = options.mainViewModel;
+        this._state = options.state;
         this.addClass('jp-jupytergis-panel');
+        this._options = options;
     }
     render() {
-        return React.createElement(MainView, { viewModel: this._mainViewModel });
+        return (React.createElement(MainView, { state: this._state, viewModel: this._options.mainViewModel, formSchemaRegistry: this._options.formSchemaRegistry, annotationModel: this._options.annotationModel }));
     }
 }

package/lib/menus.js

@@ -18,6 +18,10 @@ export const vectorSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.newShapefileEntry,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoParquetEntry,
+    });
     return subMenu;
 };
 export const rasterSubMenu = (commands) => {

package/lib/panelview/annotationPanel.d.ts

@@ -1,27 +1,13 @@
-import { IAnnotationModel } from '@jupytergis/schema';
-import { PanelWithToolbar } from '@jupyterlab/ui-components';
+import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
 import { Component } from 'react';
-import { IControlPanelModel } from "../types";
 interface IAnnotationPanelProps {
     annotationModel: IAnnotationModel;
-    rightPanelModel: IControlPanelModel;
+    jgisModel: IJupyterGISModel;
 }
 export declare class AnnotationsPanel extends Component<IAnnotationPanelProps> {
     constructor(props: IAnnotationPanelProps);
     render(): JSX.Element;
     private _annotationModel;
-    private _rightPanelModel;
-}
-export declare class Annotations extends PanelWithToolbar {
-    constructor(options: Annotations.IOptions);
-    private _widget;
-    private _annotationModel;
-    private _rightPanelModel;
-}
-export declare namespace Annotations {
-    interface IOptions {
-        annotationModel: IAnnotationModel;
-        rightPanelModel: IControlPanelModel;
-    }
+    private _jgisModel;
 }
 export {};

package/lib/panelview/annotationPanel.js

@@ -1,22 +1,16 @@
-import { PanelWithToolbar, ReactWidget } from '@jupyterlab/ui-components';
 import React, { Component } from 'react';
 import Annotation from "../annotations/components/Annotation";
 export class AnnotationsPanel extends Component {
     constructor(props) {
+        var _a, _b;
         super(props);
         const updateCallback = () => {
             this.forceUpdate();
         };
         this._annotationModel = props.annotationModel;
-        this._rightPanelModel = props.rightPanelModel;
-        this._annotationModel.modelChanged.connect(async () => {
-            // await this._annotationModel?.context?.ready;
-            var _a, _b, _c, _d;
-            (_b = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.sharedMetadataChanged.disconnect(updateCallback);
-            this._annotationModel = props.annotationModel;
-            (_d = (_c = this._annotationModel) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.sharedMetadataChanged.connect(updateCallback);
-            this.forceUpdate();
-        });
+        this._jgisModel = props.jgisModel;
+        (_b = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.sharedMetadataChanged.connect(updateCallback);
+        this.forceUpdate();
     }
     render() {
         var _a;
@@ -26,20 +20,9 @@ export class AnnotationsPanel extends Component {
         }
         const annotations = annotationIds.map((id) => {
             return (React.createElement("div", null,
-                React.createElement(Annotation, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel, itemId: id }),
+                React.createElement(Annotation, { jgisModel: this._jgisModel, annotationModel: this._annotationModel, itemId: id }),
                 React.createElement("hr", { className: "jGIS-Annotations-Separator" })));
         });
         return React.createElement("div", { className: "jgis-scrollable" }, annotations);
     }
 }
-export class Annotations extends PanelWithToolbar {
-    constructor(options) {
-        super({});
-        this.title.label = 'Annotations';
-        this.addClass('jgis-scrollable');
-        this._annotationModel = options.annotationModel;
-        this._rightPanelModel = options.rightPanelModel;
-        this._widget = ReactWidget.create(React.createElement(AnnotationsPanel, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel }));
-        this.addWidget(this._widget);
-    }
-}

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

@@ -1,24 +1,7 @@
-import { IJupyterGISTracker } from '@jupytergis/schema';
-import { Panel } from '@lumino/widgets';
+import { IJupyterGISModel } from '@jupytergis/schema';
 import React from 'react';
-import { IControlPanelModel } from "../../../types";
-/**
- * The filters panel widget.
- */
-export declare class FilterPanel extends Panel {
-    constructor(options: FilterPanel.IOptions);
-    private _model;
-    private _tracker;
-}
-export declare namespace FilterPanel {
-    interface IOptions {
-        model: IControlPanelModel;
-        tracker: IJupyterGISTracker;
-    }
-}
 interface IFilterComponentProps {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
+    model: IJupyterGISModel;
 }
 declare const FilterComponent: React.FC<IFilterComponentProps>;
 export default FilterComponent;

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

@@ -1,62 +1,22 @@
-import { Button, ReactWidget } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
+import { Button } from '@jupyterlab/ui-components';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { debounce, loadFile } 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 FilterComponent = ({ model }) => {
     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.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;
@@ -68,13 +28,13 @@ const FilterComponent = props => {
             setSelectedLayer(currentLayer);
         };
         const handleSharedOptionsChanged = (_, keys) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             // 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)) {
+            if (keys.has('zoom')) {
+                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;
                 }
-                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];
+                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];
                 // TODO: Probably want to debounce/throttle here
                 buildFilterDebounce(currentLayer);
             }
@@ -189,19 +149,26 @@ const FilterComponent = props => {
         if (!layer) {
             return;
         }
-        layer.filters = { logicalOp: op !== null && op !== void 0 ? op : logicalOp, appliedFilters: filters };
+        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 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")),
-            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"))))));
+    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")),
+                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")))),
+        !shouldDisplay && (React.createElement("div", { style: { textAlign: 'center' } }, "No layer selected"))));
 };
 export default FilterComponent;

package/lib/panelview/components/identify-panel/IdentifyPanel.d.ts

@@ -1,15 +1,7 @@
-import { IJupyterGISTracker } from '@jupytergis/schema';
-import { Panel } from '@lumino/widgets';
-import { IControlPanelModel } from "../../../types";
-export declare class IdentifyPanel extends Panel {
-    constructor(options: IdentifyPanel.IOptions);
-    private _model;
-    private _tracker;
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IIdentifyComponentProps {
+    model: IJupyterGISModel;
 }
-export declare namespace IdentifyPanel {
-    interface IOptions {
-        model: IControlPanelModel;
-        tracker: IJupyterGISTracker;
-    }
-}
-export default IdentifyPanel;
+export declare const IdentifyPanelComponent: React.FC<IIdentifyComponentProps>;
+export {};