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,33 @@ 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 { settings } = props;
   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);

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,12 @@ interface IRightPanelProps {
   annotationModel: IAnnotationModel;
   model: IJupyterGISModel;
   commands: CommandRegistry;
+  settings: IJupyterGISSettings;
 }
 
 export const RightPanel: React.FC<IRightPanelProps> = props => {
+  const { settings } = 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);
 
@@ -69,9 +71,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,12 +93,10 @@ 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);
     };