jupyter-specta 0.1.1 → 0.1.3

package/lib/specta_widget_factory.d.ts

@@ -4,7 +4,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServiceManager } from '@jupyterlab/services';
 import { AppWidget } from './specta_widget';
-import { ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaLayoutRegistry } from './token';
 export declare class SpectaWidgetFactory {
     constructor(options: SpectaWidgetFactory.IOptions);
     createNew(options: {
@@ -21,5 +21,6 @@ export declare namespace SpectaWidgetFactory {
         mimeTypeService: IEditorMimeTypeService;
         editorServices: IEditorServices;
         spectaLayoutRegistry: ISpectaLayoutRegistry;
+        spectaConfig: ISpectaAppConfig;
     }
 }

package/lib/specta_widget_factory.js

@@ -8,10 +8,13 @@ export class SpectaWidgetFactory {
     }
     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 +26,8 @@ export class SpectaWidgetFactory {
             id: UUID.uuid4(),
             label: '',
             model,
-            layoutRegistry: this._options.spectaLayoutRegistry
+            layoutRegistry: this._options.spectaLayoutRegistry,
+            spectaConfig: this._options.spectaConfig
         });
         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,17 @@ 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;
+    layout?: string;
+}
 export declare const ISpectaLayoutRegistry: Token<ISpectaLayoutRegistry>;
 export declare const ISpectaDocTracker: Token<IWidgetTracker<Widget>>;

package/lib/tool.d.ts

@@ -5,7 +5,8 @@ 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, ISpectaLayoutRegistry } from './token';
+export declare const SPECTA_CELL_VISIBLE_TAG = "specta:visible";
 export declare function registerDocumentFactory(options: {
     factoryName: string;
     app: JupyterFrontEnd;
@@ -15,6 +16,7 @@ export declare function registerDocumentFactory(options: {
     contentFactory: NotebookPanel.IContentFactory;
     spectaTracker: WidgetTracker;
     spectaLayoutRegistry: ISpectaLayoutRegistry;
+    spectaConfig: ISpectaAppConfig;
 }): void;
 export declare function createFileBrowser(options: {
     docManager: IDocumentManager;

package/lib/tool.js

@@ -1,11 +1,11 @@
 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';
+export const SPECTA_CELL_VISIBLE_TAG = 'specta:visible';
 export function registerDocumentFactory(options) {
-    const { factoryName, app, rendermime, tracker, editorServices, contentFactory, spectaTracker, spectaLayoutRegistry } = options;
+    const { factoryName, app, rendermime, tracker, editorServices, contentFactory, spectaTracker, spectaLayoutRegistry, spectaConfig } = options;
     const spectaWidgetFactory = new SpectaWidgetFactory({
         manager: app.serviceManager,
         rendermime,
@@ -13,12 +13,13 @@ export function registerDocumentFactory(options) {
         contentFactory,
         mimeTypeService: editorServices.mimeTypeService,
         editorServices,
-        spectaLayoutRegistry
+        spectaLayoutRegistry,
+        spectaConfig
     });
     const widgetFactory = new NotebookGridWidgetFactory({
         name: factoryName,
         modelName: 'notebook',
-        fileTypes: ['ipynb'],
+        fileTypes: ['notebook'],
         spectaWidgetFactory,
         preferKernel: true,
         canStartKernel: true,
@@ -27,18 +28,6 @@ export function registerDocumentFactory(options) {
     });
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
-    // Creating and registering the model factory for our custom DocumentModel
-    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);

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/plugin.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/plugin.js

@@ -0,0 +1,32 @@
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { TopbarElement } from './widget';
+import * as React from 'react';
+import { isSpectaApp } from '../tool';
+import { ISpectaLayoutRegistry } from '../token';
+import { PageConfig } from '@jupyterlab/coreutils';
+/**
+ * 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) => {
+        var _a;
+        const isSpecta = isSpectaApp();
+        if (!isSpecta) {
+            return;
+        }
+        const config = JSON.parse((_a = PageConfig.getOption('spectaConfig')) !== null && _a !== void 0 ? _a : '{}');
+        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/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.1",
+    "version": "0.1.3",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",
@@ -74,13 +74,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 +96,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 +144,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 +153,11 @@
             "sourceType": "module"
         },
         "plugins": [
-            "@typescript-eslint"
+            "@typescript-eslint",
+            "react-hooks"
         ],
         "rules": {
+            "react-hooks/exhaustive-deps": "error",
             "@typescript-eslint/naming-convention": [
                 "error",
                 {