jupyter-specta 0.3.3 → 0.3.5

package/lib/components/icon/gear.js

@@ -12,6 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 export const GearIcon = (_a) => {
     var props = __rest(_a, []);
-    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px" }, props),
-        React.createElement("path", { d: "m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" })));
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, props),
+        React.createElement("path", { d: "M4 5h16" }),
+        React.createElement("path", { d: "M4 12h16" }),
+        React.createElement("path", { d: "M4 19h16" })));
 };

package/lib/document/factory.js

@@ -34,7 +34,7 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory {
                 else {
                     // Specta app, add topbar to layout
                     topbar.id = 'specta-topbar-widget';
-                    this._shell.add(topbar, 'top');
+                    this._shell.add(topbar, 'top', { rank: 100 });
                 }
             }
             else if (isSpecta) {

package/lib/document/plugin.js

@@ -50,12 +50,10 @@ export const spectaOpener = {
     ],
     activate: async (app, docManager, defaultBrowser) => {
         const urlParams = new URLSearchParams(window.location.search);
-        const path = urlParams.get('path');
         if (!isSpectaApp()) {
+            // Not a specta app
+            const path = urlParams.get('specta-path');
             if (!path) {
-                app.restored.then(async () => {
-                    await app.commands.execute('application:reset-layout');
-                });
                 return;
             }
             app.restored.then(async () => {
@@ -63,6 +61,7 @@ export const spectaOpener = {
                 if (PathExt.extname(path) === '.ipynb') {
                     const commands = app.commands;
                     const spectaConfig = readSpectaConfig({});
+                    console.log('spectaConfig', spectaConfig);
                     await configLabLayout({
                         config: spectaConfig.labConfig,
                         labShell,
@@ -74,10 +73,11 @@ export const spectaOpener = {
                     }
                 }
             });
-            // Not a specta app
             return;
         }
         else {
+            //  Specta app
+            const path = urlParams.get('path');
             if (!path) {
                 const browser = createFileBrowser({ defaultBrowser });
                 app.shell.add(browser, 'main', { rank: 100 });

package/lib/specta_model.d.ts

@@ -6,6 +6,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServiceManager } from '@jupyterlab/services';
 import { IExecuteReplyMsg } from '@jupyterlab/services/lib/kernel/messages';
 import { SpectaCellOutput } from './specta_cell_output';
+import { ISignal } from '@lumino/signaling';
 export declare class AppModel {
     private options;
     constructor(options: AppModel.IOptions);
@@ -13,6 +14,7 @@ export declare class AppModel {
      * Whether the handler is disposed.
      */
     get isDisposed(): boolean;
+    get fileChanged(): ISignal<this, CellList>;
     dispose(): void;
     get rendermime(): IRenderMimeRegistry;
     get cells(): CellList | undefined;
@@ -27,6 +29,7 @@ export declare class AppModel {
     private _isDisposed;
     private _manager;
     private _kernelPreference;
+    private _fileChanged;
 }
 export declare namespace AppModel {
     interface IOptions {

package/lib/specta_model.js

@@ -3,10 +3,12 @@ import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
 import { createNotebookContext, createNotebookPanel } from './create_notebook_panel';
 import { SpectaCellOutput } from './specta_cell_output';
 import { emitResizeEvent, readCellConfig } from './tool';
+import { Signal } from '@lumino/signaling';
 export class AppModel {
     constructor(options) {
         this.options = options;
         this._isDisposed = false;
+        this._fileChanged = new Signal(this);
         this._notebookModelJson = options.context.model.toJSON();
         this._kernelPreference = {
             shouldStart: true,
@@ -17,6 +19,9 @@ export class AppModel {
             language: options.context.model.defaultKernelLanguage
         };
         this._manager = options.manager;
+        options.context.fileChanged.connect(e => {
+            this._fileChanged.emit(e.model.cells);
+        });
     }
     /**
      * Whether the handler is disposed.
@@ -24,6 +29,9 @@ export class AppModel {
     get isDisposed() {
         return this._isDisposed;
     }
+    get fileChanged() {
+        return this._fileChanged;
+    }
     dispose() {
         var _a, _b;
         if (this.isDisposed) {

package/lib/specta_widget.d.ts

@@ -1,7 +1,9 @@
+import { CellList } from '@jupyterlab/notebook';
 import { Message } from '@lumino/messaging';
 import { Panel } from '@lumino/widgets';
+import { SpectaCellOutput } from './specta_cell_output';
 import { AppModel } from './specta_model';
-import { ISpectaAppConfig, ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaLayout, ISpectaLayoutRegistry } from './token';
 export declare class AppWidget extends Panel {
     constructor(options: AppWidget.IOptions);
     /**
@@ -10,8 +12,12 @@ export declare class AppWidget extends Panel {
     get ready(): Promise<void>;
     get model(): AppModel;
     addSpinner(): void;
+    removeSpinner(): void;
     dispose(): void;
+    generateOutputs(cellList?: CellList): Promise<SpectaCellOutput[]>;
+    getLayout(): ISpectaLayout;
     render(): Promise<void>;
+    rerender(newCells: CellList): Promise<void>;
     protected onCloseRequest(msg: Message): void;
     private _onSelectedLayoutChanged;
     private _model;

package/lib/specta_widget.js

@@ -29,9 +29,13 @@ export class AppWidget extends Panel {
                 console.log(`Waiting for ${waitTime}ms`);
             }
             await new Promise(resolve => setTimeout(resolve, parseInt(waitTime + '')));
-            this.render().catch(console.error).then(emitResizeEvent);
+            await this.render();
+            emitResizeEvent();
         });
         this._layoutRegistry.selectedLayoutChanged.connect(this._onSelectedLayoutChanged, this);
+        this._model.fileChanged.connect((_, newCells) => {
+            this.rerender(newCells);
+        });
     }
     /**
      * A promise that is fulfilled when the model is ready.
@@ -55,6 +59,18 @@ export class AppWidget extends Panel {
         loaderHost.node.appendChild(text);
         this.addWidget(loaderHost);
     }
+    removeSpinner() {
+        if (this._loaderHost) {
+            this._loaderHost.node.style.opacity = '0';
+            setTimeout(() => {
+                var _a;
+                (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(this._loaderHost);
+            }, 100);
+        }
+        else {
+            hideAppLoadingIndicator();
+        }
+    }
     dispose() {
         if (this.isDisposed) {
             return;
@@ -62,10 +78,11 @@ export class AppWidget extends Panel {
         this._model.dispose();
         super.dispose();
     }
-    async render() {
-        var _a, _b, _c, _d, _e;
-        const cellList = (_a = this._model.cells) !== null && _a !== void 0 ? _a : [];
-        const layout = (_c = (_b = this._spectaAppConfig) === null || _b === void 0 ? void 0 : _b.defaultLayout) !== null && _c !== void 0 ? _c : 'default';
+    async generateOutputs(cellList) {
+        const outs = [];
+        if (!cellList) {
+            return outs;
+        }
         for (const cell of cellList) {
             const src = cell.sharedModel.source;
             if (src.length === 0) {
@@ -73,29 +90,53 @@ export class AppWidget extends Panel {
             }
             const el = this._model.createCell(cell);
             this._model.executeCell(cell, el);
-            this._outputs.push(el);
+            outs.push(el);
         }
-        const readyCallback = async () => {
-            if (this._loaderHost) {
-                this._loaderHost.node.style.opacity = '0';
-                setTimeout(() => {
-                    var _a;
-                    (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(this._loaderHost);
-                }, 100);
-            }
-            else {
-                hideAppLoadingIndicator();
-            }
-        };
-        const spectaLayout = (_d = this._layoutRegistry.get(layout)) !== null && _d !== void 0 ? _d : this._layoutRegistry.getDefaultLayout();
+        return outs;
+    }
+    getLayout() {
+        var _a, _b, _c;
+        const layout = (_b = (_a = this._spectaAppConfig) === null || _a === void 0 ? void 0 : _a.defaultLayout) !== null && _b !== void 0 ? _b : 'default';
+        const spectaLayout = (_c = this._layoutRegistry.get(layout)) !== null && _c !== void 0 ? _c : this._layoutRegistry.getDefaultLayout();
+        return spectaLayout;
+    }
+    async render() {
+        var _a;
+        const cellList = this._model.cells;
+        this._outputs = await this.generateOutputs(cellList);
+        const spectaLayout = this.getLayout();
+        const readyCallback = async () => this.removeSpinner();
         await spectaLayout.render({
             host: this._host,
             items: this._outputs,
-            notebook: (_e = this._model.context) === null || _e === void 0 ? void 0 : _e.model.toJSON(),
+            notebook: (_a = this._model.context) === null || _a === void 0 ? void 0 : _a.model.toJSON(),
             readyCallback,
             spectaConfig: this._spectaAppConfig
         });
     }
+    async rerender(newCells) {
+        var _a;
+        this.addSpinner();
+        for (const element of this._outputs) {
+            element.dispose();
+        }
+        const currentEls = [...this._host.widgets];
+        currentEls.forEach(el => {
+            var _a;
+            (_a = this._host.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(el);
+        });
+        this._outputs = await this.generateOutputs(newCells);
+        const spectaLayout = this.getLayout();
+        await spectaLayout.render({
+            host: this._host,
+            items: this._outputs,
+            notebook: (_a = this._model.context) === null || _a === void 0 ? void 0 : _a.model.toJSON(),
+            readyCallback: async () => { },
+            spectaConfig: this._spectaAppConfig
+        });
+        emitResizeEvent();
+        this.removeSpinner();
+    }
     onCloseRequest(msg) {
         this._model.dispose();
         super.onCloseRequest(msg);

package/lib/tool.js

@@ -92,6 +92,7 @@ export function mergeObjects(...objects) {
     for (const obj of objects) {
         for (const [key, value] of Object.entries(obj)) {
             if (value !== null && value !== undefined) {
+                console.log('setting', key, value);
                 result[key] = value;
             }
         }
@@ -107,7 +108,7 @@ export function isSpectaApp() {
     return !!document.querySelector('meta[name="specta-config"]');
 }
 export function readSpectaConfig({ nbMetadata, nbPath }) {
-    var _a;
+    var _a, _b;
     let rawConfig = PageConfig.getOption('spectaConfig');
     if (!rawConfig || rawConfig.length === 0) {
         rawConfig = '{}';
@@ -117,10 +118,12 @@ export function readSpectaConfig({ nbMetadata, nbPath }) {
     if (paths && paths.length > 1) {
         pathWithoutDrive = paths[1];
     }
-    const _b = JSON.parse(rawConfig), { perFileConfig } = _b, globalConfig = __rest(_b, ["perFileConfig"]);
+    const _c = JSON.parse(rawConfig), { perFileConfig } = _c, globalConfig = __rest(_c, ["perFileConfig"]);
     let spectaConfig = Object.assign({}, (globalConfig !== null && globalConfig !== void 0 ? globalConfig : {}));
+    let fileConfig = {};
     if (perFileConfig && pathWithoutDrive && perFileConfig[pathWithoutDrive]) {
-        spectaConfig = Object.assign(Object.assign({}, spectaConfig), perFileConfig[pathWithoutDrive]);
+        fileConfig = perFileConfig[pathWithoutDrive];
+        spectaConfig = Object.assign(Object.assign({}, spectaConfig), fileConfig);
     }
     const spectaMetadata = JSON.parse(JSON.stringify((_a = nbMetadata === null || nbMetadata === void 0 ? void 0 : nbMetadata.specta) !== null && _a !== void 0 ? _a : {}));
     if (spectaMetadata.hideTopbar === 'Yes') {
@@ -132,11 +135,29 @@ export function readSpectaConfig({ nbMetadata, nbPath }) {
     else {
         if (spectaConfig.hideTopbar === null ||
             spectaConfig.hideTopbar === undefined) {
-            // Hide topbar by default if not specified in the global config
+            // Show topbar by default if not specified in the global config
             // and notebook metadata
-            spectaMetadata.hideTopbar = true;
+            spectaMetadata.hideTopbar = false;
+        }
+    }
+    if (!spectaMetadata.hideTopbar) {
+        spectaMetadata.topBar = {};
+        if (spectaMetadata.topbarTitle && spectaMetadata.topbarTitle !== '') {
+            spectaMetadata.topBar.title = spectaMetadata.topbarTitle;
+            delete spectaMetadata.topbarTitle;
+        }
+        else if (!((_b = fileConfig === null || fileConfig === void 0 ? void 0 : fileConfig.topBar) === null || _b === void 0 ? void 0 : _b.title)) {
+            spectaMetadata.topBar.title = pathWithoutDrive;
+        }
+        if (spectaMetadata.topbarThemeToggle === 'No') {
+            spectaMetadata.topBar.themeToggle = false;
+        }
+        else {
+            spectaMetadata.topBar.themeToggle = true;
         }
+        delete spectaMetadata.topbarThemeToggle;
     }
+    // merge spectaConfig and spectaMetadata (spectaMetadata has higher priority
     return mergeObjects(spectaConfig, spectaMetadata);
 }
 export function readCellConfig(cell) {

package/lib/topbar/widget.js

@@ -7,7 +7,7 @@ export function TopbarElement(props) {
     const config = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return {
-            background: (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : 'var(--jp-layout-color2)',
+            background: (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : 'var(--jp-layout-color1)',
             title: (_d = (_c = props.config) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : 'Specta',
             themeToggle: Boolean((_e = props.config) === null || _e === void 0 ? void 0 : _e.themeToggle),
             kernelActivity: Boolean((_f = props.config) === null || _f === void 0 ? void 0 : _f.kernelActivity),
@@ -30,7 +30,8 @@ export function TopbarElement(props) {
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
-    return (React.createElement("div", { className: "specta-topbar", style: { background: (_a = config.background) !== null && _a !== void 0 ? _a : 'var(--jp-layout-color2)' } },
+    console.log('config.background ', config.background);
+    return (React.createElement("div", { className: "specta-topbar", style: { background: (_a = config.background) !== null && _a !== void 0 ? _a : 'var(--jp-layout-color1)' } },
         React.createElement("div", { className: "specta-topbar-left" },
             React.createElement("div", { className: "specta-topbar-icon-container" }, config.icon && React.createElement("img", { style: { height: '100%' }, src: config.icon })),
             React.createElement("div", { className: "specta-topbar-title", style: { color: (_b = config.textColor) !== null && _b !== void 0 ? _b : 'var(--jp-ui-font-color1)' } }, config.title)),

package/package.json

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

package/schema/app-meta.json

@@ -9,6 +9,17 @@
       "metadataSchema": {
         "type": "object",
         "properties": {
+          "/specta/topbarTitle": {
+            "title": "Top Bar Title",
+            "type": "string",
+            "default": ""
+          },
+          "/specta/topbarThemeToggle": {
+            "title": "Top Bar Theme Toggle",
+            "type": "string",
+            "enum": ["Yes", "No"],
+            "default": "Yes"
+          },
           "/specta/defaultLayout": {
             "title": "Page layout",
             "type": "string",
@@ -55,6 +66,14 @@
         "/specta/slidesTheme": {
           "metadataLevel": "notebook",
           "writeDefault": false
+        },
+        "/specta/topbarTitle": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
+        },
+        "/specta/topbarThemeToggle": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
         }
       }
     }

package/style/base.css

@@ -69,11 +69,13 @@
 }
 
 #specta-top-panel {
-  min-height: 36px;
+  min-height: 28px;
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
   contain: unset !important;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
+  background: var(--jp-layout-color1);
 }
 
 .specta-topbar-element {
@@ -84,7 +86,7 @@
 .specta-topbar {
   display: flex;
   flex-direction: row;
-  height: 36px;
+  height: 28px;
   width: calc(100% + 20px);
   border-bottom: solid 0.5px var(--jp-border-color1);
   gap: 10px;
@@ -128,7 +130,9 @@
   border-radius: 50% !important;
   transition: background 0.2s ease;
   background: transparent;
+  padding: 0 !important;
 }
+
 .specta-icon-button:hover {
   background-color: var('--jp-layout-color3');
 }

package/style/style.css

@@ -6,6 +6,7 @@
 
 .specta-document-viewer #jp-main-content-panel jp-toolbar:first-of-type {
   display: none;
+  height: 0px !important;
 }
 
 .specta-file-browser {
@@ -28,6 +29,6 @@
 }
 
 .specta-main-content-panel {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 0px;
+  padding-right: 0px;
 }