Overview

@deck.gl-community/panels provides a modest set of composable UI components intended for small data visualization applications.

• Composable: built on PanelComponent, Panel, and panel containers.
• Framework-independent: owns Preact-rendered UI without requiring a React application.
• deck.gl integration: can be used with deck.gl's widget system, through PanelWidget adapters from @deck.gl-community/widgets.

Use this package when you want reusable panel composition, standalone mounting through PanelManager, standalone panel theming, and application-managed UI state such as toast notifications.

Panels

Panels are titled content definitions. Leaf panels render one unit of content; composite panels arrange other panels; panel containers mount one panel inside box, modal, sidebar, or full-screen chrome.

• Core: Panel, Panel Themes
• Leaf panels: MarkdownPanel, SettingsPanel, KeyboardShortcutsPanel, URLParametersPanel, Arrow inspection panels, stats, docs links, binary data, and text editor panels
• Composite panels: AccordeonPanel, ColumnPanel, SplitterPanel, TabbedPanel
• Panel containers: PanelContainer, BoxPanelContainer, ModalPanelContainer, SidebarPanelContainer, FullScreenPanelContainer

Components

Components are panel-owned mountable UI that are not necessarily panels. PanelComponent is the root lifecycle class; Panel, panel containers, toolbars, toast stacks, and app-specific panel-managed controls extend it.

• PanelComponent
• ToolbarComponent
• ToastComponent

Managers

Managers keep application behavior and state outside rendering. Descriptor-backed managers can share the same definitions with panels so settings, shortcut help, and URL docs stay synchronized with the app.

• PanelManager mounts PanelComponent[] without deck.gl
• SettingsManager tracks settings snapshots and persistence for SettingsPanel
• KeyboardShortcutsManager dispatches shortcuts documented by KeyboardShortcutsPanel
• URLManager parses and serializes deep links documented by URLParametersPanel
• CommandManager registers executable app commands
• Toast Manager owns toast state rendered by ToastComponent

Start with Using Panels for panel composition, Using Components for non-panel PanelComponent instances, and Using Managers when application descriptors should also drive panel help or settings UI.

caution

The deck.gl-community repository is semi-maintained. One of its goals is to collect and preserve valuable deck.gl ecosystem related code that does not have a dedicated home. Some modules may no longer have dedicated maintainers. This means that there is sometimes no one who can respond quickly to issues.