How to toggle a widget without disposing it?

JupyterLab
1

I’m trying to learn how to toggle the visibility of a Widget that was added to the shell. In this case it is a MainAreaWidget that contains a LogConsolePanel. The code below seems to work, but when the MainAreaWidget is restored it is positioned a little lower than it was when it was initially added to the shell. Further, I have a hunch that I am not doing this right.

Can someone take a look at this and let me know if I am doing this correctly or give me a link to a correct implementation? It seems like the most common pattern is to dispose of a Widget when we want to hide them, however I don’t want to do that.

Thank you.

class ConsoleLogWidget extends MainAreaWidget<LogConsolePanel> {

  private _app: JupyterFrontEnd;
  private _toggleCommand: IDisposable;
  private _disposeCommand: IDisposable;
  private _menu: Menu;

  constructor({ app, rendermime, mainMenu }:
    {
      app: JupyterFrontEnd,
      rendermime: IRenderMimeRegistry,
      mainMenu: IMainMenu
    }) {

    let content = new LogConsolePanel(
      new LoggerRegistry({
        defaultRendermime: rendermime,
        maxLength: 1000
      })
    );

    super({ content });

    this._app = app;

    content.title.label = 'ETC TEST Log';
    content.title.icon = listIcon;
    content.source = "ETC TEST Log";
    content.logger.level = "info";

    this._toggleCommand = app.commands.addCommand(PLUGIN_ID + ':toggle', {
      label: 'ETC TEST',
      caption: 'ETC TEST',
      isToggled: () => this.isAttached,
      execute: this.toggle.bind(this)
    });

    this._disposeCommand = app.commands.addCommand(PLUGIN_ID + ':dispose', {
      label: 'ETC Dispose',
      caption: 'ETC Dispose',
      isToggled: () => false,
      execute: this.dispose.bind(this)
    });

    this._menu = new Menu({ commands: app.commands });
    this._menu.title.label = 'ETC TEST';
    mainMenu.addMenu(this._menu, { rank: 9999 });
    this._menu.addItem({ command: PLUGIN_ID + ':toggle' });
    this._menu.addItem({ command: PLUGIN_ID + ':dispose' });
    mainMenu.helpMenu.addGroup([{ command: PLUGIN_ID + ':toggle' }]);
  }

  dispose() {
    this._toggleCommand.dispose();
    this._disposeCommand.dispose();
    this._menu.dispose();
    super.dispose();
  }

  onCloseRequest(msg: Message) {
    (this.parent.layout as DockLayout).removeWidget(this);
  }

  toggle() {

    if (!this.isAttached) {

      if (!this.parent) {
        this._app.shell.add(this, 'main', { mode: 'split-bottom' });
      }
      else {
        (this.parent.layout as DockLayout).addWidget(this, { mode: 'split-bottom' });
      }
    }
    else {
      this.close();
    }
  }
}