Skip to main content
PROTÉGÉ PD provides three main interactive visualizations to help you explore and select optimal primer pairs.

​
Forward Primer Scatter Plot

The main scatter plot displays all forward primer candidates across genomic positions.

​
Plot Characteristics

Function: posDegScatter() (phl.py:196-231)
  • X-axis: Primer positions in the genome
  • Y-axis: Number of degeneracies (log scale)
  • Markers: Green circles (rgb(34, 156, 0))
  • Marker size: 10 pixels
  • Opacity: 0.5 for better visibility of overlapping points

​
Log Scale Y-Axis

The y-axis uses a logarithmic scale to display degeneracies ranging from very low to very high values effectively. The scale shows exponents in power format (e.g., 10¹, 10², 10³).
The logarithmic scale is configured in phl.py:212-214: 
yaxis_type="log",
yaxis = dict(showexponent = 'all', 
            exponentformat = 'power')

​
Interactive Features

  • Click Mode: event+select - responds to both click events and selection (phl.py:215)
  • Hover Text: Displays the forward primer sequence when hovering over a point (phl.py:200)
  • Click Action: Clicking a point selects it as the forward primer and updates the zoom view
When you click a point in the scatter plot, the interface displays: “You choose primer on [position] with [degeneracies] degeneracies” (protege.py:650-662)

​
Reverse Primer Zoom Plot

After selecting a forward primer, the zoom plot shows reverse primer candidates in the surrounding region.

​
Plot Characteristics

Function: zoomDegScatter() (phl.py:234-264)
  • X-axis: Primer positions (zoomed region)
  • Y-axis: Number of degeneracies (log scale)
  • Markers: Red circles (rgb(255, 17, 0))
  • Marker size: 10 pixels
  • Opacity: 0.5
  • Text: Reverse primer sequences (phl.py:237)

​
Dynamic Updates

The zoom plot automatically updates when you select a forward primer (protege.py:664-691):
1

Forward Primer Selection

Click a point in the main scatter plot to select a forward primer
2

Index Calculation

The interface finds the index of the selected position in the dataset
3

Zoom Range Determination

Calculates the range of reverse primers to display based on the zoom limit
4

Plot Update

The zoom scatter plot regenerates with only primers in the calculated range

​
Zoom Range Logic

The zoom view ensures primers are displayed within a reasonable range (protege.py:677-685):
  • If the zoom limit exceeds the lower bound, it starts from index 0
  • If the zoom limit exceeds the upper bound, it extends to the maximum index
  • This prevents errors when selecting primers near the start or end of the dataset
The zoom plot makes it easier to select reverse primers by showing only relevant candidates, reducing visual clutter from thousands of potential primers.

​
Melting Temperature Distribution

The temperature distribution plot visualizes the Tm ranges for selected primer pairs.

​
Plot Generation

Function: Created using Plotly Figure Factory create_distplot() (protege.py:396-415, 748-800)
  • Data: Two distributions - one for forward primer, one for reverse primer
  • Labels: “Forward Primer” and “Reverse Primer”
  • Curve Type: Normal distribution curves
  • Show Rug: Disabled (no individual data points shown below curves)
  • Bin Size: 2°C bins for histogram

​
Initial State

Before selecting primers, the plot displays placeholder data with zero values (protege.py:396-401): 
tempDist = ff.create_distplot([[0,0], [0,0]],
                              ['Forward Primer','Reverse Primer'],
                              curve_type = 'normal', 
                              show_rug = False, 
                              bin_size = 2
                             )

​
Updated State

After selecting both primers, the plot shows actual Tm distributions (protege.py:752-800):
The distribution updates based on the selected Tm approximation method:
  • Wallace Rule of Thumb (tApprox = 1): TmWallace() method
  • GC Content Approx 2 (tApprox = 2): TmAp2() method
  • GC Content Approx 3 (tApprox = 3): TmAp3() method
  • Nearest Neighbor (tApprox = 4): TmNN() method
Each method calculates Tm for all possible primer variants based on degeneracy.

​
Visual Styling

  • Background: Semi-transparent white (rgba(255,255,255,0.75)) (protege.py:410-411)
  • Height: 530 pixels (consistent with scatter plots)
  • Overlapping Curves: Allows comparison of forward vs. reverse primer Tm ranges

​
Visual Feedback and Hover States

​
Click Data Display

The interface provides textual feedback for user interactions: Forward Primer Click (protege.py:650-662): 
"You choose primer on [position] with [degeneracies] degeneracies"
Reverse Primer Click (protege.py:694-710): 
"You choose reverse primer on [position] with [degeneracies] degeneracies, primer [sequence]"
Selected Pair Display (protege.py:720-745): 
"You choose [forward_sequence] --- [reverse_sequence]"

​
Hover Information

When hovering over data points:
  • Forward scatter plot: Shows forward primer sequence (phl.py:200)
  • Reverse zoom plot: Shows reverse primer sequence (phl.py:237)
  • Position and degeneracy: Automatically displayed by Plotly
All plots use a semi-transparent background to create a cohesive visual design while maintaining readability.

​
Interactive Selection

Both scatter plots support click-based selection:
  • Single click selects a primer
  • Selected primer information is displayed immediately
  • Dependent plots update automatically via Dash callbacks
  • No manual refresh required
The clickmode setting 'event+select' enables both event-driven callbacks and visual selection highlighting on the plots.

Build docs developers (and LLMs) love

Get started for freeTalk to us