jupyter-specta 0.3.1 → 0.3.3

package/README.md

@@ -69,6 +69,7 @@ Specta can be configured using the typicall JupyterLite configuration file: `jup
 The following options are available:
 
 - `defaultLayout`: The default layout when opening a file.
+- `executionDelay`: Delay (in miliseconds) before executing cells.
 - `hideTopbar`: Boolean flag to show or hide the top bar.
 - `topBar`: Configuration for the top bar.
 - `slidesTheme`: The theme for the slides layout. The list of available themes can be found [here](https://revealjs.com/themes/).
@@ -115,10 +116,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/specta_widget.js

@@ -20,7 +20,15 @@ export class AppWidget extends Panel {
             // Not a specta app, add spinner
             this.addSpinner();
         }
-        this._model.initialize().then(() => {
+        this._model.initialize().then(async () => {
+            let waitTime = this._spectaAppConfig.executionDelay;
+            if (!waitTime) {
+                waitTime = 100;
+            }
+            else {
+                console.log(`Waiting for ${waitTime}ms`);
+            }
+            await new Promise(resolve => setTimeout(resolve, parseInt(waitTime + '')));
             this.render().catch(console.error).then(emitResizeEvent);
         });
         this._layoutRegistry.selectedLayoutChanged.connect(this._onSelectedLayoutChanged, this);

package/lib/token.d.ts

@@ -50,6 +50,7 @@ export interface ISpectaAppConfig {
     hideTopbar?: boolean;
     slidesTheme?: string;
     loadingName?: string;
+    executionDelay?: number;
     labConfig?: {
         setSingleMode?: boolean;
         hideLeftPanel?: boolean;
@@ -61,6 +62,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) {
@@ -183,7 +187,6 @@ export async function configLabLayout(options) {
     if (!config) {
         return;
     }
-    console.log('vvvvvvvvvvv', config);
     const { setSingleMode, hideLeftPanel, hideRightPanel, hideStatusbar, hideHeader } = config;
     if (setSingleMode) {
         await commands.execute('application:set-mode', {
@@ -209,9 +212,7 @@ export async function configLabLayout(options) {
     }
     if (hideStatusbar) {
         const statusBar = document.getElementById('jp-main-statusbar');
-        console.log('statusBar.clientHeight', statusBar === null || statusBar === void 0 ? void 0 : statusBar.clientHeight);
         if (statusBar && !statusBar.classList.contains('lm-mod-hidden')) {
-            console.log('toggle status');
             await commands.execute('statusbar:toggle');
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.3.1",
+    "version": "0.3.3",
     "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;
+    }
   }
 }