fix

app.py

@@ -190,77 +190,66 @@ if selected_model == 'Cas9':
                 # Initialize Plotly figure
                 fig = go.Figure()
 
-                # Constants for the appearance
-                EXON_HEIGHT = 0.05  # How 'tall' the exon markers should appear
-                CDS_HEIGHT = 0.05  # How 'tall' the CDS markers should appear
-                Y_POS = -0.1  # Position on the Y axis to place these markers
+                # Adjust these constants for appearance
+                LINE_WIDTH = 2  # Width of EXON and CDS lines
+                EXON_OPACITY = 0.5  # Make exon lines semi-transparent
 
-                # Plot Exons as small markers on the X-axis
+                # Ensure EXON and CDS are drawn at the same Y position on the X-axis
+                EXON_CDS_Y_POS = 0  # Directly on the X-axis
+
+                # Draw EXONs
                 for exon in st.session_state['exons']:
                     exon_start, exon_end = exon['start'], exon['end']
-                    # Using bars for better control over width and position
-                    fig.add_trace(go.Bar(
-                        x=[(exon_start + exon_end) / 2],  # Position at the center of the exon
-                        y=[EXON_HEIGHT],
-                        width=[exon_end - exon_start],  # Width of the bar is the exon length
-                        base=[Y_POS],
-                        marker_color='purple',
+                    fig.add_trace(go.Scatter(
+                        x=[exon_start, exon_end],
+                        y=[EXON_CDS_Y_POS, EXON_CDS_Y_POS],
+                        mode='lines',
+                        line=dict(color='purple', width=LINE_WIDTH, opacity=EXON_OPACITY),
                         name='Exon'
                     ))
 
-                # Plot CDS in a similar manner
+                # Draw CDSs
                 for cds in st.session_state['cds']:
                     cds_start, cds_end = cds['start'], cds['end']
-                    fig.add_trace(go.Bar(
-                        x=[(cds_start + cds_end) / 2],  # Position at the center of the CDS
-                        y=[CDS_HEIGHT],
-                        width=[cds_end - cds_start],  # Width of the bar is the CDS length
-                        base=[Y_POS - EXON_HEIGHT],  # Slightly offset from the exons
-                        marker_color='blue',
+                    fig.add_trace(go.Scatter(
+                        x=[cds_start, cds_end],
+                        y=[EXON_CDS_Y_POS, EXON_CDS_Y_POS],
+                        mode='lines',
+                        line=dict(color='blue', width=LINE_WIDTH + 1),  # Slightly thicker than EXON
                         name='CDS'
                     ))
 
-                    # Plot gRNAs using triangles to indicate direction
-                # Initialize the y position for the positive and negative strands
-                positive_strand_y = 0.1
-                negative_strand_y = -0.1
-                offset = 0.05  # Use an offset to spread gRNA sequences vertically
+                # Adjust hover interaction and strand plotting
+                MAX_STRAND_Y = 0.5  # Maximum Y value for positive strand
+                MIN_STRAND_Y = -0.5  # Minimum Y value for negative strand
 
-                # Iterate over the sorted predictions to create the plot
+                # Iterate over sorted predictions to create the plot
                 for i, prediction in enumerate(st.session_state['on_target_results'], start=1):
                     chrom, start, end, strand, target, gRNA, pred_score = prediction
-
                     midpoint = (int(start) + int(end)) / 2
-                    y_value = i * 0.1 if strand == '1' else -i * 0.1  # Adjust multiplier for spacing
+
+                    # Position based on strand, but within a fixed range
+                    y_value = MAX_STRAND_Y if strand == '1' else MIN_STRAND_Y
 
                     fig.add_trace(go.Scatter(
                         x=[midpoint],
                         y=[y_value],
                         mode='markers+text',
                         marker=dict(symbol='triangle-up' if strand == '1' else 'triangle-down', size=12),
-                        text=f"Rank: {i}",  # Adjust based on your data
+                        text=f"Rank: {i}",  # Text label
                         hoverinfo='text',
                         hovertext=f"Rank: {i}<br>Chromosome: {chrom}<br>Target Sequence: {target}<br>gRNA: {gRNA}<br>Start: {start}<br>End: {end}<br>Strand: {'+' if strand == '1' else '-'}<br>Prediction Score: {pred_score:.4f}",
                     ))
 
-                # Update the layout of the plot for better clarity and interactivity
+                # Update layout for clarity and interaction
                 fig.update_layout(
                     title='Top 10 gRNA Sequences by Prediction Score',
                     xaxis_title='Genomic Position',
                     yaxis_title='Strand',
-                    showlegend=False,  # Toggle based on preference
-                    xaxis=dict(
-                        showspikes=True,  # Show spike line for X-axis
-                        spikemode='across',
-                        spikesnap='cursor',
-                        spikethickness=1,
-                        spikecolor='grey',
-                        showline=True,
-                        showgrid=True,
-                        tickformat='.2f',  # Adjust based on the precision you need
-                    ),
-                    hovermode='x',
-                    hoverdistance=100,  # Adjust for best hover interaction
+                    yaxis=dict(range=[MIN_STRAND_Y - 0.1, MAX_STRAND_Y + 0.1]),  # Fix y-axis range
+                    showlegend=False,
+                    hovermode='closest',  # Adjust hover mode
+                    hoverdistance=20,  # Reduce hover distance to improve accuracy
                 )
 
                 # Display the plot