jupyter-specta 0.1.6 → 0.1.8

package/README.md

@@ -43,7 +43,55 @@ Once installed, you can build your JupyterLite app, a `specta` app will be inclu
 jupyter lite build
 ```
 
-Then serve the contents of the output directory (by default `./_output`) using any static file server. You can access the `specta` app at the `/specta/` path.
+Then serve the contents of the output directory (by default `./_output`) using any static file server. You can access the `Specta` app at the `/specta/` path.
+
+## Specta Configuration
+
+### Top-level configuration
+
+Specta can be configured using the typicall JupyterLite configuration file: `jupyter-lite.json`. You can add a `spectaConfig` key to the `jupyter-config-data` section of this file to customize the Specta app.
+
+The following options are available:
+
+- `defaultLayout`: The default layout when opening a file.
+- `hideTopbar`: Boolean flag to show or hide the top bar.
+- `topBar`: Configuration for the top bar.
+
+```json
+      "topBar": {
+        "icon": "url to the icon file, it's shown on the left of the top bar",
+        "title": "Title on the left of the top bar",
+        "themeToggle": "Boolean flag to show/hide the theme selector",
+        "textColor": "Color of the text on the top bar",
+        "background": "Background color of the top bar"
+      },
+```
+
+- `perFileConfig`: an object with key is the file path and value is the above configuration, it's used to have different layout/top bar config for each files, for example:
+
+```json
+      "perFileConfig": {
+        "blog.ipynb": {
+          "hideTopbar": false,
+          "defaultLayout": "article",
+          "topBar": {
+            "title": "My blog",
+            "themeToggle": false
+          }
+        }
+      }
+```
+
+### Notebook specific configuration
+
+By default, when you open a notebook in Specta, all code cells are hidden, and placeholder skeletons are shown instead at the position of the cell. You can configure the visibility of each cell by using the Specta cell metadata toolbar.
+
+![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:
+
+- `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`
 
 ## Try it online!
 

package/lib/app.js

@@ -1,6 +1,7 @@
 import { JupyterFrontEnd, createRendermimePlugins } from '@jupyterlab/application';
 import { SpectaShell } from './shell';
 import { PageConfig } from '@jupyterlab/coreutils';
+import { Base64ModelFactory } from '@jupyterlab/docregistry';
 export class SpectaApp extends JupyterFrontEnd {
     constructor(options) {
         var _a;
@@ -17,6 +18,7 @@ export class SpectaApp extends JupyterFrontEnd {
          * The version of the application.
          */
         this.version = '1.0.0';
+        this.docRegistry.addModelFactory(new Base64ModelFactory());
         if (options.mimeExtensions) {
             for (const plugin of createRendermimePlugins(options.mimeExtensions)) {
                 this.registerPlugin(plugin);

package/lib/document/factory.js

@@ -35,10 +35,6 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory {
                     // Specta app, add topbar to layout
                     topbar.id = 'specta-topbar-widget';
                     this._shell.add(topbar, 'top');
-                    if (topbar.parent) {
-                        topbar.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';
-                    }
                 }
             }
             else if (isSpecta) {

package/lib/document/plugin.js

@@ -6,6 +6,7 @@ import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 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';
 const activate = (app, rendermime, tracker, editorServices, contentFactory, spectaLayoutRegistry, themeManager) => {
@@ -70,7 +71,7 @@ export const spectaOpener = {
             else {
                 let count = 0;
                 const tryOpen = () => {
-                    const widget = docManager.openOrReveal(path);
+                    const widget = docManager.openOrReveal(path, 'default');
                     if (widget) {
                         app.shell.add(widget, 'main');
                         hideAppLoadingIndicator();
@@ -79,7 +80,10 @@ export const spectaOpener = {
                         count++;
                         if (count > 10) {
                             console.error('Failed to open file', path);
-                            //TODO Open in text editor?
+                            const widget = new Widget();
+                            widget.node.innerHTML = `<h2 style="text-align: center; margin-top: 200px;">Failed to open file ${path}</h2>`;
+                            app.shell.add(widget, 'main');
+                            hideAppLoadingIndicator();
                             return;
                         }
                         setTimeout(tryOpen, 100);

package/lib/shell.js

@@ -33,6 +33,7 @@ export class SpectaShell extends Widget {
         rootLayout.addWidget(topHandler.panel);
         const hboxPanel = (this._mainPanel = new BoxPanel());
         hboxPanel.id = 'jp-main-content-panel';
+        hboxPanel.addClass('specta-main-content-panel');
         hboxPanel.direction = 'top-to-bottom';
         BoxLayout.setStretch(hboxPanel, 1);
         rootLayout.addWidget(hboxPanel);

package/lib/tool.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
-import { NotebookModelFactory } from '@jupyterlab/notebook';
 import { NotebookGridWidgetFactory } from './document/factory';
 import { SpectaWidgetFactory } from './specta_widget_factory';
 export function registerDocumentFactory(options) {
@@ -27,26 +26,14 @@ export function registerDocumentFactory(options) {
     const widgetFactory = new NotebookGridWidgetFactory({
         name: factoryName,
         modelName: 'notebook',
-        fileTypes: ['ipynb'],
-        spectaWidgetFactory,
+        fileTypes: ['notebook'],
         shell: app.shell,
+        spectaWidgetFactory,
         themeManager,
         spectaLayoutRegistry
     });
     // 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);
@@ -109,10 +96,15 @@ export function readSpectaConfig({ nbMetadata, nbPath }) {
     if (!rawConfig || rawConfig.length === 0) {
         rawConfig = '{}';
     }
+    let pathWithoutDrive = nbPath;
+    const paths = nbPath === null || nbPath === void 0 ? void 0 : nbPath.split(':');
+    if (paths && paths.length > 1) {
+        pathWithoutDrive = paths[1];
+    }
     const _b = JSON.parse(rawConfig), { perFileConfig } = _b, globalConfig = __rest(_b, ["perFileConfig"]);
     let spectaConfig = Object.assign({}, (globalConfig !== null && globalConfig !== void 0 ? globalConfig : {}));
-    if (perFileConfig && nbPath && perFileConfig[nbPath]) {
-        spectaConfig = Object.assign(Object.assign({}, spectaConfig), perFileConfig[nbPath]);
+    if (perFileConfig && pathWithoutDrive && perFileConfig[pathWithoutDrive]) {
+        spectaConfig = Object.assign(Object.assign({}, spectaConfig), perFileConfig[pathWithoutDrive]);
     }
     const spectaMetadata = ((_a = nbMetadata === null || nbMetadata === void 0 ? void 0 : nbMetadata.specta) !== null && _a !== void 0 ? _a : {});
     return Object.assign(Object.assign({}, spectaConfig), spectaMetadata);

package/lib/topbar/index.js

@@ -30,9 +30,5 @@ export const topbarPlugin = {
         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/widget.js

@@ -5,13 +5,14 @@ import { SettingContent } from './settingDialog';
 export function TopbarElement(props) {
     var _a, _b;
     const config = React.useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        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)',
             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)'
+            textColor: (_h = (_g = props.config) === null || _g === void 0 ? void 0 : _g.textColor) !== null && _h !== void 0 ? _h : 'var(--jp-ui-font-color1)',
+            icon: (_j = props.config) === null || _j === void 0 ? void 0 : _j.icon
         };
     }, [props.config]);
     const [open, setOpen] = useState(false);
@@ -34,7 +35,7 @@ export function TopbarElement(props) {
             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 }) }),
+            React.createElement(IconButton, { ref: buttonRef, onClick: () => setOpen(!open), icon: React.createElement(GearIcon, { fill: "var(--jp-ui-font-color2)", height: 23, width: 23 }) }),
             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.6",
+    "version": "0.1.8",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",
@@ -60,6 +60,8 @@
         "@jupyterlab/docregistry": "^4.4.2",
         "@jupyterlab/filebrowser": "^4.4.2",
         "@jupyterlab/filebrowser-extension": "^4.4.2",
+        "@jupyterlab/imageviewer": "^4.4.2",
+        "@jupyterlab/imageviewer-extension": "^4.4.2",
         "@jupyterlab/json-extension": "^4.4.2",
         "@jupyterlab/logconsole": "^4.4.2",
         "@jupyterlab/mainmenu": "^4.4.2",

package/style/base.css

@@ -55,10 +55,11 @@
 
 .jp-specta-notebook-panel {
   overflow: auto;
+  padding: 0 5px 5px 5px;
 }
 
 #specta-top-panel {
-  min-height: 40px;
+  min-height: 36px;
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
@@ -73,12 +74,9 @@
 .specta-topbar {
   display: flex;
   flex-direction: row;
-  height: 40px;
+  height: 36px;
   width: calc(100% + 20px);
-  box-shadow:
-    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;
+  border-bottom: solid 0.5px var(--jp-border-color1);
   gap: 10px;
   align-items: center;
   justify-content: space-between;
@@ -97,8 +95,8 @@
 }
 
 .specta-topbar-title {
-  line-height: 40px;
-  font-size: 1.5rem;
+  line-height: 36px;
+  font-size: 1.25rem;
 }
 
 .specta-topbar-theme {

package/style/style.css

@@ -4,7 +4,7 @@
   background: var(--jp-layout-color1);
 }
 
-.specta-document-viewer #jp-main-content-panel jp-toolbar {
+.specta-document-viewer #jp-main-content-panel jp-toolbar:first-of-type {
   display: none;
 }
 
@@ -26,3 +26,8 @@
   background: var(--jp-layout-color1);
   box-shadow: var(--jp-elevation-z4);
 }
+
+.specta-main-content-panel {
+  padding-left: 5px;
+  padding-right: 5px;
+}