Make distribution plot larger with click-to-expand fullscreen

app.py

@@ -1104,7 +1104,7 @@ Provide your work in JSON format where the number belonging to each category is
                 pct = (count / total_rows) * 100 if total_rows > 0 else 0
                 dist_data.append({"Category": cat, "Percentage": round(pct, 1)})
 
-        fig, ax = plt.subplots(figsize=(10, max(4, len(dist_data) * 0.8)))
+        fig, ax = plt.subplots(figsize=(12, max(6, len(dist_data) * 1.0)))
         categories_list = [d["Category"] for d in dist_data][::-1]
         percentages = [d["Percentage"] for d in dist_data][::-1]
 
@@ -1211,6 +1211,44 @@ custom_css = """
     min-width: 150px !important;
 }
 
+/* Expandable plot styles */
+.expandable-plot {
+    min-height: 400px !important;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.expandable-plot:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.expandable-plot img {
+    min-height: 350px !important;
+    object-fit: contain;
+}
+
+/* Fullscreen modal for plot */
+.expandable-plot.fullscreen {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: 9999 !important;
+    background: rgba(255, 255, 255, 0.98) !important;
+    padding: 20px !important;
+    margin: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.expandable-plot.fullscreen img {
+    max-width: 95vw !important;
+    max-height: 90vh !important;
+    min-height: auto !important;
+}
+
 /* Mobile-responsive styles */
 @media screen and (max-width: 768px) {
     /* Reduce overall padding */
@@ -1385,7 +1423,29 @@ custom_css = """
 }
 """
 
-with gr.Blocks(title="CatLLM - Research Data Classifier", theme=gr.themes.Soft(), css=custom_css) as demo:
+custom_js = """
+function() {
+    // Add click-to-expand functionality for the plot
+    document.addEventListener('click', function(e) {
+        const plot = e.target.closest('.expandable-plot');
+        if (plot) {
+            plot.classList.toggle('fullscreen');
+        }
+    });
+
+    // Close fullscreen on Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            const fullscreenPlot = document.querySelector('.expandable-plot.fullscreen');
+            if (fullscreenPlot) {
+                fullscreenPlot.classList.remove('fullscreen');
+            }
+        }
+    });
+}
+"""
+
+with gr.Blocks(title="CatLLM - Research Data Classifier", theme=gr.themes.Soft(), css=custom_css, js=custom_js) as demo:
     gr.Image("logo.png", show_label=False, show_download_button=False, height=115, container=False)
     gr.Markdown("# CatLLM - Research Data Classifier")
     gr.Markdown("Extract categories from or classify text data, PDFs, and images using LLMs.")
@@ -1581,7 +1641,7 @@ Soria, C. (2025). CatLLM: A Python package for LLM-based text classification. DO
             # Classify output group
             with gr.Group(visible=False) as classify_output_group:
                 gr.Markdown("### Classification Results")
-                distribution_plot = gr.Plot(label="Category Distribution (%)", visible=False)
+                distribution_plot = gr.Plot(label="Category Distribution (%)", visible=False, elem_classes="expandable-plot")
                 results = gr.DataFrame(label="Full Results", visible=False)
                 download_file = gr.File(label="Download Results (CSV + Methodology Report)", file_count="multiple")
                 with gr.Accordion("See the Code", open=False):