Check that report files are unchanged (for now in streamlit)

.github/workflows/cdci.yml

@@ -20,8 +20,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: psf/black@stable
         with:
-          jupyter: true
+          # ! for now (format output files of vuegen for streamlit)
+          src: "./src"  
       - uses: isort/isort-action@v1
+        with:
+          # ! should be removed once all imports are correctly sorted
+          sort-paths: src
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:
@@ -67,6 +71,7 @@ jobs:
         run: |
           cd docs
           vuegen -dir example_data/Earth_microbiome_vuegen_demo_notebook
+          # here we are testing that the generated config from the -dir call works
           vuegen -c example_data/Earth_microbiome_vuegen_demo_notebook/Earth_microbiome_vuegen_demo_notebook_config.yaml
       # repeat for easier inspection on GitHub:
       - name: quarto html report
@@ -104,6 +109,16 @@ jobs:
           cd docs
           vuegen -dir example_data/Earth_microbiome_vuegen_demo_notebook -rt jupyter
           vuegen -c example_data/Earth_microbiome_vuegen_demo_notebook/Earth_microbiome_vuegen_demo_notebook_config.yaml -rt jupyter
+      - name: check for changes in report files
+        run: |
+          # write streamlit report to test folder 
+          vuegen -dir docs/example_data/Basic_example_vuegen_demo_notebook -output_dir tests/report_examples/Basic_example_vuegen_demo_notebook
+          # Check for changes
+          if git diff tests/report_examples | grep .; then
+            echo "Error: One or more protected files have been modified."
+            exit 1
+          fi
+
 
   publish:
     name: Publish package to PyPI

.gitignore

@@ -116,7 +116,8 @@ cython_debug/
 # Temporary files
 logs/
 vuegen/logs/
-streamlit_report/
+./streamlit_report/
+!tests/report_examples
 quarto_report/
 output_docker/
 
@@ -129,4 +130,4 @@ docs/images/Graphical_abstract/
 docs/images/Nfcore_module_figure
 docs/presentations/
 basic_example_vuegen_demo_notebook_config.yaml
-earth_microbiome_vuegen_demo_notebook_config.yaml
+earth_microbiome_vuegen_demo_notebook_config.yaml

src/vuegen/streamlit_reportview.py

@@ -9,7 +9,13 @@
 
 from . import report as r
 from . import table_utils
-from .utils import create_folder, generate_footer, get_relative_file_path, is_url
+from .utils import (
+    create_folder,
+    generate_footer,
+    get_relative_file_path,
+    is_url,
+    sort_imports,
+)
 from .utils.variables import make_valid_identifier
 
 
@@ -368,7 +374,6 @@ def _generate_home_section(
             all_components, subsection_imports, _ = self._combine_components(
                 home_section.components
             )
-
         try:
             # Create folder for the home page
             home_dir_path = Path(output_dir) / "Home"
@@ -381,9 +386,11 @@ def _generate_home_section(
 
             # Create the home page content
             home_content = []
-            home_content.append("import streamlit as st")
-            if subsection_imports:
-                home_content.extend(subsection_imports)
+            subsection_imports.append("import streamlit as st")
+            subsection_imports = set(subsection_imports)
+            subsection_imports, _ = sort_imports(subsection_imports)
+
+            home_content.extend(subsection_imports)
             if self.report.description:
                 home_content.append(
                     self._format_text(text=self.report.description, type="paragraph")
@@ -517,6 +524,8 @@ def _combine_components(self, components: list[dict]) -> tuple[list, list, bool]
                 all_contents.extend(content)
         # remove duplicates
         all_imports = list(set(all_imports))
+        all_imports, setup_statements = sort_imports(all_imports)
+        all_imports.extend(setup_statements)
         return all_contents, all_imports, has_chatbot
 
     def _generate_subsection(self, subsection) -> tuple[List[str], List[str]]:

tests/report_examples/.gitignore

@@ -0,0 +1 @@
+*.html

tests/report_examples/Basic_example_vuegen_demo_notebook/streamlit_report/sections/Dataframes/All_Formats.py

@@ -0,0 +1,146 @@
+from st_aggrid import AgGrid, GridOptionsBuilder
+from vuegen import table_utils
+import pandas as pd
+import streamlit as st
+df_index = 1
+
+st.markdown('''<h3 style='text-align: center; color: #023558;'>All Formats</h3>''', unsafe_allow_html=True)
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Phyla Correlation Network Csv</h4>''', unsafe_allow_html=True)
+df = pd.read_csv('docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/1_phyla_correlation_network_csv.csv')
+
+
+# Displays a DataFrame using AgGrid with configurable options.
+grid_builder = GridOptionsBuilder.from_dataframe(df)
+grid_builder.configure_default_column(editable=True, groupable=True, filter=True)
+grid_builder.configure_side_bar(filters_panel=True, columns_panel=True)
+grid_builder.configure_selection(selection_mode="multiple")
+grid_builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=20)
+grid_options = grid_builder.build()
+
+AgGrid(df, gridOptions=grid_options, enable_enterprise_modules=True)
+
+# Button to download the df
+df_csv = df.to_csv(sep=',', header=True, index=False).encode('utf-8')
+st.download_button(
+    label="Download dataframe as CSV",
+    data=df_csv,
+    file_name=f"dataframe_{df_index}.csv",
+    mime='text/csv',
+    key=f"download_button_{df_index}")
+df_index += 1
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Abundance Table Example Xls</h4>''', unsafe_allow_html=True)
+selected_sheet = 0
+sheet_names = table_utils.get_sheet_names("/home/runner/work/vuegen/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/2_abundance_table_example_xls.xls")
+selected_sheet = st.selectbox("Select a sheet to display", options=sheet_names)
+
+df = pd.read_excel('/home/runner/work/vuegen/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/2_abundance_table_example_xls.xls', sheet_name=selected_sheet)
+
+
+# Displays a DataFrame using AgGrid with configurable options.
+grid_builder = GridOptionsBuilder.from_dataframe(df)
+grid_builder.configure_default_column(editable=True, groupable=True, filter=True)
+grid_builder.configure_side_bar(filters_panel=True, columns_panel=True)
+grid_builder.configure_selection(selection_mode="multiple")
+grid_builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=20)
+grid_options = grid_builder.build()
+
+AgGrid(df, gridOptions=grid_options, enable_enterprise_modules=True)
+
+# Button to download the df
+df_csv = df.to_csv(sep=',', header=True, index=False).encode('utf-8')
+st.download_button(
+    label="Download dataframe as CSV",
+    data=df_csv,
+    file_name=f"dataframe_{df_index}.csv",
+    mime='text/csv',
+    key=f"download_button_{df_index}")
+df_index += 1
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Sample Info Example Txt</h4>''', unsafe_allow_html=True)
+df = pd.read_table('docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/3_sample_info_example_txt.txt')
+
+
+# Displays a DataFrame using AgGrid with configurable options.
+grid_builder = GridOptionsBuilder.from_dataframe(df)
+grid_builder.configure_default_column(editable=True, groupable=True, filter=True)
+grid_builder.configure_side_bar(filters_panel=True, columns_panel=True)
+grid_builder.configure_selection(selection_mode="multiple")
+grid_builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=20)
+grid_options = grid_builder.build()
+
+AgGrid(df, gridOptions=grid_options, enable_enterprise_modules=True)
+
+# Button to download the df
+df_csv = df.to_csv(sep=',', header=True, index=False).encode('utf-8')
+st.download_button(
+    label="Download dataframe as CSV",
+    data=df_csv,
+    file_name=f"dataframe_{df_index}.csv",
+    mime='text/csv',
+    key=f"download_button_{df_index}")
+df_index += 1
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Sample Info Example Parquet</h4>''', unsafe_allow_html=True)
+df = pd.read_parquet('docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/4_sample_info_example_parquet.parquet')
+
+
+# Displays a DataFrame using AgGrid with configurable options.
+grid_builder = GridOptionsBuilder.from_dataframe(df)
+grid_builder.configure_default_column(editable=True, groupable=True, filter=True)
+grid_builder.configure_side_bar(filters_panel=True, columns_panel=True)
+grid_builder.configure_selection(selection_mode="multiple")
+grid_builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=20)
+grid_options = grid_builder.build()
+
+AgGrid(df, gridOptions=grid_options, enable_enterprise_modules=True)
+
+# Button to download the df
+df_csv = df.to_csv(sep=',', header=True, index=False).encode('utf-8')
+st.download_button(
+    label="Download dataframe as CSV",
+    data=df_csv,
+    file_name=f"dataframe_{df_index}.csv",
+    mime='text/csv',
+    key=f"download_button_{df_index}")
+df_index += 1
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Example Xlsx</h4>''', unsafe_allow_html=True)
+selected_sheet = 0
+df = pd.read_excel('/home/runner/work/vuegen/vuegen/docs/example_data/Basic_example_vuegen_demo_notebook/2_Dataframes/1_All_formats/5_example_xlsx.xlsx', sheet_name=selected_sheet)
+
+
+# Displays a DataFrame using AgGrid with configurable options.
+grid_builder = GridOptionsBuilder.from_dataframe(df)
+grid_builder.configure_default_column(editable=True, groupable=True, filter=True)
+grid_builder.configure_side_bar(filters_panel=True, columns_panel=True)
+grid_builder.configure_selection(selection_mode="multiple")
+grid_builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=20)
+grid_options = grid_builder.build()
+
+AgGrid(df, gridOptions=grid_options, enable_enterprise_modules=True)
+
+# Button to download the df
+df_csv = df.to_csv(sep=',', header=True, index=False).encode('utf-8')
+st.download_button(
+    label="Download dataframe as CSV",
+    data=df_csv,
+    file_name=f"dataframe_{df_index}.csv",
+    mime='text/csv',
+    key=f"download_button_{df_index}")
+df_index += 1
+footer = '''<style type="text/css">
+.footer {
+    position: relative;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+</style>
+<footer class="footer">
+    This report was generated with 
+    <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
+        <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="65px">
+    </a>
+    | Copyright 2025 <a href="https://github.com/Multiomics-Analytics-Group" target="_blank">
+        Multiomics Network Analytics Group (MoNA)
+    </a>
+</footer>'''
+
+st.markdown(footer, unsafe_allow_html=True)

tests/report_examples/Basic_example_vuegen_demo_notebook/streamlit_report/sections/Home/Homepage.py

@@ -0,0 +1,30 @@
+import requests
+import streamlit as st
+st.markdown('''<p style='text-align: center; color: #000000;'>A general description of the report.
+</p>''', unsafe_allow_html=True)
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Description</h4>''', unsafe_allow_html=True)
+
+with open('docs/example_data/Basic_example_vuegen_demo_notebook/description.md', 'r') as markdown_file:
+    markdown_content = markdown_file.read()
+
+st.markdown(markdown_content, unsafe_allow_html=True)
+
+footer = '''<style type="text/css">
+.footer {
+    position: relative;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+</style>
+<footer class="footer">
+    This report was generated with 
+    <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
+        <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="65px">
+    </a>
+    | Copyright 2025 <a href="https://github.com/Multiomics-Analytics-Group" target="_blank">
+        Multiomics Network Analytics Group (MoNA)
+    </a>
+</footer>'''
+
+st.markdown(footer, unsafe_allow_html=True)

tests/report_examples/Basic_example_vuegen_demo_notebook/streamlit_report/sections/Html/All_Html.py

@@ -0,0 +1,52 @@
+import requests
+import streamlit as st
+
+st.markdown('''<h3 style='text-align: center; color: #023558;'>All Html</h3>''', unsafe_allow_html=True)
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Plot</h4>''', unsafe_allow_html=True)
+
+with open('docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/1_plot.html', 'r', encoding='utf-8') as html_file:
+    html_content = html_file.read()
+
+st.components.v1.html(html_content, height=600, scrolling=True)
+
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Ckg Network</h4>''', unsafe_allow_html=True)
+
+with open('docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/2_ckg_network.html', 'r') as html_file:
+    html_content = html_file.read()
+
+
+st.markdown(f"<p style='text-align: center; color: black;'> <b>Number of nodes:</b> 33 </p>", unsafe_allow_html=True)
+st.markdown(f"<p style='text-align: center; color: black;'> <b>Number of relationships:</b> 35 </p>", unsafe_allow_html=True)
+
+# Streamlit checkbox for controlling the layout
+control_layout = st.checkbox('Add panel to control layout', value=True)
+net_html_height = 1200 if control_layout else 630
+# Load HTML into HTML component for display on Streamlit
+st.components.v1.html(html_content, height=net_html_height)
+
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Multiqc Report</h4>''', unsafe_allow_html=True)
+
+with open('docs/example_data/Basic_example_vuegen_demo_notebook/4_Html/1_All_html/3_multiqc_report.html', 'r', encoding='utf-8') as html_file:
+    html_content = html_file.read()
+
+st.components.v1.html(html_content, height=600, scrolling=True)
+
+footer = '''<style type="text/css">
+.footer {
+    position: relative;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+</style>
+<footer class="footer">
+    This report was generated with 
+    <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
+        <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="65px">
+    </a>
+    | Copyright 2025 <a href="https://github.com/Multiomics-Analytics-Group" target="_blank">
+        Multiomics Network Analytics Group (MoNA)
+    </a>
+</footer>'''
+
+st.markdown(footer, unsafe_allow_html=True)

tests/report_examples/Basic_example_vuegen_demo_notebook/streamlit_report/sections/Markdown/All_Markdown.py

@@ -0,0 +1,30 @@
+import requests
+import streamlit as st
+
+st.markdown('''<h3 style='text-align: center; color: #023558;'>All Markdown</h3>''', unsafe_allow_html=True)
+st.markdown('''<h4 style='text-align: center; color: #2b8cbe;'>Readme</h4>''', unsafe_allow_html=True)
+
+with open('docs/example_data/Basic_example_vuegen_demo_notebook/5_Markdown/1_All_markdown/README.md', 'r') as markdown_file:
+    markdown_content = markdown_file.read()
+
+st.markdown(markdown_content, unsafe_allow_html=True)
+
+footer = '''<style type="text/css">
+.footer {
+    position: relative;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+</style>
+<footer class="footer">
+    This report was generated with 
+    <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
+        <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="65px">
+    </a>
+    | Copyright 2025 <a href="https://github.com/Multiomics-Analytics-Group" target="_blank">
+        Multiomics Network Analytics Group (MoNA)
+    </a>
+</footer>'''
+
+st.markdown(footer, unsafe_allow_html=True)