@jupytergis/base 0.6.1 → 0.7.0

package/lib/panelview/components/identify-panel/IdentifyPanel.js

@@ -1,61 +1,23 @@
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { LabIcon, ReactWidget, caretDownIcon } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
+import { LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-export class IdentifyPanel extends Panel {
-    constructor(options) {
-        super();
-        this._model = options.model;
-        this._tracker = options.tracker;
-        this.id = 'jupytergis::identifyPanel';
-        this.title.caption = 'Identify';
-        this.title.label = 'Identify';
-        this.addClass('jgis-scrollable');
-        this.addWidget(ReactWidget.create(React.createElement(IdentifyPanelComponent, { controlPanelModel: this._model, tracker: this._tracker })));
-    }
-}
-const IdentifyPanelComponent = ({ controlPanelModel, tracker, }) => {
+export const IdentifyPanelComponent = ({ model, }) => {
     var _a;
-    const [widgetId, setWidgetId] = useState('');
     const [features, setFeatures] = useState();
     const [visibleFeatures, setVisibleFeatures] = useState({
         0: true,
     });
     const [remoteUser, setRemoteUser] = useState(null);
-    const [jgisModel, setJgisModel] = useState(controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.jGISModel);
     const featuresRef = useRef(features);
-    /**
-     * Update the model when it changes.
-     */
-    controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.documentChanged.connect((_, widget) => {
-        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.model);
-    });
     // Reset state values when current widget changes
-    useEffect(() => {
-        const handleCurrentChanged = () => {
-            var _a;
-            if (((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.id) === widgetId) {
-                return;
-            }
-            if (tracker.currentWidget) {
-                setWidgetId(tracker.currentWidget.id);
-            }
-            setFeatures({});
-            setVisibleFeatures({ 0: true });
-        };
-        tracker.currentChanged.connect(handleCurrentChanged);
-        return () => {
-            tracker.currentChanged.disconnect(handleCurrentChanged);
-        };
-    }, []);
     useEffect(() => {
         featuresRef.current = features;
     }, [features]);
     useEffect(() => {
         const handleClientStateChanged = (sender, clients) => {
             var _a, _b, _c, _d, _e, _f;
-            const remoteUserId = (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
+            const remoteUserId = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
             // If following a collaborator
             if (remoteUserId) {
                 const remoteState = clients.get(remoteUserId);
@@ -68,32 +30,31 @@ const IdentifyPanelComponent = ({ controlPanelModel, tracker, }) => {
                 return;
             }
             // If not following a collaborator
-            const identifiedFeatures = (_f = (_e = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _e === void 0 ? void 0 : _e.identifiedFeatures) === null || _f === void 0 ? void 0 : _f.value;
+            const identifiedFeatures = (_f = (_e = model === null || model === void 0 ? void 0 : model.localState) === null || _e === void 0 ? void 0 : _e.identifiedFeatures) === null || _f === void 0 ? void 0 : _f.value;
             if (!identifiedFeatures) {
                 setFeatures({});
                 return;
             }
-            if (jgisModel.isIdentifying &&
-                featuresRef.current !== identifiedFeatures) {
+            if (model.isIdentifying && featuresRef.current !== identifiedFeatures) {
                 setFeatures(identifiedFeatures);
             }
         };
-        jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.clientStateChanged.connect(handleClientStateChanged);
+        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(handleClientStateChanged);
         return () => {
-            jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(handleClientStateChanged);
         };
-    }, [jgisModel]);
+    }, [model]);
     const highlightFeatureOnMap = (feature) => {
         var _a, _b;
-        (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.highlightFeatureSignal) === null || _a === void 0 ? void 0 : _a.emit(feature);
+        (_a = model === null || model === void 0 ? void 0 : model.highlightFeatureSignal) === null || _a === void 0 ? void 0 : _a.emit(feature);
         const geometry = feature.geometry || feature._geometry;
-        (_b = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.flyToGeometrySignal) === null || _b === void 0 ? void 0 : _b.emit(geometry);
+        (_b = model === null || model === void 0 ? void 0 : model.flyToGeometrySignal) === null || _b === void 0 ? void 0 : _b.emit(geometry);
     };
     const toggleFeatureVisibility = (index) => {
         setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
     };
     return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
-            border: ((_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
+            border: ((_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
                 ? `solid 3px ${remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.color}`
                 : 'unset',
         } }, features &&
@@ -125,6 +86,7 @@ const IdentifyPanelComponent = ({ controlPanelModel, tracker, }) => {
                     key,
                     ":"),
                 typeof value === 'string' &&
-                    /<\/?[a-z][\s\S]*>/i.test(value) ? (React.createElement("span", { dangerouslySetInnerHTML: { __html: `${value}` } })) : (React.createElement("span", null, String(value)))))))))))));
+                    /<\/?[a-z][\s\S]*>/i.test(value) ? (React.createElement("span", { dangerouslySetInnerHTML: {
+                        __html: `${value}`,
+                    } })) : (React.createElement("span", null, String(value)))))))))))));
 };
-export default IdentifyPanel;

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

@@ -1,13 +1,11 @@
-import { Panel } from '@lumino/widgets';
-import { ILayerPanelOptions } from "../leftpanel";
-/**
- * The layers panel widget.
- */
-export declare class LayersPanel extends Panel {
-    constructor(options: ILayerPanelOptions);
-    private _onDragOver;
-    private _onDrop;
-    private _model;
-    private _state;
-    private _onSelect;
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { IStateDB } from '@jupyterlab/statedb';
+import { CommandRegistry } from '@lumino/commands';
+import React from 'react';
+interface IBodyProps {
+    model: IJupyterGISModel;
+    commands: CommandRegistry;
+    state: IStateDB;
 }
+export declare const LayersBodyComponent: React.FC<IBodyProps>;
+export {};

package/lib/panelview/components/layers.js

@@ -1,10 +1,9 @@
 import { DOMUtils } from '@jupyterlab/apputils';
-import { Button, LabIcon, ReactWidget, caretDownIcon, } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
+import { Button, LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
+import { UUID } from '@lumino/coreutils';
 import React, { useEffect, useState, } from 'react';
-import { icons } from "../../constants";
+import { CommandIDs, icons } from "../../constants";
 import { nonVisibilityIcon, visibilityIcon } from "../../icons";
-const LAYERS_PANEL_CLASS = 'jp-gis-layerPanel';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
 const LAYER_GROUP_COLLAPSER_CLASS = 'jp-gis-layerGroupCollapser';
@@ -13,77 +12,111 @@ const LAYER_CLASS = 'jp-gis-layer';
 const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
-/**
- * The layers panel widget.
- */
-export class LayersPanel extends Panel {
-    constructor(options) {
-        super();
-        // This happens when dragging over empty space below the tree.
-        this._onDragOver = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.node.appendChild(Private.dragIndicator);
-            Private.dragInfo.dragOverElement = null;
-            Private.dragInfo.dragOverPosition = null;
-        };
-        this._onDrop = (e) => {
-            Private.dragIndicator.style.display = 'none';
-            if (this._model === undefined) {
-                return;
-            }
-            const { jGISModel: model } = this._model;
-            const { draggedElement, dragOverElement, dragOverPosition } = Private.dragInfo;
-            if (dragOverElement === 'error') {
-                return;
-            }
-            if (!draggedElement) {
-                return;
-            }
-            const draggedId = draggedElement.dataset.id;
-            if (!draggedId) {
-                return;
-            }
-            // Element has been dropped in the empty zone below the tree.
-            if (dragOverElement === null) {
-                model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], '', 0);
-                return;
-            }
-            const dragOverId = dragOverElement.dataset.id;
-            if (!dragOverId) {
-                return;
-            }
-            // Handle the special case where we want to drop the element on top of the first
-            // element of a group.
-            if (dragOverElement.classList.contains(LAYER_GROUP_HEADER_CLASS) &&
-                dragOverPosition === 'below') {
-                model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], dragOverId);
+export const LayersBodyComponent = props => {
+    const model = props.model;
+    const id = UUID.uuid4();
+    const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+    const notifyCommands = () => {
+        // Notify commands that need updating
+        props.commands.notifyCommandChanged(CommandIDs.identify);
+        props.commands.notifyCommandChanged(CommandIDs.temporalController);
+    };
+    const _onDragOver = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        Private.dragInfo.dragOverElement = null;
+        Private.dragInfo.dragOverPosition = null;
+    };
+    const _onDrop = (e) => {
+        Private.dragIndicator.style.display = 'none';
+        if (model === undefined) {
+            return;
+        }
+        const { draggedElement, dragOverElement, dragOverPosition } = Private.dragInfo;
+        if (dragOverElement === 'error') {
+            return;
+        }
+        if (!draggedElement) {
+            return;
+        }
+        const draggedId = draggedElement.dataset.id;
+        if (!draggedId) {
+            return;
+        }
+        // Element has been dropped in the empty zone below the tree.
+        if (dragOverElement === null) {
+            model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], '', 0);
+            return;
+        }
+        const dragOverId = dragOverElement.dataset.id;
+        if (!dragOverId) {
+            return;
+        }
+        // Handle the special case where we want to drop the element on top of the first
+        // element of a group.
+        if (dragOverElement.classList.contains(LAYER_GROUP_HEADER_CLASS) &&
+            dragOverPosition === 'below') {
+            model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], dragOverId);
+            return;
+        }
+        model === null || model === void 0 ? void 0 : model.moveItemRelatedTo(draggedId, dragOverId, dragOverPosition === 'above');
+    };
+    const onSelect = ({ type, item, nodeId, event, }) => {
+        var _a, _b;
+        if (!props.model || !nodeId) {
+            return;
+        }
+        const selectedValue = (_b = (_a = props.model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
+        const node = document.getElementById(nodeId);
+        if (!node) {
+            return;
+        }
+        node.tabIndex = 0;
+        node.focus();
+        // Early return if no selection exists
+        if (!selectedValue) {
+            resetSelected(type, nodeId, item);
+            return;
+        }
+        // Don't want to reset selected if right clicking a selected item
+        if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
+            return;
+        }
+        // Reset selection for normal left click
+        if (!event.ctrlKey) {
+            resetSelected(type, nodeId, item);
+            return;
+        }
+        if (nodeId) {
+            // Check if new selection is the same type as previous selections
+            const isSelectedSameType = Object.values(selectedValue).some(selection => selection.type === type);
+            if (!isSelectedSameType) {
+                // Selecting a new type, so reset selected
+                resetSelected(type, nodeId, item);
                 return;
             }
-            model === null || model === void 0 ? void 0 : model.moveItemRelatedTo(draggedId, dragOverId, dragOverPosition === 'above');
-        };
-        this._model = options.model;
-        this._onSelect = options.onSelect;
-        this._state = options.state;
-        this.id = 'jupytergis::layerTree';
-        this.addClass(LAYERS_PANEL_CLASS);
-        this.addWidget(ReactWidget.create(React.createElement(LayersBodyComponent, { model: this._model, onSelect: this._onSelect, state: this._state })));
-        this.node.ondragover = this._onDragOver;
-        this.node.ondrop = this._onDrop;
-    }
-}
-/**
- * The body component of the panel.
- */
-const LayersBodyComponent = props => {
-    var _a, _b;
-    const [model, setModel] = useState((_a = props.model) === null || _a === void 0 ? void 0 : _a.jGISModel);
-    const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+            // If types are the same add the selection
+            const updatedSelectedValue = Object.assign(Object.assign({}, selectedValue), { [item]: { type, selectedNodeId: nodeId } });
+            props.model.syncSelected(updatedSelectedValue, id);
+            notifyCommands();
+        }
+    };
+    const resetSelected = (type, nodeId, item) => {
+        const selection = {};
+        if (item && nodeId) {
+            selection[item] = {
+                type,
+                selectedNodeId: nodeId,
+            };
+        }
+        props.model.syncSelected(selection, id);
+        notifyCommands();
+    };
     /**
      * Propagate the layer selection.
      */
     const onItemClick = ({ type, item, nodeId, event, }) => {
-        props.onSelect({ type, item, nodeId, event });
+        onSelect({ type, item, nodeId, event });
     };
     /**
      * Listen to the layers and layer tree changes.
@@ -100,15 +133,7 @@ const LayersBodyComponent = props => {
             model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.disconnect(updateLayers);
         };
     }, [model]);
-    /**
-     * Update the model when it changes.
-     */
-    (_b = props.model) === null || _b === void 0 ? void 0 : _b.documentChanged.connect((_, widget) => {
-        var _a;
-        setModel(widget === null || widget === void 0 ? void 0 : widget.model);
-        setLayerTree(((_a = widget === null || widget === void 0 ? void 0 : widget.model) === null || _a === void 0 ? void 0 : _a.getLayerTree()) || []);
-    });
-    return (React.createElement("div", { id: "jp-gis-layer-tree" }, layerTree
+    return (React.createElement("div", { id: "jp-gis-layer-tree", onDrop: _onDrop, onDragOver: _onDragOver }, layerTree
         .slice()
         .reverse()
         .map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
@@ -216,7 +241,12 @@ const LayerComponent = props => {
     const setSelection = (event) => {
         var _a;
         const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
-        onClick({ type: 'layer', item: layerId, nodeId: childId, event });
+        onClick({
+            type: 'layer',
+            item: layerId,
+            nodeId: childId,
+            event,
+        });
     };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection },

package/lib/panelview/index.d.ts

@@ -1,5 +1,4 @@
 export * from './header';
 export * from './leftpanel';
-export * from './model';
 export * from './objectproperties';
 export * from './rightpanel';

package/lib/panelview/index.js

@@ -1,5 +1,4 @@
 export * from './header';
 export * from './leftpanel';
-export * from './model';
 export * from './objectproperties';
 export * from './rightpanel';

package/lib/panelview/leftpanel.d.ts

@@ -1,57 +1,18 @@
-import { IJupyterGISTracker, JupyterGISDoc, SelectionType } from '@jupytergis/schema';
+import { IJupyterGISModel, SelectionType } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
-import { SidePanel } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
-import { Message } from '@lumino/messaging';
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { IControlPanelModel } from "../types";
-/**
- * Options of the left panel widget.
- */
-export interface ILeftPanelOptions {
-    model: IControlPanelModel;
-    onSelect: ({ type, item, nodeId }: ILeftPanelClickHandlerParams) => void;
-}
-export interface ILayerPanelOptions extends ILeftPanelOptions {
-    state: IStateDB;
-}
+import * as React from 'react';
 export interface ILeftPanelClickHandlerParams {
     type: SelectionType;
     item: string;
     nodeId?: string;
     event: ReactMouseEvent;
 }
-export declare class LeftPanelWidget extends SidePanel {
-    constructor(options: LeftPanelWidget.IOptions);
-    dispose(): void;
-    protected onAfterAttach(msg: Message): void;
-    protected onBeforeDetach(msg: Message): void;
-    handleEvent(event: Event): void;
-    private _mouseUpEvent;
-    /**
-     * Function to call when a layer is selected from a component of the panel.
-     *
-     * @param item - the selected layer or group.
-     */
-    private _onSelect;
-    resetSelected(type: SelectionType, nodeId?: string, item?: string): void;
-    private _notifyCommands;
-    private _handleFileChange;
-    private _currentModel;
-    private _lastSelectedNodeId;
-    private _model;
-    private _state;
-    private _commands;
-}
-export declare namespace LeftPanelWidget {
-    interface IOptions {
-        model: IControlPanelModel;
-        tracker: IJupyterGISTracker;
-        state: IStateDB;
-        commands: CommandRegistry;
-    }
-    interface IProps {
-        filePath?: string;
-        sharedModel?: JupyterGISDoc;
-    }
+interface ILeftPanelProps {
+    model: IJupyterGISModel;
+    state: IStateDB;
+    commands: CommandRegistry;
 }
+export declare const LeftPanel: React.FC<ILeftPanelProps>;
+export {};

package/lib/panelview/leftpanel.js

@@ -1,154 +1,32 @@
-import { SidePanel } from '@jupyterlab/ui-components';
-import { CommandIDs } from "../constants";
-import StacPanel from "../stacBrowser/StacPanel";
-import { FilterPanel } from './components/filter-panel/Filter';
-import { LayersPanel } from './components/layers';
-import { ControlPanelHeader } from './header';
-export class LeftPanelWidget extends SidePanel {
-    constructor(options) {
-        super();
-        /**
-         * Function to call when a layer is selected from a component of the panel.
-         *
-         * @param item - the selected layer or group.
-         */
-        this._onSelect = ({ type, item, nodeId, event, }) => {
-            var _a, _b;
-            if (!this._model || !nodeId) {
-                return;
-            }
-            const { jGISModel } = this._model;
-            const selectedValue = (_b = (_a = jGISModel === null || jGISModel === void 0 ? void 0 : jGISModel.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
-            const node = document.getElementById(nodeId);
-            if (!node) {
-                return;
-            }
-            node.tabIndex = 0;
-            node.focus();
-            // Early return if no selection exists
-            if (!selectedValue) {
-                this.resetSelected(type, nodeId, item);
-                return;
-            }
-            // Don't want to reset selected if right clicking a selected item
-            if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
-                return;
-            }
-            // Reset selection for normal left click
-            if (!event.ctrlKey) {
-                this.resetSelected(type, nodeId, item);
-                return;
-            }
-            if (nodeId) {
-                // Check if new selection is the same type as previous selections
-                const isSelectedSameType = Object.values(selectedValue).some(selection => selection.type === type);
-                if (!isSelectedSameType) {
-                    // Selecting a new type, so reset selected
-                    this.resetSelected(type, nodeId, item);
-                    return;
-                }
-                // If types are the same add the selection
-                const updatedSelectedValue = Object.assign(Object.assign({}, selectedValue), { [item]: { type, selectedNodeId: nodeId } });
-                this._lastSelectedNodeId = nodeId;
-                jGISModel.syncSelected(updatedSelectedValue, this.id);
-                this._notifyCommands();
-            }
-        };
-        this.addClass('jGIS-sidepanel-widget');
-        this.addClass('data-jgis-keybinding');
-        this.node.tabIndex = 0;
-        this._model = options.model;
-        this._state = options.state;
-        this._commands = options.commands;
-        const header = new ControlPanelHeader();
-        this.header.addWidget(header);
-        const layerTree = new LayersPanel({
-            model: this._model,
-            state: this._state,
-            onSelect: this._onSelect,
-        });
-        layerTree.title.caption = 'Layer tree';
-        layerTree.title.label = 'Layers';
-        this.addWidget(layerTree);
-        const stacPanel = new StacPanel({
-            model: this._model,
-            tracker: options.tracker,
-        });
-        stacPanel.title.caption = 'STAC';
-        stacPanel.title.label = 'STAC';
-        this.addWidget(stacPanel);
-        const filterPanel = new FilterPanel({
-            model: this._model,
-            tracker: options.tracker,
-        });
-        filterPanel.title.caption = 'Filters';
-        filterPanel.title.label = 'Filters';
-        this.addWidget(filterPanel);
-        this._handleFileChange = () => {
-            var _a;
-            header.title.label = ((_a = this._currentModel) === null || _a === void 0 ? void 0 : _a.filePath) || '-';
-        };
-        options.tracker.currentChanged.connect((_, changed) => {
-            if (changed) {
-                if (this._currentModel) {
-                    this._currentModel.pathChanged.disconnect(this._handleFileChange);
-                }
-                this._currentModel = changed.model;
-                header.title.label = changed.model.filePath;
-                this._currentModel.pathChanged.connect(this._handleFileChange);
-            }
-            else {
-                header.title.label = '-';
-                this._currentModel = null;
-            }
-        });
-    }
-    dispose() {
-        super.dispose();
-    }
-    onAfterAttach(msg) {
-        super.onAfterAttach(msg);
-        const node = this.node;
-        node.addEventListener('mouseup', this);
-    }
-    onBeforeDetach(msg) {
-        super.onBeforeDetach(msg);
-        const node = this.node;
-        node.removeEventListener('mouseup', this);
-    }
-    handleEvent(event) {
-        switch (event.type) {
-            case 'mouseup':
-                this._mouseUpEvent(event);
-                break;
-            default:
-                break;
-        }
-    }
-    _mouseUpEvent(event) {
-        // If we click on empty space in the layer panel, keep the focus on the last selected element
-        const node = document.getElementById(this._lastSelectedNodeId);
-        if (!node) {
-            return;
-        }
-        node.focus();
-    }
-    resetSelected(type, nodeId, item) {
-        var _a, _b;
-        const selection = {};
-        if (item && nodeId) {
-            selection[item] = {
-                type,
-                selectedNodeId: nodeId,
-            };
-            this._lastSelectedNodeId = nodeId;
-        }
-        (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.jGISModel) === null || _b === void 0 ? void 0 : _b.syncSelected(selection, this.id);
-        this._notifyCommands();
-    }
-    _notifyCommands() {
-        // Notify commands that need updating
-        this._commands.notifyCommandChanged(CommandIDs.identify);
-        this._commands.notifyCommandChanged(CommandIDs.temporalController);
-    }
-}
+import * as React from 'react';
+import { LayersBodyComponent } from './components/layers';
+import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
+import StacPanel from '../stacBrowser/components/StacPanel';
+import FilterComponent from './components/filter-panel/Filter';
+export const LeftPanel = (props) => {
+    const tabInfo = [
+        { name: 'layers', title: 'Layers' },
+        { name: 'stac', title: 'Stac Browser' },
+        { name: 'filters', title: 'Filters' },
+    ];
+    const [curTab, setCurTab] = React.useState(tabInfo[0].name);
+    return (React.createElement("div", { className: "jgis-left-panel-container" },
+        React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
+            React.createElement(TabsList, null, tabInfo.map(e => {
+                return (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: e.name, onClick: () => {
+                        if (curTab !== e.name) {
+                            setCurTab(e.name);
+                        }
+                        else {
+                            setCurTab('');
+                        }
+                    } }, e.title));
+            })),
+            React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
+                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state })),
+            React.createElement(TabsContent, { value: "stac" },
+                React.createElement(StacPanel, { model: props.model })),
+            React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
+                React.createElement(FilterComponent, { model: props.model }),
+                ","))));
+};