✨ make relative outputs and path work better in streamlit

.github/workflows/cdci.yml

@@ -118,6 +118,15 @@ jobs:
             echo "Error: One or more protected files have been modified."
             exit 1
           fi
+      - name: streamlit report based on predefined config file
+        run: |
+          cd docs
+          vuegen -c example_config_files/Basic_example_vuegen_demo_notebook_config.yaml -output_dir ../tests/report_examples/Basic_example_vuegen_demo_notebook_cfg
+          # Check for changes
+          if git diff ../tests/report_examples | grep .; then
+            echo "Error: One or more protected files have been modified."
+            exit 1
+          fi
       - name: check streamlit report files for chatbot API
         run: |
           vuegen -c docs/example_config_files/Chatbot_example_config.yaml -output_dir tests/report_examples/chat_bot
@@ -208,7 +217,7 @@ jobs:
       - name: Build executable
         run: |
           cd gui
-          pyinstaller -n vuegen_gui --onefile --windowed --collect-all pyvis --collect-all streamlit --collect-all st_aggrid --collect-all customtkinter --collect-all quarto_cli --collect-all plotly --collect-all _plotly_utils --collect-all traitlets --collect-all referencing --collect-all rpds --collect-all tenacity --collect-all pandas --collect-all numpy --collect-all matplotlib --collect-all openpyxl --collect-all xlrd --collect-all nbformat --collect-all nbclient --collect-all altair --collect-all itables --collect-all kaleido --collect-all pyarrow --collect-all dataframe_image --collect-all narwhals --collect-all PIL --collect-all vl_convert --collect-all typing-extensions --add-data ../docs/example_data/Basic_example_vuegen_demo_notebook:example_data/Basic_example_vuegen_demo_notebook --add-data ../docs/images/vuegen_logo.png:. app.py
+          pyinstaller -n vuegen_gui --onefile --windowed --collect-all pyvis --collect-all streamlit --collect-all st_aggrid --collect-all customtkinter --collect-all quarto_cli --collect-all plotly --collect-all _plotly_utils --collect-all traitlets --collect-all referencing --collect-all rpds --collect-all tenacity --collect-all pandas --collect-all numpy --collect-all matplotlib --collect-all openpyxl --collect-all xlrd --collect-all nbformat --collect-all nbclient --collect-all altair --collect-all itables --collect-all kaleido --collect-all pyarrow --collect-all dataframe_image --collect-all narwhals --collect-all PIL --collect-all vl_convert --collect-all typing-extensions --add-data ../docs/example_data/Basic_example_vuegen_demo_notebook:example_data/Basic_example_vuegen_demo_notebook --add-data ../docs/images/logo/vuegen_logo.png:. app.py
         # --windowed only for mac, see:
         # https://pyinstaller.org/en/stable/usage.html#building-macos-app-bundles
         # 'Under macOS, PyInstaller always builds a UNIX executable in dist.'

docs/example_config_files/Basic_example_vuegen_demo_notebook_config.yaml

@@ -1,8 +1,8 @@
 report:
   title: Basic Example Vuegen Demo Notebook
   description: A general description of the report.
-  graphical_abstract: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png
-  logo: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png
+  graphical_abstract: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png
+  logo: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png
 sections:
 - title: Plots
   description: This section contains example plots.

docs/example_data/Basic_example_vuegen_demo_notebook/5_Markdown/1_All_markdown/README.md

@@ -1,8 +1,8 @@
 <!-- <div align="center">
-  <img width="300px" src="images/vuegen_logo.svg">
+  <img width="300px" src="images/logo/vuegen_logo.svg">
 </div> -->
 
-![VueGen Logo](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png)
+![VueGen Logo](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png)
 
 <p align="center">
    VueGen is a Python library that automates the creation of scientific reports.

docs/split_readme.py

@@ -3,7 +3,7 @@
 
 # Mapping section titles to their corresponding filenames
 SECTION_MAPPING = {
-    "![VueGen Logo](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg)": "home_page.md",
+    "![VueGen Logo](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/HEAD/docs/images/logo/vuegen_logo.svg)": "home_page.md",
     "About the project": "about.md",
     "Installation": "installation.md",
     "Execution": "execution.md",

docs/vuegen_basic_case_study.ipynb

@@ -273,7 +273,7 @@
    },
    "outputs": [],
    "source": [
-    "vuegen_logo_path = \"https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg\"\n",
+    "vuegen_logo_path = \"https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png\"\n",
     "\n",
     "# Load the YAML file\n",
     "print(\n",
@@ -443,7 +443,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
+   "display_name": "vuegen_py312",
    "language": "python",
    "name": "python3"
   },
@@ -457,7 +457,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.6"
+   "version": "3.12.9"
   }
  },
  "nbformat": 4,

docs/vuegen_basic_case_study_configfile.md

@@ -6,8 +6,8 @@ The [configuration file](https://github.com/Multiomics-Analytics-Group/vuegen/bl
 report:
   title: Basic Example Vuegen Demo Notebook
   description: A general description of the report.
-  graphical_abstract: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png
-  logo: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png
+  graphical_abstract: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png
+  logo: https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png
 sections:
 - title: Plots
   description: This section contains example plots.

gui/Makefile

@@ -39,7 +39,7 @@ bundle:
 	--collect-all vl_convert \
 	--collect-all typing-extensions \
 	--add-data ../docs/example_data/Basic_example_vuegen_demo_notebook:example_data/Basic_example_vuegen_demo_notebook \
-	--add-data ../docs/images/vuegen_logo.png:. \
+	--add-data ../docs/images/logo/vuegen_logo.png:. \
 	app.py
 
 

src/vuegen/streamlit_reportview.py

@@ -699,7 +699,7 @@ def _generate_plot_content(self, plot) -> List[str]:
                         )
                     )
                 else:
-                    fpath = Path(html_plot_file).resolve().relative_to(Path.cwd())
+                    fpath = get_relative_file_path(html_plot_file).as_posix()
                     plot_content.append(
                         textwrap.dedent(
                             f"""

tests/report_examples/Basic_example_vuegen_demo_notebook_cfg/html/quarto_report/quarto_report.qmd

@@ -52,7 +52,7 @@ report_dir = Path().cwd()
 ```
 
 A general description of the report.
-![](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.png){fig-alt= width=90%}
+![](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png){fig-alt= width=90%}
 
 # Plots
 This section contains example plots.

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

@@ -0,0 +1,201 @@
+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(
+    (
+        "<p style='text-align: center; "
+        "color: #000000;'>This subsection contains example dataframes.</p>"
+    ),
+    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('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("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('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('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('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
+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/HEAD/docs/images/logo/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_cfg/streamlit_report/sections/Home/Homepage.py

@@ -0,0 +1,32 @@
+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.image('https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/logo/vuegen_logo.png', use_column_width=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/HEAD/docs/images/logo/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)