@jupyterlab/debugger 4.0.0-alpha.9 → 4.0.0-beta.0

package/src/panels/variables/index.ts

@@ -0,0 +1,199 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import {
+  PanelWithToolbar,
+  tableRowsIcon,
+  ToolbarButton,
+  treeViewIcon
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Panel, Widget } from '@lumino/widgets';
+import { IDebugger } from '../../tokens';
+import { VariablesBodyGrid } from './grid';
+import { ScopeSwitcher } from './scope';
+import { VariablesBodyTree } from './tree';
+
+/**
+ * A Panel to show a variable explorer.
+ */
+export class Variables extends PanelWithToolbar {
+  /**
+   * Instantiate a new Variables Panel.
+   *
+   * @param options The instantiation options for a Variables Panel.
+   */
+  constructor(options: Variables.IOptions) {
+    super(options);
+    const { model, service, commands, themeManager } = options;
+    const translator = options.translator || nullTranslator;
+    const trans = translator.load('jupyterlab');
+    this.title.label = trans.__('Variables');
+    this.toolbar.addClass('jp-DebuggerVariables-toolbar');
+    this._tree = new VariablesBodyTree({
+      model,
+      service,
+      commands,
+      translator
+    });
+    this._table = new VariablesBodyGrid({
+      model,
+      commands,
+      themeManager,
+      translator
+    });
+    this._table.hide();
+
+    this.toolbar.addItem(
+      'scope-switcher',
+      new ScopeSwitcher({
+        translator,
+        model,
+        tree: this._tree,
+        grid: this._table
+      })
+    );
+
+    const onViewChange = (): void => {
+      if (this._table.isHidden) {
+        this._tree.hide();
+        this._table.show();
+        this.node.setAttribute('data-jp-table', 'true');
+        markViewButtonSelection('table');
+      } else {
+        this._tree.show();
+        this._table.hide();
+        this.node.removeAttribute('data-jp-table');
+        markViewButtonSelection('tree');
+      }
+      this.update();
+    };
+
+    const treeViewButton = new ToolbarButton({
+      icon: treeViewIcon,
+      className: 'jp-TreeView',
+      onClick: onViewChange,
+      tooltip: trans.__('Tree View')
+    });
+
+    const tableViewButton = new ToolbarButton({
+      icon: tableRowsIcon,
+      className: 'jp-TableView',
+      onClick: onViewChange,
+      tooltip: trans.__('Table View')
+    });
+
+    const markViewButtonSelection = (selectedView: string): void => {
+      const viewModeClassName = 'jp-ViewModeSelected';
+
+      if (selectedView === 'tree') {
+        tableViewButton.removeClass(viewModeClassName);
+        treeViewButton.addClass(viewModeClassName);
+      } else {
+        treeViewButton.removeClass(viewModeClassName);
+        tableViewButton.addClass(viewModeClassName);
+      }
+    };
+
+    markViewButtonSelection(this._table.isHidden ? 'tree' : 'table');
+
+    this.toolbar.addItem('view-VariableTreeView', treeViewButton);
+
+    this.toolbar.addItem('view-VariableTableView', tableViewButton);
+
+    this.addWidget(this._tree);
+    this.addWidget(this._table);
+    this.addClass('jp-DebuggerVariables');
+  }
+
+  /**
+   * Set the variable filter for both the tree and table views.
+   */
+  set filter(filter: Set<string>) {
+    this._tree.filter = filter;
+    this._table.filter = filter;
+  }
+
+  /**
+   * A message handler invoked on a `'resize'` message.
+   *
+   * @param msg The Lumino message to process.
+   */
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    this._resizeBody(msg);
+  }
+
+  /**
+   * Resize the body.
+   *
+   * @param msg The resize message.
+   */
+  private _resizeBody(msg: Widget.ResizeMessage): void {
+    const height = msg.height - this.toolbar.node.offsetHeight;
+    this._tree.node.style.height = `${height}px`;
+  }
+
+  private _tree: VariablesBodyTree;
+  private _table: VariablesBodyGrid;
+}
+
+/**
+ * Convert a variable to a primitive type.
+ *
+ * @param variable The variable.
+ */
+export const convertType = (variable: IDebugger.IVariable): string | number => {
+  const { type, value } = variable;
+  switch (type) {
+    case 'int':
+      return parseInt(value, 10);
+    case 'float':
+      return parseFloat(value);
+    case 'bool':
+      return value;
+    case 'str':
+      if (variable.presentationHint?.attributes?.includes('rawString')) {
+        return value.slice(1, value.length - 1);
+      } else {
+        return value;
+      }
+    default:
+      return type ?? value;
+  }
+};
+
+/**
+ * A namespace for Variables `statics`.
+ */
+export namespace Variables {
+  /**
+   * Instantiation options for `Variables`.
+   */
+  export interface IOptions extends Panel.IOptions {
+    /**
+     * The variables model.
+     */
+    model: IDebugger.Model.IVariables;
+    /**
+     * The debugger service.
+     */
+    service: IDebugger;
+    /**
+     * The commands registry.
+     */
+    commands: CommandRegistry;
+
+    /**
+     * An optional application theme manager to detect theme changes.
+     */
+    themeManager?: IThemeManager | null;
+
+    /**
+     * The application language translator
+     */
+    translator?: ITranslator;
+  }
+}

package/src/panels/variables/mimerenderer.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { MainAreaWidget } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry, MimeModel } from '@jupyterlab/rendermime';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Panel } from '@lumino/widgets';
+import { murmur2 } from '../../hash';
+import { IDebugger } from '../../tokens';
+
+const RENDERER_PANEL_CLASS = 'jp-VariableRendererPanel';
+const RENDERER_PANEL_RENDERER_CLASS = 'jp-VariableRendererPanel-renderer';
+
+/**
+ * Debugger variable mime type renderer
+ */
+export class VariableMimeRenderer extends MainAreaWidget<Panel> {
+  /**
+   * Instantiate a new VariableMimeRenderer.
+   */
+  constructor(options: VariableMimeRenderer.IOptions) {
+    const { dataLoader, rendermime, translator } = options;
+    const content = new Panel();
+    const loaded = new PromiseDelegate<void>();
+    super({
+      content,
+      reveal: Promise.all([dataLoader, loaded.promise])
+    });
+    this.content.addClass(RENDERER_PANEL_CLASS);
+    this.trans = (translator ?? nullTranslator).load('jupyterlab');
+    this.dataLoader = dataLoader;
+    this.renderMime = rendermime;
+    this._dataHash = null;
+
+    this.refresh()
+      .then(() => {
+        loaded.resolve();
+      })
+      .catch(reason => loaded.reject(reason));
+  }
+
+  /**
+   * Refresh the variable view
+   */
+  async refresh(force = false): Promise<void> {
+    let data = await this.dataLoader();
+
+    if (Object.keys(data.data).length === 0) {
+      data = {
+        data: {
+          'text/plain': this.trans.__(
+            'The variable is undefined in the active context.'
+          )
+        },
+        metadata: {}
+      };
+    }
+
+    if (data.data) {
+      const hash = murmur2(JSON.stringify(data), 17);
+      if (force || this._dataHash !== hash) {
+        if (this.content.layout) {
+          this.content.widgets.forEach(w => {
+            this.content.layout!.removeWidget(w);
+          });
+        }
+
+        // We trust unconditionally the data as the user is required to
+        // execute the code to load a particular variable in memory
+        const mimeType = this.renderMime.preferredMimeType(data.data, 'any');
+
+        if (mimeType) {
+          const widget = this.renderMime.createRenderer(mimeType);
+          widget.addClass(RENDERER_PANEL_RENDERER_CLASS);
+          const model = new MimeModel({ ...data, trusted: true });
+          this._dataHash = hash;
+          await widget.renderModel(model);
+
+          this.content.addWidget(widget);
+        } else {
+          this._dataHash = null;
+          return Promise.reject('Unable to determine the preferred mime type.');
+        }
+      }
+    } else {
+      this._dataHash = null;
+      return Promise.reject('Unable to get a view on the variable.');
+    }
+  }
+
+  protected dataLoader: () => Promise<IDebugger.IRichVariable>;
+  protected renderMime: IRenderMimeRegistry;
+  protected trans: TranslationBundle;
+  private _dataHash: number | null;
+}
+
+/**
+ * Debugger variable mime type renderer namespace
+ */
+export namespace VariableMimeRenderer {
+  /**
+   * Constructor options
+   */
+  export interface IOptions {
+    /**
+     * Loader of the variable to be rendered
+     */
+    dataLoader: () => Promise<IDebugger.IRichVariable>;
+    /**
+     * Render mime type registry
+     */
+    rendermime: IRenderMimeRegistry;
+    /**
+     * Translation manager
+     */
+    translator?: ITranslator;
+  }
+}

package/src/panels/variables/model.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { ISignal, Signal } from '@lumino/signaling';
+
+import { IDebugger } from '../../tokens';
+
+/**
+ * A model for a variable explorer.
+ */
+export class VariablesModel implements IDebugger.Model.IVariables {
+  /**
+   * Get all the scopes.
+   */
+  get scopes(): IDebugger.IScope[] {
+    return this._state;
+  }
+
+  /**
+   * Set the scopes.
+   */
+  set scopes(scopes: IDebugger.IScope[]) {
+    this._state = scopes;
+    this._changed.emit();
+  }
+
+  /**
+   * Signal emitted when the current variable has changed.
+   */
+  get changed(): ISignal<this, void> {
+    return this._changed;
+  }
+
+  /**
+   * Signal emitted when the current variable has been expanded.
+   */
+  get variableExpanded(): ISignal<this, IDebugger.IVariable> {
+    return this._variableExpanded;
+  }
+
+  get selectedVariable(): IDebugger.IVariableSelection | null {
+    return this._selectedVariable;
+  }
+  set selectedVariable(selection: IDebugger.IVariableSelection | null) {
+    this._selectedVariable = selection;
+  }
+
+  /**
+   * Expand a variable.
+   *
+   * @param variable The variable to expand.
+   */
+  expandVariable(variable: IDebugger.IVariable): void {
+    this._variableExpanded.emit(variable);
+  }
+
+  private _selectedVariable: IDebugger.IVariableSelection | null = null;
+  private _state: IDebugger.IScope[] = [];
+  private _variableExpanded = new Signal<this, IDebugger.IVariable>(this);
+  private _changed = new Signal<this, void>(this);
+}

package/src/panels/variables/scope.tsx

@@ -0,0 +1,132 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { HTMLSelect, ReactWidget, UseSignal } from '@jupyterlab/ui-components';
+import React, { useState } from 'react';
+import { IDebugger } from '../../tokens';
+import { VariablesBodyGrid } from './grid';
+import { VariablesBodyTree } from './tree';
+
+/**
+ * A React component to handle scope changes.
+ *
+ * @param {object} props The component props.
+ * @param props.model The variables model.
+ * @param props.tree The variables tree widget.
+ * @param props.grid The variables grid widget.
+ * @param props.trans The translation bundle.
+ */
+const ScopeSwitcherComponent = ({
+  model,
+  tree,
+  grid,
+  trans
+}: {
+  model: IDebugger.Model.IVariables;
+  tree: VariablesBodyTree;
+  grid: VariablesBodyGrid;
+  trans: TranslationBundle;
+}): JSX.Element => {
+  const [value, setValue] = useState('-');
+  const scopes = model.scopes;
+
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
+    setValue(value);
+    tree.scope = value;
+    grid.scope = value;
+  };
+
+  return (
+    <HTMLSelect
+      onChange={onChange}
+      value={value}
+      aria-label={trans.__('Scope')}
+    >
+      {scopes.map(scope => (
+        <option key={scope.name} value={scope.name}>
+          {trans.__(scope.name)}
+        </option>
+      ))}
+    </HTMLSelect>
+  );
+};
+
+/**
+ * A widget to switch between scopes.
+ */
+export class ScopeSwitcher extends ReactWidget {
+  /**
+   * Instantiate a new scope switcher.
+   *
+   * @param options The instantiation options for a ScopeSwitcher
+   */
+  constructor(options: ScopeSwitcher.IOptions) {
+    super();
+    const { translator, model, tree, grid } = options;
+    this._model = model;
+    this._tree = tree;
+    this._grid = grid;
+    this._trans = (translator || nullTranslator).load('jupyterlab');
+  }
+
+  /**
+   * Render the scope switcher.
+   */
+  render(): JSX.Element {
+    return (
+      <UseSignal signal={this._model.changed} initialSender={this._model}>
+        {(): JSX.Element => (
+          <ScopeSwitcherComponent
+            model={this._model}
+            trans={this._trans}
+            tree={this._tree}
+            grid={this._grid}
+          />
+        )}
+      </UseSignal>
+    );
+  }
+
+  private _model: IDebugger.Model.IVariables;
+  private _tree: VariablesBodyTree;
+  private _grid: VariablesBodyGrid;
+  private _trans: TranslationBundle;
+}
+
+/**
+ * A namespace for ScopeSwitcher statics
+ */
+export namespace ScopeSwitcher {
+  /**
+   * The ScopeSwitcher instantiation options.
+   */
+  export interface IOptions {
+    /**
+     * The variables model.
+     */
+    model: IDebugger.Model.IVariables;
+
+    /**
+     * The variables tree viewer.
+     */
+    tree: VariablesBodyTree;
+
+    /**
+     * The variables table viewer.
+     */
+    grid: VariablesBodyGrid;
+
+    /**
+     * An optional translator.
+     */
+    translator?: ITranslator;
+  }
+}