Update app.py

app.py

@@ -1,6 +1,3 @@
-# give some time reference to the user
-print('Importing Gradio app packages... (first launch takes about 3-5 minutes)')
-
 import gradio as gr
 import yaml
 import skimage
@@ -334,42 +331,111 @@ def viz_cluster_positive(marker, percentile_threshold, cytof_img, cytof_cohort):
     return fig, cytof_img, cytof_cohort
 
 # Gradio App template
-with gr.Blocks() as demo:
-    cytof_state = gr.State(CytofImage())
-
-     # used in scenrios where users define/remove channels multiple times
-    cytof_original_state = gr.State(CytofImage())
-
-    gr.Markdown("# Step 1. Upload images")
-    gr.Markdown('You may upload one or two files depending on your use case.')
-    gr.Markdown('Case 1: A single TXT or CSV file that contains information about antibodies, rare heavy metal isotopes, and image channel names. Make sure files are following the CyTOF, IMC, or multiplex data convention. Leave the `Marker File` upload section blank.')
-    gr.Markdown('Case 2: Multiple file uploads required. First, a TIFF file containing Regions of Interest (ROIs) stored as multiplexed images. Then, upload a `Marker File` listing the channels to identify the antibodies.')
+custom_css = """
+<style>
+.h-1 {
+    font-size: 40px !important;
+}
+.h-2 {
+    font-size: 20px !important;
+}
+.h-3 {
+    font-size: 20px !important;
+}
+.mb-10 {
+    margin-bottom: 10px !important;
+}
+.no-label label {
+    display: none !important;
+}
+.cell-no-label span {
+    display: none !important;
+}
+.no-border {
+    border-width: 0 !important;
+}
+hr {
+    margin: 1.5rem 0 0 0 !important;
+    padding-bottom: 10px !important;
+}
+.input-choices {
+    padding: 10px 0 !important;
+}
+.input-choices > span {
+    display: none;
+}
+.form:has(.input-choices) {
+    border-width: 0 !important;
+    box-shadow: none !important;
+}
+.bold {
+    font-weight: 600 !important;
+}
+</style>
+"""
 
-    with gr.Row(): # first row where 1) asks for TIFF upload and 2) displays marker info
-        img_path = gr.File(file_types=[".tiff", '.tif', '.txt', '.csv'], label='(Required) A file containing Regions of Interest (ROIs) of multiplexed imaging slides.')
-        img_info = gr.Textbox(label='Marker information', info='Ensure the number of markers displayed below matches the expected number.')
+with gr.Blocks() as demo:
+    gr.HTML(custom_css)
+    
+    gr.Markdown('<div class="h-1">Step 1. Upload images</div>')
+    gr.Markdown('<div class="h-2">You may upload one or two files depending on your use case.</div>')
+    gr.Markdown('<div class="h-2 bold">Case 1: &nbsp; Upload a single file</div>')
+    gr.Markdown('<div class="h-2"><ul><li>upload a TXT or CSV file that contains information about antibodies, rare heavy metal isotopes, and image channel names.</li>'
+    '<li>files are following the CyTOF, IMC, or multiplex data convention.</li>'
+    '</ul></div>')
+    gr.Markdown('<div class="h-2 bold">Case 2: &nbsp; Upload multiple files</div>')
+    gr.Markdown('<div class="h-2"><ul><li>upload a TIFF file containing Regions of Interest (ROIs) stored as multiplexed images. <a href="https://qbrc.swmed.edu/labs/xiaoxie/download/multiplex/example_image.tiff" download target="_blank">Example ROI</a></li>'
+    '<li>upload a Marker File listing the channels to identify the antibodies. <a href="https://github.com/QBRC/multiTAP/blob/main/example_data/markers_labels.txt" download target="_blank">Example Marker File</a></li>'
+    '</ul></div><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')
+
+    def toggle_file_input(choice):
+        if choice == "Case 1":
+            return (
+                gr.update(visible=True, file_types=['.txt', '.csv'], label="TXT or CSV File"),
+                gr.update(visible=False)
+            )
+        else:
+            return (
+                gr.update(visible=True, file_types=[".tiff", '.tif'], label="TIFF File"),
+                gr.update(visible=True)
+            )
 
     with gr.Row(equal_height=True): # second row where 1) asks for marker file upload and 2) displays the visualization of individual channels
-        with gr.Column():
-            marker_path = gr.File(file_types=['.txt'], label='(Optional) Marker File. A list used to identify the antibodies in each TIFF layer. Upload one TXT file.')
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">File Input:</div>')
+            img_path = gr.File(file_types=['.txt', '.csv'], label='TXT or CSV File')
+            marker_path = gr.File(file_types=['.txt'], label='Marker File', visible=False)
             with gr.Row():
                 clear_btn = gr.Button("Clear")
                 submit_btn = gr.Button("Upload")
-        img_viz = gr.Plot(label="Visualization of individual channels")
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Marker Information:</div>')
+            img_info = gr.Textbox(label='Ensure the number of markers displayed below matches the expected number.')
+            gr.Markdown('<div class="h-3">Visualization of individual channels:</div>')
+            with gr.Accordion("", open=True):
+                img_viz = gr.Plot(elem_classes='no-label no-border')
+                
+    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><hr>')
     
-    gr.Markdown("# Step 2. Modify existing channels")
-    gr.Markdown("After visualizing the individual channels, did you notice any that should not be included in the next steps? Remove those if so.")
-    gr.Markdown("Define channels designed to visualize nuclei. Optionally, define channels designed to visualize membranes.")
-
     with gr.Row(equal_height=True): # third row selects nuclei channels
-        with gr.Column():
-            selected_unwanted_channel = gr.Dropdown(label='(Optional) Select the unwanted channel', interactive=True)
+        with gr.Column(scale=2):
             selected_nuclei = gr.Dropdown(label='(Required) Select the nuclei channel', interactive=True)
+            selected_unwanted_channel = gr.Dropdown(label='(Optional) Select the unwanted channel', interactive=True)
             selected_membrane = gr.Dropdown(label='(Optional) Select the membrane channel', interactive=True)
-            
             define_btn = gr.Button('Modify channels')
-
-        channel_feedback = gr.Textbox(label='Channels info update')
+        with gr.Column(scale=3):
+            channel_feedback = gr.Textbox(label='Channels info update')
 
         # upload the file, and gather channel info. Then populate to the unwanted_channel, nuclei, and membrane components
         submit_btn.click(
@@ -386,85 +452,132 @@ 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('# Step 3. Perform cell segmentation based on the defined nuclei and membrane channels')
+    gr.Markdown('<br>')
+    gr.Markdown('<div class="h-1">Step 3. Perform Cell Segmentation</div>')
+    gr.Markdown('<div class="h-2">In this step, we perform cell segmentation based on the defined nuclei and membrane channels</div><hr>')
 
     with gr.Row(): # This row defines cell radius and performs segmentation
-        with gr.Column():
-            cell_radius = gr.Number(value=5, precision=0, label='Cell size', info='Please enter the desired radius for cell segmentation (in pixels; default value: 5)')
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">Cell Size:</div>')
+            cell_radius = gr.Number(value=5, precision=0, label='Cell size', info='Please enter the desired radius for cell segmentation (in pixels; default value: 5)', elem_classes='cell-no-label')
             seg_btn = gr.Button("Segment")
-        seg_viz = gr.Plot(label="Visualization of the segmentation. Hover over graph to zoom, pan, save, etc.")
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Visualization of the segmentation: </div>')
+            with gr.Accordion("Hover over graph to zoom, pan, save, etc.", open=True):
+                seg_viz = gr.Plot(label="Hover over graph to zoom, pan, save, etc.", elem_classes='no-border no-label')
         seg_btn.click(fn=cell_seg, inputs=[cytof_state, cell_radius], outputs=[seg_viz, cytof_state])
-            
-    gr.Markdown('# Step 4. Extract cell features')
+    
+    gr.Markdown('<br>')
+    gr.Markdown('<div class="h-1">Step 4. Extract cell features</div>')
+    gr.Markdown('<div class="h-2"><span class="bold">Note</span>: This step will take significantly longer than the previous ones. (A 300MB IMC file takes about 7 minutes to compute.)</div><hr>')
 
     cohort_state = gr.State(CytofCohort())
     with gr.Row(): # feature extraction related functinos
-        with gr.Column():
-            gr.CheckboxGroup(choices=['Yes', 'Yes', 'Yes'], label='Note: This step will take significantly longer than the previous ones. A 130MB IMC file takes about 14 minutes to compute. Did you read this note?')
+        with gr.Column(scale=2):
+            # gr.CheckboxGroup(choices=['Yes', 'Yes', 'Yes'], label='')
             norm_percentile = gr.Slider(minimum=50, maximum=99, step=1, value=75, interactive=True, label='Normalized quantification percentile')
             extract_btn = gr.Button('Extract')
-        feat_df = gr.DataFrame(headers=['id','coordinate_x','coordinate_y','area_nuclei'], label='Feature extraction summary')
+        with gr.Column(scale=3):
+            feat_df = gr.DataFrame(headers=['id','coordinate_x','coordinate_y','area_nuclei'],col_count=(4, "fixed"))
     
         extract_btn.click(fn=feature_extraction, inputs=[cytof_state, cohort_state, norm_percentile], 
         outputs=[cytof_state, cohort_state, feat_df])
     
-    gr.Markdown('# Step 5. Downstream analysis')
-
+    gr.Markdown('<br>')
+    gr.Markdown('<div class="h-1">Step 5. Downstream analysis</div><hr>')
+    
+    gr.Markdown('<div class="h-2 bold">(1) Co-expression Analysis</div>')
     with gr.Row(): # show co-expression and spatial analysis
-        with gr.Column():
-            co_exp_viz = gr.Plot(label="Visualization of cell coexpression of markers")
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">This analysis measures the level of co-expression for each pair of biomarkers by calculating the odds ratio between the observed co-occurrence and the expected expressing even</div>')
             co_exp_btn = gr.Button('Run co-expression analysis')
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Visualization of cell coexpression of markers</div>')
+            with gr.Accordion("", open=True):
+                co_exp_viz = gr.Plot(elem_classes='no-label no-border')
 
-        with gr.Column():
-            spatial_viz = gr.Plot(label="Visualization of cell spatial interaction of markers")
-            cluster_method = gr.Radio(label='Select the clustering method', value='k-neighbor',  choices=['k-neighbor', 'distance'], info='K-neighbor: classifies the threshold number of surrounding cells as neighborhood pairs. Distance: classifies cells within threshold distance as neighborhood pairs.')
-            cluster_threshold = gr.Slider(minimum=1, maximum=100, step=1, value=30, interactive=True, label='Clustering threshold')
+    gr.Markdown('<div class="h-2 bold">(2) Spatial Interactoin Analysis</div>')
 
-            spatial_btn = gr.Button('Run spatial interaction analysis')
-
-        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
+    def update_info_text(choice):
+        if choice == "k-neighbor":
+            return 'K-neighbor: classifies the threshold number of surrounding cells as neighborhood pairs.'
+        else:
+            return 'Distance: classifies cells within threshold distance as neighborhood pairs.'
 
-    gr.Markdown('# Step 6. Visualize positive markers')
-    gr.Markdown('Select two markers for side-by-side comparison to visualize their positive states in cells. This serves two purposes. 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. 2) Validate the 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.')
+    with gr.Row():
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">This analysis measures the degree of co-expression within a pair of neighborhoods.</div>')
+            gr.Markdown('<div class="h-2">Select the clustering method:</div>')
+            info_text = gr.Markdown(update_info_text('k-neighbor'))
+            cluster_method = gr.Radio(['k-neighbor', 'distance'], value='k-neighbor', elem_classes='test', label='')
+            cluster_threshold = gr.Slider(minimum=1, maximum=100, step=1, value=30, interactive=True, label='Clustering threshold')
+            spatial_btn = gr.Button('Run spatial interaction analysis')
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Visualization of spatial interaction of markers</div>')
+            with gr.Accordion("", open=True):
+                spatial_viz = gr.Plot(elem_classes='no-label no-border')
+                
+    cluster_method.change(fn=update_info_text, inputs=cluster_method, outputs=info_text)
+    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 bold">(1) Validate the co-expression analysis results. (2) Validate teh spatial interaction analysis results.</div>')
+    
     
     with gr.Row(): # two marker positive visualization - dropdown options
-        selected_marker1 = gr.Dropdown(label='Select one marker', info='Select a marker to visualize', interactive=True)
-        selected_marker2 = gr.Dropdown(label='Select another marker', info='Selecting the same marker as the previous one is allowed', interactive=True)
-        pos_viz_btn = gr.Button('Visualize these two markers')
-
+        with gr.Column(scale=2):
+            selected_marker1 = gr.Dropdown(label='Select one marker', info='Select a marker to visualize', interactive=True)
+            selected_marker2 = gr.Dropdown(label='Select another marker', info='Selecting the same marker as the previous one is allowed', interactive=True)
+            pos_viz_btn = gr.Button('Visualize these two markers')
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Visualization of the two markers.</div>')
+            with gr.Accordion("Hover over graph to zoom, pan, save, etc.", open=True):    
+                marker_pos_viz = gr.Plot(elem_classes='no-label no-border')
         
-    with gr.Row(): # two marker positive visualization - visualization
-        marker_pos_viz = gr.Plot(label="Visualization of the two markers. Hover over graph to zoom, pan, save, etc.")
-    
-        spatial_btn.click(
-            fn=spatial_interaction, inputs=[cytof_state, norm_percentile, cluster_method, cluster_threshold], outputs=[spatial_viz, cytof_state]
-        ).success(
-            fn=get_marker_pos_options, inputs=[cytof_state], outputs=[selected_marker1, selected_marker2]
-        )
-        pos_viz_btn.click(fn=viz_pos_marker_pair, inputs=[cytof_state, selected_marker1, selected_marker2, norm_percentile], outputs=[marker_pos_viz])
+            spatial_btn.click(
+                fn=spatial_interaction, inputs=[cytof_state, norm_percentile, cluster_method, cluster_threshold], outputs=[spatial_viz, cytof_state]
+            ).success(
+                fn=get_marker_pos_options, inputs=[cytof_state], outputs=[selected_marker1, selected_marker2]
+            )
+            pos_viz_btn.click(fn=viz_pos_marker_pair, inputs=[cytof_state, selected_marker1, selected_marker2, norm_percentile], outputs=[marker_pos_viz])
 
-
-    gr.Markdown('# Step 7. Phenogrpah Clustering')
-    gr.Markdown('Cells can be clustered into sub-groups based on the extracted single-cell data. Time reference: a 300MB IMC file takes about 2 minutes to compute.')
+    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. (A 300MB IMC file takes about 2 minutes to compute.)</div><hr>')    
 
     with gr.Row(): # add two plots to visualize phenograph results
-        phenograph_umap = gr.Plot(label="UMAP results")
-        cluster_interaction = gr.Plot(label="Spatial interaction of clusters")
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">We used UMAP to project the high-dimensional data onto a 2-D space.</div>')
+            umap_btn = gr.Button('Run Phenograph clustering')
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">UMAP Results</div>')
+            with gr.Accordion("", open=True):
+                phenograph_umap = gr.Plot(elem_classes='no-label no-border')
 
-    
-    with gr.Row(equal_height=False): # action components
-        umap_btn = gr.Button('Run Phenograph clustering')
-        cluster_interact_btn = gr.Button('Run clustering interaction')
+    with gr.Row(): # add two plots to visualize phenograph results
+        with gr.Column(scale=2):
+            gr.Markdown('<div class="h-2">The previously assigned clusters are also reflected in this figure.</div>')
+            cluster_interact_btn = gr.Button('Run clustering interaction')
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Spatial interaction of clusters</div>')
+            with gr.Accordion("", open=True):
+                cluster_interaction = gr.Plot(elem_classes='no-label no-border')
         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><hr>')
+    
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=2):
             selected_cluster_marker = gr.Dropdown(label='Select one marker', info='Select a marker to visualize', interactive=True)
             cluster_positive_btn = gr.Button('Compare clusters and positive markers')
-
-        with gr.Column():
-            cluster_v_positive = gr.Plot(label="Cluster assignment vs. positive cells. Hover over graph to zoom, pan, save, etc.")
+        with gr.Column(scale=3):
+            gr.Markdown('<div class="h-2">Cluster assignment vs. positive cells</div>')
+            with gr.Accordion("Hover over graph to zoom, pan, save, etc.", open=True):
+                cluster_v_positive = gr.Plot(elem_classes='no-label no-border')
 
 
         umap_btn.click(