💄 simplify etl dashboard (#3840)

* 💄 simplify etl dashboard

* minor tweaks

* 🔨 Refactor step selection logic and improve preview rendering

apps/wizard/app_pages/dashboard/agrid.py → apps/wizard/app_pages/dashboard/aggrid.py

@@ -1,4 +1,5 @@
-from st_aggrid import AgGrid, GridUpdateMode, JsCode
+import streamlit.components.v1 as components
+from st_aggrid import AgGrid, ColumnsAutoSizeMode, GridUpdateMode, JsCode
 from st_aggrid.grid_options_builder import GridOptionsBuilder
 
 from apps.step_update.cli import UpdateState
@@ -80,26 +81,36 @@ class UrlCellRenderer {
         }
         """
 )
+# Enable clearing selection via API
+JS_CODE_ENABLE_CLEAR_SELECTION = js = JsCode("""
+function(event) {
+    const api = event.api;
+    window.addEventListener('clear.rows', (e) => {
+        api.deselectAll();
+    });
+}
+""")
 
 
 def make_agrid(steps_df_display):
     grid_options = make_grid_options(steps_df_display)
     grid_response = AgGrid(
         data=steps_df_display,
         gridOptions=grid_options,
-        # height=1000,
+        height=500,
         # height="100%",
         # width="100%",
         update_mode=GridUpdateMode.MODEL_CHANGED,
         # fit_columns_on_grid_load=False,
         allow_unsafe_jscode=True,
         theme="streamlit",
         # The following ensures that the pagination controls are not cropped.
-        custom_css={
-            "#gridToolBar": {
-                "padding-bottom": "0px !important",
-            }
-        },
+        # custom_css={
+        #     "#gridToolBar": {
+        #         "padding-bottom": "0px !important",
+        #     }
+        # },
+        # columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
     )
 
     return grid_response
@@ -110,16 +121,18 @@ def make_grid_options(steps_df_display):
     gb = GridOptionsBuilder.from_dataframe(
         dataframe=steps_df_display,
         editable=False,
-        groupable=True,
+        # groupable=True,
         sortable=True,
-        filterable=True,
+        # filterable=True,
         resizable=True,
     )
 
     # General settings
     gb.configure_grid_options(
         # domLayout="autoHeight",
+        ColumnsAutoSizeMode=ColumnsAutoSizeMode.FIT_CONTENTS,
         enableCellTextSelection=True,
+        onFirstDataRendered=JS_CODE_ENABLE_CLEAR_SELECTION,
     )
     gb.configure_selection(
         selection_mode="multiple",
@@ -139,12 +152,12 @@ def make_grid_options(steps_df_display):
 
     # Pagination settings
     gb.configure_pagination(
-        paginationAutoPageSize=False,
+        # paginationAutoPageSize=False,
         # paginationPageSize=20,
     )
 
     # Auto-height
-    gb.configure_auto_height()
+    # gb.configure_auto_height()
 
     # Build
     grid_options = gb.build()
@@ -160,28 +173,24 @@ def _config_grid_columns(gb):
         field="step",
         width=500,
         headerTooltip="Step URI, as it appears in the ETL DAG.",
-        filter="agTextColumnFilter",
     )
-    gb.configure_column(
+    _config_column(
+        gb,
         field="channel",
-        headerName="Channel",
         width=120,
         headerTooltip="Channel of the step (e.g. garden or grapher).",
-        filter="agTextColumnFilter",
     )
     _config_column(
         gb,
         field="namespace",
         width=150,
         headerTooltip="Namespace of the step.",
-        filter="agTextColumnFilter",
     )
     _config_column(
         gb,
         field="version",
         width=120,
         headerTooltip="Version of the step.",
-        filter="agTextColumnFilter",
     )
     _config_column(
         gb,
@@ -306,3 +315,18 @@ def _config_column(gb, field: str, text_filter: bool = True, **kwargs):
     gb.configure_column(**params)
 
     return gb
+
+
+def clear_aggrid_selections():
+    """Unselect all rows from AgGrid table.
+    Reference: https://discuss.streamlit.io/t/aggrid-unselect-all-rows/21367/11
+    """
+    clearJs = """<script>
+    ((e) => {
+        const iframe = window.parent.document.querySelectorAll('[title="st_aggrid.agGrid"]')[0] || null;
+        if(!iframe) return;
+        iframe.contentWindow.dispatchEvent( new Event('clear.rows'));
+    })()
+    </script>
+    """
+    components.html(clearJs)