Adding Toggle button for Left and Right panel for UI visibility

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';

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.
    */

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' },
 };
 
 /**

packages/base/src/mainview/mainView.tsx

@@ -133,6 +133,8 @@ interface IStates {
   loadingErrors: Array<{ id: string; error: any; index: number }>;
   displayTemporalController: boolean;
   filterStates: IDict<IJGISFilterItem | undefined>;
+  showLeftPanel: boolean;
+  showRightPanel: boolean;
 }
 
 export class MainView extends React.Component<IProps, IStates> {
@@ -229,6 +231,8 @@ export class MainView extends React.Component<IProps, IStates> {
       loadingErrors: [],
       displayTemporalController: false,
       filterStates: {},
+      showLeftPanel: this._model.showLeftPanel,
+      showRightPanel: this._model.showRightPanel,
     };
 
     this._sources = [];
@@ -255,6 +259,11 @@ export class MainView extends React.Component<IProps, IStates> {
     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<IProps, IStates> {
       this,
     );
 
+    this._model.panelVisibilityChanged.disconnect(
+      this._onPanelVisibilityChanged,
+      this,
+    );
     this._mainViewModel.dispose();
   }
 
@@ -2235,6 +2248,13 @@ export class MainView extends React.Component<IProps, IStates> {
     // 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<IProps, IStates> {
           />
         </div>
 
-        {this._state && (
+        {this._state && this.state.showLeftPanel && (
           <LeftPanel
             model={this._model}
             commands={this._mainViewModel.commands}
             state={this._state}
           ></LeftPanel>
         )}
-        {this._formSchemaRegistry && this._annotationModel && (
-          <RightPanel
-            model={this._model}
-            formSchemaRegistry={this._formSchemaRegistry}
-            annotationModel={this._annotationModel}
-          ></RightPanel>
-        )}
+        {this._formSchemaRegistry &&
+          this._annotationModel &&
+          this.state.showRightPanel && (
+            <RightPanel
+              model={this._model}
+              formSchemaRegistry={this._formSchemaRegistry}
+              annotationModel={this._annotationModel}
+            ></RightPanel>
+          )}
       </>
     );
   }

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

packages/schema/src/interfaces.ts

@@ -181,6 +181,8 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   flyToGeometrySignal: Signal<IJupyterGISModel, any>;
   highlightFeatureSignal: Signal<IJupyterGISModel, any>;
   updateBboxSignal: Signal<IJupyterGISModel, any>;
+  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<this, void>;
   disposed: ISignal<any, void>;
 }
 

packages/schema/src/model.ts

@@ -305,6 +305,7 @@ export class JupyterGISModel implements IJupyterGISModel {
   readonly flyToGeometrySignal = new Signal<this, any>(this);
   readonly highlightFeatureSignal = new Signal<this, any>(this);
   readonly updateBboxSignal = new Signal<this, any>(this);
+  readonly panelVisibilityChanged = new Signal<this, void>(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, IUserData[]>(this);
   private _usersMap?: Map<number, any>;