@fails-components/jupyter-applet-view 0.0.1-alpha.10

package/src/avtoolbarextension.ts

@@ -0,0 +1,280 @@
+import {
+  ToolbarRegistry,
+  createDefaultFactory,
+  setToolbar
+} from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IObservableList, ObservableList } from '@jupyterlab/observables';
+import { CommandRegistry } from '@lumino/commands';
+import { IDisposable } from '@lumino/disposable';
+import { PanelLayout, Widget } from '@lumino/widgets';
+import { SplitViewNotebookPanel } from './splitviewnotebookpanel';
+import { AppletViewOutputArea, IViewPart } from './avoutputarea';
+import { Toolbar } from '@jupyterlab/ui-components';
+import { Signal } from '@lumino/signaling';
+import { IFailsLauncherInfo } from '@fails-components/jupyter-launcher';
+
+// portions used from Jupyterlab:
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+// This code contains portions from or is inspired by Jupyter lab's notebook extension, especially the createOutputView part
+// Also a lot is taken from the cell toolbar related parts.
+
+export const defaultToolbarItems: ToolbarRegistry.IWidget[] = [
+  {
+    command: 'fails-components-jupyter-applet-view:move_view_up',
+    name: 'move-view-up'
+  },
+  {
+    command: 'fails-components-jupyter-applet-view:move_view_down',
+    name: 'move-view-down'
+  },
+  {
+    command: 'fails-components-jupyter-applet-view:move_view_app_up',
+    name: 'move-view-app-up'
+  },
+  {
+    command: 'fails-components-jupyter-applet-view:move_view_app_down',
+    name: 'move-view-app-down'
+  },
+  {
+    command: 'fails-components-jupyter-applet-view:delete_view',
+    name: 'delete-view'
+  }
+];
+
+// a lot of code taken from Jupyter labs CellBarExtension
+
+export class AppletViewToolbarExtension
+  implements DocumentRegistry.WidgetExtension
+{
+  static readonly FACTORY_NAME = 'AppletView';
+
+  constructor(
+    commands: CommandRegistry,
+    launcherInfo: IFailsLauncherInfo | null,
+    toolbarFactory?: (
+      widget: Widget
+    ) => IObservableList<ToolbarRegistry.IToolbarItem>
+  ) {
+    this._commands = commands;
+    this._launcherInfo = launcherInfo;
+    // # TODO we have to make sure, we get the default, how can we do this?
+    this._toolbarFactory = toolbarFactory ?? this.defaultToolbarFactory;
+  }
+
+  protected get defaultToolbarFactory(): (
+    widget: Widget
+  ) => IObservableList<ToolbarRegistry.IToolbarItem> {
+    const itemFactory = createDefaultFactory(this._commands);
+    return (widget: Widget) =>
+      new ObservableList({
+        values: defaultToolbarItems.map(item => {
+          // console.log('widget? factory', widget);
+          const applet = widget.parent as Widget;
+          const parent = applet.parent as AppletViewOutputArea;
+          const path = parent.path;
+          return {
+            name: item.name,
+            widget: itemFactory(
+              AppletViewToolbarExtension.FACTORY_NAME,
+              widget,
+              {
+                ...item,
+                args: {
+                  // @ts-expect-error cellid is not part of Widget
+                  cellid: widget.cellid,
+                  notepadpath: path,
+                  // @ts-expect-error appid is not part of Widget
+                  widgetid: widget.widgetid
+                }
+              }
+            )
+          };
+        })
+      });
+  }
+
+  createNew(panel: SplitViewNotebookPanel): IDisposable {
+    return new AppletViewToolbarTracker(
+      panel,
+      this._toolbarFactory,
+      this._launcherInfo
+    );
+  }
+
+  private _commands: CommandRegistry;
+  private _toolbarFactory: (
+    widget: Widget
+  ) => IObservableList<ToolbarRegistry.IToolbarItem>;
+  private _launcherInfo: IFailsLauncherInfo | null;
+}
+export class AppletViewToolbarTracker implements IDisposable {
+  /**
+   * AppletViewToolbarTracker constructor
+   *
+   * @param view The Applet View area
+   * @param toolbarFactory The toolbar factory
+   */
+  constructor(
+    notebookpanel: SplitViewNotebookPanel,
+    toolbarFactory: (
+      widget: Widget
+    ) => IObservableList<ToolbarRegistry.IToolbarItem>,
+    launcherInfo: IFailsLauncherInfo | null
+  ) {
+    this._notebookpanel = notebookpanel;
+    this._toolbarFactory = toolbarFactory ?? null;
+
+    // Only add the toolbar to the notebook's active cell (if any) once it has fully rendered and been revealed.
+    void notebookpanel.revealed.then(() => {
+      requestAnimationFrame(() => {
+        this._notebookpanel?.appletViewWidget.viewChanged.connect(
+          this._addToolbar,
+          this
+        );
+        this._addToolbar();
+        if (launcherInfo?.inLecture) {
+          this._setHiddenToolbars(launcherInfo?.inLecture);
+        }
+        if (launcherInfo) {
+          let hasToolbar = !launcherInfo?.inLecture;
+          launcherInfo.inLectureChanged.connect(
+            (sender: IFailsLauncherInfo, newInLecture: boolean) => {
+              if (hasToolbar !== !newInLecture) {
+                this._setHiddenToolbars(newInLecture);
+                hasToolbar = !newInLecture;
+              }
+            }
+          );
+        }
+      });
+    });
+  }
+
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+
+    this._toolbarStore.forEach(tb => tb.dispose());
+    this._toolbarStore = [];
+    this._toolbars = new WeakMap<IViewPart, Toolbar>();
+
+    this._notebookpanel = null;
+
+    Signal.clearData(this);
+  }
+
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  private _addToolbar(): void {
+    const notebookpanel = this._notebookpanel;
+
+    if (notebookpanel && !notebookpanel.isDisposed) {
+      const promises: Promise<void>[] = [
+        /*notebookpanel.ready*/
+      ]; // remove area ready
+      const applets = notebookpanel.appletViewWidget?.applets;
+
+      const doAddToolbar = (part: IViewPart) => {
+        const clone = part.clone;
+        if (clone) {
+          // eslint-disable-next-line no-constant-condition
+          const toolbarWidget = new Toolbar();
+          this._toolbars.set(part, toolbarWidget);
+          this._toolbarStore.push(toolbarWidget);
+          // Note: CELL_MENU_CLASS is deprecated.
+          toolbarWidget.addClass('fl-jp-AppletViewToolbar'); // implement MR
+          if (this._toolbarFactory) {
+            // ts-expect-error Widget has no toolbar
+            // clone.toolbar = toolbarWidget;
+            setToolbar(clone, this._toolbarFactory, toolbarWidget);
+          }
+        }
+      };
+
+      for (const applet of applets) {
+        for (const part of applet.parts) {
+          const clone = part.clone;
+          if (!this._toolbars.has(part)) {
+            if (clone) {
+              // eslint-disable-next-line no-constant-condition
+              doAddToolbar(part);
+            } else {
+              // we have to defer it
+              const slot = () => {
+                doAddToolbar(part);
+                part.cloned.disconnect(slot);
+              };
+              part.cloned.connect(slot);
+              this._toolbars.set(part, null);
+            }
+          }
+          // FIXME toolbarWidget.update() - strangely this does not work
+        }
+      }
+
+      // promises.push(area.ready); // remove?
+      // Wait for all the buttons to be rendered before attaching the toolbar.
+      Promise.all(promises)
+        .then(() => {
+          for (const applet of applets) {
+            for (const part of applet.parts) {
+              const toolbarWidget = this._toolbars.get(part);
+              if (!toolbarWidget) {
+                continue;
+              }
+              if (!part.clone || part.clone.isDisposed) {
+                continue;
+              }
+              const clone = part.clone;
+              if (clone) {
+                // (clone!.layout as PanelLayout).insertWidget(0, toolbarWidget);
+                (clone!.layout as PanelLayout).addWidget(toolbarWidget);
+              }
+            }
+          }
+
+          // For rendered markdown, watch for resize events.
+          // area.displayChanged.connect(this._resizeEventCallback, this); // remove?
+          // Watch for changes in the cell's contents.
+          // area.model.contentChanged.connect(this._changedEventCallback, this); ?
+          // Hide the cell toolbar if it overlaps with cell contents
+          // this._updateCellForToolbarOverlap(area); // remove?
+        })
+        .catch(e => {
+          console.error('Error rendering buttons of the cell toolbar: ', e);
+        });
+    }
+  }
+
+  _setHiddenToolbars(hidden: boolean): void {
+    const notebookpanel = this._notebookpanel;
+    if (notebookpanel && !notebookpanel.isDisposed) {
+      const applets = notebookpanel.appletViewWidget?.applets;
+      for (const applet of applets) {
+        for (const part of applet.parts) {
+          const toolbarWidget = this._toolbars.get(part);
+          if (!toolbarWidget) {
+            continue;
+          }
+          toolbarWidget.setHidden(hidden);
+        }
+      }
+    }
+  }
+
+  private _isDisposed = false;
+  private _notebookpanel: SplitViewNotebookPanel | null;
+  private _toolbars = new WeakMap<IViewPart, Toolbar | null>();
+  private _toolbarStore: Toolbar[] = [];
+  private _toolbarFactory: (
+    widget: Widget
+  ) => IObservableList<ToolbarRegistry.IToolbarItem>;
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+import {
+  ILayoutRestorer,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { ITranslator } from '@jupyterlab/translation';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { AppletViewToolbarExtension } from './avtoolbarextension';
+import { activateAppletView } from './appletview';
+import { IFailsInterceptor } from '@fails-components/jupyter-interceptor';
+import { IFailsLauncherInfo } from '@fails-components/jupyter-launcher';
+
+const appletView: JupyterFrontEndPlugin<void> = {
+  id: '@fails-components/jupyter-applet-view:plugin',
+  description:
+    "An extension, that let's you select cell and switch to an applet mode, where only the selected cells are visible. This is used for fails-components to have jupyter applets in interactive teaching. ",
+  requires: [IDocumentManager, INotebookTracker, ITranslator],
+  optional: [ILayoutRestorer, IFailsLauncherInfo, IFailsInterceptor],
+  autoStart: true,
+  activate: activateAppletView
+};
+
+const appletViewToolbar: JupyterFrontEndPlugin<void> = {
+  id: '@fails-components/jupyter-applet-view:toolbar',
+  description: 'Add the applet view toolbar during editing.',
+  autoStart: true,
+  activate: async (app: JupyterFrontEnd, launcherInfo: IFailsLauncherInfo) => {
+    const toolbarItems = undefined;
+    app.docRegistry.addWidgetExtension(
+      'Notebook',
+      new AppletViewToolbarExtension(app.commands, launcherInfo, toolbarItems)
+    );
+  },
+  optional: [IFailsLauncherInfo]
+};
+
+/**
+ * Initialization data for the @fails-components/jupyter-applet-view extension.
+ */
+const plugins: JupyterFrontEndPlugin<any>[] = [
+  // all JupyterFrontEndPlugins
+  appletView,
+  appletViewToolbar
+];
+
+export default plugins;

package/src/splitviewnotebookpanel.ts

@@ -0,0 +1,186 @@
+import { DocumentRegistry, DocumentWidget } from '@jupyterlab/docregistry';
+import {
+  NotebookPanel,
+  Notebook,
+  INotebookModel,
+  NotebookHistory,
+  NotebookWidgetFactory,
+  StaticNotebook
+} from '@jupyterlab/notebook';
+import { BoxLayout, SplitPanel } from '@lumino/widgets';
+import { AppletViewOutputArea } from './avoutputarea';
+import {
+  IFailsLauncherInfo,
+  IAppletScreenshottaker,
+  IScreenShotOpts
+} from '@fails-components/jupyter-launcher';
+import { IFailsInterceptor } from '@fails-components/jupyter-interceptor';
+
+interface IAppletResizeEvent {
+  appid: string;
+  width: number;
+  height: number;
+}
+
+export class SplitViewNotebookPanel
+  extends NotebookPanel
+  implements IAppletScreenshottaker
+{
+  constructor(
+    options: DocumentWidget.IOptions<Notebook, INotebookModel>,
+    failsLauncherInfo: IFailsLauncherInfo | undefined,
+    failsInterceptor: IFailsInterceptor | undefined
+  ) {
+    super(options);
+    this._failsLauncherInfo = failsLauncherInfo;
+    // now we have to do the following
+    // 1. remove this._content from the layout
+    const content = this['_content'];
+    const layout = this.layout as BoxLayout;
+    layout.removeWidget(content);
+    // 2. add a BoxLayout instead
+    const splitPanel = new SplitPanel({
+      spacing: 1,
+      orientation: 'horizontal'
+    });
+    BoxLayout.setStretch(splitPanel, 1);
+
+    // 3. add content to the BoxLayout, as well as a applet view area
+    splitPanel.addWidget(content);
+    const widget = (this._appletviewWidget = new AppletViewOutputArea({
+      notebook: this,
+      applets: undefined,
+      translator: options.translator,
+      interceptor: failsInterceptor
+    }));
+    splitPanel.addWidget(widget);
+    layout.addWidget(splitPanel);
+    // move to separate handler
+    if (failsLauncherInfo?.inLecture) {
+      this.toolbar.hide();
+      this.addClass('fl-jl-notebook-inlecture');
+      this._appletviewWidget.inLecture = true;
+      content.hide();
+      splitPanel.setRelativeSizes([0, 1]); // change sizes
+    }
+    if (failsLauncherInfo) {
+      failsLauncherInfo.inLectureChanged.connect(
+        (sender: IFailsLauncherInfo, newInLecture: boolean) => {
+          if (newInLecture) {
+            this.toolbar.hide();
+            this.addClass('fl-jl-notebook-inlecture');
+            this._appletviewWidget.inLecture = true;
+            content.hide();
+            splitPanel.setRelativeSizes([0, 1]); // change sizes
+          } else {
+            this.toolbar.show();
+            this.removeClass('fl-jl-notebook-inlecture');
+            this._appletviewWidget.inLecture = false;
+            content.show();
+            splitPanel.setRelativeSizes([1, 1]); // change sizes
+            widget.unselectApplet();
+          }
+        }
+      );
+      if (
+        failsLauncherInfo.inLecture &&
+        typeof failsLauncherInfo.selectedAppid !== 'undefined'
+      ) {
+        widget.selectApplet(failsLauncherInfo.selectedAppid);
+      }
+      failsLauncherInfo.selectedAppidChanged.connect(
+        (sender: IFailsLauncherInfo, appid: string | undefined) => {
+          if (typeof appid !== 'undefined') {
+            widget.selectApplet(appid);
+          }
+        }
+      );
+    }
+    widget.viewChanged.connect((sender: AppletViewOutputArea) => {
+      const failsData = sender.saveData();
+      if (failsData) {
+        const model = this.context.model;
+        model.setMetadata('failsApp', failsData);
+      }
+    });
+    const metadataUpdater = () => {
+      const { failsApp, kernelspec } = this.context.model.metadata;
+      if (failsLauncherInfo?.reportMetadata) {
+        failsLauncherInfo.reportMetadata({ failsApp, kernelspec });
+      }
+    };
+    this.context.model.metadataChanged.connect(metadataUpdater);
+    metadataUpdater();
+  }
+
+  appletResizeinfo({ appid, width, height }: IAppletResizeEvent) {
+    if (this._failsLauncherInfo) {
+      this._failsLauncherInfo.appletSizes[appid] = { appid, width, height };
+    }
+  }
+
+  get appletViewWidget() {
+    return this._appletviewWidget;
+  }
+
+  async takeAppScreenshot(opts: IScreenShotOpts): Promise<Blob | undefined> {
+    return await this._appletviewWidget.takeAppScreenshot(opts);
+  }
+  /*
+    private _splitPanel: SplitPanel; */
+  private _appletviewWidget: AppletViewOutputArea;
+  private _failsLauncherInfo: IFailsLauncherInfo | undefined;
+}
+namespace SplitViewNotebookWidgetFactory {
+  export interface IOptions
+    extends NotebookWidgetFactory.IOptions<NotebookPanel> {
+    failsLauncherInfo?: IFailsLauncherInfo;
+    failsInterceptor?: IFailsInterceptor;
+  }
+}
+
+export class SplitViewNotebookWidgetFactory extends NotebookWidgetFactory {
+  constructor(options: SplitViewNotebookWidgetFactory.IOptions) {
+    super(options);
+    this._failsLauncherInfo = options.failsLauncherInfo;
+    this._failsInterceptor = options.failsInterceptor;
+  }
+  protected createNewWidget(
+    context: DocumentRegistry.IContext<INotebookModel>,
+    source?: NotebookPanel
+  ): SplitViewNotebookPanel {
+    // copied from basis object
+    const translator = (context as any).translator;
+    const kernelHistory = new NotebookHistory({
+      sessionContext: context.sessionContext,
+      translator: translator
+    });
+    const nbOptions = {
+      rendermime: source
+        ? source.content.rendermime
+        : this.rendermime.clone({ resolver: context.urlResolver }),
+      contentFactory: this.contentFactory,
+      mimeTypeService: this.mimeTypeService,
+      editorConfig: source
+        ? source.content.editorConfig
+        : (this['_editorConfig'] as StaticNotebook.IEditorConfig),
+      notebookConfig: source
+        ? source.content.notebookConfig
+        : (this['_notebookConfig'] as StaticNotebook.INotebookConfig),
+      translator,
+      kernelHistory
+    };
+    const content = this.contentFactory.createNotebook(nbOptions);
+    return new SplitViewNotebookPanel(
+      {
+        context,
+        content
+      },
+      this._failsLauncherInfo,
+      this._failsInterceptor
+    );
+  }
+
+  private _failsLauncherInfo: IFailsLauncherInfo | undefined;
+  private _failsInterceptor: IFailsInterceptor | undefined;
+}

package/style/base.css

@@ -0,0 +1,5 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/

package/style/index.css

@@ -0,0 +1,163 @@
+@import url('base.css');
+
+.fl-jp-AppletView .fl-jp-Applet .jp-OutputArea {
+  display: block;
+}
+
+.fl-jp-AppletView .fl-jp-Applet {
+  overflow-y: auto;
+  background: var(--jp-layout-color0);
+  box-shadow: var(--jp-elevation-z4);
+}
+
+.fl-jp-AppletView {
+  overflow-y: auto;
+}
+
+.fl-jp-AppletView .jp-collapseHeadingButton {
+  display: none;
+}
+
+.fl-jp-AppletView .jp-InternalAnchorLink {
+  display: none;
+}
+
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-OutputArea-child,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-Cell,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-CellHeader,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-CellFooter,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-Cell-inputWrapper,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-InputArea,
+.fl-jl-notebook-inlecture .fl-jp-Applet .jp-OutputArea {
+  width: fit-content;
+}
+
+.fl-jl-notebook-inlecture .fl-jp-Applet h1,
+.fl-jl-notebook-inlecture .fl-jp-Applet h2,
+.fl-jl-notebook-inlecture .fl-jp-Applet h3,
+.fl-jl-notebook-inlecture .fl-jp-Applet h4,
+.fl-jl-notebook-inlecture .fl-jp-Applet h5,
+.fl-jl-notebook-inlecture .fl-jp-Applet h6 {
+  white-space: nowrap;
+
+  /* overflow: hidden; 
+     text-overflow: ellipsis; */
+}
+
+.fl-jl-notebook-inlecture .jp-OutputArea-output {
+  width: max-content;
+  height: max-content;
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    max-height: 50vh;
+  }
+
+  90% {
+    opacity: 0.1;
+    max-height: 50vh;
+  }
+
+  100% {
+    opacity: 0;
+    max-height: 0;
+  }
+}
+
+.fl-jl-notebook-inlecture [data-mime-type='application/vnd.jupyter.stderr'] {
+  opacity: 1;
+  max-height: 50vh;
+  overflow: hidden;
+  animation: fade-out 2s ease forwards;
+  animation-delay: 2s;
+}
+
+.fl-jp-AppletViewToolbar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-shadow: none;
+  border-bottom: none;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title {
+  box-sizing: border-box;
+  padding: 0 10px;
+  background: #f5f5f5;
+  border: 2px solid #c0c0c0;
+  border-bottom: none;
+  font:
+    12px Helvetica,
+    Arial,
+    sans-serif;
+  min-height: 22px;
+  max-height: 22px;
+  min-width: 35px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.lm-AccordionPanel
+  .lm-AccordionPanel-title
+  .lm-AccordionPanel-titleCollapser::before {
+  content: '\25B2';
+  position: absolute;
+  right: 10px;
+}
+
+.lm-AccordionPanel
+  .lm-AccordionPanel-title.lm-mod-expanded
+  .lm-AccordionPanel-titleCollapser::before {
+  content: '\25BC';
+}
+
+.fl-jl-notebook-inlecture .lm-AccordionPanel-title {
+  display: none;
+}
+
+.fl-jl-notebook-inlecture .lm-SplitPanel-handle {
+  display: none;
+}
+
+.fl-jl-notebook-inlecture .fl-jp-AppletView {
+  overflow: hidden;
+}
+
+.fl-jl-notebook-inlecture .jp-NotebookPanel-notebook {
+  display: none;
+}
+
+body[data-notebook='notebooks'] .jp-WindowedPanel-inner {
+  margin-top: 0;
+}
+
+.jp-OutputArea.fl-jl-cell-interceptor-unsupported:not(
+    .fl-jl-notebook-inlecture *
+  )::after {
+  content: 'Network transmission of this output is unsupported.';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  color: red;
+  padding: 2px 4px;
+  font-size: 1em;
+  font-weight: bold;
+  text-align: start;
+}
+
+.jp-OutputArea .widget-button:not(.fl-jl-notebook-inlecture *)::after {
+  content: 'Unsupported!';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  color: red;
+  background-color: #fffc;
+  padding: 2px 4px;
+  font-size: 1em;
+  font-weight: bold;
+  text-align: start;
+}

package/style/index.js

@@ -0,0 +1,2 @@
+import './base.css';
+import './index.css';