@jupyterlab/apputils-extension 4.0.0-alpha.9 → 4.0.0-beta.1

package/src/palette.ts

@@ -0,0 +1,213 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application';
+import {
+  ICommandPalette,
+  IPaletteItem,
+  ModalCommandPalette
+} from '@jupyterlab/apputils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { CommandPaletteSvg, paletteIcon } from '@jupyterlab/ui-components';
+import { find } from '@lumino/algorithm';
+import { CommandRegistry } from '@lumino/commands';
+import { DisposableDelegate, IDisposable } from '@lumino/disposable';
+import { CommandPalette } from '@lumino/widgets';
+
+/**
+ * The command IDs used by the apputils extension.
+ */
+namespace CommandIDs {
+  export const activate = 'apputils:activate-command-palette';
+}
+
+const PALETTE_PLUGIN_ID = '@jupyterlab/apputils-extension:palette';
+
+/**
+ * A thin wrapper around the `CommandPalette` class to conform with the
+ * JupyterLab interface for the application-wide command palette.
+ */
+export class Palette implements ICommandPalette {
+  /**
+   * Create a palette instance.
+   */
+  constructor(palette: CommandPalette, translator?: ITranslator) {
+    this.translator = translator || nullTranslator;
+    const trans = this.translator.load('jupyterlab');
+    this._palette = palette;
+    this._palette.title.label = '';
+    this._palette.title.caption = trans.__('Command Palette');
+  }
+
+  /**
+   * The placeholder text of the command palette's search input.
+   */
+  set placeholder(placeholder: string) {
+    this._palette.inputNode.placeholder = placeholder;
+  }
+  get placeholder(): string {
+    return this._palette.inputNode.placeholder;
+  }
+
+  /**
+   * Activate the command palette for user input.
+   */
+  activate(): void {
+    this._palette.activate();
+  }
+
+  /**
+   * Add a command item to the command palette.
+   *
+   * @param options - The options for creating the command item.
+   *
+   * @returns A disposable that will remove the item from the palette.
+   */
+  addItem(options: IPaletteItem): IDisposable {
+    const item = this._palette.addItem(options as CommandPalette.IItemOptions);
+    return new DisposableDelegate(() => {
+      this._palette.removeItem(item);
+    });
+  }
+
+  protected translator: ITranslator;
+  private _palette: CommandPalette;
+}
+
+/**
+ * A namespace for `Palette` statics.
+ */
+export namespace Palette {
+  /**
+   * Activate the command palette.
+   */
+  export function activate(
+    app: JupyterFrontEnd,
+    translator: ITranslator,
+    settingRegistry: ISettingRegistry | null
+  ): ICommandPalette {
+    const { commands, shell } = app;
+    const trans = translator.load('jupyterlab');
+    const palette = Private.createPalette(app, translator);
+    const modalPalette = new ModalCommandPalette({ commandPalette: palette });
+    let modal = false;
+
+    palette.node.setAttribute('role', 'region');
+    palette.node.setAttribute(
+      'aria-label',
+      trans.__('Command Palette Section')
+    );
+    shell.add(palette, 'left', { rank: 300, type: 'Command Palette' });
+    if (settingRegistry) {
+      const loadSettings = settingRegistry.load(PALETTE_PLUGIN_ID);
+      const updateSettings = (settings: ISettingRegistry.ISettings): void => {
+        const newModal = settings.get('modal').composite as boolean;
+        if (modal && !newModal) {
+          palette.parent = null;
+          modalPalette.detach();
+          shell.add(palette, 'left', { rank: 300, type: 'Command Palette' });
+        } else if (!modal && newModal) {
+          palette.parent = null;
+          modalPalette.palette = palette;
+          palette.show();
+          modalPalette.attach();
+        }
+        modal = newModal;
+      };
+
+      Promise.all([loadSettings, app.restored])
+        .then(([settings]) => {
+          updateSettings(settings);
+          settings.changed.connect(settings => {
+            updateSettings(settings);
+          });
+        })
+        .catch((reason: Error) => {
+          console.error(reason.message);
+        });
+    }
+
+    // Show the current palette shortcut in its title.
+    const updatePaletteTitle = () => {
+      const binding = find(
+        app.commands.keyBindings,
+        b => b.command === CommandIDs.activate
+      );
+      if (binding) {
+        const ks = binding.keys.map(CommandRegistry.formatKeystroke).join(', ');
+        palette.title.caption = trans.__('Commands (%1)', ks);
+      } else {
+        palette.title.caption = trans.__('Commands');
+      }
+    };
+    updatePaletteTitle();
+    app.commands.keyBindingChanged.connect(() => {
+      updatePaletteTitle();
+    });
+
+    commands.addCommand(CommandIDs.activate, {
+      execute: () => {
+        if (modal) {
+          modalPalette.activate();
+        } else {
+          shell.activateById(palette.id);
+        }
+      },
+      label: trans.__('Activate Command Palette')
+    });
+
+    palette.inputNode.placeholder = trans.__('SEARCH');
+
+    return new Palette(palette, translator);
+  }
+
+  /**
+   * Restore the command palette.
+   */
+  export function restore(
+    app: JupyterFrontEnd,
+    restorer: ILayoutRestorer,
+    translator: ITranslator
+  ): void {
+    const palette = Private.createPalette(app, translator);
+    // Let the application restorer track the command palette for restoration of
+    // application state (e.g. setting the command palette as the current side bar
+    // widget).
+    restorer.add(palette, 'command-palette');
+  }
+}
+
+/**
+ * The namespace for module private data.
+ */
+namespace Private {
+  /**
+   * The private command palette instance.
+   */
+  let palette: CommandPalette;
+
+  /**
+   * Create the application-wide command palette.
+   */
+  export function createPalette(
+    app: JupyterFrontEnd,
+    translator: ITranslator
+  ): CommandPalette {
+    if (!palette) {
+      // use a renderer tweaked to use inline svg icons
+      palette = new CommandPalette({
+        commands: app.commands,
+        renderer: CommandPaletteSvg.defaultRenderer
+      });
+      palette.id = 'command-palette';
+      palette.title.icon = paletteIcon;
+      const trans = translator.load('jupyterlab');
+      palette.title.label = trans.__('Commands');
+    }
+
+    return palette;
+  }
+}

package/src/settingconnector.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { PageConfig } from '@jupyterlab/coreutils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { DataConnector, IDataConnector } from '@jupyterlab/statedb';
+import { Throttler } from '@lumino/polling';
+
+/**
+ * A data connector for fetching settings.
+ *
+ * #### Notes
+ * This connector adds a query parameter to the base services setting manager.
+ */
+export class SettingConnector extends DataConnector<
+  ISettingRegistry.IPlugin,
+  string
+> {
+  constructor(connector: IDataConnector<ISettingRegistry.IPlugin, string>) {
+    super();
+    this._connector = connector;
+  }
+
+  /**
+   * Fetch settings for a plugin.
+   * @param id - The plugin ID
+   *
+   * #### Notes
+   * The REST API requests are throttled at one request per plugin per 100ms.
+   */
+  fetch(id: string): Promise<ISettingRegistry.IPlugin | undefined> {
+    const throttlers = this._throttlers;
+    if (!(id in throttlers)) {
+      throttlers[id] = new Throttler(() => this._connector.fetch(id), 100);
+    }
+    return throttlers[id].invoke();
+  }
+
+  async list(query: 'ids'): Promise<{ ids: string[] }>;
+  async list(
+    query: 'active' | 'all'
+  ): Promise<{ ids: string[]; values: ISettingRegistry.IPlugin[] }>;
+  async list(
+    query: 'active' | 'all' | 'ids' = 'all'
+  ): Promise<{ ids: string[]; values?: ISettingRegistry.IPlugin[] }> {
+    const { isDeferred, isDisabled } = PageConfig.Extension;
+    const { ids, values } = await this._connector.list(
+      query === 'ids' ? 'ids' : undefined
+    );
+
+    if (query === 'all') {
+      return { ids, values };
+    }
+
+    if (query === 'ids') {
+      return { ids };
+    }
+
+    return {
+      ids: ids.filter(id => !isDeferred(id) && !isDisabled(id)),
+      values: values.filter(({ id }) => !isDeferred(id) && !isDisabled(id))
+    };
+  }
+
+  async save(id: string, raw: string): Promise<void> {
+    await this._connector.save(id, raw);
+  }
+
+  private _connector: IDataConnector<ISettingRegistry.IPlugin, string>;
+  private _throttlers: { [key: string]: Throttler } = Object.create(null);
+}

package/src/settingsplugin.ts

@@ -0,0 +1,66 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { PageConfig } from '@jupyterlab/coreutils';
+import { ISettingRegistry, SettingRegistry } from '@jupyterlab/settingregistry';
+import { SettingConnector } from './settingconnector';
+
+/**
+ * The default setting registry provider.
+ */
+export const settingsPlugin: JupyterFrontEndPlugin<ISettingRegistry> = {
+  id: '@jupyterlab/apputils-extension:settings',
+  activate: async (app: JupyterFrontEnd): Promise<ISettingRegistry> => {
+    const { isDisabled } = PageConfig.Extension;
+    const connector = new SettingConnector(app.serviceManager.settings);
+
+    // On startup, check if a plugin is available in the application.
+    // This helps avoid loading plugin files from other lab-based applications
+    // that have placed their schemas next to the JupyterLab schemas. Different lab-based
+    // applications might not have the same set of plugins loaded on the page.
+    // As an example this helps prevent having new toolbar items added by another application
+    // appear in JupyterLab as a side-effect when they are defined via the settings system.
+    const registry = new SettingRegistry({
+      connector,
+      plugins: (await connector.list('active')).values.filter(value =>
+        app.hasPlugin(value.id)
+      )
+    });
+
+    // If there are plugins that have schemas that are not in the setting
+    // registry after the application has restored, try to load them manually
+    // because otherwise, its settings will never become available in the
+    // setting registry.
+    void app.restored.then(async () => {
+      const plugins = await connector.list('ids');
+      plugins.ids.forEach(async id => {
+        if (!app.hasPlugin(id) || isDisabled(id) || id in registry.plugins) {
+          return;
+        }
+
+        try {
+          await registry.load(id);
+        } catch (error) {
+          console.warn(`Settings failed to load for (${id})`, error);
+          if (!app.isPluginActivated(id)) {
+            console.warn(
+              `If 'jupyter.lab.transform=true' in the plugin schema, this ` +
+                `may happen if {autoStart: false} in (${id}) or if it is ` +
+                `one of the deferredExtensions in page config.`
+            );
+          }
+        }
+      });
+    });
+
+    return registry;
+  },
+  autoStart: true,
+  provides: ISettingRegistry
+};

package/src/shortcuts.tsx

@@ -0,0 +1,191 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { CommandRegistry } from '@lumino/commands';
+import { Selector } from '@lumino/domutils';
+import * as React from 'react';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { TranslationBundle } from '@jupyterlab/translation';
+
+/**
+ * The class name for each row of ContextShortcutTable
+ */
+const SHORTCUT_TABLE_ROW_CLASS = 'jp-ContextualShortcut-TableRow';
+/**
+ * The class name for the last row of ContextShortcutTable
+ */
+const SHORTCUT_TABLE_LAST_ROW_CLASS = 'jp-ContextualShortcut-TableLastRow';
+/**
+ * The class name for each item of ContextShortcutTable
+ */
+const SHORTCUT_TABLE_ITEM_CLASS = 'jp-ContextualShortcut-TableItem';
+/**
+ * The class name for each button-like symbol representing a key used in a shortcut in the ContextShortcutTable
+ */
+const SHORTCUT_KEY_CLASS = 'jp-ContextualShortcut-Key';
+
+/**
+ * Display shortcuts options
+ */
+export interface IOptions {
+  /**
+   * Application commands registry
+   */
+  commands: CommandRegistry;
+  /**
+   * Translation object
+   */
+  trans: TranslationBundle;
+  /**
+   * Element on which to display the keyboard shortcuts help
+   */
+  activeElement?: Element;
+}
+
+export function displayShortcuts(options: IOptions) {
+  const { commands, trans, activeElement } = options;
+  const elt = activeElement ?? document.activeElement;
+
+  /**
+   * Find the distance from the target node to the first matching node.
+   *
+   * Based on Lumino private function commands.Private.targetDistance
+   * This traverses the DOM path from `elt` to the root
+   * computes the distance from `elt` to the first node which matches
+   * the CSS selector. If no match is found, `-1` is returned.
+   *
+   * It also stops traversal if the `data-lm-suppress-shortcuts` or
+   * `data-p-suppress-shortcuts` attributes are found.
+   */
+
+  function formatKeys(keys: string[]): JSX.Element {
+    const topContainer: JSX.Element[] = [];
+    for (const key of keys) {
+      const container: JSX.Element[] = [];
+      for (const ch of key.split(' ')) {
+        container.push(
+          <span className={SHORTCUT_KEY_CLASS}>
+            <kbd>{ch}</kbd>
+          </span>,
+          <> + </>
+        );
+      }
+      /*topContainer.push(<span>{container.slice(0, -1)}</span>, <>,</>);*/
+      topContainer.push(<span>{container.slice(0, -1)}</span>, <> + </>);
+    }
+    return <span>{topContainer.slice(0, -1)}</span>;
+  }
+
+  function capitalizeString(str: string) {
+    const capitalizedStr = str.charAt(0).toUpperCase() + str.slice(1);
+    return capitalizedStr;
+  }
+
+  function formatLabel(b: CommandRegistry.IKeyBinding) {
+    const label = commands.label(b.command);
+    const commandID = b.command.split(':')[1];
+    const automaticLabel = commandID.split('-');
+    let capitalizedLabel = '';
+    for (let i = 0; i < automaticLabel.length; i++) {
+      const str = capitalizeString(automaticLabel[i]);
+      capitalizedLabel = capitalizedLabel + ' ' + str;
+    }
+
+    if (label.length > 0) {
+      return label;
+    } else {
+      return capitalizedLabel;
+    }
+  }
+
+  function matchDistance(selector: string, elt: Element | null): number {
+    let targ = elt;
+    for (
+      let dist = 0;
+      targ !== null && targ !== targ.parentElement;
+      targ = targ.parentElement, ++dist
+    ) {
+      if (targ.hasAttribute('data-lm-suppress-shortcuts')) {
+        return -1;
+      }
+      if (targ.matches(selector)) {
+        return dist;
+      }
+    }
+    return -1;
+  }
+
+  // Find active keybindings for target element
+  const activeBindings = new Map<
+    string,
+    [number, CommandRegistry.IKeyBinding]
+  >();
+  for (let i = 0; i < commands.keyBindings.length; i++) {
+    const kb = commands.keyBindings[i];
+    let distance = matchDistance(kb.selector, elt);
+    if (distance < 0) {
+      continue;
+    }
+    let formatted = CommandRegistry.formatKeystroke(kb.keys);
+    if (activeBindings.has(formatted)) {
+      let oldBinding = activeBindings.get(formatted)!;
+      // if the existing binding takes precedence, ignore this binding by continuing
+      if (
+        oldBinding[0] < distance ||
+        (oldBinding[0] === distance &&
+          Selector.calculateSpecificity(oldBinding[1].selector) >
+            Selector.calculateSpecificity(kb.selector))
+      ) {
+        continue;
+      }
+    }
+    activeBindings.set(formatted, [distance, kb]);
+  }
+
+  // Group shortcuts by distance
+  let maxDistance = -1;
+  const groupedBindings = new Map<number, CommandRegistry.IKeyBinding[]>();
+  for (let [distance, binding] of activeBindings.values()) {
+    maxDistance = Math.max(distance, maxDistance);
+    if (!groupedBindings.has(distance)) {
+      groupedBindings.set(distance, []);
+    }
+    groupedBindings.get(distance)!.push(binding);
+  }
+
+  // Display shortcuts by group
+  const bindingTable: any = [];
+  for (let d = 0; d <= maxDistance; d++) {
+    if (groupedBindings.has(d)) {
+      bindingTable.push(
+        groupedBindings.get(d)!.map(b => (
+          <tr className={SHORTCUT_TABLE_ROW_CLASS} key={b.command}>
+            <td className={SHORTCUT_TABLE_ITEM_CLASS}>{formatLabel(b)}</td>
+            <td className={SHORTCUT_TABLE_ITEM_CLASS}>
+              {formatKeys([...b.keys])}
+            </td>
+          </tr>
+        ))
+      );
+      bindingTable.push(<tr className={SHORTCUT_TABLE_LAST_ROW_CLASS}></tr>);
+    }
+  }
+
+  const body = (
+    <table>
+      <tbody>{bindingTable}</tbody>
+    </table>
+  );
+
+  return showDialog({
+    title: trans.__('Keyboard Shortcuts'),
+    body,
+    buttons: [
+      Dialog.cancelButton({
+        label: trans.__('Close')
+      })
+    ]
+  });
+}

package/src/statusbarplugin.ts

@@ -0,0 +1,145 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import {
+  ILabShell,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import {
+  IKernelStatusModel,
+  ISessionContext,
+  ISessionContextDialogs,
+  KernelStatus,
+  RunningSessions,
+  SessionContextDialogs
+} from '@jupyterlab/apputils';
+import { IStatusBar } from '@jupyterlab/statusbar';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { Title, Widget } from '@lumino/widgets';
+
+/**
+ * A plugin that provides a kernel status item to the status bar.
+ */
+export const kernelStatus: JupyterFrontEndPlugin<IKernelStatusModel> = {
+  id: '@jupyterlab/apputils-extension:kernel-status',
+  autoStart: true,
+  requires: [IStatusBar],
+  provides: IKernelStatusModel,
+  optional: [ISessionContextDialogs, ITranslator, ILabShell],
+  activate: (
+    app: JupyterFrontEnd,
+    statusBar: IStatusBar,
+    sessionDialogs_: ISessionContextDialogs | null,
+    translator_: ITranslator | null,
+    labShell: ILabShell | null
+  ): IKernelStatusModel => {
+    const translator = translator_ ?? nullTranslator;
+    const sessionDialogs =
+      sessionDialogs_ ?? new SessionContextDialogs({ translator });
+    // When the status item is clicked, launch the kernel
+    // selection dialog for the current session.
+    const changeKernel = async () => {
+      if (!item.model.sessionContext) {
+        return;
+      }
+      await sessionDialogs.selectKernel(item.model.sessionContext);
+    };
+
+    // Create the status item.
+    const item = new KernelStatus({ onClick: changeKernel }, translator);
+
+    const providers = new Set<(w: Widget | null) => ISessionContext | null>();
+
+    const addSessionProvider = (
+      provider: (w: Widget | null) => ISessionContext | null
+    ): void => {
+      providers.add(provider);
+
+      if (app.shell.currentWidget) {
+        updateSession(app.shell, {
+          newValue: app.shell.currentWidget,
+          oldValue: null
+        });
+      }
+    };
+
+    function updateSession(
+      shell: JupyterFrontEnd.IShell,
+      changes: ILabShell.IChangedArgs
+    ) {
+      const { oldValue, newValue } = changes;
+
+      // Clean up after the old value if it exists,
+      // listen for changes to the title of the activity
+      if (oldValue) {
+        oldValue.title.changed.disconnect(onTitleChanged);
+      }
+
+      item.model.sessionContext =
+        [...providers]
+          .map(provider => provider(changes.newValue))
+          .filter(session => session !== null)[0] ?? null;
+
+      if (newValue && item.model.sessionContext) {
+        onTitleChanged(newValue.title);
+        newValue.title.changed.connect(onTitleChanged);
+      }
+    }
+
+    // When the title of the active widget changes, update the label
+    // of the hover text.
+    const onTitleChanged = (title: Title<Widget>) => {
+      item.model!.activityName = title.label;
+    };
+
+    if (labShell) {
+      labShell.currentChanged.connect(updateSession);
+    }
+
+    statusBar.registerStatusItem(kernelStatus.id, {
+      item,
+      align: 'left',
+      rank: 1,
+      isActive: () => item.model!.sessionContext !== null
+    });
+
+    return { addSessionProvider };
+  }
+};
+
+/*
+ * A plugin providing running terminals and sessions information
+ * to the status bar.
+ */
+export const runningSessionsStatus: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/apputils-extension:running-sessions-status',
+  autoStart: true,
+  requires: [IStatusBar, ITranslator],
+  activate: (
+    app: JupyterFrontEnd,
+    statusBar: IStatusBar,
+    translator: ITranslator
+  ) => {
+    const item = new RunningSessions({
+      onClick: () => app.shell.activateById('jp-running-sessions'),
+      serviceManager: app.serviceManager,
+      translator
+    });
+
+    item.model.sessions = Array.from(
+      app.serviceManager.sessions.running()
+    ).length;
+    item.model.terminals = Array.from(
+      app.serviceManager.terminals.running()
+    ).length;
+
+    statusBar.registerStatusItem(runningSessionsStatus.id, {
+      item,
+      align: 'left',
+      rank: 0
+    });
+  }
+};