How to use @jupyterlab/apputils - 10 common examples

it('should connect to an existing kernel', async () => {
        // Shut down and dispose the session so it can be re-instantiated.
        await session.shutdown();
        session.dispose();

        const other = await manager.startNew({ path: UUID.uuid4() });
        const kernelPreference = { id: other.kernel.id };

        session = new ClientSession({ manager, kernelPreference });
        await session.initialize();
        expect(session.kernel.id).to.equal(other.kernel.id);
        // We don't call other.shutdown() here because that
        // is handled by the afterEach() handler above.
        other.dispose();
      });

it('should disconnect a node from a command', () => {
        let called = false;
        const command = 'commandlinker:disconnect-node';
        const commands = new CommandRegistry();
        const linker = new CommandLinker({ commands });
        const node = document.createElement('div');
        const disposable = commands.addCommand(command, {
          execute: () => {
            called = true;
          }
        });

        document.body.appendChild(node);
        linker.connectNode(node, command, undefined);

        // Make sure connection is working.
        expect(called).to.equal(false);
        simulate(node, 'click');
        expect(called).to.equal(true);

        // Reset flag.

export function activateMetadataUI(
  app: JupyterFrontEnd,
  activeDataset: IActiveDataset,
  palette: ICommandPalette,
  comments: IMetadataCommentsService,
  datasets: IMetadataDatasetsService,
  people: IMetadataPeopleService,
  labShell: ILabShell,
  converters: IConverterRegistry
): void {
  console.log('JupyterLab extension jupyterlab-metadata-service is activated!');

  // Create a single widget
  const widget = ReactWidget.create(
    
      {(sender, args) => {
        try {
          let URL = activeDataset.active.pathname;
          return (
            
          );
        } catch {
          return ;
        }
      }}

center: true,

        transition: 'slide', // none/fade/slide/convex/concave/zoom
        // make codemirror works as expected
        minScale: 1.0,
        maxScale: 1.0
      });
      
      Reveal.addEventListener('ready', 
        () => console.log("reveal sent 'ready'"))

    };


    console.log("jlab rise is creating button");
    let button = new ToolbarButton({
      className: 'myButton',
      iconClassName: 'fa fa-bar-chart-o',
      onClick: callback,
      tooltip: 'RISE me',
    });

    let i = document.createElement('i');
    button.node.appendChild(i);

    panel.toolbar.addItem('rise', button);
    return new DisposableDelegate(() => {
      button.dispose();
    });
  }
}

function activateConsole(app: JupyterLab, mainMenu: IMainMenu, palette: ICommandPalette, contentFactory: ConsolePanel.IContentFactory,  editorServices: IEditorServices, restorer: ILayoutRestorer, browserFactory: IFileBrowserFactory, rendermime: IRenderMimeRegistry, settingRegistry: ISettingRegistry, launcher: ILauncher | null): IConsoleTracker {
  const manager = app.serviceManager;
  const { commands, shell } = app;
  const category = 'Console';

  // Create an instance tracker for all console panels.
  const tracker = new InstanceTracker({ namespace: 'console' });

  // Handle state restoration.
  restorer.restore(tracker, {
    command: CommandIDs.open,
    args: panel => ({
      path: panel.console.session.path,
      name: panel.console.session.name
    }),
    name: panel => panel.console.session.path,
    when: manager.ready
  });

  // The launcher callback.
  let callback = (cwd: string, name: string) => {
    return createConsole({ basePath: cwd, kernelPreference: { name } });
  };

}
    });

    // console.log(app.commands.listCommands())

    // Declare a widget variable
    let sideWidget: MainAreaWidget;
    // Track and restore the Side Main widget state
    const trackerSide = new WidgetTracker>({
        namespace: 'vue'
    });

    if (!sideWidget || sideWidget.isDisposed) {
        // Create a new widget if one does not exist
        const content = new EasemlSidebar();
        sideWidget = new MainAreaWidget({content});
        sideWidget.id = 'easeml-jupyterlab';
        sideWidget.title.label = 'Ease.ml';
        sideWidget.title.closable = true;
    }
    if (!trackerSide.has(sideWidget)) {
        // Track the state of the widget for later restoration
        trackerSide.add(sideWidget);
    }
    if (!sideWidget.isAttached) {
        // Attach the widget to the main work area if it's not there
        app.shell.add(sideWidget, 'main');
    }
    sideWidget.content.update();

    // Activate the widget
    app.shell.activateById(sideWidget.id);

this._activeCluster = cluster;
      this._activeClusterChanged.emit({
        name: 'cluster',
        oldValue: old,
        newValue: cluster
      });
      this.update();
    };

    const layout = (this.layout = new PanelLayout());

    this._clusterListing = new Widget();
    this._clusterListing.addClass('dask-ClusterListing');

    // Create the toolbar.
    const toolbar = new Toolbar();

    // Make a label widget for the toolbar.
    const toolbarLabel = new Widget();
    toolbarLabel.node.textContent = 'CLUSTERS';
    toolbarLabel.addClass('dask-DaskClusterManager-label');
    toolbar.addItem('label', toolbarLabel);

    // Make a refresh button for the toolbar.
    toolbar.addItem(
      'refresh',
      new ToolbarButton({
        iconClassName: 'jp-RefreshIcon jp-Icon jp-Icon-16',
        onClick: () => {
          this._updateClusterList();
        },
        tooltip: 'Refresh Cluster List'

const tokens = line.substring(0, end).split(/\W+/);
    const last = tokens[tokens.length - 1];
    const start = last ? end - last.length : end;
    const position = editor.getPositionAt(start);

    if (!position) {
      return;
    }

    const anchor = editor.getCoordinateForPosition(position) as ClientRect;
    const style = window.getComputedStyle(this.node);
    const paddingLeft = parseInt(style.paddingLeft!, 10) || 0;

    // Calculate the geometry of the tooltip.
    HoverBox.setGeometry({
      anchor,
      host: editor.host,
      maxHeight: MAX_HEIGHT,
      minHeight: MIN_HEIGHT,
      node: this.node,
      offset: { horizontal: -1 * paddingLeft },
      privilege: 'below',
      style: style
    });
  }

const tokens = line.substring(0, end).split(/\W+/);
    const last = tokens[tokens.length - 1];
    const start = last ? end - last.length : end;
    const position = editor.getPositionAt(start);

    if (!position) {
      return;
    }

    const anchor = editor.getCoordinateForPosition(position) as ClientRect;
    const style = window.getComputedStyle(this.node);
    const paddingLeft = parseInt(style.paddingLeft!, 10) || 0;

    // Calculate the geometry of the tooltip.
    HoverBox.setGeometry({
      anchor,
      host: editor.host,
      maxHeight: MAX_HEIGHT,
      minHeight: MIN_HEIGHT,
      node: this.node,
      offset: { horizontal: -1 * paddingLeft },
      privilege: 'below',
      style: style
    });
  }

private _setGeometry():  void {
    // Find the start of the current token for hover box placement.
    const editor = this._editor;
    const cursor = editor.getCursorPosition();
    const end = editor.getOffsetAt(cursor);
    const line = editor.getLine(cursor.line);
    const tokens = line.substring(0, end).split(/\W+/);
    const last = tokens[tokens.length - 1];
    const start = last ? end - last.length : end;
    const position = editor.getPositionAt(start);
    const anchor = editor.getCoordinateForPosition(position) as ClientRect;
    const style = window.getComputedStyle(this.node);
    const paddingLeft = parseInt(style.paddingLeft, 10) || 0;

    // Calculate the geometry of the tooltip.
    HoverBox.setGeometry({
      anchor,
      host: editor.host,
      maxHeight: MAX_HEIGHT,
      minHeight: MIN_HEIGHT,
      node: this.node,
      offset: { horizontal: -1 * paddingLeft },
      privilege: 'below'
    });
  }