persistent side-by-side ratio setting

Author: echarles

packages/notebook-extension/schema/tracker.json

@@ -922,6 +922,13 @@
       "description": "Side-by-side right margin override.",
       "type": "string",
       "default": "10px"
+    },
+    "sideBySideOutputRatio": {
+      "title": "Side-by-side output ratio",
+      "description": "For the side-by-side rendering, the side-by-side output ratio defines the width of the output vs the input. Set 1 for same size, > 1 for larger output, < 1 for smaller output.",
+      "type": "number",
+      "default": 1,
+      "minimum": 0
     }
   },
   "additionalProperties": false,

packages/notebook-extension/src/index.ts

@@ -1381,6 +1381,12 @@ function activateNotebookHandler(
     return Private.isEnabled(shell, tracker);
   };
 
+  const setSideBySideOutputRatio = (sideBySideOutputRatio: number) =>
+    document.documentElement.style.setProperty(
+      '--jp-side-by-side-output-size',
+      `${sideBySideOutputRatio}fr`
+    );
+
   // Fetch settings if possible.
   const fetchSettings = settingRegistry
     ? settingRegistry.load(trackerPlugin.id)
@@ -1422,6 +1428,22 @@ function activateNotebookHandler(
             x => (settings.get(x).composite as JSONObject).autoClosingBrackets
           )
       });
+      commands.addCommand(CommandIDs.setSideBySideRatio, {
+        label: trans.__('Set side-by-side ratio'),
+        execute: args => {
+          InputDialog.getNumber({
+            title: trans.__('Width of the output in side-by-side mode'),
+            value: settings.get('sideBySideOutputRatio').composite as number
+          })
+            .then(result => {
+              setSideBySideOutputRatio(result.value!);
+              if (result.value) {
+                settings.set('sideBySideOutputRatio', result.value);
+              }
+            })
+            .catch(console.error);
+        }
+      });
     })
     .catch((reason: Error) => {
       console.warn(reason.message);
@@ -1534,8 +1556,11 @@ function activateNotebookHandler(
         .composite as string,
       sideBySideRightMarginOverride: settings.get(
         'sideBySideRightMarginOverride'
-      ).composite as string
+      ).composite as string,
+      sideBySideOutputRatio: settings.get('sideBySideOutputRatio')
+        .composite as number
     };
+    setSideBySideOutputRatio(factory.notebookConfig.sideBySideOutputRatio);
     const sideBySideMarginStyle = `.jp-mod-sideBySide.jp-Notebook .jp-Notebook-cell {
       margin-left: ${factory.notebookConfig.sideBySideLeftMarginOverride} !important;
       margin-right: ${factory.notebookConfig.sideBySideRightMarginOverride} !important;`;
@@ -2698,24 +2723,6 @@ function addCommands(
     }
   });
 
-  commands.addCommand(CommandIDs.setSideBySideRatio, {
-    label: trans.__('Set side-by-side ratio'),
-    execute: args => {
-      InputDialog.getNumber({
-        title: trans.__('Width of the output in side-by-side mode'),
-        value: 1
-      })
-        .then(result => {
-          if (result.value) {
-            document.documentElement.style.setProperty(
-              '--jp-side-by-side-output-size',
-              `${result.value}fr`
-            );
-          }
-        })
-        .catch(console.error);
-    }
-  });
   commands.addCommand(CommandIDs.showAllOutputs, {
     label: trans.__('Expand All Outputs'),
     execute: args => {

packages/notebook/src/widget.ts

@@ -1105,6 +1105,11 @@ export namespace StaticNotebook {
      * Override the side-by-side right margin.
      */
     sideBySideRightMarginOverride: string;
+
+    /**
+     * Side-by-side output ratio.
+     */
+    sideBySideOutputRatio: number;
   }
 
   /**
@@ -1125,7 +1130,8 @@ export namespace StaticNotebook {
     disableDocumentWideUndoRedo: false,
     renderingLayout: 'default',
     sideBySideLeftMarginOverride: '10px',
-    sideBySideRightMarginOverride: '10px'
+    sideBySideRightMarginOverride: '10px',
+    sideBySideOutputRatio: 1
   };
 
   /**

packages/notebook/test/widget.spec.ts

@@ -47,7 +47,8 @@ const notebookConfig = {
   disableDocumentWideUndoRedo: true,
   renderingLayout: 'default' as 'default' | 'side-by-side',
   sideBySideLeftMarginOverride: '10px',
-  sideBySideRightMarginOverride: '10px'
+  sideBySideRightMarginOverride: '10px',
+  sideBySideOutputRatio: 1
 };
 
 const options: Notebook.IOptions = {