feat: NetworkX in Plotly Dash

src/aki_prj23_transparenzregister/ui/pages/home.py

@@ -1,13 +1,14 @@
 """Content of home page."""
 import dash
-from dash import html
-import pandas as pd
 import networkx as nx
+import pandas as pd
 import plotly.graph_objects as go
-from dash import Dash, Input, Output, dcc, html, callback, dash_table
-from aki_prj23_transparenzregister.config.config_providers import JsonFileConfigProvider
-from aki_prj23_transparenzregister.utils.sql import connector, entities
-from aki_prj23_transparenzregister.utils.networkx.networkx_data import find_top_companies, find_all_company_relations
+from dash import Input, Output, callback, html
+
+from aki_prj23_transparenzregister.utils.networkx.networkx_data import (
+    find_all_company_relations,
+    find_top_companies,
+)
 
 dash.register_page(
     __name__,
@@ -21,6 +22,7 @@ dash.register_page(
     ],
 )
 
+
 # Plotly figure
 def networkGraph(EGDE_VAR: None) -> go.Figure:
     # find_all_company_relations()
@@ -97,7 +99,6 @@ def networkGraph(EGDE_VAR: None) -> go.Figure:
     measure_vector = {}
     network_metrics_df = pd.DataFrame()
 
-    
     measure_vector = nx.eigenvector_centrality(network_graph)
     network_metrics_df["eigenvector"] = measure_vector.values()
 
@@ -120,31 +121,43 @@ def networkGraph(EGDE_VAR: None) -> go.Figure:
     # figure
     return go.Figure(data=[edge_trace, node_trace], layout=layout)
 
-df = find_top_companies()
-layout = html.Div(
 
-    children = html.Div(
+df = find_top_companies()
+with open("src/aki_prj23_transparenzregister/ui/assets/network_graph.html") as file:
+    html_content = file.read()
+
+
+layout = html.Div(
     children=[
-            html.Div(
-                className="top_companytable_style",
-                children=[
-                    html.Title(title="Top Ten Unternehmen", style={"align": "mid"}),
-                    dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])
-                ]
-            ),
-            html.Div(
-                className="networkx_style",
-                children=[
-                    html.Header(title="Social Graph"),
-                    dcc.Dropdown(['eigenvector', 'degree', 'betweeness', 'closeness'], 'eigenvector', id='demo-dropdown'),
-                    "Text",
-                    dcc.Input(id="EGDE_VAR", type="text", value="K", debounce=True),
-                    # dcc.Dropdown(['eigenvector', 'degree', 'betweeness', 'closeness'], 'eigenvector', id='metric-dropdown'),                    
-                    dcc.Graph(id="my-graph"),
-                    ]
+        # NOTE lib dir created by NetworkX has to be placed in assets
+        html.Iframe(
+            src="assets/network_graph.html",
+            style={"height": "100vh", "width": "100vw"},
+            allow="*",
         )
     ]
-    )
+    # children = html.Div(
+    #     children=[
+    #         html.Div(
+    #             className="top_companytable_style",
+    #             children=[
+    #                 html.Title(title="Top Ten Unternehmen", style={"align": "mid"}),
+    #                 dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])
+    #             ]
+    #         ),
+    #         html.Div(
+    #             className="networkx_style",
+    #             children=[
+    #                 html.Header(title="Social Graph"),
+    #                 dcc.Dropdown(['eigenvector', 'degree', 'betweeness', 'closeness'], 'eigenvector', id='demo-dropdown'),
+    #                 "Text",
+    #                 dcc.Input(id="EGDE_VAR", type="text", value="K", debounce=True),
+    #                 # dcc.Dropdown(['eigenvector', 'degree', 'betweeness', 'closeness'], 'eigenvector', id='metric-dropdown'),
+    #                 dcc.Graph(id="my-graph"),
+    #                 ]
+    #         )
+    #     ]
+    # )
 )