From c1e1be0a7b0cce495eddb54b133cab470424b5af Mon Sep 17 00:00:00 2001 From: Nakul Date: Mon, 25 Aug 2025 21:09:48 +0530 Subject: [PATCH] Adding toogle button for left and right panel --- packages/base/src/commands/BaseCommandIDs.ts | 2 ++ packages/base/src/commands/index.ts | 32 +++++++++++++++++ packages/base/src/constants.ts | 2 ++ packages/base/src/mainview/mainView.tsx | 38 +++++++++++++++----- packages/base/src/toolbar/widget.tsx | 16 +++++++++ packages/schema/src/interfaces.ts | 5 +++ packages/schema/src/model.ts | 33 +++++++++++++++++ 7 files changed, 120 insertions(+), 8 deletions(-) diff --git a/packages/base/src/commands/BaseCommandIDs.ts b/packages/base/src/commands/BaseCommandIDs.ts index b700e6849..37164b00c 100644 --- a/packages/base/src/commands/BaseCommandIDs.ts +++ b/packages/base/src/commands/BaseCommandIDs.ts @@ -25,6 +25,8 @@ export const newImageEntry = 'jupytergis:newImageEntry'; export const newVideoEntry = 'jupytergis:newVideoEntry'; export const newGeoTiffEntry = 'jupytergis:newGeoTiffEntry'; export const newGeoParquetEntry = 'jupytergis:newGeoParquetEntry'; +export const toggleLeftPanel = 'jupytergis:toggleLeftPanel'; +export const toggleRightPanel = 'jupytergis:toggleRightPanel'; // Layer and group actions export const renameLayer = 'jupytergis:renameLayer'; diff --git a/packages/base/src/commands/index.ts b/packages/base/src/commands/index.ts index 10c76d41e..862d02d24 100644 --- a/packages/base/src/commands/index.ts +++ b/packages/base/src/commands/index.ts @@ -258,6 +258,38 @@ export function addCommands( ...icons.get(CommandIDs.temporalController), }); + commands.addCommand(CommandIDs.toggleLeftPanel, { + label: trans.__('Toggle Left Panel'), + isToggled: () => { + const current = tracker.currentWidget; + return current?.model?.showLeftPanel ?? false; + }, + execute: () => { + const current = tracker.currentWidget; + if (current) { + current.model.toggleLeftPanel(); + commands.notifyCommandChanged(CommandIDs.toggleLeftPanel); + } + }, + ...icons.get(CommandIDs.toggleLeftPanel), + }); + + commands.addCommand(CommandIDs.toggleRightPanel, { + label: trans.__('Toggle Right Panel'), + isToggled: () => { + const current = tracker.currentWidget; + return current?.model?.showRightPanel ?? false; + }, + execute: () => { + const current = tracker.currentWidget; + if (current) { + current.model.toggleRightPanel(); + commands.notifyCommandChanged(CommandIDs.toggleRightPanel); + } + }, + ...icons.get(CommandIDs.toggleRightPanel), + }); + /** * SOURCES and LAYERS creation commands. */ diff --git a/packages/base/src/constants.ts b/packages/base/src/constants.ts index 9d6bdf0b4..d269a9ced 100644 --- a/packages/base/src/constants.ts +++ b/packages/base/src/constants.ts @@ -56,6 +56,8 @@ const iconObject = { [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }, [CommandIDs.identify]: { icon: infoIcon }, [CommandIDs.temporalController]: { icon: clockIcon }, + [CommandIDs.toggleLeftPanel]: { iconClass: 'fa fa-chevron-left' }, + [CommandIDs.toggleRightPanel]: { iconClass: 'fa fa-chevron-right' }, }; /** diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx index 82caddef6..933dc112b 100644 --- a/packages/base/src/mainview/mainView.tsx +++ b/packages/base/src/mainview/mainView.tsx @@ -133,6 +133,8 @@ interface IStates { loadingErrors: Array<{ id: string; error: any; index: number }>; displayTemporalController: boolean; filterStates: IDict; + showLeftPanel: boolean; + showRightPanel: boolean; } export class MainView extends React.Component { @@ -229,6 +231,8 @@ export class MainView extends React.Component { loadingErrors: [], displayTemporalController: false, filterStates: {}, + showLeftPanel: this._model.showLeftPanel, + showRightPanel: this._model.showRightPanel, }; this._sources = []; @@ -255,6 +259,11 @@ export class MainView extends React.Component { if (window.jupytergisMaps !== undefined && this._documentPath) { window.jupytergisMaps[this._documentPath] = this._Map; } + + this._model.panelVisibilityChanged.connect( + this._onPanelVisibilityChanged, + this, + ); } componentWillUnmount(): void { @@ -278,6 +287,10 @@ export class MainView extends React.Component { this, ); + this._model.panelVisibilityChanged.disconnect( + this._onPanelVisibilityChanged, + this, + ); this._mainViewModel.dispose(); } @@ -2235,6 +2248,13 @@ export class MainView extends React.Component { // TODO SOMETHING }; + private _onPanelVisibilityChanged(): void { + this.setState({ + showLeftPanel: this._model.showLeftPanel, + showRightPanel: this._model.showRightPanel, + }); + } + render(): JSX.Element { return ( <> @@ -2299,20 +2319,22 @@ export class MainView extends React.Component { /> - {this._state && ( + {this._state && this.state.showLeftPanel && ( )} - {this._formSchemaRegistry && this._annotationModel && ( - - )} + {this._formSchemaRegistry && + this._annotationModel && + this.state.showRightPanel && ( + + )} ); } diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx index f4eba96bb..e4e273888 100644 --- a/packages/base/src/toolbar/widget.tsx +++ b/packages/base/src/toolbar/widget.tsx @@ -170,6 +170,22 @@ export class ToolbarWidget extends ReactiveToolbar { temporalControllerButton.node.dataset.testid = 'temporal-controller-button'; + const toggleLeftPanelButton = new CommandToolbarButton({ + id: CommandIDs.toggleLeftPanel, + commands: options.commands, + label: '', + }); + this.addItem('toggleLeftPanel', toggleLeftPanelButton); + toggleLeftPanelButton.node.dataset.testid = 'toggle-left-panel-button'; + + const toggleRightPanelButton = new CommandToolbarButton({ + id: CommandIDs.toggleRightPanel, + commands: options.commands, + label: '', + }); + this.addItem('toggleRightPanel', toggleRightPanelButton); + toggleRightPanelButton.node.dataset.testid = 'toggle-right-panel-button'; + this.addItem('spacer', ReactiveToolbar.createSpacerItem()); // Users diff --git a/packages/schema/src/interfaces.ts b/packages/schema/src/interfaces.ts index e1149c98e..121f7ef64 100644 --- a/packages/schema/src/interfaces.ts +++ b/packages/schema/src/interfaces.ts @@ -181,6 +181,8 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel { flyToGeometrySignal: Signal; highlightFeatureSignal: Signal; updateBboxSignal: Signal; + showLeftPanel: boolean; + showRightPanel: boolean; contentsManager: Contents.IManager | undefined; filePath: string; @@ -247,7 +249,10 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel { toggleTemporalController(): void; addFeatureAsMs(id: string, selectedFeature: string): void; triggerLayerUpdate(layerId: string, layer: IJGISLayer): void; + toggleLeftPanel(): void; + toggleRightPanel(): void; + panelVisibilityChanged: ISignal; disposed: ISignal; } diff --git a/packages/schema/src/model.ts b/packages/schema/src/model.ts index 31e9135b1..730fa341f 100644 --- a/packages/schema/src/model.ts +++ b/packages/schema/src/model.ts @@ -305,6 +305,7 @@ export class JupyterGISModel implements IJupyterGISModel { readonly flyToGeometrySignal = new Signal(this); readonly highlightFeatureSignal = new Signal(this); readonly updateBboxSignal = new Signal(this); + readonly panelVisibilityChanged = new Signal(this); getContent(): IJGISContent { return { @@ -774,6 +775,36 @@ export class JupyterGISModel implements IJupyterGISModel { return this._geolocationChanged; } + get showLeftPanel(): boolean { + return this._showLeftPanel; + } + set showLeftPanel(value: boolean) { + if (this._showLeftPanel !== value) { + this._showLeftPanel = value; + this.panelVisibilityChanged.emit(); + } + } + + get showRightPanel(): boolean { + return this._showRightPanel; + } + set showRightPanel(value: boolean) { + if (this._showRightPanel !== value) { + this._showRightPanel = value; + this.panelVisibilityChanged.emit(); + } + } + + toggleLeftPanel(): void { + this.showLeftPanel = !this.showLeftPanel; + this.panelVisibilityChanged.emit(); + } + + toggleRightPanel(): void { + this.showRightPanel = !this.showRightPanel; + this.panelVisibilityChanged.emit(); + } + readonly defaultKernelName: string = ''; readonly defaultKernelLanguage: string = ''; readonly annotationModel?: IAnnotationModel; @@ -786,6 +817,8 @@ export class JupyterGISModel implements IJupyterGISModel { private _dirty = false; private _readOnly = false; private _isDisposed = false; + private _showLeftPanel = true; + private _showRightPanel = true; private _userChanged = new Signal(this); private _usersMap?: Map;