How to use the @jupyterlab/apputils.WidgetTracker function in @jupyterlab/apputils

/**
   * create and add the command to redo the previously canceled operation in Voyager
   */
  commands.addCommand(CommandIDs.JL_Voyager_Redo, {
    label: "Redo",
    caption: "Update state to reflect the future state",
    execute: args => {
      let widget = app.shell.currentWidget;
      if (widget) {
        (widget as VoyagerPanel | VoyagerPanel_DF).voyager_cur.redo();
      }
    }
  });

  // Track and restore the tutorial widget state
  let tracker0 = new WidgetTracker({
    namespace: "voyager_tutorial"
  });
  const command: string = CommandIDs.JL_Voyager_Tutorial;
  restorer.restore(tracker0, {
    command,
    args: () => JSONExt.emptyObject,
    name: () => 'voyager_tutorial'
  });

  /**
   * create and add the command to display the tutorial page
   */
  commands.addCommand(CommandIDs.JL_Voyager_Tutorial, {
    label: 'Voyager FAQ',
    caption: 'Open tutorial page for JupyterLab_voyager',
    execute: args => {

palette: ICommandPalette | null,
  restorer: ILayoutRestorer | null,
  mainMenu: IMainMenu | null,
  settingRegistry: ISettingRegistry | null,
  statusBar: IStatusBar | null
): ILoggerRegistry {
  let logConsoleWidget: MainAreaWidget = null;
  let logConsolePanel: LogConsolePanel = null;

  const loggerRegistry = new LoggerRegistry({
    defaultRendermime: rendermime,
    // The maxLength is reset below from settings
    maxLength: 1000
  });

  const tracker = new WidgetTracker>({
    namespace: 'logconsole'
  });

  if (restorer) {
    void restorer.restore(tracker, {
      command: CommandIDs.open,
      name: () => 'logconsole'
    });
  }

  const status = new LogConsoleStatus({
    loggerRegistry: loggerRegistry,
    handleClick: () => {
      if (!logConsoleWidget) {
        createLogConsoleWidget({
          insertMode: 'split-bottom',

function activate(
  app: JupyterFrontEnd,
  rendermime: IRenderMimeRegistry,
  palette: ICommandPalette | null,
  restorer: ILayoutRestorer | null
): void {
  const category = 'Help';
  const command = CommandIDs.open;
  const { commands, shell } = app;
  const tracker = new WidgetTracker({ namespace: 'faq' });

  // Handle state restoration.
  if (restorer) {
    void restorer.restore(tracker, { command, name: () => 'faq' });
  }

  let createWidget = () => {
    let content = rendermime.createRenderer('text/markdown');
    const model = rendermime.createModel({
      data: { 'text/markdown': SOURCE }
    });
    void content.renderModel(model);
    content.addClass('jp-FAQ-content');
    let widget = new MainAreaWidget({ content });
    widget.addClass('jp-FAQ');
    widget.title.label = 'FAQ';

labShell: ILabShell,
    restorer: ILayoutRestorer | null
  ) => {

    const sidebar = new BokehDashboardLauncher({
      launchItem: (item: IDashboardItem) => {
        app.commands.execute(COMMAND_ID, item);
      }
    });
    sidebar.id = 'nvdashboard-launcher';
    sidebar.title.iconClass = 'jp-GPU-icon jp-SideBar-tabIcon';
    sidebar.title.caption = 'System Dashboards';
    labShell.add(sidebar, 'left');

    // An instance tracker which is used for state restoration.
    const tracker = new WidgetTracker({
      namespace: 'nvdashboard-launcher'
    });

    app.commands.addCommand(COMMAND_ID, {
      label: 'Open Bokeh document',
      execute: args => {
        const item = args as IDashboardItem;
        // If we already have a dashboard open to this url, activate it
        // but don't create a duplicate.
        const w = tracker.find(w => {
          return !!(w && w.item && w.item.route === item.route);
        });
        if (w) {
          if (!w.isAttached) {
            labShell.add(w, 'main');
          }

function activateCsv(
  app: JupyterFrontEnd,
  restorer: ILayoutRestorer,
  themeManager: IThemeManager,
  mainMenu: IMainMenu,
  searchregistry: ISearchProviderRegistry = null
): void {
  const factory = new CSVViewerFactory({
    name: FACTORY_CSV,
    fileTypes: ['csv'],
    defaultFor: ['csv'],
    readOnly: true
  });
  const tracker = new WidgetTracker>({
    namespace: 'csvviewer'
  });

  // The current styles for the data grids.
  let style: DataGrid.IStyle = Private.LIGHT_STYLE;
  let rendererConfig: TextRenderConfig = Private.LIGHT_TEXT_CONFIG;

  // Handle state restoration.
  void restorer.restore(tracker, {
    command: 'docmanager:open',
    args: widget => ({ path: widget.context.path, factory: FACTORY_CSV }),
    name: widget => widget.context.path
  });

  app.docRegistry.addWidgetFactory(factory);
  let ft = app.docRegistry.getFileType('csv');

}
        if (!tracker.has(widget)) {
            // Track the state of the widget for later restoration
            tracker.add(widget);
        }
        if (!widget.isAttached) {
            // Attach the widget to the main work area if it's not there
            app.shell.add(widget, 'main');
        }
        widget.content.update();

        // Activate the widget
        app.shell.activateById(widget.id);
    }
    // Track and restore the Main widget state
    const tracker = new WidgetTracker>({
        namespace: 'vue'
    });

    // Add an application command that opens the Main widget
    const command: string = 'easeml:open';
    app.commands.addCommand(command, {
        label: 'Open ease.ml',
        execute: easmlOpen
    });

    restorer.restore(tracker, {
        command,
        name: () => 'vue'
    });

    // SIDEBAR

const sidebar = new DaskSidebar({
    launchDashboardItem: (item: IDashboardItem) => {
      app.commands.execute(CommandIDs.launchPanel, item);
    },
    linkFinder,
    clientCodeInjector,
    clientCodeGetter: Private.getClientCode,
    registry: app.commands,
    launchClusterId: CommandIDs.launchCluster
  });
  sidebar.id = id;
  sidebar.title.iconClass = 'dask-DaskLogo jp-SideBar-tabIcon';
  sidebar.title.caption = 'Dask';

  // An instance tracker which is used for state restoration.
  const tracker = new WidgetTracker({
    namespace: 'dask-dashboard-launcher'
  });

  // Add state restoration for the dashboard items.
  restorer.add(sidebar, id);
  restorer.restore(tracker, {
    command: CommandIDs.launchPanel,
    args: widget => widget.item || {},
    name: widget => (widget.item && widget.item.route) || ''
  });

  labShell.add(sidebar, 'left', { rank: 200 });

  const updateDashboards = () => {
    const input = sidebar.dashboardLauncher.input;
    // Update the urls of open dashboards.

it('should restore the widgets in a tracker', async () => {
        const tracker = new WidgetTracker({ namespace: 'foo-widget' });
        const registry = new CommandRegistry();
        const state = new StateDB();
        const ready = new PromiseDelegate();
        const restorer = new LayoutRestorer({
          connector: state,
          first: ready.promise,
          registry
        });
        let called = false;
        const key = `${tracker.namespace}:${tracker.namespace}`;

        registry.addCommand(tracker.namespace, {
          execute: () => {
            called = true;
          }
        });

activate: (
    app: JupyterFrontEnd,
    palette: ICommandPalette | null,
    launcher: ILauncher | null,
    restorer: ILayoutRestorer | null
  ): IInspector => {
    const { commands, shell } = app;
    const command = CommandIDs.open;
    const label = 'Show Contextual Help';
    const namespace = 'inspector';
    const tracker = new WidgetTracker>({
      namespace
    });

    let source: IInspector.IInspectable | null = null;
    let inspector: MainAreaWidget;
    function openInspector(): MainAreaWidget {
      if (!inspector || inspector.isDisposed) {
        inspector = new MainAreaWidget({ content: new InspectorPanel() });
        inspector.id = 'jp-inspector';
        inspector.title.label = label;
        void tracker.add(inspector);
        source = source && !source.isDisposed ? source : null;
        inspector.content.source = source;
      }
      if (!inspector.isAttached) {
        shell.add(inspector, 'main', { activate: false });

let context = docManager.contextForWidget(cur) as Context<
                DocumentRegistry.IModel
              >;
              var wdg = new VoyagerPanel_DF(
                JSONobject,
                filename,
                context,
                false,
                app,
                docManager
              );
              wdg.data_src = JSONobject;
              wdg.id = filename+(temp_widget_counter++);
              wdg.title.closable = true;
              wdg.title.iconClass = VOYAGER_ICON;
              const tracker = new WidgetTracker({ namespace: 'VoyagerPanel_DataFrame' });
              tracker.add(wdg);
              app.shell.add(wdg, 'main');
              app.shell.activateById(wdg.id);
              break;
            }
            i++;
          }
        }
      }
    }
  });