Directory and file viewing in the frontend.

Enabled viewing the directory structure of any folder in the repo,
defined relative to its root, inside the frontend. Improved the UI
for the file viewer, directory viewer, and the homepage.

Author: Sebastijan-Dominis

ml_service/backend/dir_viewer/__init__.py

@@ -0,0 +1 @@
+"""A package for viewing directory contents on the backend, used by the frontend for visualization."""

ml_service/backend/dir_viewer/utils/__init__.py

@@ -0,0 +1 @@
+"""A package for dir-viewing utilities, used by the dir_viewer router to visualize directory contents on the frontend."""

ml_service/backend/dir_viewer/utils/build_tree.py

@@ -0,0 +1,19 @@
+"""A utility function to build a tree representation of a directory structure."""
+from pathlib import Path
+
+
+def build_tree(path: Path):
+    """
+    Recursively build a tree of the folder as a dict.
+    Files are listed with None values, directories as nested dicts.
+    """
+    tree = {}
+    try:
+        for p in sorted(path.iterdir()):
+            if p.is_dir():
+                tree[p.name] = build_tree(p)
+            else:
+                tree[p.name] = None
+        return tree
+    except PermissionError:
+        return {"error": "Permission denied"}

ml_service/backend/main.py

@@ -9,6 +9,7 @@
 
 from ml_service.backend.limiter import limiter
 from ml_service.backend.routers.data import router as data_router
+from ml_service.backend.routers.dir_viewer import router as dir_viewer_router
 from ml_service.backend.routers.features import router as features_router
 from ml_service.backend.routers.modeling import router as modeling_router
 from ml_service.backend.routers.pipeline_cfg import router as pipeline_cfg_router
@@ -31,7 +32,7 @@
     allow_headers=["*"],
 )
 
-routers = [pipelines_router, modeling_router, features_router, data_router, pipeline_cfg_router, promotion_thresholds_router, scripts_router, viewer_router]
+routers = [pipelines_router, modeling_router, features_router, data_router, pipeline_cfg_router, promotion_thresholds_router, scripts_router, viewer_router, dir_viewer_router]
 
 for router in routers:
     app.include_router(router)

ml_service/backend/routers/dir_viewer.py

@@ -0,0 +1,43 @@
+"""A FastAPI router for viewing directory structure on the backend, used by the frontend for visualization."""
+import os
+from pathlib import Path
+
+import yaml
+from fastapi import APIRouter, HTTPException, Request
+
+from ml_service.backend.dir_viewer.utils.build_tree import build_tree
+from ml_service.backend.main import limiter
+
+repo_root = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "..", ".."))
+
+router = APIRouter(prefix="/dir_viewer", tags=["dir_viewer"])
+
+@router.post("/load", status_code=200)
+@limiter.limit("10/minute")
+def load_dir(payload: dict, request: Request):
+    """
+    payload: {"path": "<relative path from repo root>"}
+    Returns folder tree as YAML string.
+    """
+    path_str = payload.get("path")
+    if not path_str:
+        raise HTTPException(status_code=400, detail="Missing 'path' in payload")
+
+    # Make the path relative to repo root
+    path = (Path(repo_root) / path_str).resolve()
+
+    # Safety: prevent access outside repo
+    try:
+        path.relative_to(repo_root)
+    except ValueError:
+        raise HTTPException(status_code=403, detail="Cannot access directories outside repo root") from None
+
+    if not path.exists() or not path.is_dir():
+        raise HTTPException(status_code=404, detail=f"Directory not found: {path}")
+
+    tree = build_tree(path)
+
+    # Convert tree to YAML for frontend display
+    tree_yaml = yaml.safe_dump(tree, sort_keys=False)
+
+    return {"tree": tree, "tree_yaml": tree_yaml, "path": str(path)}

ml_service/backend/routers/viewer.py

@@ -1,3 +1,4 @@
+"""A FastAPI router for viewing file contents on the backend, used by the frontend for visualization."""
 from pathlib import Path
 
 import yaml

ml_service/frontend/app.py

@@ -18,6 +18,8 @@
 from ml_service.frontend.configs.pipeline_cfg.page import register as pipeline_cfg_register
 from ml_service.frontend.configs.promotion_thresholds.page import get_layout as promotion_layout
 from ml_service.frontend.configs.promotion_thresholds.page import register as promotion_register
+from ml_service.frontend.dir_viewer.page import get_layout as dir_viewer_layout
+from ml_service.frontend.dir_viewer.page import register as dir_viewer_register
 from ml_service.frontend.docs.page import get_layout as docs_layout
 from ml_service.frontend.docs.page import register as docs_register
 from ml_service.frontend.pipelines.page import get_layout as pipelines_layout
@@ -47,7 +49,8 @@
     "Pipelines": pipelines_layout,
     "Scripts": scripts_layout,
     "Docs": docs_layout,
-    "Viewer": viewer_layout,
+    "File Viewer": viewer_layout,
+    "Directory Viewer": dir_viewer_layout,
 }
 
 # Register page callbacks
@@ -61,6 +64,7 @@
     scripts_register,
     docs_register,
     viewer_register,
+    dir_viewer_register,
 ]:
     register_func(app)
 
@@ -145,12 +149,29 @@ def home_layout() -> dbc.Container:
                             html.Li("Some md elements may render oddly, but all content should be there. Read directly from the md file if something looks off."),
                         ])
                     ], style={"marginBottom": "1rem"}),
+                    html.Li([
+                        html.Strong("File Viewer:"),
+                        html.Ul([
+                            html.Li("View contents of files in the repository."),
+                            html.Li("Supports .yaml and .json files."),
+                            html.Li("Useful for quickly checking .yaml and .json files without leaving the dashboard."),
+                        ])
+                    ], style={"marginBottom": "1rem"}),
+                    html.Li([
+                        html.Strong("Directory Viewer:"),
+                        html.Ul([
+                            html.Li("View directory structure from a chosen directory in the repository."),
+                            html.Li("Specify the directory to view by entering a path relative to the repository root (e.g. 'configs/data')."),
+                            html.Li("Input box allows to write and copy paths without leaving the page."),
+                        ])
+                    ], style={"marginBottom": "1rem"}),
                 ],
                 style={
                     "fontSize": "1.2rem",
                     "paddingTop": "5rem",
                     "textAlign": "left",
                     "marginLeft": "10%",
+                    "marginBottom": "5rem",
                 }
             )
         ],
@@ -175,7 +196,8 @@ def generate_page_links():
         "Pipelines": "play-circle",
         "Scripts": "terminal",
         "Docs": "book",
-        "Viewer": "eye",
+        "File Viewer": "eye",
+        "Directory Viewer": "folder",
     }
     links = []
     for name in PAGES:
@@ -205,7 +227,14 @@ def generate_page_links():
                         ),
 
                         # Sidebar toggle button (hamburger icon)
-                        dbc.Button("☰", id="sidebar-toggle", color="primary", className="mb-3", n_clicks=0, style={"width": "100%"}),
+                        dbc.Button(
+                            "☰",
+                            id="sidebar-toggle",
+                            color="primary",
+                            className="mb-3",
+                            n_clicks=0,
+                            style={"width": "100%"}
+                        ),
 
                         # Collapsible sidebar with page links
                         dbc.Collapse(
@@ -222,11 +251,14 @@ def generate_page_links():
                     style={"position": "sticky", "marginTop": "5rem"}
                 ),
                 dbc.Col(
-                    html.Div(id="page-content-container", style={
-                        "padding": "20px",
-                        "height": "98vh",
-                        "overflowY": "auto",
-                    }),
+                    html.Div(
+                        id="page-content-container",
+                        style={
+                            "padding": "20px",
+                            "height": "98vh",
+                            "overflowY": "auto",
+                        }
+                    ),
                     width=10,
                 )
             ],

ml_service/frontend/dir_viewer/__init__.py

@@ -0,0 +1 @@
+"""A package for viewing directory contents on the frontend."""

ml_service/frontend/dir_viewer/callbacks.py

@@ -0,0 +1,32 @@
+import os
+
+import dash_bootstrap_components as dbc
+import requests
+from dash import Input, Output, State
+
+PAGE_PREFIX = "/dir_viewer"
+API_URL = os.getenv("ML_SERVICE_BACKEND_URL", "http://localhost:8000")
+
+def register_callbacks(app):
+    @app.callback(
+        Output(f"{PAGE_PREFIX}-viewer", "value"),
+        Output(f"{PAGE_PREFIX}-viewer", "mode"),
+        Output(f"{PAGE_PREFIX}-status", "children"),
+        Input(f"{PAGE_PREFIX}-load-btn", "n_clicks"),
+        State(f"{PAGE_PREFIX}-path-input", "value"),
+        prevent_initial_call=True,
+    )
+    def load_dir(_, path_str):
+        if not path_str:
+            return "", "yaml", dbc.Alert("Path required", color="danger")
+
+        try:
+            r = requests.post(f"{API_URL}/dir_viewer/load", json={"path": path_str}, timeout=10)
+        except Exception as e:
+            return "", "yaml", dbc.Alert(f"Backend unreachable: {e}", color="danger")
+
+        if not r.ok:
+            return "", "yaml", dbc.Alert(f"{r.status_code}: {r.text}", color="danger")
+
+        result = r.json()
+        return result["tree_yaml"], "yaml", dbc.Alert(f"Loaded directory tree for {result['path']}", color="success")

ml_service/frontend/dir_viewer/layout.py

@@ -0,0 +1,114 @@
+import dash_ace
+import dash_bootstrap_components as dbc
+from dash import html
+
+PAGE_PREFIX = "/dir_viewer"
+
+def build_layout():
+    return dbc.Container(
+        [
+            dbc.Col(
+                [
+                    html.H1(
+                        "Directory Viewer",
+                        style={
+                            "textAlign": "center"
+                        }
+                    ),
+
+                    dbc.Label(
+                        "Enter directory path relative to repo root:",
+                        html_for=f"{PAGE_PREFIX}-path-input",
+                        style={
+                            "fontSize": "1.2rem"
+                        }
+                    ),
+
+                    dbc.Input(
+                        id=f"{PAGE_PREFIX}-path-input",
+                        placeholder="e.g. experiments",
+                        type="text",
+                        style={
+                            "fontSize": "1.2rem"
+                        },
+                    ),
+
+                    dbc.Button(
+                        "Load",
+                        id=f"{PAGE_PREFIX}-load-btn",
+                        color="primary",
+                        style={
+                            "width": "120px"
+                        },
+                    ),
+
+                    html.Div(id=f"{PAGE_PREFIX}-status"),
+
+                    dash_ace.DashAceEditor(
+                        id=f"{PAGE_PREFIX}-viewer",
+                        mode="yaml",
+                        theme="github",
+                        value="",
+                        readOnly=True,
+                        fontSize=16,
+                        height="700px",
+                        setOptions={
+                            "showLineNumbers":
+                            True
+                        },
+                        placeholder="Directory tree will be displayed here in YAML format after loading.",
+                    ),
+
+                    # Manual path input + prompt
+                    dbc.Row(
+                        [
+                            dbc.Input(
+                                id=f"{PAGE_PREFIX}-manual-path",
+                                placeholder="Enter or paste directory path here...",
+                                type="text",
+                                style={
+                                    "fontSize": "1.1rem",
+                                    "width": "800px"
+                                },
+                            ),
+                        ],
+                    ),
+
+                    html.P(
+                        [
+                            "The input field above is for convenience - it allows you to quickly write the path into it, without leaving the page, which you can then copy-paste into the ",
+                            html.A(
+                                "file viewer",
+                                href="/File_Viewer",
+                                style={
+                                    "fontWeight": "bold",
+                                    "color": "#007bff",
+                                    "textDecoration": "underline"
+                                }
+                            ),
+                            " to view the contents of a yaml or json file. Ensure that the path is relative to the repo root, and that the file exists.",
+                        ],
+                        style={
+                            "width": "800px"
+                        }
+                    ),
+                ],
+                style={
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "width": "50%",
+                    "margin": "0 auto",
+                    "gap": "1rem"
+                }
+            ),
+        ],
+        fluid=True,
+        style={
+            "backgroundColor": "#8fa0d8",
+            "minHeight": "100%",
+            "paddingTop": "45px",
+            "paddingBottom": "50px",
+        },
+    )
+