How to use the @lumino/widgets.DockPanel function in @lumino/widgets

async function main(): Promise {
  let dock = new DockPanel();
  dock.id = 'main';

  // Attach the widget to the dom.
  Widget.attach(dock, document.body);

  // Handle resize events.
  window.addEventListener('resize', () => {
    dock.fit();
  });

  const manager = new TerminalManager();
  const s1 = await manager.startNew();
  const term1 = new Terminal(s1, { theme: 'light' });
  term1.title.closable = true;
  dock.addWidget(term1);

.newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);
        });
    }
  });
  fbWidget.toolbar.insertItem(0, 'create', creator);

  let panel = new SplitPanel();
  panel.id = 'main';
  panel.addWidget(fbWidget);
  SplitPanel.setStretch(fbWidget, 0);
  let dock = new DockPanel();
  panel.addWidget(dock);
  SplitPanel.setStretch(dock, 1);
  dock.spacing = 8;

  document.addEventListener('focus', event => {
    for (let i = 0; i < widgets.length; i++) {
      let widget = widgets[i];
      if (widget.node.contains(event.target as HTMLElement)) {
        activeWidget = widget;
        break;
      }
    }
  });

  // Add commands.
  commands.addCommand('file-open', {

});
    } finally {
      store.endTransaction();
    }
  }

  // Set up the text editors.
  let e1 = new CodeMirrorEditor(store, 'e1');
  e1.title.label = 'First Document';
  let e2 = new CodeMirrorEditor(store, 'e2');
  e2.title.label = 'Second Document';
  let e3 = new CodeMirrorEditor(store, 'e3');
  e3.title.label = 'Third Document';

  // Add the text editors to a dock panel.
  let dock = new DockPanel({ spacing: 4 });
  dock.addWidget(e1);
  dock.addWidget(e2, { mode: 'split-right', ref: e1 });
  dock.addWidget(e3, { mode: 'split-bottom', ref: e2 });
  dock.id = 'dock';

  // Add the dock panel to the document.
  let box = new BoxPanel({ spacing: 2 });
  box.id = 'main';
  box.addWidget(dock);

  window.onresize = () => { box.update(); };
  Widget.attach(box, document.body);

  // Add commands for undo and redo.
  commands.addCommand('undo', {
    label: 'Undo',

document.addEventListener('keydown', (event: KeyboardEvent) => {
    commands.processKeydownEvent(event);
  });

  let r1 = new ContentWidget('Red');
  let b1 = new ContentWidget('Blue');
  let g1 = new ContentWidget('Green');
  let y1 = new ContentWidget('Yellow');

  let r2 = new ContentWidget('Red');
  let b2 = new ContentWidget('Blue');
  // let g2 = new ContentWidget('Green');
  // let y2 = new ContentWidget('Yellow');

  let dock = new DockPanel();
  dock.addWidget(r1);
  dock.addWidget(b1, { mode: 'split-right', ref: r1 });
  dock.addWidget(y1, { mode: 'split-bottom', ref: b1 });
  dock.addWidget(g1, { mode: 'split-left', ref: y1 });
  dock.addWidget(r2, { ref: b1 });
  dock.addWidget(b2, { mode: 'split-right', ref: y1 });
  dock.id = 'dock';

  let savedLayouts: DockPanel.ILayoutConfig[] = [];

  commands.addCommand('save-dock-layout', {
    label: 'Save Layout',
    caption: 'Save the current dock layout',
    execute: () => {
      savedLayouts.push(dock.saveLayout());
      palette.addItem({

"column-pivots": ["side"],
    "plugin": "datagrid",
    "sort": [["price", "desc"]],
  });

  // connect to perspective
  const websocket = perspective.websocket("ws://localhost:8080/api/v1/ws");

  const tradesTable = websocket.open_table("trades");
  const ordersTable = websocket.open_table("orders");

  // perspective workspace
  // const workspace = new PerspectiveWorkspace();
  // workspace.addClass("workspace");
  // workspace.title.label = "AAT";
  const workspace = new DockPanel();
  workspace.addClass("workspace");

  // const tradesWidget = new PerspectiveViewerWidget("Trades");
  // const ordersWidget = new PerspectiveViewerWidget("Orders");

  // Add tables to workspace
  const tradesWidget = new Widget({node: tradesViewer});
  const ordersWidget = new Widget({node: ordersViewer});
  workspace.addWidget(tradesWidget, {});
  workspace.addWidget(ordersWidget, {mode: "split-bottom", ref: tradesWidget});

  // Attach parts to dom
  Widget.attach(workspace, document.body);

  // Load perspective tables
  tradesViewer.load(tradesTable);

});
  grid5.dataModel = model5;
  grid5.keyHandler = new BasicKeyHandler();
  grid5.mouseHandler = new BasicMouseHandler();
  grid5.selectionModel = new BasicSelectionModel({
    dataModel: model5,
    selectionMode: 'row'
  });

  let wrapper1 = createWrapper(grid1, 'Trillion Rows/Cols');
  let wrapper2 = createWrapper(grid2, 'Streaming Rows');
  let wrapper3 = createWrapper(grid3, 'Random Ticks 1');
  let wrapper4 = createWrapper(grid4, 'Random Ticks 2');
  let wrapper5 = createWrapper(grid5, 'JSON Data');

  let dock = new DockPanel();
  dock.id = 'dock';

  dock.addWidget(wrapper1);
  dock.addWidget(wrapper2, { mode: 'split-right', ref: wrapper1 });
  dock.addWidget(wrapper3, { mode: 'split-bottom', ref: wrapper1 });
  dock.addWidget(wrapper4, { mode: 'split-bottom', ref: wrapper2 });
  dock.addWidget(wrapper5, { mode: 'split-bottom', ref: wrapper2 });

  window.onresize = () => { dock.update(); };

  Widget.attach(dock, document.body);
}