@jupyterlab/launcher 4.0.0-alpha.2 → 4.0.0-alpha.21

package/src/widget.tsx

@@ -0,0 +1,376 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { showErrorMessage } from '@jupyterlab/apputils';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import {
+  classes,
+  LabIcon,
+  VDomModel,
+  VDomRenderer
+} from '@jupyterlab/ui-components';
+import { ArrayExt, map } from '@lumino/algorithm';
+import { CommandRegistry } from '@lumino/commands';
+import { DisposableDelegate, IDisposable } from '@lumino/disposable';
+import { AttachedProperty } from '@lumino/properties';
+import { Widget } from '@lumino/widgets';
+import * as React from 'react';
+import { ILauncher } from './tokens';
+
+/**
+ * The class name added to Launcher instances.
+ */
+const LAUNCHER_CLASS = 'jp-Launcher';
+
+/**
+ * LauncherModel keeps track of the path to working directory and has a list of
+ * LauncherItems, which the Launcher will render.
+ */
+export class LauncherModel extends VDomModel implements ILauncher.IModel {
+  /**
+   * Add a command item to the launcher, and trigger re-render event for parent
+   * widget.
+   *
+   * @param options - The specification options for a launcher item.
+   *
+   * @returns A disposable that will remove the item from Launcher, and trigger
+   * re-render event for parent widget.
+   *
+   */
+  add(options: ILauncher.IItemOptions): IDisposable {
+    // Create a copy of the options to circumvent mutations to the original.
+    const item = Private.createItem(options);
+
+    this.itemsList.push(item);
+    this.stateChanged.emit(void 0);
+
+    return new DisposableDelegate(() => {
+      ArrayExt.removeFirstOf(this.itemsList, item);
+      this.stateChanged.emit(void 0);
+    });
+  }
+
+  /**
+   * Return an iterator of launcher items.
+   */
+  items(): IterableIterator<ILauncher.IItemOptions> {
+    return this.itemsList[Symbol.iterator]();
+  }
+
+  protected itemsList: ILauncher.IItemOptions[] = [];
+}
+
+/**
+ * A virtual-DOM-based widget for the Launcher.
+ */
+export class Launcher extends VDomRenderer<ILauncher.IModel> {
+  /**
+   * Construct a new launcher widget.
+   */
+  constructor(options: ILauncher.IOptions) {
+    super(options.model);
+    this._cwd = options.cwd;
+    this.translator = options.translator || nullTranslator;
+    this._trans = this.translator.load('jupyterlab');
+    this._callback = options.callback;
+    this._commands = options.commands;
+    this.addClass(LAUNCHER_CLASS);
+  }
+
+  /**
+   * The cwd of the launcher.
+   */
+  get cwd(): string {
+    return this._cwd;
+  }
+  set cwd(value: string) {
+    this._cwd = value;
+    this.update();
+  }
+
+  /**
+   * Whether there is a pending item being launched.
+   */
+  get pending(): boolean {
+    return this._pending;
+  }
+  set pending(value: boolean) {
+    this._pending = value;
+  }
+
+  /**
+   * Render the launcher to virtual DOM nodes.
+   */
+  protected render(): React.ReactElement<any> | null {
+    // Bail if there is no model.
+    if (!this.model) {
+      return null;
+    }
+
+    const knownCategories = [
+      this._trans.__('Notebook'),
+      this._trans.__('Console'),
+      this._trans.__('Other')
+    ];
+    const kernelCategories = [
+      this._trans.__('Notebook'),
+      this._trans.__('Console')
+    ];
+
+    // First group-by categories
+    const categories = Object.create(null);
+    for (const item of this.model.items()) {
+      const cat = item.category || this._trans.__('Other');
+      if (!(cat in categories)) {
+        categories[cat] = [];
+      }
+      categories[cat].push(item);
+    }
+    // Within each category sort by rank
+    for (const cat in categories) {
+      categories[cat] = categories[cat].sort(
+        (a: ILauncher.IItemOptions, b: ILauncher.IItemOptions) => {
+          return Private.sortCmp(a, b, this._cwd, this._commands);
+        }
+      );
+    }
+
+    // Variable to help create sections
+    const sections: React.ReactElement<any>[] = [];
+    let section: React.ReactElement<any>;
+
+    // Assemble the final ordered list of categories, beginning with
+    // KNOWN_CATEGORIES.
+    const orderedCategories: string[] = [];
+    for (const cat of knownCategories) {
+      orderedCategories.push(cat);
+    }
+    for (const cat in categories) {
+      if (knownCategories.indexOf(cat) === -1) {
+        orderedCategories.push(cat);
+      }
+    }
+
+    // Now create the sections for each category
+    orderedCategories.forEach(cat => {
+      if (!categories[cat]) {
+        return;
+      }
+      const item = categories[cat][0] as ILauncher.IItemOptions;
+      const args = { ...item.args, cwd: this.cwd };
+      const kernel = kernelCategories.indexOf(cat) > -1;
+      const iconClass = this._commands.iconClass(item.command, args);
+      const icon = this._commands.icon(item.command, args);
+
+      if (cat in categories) {
+        section = (
+          <div className="jp-Launcher-section" key={cat}>
+            <div className="jp-Launcher-sectionHeader">
+              <LabIcon.resolveReact
+                icon={icon}
+                iconClass={classes(iconClass, 'jp-Icon-cover')}
+                stylesheet="launcherSection"
+              />
+              <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
+            </div>
+            <div className="jp-Launcher-cardContainer">
+              {Array.from(
+                map(categories[cat], (item: ILauncher.IItemOptions) => {
+                  return Card(
+                    kernel,
+                    item,
+                    this,
+                    this._commands,
+                    this._trans,
+                    this._callback
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+        sections.push(section);
+      }
+    });
+
+    // Wrap the sections in body and content divs.
+    return (
+      <div className="jp-Launcher-body">
+        <div className="jp-Launcher-content">
+          <div className="jp-Launcher-cwd">
+            <h3>{this.cwd}</h3>
+          </div>
+          {sections}
+        </div>
+      </div>
+    );
+  }
+
+  protected translator: ITranslator;
+  private _trans: TranslationBundle;
+  private _commands: CommandRegistry;
+  private _callback: (widget: Widget) => void;
+  private _pending = false;
+  private _cwd = '';
+}
+/**
+ * A pure tsx component for a launcher card.
+ *
+ * @param kernel - whether the item takes uses a kernel.
+ *
+ * @param item - the launcher item to render.
+ *
+ * @param launcher - the Launcher instance to which this is added.
+ *
+ * @param commands - the command registry holding the command of item.
+ *
+ * @param trans - the translation bundle.
+ *
+ * @returns a vdom `VirtualElement` for the launcher card.
+ */
+function Card(
+  kernel: boolean,
+  item: ILauncher.IItemOptions,
+  launcher: Launcher,
+  commands: CommandRegistry,
+  trans: TranslationBundle,
+  launcherCallback: (widget: Widget) => void
+): React.ReactElement<any> {
+  // Get some properties of the command
+  const command = item.command;
+  const args = { ...item.args, cwd: launcher.cwd };
+  const caption = commands.caption(command, args);
+  const label = commands.label(command, args);
+  const title = kernel ? label : caption || label;
+
+  // Build the onclick handler.
+  const onclick = () => {
+    // If an item has already been launched,
+    // don't try to launch another.
+    if (launcher.pending === true) {
+      return;
+    }
+    launcher.pending = true;
+    void commands
+      .execute(command, {
+        ...item.args,
+        cwd: launcher.cwd
+      })
+      .then(value => {
+        launcher.pending = false;
+        if (value instanceof Widget) {
+          launcherCallback(value);
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        launcher.pending = false;
+        void showErrorMessage(trans._p('Error', 'Launcher Error'), err);
+      });
+  };
+
+  // With tabindex working, you can now pick a kernel by tabbing around and
+  // pressing Enter.
+  const onkeypress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onclick();
+    }
+  };
+
+  const iconClass = commands.iconClass(command, args);
+  const icon = commands.icon(command, args);
+
+  // Return the VDOM element.
+  return (
+    <div
+      className="jp-LauncherCard"
+      title={title}
+      onClick={onclick}
+      onKeyPress={onkeypress}
+      tabIndex={0}
+      data-category={item.category || trans.__('Other')}
+      key={Private.keyProperty.get(item)}
+    >
+      <div className="jp-LauncherCard-icon">
+        {kernel ? (
+          item.kernelIconUrl ? (
+            <img src={item.kernelIconUrl} className="jp-Launcher-kernelIcon" />
+          ) : (
+            <div className="jp-LauncherCard-noKernelIcon">
+              {label[0].toUpperCase()}
+            </div>
+          )
+        ) : (
+          <LabIcon.resolveReact
+            icon={icon}
+            iconClass={classes(iconClass, 'jp-Icon-cover')}
+            stylesheet="launcherCard"
+          />
+        )}
+      </div>
+      <div className="jp-LauncherCard-label" title={title}>
+        <p>{label}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The namespace for module private data.
+ */
+namespace Private {
+  /**
+   * An incrementing counter for keys.
+   */
+  let id = 0;
+
+  /**
+   * An attached property for an item's key.
+   */
+  export const keyProperty = new AttachedProperty<
+    ILauncher.IItemOptions,
+    number
+  >({
+    name: 'key',
+    create: () => id++
+  });
+
+  /**
+   * Create a fully specified item given item options.
+   */
+  export function createItem(
+    options: ILauncher.IItemOptions
+  ): ILauncher.IItemOptions {
+    return {
+      ...options,
+      category: options.category || '',
+      rank: options.rank !== undefined ? options.rank : Infinity
+    };
+  }
+
+  /**
+   * A sort comparison function for a launcher item.
+   */
+  export function sortCmp(
+    a: ILauncher.IItemOptions,
+    b: ILauncher.IItemOptions,
+    cwd: string,
+    commands: CommandRegistry
+  ): number {
+    // First, compare by rank.
+    const r1 = a.rank;
+    const r2 = b.rank;
+    if (r1 !== r2 && r1 !== undefined && r2 !== undefined) {
+      return r1 < r2 ? -1 : 1; // Infinity safe
+    }
+
+    // Finally, compare by display name.
+    const aLabel = commands.label(a.command, { ...a.args, cwd });
+    const bLabel = commands.label(b.command, { ...b.args, cwd });
+    return aLabel.localeCompare(bLabel);
+  }
+}

package/style/base.css

@@ -6,13 +6,13 @@
 /* Private CSS variables */
 
 :root {
-  --jp-private-launcher-top-padding: 16px;
-  --jp-private-launcher-side-padding: 32px;
-  --jp-private-launcher-card-size: 100px;
-  --jp-private-launcher-card-label-height: 32px;
-  --jp-private-launcher-card-icon-height: 68px;
-  --jp-private-launcher-large-icon-size: 52px;
-  --jp-private-launcher-small-icon-size: 32px;
+  --jp-private-launcher-top-padding: 1.231em;
+  --jp-private-launcher-side-padding: 2.462em;
+  --jp-private-launcher-card-size: 7.692em;
+  --jp-private-launcher-card-label-height: 2.462em;
+  --jp-private-launcher-card-icon-height: 5.231em;
+  --jp-private-launcher-large-icon-size: 4em;
+  --jp-private-launcher-small-icon-size: 2.462em;
 }
 
 /* Launcher */
@@ -25,6 +25,7 @@
   box-sizing: border-box;
   min-width: 120px;
   min-height: 120px;
+
   /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
   font-size: var(--jp-ui-font-size1);
@@ -43,7 +44,7 @@
   font-size: var(--jp-ui-font-size2);
   font-weight: normal;
   color: var(--jp-ui-font-color1);
-  margin: 1em 0px;
+  margin: 1em 0;
 }
 
 .jp-Launcher-content {
@@ -68,17 +69,18 @@
   flex-direction: row;
   align-items: center;
   box-sizing: border-box;
+
   /* This is custom tuned to get the section header to align with the cards */
   margin-left: 5px;
   border-bottom: 1px solid var(--jp-border-color2);
-  padding-bottom: 0px;
+  padding-bottom: 0;
   margin-bottom: 8px;
 }
 
 .jp-Launcher-sectionTitle {
   font-size: var(--jp-ui-font-size2);
   font-weight: normal;
-  color: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color0);
   box-sizing: border-box;
 }
 
@@ -100,7 +102,7 @@
   width: var(--jp-private-launcher-card-size);
   height: var(--jp-private-launcher-card-size);
   margin: 8px;
-  padding: 0px;
+  padding: 0;
   border: 1px solid var(--jp-border-color2);
   background: var(--jp-layout-color0);
   box-shadow: var(--jp-elevation-z2);
@@ -111,6 +113,8 @@
 .jp-LauncherCard:focus:not(:active) {
   border: 1px solid var(--jp-brand-color1);
   box-shadow: var(--jp-elevation-z6);
+  outline: unset; /* if outline is not unset, then depending on which browser you use, the
+    border change is either hidden behind the outline or visually combined with it */
 }
 
 .jp-LauncherCard:hover {
@@ -126,8 +130,8 @@
   width: 100%;
   height: var(--jp-private-launcher-card-icon-height);
   box-sizing: border-box;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -140,7 +144,7 @@
 
 .jp-LauncherCard[data-category='Notebook'] .jp-LauncherCard-noKernelIcon {
   /* This color is copied from the notebook icon. */
-  color: #ef6c00;
+  color: var(--jp-jupyter-icon-color);
 }
 
 .jp-LauncherCard[data-category='Console'] .jp-LauncherCard-noKernelIcon {
@@ -151,19 +155,20 @@
 .jp-LauncherCard-label {
   width: 100%;
   height: var(--jp-private-launcher-card-label-height);
-  padding: 0 4px 4px 4px;
+  padding: 0 4px 4px;
   box-sizing: border-box;
   overflow: hidden;
 }
 
 .jp-LauncherCard-label p {
-  height: 28px;
+  height: 2.154em;
   word-break: break-word;
   text-align: center;
   color: var(--jp-ui-font-color1);
-  line-height: 14px;
-  font-size: 12px;
+  line-height: 1.077em;
+  font-size: calc(var(--jp-ui-font-size1) * 0.923);
   overflow: hidden;
+  margin: auto;
 }
 
 /* kernel icons */
@@ -171,6 +176,9 @@
 .jp-Launcher-kernelIcon {
   width: var(--jp-private-launcher-large-icon-size);
   height: var(--jp-private-launcher-large-icon-size);
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
+
+  /* Preserve image aspect ratio */
+  object-fit: contain;
 }