From c3c506492659e1c1c1b054aadeee5720617499c2 Mon Sep 17 00:00:00 2001 From: sayalaruano Date: Fri, 21 Mar 2025 08:57:29 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20add=20code=20to=20han?= =?UTF-8?q?dle=20plotly=20plots=20generated=20with=20R=20in=20streamlit=20?= =?UTF-8?q?and=20quarto=20reports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...c_example_vuegen_demo_notebook_config.yaml | 171 ++++++++++++++++++ .../1_Interactive_plots/6_plotly_plot_R.json | 81 +++++++++ src/vuegen/quarto_reportview.py | 21 ++- src/vuegen/streamlit_reportview.py | 10 +- 4 files changed, 275 insertions(+), 8 deletions(-) create mode 100644 basic_example_vuegen_demo_notebook_config.yaml create mode 100644 docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json diff --git a/basic_example_vuegen_demo_notebook_config.yaml b/basic_example_vuegen_demo_notebook_config.yaml new file mode 100644 index 0000000..419cef5 --- /dev/null +++ b/basic_example_vuegen_demo_notebook_config.yaml @@ -0,0 +1,171 @@ +report: + title: Basic Example Vuegen Demo Notebook + description: 'A general description of the report. + + ' + graphical_abstract: '' + logo: '' +sections: +- title: Plots + description: '' + subsections: + - title: Interactive Plots + description: 'Optional description for section. + + ' + components: + - title: Top Species Plot By Biome Plotly + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/1_top_species_plot_by_biome_plotly.json + description: '' + caption: '' + component_type: plot + plot_type: plotly + - title: Multiline Plot Altair + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/2_multiline_plot_altair.json + description: '' + caption: '' + component_type: plot + plot_type: altair + - title: Pie Plot Countries Plotly + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/3_pie_plot_countries_plotly.json + description: '' + caption: '' + component_type: plot + plot_type: plotly + - title: Pie Plots Biomes Plotly + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/4_pie_plots_biomes_plotly.json + description: '' + caption: '' + component_type: plot + plot_type: plotly + - title: Saline Metagenomics Samples Map Altair + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/5_saline_metagenomics_samples_map_altair.json + description: '' + caption: '' + component_type: plot + plot_type: altair + - title: Plotly Plot R + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json + description: '' + caption: '' + component_type: plot + plot_type: plotly + - title: Description + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/description.md + description: '' + caption: '' + component_type: markdown + - title: Static Plots + description: '' + components: + - title: Number Samples Per Study + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/1_number_samples_per_study.png + description: '' + caption: '' + component_type: plot + plot_type: static + - title: Animal Metagenomics Samples Map + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/2_animal_metagenomics_samples_map.png + description: '' + caption: '' + component_type: plot + plot_type: static + - title: Alpha Diversity Host Associated Samples + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/3_alpha_diversity_host_associated_samples.png + description: '' + caption: '' + component_type: plot + plot_type: static +- title: Dataframes + description: '' + subsections: + - title: All Formats + description: '' + components: + - title: Phyla Correlation Network Csv + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/1_phyla_correlation_network_csv.csv + description: '' + caption: '' + component_type: dataframe + file_format: csv + delimiter: ',' + - title: Abundance Table Example Xls + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/2_abundance_table_example_xls.xls + description: '' + caption: '' + component_type: dataframe + file_format: xls + - title: Sample Info Example Txt + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/3_sample_info_example_txt.txt + description: '' + caption: '' + component_type: dataframe + file_format: txt + delimiter: \t + - title: Sample Info Example Parquet + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/4_sample_info_example_parquet.parquet + description: '' + caption: '' + component_type: dataframe + file_format: parquet +- title: Networks + description: '' + subsections: + - title: Interactive Networks + description: 'Optional description for subsection. + + ' + components: + - title: Man Example + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/1_Interactive_networks/1_man_example.graphml + description: '' + caption: '' + component_type: plot + plot_type: interactive_network + - title: Description + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/1_Interactive_networks/description.md + description: '' + caption: '' + component_type: markdown + - title: Static Networks + description: '' + components: + - title: Phyla Correlation Network + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/2_Static_networks/1_phyla_correlation_network.png + description: '' + caption: '' + component_type: plot + plot_type: static +- title: Html + description: '' + subsections: + - title: All Html + description: '' + components: + - title: Plot + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/1_plot.html + description: '' + caption: '' + component_type: html + - title: Ckg Network + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/2_ckg_network.html + description: '' + caption: '' + component_type: plot + plot_type: interactive_network + - title: Multiqc Report + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/3_multiqc_report.html + description: '' + caption: '' + component_type: html +- title: Markdown + description: '' + subsections: + - title: All Markdown + description: '' + components: + - title: Readme + file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/5_Markdown/1_All_markdown/README.md + description: '' + caption: '' + component_type: markdown diff --git a/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json b/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json new file mode 100644 index 0000000..ab2989b --- /dev/null +++ b/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json @@ -0,0 +1,81 @@ +{ + "visdat": { + "ac2421aa47": ["function () ", "plotlyVisDat"] + }, + "cur_data": "ac2421aa47", + "attrs": { + "ac2421aa47": { + "x": {}, + "y": {}, + "mode": "markers", + "alpha_stroke": 1, + "sizes": [10, 100], + "spans": [1, 20], + "type": "scatter" + } + }, + "layout": { + "margin": { + "b": 40, + "l": 60, + "t": 25, + "r": 10 + }, + "xaxis": { + "domain": [0, 1], + "automargin": true, + "title": "mpg" + }, + "yaxis": { + "domain": [0, 1], + "automargin": true, + "title": "hp" + }, + "hovermode": "closest", + "showlegend": false + }, + "source": "A", + "config": { + "modeBarButtonsToAdd": ["hoverclosest", "hovercompare"], + "showSendToCloud": false + }, + "data": [ + { + "x": [21, 21, 22.800000000000001, 21.399999999999999, 18.699999999999999, 18.100000000000001, 14.300000000000001, 24.399999999999999, 22.800000000000001, 19.199999999999999, 17.800000000000001, 16.399999999999999, 17.300000000000001, 15.199999999999999, 10.4, 10.4, 14.699999999999999, 32.399999999999999, 30.399999999999999, 33.899999999999999, 21.5, 15.5, 15.199999999999999, 13.300000000000001, 19.199999999999999, 27.300000000000001, 26, 30.399999999999999, 15.800000000000001, 19.699999999999999, 15, 21.399999999999999], + "y": [110, 110, 93, 110, 175, 105, 245, 62, 95, 123, 123, 180, 180, 180, 205, 215, 230, 66, 52, 65, 97, 150, 150, 245, 175, 66, 91, 113, 264, 175, 335, 109], + "mode": "markers", + "type": "scatter", + "marker": { + "color": "rgba(31,119,180,1)", + "line": { + "color": "rgba(31,119,180,1)" + } + }, + "error_y": { + "color": "rgba(31,119,180,1)" + }, + "error_x": { + "color": "rgba(31,119,180,1)" + }, + "line": { + "color": "rgba(31,119,180,1)" + }, + "xaxis": "x", + "yaxis": "y", + "frame": null + } + ], + "highlight": { + "on": "plotly_click", + "persistent": false, + "dynamic": false, + "selectize": false, + "opacityDim": 0.20000000000000001, + "selected": { + "opacity": 1 + }, + "debounce": 0 + }, + "shinyEvents": ["plotly_hover", "plotly_click", "plotly_selected", "plotly_relayout", "plotly_brushed", "plotly_brushing", "plotly_clickannotation", "plotly_doubleclick", "plotly_deselect", "plotly_afterplot", "plotly_sunburstclick"], + "base_url": "https://plot.ly" +} diff --git a/src/vuegen/quarto_reportview.py b/src/vuegen/quarto_reportview.py index b0aee2c..784f8f4 100644 --- a/src/vuegen/quarto_reportview.py +++ b/src/vuegen/quarto_reportview.py @@ -571,14 +571,25 @@ def _generate_plot_code(self, plot, output_file="") -> str: else: # If it's a local file plot_code += f""" with open('{(Path("..") / plot.file_path).as_posix()}', 'r') as plot_file: - plot_json = plot_file.read()\n""" + plot_json = json.load(plot_file)\n""" # Add specific code for each visualization tool if plot.plot_type == r.PlotType.PLOTLY: plot_code += """ -fig_plotly = pio.from_json(plot_json) +# Keep only 'data' and 'layout' sections +plot_json = {key: plot_json[key] for key in plot_json if key in ['data', 'layout']}\n +# Remove 'frame' section in 'data' +plot_json['data'] = [{k: v for k, v in entry.items() if k != 'frame'} for entry in plot_json.get('data', [])]\n +# Convert JSON to string +plot_json_str = json.dumps(plot_json)\n +# Create the plotly plot +fig_plotly = pio.from_json(plot_json_str) fig_plotly.update_layout(width=950, height=500)\n""" elif plot.plot_type == r.PlotType.ALTAIR: - plot_code += """fig_altair = alt.Chart.from_json(plot_json).properties(width=900, height=400)""" + plot_code += """ +# Convert JSON to string +plot_json_str = json.dumps(plot_json)\n +# Create the plotly plot +fig_altair = alt.Chart.from_json(plot_json_str).properties(width=900, height=400)\n""" elif plot.plot_type == r.PlotType.INTERACTIVE_NETWORK: # Generate the HTML embedding for interactive networks if is_url(plot.file_path) and plot.file_path.endswith(".html"): @@ -866,8 +877,8 @@ def _generate_component_imports(self, component: r.Component) -> List[str]: # Dictionary to hold the imports for each component type components_imports = { "plot": { - r.PlotType.ALTAIR: ["import altair as alt", "import requests"], - r.PlotType.PLOTLY: ["import plotly.io as pio", "import requests"], + r.PlotType.ALTAIR: ["import altair as alt", "import requests", "import json"], + r.PlotType.PLOTLY: ["import plotly.io as pio", "import requests", "import json"], }, "dataframe": [ "import pandas as pd", diff --git a/src/vuegen/streamlit_reportview.py b/src/vuegen/streamlit_reportview.py index 63f7553..74d5d24 100644 --- a/src/vuegen/streamlit_reportview.py +++ b/src/vuegen/streamlit_reportview.py @@ -570,7 +570,13 @@ def _generate_plot_code(self, plot) -> str: # Add specific code for each visualization tool if plot.plot_type == r.PlotType.PLOTLY: - plot_code += "st.plotly_chart(plot_json, use_container_width=True)\n" + plot_code += """ +# Keep only 'data' and 'layout' sections +plot_json = {key: plot_json[key] for key in plot_json if key in ['data', 'layout']} + +# Remove 'frame' section in 'data' +plot_json['data'] = [{k: v for k, v in entry.items() if k != 'frame'} for entry in plot_json.get('data', [])] +st.plotly_chart(plot_json, use_container_width=True)\n""" elif plot.plot_type == r.PlotType.ALTAIR: plot_code += """ @@ -987,5 +993,3 @@ def _generate_component_imports(self, component: r.Component) -> List[str]: # Return the list of import statements return component_imports - - return component_imports From df82bc9621dd40b158bd3c8516ec5f545fee679e Mon Sep 17 00:00:00 2001 From: sayalaruano Date: Fri, 21 Mar 2025 09:02:36 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20delete=20config=20f?= =?UTF-8?q?ile=20and=20format=20code=20with=20black?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...c_example_vuegen_demo_notebook_config.yaml | 171 ------------------ src/vuegen/quarto_reportview.py | 12 +- 2 files changed, 10 insertions(+), 173 deletions(-) delete mode 100644 basic_example_vuegen_demo_notebook_config.yaml diff --git a/basic_example_vuegen_demo_notebook_config.yaml b/basic_example_vuegen_demo_notebook_config.yaml deleted file mode 100644 index 419cef5..0000000 --- a/basic_example_vuegen_demo_notebook_config.yaml +++ /dev/null @@ -1,171 +0,0 @@ -report: - title: Basic Example Vuegen Demo Notebook - description: 'A general description of the report. - - ' - graphical_abstract: '' - logo: '' -sections: -- title: Plots - description: '' - subsections: - - title: Interactive Plots - description: 'Optional description for section. - - ' - components: - - title: Top Species Plot By Biome Plotly - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/1_top_species_plot_by_biome_plotly.json - description: '' - caption: '' - component_type: plot - plot_type: plotly - - title: Multiline Plot Altair - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/2_multiline_plot_altair.json - description: '' - caption: '' - component_type: plot - plot_type: altair - - title: Pie Plot Countries Plotly - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/3_pie_plot_countries_plotly.json - description: '' - caption: '' - component_type: plot - plot_type: plotly - - title: Pie Plots Biomes Plotly - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/4_pie_plots_biomes_plotly.json - description: '' - caption: '' - component_type: plot - plot_type: plotly - - title: Saline Metagenomics Samples Map Altair - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/5_saline_metagenomics_samples_map_altair.json - description: '' - caption: '' - component_type: plot - plot_type: altair - - title: Plotly Plot R - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/6_plotly_plot_R.json - description: '' - caption: '' - component_type: plot - plot_type: plotly - - title: Description - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/1_Interactive_plots/description.md - description: '' - caption: '' - component_type: markdown - - title: Static Plots - description: '' - components: - - title: Number Samples Per Study - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/1_number_samples_per_study.png - description: '' - caption: '' - component_type: plot - plot_type: static - - title: Animal Metagenomics Samples Map - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/2_animal_metagenomics_samples_map.png - description: '' - caption: '' - component_type: plot - plot_type: static - - title: Alpha Diversity Host Associated Samples - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/1_Plots/2_Static_plots/3_alpha_diversity_host_associated_samples.png - description: '' - caption: '' - component_type: plot - plot_type: static -- title: Dataframes - description: '' - subsections: - - title: All Formats - description: '' - components: - - title: Phyla Correlation Network Csv - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/1_phyla_correlation_network_csv.csv - description: '' - caption: '' - component_type: dataframe - file_format: csv - delimiter: ',' - - title: Abundance Table Example Xls - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/2_abundance_table_example_xls.xls - description: '' - caption: '' - component_type: dataframe - file_format: xls - - title: Sample Info Example Txt - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/3_sample_info_example_txt.txt - description: '' - caption: '' - component_type: dataframe - file_format: txt - delimiter: \t - - title: Sample Info Example Parquet - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/4_sample_info_example_parquet.parquet - description: '' - caption: '' - component_type: dataframe - file_format: parquet -- title: Networks - description: '' - subsections: - - title: Interactive Networks - description: 'Optional description for subsection. - - ' - components: - - title: Man Example - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/1_Interactive_networks/1_man_example.graphml - description: '' - caption: '' - component_type: plot - plot_type: interactive_network - - title: Description - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/1_Interactive_networks/description.md - description: '' - caption: '' - component_type: markdown - - title: Static Networks - description: '' - components: - - title: Phyla Correlation Network - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/3_Networks/2_Static_networks/1_phyla_correlation_network.png - description: '' - caption: '' - component_type: plot - plot_type: static -- title: Html - description: '' - subsections: - - title: All Html - description: '' - components: - - title: Plot - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/1_plot.html - description: '' - caption: '' - component_type: html - - title: Ckg Network - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/2_ckg_network.html - description: '' - caption: '' - component_type: plot - plot_type: interactive_network - - title: Multiqc Report - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/3_multiqc_report.html - description: '' - caption: '' - component_type: html -- title: Markdown - description: '' - subsections: - - title: All Markdown - description: '' - components: - - title: Readme - file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/5_Markdown/1_All_markdown/README.md - description: '' - caption: '' - component_type: markdown diff --git a/src/vuegen/quarto_reportview.py b/src/vuegen/quarto_reportview.py index 784f8f4..c7083e1 100644 --- a/src/vuegen/quarto_reportview.py +++ b/src/vuegen/quarto_reportview.py @@ -877,8 +877,16 @@ def _generate_component_imports(self, component: r.Component) -> List[str]: # Dictionary to hold the imports for each component type components_imports = { "plot": { - r.PlotType.ALTAIR: ["import altair as alt", "import requests", "import json"], - r.PlotType.PLOTLY: ["import plotly.io as pio", "import requests", "import json"], + r.PlotType.ALTAIR: [ + "import altair as alt", + "import requests", + "import json", + ], + r.PlotType.PLOTLY: [ + "import plotly.io as pio", + "import requests", + "import json", + ], }, "dataframe": [ "import pandas as pd",