Use story mode setting and option to update UI

Author: gjmooney

packages/base/src/commands/index.ts

@@ -1057,9 +1057,14 @@ export function addCommands(
   commands.addCommand(CommandIDs.addStorySegment, {
     label: trans.__('Add Story Segment'),
     isEnabled: () => {
-      return tracker.currentWidget
-        ? tracker.currentWidget.model.sharedModel.editable
-        : false;
+      const current = tracker.currentWidget;
+      if (!current) {
+        return false;
+      }
+      return (
+        current.model.sharedModel.editable &&
+        !current.model.jgisSettings.storyMapsDisabled
+      );
     },
     execute: args => {
       const current = tracker.currentWidget;

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 storyMapPresentationMode = options.storyMapPresentationMode ?? 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);
     };
@@ -141,19 +148,22 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
   const allLeftTabsDisabled =
     settings.layersDisabled &&
     settings.stacBrowserDisabled &&
-    settings.filtersDisabled;
+    settings.filtersDisabled &&
+    settings.storyMapsDisabled;
 
   const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
 
   const tabInfo = [
     !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-    !settings.stacBrowserDisabled && settings.storyMapPresentationDisabled
+    !settings.stacBrowserDisabled && !storyMapPresentationMode
       ? { name: 'stac', title: 'Stac Browser' }
       : false,
-    !settings.filtersDisabled && settings.storyMapPresentationDisabled
+    !settings.filtersDisabled && !storyMapPresentationMode
       ? { name: 'filters', title: 'Filters' }
       : false,
-    { name: 'segments', title: 'Segments' },
+    !settings.storyMapsDisabled
+      ? { name: 'segments', title: 'Segments' }
+      : false,
   ].filter(Boolean) as { name: string; title: string }[];
 
   const [curTab, setCurTab] = React.useState<string | undefined>(
@@ -211,14 +221,16 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
           </TabsContent>
         )}
 
-        <TabsContent value="segments" className="jgis-panel-tab-content">
-          <LayersBodyComponent
-            model={props.model}
-            commands={props.commands}
-            state={props.state}
-            layerTree={storySegmentLayerTree}
-          ></LayersBodyComponent>
-        </TabsContent>
+        {!settings.storyMapsDisabled && (
+          <TabsContent value="segments" className="jgis-panel-tab-content">
+            <LayersBodyComponent
+              model={props.model}
+              commands={props.commands}
+              state={props.state}
+              layerTree={storySegmentLayerTree}
+            ></LayersBodyComponent>
+          </TabsContent>
+        )}
       </PanelTabs>
     </div>
   );

packages/base/src/panelview/rightpanel.tsx

@@ -28,14 +28,19 @@ 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 storyMapPresentationMode = options.storyMapPresentationMode ?? false;
   const tabInfo = [
-    !settings.objectPropertiesDisabled && settings.storyMapPresentationDisabled
+    !settings.objectPropertiesDisabled && !storyMapPresentationMode
       ? { name: 'objectProperties', title: 'Object Properties' }
       : false,
-    {
-      name: 'storyPanel',
-      title: displayEditor ? 'Story Editor' : 'Story Map',
-    },
+    !settings.storyMapsDisabled
+      ? {
+          name: 'storyPanel',
+          title: displayEditor ? 'Story Editor' : 'Story Map',
+        }
+      : false,
     !settings.annotationsDisabled
       ? { name: 'annotations', title: 'Annotations' }
       : false,
@@ -45,7 +50,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 (!settings.storyMapsDisabled) {
       return 'storyPanel';
     }
     return tabInfo.length > 0 ? tabInfo[0].name : '';
@@ -55,6 +60,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 +82,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]);
@@ -136,25 +146,28 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           </TabsContent>
         )}
 
-        <TabsContent
-          value="storyPanel"
-          className="jgis-panel-tab-content"
-          style={{ paddingTop: 0 }}
-        >
-          <div style={{ padding: '0 0.5rem 0.5rem 0.5rem' }}>
-            {settings.storyMapPresentationDisabled && (
-              <PreviewModeSwitch
-                checked={!displayEditor}
-                onCheckedChange={toggleEditor}
-              />
-            )}
-            {!settings.storyMapPresentationDisabled || !displayEditor ? (
-              <StoryViewerPanel model={props.model} />
-            ) : (
-              <StoryEditorPanel model={props.model} />
-            )}
-          </div>
-        </TabsContent>
+        {!settings.storyMapsDisabled && (
+          <TabsContent
+            value="storyPanel"
+            className="jgis-panel-tab-content"
+            style={{ paddingTop: 0 }}
+          >
+            <div style={{ padding: '0 0.5rem 0.5rem 0.5rem' }}>
+              {/* Don't want to see the toggle switch in presentation mode */}
+              {!storyMapPresentationMode && (
+                <PreviewModeSwitch
+                  checked={!displayEditor}
+                  onCheckedChange={toggleEditor}
+                />
+              )}
+              {storyMapPresentationMode || !displayEditor ? (
+                <StoryViewerPanel model={props.model} />
+              ) : (
+                <StoryEditorPanel model={props.model} />
+              )}
+            </div>
+          </TabsContent>
+        )}
 
         {!settings.annotationsDisabled && (
           <TabsContent value="annotations" className="jgis-panel-tab-content">

packages/base/src/toolbar/widget.tsx

@@ -64,6 +64,7 @@ function createUserIconRenderer(model: JupyterGISModel) {
 
 export class ToolbarWidget extends ReactiveToolbar {
   private _model: JupyterGISModel;
+  private _newSubMenu: MenuSvg | null = null;
 
   constructor(options: ToolbarWidget.IOptions) {
     super();
@@ -83,6 +84,7 @@ export class ToolbarWidget extends ReactiveToolbar {
 
       const NewSubMenu = new MenuSvg({ commands: options.commands });
       NewSubMenu.title.label = 'Add Layer';
+      this._newSubMenu = NewSubMenu;
 
       NewSubMenu.addItem({
         type: 'submenu',
@@ -92,9 +94,11 @@ export class ToolbarWidget extends ReactiveToolbar {
         type: 'submenu',
         submenu: vectorSubMenu(options.commands),
       });
-      NewSubMenu.addItem({
-        command: CommandIDs.addStorySegment,
-      });
+
+      this._updateStorySegmentMenuItem();
+
+      // Listen for settings changes
+      this._model.settingsChanged.connect(this._onSettingsChanged, this);
 
       const NewEntryButton = new ToolbarButton({
         icon: addIcon,
@@ -175,6 +179,58 @@ export class ToolbarWidget extends ReactiveToolbar {
       );
     }
   }
+
+  /**
+   * Updates the story segment menu item based on settings
+   */
+  private _updateStorySegmentMenuItem(): void {
+    if (!this._newSubMenu) {
+      return;
+    }
+
+    const shouldShow = !this._model.jgisSettings.storyMapsDisabled;
+
+    // Find if the item already exists by checking menu items
+    let itemIndex: number | null = null;
+    for (let i = 0; i < this._newSubMenu.items.length; i++) {
+      const item = this._newSubMenu.items[i];
+      if (
+        item.type === 'command' &&
+        item.command === CommandIDs.addStorySegment
+      ) {
+        itemIndex = i;
+        break;
+      }
+    }
+
+    const isCurrentlyAdded = itemIndex !== null;
+
+    if (shouldShow && !isCurrentlyAdded) {
+      this._newSubMenu.addItem({
+        command: CommandIDs.addStorySegment,
+      });
+    } else if (!shouldShow && isCurrentlyAdded) {
+      if (itemIndex !== null) {
+        this._newSubMenu.removeItemAt(itemIndex);
+      }
+    }
+  }
+
+  /**
+   * Handles settings changes
+   */
+  private _onSettingsChanged = (sender: JupyterGISModel, key: string): void => {
+    if (key === 'storyMapsDisabled') {
+      this._updateStorySegmentMenuItem();
+    }
+  };
+
+  dispose(): void {
+    if (this._model) {
+      this._model.settingsChanged.disconnect(this._onSettingsChanged, this);
+    }
+    super.dispose();
+  }
 }
 
 export namespace ToolbarWidget {

packages/schema/src/model.ts

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