Revolutionizing Dash UI: Introducing new Components DashPlanet and DashDock

Revolutionizing Dash UI: Introducing DashPlanet and DashDock

DashPlanet: Orbital Navigation Reimagined

DashPlanet: Documentation

What is DashPlanet?

DashPlanet introduces an entirely new navigation concept to Dash applications: an interactive orbital menu that displays content in a circular orbit around a central element. This creates an engaging and intuitive way to present navigation options or related content items.

Key Features

Free Tier Features:

  • Up to 3 satellite elements in orbit
  • Basic orbital animation
  • Customizable orbit radius and rotation
  • Click-to-toggle functionality

Premium Features:

  • Unlimited satellite elements
  • Semicircle menu layout option
  • Enhanced animation controls
  • Independent Dash components support

Getting Started with DashPlanet

Installation is straightforward with pip:

pip install dash-planet

Here’s a simple implementation example:

from dash import Dash
from dash_planet import DashPlanet
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__)

app.layout = DashPlanet(
    id='my-planet',
    centerContent=dmc.Avatar(
        size="lg",
        radius="xl",
        src="path/to/avatar.png"
    ),
    children=[
        # Example satellite element
        dmc.ActionIcon(
            DashIconify(icon="clarity:settings-line", width=20, height=20),
            size="lg",
            variant="filled",
            id="action-icon",
            n_clicks=0,
            mb=10,
        ),
    ],
    orbitRadius=80,
    rotation=0
)

if __name__ == '__main__':
    app.run_server(debug=True)

Animation Physics

One of DashPlanet’s standout features is its physics-based animation system, which creates smooth, natural movements:

DashPlanet(
    mass=4,           # Controls animation weight
    tension=500,      # Controls spring stiffness
    friction=19,      # Controls damping
)

Practical Use Cases

DashPlanet shines in scenarios where space efficiency and visual engagement are priorities:

  1. Navigation menus that can be toggled to save screen real estate
  2. Quick action buttons for common tasks in data analysis applications
  3. Related content exploration for data visualization dashboards
  4. Settings controls that remain hidden until needed

DashDock: Flexible Window Management for Complex Interfaces

DashDock: Documentation

What is DashDock?

DashDock brings the power of dockable, resizable window management to Dash applications. Inspired by modern IDE interfaces, it allows users to organize their workspace with drag-and-drop flexibility, enhancing productivity in complex data applications.

Key Features

  • Create dockable, resizable, and floatable windows
  • Drag and drop tabs between dock containers
  • Maximize, close, and pop-out tabs
  • Tracks dmc and dynamically changes themes from light to dark mode
  • Compatible with both Dash 2 and Dash 3
  • Free version with up to 3 tabs
  • Premium version with unlimited tabs

Getting Started with DashDock

Installation via pip:

pip install dash-dock

A basic implementation example:

import dash
from dash import html
import dash_dock

app = dash.Dash(__name__)

# Define the layout configuration
dock_config = {
    "global": {
        "tabEnableClose": False,
        "tabEnableFloat": True
    },
    "layout": {
        "type": "row",
        "children": [
            {
                "type": "tabset",
                "children": [
                    {
                        "type": "tab",
                        "name": "Tab 1",
                        "component": "text",
                        "id": "tab-1",
                    }
                ]
            },
            {
                "type": "tabset",
                "children": [
                    {
                        "type": "tab",
                        "name": "Tab 2",
                        "component": "text",
                        "id": "tab-2",
                    }
                ]
            }
        ]
    }
}

# Create tab content components
tab_components = [
    dash_dock.Tab(
        id="tab-1",
        children=[
            html.H3("Tab 1 Content"),
            html.P("This is the content for tab 1")
        ]
    ),
    dash_dock.Tab(
        id="tab-2",
        children=[
            html.H3("Tab 2 Content"),
            html.P("This is the content for tab 2")
        ]
    )
]

# Main app layout
app.layout = html.Div([
    html.H1("Dash Dock Example"),
    dash_dock.DashDock(
        id='dock-layout',
        model=dock_config,
        children=tab_components,
        useStateForModel=True
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Ideal Use Cases

DashDock is particularly valuable for:

  1. Multi-view data analysis applications where users need to compare different visualizations
  2. Complex dashboard layouts that require user customization
  3. Data exploration tools where screen real estate management is crucial
  4. Scientific applications that present multiple related but distinct interfaces

Combining the Components for Advanced UIs

While powerful individually, these components can be combined to create truly sophisticated interfaces. For example:

  • Use DashPlanet as a launcher for different DashDock configurations
  • Create a DashDock workspace with a DashPlanet component for quick actions within one of the panels
  • Build a DashPlanet orbital menu that can spawn new DashDock tabs

Premium Features and Licensing

Both components offer free tiers with core functionality, as well as premium versions with enhanced capabilities:

DashPlanet Premium

  • Unlimited satellite elements
  • Enhanced animation controls
  • Semicircle menu layout
  • Independent components support

API keys for premium features can be purchased at:

DashDock Premium

  • Unlimited tabs
  • Advanced configuration options

API keys for premium features can be purchased at:

Documentation and Resources

For comprehensive documentation, examples, and demos:

Conclusion

DashPlanet and DashDock represent significant advancements in Dash UI capabilities, offering innovative solutions to common interface design challenges. By incorporating these components into your applications, you can create more engaging, flexible, and user-friendly experiences that stand out from traditional dashboards.


Both components were created by Pip Install Python LLC and are available under the MIT License.

3 Likes