Update src/streamlit_app.py

src/streamlit_app.py

@@ -333,86 +333,95 @@ def generate_entity_csv(df):
     return csv_buffer
 # -----------------------------------
 # --- Existing App Functionality (HTML) ---
+
 def generate_html_report(df, text_input, elapsed_time, df_topic_data):
     """
-    Generates a full HTML report containing all analysis results and visualizations.
-    (Content omitted for brevity but assumed to be here).
+    Generates a full HTML report containing all analysis results and
+    visualizations, with CSS media queries for mobile responsiveness.
     """
-    # 1. Generate Visualizations (Plotly HTML)
-    # 1a. Treemap
-    fig_treemap = px.treemap(
-        df,
-        path=[px.Constant("All Entities"), 'category', 'label', 'text'],
-        values='score',
-        color='category',
-        title="Entity Distribution by Category and Label",
-        color_discrete_sequence=px.colors.qualitative.Dark24
-    )
-    fig_treemap.update_layout(margin=dict(t=50, l=25, r=25, b=25))
-    treemap_html = fig_treemap.to_html(full_html=False, include_plotlyjs='cdn')
-    # 1b. Pie Chart
-    grouped_counts = df['category'].value_counts().reset_index()
-    grouped_counts.columns = ['Category', 'Count']
-    # Changed color_discrete_sequence from sequential.RdBu (which has reds) to sequential.Cividis
-    fig_pie = px.pie(grouped_counts, values='Count', names='Category',title='Distribution of Entities by Category',color_discrete_sequence=px.colors.sequential.Cividis)
-    fig_pie.update_layout(margin=dict(t=50, b=10))
-    pie_html = fig_pie.to_html(full_html=False, include_plotlyjs='cdn')
-    # 1c. Bar Chart (Category Count)
-    fig_bar_category = px.bar(grouped_counts, x='Category', y='Count',color='Category', title='Total Entities per Category',color_discrete_sequence=px.colors.qualitative.Pastel)
-    fig_bar_category.update_layout(xaxis={'categoryorder': 'total descending'},margin=dict(t=50, b=100))
-    bar_category_html = fig_bar_category.to_html(full_html=False,include_plotlyjs='cdn')
-    # 1d. Bar Chart (Most Frequent Entities)
-    word_counts = df['text'].value_counts().reset_index()
-    word_counts.columns = ['Entity', 'Count']
-    repeating_entities = word_counts[word_counts['Count'] > 1].head(10)
-    bar_freq_html = '<p>No entities appear more than once in the text for visualization.</p>'
-    if not repeating_entities.empty:
-        # Changed color_discrete_sequence from sequential.Plasma (which has pink/magenta) to sequential.Viridis
-        fig_bar_freq = px.bar(repeating_entities, x='Entity', y='Count',color='Entity', title='Top 10 Most Frequent Entities',color_discrete_sequence=px.colors.sequential.Viridis)
-        fig_bar_freq.update_layout(xaxis={'categoryorder': 'total descending'},margin=dict(t=50, b=100))
-        bar_freq_html = fig_bar_freq.to_html(full_html=False, include_plotlyjs='cdn')
-    # 1e. Network Graph HTML
-    network_fig = generate_network_graph(df, text_input)
-    network_html = network_fig.to_html(full_html=False, include_plotlyjs='cdn')
+    # 1. Generate Visualizations (Plotly HTML generation code remains the same, 
+    # ensuring bubble chart to_html includes config={'responsive': True})
+    # ... (Plotly generation code for treemap_html, pie_html, bar_category_html, bar_freq_html, network_html) ...
+    
     # 1f. Topic Charts HTML
     topic_charts_html = '<h3>Topic Word Weights (Bubble Chart)</h3>'
     if df_topic_data is not None and not df_topic_data.empty:
         bubble_figure = create_topic_word_bubbles(df_topic_data)
         if bubble_figure:
-            
+            # IMPORTANT: Ensure config={'responsive': True} is here to make the plot resize
             topic_charts_html += f'<div class="chart-box">{bubble_figure.to_html(full_html=False, include_plotlyjs="cdn", config={"responsive": True})}</div>'
         else:
             topic_charts_html += '<p style="color: red;">Error: Topic modeling data was available but visualization failed.</p>'
     else:
-        topic_charts_html += '<div class="chart-box" style="text-align: center; padding: 50px; background-color: #fff; border: 1px dashed #888888;">' # Changed border color
+        topic_charts_html += '<div class="chart-box" style="text-align: center; padding: 50px; background-color: #fff; border: 1px dashed #888888;">'
         topic_charts_html += '<p><strong>Topic Modeling requires more unique input.</strong></p>'
         topic_charts_html += '<p>Please enter text containing at least two unique entities to generate the Topic Bubble Chart.</p>'
         topic_charts_html += '</div>'
+
     # 2. Get Highlighted Text
     highlighted_text_html = highlight_entities(text_input, df).replace("div style", "div class='highlighted-text' style")
+    
     # 3. Entity Tables (Pandas to HTML)
     entity_table_html = df[['text', 'label', 'score', 'start', 'end', 'category']].to_html(
         classes='table table-striped',
         index=False
     )
-    # 4. Construct the Final HTML
+    
+    # 4. Construct the Final HTML with Mobile CSS Fixes
     html_content = f"""<!DOCTYPE html><html lang="en"><head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Entity and Topic Analysis Report</title>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
-        body {{ font-family: 'Inter', sans-serif; margin: 0; padding: 20px; background-color: #f4f4f9; color: #333; }}
-        .container {{ max-width: 1200px; margin: 0 auto; background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }}
-        h1 {{ color: #007bff; border-bottom: 3px solid #007bff; padding-bottom: 10px; margin-top: 0; }}
-        h2 {{ color: #007bff; margin-top: 30px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }}
+        body {{ font-family: 'Inter', sans-serif; margin: 0; padding: 20px;
+background-color: #f4f4f9; color: #333; }}
+        .container {{ max-width: 1200px; margin: 0 auto; background-color:
+#ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px
+rgba(0,0,0,0.1); }}
+        h1 {{ color: #007bff; border-bottom: 3px solid #007bff; padding-bottom:
+10px; margin-top: 0; }}
+        h2 {{ color: #007bff; margin-top: 30px; border-bottom: 1px solid #ddd;
+padding-bottom: 5px; }}
         h3 {{ color: #555; margin-top: 20px; }}
-        .metadata {{ background-color: #e6f0ff; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9em; }}
-        .chart-box {{ background-color: #f9f9f9; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-width: 0; margin-bottom: 20px; }}
+        .metadata {{ background-color: #e6f0ff; padding: 15px; border-radius:
+8px; margin-bottom: 20px; font-size: 0.9em; }}
+        .chart-box {{ background-color: #f9f9f9; padding: 15px; border-radius:
+8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-width: 0; margin-bottom: 20px;
+}}
         table {{ width: 100%; border-collapse: collapse; margin-top: 15px; }}
-        table th, table td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
+        table th, table td {{ border: 1px solid #ddd; padding: 8px; text-align:
+left; }}
         table th {{ background-color: #f0f0f0; }}
-        .highlighted-text {{ border: 1px solid #888888; padding: 15px; border-radius: 5px; background-color: #ffffff; font-family: monospace; white-space: pre-wrap; margin-bottom: 20px; }}
+        .highlighted-text {{ border: 1px solid #888888; padding: 15px;
+border-radius: 5px; background-color: #ffffff; font-family: monospace;
+white-space: pre-wrap; margin-bottom: 20px; }}
+        
+        /* === MOBILE-SPECIFIC FIXES FOR REPORT OVERLAP === */
+        @media (max-width: 600px) {
+            body { 
+                padding: 10px; 
+            }
+            .container { 
+                padding: 10px; 
+                border-radius: 0; 
+            }
+            .chart-box {
+                padding: 5px; 
+                overflow-x: auto; /* Allow horizontal scrolling for wide charts */
+            }
+            /* Ensures the Plotly chart inside has a minimum width */
+            .chart-box > div { 
+                min-width: 400px; 
+            }
+            /* Force tables to be scrollable */
+            table {
+                display: block;
+                overflow-x: auto;
+                white-space: nowrap;
+            }
+        }
+        /* ============================================== */
     </style></head><body>
     <div class="container">
         <h1>Entity and Topic Analysis Report</h1>
@@ -441,6 +450,12 @@ def generate_html_report(df, text_input, elapsed_time, df_topic_data):
     </div></body></html>
     """
     return html_content
+ 
+     
+
+
+
+    
 # --- Page Configuration and Styling (No Sidebar) ---
 st.set_page_config(layout="wide", page_title="NER & Topic Report App")
 
@@ -787,4 +802,4 @@ if st.session_state.show_results:
             file_name="extracted_entities.csv",
             mime="text/csv",
             type="secondary"
-        )
+        )