@jupyterlab/notebook-extension 4.0.0-alpha.20 → 4.0.0-alpha.21

package/src/tool-widgets/activeCellToolWidget.tsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { FieldProps } from '@rjsf/utils';
+import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
+import { INotebookTracker, NotebookTools } from '@jupyterlab/notebook';
+import { ISharedText } from '@jupyter/ydoc';
+import { PanelLayout, Widget } from '@lumino/widgets';
+import { CodeCellModel, ICellModel, InputPrompt } from '@jupyterlab/cells';
+import { Debouncer } from '@lumino/polling';
+
+/**
+ * The class name added to the ActiveCellTool.
+ */
+const ACTIVE_CELL_TOOL_CLASS = 'jp-ActiveCellTool';
+/**
+ * The class name added to the ActiveCellTool content.
+ */
+const ACTIVE_CELL_TOOL_CONTENT_CLASS = 'jp-ActiveCellTool-Content';
+/**
+ * The class name added to the ActiveCellTool cell content.
+ */
+const ACTIVE_CELL_TOOL_CELL_CONTENT_CLASS = 'jp-ActiveCellTool-CellContent';
+
+namespace Private {
+  /**
+   * Custom active cell field options.
+   */
+  export interface IOptions {
+    /**
+     * The tracker to the notebook panel.
+     */
+    tracker: INotebookTracker;
+
+    /**
+     * Editor languages registry
+     */
+    languages: IEditorLanguageRegistry;
+  }
+}
+
+/**
+ * The active cell field, displaying the first line and execution count of the active cell.
+ *
+ * ## Note
+ * This field does not work as other metadata form fields, as it does not update metadata.
+ */
+export class ActiveCellTool extends NotebookTools.Tool {
+  constructor(options: Private.IOptions) {
+    super();
+    const { languages } = options;
+    this._tracker = options.tracker;
+
+    this.addClass(ACTIVE_CELL_TOOL_CLASS);
+    this.layout = new PanelLayout();
+
+    this._inputPrompt = new InputPrompt();
+    (this.layout as PanelLayout).addWidget(this._inputPrompt);
+
+    // First code line container
+    const node = document.createElement('div');
+    node.classList.add(ACTIVE_CELL_TOOL_CONTENT_CLASS);
+    const container = node.appendChild(document.createElement('div'));
+    const editor = container.appendChild(document.createElement('pre'));
+    container.className = ACTIVE_CELL_TOOL_CELL_CONTENT_CLASS;
+    this._editorEl = editor;
+    (this.layout as PanelLayout).addWidget(new Widget({ node }));
+
+    const update = async () => {
+      this._editorEl.innerHTML = '';
+      if (this._cellModel?.type === 'code') {
+        this._inputPrompt.executionCount = `${
+          (this._cellModel as CodeCellModel).executionCount ?? ''
+        }`;
+        this._inputPrompt.show();
+      } else {
+        this._inputPrompt.executionCount = null;
+        this._inputPrompt.hide();
+      }
+
+      if (this._cellModel) {
+        await languages.highlight(
+          this._cellModel.sharedModel.getSource().split('\n')[0],
+          languages.findByMIME(this._cellModel.mimeType),
+          this._editorEl
+        );
+      }
+    };
+
+    this._refreshDebouncer = new Debouncer(update, 150);
+  }
+
+  render(props: FieldProps): JSX.Element {
+    const activeCell = this._tracker.activeCell;
+    if (activeCell) this._cellModel = activeCell?.model || null;
+    (this._cellModel?.sharedModel as ISharedText).changed.connect(
+      this.refresh,
+      this
+    );
+    this._cellModel?.mimeTypeChanged.connect(this.refresh, this);
+    this.refresh()
+      .then(() => undefined)
+      .catch(() => undefined);
+    return <div ref={ref => ref?.appendChild(this.node)}></div>;
+  }
+
+  private async refresh(): Promise<void> {
+    await this._refreshDebouncer.invoke();
+  }
+
+  private _tracker: INotebookTracker;
+  private _cellModel: ICellModel | null;
+  private _refreshDebouncer: Debouncer<void, void, null[]>;
+  private _editorEl: HTMLPreElement;
+  private _inputPrompt: InputPrompt;
+}

package/src/tool-widgets/metadataEditorFields.tsx

@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { FieldProps } from '@rjsf/utils';
+import { INotebookTracker, NotebookTools } from '@jupyterlab/notebook';
+import { ITranslator } from '@jupyterlab/translation';
+import { CodeEditor } from '@jupyterlab/codeeditor';
+import { ObservableJSON } from '@jupyterlab/observables';
+import { JSONObject } from '@lumino/coreutils';
+
+const CELL_METADATA_EDITOR_CLASS = 'jp-CellMetadataEditor';
+const NOTEBOOK_METADATA_EDITOR_CLASS = 'jp-NotebookMetadataEditor';
+
+namespace Private {
+  /**
+   * Custom metadata field options.
+   */
+  export interface IOptions {
+    /**
+     * The editor factory used by the tool.
+     */
+    editorFactory: CodeEditor.Factory;
+
+    /**
+     * The tracker to the notebook panel.
+     */
+    tracker: INotebookTracker;
+
+    /**
+     * The label of the JSON editor.
+     */
+    label?: string;
+
+    /**
+     * Language translator.
+     */
+    translator?: ITranslator;
+  }
+}
+
+/**
+ * The cell metadata field.
+ *
+ * ## Note
+ * This field does not work as other metadata form fields, as it does not use RJSF to update metadata.
+ * It extends the MetadataEditorTool which updates itself the metadata.
+ * It only renders the node of MetadataEditorTool in a React element instead of displaying a RJSF field.
+ */
+export class CellMetadataField extends NotebookTools.MetadataEditorTool {
+  constructor(options: Private.IOptions) {
+    super(options);
+    this._tracker = options.tracker;
+
+    this.editor.editorHostNode.addEventListener('blur', this.editor, true);
+    this.editor.editorHostNode.addEventListener('click', this.editor, true);
+    this.editor.headerNode.addEventListener('click', this.editor);
+  }
+
+  private _onSourceChanged() {
+    if (this.editor.source) {
+      this._tracker.activeCell?.model.sharedModel.setMetadata(
+        this.editor.source.toJSON()
+      );
+    }
+  }
+
+  render(props: FieldProps): JSX.Element {
+    const cell = this._tracker.activeCell;
+    this.editor.source = cell
+      ? new ObservableJSON({ values: cell.model.metadata as JSONObject })
+      : null;
+    this.editor.source?.changed.connect(this._onSourceChanged, this);
+
+    return (
+      <div className={CELL_METADATA_EDITOR_CLASS}>
+        <div ref={ref => ref?.appendChild(this.node)}></div>
+      </div>
+    );
+  }
+
+  private _tracker: INotebookTracker;
+}
+
+/**
+ * The notebook metadata field.
+ *
+ * ## Note
+ * This field does not work as other metadata form fields, as it does not use RJSF to update metadata.
+ * It extends the MetadataEditorTool which updates itself the metadata.
+ * It only renders the node of MetadataEditorTool in a React element instead of displaying a RJSF field.
+ */
+export class NotebookMetadataField extends NotebookTools.MetadataEditorTool {
+  constructor(options: Private.IOptions) {
+    super(options);
+    this._tracker = options.tracker;
+
+    this.editor.editorHostNode.addEventListener('blur', this.editor, true);
+    this.editor.editorHostNode.addEventListener('click', this.editor, true);
+    this.editor.headerNode.addEventListener('click', this.editor);
+  }
+
+  private _onSourceChanged() {
+    if (this.editor.source) {
+      this._tracker.currentWidget?.model?.sharedModel.setMetadata(
+        this.editor.source.toJSON()
+      );
+    }
+  }
+
+  render(props: FieldProps): JSX.Element {
+    const notebook = this._tracker.currentWidget;
+    this.editor.source = notebook
+      ? new ObservableJSON({ values: notebook.model?.metadata as JSONObject })
+      : null;
+    this.editor.source?.changed.connect(this._onSourceChanged, this);
+
+    return (
+      <div className={NOTEBOOK_METADATA_EDITOR_CLASS}>
+        <div ref={ref => ref?.appendChild(this.node)}></div>
+      </div>
+    );
+  }
+
+  private _tracker: INotebookTracker;
+}

package/style/index.css

@@ -25,4 +25,5 @@
 @import url('~@jupyterlab/lsp/style/index.css');
 @import url('~@jupyterlab/mainmenu/style/index.css');
 @import url('~@jupyterlab/notebook/style/index.css');
+@import url('~@jupyterlab/metadataform/style/index.css');
 @import url('~@jupyterlab/property-inspector/style/index.css');

package/style/index.js

@@ -25,4 +25,5 @@ import '@jupyterlab/logconsole/style/index.js';
 import '@jupyterlab/lsp/style/index.js';
 import '@jupyterlab/mainmenu/style/index.js';
 import '@jupyterlab/notebook/style/index.js';
+import '@jupyterlab/metadataform/style/index.js';
 import '@jupyterlab/property-inspector/style/index.js';