resdesign pages to match v3 + PR feedback

data_explorer/app/.streamlit/pages.toml

@@ -4,26 +4,17 @@ name = "General Overview"
 icon = "🏠"
 
 [[pages]]
-path = "pages/dataset_explorer.py"
+path = "pages/dataset.py"
 name = "Dataset Explorer"
 icon = "📊"
 
-[[pages]]
-path = "pages/global_value_search.py"
-name = "Global Value Search"
-icon = "🔎"
-
-[[pages]]
-path = "pages/compare_runs.py"
-name = "Compare Runs"
-icon = "🔁"
 
 [[pages]]
-path = "pages/image_gallery.py"
+path = "pages/images.py"
 name = "Image Gallery"
 icon = "🖼️"
 
 [[pages]]
-path = "pages/numeric_analysis.py"
+path = "pages/statistics.py"
 name = "Numerical Analysis"
 icon = "📈"

data_explorer/app/interfaces/common_interface.py

@@ -8,6 +8,7 @@
 import streamlit as st
 from config import SESSION_STATE_VARIABLES
 from interfaces.utils import get_default_index
+from streamlit_extras.app_logo import add_logo
 
 LOGGER = logging.getLogger(__name__)
 
@@ -54,7 +55,7 @@ def initialize(self):
         self._get_base_path()
 
 
-class MainSideBar:
+class MainInterface:
     """Abstract app class for the data explorer. The app class is responsible for
     initializing the state variables, setting up the sidebar and main page of the app,
     and providing a method to setup the main page content.
@@ -110,11 +111,26 @@ def _select_run():
         st.session_state["run"] = selected_run
         st.session_state["run_path"] = selected_run_path
 
-    def create_common_sidebar(self):
-        """Sets up the Streamlit app's sidebar with common elements."""
+    def create_common_interface(self):
+        """Sets up the Streamlit app's main interface with common elements."""
+        add_logo("content/fondant_logo.png")
+
         with st.sidebar:
+            # Increase the width of the sidebar to accomodate logo
+            st.markdown(
+                """
+                <style>
+                    section[data-testid="stSidebar"] {
+                        width: 350px !important;
+                    }
+                </style>
+                """,
+                unsafe_allow_html=True,
+            )
             self._display_base_info()
+
+        cols = st.columns(2)
+        with cols[0]:
             self._select_pipeline()
+        with cols[1]:
             self._select_run()
-            st.markdown("""---""")
-            st.image("content/fondant_banner.svg", width=250)

data_explorer/app/interfaces/dataset_interface.py

@@ -6,11 +6,11 @@
 import dask.dataframe as dd
 import streamlit as st
 from fondant.core.manifest import Manifest
-from interfaces.common_interface import MainSideBar
+from interfaces.common_interface import MainInterface
 from interfaces.utils import get_default_index
 
 
-class DatasetLoaderApp(MainSideBar):
+class DatasetLoaderApp(MainInterface):
     def __init__(self):
         super().__init__()
 
@@ -35,17 +35,25 @@ def _select_component():
 
         return selected_component_path
 
-    @staticmethod
-    def _get_manifest_fields_and_subset(component_path: str):
+    def _get_manifest_fields_and_subset(self):
         """Get fields and subset from manifest and store them in session state."""
-        manifest_path = os.path.join(component_path, "manifest.json")
-        manifest = Manifest.from_file(manifest_path)
+        cols = st.columns(3)
 
+        with cols[0]:
+            selected_component_path = self._select_component()
+
+        manifest_path = os.path.join(selected_component_path, "manifest.json")
+        manifest = Manifest.from_file(manifest_path)
         subsets = manifest.subsets.keys()
-        subset = st.selectbox("Subset", subsets)
+
+        with cols[1]:
+            subset = st.selectbox("Select subset", subsets)
 
         fields = manifest.subsets[subset].fields
-        fields = st.multiselect("Fields", fields, default=fields)
+
+        with cols[2]:
+            fields = st.multiselect("Fields", fields, default=fields)
+
         field_types = {
             f"{field}": manifest.subsets[subset].fields[field].type.name
             for field in fields
@@ -117,8 +125,7 @@ def create_loader_widget(self):
         Returns:
             Dataframe and fields
         """
-        component_path = self._select_component()
-        manifest, subset, fields = self._get_manifest_fields_and_subset(component_path)
+        manifest, subset, fields = self._get_manifest_fields_and_subset()
         subset_path = self._get_subset_path(manifest, subset)
         df = self._load_dask_dataframe(subset_path, fields)
         partition = self._get_partition_to_load(df)

data_explorer/app/main.py

@@ -4,7 +4,7 @@
 
 import dask
 import streamlit as st
-from interfaces.common_interface import MainSideBar
+from interfaces.common_interface import MainInterface
 from st_pages import show_pages_from_config
 
 LOGGER = logging.getLogger(__name__)
@@ -14,15 +14,15 @@
 dask.config.set({"dataframe.convert-string": False})
 
 
-class PipelineOverviewApp(MainSideBar):
+class PipelineOverviewApp(MainInterface):
     def __init__(self):
         super().__init__()
 
 
 if __name__ == "__main__":
     app = PipelineOverviewApp()
 
-    app.create_common_sidebar()
+    app.create_common_interface()
 
     # Show streamlit page from pages.toml config file
     show_pages_from_config()

data_explorer/app/pages/dataset_explorer.py → data_explorer/app/pages/dataset.py

@@ -11,9 +11,6 @@ class DatasetExplorerApp(DatasetLoaderApp):
     @staticmethod
     def setup_app_page(dataframe, fields):
         """Build the dataframe explorer table."""
-        st.write("## Dataframe explorer")
-        st.write("In this table, you can explore the dataframe")
-
         image_fields = get_image_fields(fields)
 
         # get the first rows of the dataframe
@@ -63,6 +60,6 @@ def setup_app_page(dataframe, fields):
 
 
 app = DatasetExplorerApp()
-app.create_common_sidebar()
+app.create_common_interface()
 df, df_fields = app.create_loader_widget()
 app.setup_app_page(df, df_fields)

data_explorer/app/pages/images.py

@@ -0,0 +1,34 @@
+"""Image gallery page for the data explorer app."""
+import io
+
+import streamlit as st
+from df_helpers.fields import get_image_fields
+from interfaces.dataset_interface import DatasetLoaderApp
+from PIL import Image
+
+
+class ImageGalleryApp(DatasetLoaderApp):
+    @staticmethod
+    def setup_app_page(dataframe, fields):
+        image_fields = get_image_fields(fields)
+
+        if len(image_fields) == 0:
+            st.warning("There are no image fields in this subset")
+
+        image_field = st.selectbox("Image field", image_fields)
+
+        images = dataframe[image_field].compute()
+        images = [Image.open(io.BytesIO(x)).resize((256, 256)) for x in images]
+
+        image_slider = st.slider("image range", 0, len(images), (0, 10))
+
+        # show images in a gallery
+        cols = st.columns(5)
+        for i, image in enumerate(images[image_slider[0] : image_slider[1]]):
+            cols[i % 5].image(image, use_column_width=True)
+
+
+app = ImageGalleryApp()
+app.create_common_interface()
+df, df_fields = app.create_loader_widget()
+app.setup_app_page(df, df_fields)

data_explorer/app/pages/numeric_analysis.py → data_explorer/app/pages/statistics.py

@@ -83,8 +83,6 @@ def build_numeric_analysis_table(self, dataframe, numeric_fields) -> None:
         # check if there are numeric fields
         if len(numeric_fields) == 0:
             st.warning("There are no numeric fields in this subset")
-        else:
-            st.write("## Numerical statistics")
 
             # make numeric statistics table
             aggregation_dataframe = self.make_numeric_statistics_table(
@@ -113,20 +111,18 @@ def build_numeric_analysis_plots(self, dataframe, numeric_fields):
         # check if there are numeric fields
         if len(numeric_fields) == 0:
             st.warning("There are no numeric fields in this subset")
-        else:
-            st.write("## Show numeric distributions")
 
-            # choose a numeric field in dropdown
-            cols = st.columns(2)
-            with cols[0]:
-                numeric_field = st.selectbox("Field", numeric_fields)
-            with cols[1]:
-                plot_type = st.selectbox(
-                    "Plot type",
-                    ["histogram", "violin", "density", "categorical"],
-                )
+        # choose a numeric field in dropdown
+        cols = st.columns(2)
+        with cols[0]:
+            numeric_field = st.selectbox("Field", numeric_fields)
+        with cols[1]:
+            plot_type = st.selectbox(
+                "Plot type",
+                ["histogram", "violin", "density", "categorical"],
+            )
 
-            self.make_numeric_plot(dataframe, numeric_field, plot_type)
+        self.make_numeric_plot(dataframe, numeric_field, plot_type)
 
     def setup_app_page(self, dataframe, fields):
         numeric_fields = get_numeric_fields(fields)
@@ -135,6 +131,6 @@ def setup_app_page(self, dataframe, fields):
 
 
 app = NumericAnalysisApp()
-app.create_common_sidebar()
+app.create_common_interface()
 df, df_fields = app.create_loader_widget()
 app.setup_app_page(df, df_fields)