add output size option

README.md

@@ -115,10 +115,11 @@ By default, when you open a notebook in Specta, all code cells are hidden, and p
 
 ![Cell toolbar](./docs/images/specta-config.jpg)
 
-By opening the `Property Inspector` panel of JupyterLab and selecting the `Specta Cell Config` section, you can change the visibility of each cell as follows:
+By opening the `Property Inspector` panel of JupyterLab and selecting the `Specta Cell Config` section, you can change the display of each cell as follows:
 
 - `Show cell source`: use this toggle to show or hide the cell source code. Default to `false`
 - `Show output placeholder`: use this toggle to show or hide the output skeleton. Default to `true`
+- `Output size`: use this dropdown to select the size of the cell output. Default to `Small`
 
 ### Slides layout configuration
 

demo/files/blog.ipynb

@@ -11,7 +11,11 @@
   {
    "cell_type": "markdown",
    "id": "21b59e76",
-   "metadata": {},
+   "metadata": {
+    "specta": {
+     "outputSize":"Full"
+    }
+   },
    "source": [
     "![Banner](./top.jpeg \"Banner\")\n"
    ]
@@ -231,7 +235,8 @@
    "id": "2b2c01c4",
    "metadata": {
     "specta": {
-     "showSource": "Yes"
+     "showSource": "Yes",
+     "outputSize":"Big"
     },
     "tags": [
      "specta:visible"

schema/cell-meta.json

@@ -20,6 +20,12 @@
             "type": "string",
             "enum": ["Yes", "No"],
             "default": "Yes"
+          },
+          "/specta/outputSize": {
+            "title": "Output size",
+            "type": "string",
+            "enum": ["Small", "Big", "Full"],
+            "default": "Small"
           }
         }
       },
@@ -29,6 +35,9 @@
         },
         "/specta/showOutput": {
           "writeDefault": false
+        },
+        "/specta/outputSize": {
+          "writeDefault": false
         }
       }
     }

src/specta_cell_output.tsx

@@ -25,10 +25,16 @@ export class SpectaCellOutput extends Panel {
     cellConfig: Required<ISpectaCellConfig>;
   }) {
     super();
+    const { showOutput, outputSize } = cellConfig;
     this.removeClass('lm-Widget');
     this.removeClass('p-Widget');
     this.addClass('specta-cell-output');
 
+    if (outputSize === 'Big') {
+      this.addClass('specta-cell-output-big');
+    } else if (outputSize === 'Full') {
+      this.addClass('specta-cell-output-full');
+    }
     const content = new Panel();
     content.addClass('specta-cell-content');
 
@@ -42,7 +48,7 @@ export class SpectaCellOutput extends Panel {
     this.cellIdentity = cellIdentity;
     this._info = info ?? {};
     if (info.cellModel?.cell_type === 'code') {
-      if (cellConfig.showOutput) {
+      if (showOutput) {
         this._placeholder = ReactWidget.create(<RandomSkeleton />);
         this._placeholder.addClass('specta-cell-placeholder');
         this.addWidget(this._placeholder);

src/token.ts

@@ -61,6 +61,7 @@ export interface ISpectaAppConfig {
 export interface ISpectaCellConfig {
   showSource?: boolean;
   showOutput?: boolean;
+  outputSize?: 'Small' | 'Big' | 'Full';
 }
 export const ISpectaLayoutRegistry = new Token<ISpectaLayoutRegistry>(
   'specta:ISpectaLayoutRegistry'

src/tool.ts

@@ -191,7 +191,8 @@ export function readCellConfig(cell?: ICell): Required<ISpectaCellConfig> {
   const metaData = (cell?.metadata?.specta ?? {}) as any;
   const spectaCellConfig: Required<ISpectaCellConfig> = {
     showSource: false,
-    showOutput: true
+    showOutput: true,
+    outputSize: 'Small'
   };
 
   if (metaData.showSource && metaData.showSource === 'Yes') {
@@ -202,6 +203,10 @@ export function readCellConfig(cell?: ICell): Required<ISpectaCellConfig> {
     spectaCellConfig.showOutput = false;
   }
 
+  if (metaData.outputSize) {
+    spectaCellConfig.outputSize = metaData.outputSize;
+  }
+
   return spectaCellConfig;
 }