jupyter-specta 0.1.2 → 0.1.4

package/lib/specta_widget.d.ts

@@ -1,7 +1,7 @@
 import { Message } from '@lumino/messaging';
 import { Panel } from '@lumino/widgets';
 import { AppModel } from './specta_model';
-import { ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaLayoutRegistry } from './token';
 export declare class AppWidget extends Panel {
     constructor(options: AppWidget.IOptions);
     /**
@@ -13,11 +13,14 @@ export declare class AppWidget extends Panel {
     dispose(): void;
     render(): Promise<void>;
     protected onCloseRequest(msg: Message): void;
+    private _onSelectedLayoutChanged;
     private _model;
     private _ready;
     private _host;
     private _layoutRegistry;
     private _loaderHost?;
+    private _outputs;
+    private _spectaAppConfig;
 }
 export declare namespace AppWidget {
     interface IOptions {
@@ -25,5 +28,6 @@ export declare namespace AppWidget {
         label: string;
         model: AppModel;
         layoutRegistry: ISpectaLayoutRegistry;
+        spectaConfig: ISpectaAppConfig;
     }
 }

package/lib/specta_widget.js

@@ -5,12 +5,13 @@ export class AppWidget extends Panel {
     constructor(options) {
         super();
         this._ready = new PromiseDelegate();
+        this._outputs = [];
         this.node.id = options.id;
         this.title.label = options.label;
         this.title.closable = true;
         this._model = options.model;
+        this._spectaAppConfig = options.spectaConfig;
         this._layoutRegistry = options.layoutRegistry;
-        this.node.style.padding = '5px';
         this._host = new Panel();
         this._host.addClass('specta-output-host');
         this.addWidget(this._host);
@@ -24,6 +25,7 @@ export class AppWidget extends Panel {
                 .catch(console.error)
                 .then(() => window.dispatchEvent(new Event('resize')));
         });
+        this._layoutRegistry.selectedLayoutChanged.connect(this._onSelectedLayoutChanged, this);
     }
     /**
      * A promise that is fulfilled when the model is ready.
@@ -54,17 +56,17 @@ export class AppWidget extends Panel {
         super.dispose();
     }
     async render() {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const cellList = (_a = this._model.cells) !== null && _a !== void 0 ? _a : [];
-        const outputs = [];
+        const layout = (_c = (_b = this._spectaAppConfig) === null || _b === void 0 ? void 0 : _b.defaultLayout) !== null && _c !== void 0 ? _c : 'default';
         for (const cell of cellList) {
             const src = cell.sharedModel.source;
             if (src.length === 0) {
                 continue;
             }
             const el = this._model.createCell(cell);
-            await this._model.executeCell(cell, el.cellOutput);
-            outputs.push(el);
+            this._model.executeCell(cell, el);
+            this._outputs.push(el);
         }
         const readyCallback = async () => {
             if (this._loaderHost) {
@@ -78,10 +80,11 @@ export class AppWidget extends Panel {
                 hideAppLoadingIndicator();
             }
         };
-        await this._layoutRegistry.selectedLayout.layout.render({
+        const spectaLayout = (_d = this._layoutRegistry.get(layout)) !== null && _d !== void 0 ? _d : this._layoutRegistry.getDefaultLayout();
+        await spectaLayout.render({
             host: this._host,
-            items: outputs,
-            notebook: this._model.context.model.toJSON(),
+            items: this._outputs,
+            notebook: (_e = this._model.context) === null || _e === void 0 ? void 0 : _e.model.toJSON(),
             readyCallback
         });
     }
@@ -89,4 +92,18 @@ export class AppWidget extends Panel {
         this._model.dispose();
         super.onCloseRequest(msg);
     }
+    _onSelectedLayoutChanged(sender, args) {
+        var _a;
+        const currentEls = [...this._host.widgets];
+        currentEls.forEach(el => {
+            var _a;
+            (_a = this._host.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(el);
+        });
+        args.layout.render({
+            host: this._host,
+            items: this._outputs,
+            notebook: (_a = this._model.context) === null || _a === void 0 ? void 0 : _a.model.toJSON(),
+            readyCallback: async () => { }
+        });
+    }
 }

package/lib/specta_widget_factory.js

@@ -2,16 +2,20 @@ import { StaticNotebook } from '@jupyterlab/notebook';
 import { AppModel } from './specta_model';
 import { AppWidget } from './specta_widget';
 import { UUID } from '@lumino/coreutils';
+import { readSpectaConfig } from './tool';
 export class SpectaWidgetFactory {
     constructor(options) {
         this._options = options;
     }
     async createNew(options) {
         const { context } = options;
+        const rendermime = this._options.rendermime.clone({
+            resolver: context.urlResolver
+        });
         const model = new AppModel({
             context,
             manager: this._options.manager,
-            rendermime: this._options.rendermime,
+            rendermime,
             tracker: this._options.tracker,
             contentFactory: this._options.contentFactory,
             mimeTypeService: this._options.mimeTypeService,
@@ -23,7 +27,8 @@ export class SpectaWidgetFactory {
             id: UUID.uuid4(),
             label: '',
             model,
-            layoutRegistry: this._options.spectaLayoutRegistry
+            layoutRegistry: this._options.spectaLayoutRegistry,
+            spectaConfig: readSpectaConfig(context.model.metadata)
         });
         return panel;
     }

package/lib/token.d.ts

@@ -14,6 +14,7 @@ export interface ISpectaLayout {
 }
 export interface ISpectaLayoutRegistry {
     get(name: string): ISpectaLayout | undefined;
+    getDefaultLayout(): ISpectaLayout;
     register(name: string, layout: ISpectaLayout): void;
     allLayouts(): string[];
     layoutAdded: ISignal<ISpectaLayoutRegistry, string>;
@@ -27,5 +28,22 @@ export interface ISpectaLayoutRegistry {
         layout: ISpectaLayout;
     }>;
 }
+export interface ITopbarConfig {
+    background?: string;
+    textColor?: string;
+    title?: string;
+    icon?: string;
+    kernelActivity?: boolean;
+    themeToggle?: boolean;
+}
+export interface ISpectaAppConfig {
+    topBar?: ITopbarConfig;
+    defaultLayout?: string;
+    hideTopbar?: boolean;
+}
+export interface ISpectaCellConfig {
+    showSource?: boolean;
+    showOutput?: boolean;
+}
 export declare const ISpectaLayoutRegistry: Token<ISpectaLayoutRegistry>;
 export declare const ISpectaDocTracker: Token<IWidgetTracker<Widget>>;

package/lib/tool.d.ts

@@ -5,7 +5,9 @@ import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { VoilaFileBrowser } from '@voila-dashboards/voila';
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaCellConfig, ISpectaLayoutRegistry } from './token';
+import { INotebookMetadata } from '@jupyterlab/nbformat';
+import { ICell } from '@jupyterlab/nbformat';
 export declare function registerDocumentFactory(options: {
     factoryName: string;
     app: JupyterFrontEnd;
@@ -21,3 +23,5 @@ export declare function createFileBrowser(options: {
 }): VoilaFileBrowser;
 export declare function hideAppLoadingIndicator(): void;
 export declare function isSpectaApp(): boolean;
+export declare function readSpectaConfig(nbMetadata?: INotebookMetadata): ISpectaAppConfig;
+export declare function readCellConfig(cell?: ICell): Required<ISpectaCellConfig>;

package/lib/tool.js

@@ -1,5 +1,6 @@
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { FilterFileBrowserModel } from '@jupyterlab/filebrowser';
+import { NotebookModelFactory } from '@jupyterlab/notebook';
 import { VoilaFileBrowser } from '@voila-dashboards/voila';
 import { NotebookGridWidgetFactory } from './document/factory';
 import { SpectaWidgetFactory } from './specta_widget_factory';
@@ -17,15 +18,23 @@ export function registerDocumentFactory(options) {
     const widgetFactory = new NotebookGridWidgetFactory({
         name: factoryName,
         modelName: 'notebook',
-        fileTypes: ['notebook'],
-        spectaWidgetFactory,
-        preferKernel: true,
-        canStartKernel: true,
-        autoStartDefault: true,
-        shutdownOnClose: true
+        fileTypes: ['ipynb'],
+        spectaWidgetFactory
     });
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
+    // Creating and registering the model factory for our custom DocumentModelAdd commentMore actions
+    const modelFactory = new NotebookModelFactory({});
+    app.docRegistry.addModelFactory(modelFactory);
+    // register the filetype
+    app.docRegistry.addFileType({
+        name: 'ipynb',
+        displayName: 'IPYNB',
+        mimeTypes: ['text/json'],
+        extensions: ['.ipynb', '.IPYNB'],
+        fileFormat: 'json',
+        contentType: 'notebook'
+    });
     widgetFactory.widgetCreated.connect((sender, widget) => {
         widget.context.pathChanged.connect(() => {
             spectaTracker.save(widget);
@@ -81,3 +90,28 @@ export function hideAppLoadingIndicator() {
 export function isSpectaApp() {
     return !!document.querySelector('meta[name="specta-config"]');
 }
+export function readSpectaConfig(nbMetadata) {
+    var _a;
+    let rawConfig = PageConfig.getOption('spectaConfig');
+    if (!rawConfig || rawConfig.length === 0) {
+        rawConfig = '{}';
+    }
+    const spectaConfig = JSON.parse(rawConfig);
+    const spectaMetadata = ((_a = nbMetadata === null || nbMetadata === void 0 ? void 0 : nbMetadata.specta) !== null && _a !== void 0 ? _a : {});
+    return Object.assign(Object.assign({}, spectaConfig), spectaMetadata);
+}
+export function readCellConfig(cell) {
+    var _a, _b;
+    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
+    };
+    if (metaData.showSource && metaData.showSource === 'Yes') {
+        spectaCellConfig.showSource = true;
+    }
+    if (metaData.showOutput && metaData.showOutput === 'No') {
+        spectaCellConfig.showOutput = false;
+    }
+    return spectaCellConfig;
+}

package/lib/topbar/index.d.ts

@@ -0,0 +1,5 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+/**
+ * Initialization data for the voila_topbar extension.
+ */
+export declare const topbarPlugin: JupyterFrontEndPlugin<void>;

package/lib/topbar/index.js

@@ -0,0 +1,30 @@
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { TopbarElement } from './widget';
+import * as React from 'react';
+import { isSpectaApp, readSpectaConfig } from '../tool';
+import { ISpectaLayoutRegistry } from '../token';
+/**
+ * Initialization data for the voila_topbar extension.
+ */
+export const topbarPlugin = {
+    id: 'specta:topba',
+    description: 'Specta topbar extension',
+    autoStart: true,
+    requires: [IThemeManager, ISpectaLayoutRegistry],
+    activate: (app, themeManager, layoutRegistry) => {
+        const isSpecta = isSpectaApp();
+        if (!isSpecta) {
+            return;
+        }
+        const config = readSpectaConfig();
+        const widget = ReactWidget.create(React.createElement(TopbarElement, { config: config.topBar, themeManager: themeManager, layoutRegistry: layoutRegistry }));
+        widget.id = 'specta-topbar-widget';
+        widget.addClass('specta-topbar-element');
+        app.shell.add(widget, 'top');
+        if (widget.parent) {
+            widget.parent.node.style.boxShadow =
+                'rgba(0 0 0 / 20%) 0 2px 4px -1px, rgba(0 0 0 / 14%) 0 4px 5px 0, rgba(0 0 0 / 12%) 0 1px 10px 0';
+        }
+    }
+};

package/lib/topbar/kernelStatus.d.ts

@@ -0,0 +1,28 @@
+export declare namespace ProgressCircle {
+    /**
+     * Props for the ProgressBar.
+     */
+    interface IProps {
+        /**
+         * The current progress percentage, from 0 to 100
+         */
+        progress: number;
+        /**
+         * The aria-label for the widget
+         */
+        label?: string;
+        /**
+         * Element width
+         */
+        width?: number;
+        /**
+         * Element height
+         */
+        height?: number;
+        /**
+         * Color ò the stroke
+         */
+        stroke?: string;
+    }
+}
+export declare function ProgressCircle(props: ProgressCircle.IProps): JSX.Element;

package/lib/topbar/kernelStatus.js

@@ -0,0 +1,20 @@
+import React from 'react';
+export function ProgressCircle(props) {
+    var _a, _b;
+    const radius = 104;
+    const d = (progress) => {
+        const angle = Math.max(progress * 3.6, 0.1);
+        const rad = (angle * Math.PI) / 180, x = Math.sin(rad) * radius, y = Math.cos(rad) * -radius, mid = angle < 180 ? 1 : 0, shape = `M 0 0 v -${radius} A ${radius} ${radius} 1 ` +
+            mid +
+            ' 0 ' +
+            x.toFixed(4) +
+            ' ' +
+            y.toFixed(4) +
+            ' z';
+        return shape;
+    };
+    return (React.createElement("div", { className: 'jp-Statusbar-ProgressCircle', role: "progressbar", "aria-label": props.label || 'Unlabelled progress circle', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": props.progress, style: { margin: 'auto' } },
+        React.createElement("svg", { viewBox: "0 0 250 250" },
+            React.createElement("circle", { cx: "125", cy: "125", r: `${radius}`, strokeWidth: "20", fill: "none", stroke: (_a = props.stroke) !== null && _a !== void 0 ? _a : 'var(--jp-inverse-layout-color2)' }),
+            React.createElement("path", { transform: "translate(125,125) scale(.9)", d: d(props.progress), fill: (_b = props.stroke) !== null && _b !== void 0 ? _b : 'var(--jp-inverse-layout-color2)' }))));
+}

package/lib/topbar/settingDialog.d.ts

@@ -0,0 +1,7 @@
+import { IThemeManager } from '@jupyterlab/apputils';
+import React from 'react';
+import { ISpectaLayoutRegistry } from '../token';
+export declare const SettingContent: (props: {
+    themeManager?: IThemeManager;
+    layoutRegistry?: ISpectaLayoutRegistry;
+}) => React.JSX.Element;

package/lib/topbar/settingDialog.js

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Divider } from '../components/divider';
+export const SettingContent = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { themeManager, layoutRegistry } = props;
+    const [themeOptions, setThemeOptions] = useState([
+        ...((_a = themeManager === null || themeManager === void 0 ? void 0 : themeManager.themes) !== null && _a !== void 0 ? _a : [])
+    ]);
+    const [selectedTheme, setSelectedTheme] = useState((_b = themeManager === null || themeManager === void 0 ? void 0 : themeManager.theme) !== null && _b !== void 0 ? _b : 'light');
+    const [layoutOptions, setLayoutOptions] = useState((_c = layoutRegistry === null || layoutRegistry === void 0 ? void 0 : layoutRegistry.allLayouts()) !== null && _c !== void 0 ? _c : []);
+    const [selectedLayout, setSelectedLayout] = useState((_e = (_d = layoutRegistry === null || layoutRegistry === void 0 ? void 0 : layoutRegistry.selectedLayout) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : 'default');
+    useEffect(() => {
+        let cb;
+        if (themeManager) {
+            cb = (sender, args) => {
+                if (args.newValue.length > 0) {
+                    return;
+                }
+                setThemeOptions([...themeManager.themes]);
+                if (themeManager.theme) {
+                    setSelectedTheme(themeManager.theme);
+                }
+            };
+            themeManager.themeChanged.connect(cb);
+        }
+        if (layoutRegistry) {
+            const layoutAddedCb = (sender, newLayout) => {
+                setLayoutOptions(layoutRegistry.allLayouts());
+            };
+            layoutRegistry.layoutAdded.connect(layoutAddedCb);
+        }
+        return () => {
+            if (themeManager && cb) {
+                themeManager.themeChanged.disconnect(cb);
+            }
+        };
+    }, [themeManager, layoutRegistry]);
+    const onThemeChange = useCallback((e) => {
+        var _a;
+        const theme = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+        if (theme) {
+            themeManager === null || themeManager === void 0 ? void 0 : themeManager.setTheme(theme);
+            setSelectedTheme(theme);
+        }
+    }, [themeManager]);
+    const onLayoutChange = useCallback((e) => {
+        var _a;
+        const layout = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+        if (layout && layoutRegistry) {
+            layoutRegistry.setSelectedLayout(layout);
+            setSelectedLayout(layout);
+        }
+    }, [layoutRegistry]);
+    return (React.createElement("div", { style: { padding: '0 10px' } },
+        React.createElement("p", { style: { marginTop: 0, marginBottom: '5px', fontSize: '1rem' } }, "SETTINGS"),
+        React.createElement(Divider, null),
+        layoutRegistry && (React.createElement("div", null,
+            React.createElement("label", { htmlFor: "" }, "Select layout"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { className: " jp-mod-styled specta-topbar-theme", onChange: onLayoutChange, value: selectedLayout }, layoutOptions.map(el => {
+                    return (React.createElement("option", { key: el, value: el, style: {
+                            background: 'var(--jp-layout-color2)'
+                        } }, el.charAt(0).toUpperCase() + el.slice(1)));
+                }))))),
+        themeManager && (React.createElement("div", null,
+            React.createElement("label", { htmlFor: "" }, "Select theme"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { className: " jp-mod-styled specta-topbar-theme", onChange: onThemeChange, value: selectedTheme }, themeOptions.map(el => {
+                    return (React.createElement("option", { key: el, value: el, style: {
+                            background: 'var(--jp-layout-color2)'
+                        } }, el));
+                })))))));
+};

package/lib/topbar/widget.d.ts

@@ -0,0 +1,9 @@
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ISpectaLayoutRegistry, ITopbarConfig } from '../token';
+interface IProps {
+    config?: ITopbarConfig;
+    themeManager?: IThemeManager;
+    layoutRegistry?: ISpectaLayoutRegistry;
+}
+export declare function TopbarElement(props: IProps): JSX.Element;
+export {};

package/lib/topbar/widget.js

@@ -0,0 +1,41 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { GearIcon } from '../components/icon/gear';
+import { IconButton } from '../components/iconButton';
+import { SettingContent } from './settingDialog';
+export function TopbarElement(props) {
+    var _a, _b;
+    const config = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return {
+            background: (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : 'var(--jp-layout-color2)',
+            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),
+            textColor: (_h = (_g = props.config) === null || _g === void 0 ? void 0 : _g.textColor) !== null && _h !== void 0 ? _h : 'var(--jp-ui-font-color1)'
+        };
+    }, [props.config]);
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (dialogRef.current &&
+                !dialogRef.current.contains(e.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        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)' } },
+        React.createElement("div", { className: "specta-topbar-left" },
+            React.createElement("div", null, config.icon && React.createElement("img", { style: { width: '50px' }, 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)),
+        React.createElement("div", { className: "specta-topbar-right" },
+            React.createElement(IconButton, { ref: buttonRef, onClick: () => setOpen(!open), icon: React.createElement(GearIcon, { fill: "var(--jp-ui-font-color2)", height: 24, width: 24 }) }),
+            open && (React.createElement("div", { ref: dialogRef, className: "jp-Dialog-content specta-config-dialog" },
+                React.createElement("div", { className: "specta-config-arrow" }),
+                React.createElement(SettingContent, { themeManager: props.themeManager, layoutRegistry: props.layoutRegistry }))))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",
@@ -15,7 +15,8 @@
     "files": [
         "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
         "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-        "dist/**/*.{js,js.map,.txt}"
+        "dist/**/*.{js,js.map,.txt}",
+        "schema/*.json"
     ],
     "main": "lib/extension_plugins.js",
     "types": "lib/extension_plugins.d.ts",
@@ -29,6 +30,7 @@
         "build:lib": "tsc",
         "build:labextension": "jupyter labextension build .",
         "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lab": "npm run clean && npm run build:lib && npm run build:labextension",
         "build:app": "npm run clean && npm run build:lib && cd app && NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production webpack --mode production",
         "build:app:dev": "npm run clean && npm run build:lib && cd app && webpack",
         "build:all": "npm run build:app && npm run build:labextension",
@@ -74,13 +76,13 @@
         "@jupyterlab/translation": "^4.4.2",
         "@jupyterlab/translation-extension": "^4.4.2",
         "@jupyterlab/ui-components": "^4.4.2",
-        "@jupyterlite/application": "^0.6.0",
-        "@jupyterlite/application-extension": "^0.6.0",
-        "@jupyterlite/contents": "^0.6.0",
-        "@jupyterlite/iframe-extension": "^0.6.0",
-        "@jupyterlite/kernel": "^0.6.0",
-        "@jupyterlite/server": "^0.6.0",
-        "@jupyterlite/services-extension": "^0.6.0",
+        "@jupyterlite/application": "^0.6.2",
+        "@jupyterlite/application-extension": "^0.6.2",
+        "@jupyterlite/contents": "^0.6.2",
+        "@jupyterlite/iframe-extension": "^0.6.2",
+        "@jupyterlite/kernel": "^0.6.2",
+        "@jupyterlite/server": "^0.6.2",
+        "@jupyterlite/services-extension": "^0.6.2",
         "@lumino/algorithm": "^2.0.0",
         "@lumino/application": "^2.0.0",
         "@lumino/commands": "^2.0.0",
@@ -96,16 +98,20 @@
         "@lumino/signaling": "^2.0.0",
         "@lumino/virtualdom": "^2.0.0",
         "@lumino/widgets": "^2.0.0",
-        "@voila-dashboards/voila": "^0.5.5"
+        "@voila-dashboards/voila": "^0.5.5",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
     },
     "devDependencies": {
         "@jupyterlab/builder": "~4.4.2",
         "@typescript-eslint/eslint-plugin": "^6.1.0",
         "@typescript-eslint/parser": "^6.1.0",
+        "@types/react": "^18.0.26",
         "css-loader": "^7.1.2",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
         "handlebars": "^4.7.8",
         "html-webpack-plugin": "^5.5.3",
         "ignore-loader": "^0.1.2",
@@ -140,7 +146,8 @@
             "eslint:recommended",
             "plugin:@typescript-eslint/eslint-recommended",
             "plugin:@typescript-eslint/recommended",
-            "plugin:prettier/recommended"
+            "plugin:prettier/recommended",
+            "plugin:react-hooks/recommended"
         ],
         "parser": "@typescript-eslint/parser",
         "parserOptions": {
@@ -148,9 +155,11 @@
             "sourceType": "module"
         },
         "plugins": [
-            "@typescript-eslint"
+            "@typescript-eslint",
+            "react-hooks"
         ],
         "rules": {
+            "react-hooks/exhaustive-deps": "error",
             "@typescript-eslint/naming-convention": [
                 "error",
                 {
@@ -226,6 +235,7 @@
     },
     "jupyterlab": {
         "extension": true,
-        "outputDir": "specta/labextension"
+        "outputDir": "specta/labextension",
+        "schemaDir": "schema"
     }
 }

package/schema/app-meta.json

@@ -0,0 +1,39 @@
+{
+  "type": "object",
+  "title": "Metadata Form example",
+  "description": "Settings of the metadata form extension.",
+  "jupyter.lab.metadataforms": [
+    {
+      "id": "jupyter-specta:app-meta",
+      "label": "Specta App Config",
+      "metadataSchema": {
+        "type": "object",
+        "properties": {
+          "/specta/hideTopbar": {
+            "title": "Hide top bar",
+            "type": "boolean",
+            "enum": [true, false],
+            "default": false
+          },
+          "/specta/defaultLayout": {
+            "title": "Page layout",
+            "type": "string",
+            "enum": ["default", "article"],
+            "default": "default"
+          }
+        }
+      },
+      "metadataOptions": {
+        "/specta/hideTopbar": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
+        },
+        "/specta/defaultLayout": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
+        }
+      }
+    }
+  ],
+  "additionalProperties": false
+}

package/schema/cell-meta.json

@@ -0,0 +1,37 @@
+{
+  "type": "object",
+  "title": "Metadata Form example",
+  "description": "Settings of the metadata form extension.",
+  "jupyter.lab.metadataforms": [
+    {
+      "id": "jupyter-specta:cell-meta",
+      "label": "Specta Cell Config",
+      "metadataSchema": {
+        "type": "object",
+        "properties": {
+          "/specta/showSource": {
+            "title": "Show cell source",
+            "type": "string",
+            "enum": ["Yes", "No"],
+            "default": "No"
+          },
+          "/specta/showOutput": {
+            "title": "Show output placeholder",
+            "type": "string",
+            "enum": ["Yes", "No"],
+            "default": "Yes"
+          }
+        }
+      },
+      "metadataOptions": {
+        "/specta/showSource": {
+          "writeDefault": false
+        },
+        "/specta/showOutput": {
+          "writeDefault": false
+        }
+      }
+    }
+  ],
+  "additionalProperties": false
+}