Skip to content

Dashboard Features

Depictio dashboards provide flexible, interactive data visualization with multiple modes, customizable layouts, and tabbed organization.

Dashboard Modes

Depictio provides two distinct modes for working with dashboards:

Viewer Mode

URL: /dashboard/{id}

Read-only mode for exploring data:

  • View and interact with visualizations
  • Use filter components to explore data
  • Export data from tables (v0.6.0+)
  • Share dashboards with collaborators
  • No accidental modifications

Editor Mode

URL: /dashboard-edit/{id}

Full editing capabilities:

  • Add, remove, and configure components
  • Drag-and-drop component positioning
  • Resize components
  • Create and manage tabs
  • Access the component builder stepper

Three-Panel Layout

The dashboard interface uses a three-panel layout with a collapsible sidebar:

┌──────────────────────────────────────────────────────────────────────────┐
│                              Header Bar                                  │
├────────┬──────────────────┬──────────────────────────────────────────────┤
│        │                  │                                              │
│ Side-  │   LEFT PANEL     │            RIGHT PANEL                       │
│  bar   │   (Filters)      │          (Visualizations)                    │
│        │                  │                                              │
│ Tab 1  │ ┌──────────────┐ │  ┌─────────────┐  ┌─────────────┐            │
│ Tab 2  │ │  DatePicker  │ │  │   Figure    │  │   Figure    │            │
│ Tab 3  │ └──────────────┘ │  │  (Scatter)  │  │ (Histogram) │            │
│        │                  │  └─────────────┘  └─────────────┘            │
│ [+]    │ ┌──────────────┐ │                                              │
│        │ │ MultiSelect  │ │  ┌─────────────┐  ┌─────────────┐            │
│ [=]    │ └──────────────┘ │  │    Table    │  │    Card     │            │
│        │                  │  │             │  │  (Metric)   │            │
│        │ ┌──────────────┐ │  └─────────────┘  └─────────────┘            │
│        │ │ RangeSlider  │ │                                              │
│        │ └──────────────┘ │                                              │
│        │                  │                                              │
└────────┴──────────────────┴──────────────────────────────────────────────┘

The collapsible sidebar on the far left provides:

  • Dashboard tabs - Navigate between different views within the same dashboard
  • Tab management - Add (+), rename, or delete tabs
  • Burger menu (☰) - Collapse/expand the sidebar
  • Navigation controls - Quick access to project settings

Left Panel (Filters)

The left panel contains interactive filter components:

  • Filter controls that affect visualizations in the right panel
  • Automatic assignment - Interactive components go here by default
  • Independent grid - Drag and resize filters within this panel

Right Panel (Visualizations)

The right panel is the main canvas where visualization components are displayed:

  • Dragged to reposition
  • Resized by dragging edges/corners
  • Configured through component edit menus
  • Cross-panel filtering - Responds to filters from the left panel

Available component types include:

Component Type Description
Figures Interactive charts and visualizations
Tables Data tables with filtering and pagination
Cards Summary statistics and KPIs
Interactive Filters Dropdowns, sliders, and other controls
Text/Headers Section headers (H1, H2, H3)
MultiQC Quality control report visualizations
Images Display grid of static images (PNG, JPEG, SVG)

Future Components

Additional component types may be added in future releases based on user needs and feedback (Geomap, Network Graphs, JBrowse2.).

Dashboard Tabs

Organize complex dashboards with tabs (v0.6.0+):

Tab Navigation

  • Tabs are displayed vertically in the collapsible left navbar
  • Click a tab name to switch views
  • The navbar can be collapsed using the burger menu icon
  • Each tab maintains its own component layout

Tab Features

  • Multiple Tabs: Create multiple views within a single dashboard
  • Custom Icons: Material Design icons for visual identification
  • Custom Colors: Match your organization's theme
  • Independent Layouts: Each tab has its own layout
  • Shared Settings: Theme and permissions apply across all tabs

Creating a Tab

  1. Click "+ New Tab" in the navbar
  2. Enter a tab name
  3. Select an icon from the dropdown
  4. Choose an icon color
  5. Click Create

Auto-Save Behavior

Depictio automatically saves certain changes to prevent data loss. Understanding what is and isn't auto-saved helps you work more effectively.

What IS Auto-Saved

Action Description
Component Creation Adding new components to the dashboard
Component Edition Modifying component configuration (data source, visualization type, etc.)
Component Deletion Removing components from the dashboard
Tab Operations Creating, renaming, or deleting tabs

What is NOT Auto-Saved

Action Description
Layout Positions Dragging components to new positions requires manual save
Interactive Filter Values Filter selections are session-only and reset on page reload
Component Resize Resizing components requires manual save

Saving Layout Changes

After repositioning or resizing components, use the Save Layout button in the dashboard toolbar to persist your layout changes.

Sharing Dashboards

Permissions

Dashboards inherit permissions from their project:

Role View Edit Delete
Admin Yes Yes Yes
Editor Yes Yes No
:material-shield-eye: Viewer Yes No No

Sharing URLs

  • Viewer URL: /dashboard/{id} - Safe to share with collaborators
  • Editor URL: /dashboard-edit/{id} - Only for authorized editors

Embedding (Planned)

Future support for embedding dashboards in external sites via iframe.