use plotly

app.py

@@ -4,6 +4,7 @@ import cas9on
 import cas9off
 import pandas as pd
 import streamlit as st
+import plotly.graph_objs as go
 from pygenomeviz import Genbank, GenomeViz
 import numpy as np
 from pathlib import Path
@@ -125,6 +126,39 @@ if selected_model == 'Cas9':
                 df = pd.DataFrame(st.session_state['on_target_results'],
                                   columns=["Gene ID", "Start Pos", "End Pos", "Strand", "gRNA", "Prediction"])
 
+                # Now create a Plotly plot with the sorted_predictions
+                fig = go.Figure()
+
+                # Iterate over the sorted predictions to create the plot
+                for i, prediction in enumerate(sorted_predictions, start=1):
+                    # Extract data for plotting
+                    chrom, start, end, strand, gRNA, pred_score = prediction
+                    # Strand is not used in this plot, but you could use it to determine marker symbol, for example
+                    fig.add_trace(go.Scatter(
+                        x=[start, end],
+                        y=[i, i],  # Y-values are just the rank of the prediction
+                        mode='lines+markers+text',
+                        name=f"gRNA: {gRNA}",
+                        text=[f"Rank: {i}", ""],  # Text at the start position only
+                        hoverinfo='text',
+                        hovertext=[
+                            f"Rank: {i}<br>Target: {gRNA}<br>Cutsite: {start}<br>On Target Score: {pred_score}",
+                            ""
+                        ],
+                    ))
+
+                # Update the layout of the plot
+                fig.update_layout(
+                    title='Top 10 gRNA Sequences by Prediction Score',
+                    xaxis_title='Genomic Position',
+                    yaxis_title='Rank',
+                    yaxis=dict(showticklabels=False)
+                    # We hide the y-axis labels since the rank is indicated in the hovertext
+                )
+
+                # Display the plot
+                st.plotly_chart(fig)
+
                 if gene_sequence:  # Ensure gene_sequence is not empty
                     genbank_file_path = f"{gene_symbol}_crispr_targets.gb"
                     cas9on.generate_genbank_file_from_df(df, gene_sequence, gene_symbol, genbank_file_path)
@@ -146,25 +180,25 @@ if selected_model == 'Cas9':
                         st.download_button(label="Download BED File", data=file,
                             file_name=bed_file_path, mime="text/plain")
 
-                    # Visualize the GenBank file using pyGenomeViz
-                    gv = GenomeViz(
-                        feature_track_ratio=0.3,
-                        tick_track_ratio=0.5,
-                        tick_style="axis",
-                    )
-
-                    # Load the GenBank file
-                    gbk = Genbank(genbank_file_path)
-
-                    # Add a feature track to the GenomeViz object
-                    track = gv.add_feature_track(gbk.name, gbk.range_size)
-
-                    # Add all features from the GenBank file to the track
-                    track.add_genbank_features(gbk)
-
-                    # Plot the figure and display it in Streamlit
-                    fig = gv.plotfig()
-                    st.pyplot(fig)
+                    # # Visualize the GenBank file using pyGenomeViz
+                    # gv = GenomeViz(
+                    #     feature_track_ratio=0.3,
+                    #     tick_track_ratio=0.5,
+                    #     tick_style="axis",
+                    # )
+                    #
+                    # # Load the GenBank file
+                    # gbk = Genbank(genbank_file_path)
+                    #
+                    # # Add a feature track to the GenomeViz object
+                    # track = gv.add_feature_track(gbk.name, gbk.range_size)
+                    #
+                    # # Add all features from the GenBank file to the track
+                    # track.add_genbank_features(gbk)
+                    #
+                    # # Plot the figure and display it in Streamlit
+                    # fig = gv.plotfig()
+                    # st.pyplot(fig)
 
     elif target_selection == 'off-target':
         ENTRY_METHODS = dict(