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

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();
    });
  }
}

private _createBrowser(): void {
    // Create the file browser
    this._browser = this._factory.createFileBrowser(NAMESPACE, {
      driveName: this._driveName
    });

    // Create the logout button.
    const userProfile = getCurrentUserProfile();
    this._logoutButton = new ToolbarButton({
      onClick: () => {
        this._onLogoutClicked();
      },
      tooltip: `Sign Out (${userProfile.getEmail()})`,
      iconClassName: 'jp-GoogleUserBadge jp-Icon jp-Icon-16'
    });

    this._browser.toolbar.addItem('logout', this._logoutButton);
    this._loginScreen.parent = null;
    (this.layout as PanelLayout).addWidget(this._browser);
  }

) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model,
      commands: options.commands || commands
    });
    const { registry } = docManager;

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
      onClick: () => {
        return createLauncher(commands, widget);
      },
      tooltip: 'New Launcher'
    });
    widget.toolbar.insertItem(0, 'launch', launcher);

    // Add a context menu handler to the file browser's directory listing.
    let node = widget.node.getElementsByClassName('jp-DirListing-content')[0];
    node.addEventListener('contextmenu', (event: MouseEvent) => {
      event.preventDefault();
      const model = widget.modelForClick(event);
      const menu = createContextMenu(model, commands, registry);
      menu.open(event.clientX, event.clientY);
    });

setupToolbarItems = () => {
    const toolbar = this.props.notebookWidget.toolbar;
    const downloadToolBarButton = new ToolbarButton({
      onClick: () => this.props.commands.execute(CmdIds.download),
      tooltip: 'Download notebook to your computer',
      iconClassName: 'jp-MaterialIcon jp-DownloadIcon',
      iconLabel: 'Download notebook'
    });
    const restartAndRunAll = new ToolbarButton({
      iconClassName: 'jp-MaterialIcon sn-RestartAndRunAllIcon',
      iconLabel: 'Restart Kernel & Run All Cells',
      tooltip: 'Restart Kernel & Run All Cells',
      onClick: () => this.props.commands.execute(CmdIds.restartAndRunAll)
    });

    // We insert toolbar items right to left.
    // This way, we can calculate indexes by counting in the default jupyterlab toolbar,
    // and our own toolbar items won't affect our insertion order.j
    // FIXME: Determine dynamically once https://github.com/jupyterlab/jupyterlab/issues/5894 lands

this.content.addClass(CSS_CLASS);

    void this.context.ready.then(() => {
      this.update();
      // Throttle the rendering rate of the widget.
      this._monitor = new ActivityMonitor({
        signal: this.context.model.contentChanged,
        timeout: RENDER_TIMEOUT
      });
      this._monitor.activityStopped.connect(this.update, this);
    });

    // Make a refresh button for the toolbar.
    this.toolbar.addItem(
      'refresh',
      new ToolbarButton({
        iconClassName: 'jp-RefreshIcon',
        onClick: () => {
          this.content.url = this.content.url;
        },
        tooltip: 'Rerender HTML Document'
      })
    );
    // Make a trust button for the toolbar.
    this.toolbar.addItem(
      'trust',
      ReactWidget.create()
    );
  }

it('Space should activate the callback', async () => {
          let called = false;
          const button = new ToolbarButton({
            onClick: () => {
              called = true;
            }
          });
          Widget.attach(button, document.body);
          await framePromise();
          simulate(button.node.firstChild as HTMLElement, 'keydown', {
            key: ' '
          });
          expect(called).to.equal(true);
          button.dispose();
        });
      });

it('should accept options', async () => {
        const widget = new ToolbarButton({
          className: 'foo',
          iconClassName: 'iconFoo',
          onClick: () => {
            return void 0;
          },
          tooltip: 'bar'
        });
        Widget.attach(widget, document.body);
        await framePromise();
        const button = widget.node.firstChild as HTMLElement;
        expect(button.classList.contains('foo')).to.equal(true);
        expect(button.querySelector('.iconFoo')).to.exist;
        expect(button.title).to.equal('bar');
      });
    });

it('should activate the callback', async () => {
          let called = false;
          const button = new ToolbarButton({
            onClick: () => {
              called = true;
            }
          });
          Widget.attach(button, document.body);
          await framePromise();
          simulate(button.node.firstChild as HTMLElement, 'mousedown');
          expect(called).to.equal(true);
          button.dispose();
        });
      });

if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.responseText);
            this.lab.commands.execute('knowledge:open', {path:panel.context.path})
          } else {
            console.error(xhr.statusText);
          }
        }
      }.bind(this);
      xhr.onerror = function (e) {
        console.error(xhr.statusText);
      };
      xhr.send(null);
    };

    let button = new ToolbarButton({
      className: 'kl-editPostIcon',
      onClick: callback,
      tooltip: 'Publish Knowledge'
    });

    panel.toolbar.insertItem(8, 'runAll', button);
    return new DisposableDelegate(() => {
      button.dispose();
    });
  }
}

this.addClass(FILE_BROWSER_CLASS);
    this.id = options.id;

    const model = (this.model = options.model);
    const renderer = options.renderer;

    model.connectionFailure.connect(
      this._onConnectionFailure,
      this
    );
    this._manager = model.manager;
    this._crumbs = new BreadCrumbs({ model });
    this.toolbar = new Toolbar();

    this._directoryPending = false;
    let newFolder = new ToolbarButton({
      iconClassName: 'jp-NewFolderIcon',
      onClick: () => {
        this.createNewDirectory();
      },
      tooltip: 'New Folder'
    });

    let uploader = new Uploader({ model });

    let refresher = new ToolbarButton({
      iconClassName: 'jp-RefreshIcon',
      onClick: () => {
        void model.refresh();
      },
      tooltip: 'Refresh File List'
    });