jupyter-specta 0.3.1 → 0.3.2

package/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
 

package/lib/specta_cell_output.js

@@ -8,9 +8,16 @@ export class SpectaCellOutput extends Panel {
         super();
         this._info = {};
         this._placeholder = undefined;
+        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');
         cell.addClass('specta-item-widget');
@@ -23,7 +30,7 @@ export class SpectaCellOutput extends Panel {
         this.cellIdentity = cellIdentity;
         this._info = info !== null && info !== void 0 ? info : {};
         if (((_a = info.cellModel) === null || _a === void 0 ? void 0 : _a.cell_type) === 'code') {
-            if (cellConfig.showOutput) {
+            if (showOutput) {
                 this._placeholder = ReactWidget.create(React.createElement(RandomSkeleton, null));
                 this._placeholder.addClass('specta-cell-placeholder');
                 this.addWidget(this._placeholder);

package/lib/token.d.ts

@@ -61,6 +61,7 @@ export interface ISpectaAppConfig {
 export interface ISpectaCellConfig {
     showSource?: boolean;
     showOutput?: boolean;
+    outputSize?: 'Small' | 'Big' | 'Full';
 }
 export declare const ISpectaLayoutRegistry: Token<ISpectaLayoutRegistry>;
 export declare const ISpectaDocTracker: Token<IWidgetTracker<Widget>>;

package/lib/tool.js

@@ -144,7 +144,8 @@ export function readCellConfig(cell) {
     const metaData = ((_b = (_a = cell === null || cell === void 0 ? void 0 : cell.metadata) === null || _a === void 0 ? void 0 : _a.specta) !== null && _b !== void 0 ? _b : {});
     const spectaCellConfig = {
         showSource: false,
-        showOutput: true
+        showOutput: true,
+        outputSize: 'Small'
     };
     if (metaData.showSource && metaData.showSource === 'Yes') {
         spectaCellConfig.showSource = true;
@@ -152,6 +153,9 @@ export function readCellConfig(cell) {
     if (metaData.showOutput && metaData.showOutput === 'No') {
         spectaCellConfig.showOutput = false;
     }
+    if (metaData.outputSize) {
+        spectaCellConfig.outputSize = metaData.outputSize;
+    }
     return spectaCellConfig;
 }
 export function debounce(fn, delay = 100) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",

package/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
         }
       }
     }

package/style/article.css

@@ -23,12 +23,15 @@
   }
 
   .specta-article-outputs-panel {
-    max-width: 680px;
-    width: 100%;
     font-size: 1rem;
     line-height: 1.6;
+    width: 100%;
   }
 
+  .specta-cell-output {
+    max-width: 680px;
+    margin: auto;
+  }
   .specta-article-outputs-panel {
     .jp-MarkdownOutput {
       padding-left: 0px !important;
@@ -194,7 +197,7 @@
     margin-top: 40px !important;
   }
 
-  .jp-CodeCell + .jp-OutputArea > .jp-OutputArea-child {
+  .jp-OutputArea > .jp-OutputArea-child:first-child {
     margin-top: 40px !important;
   }
   .jp-InputArea-editor {
@@ -307,8 +310,32 @@
       margin-top: 56px !important;
     }
 
-    .jp-CodeCell + .jp-OutputArea > .jp-OutputArea-child {
+    .jp-OutputArea > .jp-OutputArea-child:first-child {
       margin-top: 56px !important;
     }
+
+    .specta-cell-output-big {
+      max-width: 1192px;
+    }
+    .specta-cell-output-big .jp-Cell {
+      max-width: 680px;
+      margin: auto;
+    }
+    .specta-cell-output-big .jp-Cell.jp-MarkdownCell {
+      max-width: 1192px;
+      margin: auto;
+    }
+
+    .specta-cell-output-full {
+      max-width: 100%;
+    }
+    .specta-cell-output-full .jp-Cell {
+      max-width: 680px;
+      margin: auto;
+    }
+    .specta-cell-output-full .jp-Cell.jp-MarkdownCell {
+      max-width: 100%;
+      margin: auto;
+    }
   }
 }