Skip to main content
PROTÉGÉ PD provides an interactive web interface built with Dash and Plotly for visualizing primer candidates and selecting optimal primer pairs.

​
Accessing the Interface

After running the protege.py command, the web interface automatically launches and is accessible at: 
http://127.0.0.1:8050
The interface runs on localhost (127.0.0.1) on port 8050. Make sure this port is not blocked by your firewall.

​
Technology Stack

The web interface is built using:
  • Dash: Python framework for building reactive web applications
  • Plotly: Interactive graphing library for scientific visualizations
  • Plotly Figure Factory: For creating distribution plots

​
Main Components

The interface consists of several key components organized in a vertical layout (protege.py:437-576):

​
1. Header

  • Title: “Phylotag Design” displayed at the top of the page (protege.py:445-449)

​
2. Forward Primer Scatter Plot

  • Title: “Primer degeneracies by position” (protege.py:452-456)
  • Graph ID: scat
  • Displays all forward primer candidates with their positions and degeneracies (protege.py:458-461)
  • Interactive click functionality for primer selection

​
3. Reverse Primer Zoom View

  • Graph ID: zoomScat
  • Dynamically updates based on forward primer selection (protege.py:502-505)
  • Shows reverse primers in the vicinity of the selected forward primer
  • Provides detailed view for reverse primer selection

​
4. Download Section

  • CSV Export Button: “Download CSV” button (protege.py:529-532)
  • Allows users to export the complete primer dataset
  • Downloads file with timestamp: pd_protege_YYYY-MM-DD_HHMM.csv

​
5. Melting Temperature Controls

  • Radio Buttons: Four Tm calculation methods (protege.py:538-547)
    • Tm Wallace “Rule of thumb”
    • Approx 2 Based on GC content
    • Approx 3 Based on GC content
    • Nearest neighbor
  • Default method: Wallace Rule of thumb (value = 1)

​
6. Temperature Distribution Plot

  • Title: “Melting Temperature Distribution” (protege.py:560-564)
  • Graph ID: tdist-plot
  • Shows Tm distributions for selected forward and reverse primers (protege.py:566-569)
  • Updates dynamically based on primer selection and Tm method

​
Layout Structure

The interface uses a single-column layout with components stacked vertically: 
┌─────────────────────────────────────┐
│        Phylotag Design              │
├─────────────────────────────────────┤
│  Primer degeneracies by position    │
│  [Forward Primer Scatter Plot]      │
├─────────────────────────────────────┤
│  [Click Data Display]               │
│  [Reverse Primer Zoom Plot]         │
│  [Selected Primers Display]         │
├─────────────────────────────────────┤
│  [Download CSV Button]              │
├─────────────────────────────────────┤
│  [Tm Calculation Method Radio]      │
│  Melting Temperature Distribution   │
│  [Temperature Distribution Plot]    │
└─────────────────────────────────────┘

​
Downloading Results

To export your primer data:
1

Locate the Download Button

Find the “Download CSV” button below the primer selection area
2

Click to Download

Click the button to trigger the download (protege.py:817-823)
3

Save the File

The file will be saved as pd_protege_[timestamp].csv containing all primer candidates with their properties
The CSV file contains the complete dataset of all primer candidates, including positions, sequences, and degeneracies, regardless of which primers you selected in the interface.

​
Interactive Features

The interface is fully reactive with Dash callbacks that provide:
  • Real-time updates when clicking primers
  • Dynamic plot regeneration based on selections
  • Automatic Tm recalculation when changing methods
  • Visual feedback for user interactions
See the Visualization and Primer Selection pages for detailed usage instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us