Skip to content

Dashboard Creation

Video example

🎬 Depictio UI overview: Discover how to build a dashboard with Depictio

Add a component to the dashboard

Step 1: Component Selection

  1. Begin by clicking on the "+ New Dashboard" button to create a new dashboard.
  2. In the "Design your new dashboard component" modal:
  3. Choose from the available components (e.g., Figure, Card, Interactive, Table, Text).
  4. Once you’ve chosen the component, click Next Step.

Step 2: Data Selection

  1. For each selected component, choose the corresponding workflow and data collection from the dropdowns.
  2. Verify the Data Collection Info, such as Workflow ID, Table type, MongoDB ID, and Data preview.
  3. Click Next Step to proceed.

Step 3: Customize Your Component

  1. Customise your component:

    • For Figure components, you can select the type of figure (e.g., scatter plot, histogram) and customize its appearance.
    • For Interactive components, you can set up interactive elements like sliders or dropdowns to allow users to filter or manipulate the data dynamically.
    • For Card components, you can display key metrics of your data.

All options are dependent on the type of column in your data collection. For example, if you select a numeric column, you can choose to between a Slider or a RangeSlider for interactive components, and metrics like Mean, Median, or Standard Deviation for card components. If you select a string column, you can choose to display the Select/Multiselect or a SegmentedControl for interactive components, and metrics like Count or Unique Count for card components.

Data Type Interactive Options Card Metrics
Numeric Slider, RangeSlider Mean, Median, Standard Deviation, Variance, ...
String Select, Multiselect, SegmentedControl Count, Unique Count, Most Frequent (mode)

  1. Set additional parameters:

  2. For Figure components, you can tweak visualization settings such as colors, axis labels, and bin sizes. Settings are categorised in the following way:

    • Core parameters: Define key parameters such as X-axis and Y-axis and Color, and assign the relevant data columns from your dataset.
    • Styling & Layout: Adjust the layout of the figure, including titles and axis labels, colors, hover data, and more.
    • Figure type specific options: Access additional options specific to the figure type, such as scatter plot or histogram settings.
    • Advanced: For advanced users, additional settings can be configured here like facetting, animation and more.

  3. For Interactive components, you can set adjust sliders to have a given number of marks, use a linear or logarithmic scale.

  4. Finalize Customization:

  5. Review the component preview and ensure all settings are accurate.
  6. Once complete, click Next Step to proceed to the final stage.

Figure Code Mode (v0.6.0+)

The Figure component includes a Code Mode for advanced users who want to write custom Python/Plotly code to generate visualizations. This provides maximum flexibility for complex or custom figures.

Accessing Code Mode

  1. In the Figure design interface, click the "Code" tab
  2. Switch from UI Mode to Code Mode at any time
  3. Switching from UI to Code Mode automatically generates code from your current UI settings

Available Variables

In Code Mode, the following variables are pre-loaded:

Variable Description
df Your data as a Polars DataFrame
px Plotly Express for quick visualizations
pd Pandas for data manipulation
pl Polars for high-performance data operations
go Plotly Graph Objects for detailed customization

Code Structure

Your code must follow this structure:

# Optional: Data preprocessing (single assignment)
df_modified = df.filter(pl.col("value") > 0)

# Required: Create figure using px or go
fig = px.scatter(df_modified, x="col_x", y="col_y", color="category")

Code Constraints

  • Use df_modified for any data preprocessing (single line)
  • The final fig variable must be a Plotly Figure object
  • Only the pre-loaded libraries are available for security

Code Mode Features

  • Live Preview: Click "Execute Code" to preview your figure instantly
  • Syntax Highlighting: Python syntax highlighting with the Ace editor
  • Theme Support: Editor theme follows the dashboard light/dark mode
  • Resizable Editor: Drag the editor border to adjust panel size
  • Error Messages: Clear error feedback for syntax and execution issues

Component design Examples:

Figure design - visualization selection
Figure design - scatter plot - UI mode
Figure design - scatter plot - code mode
Interactive design - RangeSlider example
Card design - metrics selection

MultiQC Integration (v0.5.0+)

As of version 0.5.0, Depictio includes dedicated support for MultiQC quality control reports. This integration allows you to:

  • Automatically scan and aggregate MultiQC output reports
  • Create components directly from MultiQC data using the MultiQC API
  • Link figures with external metadata for enhanced analysis
  • Filter datasets to display specific samples based on QC metrics

Adding MultiQC Components

  1. When creating a new component, MultiQC data collections will be automatically detected if present in your project
  2. Select the MultiQC data collection from the available options in Step 2 (Data Selection)
  3. MultiQC-specific visualization options will be available based on the report content
  4. You can create multiple components from different sections of your MultiQC report (General Statistics, FastQC, Cutadapt, etc.)

MultiQC Data Ingestion

To ingest MultiQC reports into Depictio, use the Depictio-CLI with your project configuration file. MultiQC reports should be specified in your YAML configuration under the appropriate workflow section.