Update app_pyvis_new.py

app_pyvis_new.py

@@ -18,19 +18,35 @@ def load_data():
             return f"Error loading CSV: {e}"
     return "Data already loaded."
 
+# --- UI HELPERS ---
+
+def format_storyline_html(label, value):
+    """Wraps a storyline section in an orange-themed box."""
+    if not value or str(value).strip() == "":
+        return ""
+    return f"""
+    <div style="margin-bottom: 20px; border-left: 5px solid #ff9800; padding-left: 15px;">
+        <div style="background-color: #fff3e0; padding: 5px 12px; font-weight: bold; color: #e65100; border-radius: 4px; display: inline-block; margin-bottom: 8px;">
+            {label}
+        </div>
+        <div style="font-size: 14px; line-height: 1.6; color: #333;">
+            {value}
+        </div>
+    </div>
+    """
+
 # --- LOGIC FUNCTIONS ---
 
 def plot_cgraph_pyvis(grp):
     if not grp:
         return "<div style='padding:20px; text-align:center; color:gray;'>No graph data available for this event.</div>"
     try:
-        net = Network(notebook=False, directed=True, height="600px", width="100%", bgcolor="#ffffff")
+        net = Network(notebook=False, directed=True, height="700px", width="100%", bgcolor="#ffffff")
         edge_colors_dict = {"causes": "#e74c3c", "prevents": "#2ecc71"}
 
         for src, rel, tgt in grp:
-            # Change: Lightened node color (#add8e6) and ensured black text for readability
-            net.add_node(str(src), label=str(src), shape="circle", color="#add8e6", font={'size': 14, 'color': 'black'})
-            net.add_node(str(tgt), label=str(tgt), shape="circle", color="#add8e6", font={'size': 14, 'color': 'black'})
+            net.add_node(str(src), label=str(src), shape="circle", color="#ADD8E6", font={'size': 14, 'color': '#000000'})
+            net.add_node(str(tgt), label=str(tgt), shape="circle", color="#ADD8E6", font={'size': 14, 'color': '#000000'})
             color = edge_colors_dict.get(str(rel).lower(), "#95a5a6")
             net.add_edge(str(src), str(tgt), label=str(rel), color=color, width=2)
 
@@ -55,61 +71,70 @@ def update_row_dropdown(disaster_type, country):
 def display_info(selected_row_str):
     load_data()
     if not selected_row_str or selected_row_str == 'Select a Disaster Event':
-        return 'No valid event selected.', '<div>Select an event to see the graph.</div>'
+        return 'Select an event to see the narrative.', '<div>Select an event to see the graph.</div>'
 
     row_data = df[df['DisNo.'] == selected_row_str]
     if not row_data.empty:
         row_data = row_data.squeeze()
 
-        data_map = {
-            "Key Information": row_data.get('key information', ''),
-            "Severity": row_data.get('severity', ''),
-            "Key Drivers": row_data.get('key drivers', ''),
-            "Main Impacts, Exposure, and Vulnerability": row_data.get('main impacts, exposure, and vulnerability', ''),
-            "Likelihood of Multi-Hazard Risks": row_data.get('likelihood of multi-hazard risks', ''),
-            "Best Practices for Managing This Risk": row_data.get('best practices for managing this risk', ''),
-            "Recommendations and Supportive Measures for Recovery": row_data.get('recommendations and supportive measures for recovery', '')
-        }
-        storyline = "\n\n".join(f"**{label}:** {value}" for label, value in data_map.items() if value and str(value).strip())
-
+        # Build narrative with orange boxes
+        sections = [
+            ("Key Information", row_data.get('key information', '')),
+            ("Severity", row_data.get('severity', '')),
+            ("Key Drivers", row_data.get('key drivers', '')),
+            ("Impacts & Vulnerability", row_data.get('main impacts, exposure, and vulnerability', '')),
+            ("Multi-Hazard Risks", row_data.get('likelihood of multi-hazard risks', '')),
+            ("Best Practices", row_data.get('best practices for managing this risk', '')),
+            ("Recovery Measures", row_data.get('recommendations and supportive measures for recovery', ''))
+        ]
+        
+        storyline_html = "".join(format_storyline_html(l, v) for l, v in sections)
+
+        # Build graph
         causal_graph_caption = row_data.get('llama graph', '')
         try:
             grp = ast.literal_eval(causal_graph_caption) if causal_graph_caption else []
             graph_html = plot_cgraph_pyvis(grp)
-            iframe = f"<iframe srcdoc='{graph_html}' width='100%' height='650px' style='border:1px solid #eee; border-radius:8px;'></iframe>"
+            iframe = f"<iframe srcdoc='{graph_html}' width='100%' height='750px' style='border:1px solid #eee; border-radius:8px;'></iframe>"
         except:
             iframe = "<div>Invalid graph format.</div>"
 
-        return storyline, iframe
+        return storyline_html, iframe
     return 'No valid data found.', '<div>No graph available.</div>'
 
 # --- GRADIO UI BUILD ---
 
 with gr.Blocks(title="Disaster Storylines Explorer") as interface:
-    # Shortened Description and Zenodo Link
+    # Header Section
     gr.Markdown(
         """
-        ## Disaster Storylines and Causal Knowledge Graphs
-        This database, maintained by **Joint Research Centre (JRC)** Units **E1, F7, and T5**, contains structured narratives and knowledge graphs for over 3,000 global disaster events (EM-DAT). 
-        The content was pre-processed using the **EMM RAG** service and the **Meta-Llama-3-70B-Instruct** model via **GPT@JRC**. 
-        Data and code are available at: [https://doi.org/10.5281/zenodo.18598183](https://doi.org/10.5281/zenodo.18598183).
+        ### Disaster Storylines & Causal Knowledge Graphs Explorer
+        Maintained by **Joint Research Centre (JRC)** Units E1, F7, and T5, this dashboard provides narratives and knowledge graphs for over 3,000 disaster events (EM-DAT). 
+        These records were generated using a **Retrieval-Augmented Generation (RAG)** pipeline on **Europe Media Monitor (EMM)** news using **Meta-Llama-3-70B-Instruct** via **GPT@JRC**. 
+        Graphs visualize simplified causal dynamics restricted to *'causes'* and *'prevents'* relationships. 
+        Data and code are available via **Zenodo**: [https://doi.org/10.5281/zenodo.18598183](https://doi.org/10.5281/zenodo.18598183).
+        
+        **Select a Disaster Type, a Country and an Event ID below to explore the AI-generated content!**
         """
     )
 
+    # 1) Selectors: Full width horizontal row
+    with gr.Row():
+        disaster_type_dropdown = gr.Dropdown(choices=[''], label="1. Disaster Type", scale=1)
+        country_dropdown = gr.Dropdown(choices=[''], label="2. Country", scale=1)
+        row_dropdown = gr.Dropdown(choices=[], label="3. Select Disaster Event ID", interactive=True, scale=1)
+
+    gr.Markdown("---")
+
+    # 2) Main Content: Vertical Split (Narrative on Left, Graph on Right)
     with gr.Row():
-        # Sidebar for Selection
         with gr.Column(scale=1):
-            disaster_type_dropdown = gr.Dropdown(choices=[''], label="1. Disaster Type")
-            country_dropdown = gr.Dropdown(choices=[''], label="2. Country")
-            row_dropdown = gr.Dropdown(choices=[], label="3. Select Disaster Event ID", interactive=True)
-
-        # Main content area
-        with gr.Column(scale=3):
-            with gr.Tabs():
-                with gr.TabItem("Causal Graph"):
-                    graph_box = gr.HTML()
-                with gr.TabItem("AI Storyline"):
-                    story_box = gr.Markdown()
+            gr.Markdown("### 📖 Narrative Storyline")
+            story_box = gr.HTML(value="<div style='color:gray;'>Select an event above to view the structured narrative.</div>")
+            
+        with gr.Column(scale=1):
+            gr.Markdown("### 🕸️ Causal Knowledge Graph")
+            graph_box = gr.HTML(value="<div style='color:gray;'>Select an event above to view the knowledge graph.</div>")
 
     # --- INITIALIZATION AND HANDLERS ---
     def init_app():