initial update

app.py

@@ -388,7 +388,6 @@ with gr.Blocks() as demo:
     '<li>upload a Marker File listing the channels to identify the antibodies.</li>'
     '</ul></div>')
 
-    gr.Markdown('<hr>')
     gr.Markdown('<div class="h-2">Select Input Case:</div>')
     
     choices = gr.Radio(["Case 1", "Case 2"], value="Case 1", label="Choose Input Case", elem_classes='input-choices')
@@ -423,12 +422,11 @@ with gr.Blocks() as demo:
     choices.change(fn=toggle_file_input, inputs=choices, outputs=[img_path, marker_path])
 
         # img_viz = gr.Plot(label="Visualization of individual channels")
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 2. Modify existing channels</div>')
     gr.Markdown('<div class="h-2">(Required) Define channels designed to visualize nuclei. </div>')
     gr.Markdown('<div class="h-2">(Optional) Remove unwanted channel after visualizing the individual channels. </div>')
     gr.Markdown('<div class="h-2">(Optional) Define channels degisned to visualize membranes.</div>')
-    gr.Markdown('<hr>')
     
     with gr.Row(equal_height=True): # third row selects nuclei channels
         with gr.Column(scale=2):
@@ -454,9 +452,8 @@ with gr.Blocks() as demo:
     # modifies the channels per user input
     define_btn.click(fn=modify_channels, inputs=[cytof_original_state, selected_unwanted_channel, selected_nuclei, selected_membrane], outputs=[channel_feedback, cytof_state])
 
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 3. Perform cell segmentation based on the defined nuclei and membrane channels</div>')
-    gr.Markdown('<hr>')
 
     with gr.Row(): # This row defines cell radius and performs segmentation
         with gr.Column(scale=2):
@@ -468,10 +465,9 @@ with gr.Blocks() as demo:
             seg_viz = gr.Plot(label="Hover over graph to zoom, pan, save, etc.")
         seg_btn.click(fn=cell_seg, inputs=[cytof_state, cell_radius], outputs=[seg_viz, cytof_state])
     
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 4. Extract cell features</div>')
     gr.Markdown('<div class="h-2">Note: This step will take significantly longer than the previous ones. A 300MB IMC file takes about 7 minutes to compute.</div>')
-    gr.Markdown('<hr>')
 
     cohort_state = gr.State(CytofCohort())
     with gr.Row(): # feature extraction related functinos
@@ -485,9 +481,8 @@ with gr.Blocks() as demo:
         extract_btn.click(fn=feature_extraction, inputs=[cytof_state, cohort_state, norm_percentile], 
         outputs=[cytof_state, cohort_state, feat_df])
     
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 5. Downstream analysis</div>')
-    gr.Markdown('<hr>')
 
     gr.Markdown('<div class="h-2">(1) Co-expression Analysis</div>')
     with gr.Row(): # show co-expression and spatial analysis
@@ -522,12 +517,11 @@ with gr.Blocks() as demo:
     co_exp_btn.click(fn=co_expression, inputs=[cytof_state, norm_percentile], outputs=[co_exp_viz, cytof_state])
     # spatial_btn logic is in step6. This is populate the marker positive dropdown options
 
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 6. Visualize positive markers</div>')
     gr.Markdown('<div class="h-2">Select two markers for side-by-side comparison to visualize their positive states in cells. This serves two purposes. </div>')
     gr.Markdown('<div class="h-2">(1) Validate the co-expression analysis results. High expression level should mean a similar number of positive markers within the two slides, whereas low expression level mean a large difference of in the number of positive markers. </div>')
     gr.Markdown('<div class="h-2">(2) Validate teh spatial interaction analysis results. High interaction means the two positive markers are in close proximity of each other (proximity is previously defined in `clustering threshold`), and vice versa.</div>')
-    gr.Markdown('<hr>')
     
     with gr.Row(): # two marker positive visualization - dropdown options
         with gr.Column(scale=2):
@@ -545,11 +539,10 @@ with gr.Blocks() as demo:
             )
             pos_viz_btn.click(fn=viz_pos_marker_pair, inputs=[cytof_state, selected_marker1, selected_marker2, norm_percentile], outputs=[marker_pos_viz])
 
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 7. Phenogrpah Clustering</div>')
     gr.Markdown('<div class="h-2">Cells can be clustered into sub-groups based on the extracted single-cell data.</div>')
     gr.Markdown('<div class="h-2">Time reference: a 300MB IMC file takes about 2 minutes to compute.</div>')
-    gr.Markdown('<hr>')
 
     with gr.Row(): # add two plots to visualize phenograph results
         with gr.Column(scale=2):
@@ -566,9 +559,8 @@ with gr.Blocks() as demo:
             cluster_interaction = gr.Plot(label="Spatial interaction of clusters")
             cluster_interact_btn.click(cluster_interaction_fn, inputs=[cytof_state, cohort_state], outputs=[cluster_interaction, cytof_state, cohort_state])
 
-    
+    gr.Markdown('<br>')
     gr.Markdown('<div class="h-2">In additional, you could visualizing the cluster assignments against the positive markers to oberve any patterns:</div>')
-    gr.Markdown('<hr>')
     with gr.Row():
         with gr.Column(scale=2):
             selected_cluster_marker = gr.Dropdown(label='Select one marker', info='Select a marker to visualize', interactive=True)