Use haddock3-ui bundle + offline second half

sverhoeven · sverhoeven · commit d190682e3800 · 2024-09-20T11:44:42.000+02:00
diff --git a/src/haddock/clis/cli_analyse.py b/src/haddock/clis/cli_analyse.py
@@ -490,7 +490,7 @@ def analyse_step(
             offline=offline,
             )
         tables = clt_table_handler(clt_file, ss_file, is_cleaned)
-        report_generator(boxes, scatters, tables, step)
+        report_generator(boxes, scatters, tables, step, offline)
         # provide a zipped archive of the top ranked structures
         zip_top_ranked(ss_file, cluster_ranking, Path("summary.tgz"))
 
diff --git a/src/haddock/libs/libplots.py b/src/haddock/libs/libplots.py
@@ -936,10 +936,15 @@ def clt_table_handler(clt_file, ss_file, is_cleaned=False):
     return df_merged
 
 
-def _css_styles_for_report():
+def _css_styles_for_report(offline: bool) -> str:
     """
     Generate custom CSS styles for an analysis report.
 
+    Parameters
+    ----------
+    offline : bool
+        If True, the HTML will be generated for offline use.
+
     Returns
     -------
     The CSS styles as a string.
@@ -977,12 +982,15 @@ def _css_styles_for_report():
         background-color: #f2f2f2
     }
     """
-    css_link = "https://esm.sh/@i-vresse/haddock3-ui@~0.2.2/dist/index.css"
+    css_link = "https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui@~0.3.0/dist/index.css"
+    if offline:
+        # TODO copy the css file to the report directory
+        css_link = "../../data/ui/index.css"
     table_css = f' <link href="{css_link}" rel="stylesheet" />'
     return f"{table_css}<style>{custom_css}</style>"
 
 
-def _generate_html_report(step, figures):
+def _generate_html_report(step, figures, offline):
     """
     Generate an HTML report for a specific step of analysis, including figures.
 
@@ -994,27 +1002,31 @@ def _generate_html_report(step, figures):
         A list of figures to include in the HTML body.
         Each figure can be either a string representing a table or a
         plotly.graph_objects.Figure object.
+    offline : bool
+        If True, the HTML will be generated for offline use.
 
     Returns
     -------
     html_report : str
         The generated HTML report as a string.
     """
     html_report = "<!DOCTYPE html><html lang='en'>"
-    html_report += _generate_html_head(step)
-    html_report += _generate_html_body(figures)
+    html_report += _generate_html_head(step, offline)
+    html_report += _generate_html_body(figures, offline)
     html_report += "</html>"
     return html_report
 
 
-def _generate_html_head(step):
+def _generate_html_head(step, offline):
     """
     Generate the HTML head section for an analysis report.
 
     Parameters
     ----------
     step : str
         The step number.
+    offline : bool
+        If True, the HTML will be generated for offline use.
 
     Returns
     -------
@@ -1024,14 +1036,15 @@ def _generate_html_head(step):
     head = "<head>"
     head += f"<title>Analysis report of step {step}</title>"
     head += f"<p class='title'>Analysis report of step {step}</p>"
-    head += _css_styles_for_report()
+    head += _css_styles_for_report(offline)
     head += "</head>"
     return head
 
 
 def _generate_unclustered_table_html(
         table_id: str,
         df: pd.DataFrame,
+        bundle_url: str,
         ) -> str:
     data = df.to_json(orient='records')
     headers = [
@@ -1055,21 +1068,18 @@ def _generate_unclustered_table_html(
             }}
             </script>
             <script type="module">
-            import {{ createRoot }} from "https://esm.sh/react-dom";
-            import {{ createElement }} from "https://esm.sh/react";
-            import {{ StructureTable }} from "https://esm.sh/@i-vresse/haddock3-ui@~0.2.2/dist/table/StructureTable?bundle-deps";
+            import {{ renderClusterTable }} from "{bundle_url}";
 
             const props = JSON.parse(document.getElementById("data{table_id}").text)
 
-            createRoot(document.getElementById('{table_id}')).render(
-                createElement(StructureTable, props)
-            )
+            renderClusterTable(document.getElementById('{table_id}'), props.headers, props.structures)
             </script>"""  # noqa : E501
 
 
 def _generate_clustered_table_html(
         table_id: str,
         df: pd.DataFrame,
+        bundle_url: str,
         ) -> str:
     data = df.to_json(orient='records')
     nr_best_columns = df.filter(like="best").shape[1]
@@ -1105,15 +1115,10 @@ def _generate_clustered_table_html(
             }}
             </script>
             <script type="module">
-            import {{ createRoot }} from "https://esm.sh/react-dom";
-            import {{ createElement }} from "https://esm.sh/react";
-            import {{ ClusterTable }} from "https://esm.sh/@i-vresse/haddock3-ui@~0.2.2/dist/table/ClusterTable?bundle-deps";
-
+            import {{ renderClusterTable }} from "{bundle_url}";
             const props = JSON.parse(document.getElementById("data{table_id}").text)
 
-            createRoot(document.getElementById('{table_id}')).render(
-                createElement(ClusterTable, props)
-            )
+            renderClusterTable(document.getElementById('{table_id}'), props.headers, props.clusters);
             </script>"""  # noqa : E501
 
 
@@ -1127,6 +1132,8 @@ def _generate_html_body(figures: list[Figure], offline: bool = False) -> str:
         A list of figures to include in the HTML body.
         Each figure can be either a string representing a table or a
         plotly.graph_objects.Figure object.
+    offline : bool
+        If True, the HTML will be generated for offline use.
 
     Returns
     -------
@@ -1142,10 +1149,14 @@ def _generate_html_body(figures: list[Figure], offline: bool = False) -> str:
             table_id = f"table{table_index}"
 
             is_unclustered = 'cluster_rank' not in figure
+            bundle_url = "https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui@~0.3.0/dist/report.bundle.js"
+            if offline:
+                # TODO copy the bundle to the run_dir folder
+                bundle_url = "../../data/ui/report.bundle.js"
             if is_unclustered:
-                inner_html = _generate_unclustered_table_html(table_id, figure)
+                inner_html = _generate_unclustered_table_html(table_id, figure, bundle_url)
             else:
-                inner_html = _generate_clustered_table_html(table_id, figure)
+                inner_html = _generate_clustered_table_html(table_id, figure, bundle_url)
         else:  # plots
             inner_json = figure.to_json()
             inner_html = create_html(
@@ -1162,7 +1173,7 @@ def _generate_html_body(figures: list[Figure], offline: bool = False) -> str:
     return body
 
 
-def report_generator(boxes, scatters, tables, step):
+def report_generator(boxes, scatters, tables, step, offline):
     """
     Create a figure include plots and tables.
 
@@ -1177,6 +1188,8 @@ def report_generator(boxes, scatters, tables, step):
         list of scatter plots generated by scatter_plot_handler
     table: list
         a list including tables generated by clt_table_handler
+    offline: bool
+        If True, the HTML will be generated for offline use.
     """
     figures = [tables]
     # Combine scatters
@@ -1191,7 +1204,7 @@ def report_generator(boxes, scatters, tables, step):
     figures.append(report_plots_handler(boxes))
 
     # Write everything to a html file
-    html_report = _generate_html_report(step, figures)
+    html_report = _generate_html_report(step, figures, offline)
     with open("report.html", "w", encoding="utf-8") as report:
         report.write(html_report)
 

Original file line number	Diff line number	Diff line change
`@@ -490,7 +490,7 @@ def analyse_step(`
`490`	`490`	`offline=offline,`
`491`	`491`	`)`
`492`	`492`	`tables = clt_table_handler(clt_file, ss_file, is_cleaned)`
`493`		`- report_generator(boxes, scatters, tables, step)`
	`493`	`+ report_generator(boxes, scatters, tables, step, offline)`
`494`	`494`	`# provide a zipped archive of the top ranked structures`
`495`	`495`	`zip_top_ranked(ss_file, cluster_ranking, Path("summary.tgz"))`
`496`	`496`