Sync settings before/after opening document

packages/base/src/mainview/mainView.tsx

@@ -34,6 +34,7 @@ import {
   JupyterGISModel,
   IMarkerSource,
   IStorySegmentLayer,
+  IJupyterGISSettings,
 } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
@@ -153,6 +154,7 @@ interface IStates {
   loadingErrors: Array<{ id: string; error: any; index: number }>;
   displayTemporalController: boolean;
   filterStates: IDict<IJGISFilterItem | undefined>;
+  jgisSettings: IJupyterGISSettings;
   isSpectaPresentation: boolean;
 }
 
@@ -231,6 +233,10 @@ export class MainView extends React.Component<IProps, IStates> {
       this,
     );
 
+    Promise.resolve().then(() => {
+      this._syncSettingsFromRegistry();
+    });
+
     // Watch isIdentifying and clear the highlight when Identify Tool is turned off
     this._model.sharedModel.awareness.on('change', () => {
       if (this._model.currentMode !== 'identifying' && this._highlightLayer) {
@@ -250,6 +256,7 @@ export class MainView extends React.Component<IProps, IStates> {
       loadingErrors: [],
       displayTemporalController: false,
       filterStates: {},
+      jgisSettings: this._model.jgisSettings,
       isSpectaPresentation: false,
     };
 
@@ -1833,8 +1840,18 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   }
 
-  private _onSettingsChanged(sender: IJupyterGISModel, key: string): void {
-    if (key !== 'zoomButtonsEnabled' || !this._Map) {
+  private async _syncSettingsFromRegistry() {
+    const composite = this._model.jgisSettings;
+    if (composite) {
+      this.setState({ jgisSettings: composite });
+      this._onSettingsChanged();
+    }
+  }
+
+  private _onSettingsChanged(): void {
+    this.setState({ jgisSettings: this._model.jgisSettings });
+
+    if (!this._Map) {
       return;
     }
 
@@ -2749,6 +2766,7 @@ export class MainView extends React.Component<IProps, IStates> {
                         model={this._model}
                         commands={this._mainViewModel.commands}
                         state={this._state}
+                        settings={this.state.jgisSettings}
                       />
                     )}
                     {this._formSchemaRegistry && this._annotationModel && (
@@ -2757,6 +2775,7 @@ export class MainView extends React.Component<IProps, IStates> {
                         commands={this._mainViewModel.commands}
                         formSchemaRegistry={this._formSchemaRegistry}
                         annotationModel={this._annotationModel}
+                        settings={this.state.jgisSettings}
                       />
                     )}
                   </>

packages/base/src/panelview/leftpanel.tsx

@@ -3,6 +3,7 @@ import {
   IJGISLayerItem,
   IJGISLayerTree,
   SelectionType,
+  IJupyterGISSettings,
 } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
@@ -29,37 +30,32 @@ interface ILeftPanelProps {
   model: IJupyterGISModel;
   state: IStateDB;
   commands: CommandRegistry;
+  settings: IJupyterGISSettings;
 }
 
 export const LeftPanel: React.FC<ILeftPanelProps> = (
   props: ILeftPanelProps,
 ) => {
-  const [settings, setSettings] = React.useState(props.model.jgisSettings);
   const [options, setOptions] = React.useState(props.model.getOptions());
   const storyMapPresentationMode = options.storyMapPresentationMode ?? false;
   const [layerTree, setLayerTree] = React.useState<IJGISLayerTree>(
     props.model.getLayerTree(),
   );
 
   React.useEffect(() => {
-    const onSettingsChanged = () => {
-      setSettings({ ...props.model.jgisSettings });
-    };
     const onOptionsChanged = () => {
       setOptions({ ...props.model.getOptions() });
     };
     const updateLayerTree = () => {
       setLayerTree(props.model.getLayerTree() || []);
     };
 
-    props.model.settingsChanged.connect(onSettingsChanged);
     props.model.sharedOptionsChanged.connect(onOptionsChanged);
     props.model.sharedModel.layersChanged.connect(updateLayerTree);
     props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
 
     updateLayerTree();
     return () => {
-      props.model.settingsChanged.disconnect(onSettingsChanged);
       props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
       props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
       props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
@@ -146,22 +142,25 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
   }, [storySegmentLayerTree]);
 
   const allLeftTabsDisabled =
-    settings.layersDisabled &&
-    settings.stacBrowserDisabled &&
-    settings.filtersDisabled &&
-    settings.storyMapsDisabled;
+    props.settings.layersDisabled &&
+    props.settings.stacBrowserDisabled &&
+    props.settings.filtersDisabled &&
+    props.settings.storyMapsDisabled;
 
-  const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
+  const leftPanelVisible =
+    !props.settings.leftPanelDisabled && !allLeftTabsDisabled;
 
   const tabInfo = [
-    !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-    !settings.stacBrowserDisabled && !storyMapPresentationMode
+    !props.settings.layersDisabled
+      ? { name: 'layers', title: 'Layers' }
+      : false,
+    !props.settings.stacBrowserDisabled && !storyMapPresentationMode
       ? { name: 'stac', title: 'Stac Browser' }
       : false,
-    !settings.filtersDisabled && !storyMapPresentationMode
+    !props.settings.filtersDisabled && !storyMapPresentationMode
       ? { name: 'filters', title: 'Filters' }
       : false,
-    !settings.storyMapsDisabled
+    !props.settings.storyMapsDisabled
       ? { name: 'segments', title: 'Segments' }
       : false,
   ].filter(Boolean) as { name: string; title: string }[];
@@ -195,7 +194,7 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
           ))}
         </TabsList>
 
-        {!settings.layersDisabled && (
+        {!props.settings.layersDisabled && (
           <TabsContent
             value="layers"
             className="jgis-panel-tab-content jp-gis-layerPanel"
@@ -209,7 +208,7 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
           </TabsContent>
         )}
 
-        {!settings.stacBrowserDisabled && (
+        {!props.settings.stacBrowserDisabled && (
           <TabsContent
             value="stac"
             className="jgis-panel-tab-content jgis-panel-tab-content-stac-panel"
@@ -218,13 +217,13 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
           </TabsContent>
         )}
 
-        {!settings.filtersDisabled && (
+        {!props.settings.filtersDisabled && (
           <TabsContent value="filters" className="jgis-panel-tab-content">
             <FilterComponent model={props.model}></FilterComponent>
           </TabsContent>
         )}
 
-        {!settings.storyMapsDisabled && (
+        {!props.settings.storyMapsDisabled && (
           <TabsContent value="segments" className="jgis-panel-tab-content">
             <LayersBodyComponent
               model={props.model}

packages/base/src/panelview/rightpanel.tsx

@@ -3,6 +3,7 @@ import {
   IJGISFormSchemaRegistry,
   IJupyterGISClientState,
   IJupyterGISModel,
+  IJupyterGISSettings,
 } from '@jupytergis/schema';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
@@ -25,11 +26,11 @@ interface IRightPanelProps {
   annotationModel: IAnnotationModel;
   model: IJupyterGISModel;
   commands: CommandRegistry;
+  settings: IJupyterGISSettings;
 }
 
 export const RightPanel: React.FC<IRightPanelProps> = props => {
   const [editorMode, setEditorMode] = React.useState(true);
-  const [settings, setSettings] = React.useState(props.model.jgisSettings);
   const [storyMapPresentationMode, setStoryMapPresentationMode] =
     React.useState(props.model.getOptions().storyMapPresentationMode ?? false);
 
@@ -44,19 +45,19 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
       : 'Story Map';
 
   const tabInfo = [
-    !settings.objectPropertiesDisabled && !storyMapPresentationMode
+    !props.settings.objectPropertiesDisabled && !storyMapPresentationMode
       ? { name: 'objectProperties', title: 'Object Properties' }
       : false,
-    !settings.storyMapsDisabled
+    !props.settings.storyMapsDisabled
       ? {
           name: 'storyPanel',
           title: storyPanelTitle,
         }
       : false,
-    !settings.annotationsDisabled
+    !props.settings.annotationsDisabled
       ? { name: 'annotations', title: 'Annotations' }
       : false,
-    !settings.identifyDisabled
+    !props.settings.identifyDisabled
       ? { name: 'identifyPanel', title: 'Identified Features' }
       : false,
   ].filter(Boolean) as { name: string; title: string }[];
@@ -69,9 +70,6 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
   });
 
   React.useEffect(() => {
-    const onSettingsChanged = () => {
-      setSettings({ ...props.model.jgisSettings });
-    };
     const onOptionsChanged = () => {
       const { storyMapPresentationMode } = props.model.getOptions();
       setStoryMapPresentationMode(storyMapPresentationMode ?? false);
@@ -94,24 +92,22 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
       }
     };
 
-    props.model.settingsChanged.connect(onSettingsChanged);
     props.model.sharedOptionsChanged.connect(onOptionsChanged);
     props.model.clientStateChanged.connect(onAwerenessChanged);
 
     return () => {
-      props.model.settingsChanged.disconnect(onSettingsChanged);
       props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
       props.model.clientStateChanged.disconnect(onAwerenessChanged);
     };
   }, [props.model]);
 
   const allRightTabsDisabled =
-    settings.objectPropertiesDisabled &&
-    settings.annotationsDisabled &&
-    settings.identifyDisabled;
+    props.settings.objectPropertiesDisabled &&
+    props.settings.annotationsDisabled &&
+    props.settings.identifyDisabled;
 
   const rightPanelVisible =
-    !settings.rightPanelDisabled && !allRightTabsDisabled;
+    !props.settings.rightPanelDisabled && !allRightTabsDisabled;
 
   const [selectedObjectProperties, setSelectedObjectProperties] =
     React.useState(undefined);
@@ -145,7 +141,7 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           ))}
         </TabsList>
 
-        {!settings.objectPropertiesDisabled && (
+        {!props.settings.objectPropertiesDisabled && (
           <TabsContent
             value="objectProperties"
             className="jgis-panel-tab-content"
@@ -159,7 +155,7 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           </TabsContent>
         )}
 
-        {!settings.storyMapsDisabled && (
+        {!props.settings.storyMapsDisabled && (
           <TabsContent
             value="storyPanel"
             className="jgis-panel-tab-content"
@@ -180,7 +176,7 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           </TabsContent>
         )}
 
-        {!settings.annotationsDisabled && (
+        {!props.settings.annotationsDisabled && (
           <TabsContent value="annotations" className="jgis-panel-tab-content">
             <AnnotationsPanel
               annotationModel={props.annotationModel}
@@ -189,7 +185,7 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           </TabsContent>
         )}
 
-        {!settings.identifyDisabled && (
+        {!props.settings.identifyDisabled && (
           <TabsContent value="identifyPanel" className="jgis-panel-tab-content">
             <IdentifyPanelComponent
               model={props.model}