jupyter-specta 0.3.0 → 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/document/plugin.js

@@ -8,7 +8,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IKernelSpecManager } from '@jupyterlab/services';
 import { Widget } from '@lumino/widgets';
 import { ISpectaDocTracker, ISpectaLayoutRegistry } from '../token';
-import { createFileBrowser, hideAppLoadingIndicator, isSpectaApp, registerDocumentFactory } from '../tool';
+import { configLabLayout, createFileBrowser, hideAppLoadingIndicator, isSpectaApp, readSpectaConfig, registerDocumentFactory } from '../tool';
 const activate = (app, rendermime, tracker, editorServices, contentFactory, spectaLayoutRegistry, themeManager) => {
     const namespace = 'specta';
     const spectaTracker = new WidgetTracker({ namespace });
@@ -61,24 +61,13 @@ export const spectaOpener = {
             app.restored.then(async () => {
                 const labShell = app.shell;
                 if (PathExt.extname(path) === '.ipynb') {
-                    await app.commands.execute('application:set-mode', {
-                        mode: 'single-document'
+                    const commands = app.commands;
+                    const spectaConfig = readSpectaConfig({});
+                    await configLabLayout({
+                        config: spectaConfig.labConfig,
+                        labShell,
+                        commands
                     });
-                    labShell.collapseLeft();
-                    labShell.collapseRight();
-                    if (labShell.isSideTabBarVisible('right')) {
-                        labShell.toggleSideTabBarVisibility('right');
-                    }
-                    if (labShell.isSideTabBarVisible('left')) {
-                        labShell.toggleSideTabBarVisibility('left');
-                    }
-                    if (labShell.isTopInSimpleModeVisible()) {
-                        await app.commands.execute('application:toggle-header');
-                    }
-                    const statusBar = document.getElementById('jp-bottom-panel');
-                    if (statusBar && statusBar.clientHeight !== 0) {
-                        await app.commands.execute('statusbar:toggle');
-                    }
                     const widget = docManager.openOrReveal(path, 'specta');
                     if (widget) {
                         app.shell.add(widget, 'main');

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

@@ -50,10 +50,18 @@ export interface ISpectaAppConfig {
     hideTopbar?: boolean;
     slidesTheme?: string;
     loadingName?: string;
+    labConfig?: {
+        setSingleMode?: boolean;
+        hideLeftPanel?: boolean;
+        hideRightPanel?: boolean;
+        hideStatusbar?: boolean;
+        hideHeader?: boolean;
+    };
 }
 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.d.ts

@@ -1,10 +1,11 @@
-import { JupyterFrontEnd } from '@jupyterlab/application';
+import { ILabShell, JupyterFrontEnd } from '@jupyterlab/application';
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IEditorServices } from '@jupyterlab/codeeditor';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ICell, INotebookMetadata } from '@jupyterlab/nbformat';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { CommandRegistry } from '@lumino/commands';
 import { ISpectaAppConfig, ISpectaCellConfig, ISpectaLayoutRegistry, ISpectaShell } from './token';
 export declare function registerDocumentFactory(options: {
     factoryName: string;
@@ -32,3 +33,8 @@ export declare function readCellConfig(cell?: ICell): Required<ISpectaCellConfig
 export declare function debounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
 export declare const emitResizeEvent: () => void;
 export declare function setRevealTheme(themeName: string): void;
+export declare function configLabLayout(options: {
+    config?: ISpectaAppConfig['labConfig'];
+    labShell: ILabShell;
+    commands: CommandRegistry;
+}): Promise<void>;

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) {
@@ -178,3 +182,41 @@ export function setRevealTheme(themeName) {
     // Set or update href to new theme
     themeLink.href = getSpectaAssetUrl(`reveal.js/${themeName}.css`);
 }
+export async function configLabLayout(options) {
+    const { config, labShell, commands } = options;
+    if (!config) {
+        return;
+    }
+    console.log('vvvvvvvvvvv', config);
+    const { setSingleMode, hideLeftPanel, hideRightPanel, hideStatusbar, hideHeader } = config;
+    if (setSingleMode) {
+        await commands.execute('application:set-mode', {
+            mode: 'single-document'
+        });
+    }
+    if (hideLeftPanel) {
+        labShell.collapseLeft();
+        if (labShell.isSideTabBarVisible('left')) {
+            labShell.toggleSideTabBarVisibility('left');
+        }
+    }
+    if (hideRightPanel) {
+        labShell.collapseRight();
+        if (labShell.isSideTabBarVisible('right')) {
+            labShell.toggleSideTabBarVisibility('right');
+        }
+    }
+    if (hideHeader) {
+        if (labShell.isTopInSimpleModeVisible()) {
+            await commands.execute('application:toggle-header');
+        }
+    }
+    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.0",
+    "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;
+    }
   }
 }