Update app.py

app.py

@@ -89,14 +89,28 @@ class NetworkGraphBuilder:
         
         return G
     
-    def create_pyvis_graph(self, G):
-        """Create interactive PyVis visualisation. Returns (iframe_html, standalone_html)"""
+    def create_pyvis_graph(self, G, for_export=False):
+        """Create interactive PyVis visualisation. Returns (iframe_html, standalone_html, stats_dict)"""
         if len(G.nodes) == 0:
-            return None, None
+            return None, None, None
+        
+        # Potato SVG as base64 data URI (Easter egg for Excellent Boiled Potatoes!)
+        potato_svg = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50" height="50">
+            <ellipse cx="50" cy="50" rx="40" ry="30" fill="#C4A484" transform="rotate(-15 50 50)"/>
+            <ellipse cx="35" cy="40" rx="4" ry="3" fill="#8B7355"/>
+            <ellipse cx="55" cy="35" rx="3" ry="4" fill="#8B7355"/>
+            <ellipse cx="65" cy="50" rx="4" ry="3" fill="#8B7355"/>
+            <ellipse cx="45" cy="60" rx="3" ry="4" fill="#8B7355"/>
+            <ellipse cx="30" cy="55" rx="3" ry="2" fill="#8B7355"/>
+        </svg>'''
+        potato_data_uri = "data:image/svg+xml;base64," + base64.b64encode(potato_svg.encode()).decode()
+        
+        # Set height based on whether this is for export
+        graph_height = "800px" if for_export else "600px"
         
         # Create PyVis network with dark theme
         net = Network(
-            height="600px",
+            height=graph_height,
             width="100%",
             bgcolor="#1a1a2e",
             font_color="white",
@@ -190,14 +204,28 @@ class NetworkGraphBuilder:
             
             title = '\n'.join(title_lines)
             
-            net.add_node(
-                node,
-                label=node,
-                color=colour,
-                size=size,
-                title=title,
-                font={'size': 18, 'color': 'white', 'strokeWidth': 3, 'strokeColor': '#1a1a2e'}
-            )
+            # Check if this is a potato node (Easter egg!)
+            is_potato = 'potato' in node.lower()
+            
+            if is_potato:
+                net.add_node(
+                    node,
+                    label=node,
+                    shape="image",
+                    image=potato_data_uri,
+                    size=size + 10,
+                    title=title,
+                    font={'size': 18, 'color': 'white', 'strokeWidth': 3, 'strokeColor': '#1a1a2e'}
+                )
+            else:
+                net.add_node(
+                    node,
+                    label=node,
+                    color=colour,
+                    size=size,
+                    title=title,
+                    font={'size': 18, 'color': 'white', 'strokeWidth': 3, 'strokeColor': '#1a1a2e'}
+                )
         
         # Add edges with relationship labels
         for edge in G.edges(data=True):
@@ -218,6 +246,15 @@ class NetworkGraphBuilder:
         # Store standalone HTML for export
         standalone_html = html
         
+        # Calculate stats for export
+        stats_dict = {
+            'nodes': G.number_of_nodes(),
+            'edges': G.number_of_edges(),
+            'density': nx.density(G) if len(G.edges) > 0 else 0,
+            'avg_degree': sum(dict(G.degree()).values()) / G.number_of_nodes() if G.number_of_nodes() > 0 else 0,
+            'top_nodes': sorted(dict(G.degree()).items(), key=lambda x: x[1], reverse=True)[:3] if G.number_of_nodes() > 0 else []
+        }
+        
         # Encode as base64 data URI for iframe src
         html_bytes = html.encode('utf-8')
         b64_html = base64.b64encode(html_bytes).decode('utf-8')
@@ -232,7 +269,7 @@ class NetworkGraphBuilder:
         ></iframe>
         '''
         
-        return iframe_html, standalone_html
+        return iframe_html, standalone_html, stats_dict
 
 
 def collect_entities_from_records(
@@ -434,7 +471,7 @@ def generate_network_graph(
             return empty_html, "❌ **No entities to display.** Please enter entities in Step 1 first."
         
         # Create visualisation
-        graph_html, standalone_html = builder.create_pyvis_graph(G)
+        graph_html, standalone_html, stats_dict = builder.create_pyvis_graph(G)
         
         # Create statistics with colour legend included
         stats_html = f'''
@@ -616,11 +653,175 @@ def export_network_graph(
         if len(G.nodes) == 0:
             return None
         
-        # Create visualisation
-        _, standalone_html = builder.create_pyvis_graph(G)
+        # Create visualisation with export flag for larger size
+        _, standalone_html, stats_dict = builder.create_pyvis_graph(G, for_export=True)
         
-        # Save standalone HTML to a temporary file for download
+        # Create enhanced HTML with legend and statistics
         if standalone_html:
+            # Build statistics HTML
+            stats_content = f'''
+            <div style="margin-bottom: 20px;">
+                <h3 style="margin: 0 0 15px 0; color: #333;">📈 Network Statistics</h3>
+                <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                    <tr style="background: #f8f9fa;">
+                        <td style="padding: 12px; border-bottom: 1px solid #eee;"><strong>Nodes (Entities)</strong></td>
+                        <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: right;">{stats_dict['nodes']}</td>
+                    </tr>
+                    <tr>
+                        <td style="padding: 12px; border-bottom: 1px solid #eee;"><strong>Edges (Relationships)</strong></td>
+                        <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: right;">{stats_dict['edges']}</td>
+                    </tr>
+                    <tr style="background: #f8f9fa;">
+                        <td style="padding: 12px; border-bottom: 1px solid #eee;"><strong>Density</strong></td>
+                        <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: right;">{stats_dict['density']:.3f}</td>
+                    </tr>
+                    <tr>
+                        <td style="padding: 12px;"><strong>Avg. Connections</strong></td>
+                        <td style="padding: 12px; text-align: right;">{stats_dict['avg_degree']:.2f}</td>
+                    </tr>
+                </table>
+            '''
+            
+            if stats_dict['top_nodes']:
+                stats_content += '''
+                <div style="margin-top: 15px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                    <strong>Most Connected:</strong>
+                    <ul style="margin: 10px 0 0 0; padding-left: 20px;">
+                '''
+                for node, degree in stats_dict['top_nodes']:
+                    stats_content += f'<li>{node}: {degree} connections</li>'
+                stats_content += '</ul></div>'
+            
+            stats_content += '</div>'
+            
+            # Build legend HTML
+            legend_html = f'''
+            <div style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 20px; border-radius: 10px; margin-bottom: 20px;">
+                <h3 style="color: white; margin: 0 0 15px 0; font-size: 16px;">🎨 Entity Colour Legend</h3>
+                <div style="display: flex; flex-wrap: wrap; gap: 20px;">
+                    <span style="display: flex; align-items: center; gap: 8px; color: white;">
+                        <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['PERSON']}; display: inline-block; border: 2px solid white;"></span>
+                        Person
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 8px; color: white;">
+                        <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['LOCATION']}; display: inline-block; border: 2px solid white;"></span>
+                        Location
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 8px; color: white;">
+                        <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['EVENT']}; display: inline-block; border: 2px solid white;"></span>
+                        Event
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 8px; color: white;">
+                        <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['ORGANIZATION']}; display: inline-block; border: 2px solid white;"></span>
+                        Organisation
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 8px; color: white;">
+                        <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['DATE']}; display: inline-block; border: 2px solid white;"></span>
+                        Date
+                    </span>
+                </div>
+                <p style="color: white; margin: 15px 0 0 0; font-size: 13px;">
+                    🖱️ <strong style="color: white;">Interaction:</strong> Drag nodes • Scroll to zoom • Hover for details
+                </p>
+            </div>
+            '''
+            
+            # Encode the graph HTML as base64 for the iframe
+            graph_b64 = base64.b64encode(standalone_html.encode('utf-8')).decode('utf-8')
+            
+            # Create enhanced HTML wrapper
+            enhanced_html = f'''<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Network Graph - Basic Network Explorer</title>
+    <style>
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }}
+        .container {{
+            max-width: 1600px;
+            margin: 0 auto;
+        }}
+        .header {{
+            text-align: center;
+            margin-bottom: 20px;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 12px;
+            color: white;
+        }}
+        .header h1 {{
+            margin: 0 0 10px 0;
+        }}
+        .header p {{
+            margin: 0;
+            opacity: 0.9;
+        }}
+        .content {{
+            display: flex;
+            gap: 20px;
+        }}
+        .graph-container {{
+            flex: 3;
+            background: white;
+            border-radius: 12px;
+            padding: 15px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }}
+        .sidebar {{
+            flex: 1;
+            min-width: 300px;
+        }}
+        .graph-frame {{
+            width: 100%;
+            height: 800px;
+            border: 2px solid #333;
+            border-radius: 8px;
+            background-color: #1a1a2e;
+        }}
+        .footer {{
+            text-align: center;
+            margin-top: 20px;
+            padding: 15px;
+            color: #666;
+            font-size: 13px;
+        }}
+        @media (max-width: 1000px) {{
+            .content {{
+                flex-direction: column;
+            }}
+            .sidebar {{
+                min-width: 100%;
+            }}
+        }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🕸️ Network Graph</h1>
+            <p>Created with Basic Network Explorer</p>
+        </div>
+        <div class="content">
+            <div class="graph-container">
+                <iframe class="graph-frame" src="data:text/html;base64,{graph_b64}"></iframe>
+            </div>
+            <div class="sidebar">
+                {stats_content}
+                {legend_html}
+            </div>
+        </div>
+        <div class="footer">
+            <p>Exported from <strong>Basic Network Explorer</strong> — Bodleian Libraries (Oxford) Sassoon Research Fellowship</p>
+        </div>
+    </div>
+</body>
+</html>'''
+            
             export_file = tempfile.NamedTemporaryFile(
                 mode='w',
                 suffix='.html',
@@ -628,7 +829,7 @@ def export_network_graph(
                 delete=False,
                 encoding='utf-8'
             )
-            export_file.write(standalone_html)
+            export_file.write(enhanced_html)
             export_file.close()
             return export_file.name