Refactor the Console to Panels and allow configuring it

[skyrpex]

• Redesign the UI to use tabbed panels. Will make it easier to read, and modular

• Use react-resizable-panels to implement the resizing. It will simplify our codebase

• Allow passing a configuration to specify the layout. Something like:

  
  /**
  * @see https://github.com/bvaughn/react-resizable-panels/blob/a87cdb65282b4f12550aca1b0f20bfdcfe6786fa/packages/react-resizable-panels/README.md#panel
  */
  interface Panel<PanelIds extends string[]> {
  id: PanelIds;
  minSize?: number;
  maxSize?: number;
  defaultSize?: number;
  order?: number;
  }

/**

• @see https://github.com/bvaughn/react-resizable-panels/blob/a87cdb65282b4f12550aca1b0f20bfdcfe6786fa/packages/react-resizable-panels/README.md#panelgroup */ interface PanelGroup<PanelIds extends string[]> { autoSaveId?: string; direction: 'horizontal' | 'vertical'; items: Array<PanelGroup | Panel>; }

// Our code: type PanelId = "hierarchy" | "explorer" | "traces" | "inspector" | "logs" | "project"; interface MyOptions { layout: PanelGroup; }

- Provide a storage medium (react-resizable-panels supports it) to save the layout sizes and settings

[skyrpex]

BTW I'd like to rename our components to the names that appear above:

• Hierarchy: the tree of nodes (aka tree view)
• Explorer: the visual representation of the nodes (aka map view)
• Inspector: the list of properties of the node (aka metadata panel)

[github-actions[bot]]

Hi,

This issue hasn't seen activity in 60 days. Therefore, we are marking this issue as stale for now. It will be closed after 7 days. Feel free to re-open this issue when there's an update or relevant information to be added. Thanks!

[github-actions[bot]]

Hi,

This issue hasn't seen activity in 60 days. Therefore, we are marking this issue as stale for now. It will be closed after 7 days. Feel free to re-open this issue when there's an update or relevant information to be added. Thanks!

[ainvoner]

@skyrpex if still relevant, please reopen.