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

}
    });

    // 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);

function newHelpWidget(url: string, text: string): MainAreaWidget {
    // Allow scripts and forms so that things like
    // readthedocs can use their search functionality.
    // We *don't* allow same origin requests, which
    // can prevent some content from being loaded onto the
    // help pages.
    let content = new IFrame({
      sandbox: ['allow-scripts', 'allow-forms']
    });
    content.url = url;
    content.addClass(HELP_CLASS);
    content.title.label = text;
    content.id = `${namespace}-${++counter}`;
    let widget = new MainAreaWidget({ content });
    widget.addClass('jp-Help');
    return widget;
  }

it('should propagate to the content', () => {
        let updated: boolean;
        const content = new (class extends Widget {
          onUpdateRequest() {
            updated = true;
          }
        })();
        const widget = new MainAreaWidget({ content });
        Widget.attach(widget, document.body);
        updated = false;
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
        expect(updated).to.equal(true);
      });
    });

execute: (args: any) => {
      const source: string = args.source;
      const openOptions: DocumentRegistry.IOpenOptions = args.openOptions;
      let widget = tracker.find(w => w.content.logger.source === source);
      if (!widget) {
        const log = logRegistry.getLogger(source);
        if (!log) {
          console.error(`Could not find log for ${source}`);
          return;
        }
        const logview = new OutputLoggerView(log);
        widget = new MainAreaWidget({ content: logview });
        app.shell.add(widget, 'main', openOptions);
        void tracker.add(widget);
        widget.update();
      }
      app.shell.activateById(widget.id);
    }
  });

}

      const name = args['name'] as string;

      const session = await (name
        ? serviceManager.terminals
            .connectTo(name)
            .catch(() => serviceManager.terminals.startNew())
        : serviceManager.terminals.startNew());

      const term = new Terminal(session, options);

      term.title.icon = TERMINAL_ICON_CLASS;
      term.title.label = '...';

      let main = new MainAreaWidget({ content: term });
      app.shell.add(main);
      void tracker.add(main);
      app.shell.activateById(main.id);
      return main;
    }
  });

const results = this._find(debugSessionPath, path);
    if (results.next()) {
      return;
    }
    const editorWrapper = this._readOnlyEditorFactory.createNewEditor({
      content,
      mimeType,
      path
    });
    const editor = editorWrapper.editor;
    const editorHandler = new EditorHandler({
      debuggerService: this._debuggerService,
      editor,
      path
    });
    const widget = new MainAreaWidget({
      content: editorWrapper
    });
    widget.id = DOMUtils.createDomID();
    widget.title.label = PathExt.basename(path);
    widget.title.closable = true;
    widget.title.caption = path;
    widget.title.iconClass = 'jp-MaterialIcon jp-TextEditorIcon';
    widget.disposed.connect(() => editorHandler.dispose());
    this._shell.add(widget, 'main');
    void this._readOnlyEditorTracker.add(widget);

    const frame = this._debuggerModel?.callstack.frame;
    if (frame) {
      EditorHandler.showCurrentLine(editor, frame.line);
    }
  }

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';
    return widget;
  };

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 });
      }
      shell.activateById(inspector.id);
      return inspector;
    }

const createLogConsoleWidget = (options: ILogConsoleOptions = {}) => {
    logConsolePanel = new LogConsolePanel(loggerRegistry);

    logConsolePanel.source =
      options.source !== undefined
        ? options.source
        : nbtracker.currentWidget
        ? nbtracker.currentWidget.context.path
        : null;

    logConsoleWidget = new MainAreaWidget({ content: logConsolePanel });
    logConsoleWidget.addClass('jp-LogConsole');
    logConsoleWidget.title.closable = true;
    logConsoleWidget.title.label = 'Log Console';
    logConsoleWidget.title.iconClass = 'jp-LogConsoleIcon';

    const addCheckpointButton = new CommandToolbarButton({
      commands: app.commands,
      id: CommandIDs.addCheckpoint
    });

    const clearButton = new CommandToolbarButton({
      commands: app.commands,
      id: CommandIDs.clear
    });

    logConsoleWidget.toolbar.addItem(

execute: (args) => {
      const {model} = args;
      const content = new GraphQLSchema(model as any);
      const widget = new MainAreaWidget({content});
      widget.title.iconClass = CSS.ICON;
      widget.title.label = 'Schema';
      shell.addToMainArea(widget, {mode: 'split-right'});
    }
  });