Backport on 3.3.x: Toggle side-by-side rendering for current notebook (#11793) (#11794)

* Revert "Revert "Backport/3.2.x/11608 Toggle side-by-side rendering for current notebook" (#11793)"

This reverts commit df6c0ee4124aa61e9a93c765f582caee6f078f0f.

* Remove `showHiddenCellsButton`

packages/notebook-extension/schema/tracker.json

@@ -165,7 +165,7 @@
             "rank": 11
           },
           {
-            "command": "notebook:toggle-render-side-by-side",
+            "command": "notebook:toggle-render-side-by-side-current",
             "rank": 12
           },
           {
@@ -585,6 +585,11 @@
     },
     {
       "command": "notebook:toggle-render-side-by-side",
+      "keys": ["Ctrl Shift R"],
+      "selector": ".jp-Notebook:focus"
+    },
+    {
+      "command": "notebook:toggle-render-side-by-side-current",
       "keys": ["Shift R"],
       "selector": ".jp-Notebook:focus"
     }
@@ -824,11 +829,11 @@
       "type": "boolean",
       "default": false
     },
-    "sideBySideRendering": {
-      "title": "Side-by-side rendering",
-      "description": "Global setting to enable side-by-side rendering in notebooks",
-      "type": "boolean",
-      "default": false
+    "renderingLayout": {
+      "title": "Rendering Layout",
+      "description": "Global setting to define the rendering layout in notebooks. 'default' or 'side-by-side' are supported.",
+      "type": "string",
+      "default": "default"
     }
   },
   "additionalProperties": false,

packages/notebook-extension/src/index.ts

@@ -239,7 +239,8 @@ namespace CommandIDs {
 
   export const showAllOutputs = 'notebook:show-all-cell-outputs';
 
-  export const toggleRenderSideBySide = 'notebook:toggle-render-side-by-side';
+  export const toggleRenderSideBySideCurrentNotebook =
+    'notebook:toggle-render-side-by-side-current';
 
   export const setSideBySideRatio = 'notebook:set-side-by-side-ratio';
 
@@ -1191,7 +1192,10 @@ function activateNotebookHandler(
       maxNumberOutputs: settings.get('maxNumberOutputs').composite as number,
       disableDocumentWideUndoRedo: settings.get(
         'experimentalDisableDocumentWideUndoRedo'
-      ).composite as boolean
+      ).composite as boolean,
+      renderingLayout: settings.get('renderingLayout').composite as
+        | 'default'
+        | 'side-by-side'
     };
     factory.shutdownOnClose = settings.get('kernelShutdown')
       .composite as boolean;
@@ -1200,10 +1204,6 @@ function activateNotebookHandler(
       'experimentalDisableDocumentWideUndoRedo'
     ).composite as boolean;
 
-    Private.renderSideBySide = !settings.get('sideBySideRendering')
-      .composite as boolean;
-    commands.execute(CommandIDs.toggleRenderSideBySide);
-
     updateTracker({
       editorConfig: factory.editorConfig,
       notebookConfig: factory.notebookConfig,
@@ -2134,28 +2134,26 @@ function addCommands(
     isEnabled
   });
 
-  commands.addCommand(CommandIDs.toggleRenderSideBySide, {
-    label: trans.__('Render Side-by-side'),
+  commands.addCommand(CommandIDs.toggleRenderSideBySideCurrentNotebook, {
+    label: trans.__('Render Side-by-Side'),
     execute: args => {
-      Private.renderSideBySide = !Private.renderSideBySide;
-      tracker.forEach(widget => {
-        if (widget) {
-          if (Private.renderSideBySide) {
-            return NotebookActions.renderSideBySide(widget.content);
-          }
-          return NotebookActions.renderNotSideBySide(widget.content);
-        }
-      });
-      tracker.currentChanged.connect(() => {
-        if (Private.renderSideBySide && tracker.currentWidget) {
-          return NotebookActions.renderSideBySide(
-            tracker.currentWidget.content
-          );
+      const current = getCurrent(tracker, shell, args);
+      if (current) {
+        if (current.content.renderingLayout === 'side-by-side') {
+          return NotebookActions.renderDefault(current.content);
         }
-      });
+        return NotebookActions.renderSideBySide(current.content);
+      }
     },
-    isToggled: () => Private.renderSideBySide,
-    isEnabled
+    isEnabled,
+    isToggled: args => {
+      const current = getCurrent(tracker, shell, { ...args, activate: false });
+      if (current) {
+        return current.content.renderingLayout === 'side-by-side';
+      } else {
+        return false;
+      }
+    }
   });
 
   commands.addCommand(CommandIDs.setSideBySideRatio, {
@@ -2351,7 +2349,7 @@ function populatePalette(
     CommandIDs.showOutput,
     CommandIDs.hideAllOutputs,
     CommandIDs.showAllOutputs,
-    CommandIDs.toggleRenderSideBySide,
+    CommandIDs.toggleRenderSideBySideCurrentNotebook,
     CommandIDs.setSideBySideRatio,
     CommandIDs.enableOutputScrolling,
     CommandIDs.disableOutputScrolling
@@ -2711,6 +2709,4 @@ namespace Private {
       translator?: ITranslator;
     }
   }
-
-  export let renderSideBySide = false;
 }

packages/notebook/src/actions.tsx

@@ -33,8 +33,6 @@ import { Notebook, StaticNotebook } from './widget';
  */
 const JUPYTER_CELL_MIME = 'application/vnd.jupyter.cells';
 
-const SIDE_BY_SIDE_CLASS = 'jp-mod-sideBySide';
-
 export class KernelError extends Error {
   /**
    * Exception name
@@ -1331,7 +1329,7 @@ export namespace NotebookActions {
    * @param notebook - The target notebook widget.
    */
   export function renderSideBySide(notebook: Notebook): void {
-    notebook.node.classList.add(SIDE_BY_SIDE_CLASS);
+    notebook.renderingLayout = 'side-by-side';
   }
 
   /**
@@ -1339,8 +1337,8 @@ export namespace NotebookActions {
    *
    * @param notebook - The target notebook widget.
    */
-  export function renderNotSideBySide(notebook: Notebook): void {
-    notebook.node.classList.remove(SIDE_BY_SIDE_CLASS);
+  export function renderDefault(notebook: Notebook): void {
+    notebook.renderingLayout = 'default';
   }
 
   /**

packages/notebook/src/widget.ts

@@ -133,11 +133,18 @@ const DRAG_THRESHOLD = 5;
  */
 type InsertType = 'push' | 'insert' | 'set';
 
+/*
+ * The rendering mode for the notebook.
+ */
+type RenderingLayout = 'default' | 'side-by-side';
+
 /**
  * The class attached to the heading collapser button
  */
 const HEADING_COLLAPSER_CLASS = 'jp-collapseHeadingButton';
 
+const SIDE_BY_SIDE_CLASS = 'jp-mod-sideBySide';
+
 /**
  * The interactivity modes for the notebook.
  */
@@ -191,6 +198,7 @@ export class StaticNotebook extends Widget {
     this.notebookConfig =
       options.notebookConfig || StaticNotebook.defaultNotebookConfig;
     this._mimetypeService = options.mimeTypeService;
+    this.renderingLayout = options.notebookConfig?.renderingLayout;
 
     // Section for the virtual-notebook behavior.
     this._toRenderMap = new Map<string, { index: number; cell: Cell }>();
@@ -332,6 +340,18 @@ export class StaticNotebook extends Widget {
     this._updateNotebookConfig();
   }
 
+  get renderingLayout(): RenderingLayout | undefined {
+    return this._renderingLayout;
+  }
+  set renderingLayout(value: RenderingLayout | undefined) {
+    this._renderingLayout = value;
+    if (this._renderingLayout === 'side-by-side') {
+      this.node.classList.add(SIDE_BY_SIDE_CLASS);
+    } else {
+      this.node.classList.remove(SIDE_BY_SIDE_CLASS);
+    }
+  }
+
   /**
    * Dispose of the resources held by the widget.
    */
@@ -803,6 +823,7 @@ export class StaticNotebook extends Widget {
   private _renderedCellsCount = 0;
   private _toRenderMap: Map<string, { index: number; cell: Cell }>;
   private _cellsArray: Array<Cell>;
+  private _renderingLayout: RenderingLayout | undefined;
 }
 
 /**
@@ -971,6 +992,11 @@ export namespace StaticNotebook {
      * Defines if the document can be undo/redo.
      */
     disableDocumentWideUndoRedo: boolean;
+
+    /**
+     * Defines the rendering layout to use.
+     */
+    renderingLayout: RenderingLayout;
   }
 
   /**
@@ -985,7 +1011,8 @@ export namespace StaticNotebook {
     observedTopMargin: '1000px',
     observedBottomMargin: '1000px',
     maxNumberOutputs: 50,
-    disableDocumentWideUndoRedo: false
+    disableDocumentWideUndoRedo: false,
+    renderingLayout: 'default'
   };
 
   /**

packages/notebook/test/widget.spec.ts

@@ -42,7 +42,8 @@ const notebookConfig = {
   observedTopMargin: '1000px',
   observedBottomMargin: '1000px',
   maxNumberOutputs: 50,
-  disableDocumentWideUndoRedo: true
+  disableDocumentWideUndoRedo: true,
+  renderingLayout: 'default' as 'default' | 'side-by-side'
 };
 
 const options: Notebook.IOptions = {