How to use @lumino/widgets - 10 common examples

it('should save data', async () => {
        const ready = new PromiseDelegate();
        const restorer = new LayoutRestorer({
          connector: new StateDB(),
          first: ready.promise,
          registry: new CommandRegistry()
        });
        const currentWidget = new Widget();
        // The `fresh` attribute is only here to check against the return value.
        const dehydrated: ILabShell.ILayout = {
          fresh: false,
          mainArea: { currentWidget: null, dock: null, mode: null },
          leftArea: {
            currentWidget,
            collapsed: true,
            widgets: [currentWidget]
          },
          rightArea: { collapsed: true, currentWidget: null, widgets: null }
        };
        restorer.add(currentWidget, 'test-one');
        ready.resolve(void 0);
        await restorer.restored;
        await restorer.save(dehydrated);
        const layout = await restorer.fetch();

it('should unrender a markdown cell when switching to edit mode', () => {
        const widget = createActiveWidget();
        Widget.attach(widget, document.body);
        MessageLoop.sendMessage(widget, Widget.Msg.ActivateRequest);
        const cell = widget.model!.contentFactory.createMarkdownCell({});
        cell.value.text = '# Hello'; // Should be rendered with content.
        widget.model!.cells.push(cell);
        const child = widget.widgets[widget.widgets.length - 1] as MarkdownCell;
        expect(child.rendered).to.equal(true);
        widget.activeCellIndex = widget.widgets.length - 1;
        widget.mode = 'edit';
        expect(child.rendered).to.equal(false);
      });
    });

context0 = await initNotebookContext();
      panel0 = NBTestUtils.createNotebookPanel(context0);
      NBTestUtils.populateNotebook(panel0.content);
      context1 = await initNotebookContext();
      panel1 = NBTestUtils.createNotebookPanel(context1);
      NBTestUtils.populateNotebook(panel1.content);
      tracker = new NotebookTracker({ namespace: 'notebook' });
      await tracker.add(panel0);
      await tracker.add(panel1);
      notebookTools = new NotebookTools({ tracker });
      tabpanel = new TabPanel();
      tabpanel.addWidget(panel0);
      tabpanel.addWidget(panel1);
      tabpanel.addWidget(notebookTools);
      tabpanel.node.style.height = '800px';
      Widget.attach(tabpanel, document.body);
      // Give the posted messages a chance to be handled.
      await sleep();
    });

async function main(): Promise {
  let dock = new DockPanel();
  dock.id = 'main';

  // Attach the widget to the dom.
  Widget.attach(dock, document.body);

  // Handle resize events.
  window.addEventListener('resize', () => {
    dock.fit();
  });

  const manager = new TerminalManager();
  const s1 = await manager.startNew();
  const term1 = new Terminal(s1, { theme: 'light' });
  term1.title.closable = true;
  dock.addWidget(term1);

constructor(datastore: Datastore, record: string) {
    super();
    this.addClass('content');
    this._store = datastore;
    this._record = record;

    // Get initial values for the editor
    let editorTable = this._store.get(EDITOR_SCHEMA);
    let initialValue = editorTable.get(record)!.text;
    let readOnly = editorTable.get(record)!.readOnly;

    // Set up the DOM structure
    this._editorWidget = new Widget();
    this._checkWidget = new Widget();
    this._checkWidget.node.style.height = `${this._toolbarHeight}px`;
    this._checkWidget.addClass('read-only-check');
    this._checkWidget.node.textContent = 'Read Only';
    this._check = document.createElement('input');
    this._check.type = 'checkbox';
    this._check.checked = readOnly;
    this._checkWidget.node.appendChild(this._check);

    this.addWidget(this._checkWidget);
    this.addWidget(this._editorWidget);

    // Listen to changes in the checkbox.
    this._check.onchange = this._onChecked.bind(this);

    // Create the editor instance.
    this._editor = CodeMirror(this._editorWidget.node, {

createBody(value: Body): Widget {
      let body: Widget;
      if (typeof value === 'string') {
        body = new Widget({ node: document.createElement('span') });
        body.node.textContent = value;
      } else if (value instanceof Widget) {
        body = value;
      } else {
        body = ReactWidget.create(value);
        // Immediately update the body even though it has not yet attached in
        // order to trigger a render of the DOM nodes from the React element.
        MessageLoop.sendMessage(body, Widget.Msg.UpdateRequest);
      }
      body.addClass('jp-Dialog-body');
      Styling.styleNode(body.node);
      return body;
    }

// matches anywhere on filebrowser
    const selectorContent = ".jp-DirListing-content";

    // matches directory filebrowser items
    const selectorOnlyDir = '.jp-DirListing-item[data-isdir="true"]';

    // matches file filebrowser items
    const selectorNotDir = '.jp-DirListing-item[data-isdir="false"]';

    // Create submenus
    const archiveFolder = new Menu({
      commands
    });
    archiveFolder.title.label = "Download As";
    archiveFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";
    const archiveCurrentFolder = new Menu({
      commands
    });
    archiveCurrentFolder.title.label = "Download Current Folder As";
    archiveCurrentFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";

    ["zip", "tar.bz2", "tar.gz", "tar.xz"].forEach(format => {
      archiveFolder.addItem({
        command: CommandIDs.downloadArchive,
        args: { format }
      });
      archiveCurrentFolder.addItem({
        command: CommandIDs.downloadArchiveCurrentFolder,
        args: { format }
      });
    });

});
          },
          isEnabled: () => {
            if (app.shell.currentWidget &&
              docManager.contextForWidget(app.shell.currentWidget) &&
              docManager.contextForWidget(app.shell.currentWidget).model) {
              return true;
            }
            return false;
          },
          label: command1,
        });

        palette.addItem({command: command1, category: "Email"});

        const menu = new Menu({ commands });
        menu.title.label = "Send Emails";

        app.restored.then(() => {
          all_emails1.forEach((command) => {
            menu.addItem({command, args: {}});
          });

          if (mainMenu && !loaded) {
            loaded = true;
            mainMenu.fileMenu.addGroup([{ type: "submenu", submenu: menu }], 11);
          }
        });
      }
    }
  });
  // eslint-disable-next-line no-console

activate: (
    app: JupyterFrontEnd,
    manager: IThemeManager,
    palette: ICommandPalette | null,
    mainMenu: IMainMenu | null
  ): void => {
    const commands = app.commands;

    // If we have a main menu, add the theme manager to the settings menu.
    if (mainMenu) {
      const themeMenu = new Menu({ commands });
      themeMenu.title.label = 'JupyterLab Theme';
      void app.restored.then(() => {
        const isPalette = false;

        // choose a theme
        manager.themes.forEach(theme => {
          themeMenu.addItem({
            command: CommandIDs.changeTheme,
            args: { isPalette, theme }
          });
        });
        themeMenu.addItem({ type: 'separator' });

        // toggle scrollbar theming
        themeMenu.addItem({ command: CommandIDs.themeScrollbars });
        themeMenu.addItem({ type: 'separator' });

".txz",
      ".tar.xz"
    ];
    let archiveFormat: ArchiveFormat; // Default value read from settings

    // matches anywhere on filebrowser
    const selectorContent = ".jp-DirListing-content";

    // matches directory filebrowser items
    const selectorOnlyDir = '.jp-DirListing-item[data-isdir="true"]';

    // matches file filebrowser items
    const selectorNotDir = '.jp-DirListing-item[data-isdir="false"]';

    // Create submenus
    const archiveFolder = new Menu({
      commands
    });
    archiveFolder.title.label = "Download As";
    archiveFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";
    const archiveCurrentFolder = new Menu({
      commands
    });
    archiveCurrentFolder.title.label = "Download Current Folder As";
    archiveCurrentFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";

    ["zip", "tar.bz2", "tar.gz", "tar.xz"].forEach(format => {
      archiveFolder.addItem({
        command: CommandIDs.downloadArchive,
        args: { format }
      });
      archiveCurrentFolder.addItem({