Put presentation mode toggle in options

Author: gjmooney

packages/base/src/panelview/leftpanel.tsx

@@ -35,6 +35,8 @@ 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 storyMapPresentation = options.storyMapPresentation ?? false;
   const [layerTree, setLayerTree] = React.useState<IJGISLayerTree>(
     props.model.getLayerTree(),
   );
@@ -43,17 +45,22 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
     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);
     };
@@ -147,10 +154,10 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
 
   const tabInfo = [
     !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-    !settings.stacBrowserDisabled && settings.storyMapPresentationDisabled
+    !settings.stacBrowserDisabled && !storyMapPresentation
       ? { name: 'stac', title: 'Stac Browser' }
       : false,
-    !settings.filtersDisabled && settings.storyMapPresentationDisabled
+    !settings.filtersDisabled && !storyMapPresentation
       ? { name: 'filters', title: 'Filters' }
       : false,
     { name: 'segments', title: 'Segments' },

packages/base/src/panelview/rightpanel.tsx

@@ -28,8 +28,10 @@ interface IRightPanelProps {
 export const RightPanel: React.FC<IRightPanelProps> = props => {
   const [displayEditor, setDisplayEditor] = React.useState(true);
   const [settings, setSettings] = React.useState(props.model.jgisSettings);
+  const [options, setOptions] = React.useState(props.model.getOptions());
+  const storyMapPresentation = options.storyMapPresentation ?? false;
   const tabInfo = [
-    !settings.objectPropertiesDisabled && settings.storyMapPresentationDisabled
+    !settings.objectPropertiesDisabled && !storyMapPresentation
       ? { name: 'objectProperties', title: 'Object Properties' }
       : false,
     {
@@ -45,7 +47,7 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
   ].filter(Boolean) as { name: string; title: string }[];
 
   const [curTab, setCurTab] = React.useState<string>(() => {
-    if (!settings.storyMapPresentationDisabled) {
+    if (storyMapPresentation) {
       return 'storyPanel';
     }
     return tabInfo.length > 0 ? tabInfo[0].name : '';
@@ -55,6 +57,9 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
     const onSettingsChanged = () => {
       setSettings({ ...props.model.jgisSettings });
     };
+    const onOptionsChanged = () => {
+      setOptions({ ...props.model.getOptions() });
+    };
     let currentlyIdentifiedFeatures: any = undefined;
     const onAwerenessChanged = (
       _: IJupyterGISModel,
@@ -74,10 +79,12 @@ 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]);
@@ -142,13 +149,13 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           style={{ paddingTop: 0 }}
         >
           <div style={{ padding: '0 0.5rem 0.5rem 0.5rem' }}>
-            {settings.storyMapPresentationDisabled && (
+            {!storyMapPresentation && (
               <PreviewModeSwitch
                 checked={!displayEditor}
                 onCheckedChange={toggleEditor}
               />
             )}
-            {!settings.storyMapPresentationDisabled || !displayEditor ? (
+            {storyMapPresentation || !displayEditor ? (
               <StoryViewerPanel model={props.model} />
             ) : (
               <StoryEditorPanel model={props.model} />

packages/schema/src/interfaces.ts

@@ -422,7 +422,4 @@ export interface IJupyterGISSettings {
   objectPropertiesDisabled?: boolean;
   annotationsDisabled?: boolean;
   identifyDisabled?: boolean;
-
-  // Story maps
-  storyMapPresentationDisabled: boolean;
 }

packages/schema/src/model.ts

@@ -54,7 +54,6 @@ const DEFAULT_SETTINGS: IJupyterGISSettings = {
   objectPropertiesDisabled: false,
   annotationsDisabled: false,
   identifyDisabled: false,
-  storyMapPresentationDisabled: true,
 };
 
 export class JupyterGISModel implements IJupyterGISModel {

packages/schema/src/schema/project/jgis.json

@@ -226,6 +226,11 @@
         "useExtent": {
           "type": "boolean",
           "default": false
+        },
+        "storyMapPresentation": {
+          "type": "boolean",
+          "title": "Enable Story Map Presentations",
+          "default": false
         }
       }
     },

python/jupytergis_core/schema/jupytergis-settings.json

@@ -43,11 +43,6 @@
       "type": "boolean",
       "title": "Disable Right Panel",
       "default": false
-    },
-    "storyMapPresentationDisabled": {
-      "type": "boolean",
-      "title": "Disable Story Map Presentations",
-      "default": true
     }
   }
 }