deepboard 0.2.0__py3-none-any.whl

deepboard/gui/main.py

@@ -0,0 +1,93 @@
+import os
+import sys
+sys.path.append(os.getcwd())
+from fasthtml.common import *
+from deepboard.gui.pages.main_page.datagrid import SortableColumnsJs, right_click_handler_row, right_click_handler
+from deepboard.gui.pages.main_page import MainPage, build_main_page_endpoints
+from deepboard.gui.utils import prepare_db, Config, initiate_files, get_table_path_from_cli, verify_runids
+from deepboard.gui.pages.compare_page import build_compare_routes, ComparePage
+from deepboard.gui.pages import _not_found
+from deepboard.gui.components import Modal
+from deepboard.resultTable import ResultTable
+from fh_plotly import plotly_headers
+
+DEBUG = False
+# Create config files to customize the UI
+initiate_files()
+
+# Load config and DB
+CONFIG = Config.FromFile(os.path.expanduser('~/.config/deepboard/THEME.yml'))
+DATABASE = get_table_path_from_cli()
+if not os.path.exists(DATABASE):
+    raise RuntimeError(f"ResultTable {DATABASE} does not exist")
+prepare_db()
+
+# Load the result Table
+rTable = ResultTable(DATABASE)
+
+cls = FastHTMLWithLiveReload if DEBUG else FastHTML
+app = cls(
+    exception_handlers={404: _not_found},
+    hdrs=(
+        Link(rel='stylesheet', href='assets/base.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/datagrid.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/right_panel.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/charts.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/fileview.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/compare.css', type='text/css'),
+        Link(rel='stylesheet', href='assets/artefacts.css', type='text/css'),
+        Link(href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css", rel="stylesheet"),
+        plotly_headers,
+        Script(src="assets/base.js"),
+        SortableColumnsJs(),
+    ),
+    static_path='assets'
+)
+
+rt = app.route
+@rt("/assets/{fname:path}.{ext:static}")
+async def get(fname:str, ext:str):
+    if fname == "theme" and ext == "css" and not DEBUG:
+        if os.path.exists(os.path.expanduser('~/.config/deepboard/theme.css')):
+            return FileResponse(os.path.expanduser('~/.config/deepboard/THEME.css'))
+    root = os.path.dirname(os.path.abspath(__file__))
+    return FileResponse(f'{root}/assets/{fname}.{ext}')
+
+
+@rt("/")
+def get(session):
+    if "show_hidden" not in session:
+        session["show_hidden"] = False
+
+    # Check if row_selected exists.
+    verify_runids(session, rTable)
+
+    return (Title("Table"),
+            Div(id="custom-menu"),
+            Modal(P("Hellp world"), active=False),
+            MainPage(session),
+            )
+
+
+@rt("/compare")
+def get(session, run_ids: str):
+    return ComparePage(session, run_ids)
+
+
+# Dropdown menu when right-clicked
+@rt("/get-context-menu")
+def get(session, elementIds: str, top: int, left: int):
+    elementIds = elementIds.split(",")
+    if any(elementId.startswith("grid-header") for elementId in elementIds):
+        return right_click_handler(elementIds, top, left)
+    elif any(elementId.startswith("grid-row") for elementId in elementIds):
+        return right_click_handler_row(session, elementIds, top, left)
+    else:
+        return Div(
+            id='custom-menu',
+            style=f'visibility: visible; top: {top}px; left: {left}px;',
+        )
+
+build_main_page_endpoints(rt)
+build_compare_routes(rt)
+serve(reload=DEBUG)

deepboard/gui/pages/__init__.py

@@ -0,0 +1 @@
+from .not_found import _not_found

deepboard/gui/pages/compare_page/__init__.py

@@ -0,0 +1,6 @@
+from .components.card_list import ChartCardList
+from .components.compare_setup import CompareSetup
+from .components.split_card import SplitCard
+from .components.chart import Chart, LoadingChart
+from .compare_page import ComparePage
+from .routes import build_compare_routes

deepboard/gui/pages/compare_page/compare_page.py

@@ -0,0 +1,22 @@
+from typing import *
+from fasthtml.common import *
+from .components import CompareSetup, ChartCardList
+
+
+def ComparePage(session, run_ids: str):
+    run_ids = run_ids.split(",")
+    session["compare"] = {"selected-rows": run_ids}
+    return (Title("Compare"),
+            Div(id="custom-menu"),
+            Div(
+                Div(
+                    CompareSetup(session),
+                    cls="compare-setup-container"
+                ),
+                Div(
+                    ChartCardList(session),
+                    cls="cards-list-container"
+                ),
+                cls="compare-container"
+            )
+            )

deepboard/gui/pages/compare_page/components/__init__.py

@@ -0,0 +1,4 @@
+from .compare_setup import CompareSetup
+from .split_card import SplitCard
+from .card_list import ChartCardList
+from .chart import Chart, LoadingChart

deepboard/gui/pages/compare_page/components/card_list.py

@@ -0,0 +1,19 @@
+from typing import *
+from fasthtml.common import *
+from .split_card import SplitCard
+
+def ChartCardList(session, swap: bool = False):
+    runIDs = sorted([int(rid) for rid in session["compare"]["selected-rows"]])
+    from __main__ import rTable
+    sockets = [rTable.load_run(runID) for runID in runIDs]
+    keys = {key for socket in sockets for key in socket.formatted_scalars}
+    splits = {split for split, metric in keys}
+    splits = sorted(splits)
+    metrics = {split: [metric for sp, metric in keys if sp == split] for split in splits}
+
+    return Ul(
+                *[SplitCard(session, split, metrics[split]) for split in splits],
+                cls="comparison-list",
+                id="chart-card-list",
+                hx_swap_oob="true" if swap else None
+            )

deepboard/gui/pages/compare_page/components/chart.py

@@ -0,0 +1,54 @@
+from typing import *
+from fasthtml.common import *
+from fh_plotly import plotly2fasthtml
+from .utils import make_lines
+from deepboard.gui.utils import make_fig
+
+def Chart(session, split: str, metric: str, type: Literal["step", "duration"], running: bool, logscale: bool):
+    from __main__ import rTable
+    runIDs = [int(txt) for txt in session["compare"]["selected-rows"]]
+    runIDs.sort()
+    sockets = [rTable.load_run(runID) for runID in runIDs]
+    hidden_lines = session["compare"]["hidden_lines"] if "hidden_lines" in session["compare"] else []
+    smoothness = session["compare"]["smoother_value"] - 1 if "smoother_value" in session["compare"] else 0
+    lines = make_lines(sockets, split, metric, runIDs, type)
+
+    # # Sort lines by label
+    lines.sort(key=lambda x: x[0])
+    # Hide lines if needed
+    lines = [line for line in lines if line[0] not in hidden_lines]
+    fig = make_fig(lines, type=type, smoothness=smoothness, log_scale=logscale)
+
+    if running:
+        update_params = dict(
+            hx_get=f"/compare/chart?split={split}&metric={metric}&type={type}&running={running}&logscale={logscale}",
+            hx_target=f"#chart-container-{split}-{metric}",
+            hx_trigger="every 10s",
+            hx_swap="outerHTML",
+        )
+    else:
+        update_params = {}
+    return  Div(
+            plotly2fasthtml(fig, js_options=dict(responsive=True)),
+            cls="chart-container",
+            id=f"chart-container-{split}-{metric}",
+            **update_params
+        ),
+
+def LoadingChart(session, split: str, metric: str, type: Literal["step", "duration"], running: bool = False, logscale: bool = False):
+    return Div(
+            Div(
+                H1(metric, cls="chart-title"),
+                cls="chart-header",
+                id=f"chart-header-{split}-{metric}"
+            ),
+        Div(
+            cls="chart-container",
+            id=f"chart-container-{split}-{metric}",
+            hx_get=f"/compare/chart?split={split}&metric={metric}&type={type}&running={running}&logscale={logscale}",
+            hx_target=f"#chart-container-{split}-{metric}",
+            hx_trigger="load",
+        ),
+        cls = "chart",
+        id = f"chart-{split}-{metric}",
+    )

deepboard/gui/pages/compare_page/components/compare_setup.py

@@ -0,0 +1,30 @@
+from typing import *
+from fasthtml.common import *
+from deepboard.gui.components import Legend, ChartType, Smoother, LogSelector
+
+def CompareSetup(session, swap: bool = False):
+    from __main__ import CONFIG
+    from __main__ import rTable
+    if "hidden_lines" in session["compare"]:
+        hidden_lines = session["compare"]["hidden_lines"]
+    else:
+        hidden_lines = []
+    raw_labels = [int(txt) for txt in session["compare"]["selected-rows"]]
+    raw_labels = sorted(raw_labels)
+    sockets = [rTable.load_run(runID) for runID in raw_labels]
+    repetitions = [socket.get_repetitions() for socket in sockets]
+    if any(len(rep) > 1 for rep in repetitions):
+        labels = [(f"{label}.{rep}", CONFIG.COLORS[i % len(CONFIG.COLORS)], f"{label}.{rep}" in hidden_lines) for i, label in enumerate(raw_labels) for rep in sockets[i].get_repetitions()]
+    else:
+        labels = [(f"{label}", CONFIG.COLORS[i % len(CONFIG.COLORS)], f"{label}" in hidden_lines) for
+                  i, label in enumerate(raw_labels)]
+    return Div(
+        H1("Setup", cls="chart-scalar-title"),
+        Legend(session, labels, path="/compare", selected_rows_key="compare"),
+        ChartType(session, path="/compare", selected_rows_key="compare", session_path="compare"),
+        LogSelector(session, path="/compare", selected_rows_key="compare", session_path="compare"),
+        Smoother(session, path="/compare", selected_rows_key="compare", session_path="compare"),
+        cls="setup-card",
+        id="setup-card",
+        hx_swap_oob="true" if swap else None,
+    )

deepboard/gui/pages/compare_page/components/split_card.py

@@ -0,0 +1,51 @@
+from typing import *
+from fasthtml.common import *
+from .chart import LoadingChart
+
+def SplitCard(session, split: str, metrics: List[str]):
+    from __main__ import rTable
+    runIDs = sorted([int(rid) for rid in session["compare"]["selected-rows"]])
+    sockets = [rTable.load_run(runID) for runID in runIDs]
+    running = any([socket.status == "running" for socket in sockets])
+    metrics = sorted(metrics)
+    chart_type = session["compare"]["chart_type"] if "chart_type" in session["compare"] else "step"
+    logscale = session["compare"]["chart_scale"] == "log" if "chart_scale" in session["compare"] else False
+
+    opened = session["compare"]["cards-state"][split] if "cards-state" in session["compare"] and split in session["compare"]["cards-state"] else True
+    if opened:
+        return Li(
+            Div(
+                H1(split, cls="split-card-title"),
+                Button(
+                    I(cls="fas fa-chevron-down"),
+                    hx_get=f"/compare/toggle_accordion?split={split}&metrics={','.join(metrics)}&open=false",
+                    hx_target=f"#split-card-{split}",
+                    hx_swap="outerHTML",
+                    cls="accordion-toggle"
+                ),
+                cls="split-card-header"
+            ),
+            Div(
+                *[LoadingChart(session, split, metric, type=chart_type, running=running, logscale=logscale) for metric in metrics],
+                cls="multi-charts-container"
+            ),
+            cls="split-card",
+            id=f"split-card-{split}",
+        )
+    else:
+        return Li(
+            Div(
+                H1(split, cls=".split-card-title"),
+                Button(
+                    I(cls="fas fa-chevron-down"),
+                    hx_get=f"/compare/toggle_accordion?split={split}&metrics={','.join(metrics)}&open=true",
+                    hx_target=f"#split-card-{split}",
+                    hx_swap="outerHTML",
+                    cls="accordion-toggle rotated"
+                ),
+
+                cls="split-card-header"
+            ),
+            cls="split-card closed",
+            id=f"split-card-{split}",
+        )

deepboard/gui/pages/compare_page/components/utils.py

@@ -0,0 +1,20 @@
+from deepboard.gui.utils import get_lines
+from typing import *
+
+def make_lines(sockets, split: str, metric: str, runIDs: List[int], type: Literal["step", "duration"]):
+    from __main__ import CONFIG
+    lines = []
+    all_reps = [socket.get_repetitions() for socket in sockets]
+    multi_rep = any(len(rep) > 1 for rep in all_reps)
+    for i, runID in enumerate(runIDs):
+        reps = get_lines(sockets[i], split, metric, key=type)
+
+        for rep_idx, rep in enumerate(reps):
+            lines.append((
+                f'{runID}.{rep_idx}' if multi_rep else f'{runID}',
+                rep["index"],
+                rep["value"],
+                CONFIG.COLORS[i % len(CONFIG.COLORS)],
+                rep["epoch"],
+            ))
+    return lines

deepboard/gui/pages/compare_page/routes.py

@@ -0,0 +1,58 @@
+from typing import *
+from fasthtml.common import *
+from deepboard.gui.components import Legend, ChartType, Smoother, LogSelector
+from .components import SplitCard, ChartCardList, CompareSetup, Chart
+from .compare_page import ComparePage
+
+def build_compare_routes(rt):
+    rt("/compare")(ComparePage)
+    rt("/compare/toggle_accordion")(toggle_accordion)
+    rt("/compare/change_chart")(change_chart_type)
+    rt("/compare/change_scale")(change_chart_scale)
+    rt("/compare/hide_line")(hide_line)
+    rt("/compare/show_line")(show_line)
+    rt("/compare/change_smoother")(change_smoother)
+    rt("/compare/chart")(load_chart)
+
+# Routes
+def toggle_accordion(session, split: str, metrics: str, open: bool):
+    if "cards-state" not in session["compare"]:
+        session["compare"]["cards-state"] = {}
+    session["compare"]["cards-state"][split] = open
+    return SplitCard(session, split, metrics=metrics.split(","))
+
+def change_chart_type(session, runIDs: str, step: bool):
+    new_type = "time" if step else "step"
+    session["compare"]["chart_type"] = new_type
+    return (ChartType(session, path="/compare", session_path="compare", selected_rows_key="compare"), # We want to toggle it
+            ChartCardList(session, swap=True)
+    )
+
+def change_chart_scale(session, runIDs: str, log: bool):
+    new_scale = "default" if log else "log"
+    session["compare"]["chart_scale"] = new_scale
+    return (LogSelector(session, path="/compare", session_path="compare", selected_rows_key="compare"), # We want to toggle it
+            ChartCardList(session, swap=True)
+    )
+
+def hide_line(session, runIDs: str, label: str):
+    if 'hidden_lines' not in session["compare"]:
+        session["compare"]['hidden_lines'] = []
+    session["compare"]['hidden_lines'].append(label)
+    return CompareSetup(session, swap=True), ChartCardList(session, swap=True)
+
+
+def show_line(session, runIDs: str, label: str):
+    if 'hidden_lines' not in session["compare"]:
+        session["compare"]['hidden_lines'] = []
+    if label in session["compare"]['hidden_lines']:
+        session["compare"]['hidden_lines'].remove(label)
+
+    return CompareSetup(session, swap=True), ChartCardList(session, swap=True)
+
+def change_smoother(session, runIDs: str, smoother: int):
+    session["compare"]["smoother_value"] = smoother
+    return CompareSetup(session, swap=True), ChartCardList(session, swap=True)
+
+def load_chart(session, split: str, metric: str, type: str, running: bool, logscale: bool = False):
+    return Chart(session, split, metric, type, running, logscale=logscale)

deepboard/gui/pages/main_page/__init__.py

@@ -0,0 +1,4 @@
+from .right_panel import RightPanel
+from .datagrid import DataGrid, CompareButton
+from .routes import build_main_page_endpoints
+from .main_page import MainPage

deepboard/gui/pages/main_page/datagrid/__init__.py

@@ -0,0 +1,5 @@
+from .compare_button import CompareButton
+from .datagrid import DataGrid
+from .routes import build_datagrid_endpoints
+from .handlers import right_click_handler_row, right_click_handler
+from .sortable_column_js import SortableColumnsJs

deepboard/gui/pages/main_page/datagrid/compare_button.py

@@ -0,0 +1,21 @@
+from typing import *
+from fasthtml.common import *
+
+def CompareButton(session, swap: bool = False):
+    show = "datagrid" in session and "selected-rows" in session["datagrid"] and len(session["datagrid"]["selected-rows"]) > 1
+    run_ids = session["datagrid"].get("selected-rows") or []
+    run_ids_formatted = ','.join([str(i) for i in run_ids])
+    return Div(
+        Button(
+            "Compare",
+            cls="compare-button",
+            style="display: block;" if show else "display: none;",
+            # onclick=f"window.open('{url}', '_blank')",
+            hx_get=f"/compare_action?run_ids={run_ids_formatted}",
+            hx_target="#container",
+            data_new_tab="true"
+        ),
+        cls="compare-button-container",
+        id="compare-button-container",
+        hx_swap_oob="true" if swap else "false",
+    )

deepboard/gui/pages/main_page/datagrid/datagrid.py

@@ -0,0 +1,67 @@
+from typing import *
+from fasthtml.common import *
+from .row import Row
+from .header import Header, HeaderRename
+
+def DataGrid(session, rename_col: str = None, wrapincontainer: bool = False, fullscreen: bool = False):
+    """
+    Note that fullscreen only work if the container is requested because it applies on the container
+    """
+    from __main__ import rTable, CONFIG
+
+    if "datagrid" not in session:
+        session["datagrid"] = dict()
+    show_hidden = session.get("show_hidden", False)
+    rows_selected = session["datagrid"].get("selected-rows") or []
+    sort_by: Optional[str] = session["datagrid"].get("sort_by", None)
+    sort_order: Optional[str] = session["datagrid"].get("sort_order", None)
+    columns, col_ids, data = rTable.get_results(show_hidden=show_hidden)
+    # If the columns to sort by is hidden, we reset it
+    if sort_by is not None and sort_by not in col_ids:
+        session["datagrid"]["sort_by"] = sort_by = None
+        session["datagrid"]["sort_order"] = sort_order = None
+
+    if sort_by is not None and sort_order is not None:
+        data = sorted(
+            data,
+            key=lambda x: (
+                x[col_ids.index(sort_by)] is None,  # True = 1, False = 0 — Nones last
+                x[col_ids.index(sort_by)]
+            ),
+            reverse=(sort_order == "desc")
+        )
+
+    run_ids = [row[col_ids.index("run_id")] for row in data]
+    rows_hidden = rTable.get_hidden_runs() if show_hidden else []
+    table = Table(
+                # We put the headers in a form so that we can sort them using htmx
+                Thead(
+                    Tr(
+                        *[
+                            HeaderRename(col_name, col_id) if col_id == rename_col else Header(
+                                col_name,
+                                col_id,
+                                sort_order if col_id == sort_by else None)
+                            for col_name, col_id in zip(columns, col_ids)],
+                        id="column-header-row"
+                    )
+                    ),
+                Tbody(
+                    *[Row(row,
+                          run_id,
+                          max_decimals=CONFIG.MAX_DEC,
+                          selected=run_id in rows_selected,
+                          hidden=run_id in rows_hidden,
+                          fullscreen=fullscreen) for row, run_id in zip(data, run_ids)],
+                ),
+                cls="data-grid"
+            ),
+
+    if wrapincontainer:
+        return Div(
+                table,
+                cls="scroll-container" if not fullscreen else "scroll-container fullscreen",
+                id="experiment-table",
+            ),
+    else:
+        return table

deepboard/gui/pages/main_page/datagrid/handlers.py

@@ -0,0 +1,54 @@
+from typing import *
+from fasthtml.common import *
+
+def right_click_handler(elementIds: List[str], top: int, left: int):
+    from __main__ import rTable
+    elementId = [elem for elem in elementIds if elem.startswith("grid-header-")][0]
+    clicked_col = elementId.replace("grid-header-", "")
+    hidden_columns = [(key, alias) for key, (order, alias) in rTable.result_columns.items() if order is None]
+    return Div(
+        Ul(
+            Li('Hide', hx_get=f"/hide?col={clicked_col}", hx_target='#experiment-table', hx_swap="innerHTML", cls="menu-item"),
+            Li('Rename', hx_get=f'/rename_col_datagrid?col={clicked_col}', hx_target='#experiment-table', hx_swap="innerHTML", cls="menu-item"),
+            Li(
+                Div(A('Add', href="#", cls="has-submenu"), Span("►"),
+                    style="display: flex; flex-direction: row; justify-content: space-between;"),
+                Ul(
+                    *[Li(alias, hx_get=f"/show?col={col_name}&after={clicked_col}", hx_target='#experiment-table', hx_swap="innerHTML", cls="menu-item")
+                      for col_name, alias in hidden_columns],
+                    cls="submenu"
+                ),
+                cls="menu-item has-submenu-wrapper"
+            ),
+            cls='dropdown-menu'
+        ),
+        id='custom-menu',
+        style=f'visibility: visible; top: {top}px; left: {left}px;',
+    )
+def right_click_handler_row(session, elementIds: List[str], top: int, left: int):
+    from __main__ import rTable
+    elementId = [elem for elem in elementIds if elem.startswith("grid-row-")][0]
+    clicked_row = int(elementId.replace("grid-row-", ""))
+    hidden_runs = rTable.get_hidden_runs()
+    if clicked_row in hidden_runs:
+        hideshow_button = Li('Show', hx_get=f"/show_run?run_id={clicked_row}", hx_target='#experiment-table',
+                             hx_swap="innerHTML", cls="menu-item")
+    else:
+        hideshow_button = Li('Hide', hx_get=f"/hide_run?run_id={clicked_row}", hx_target='#experiment-table',
+                             hx_swap="innerHTML",cls="menu-item")
+    print(session)
+    if session.get("show_hidden", False):
+        toggle_visibility_button = Li('Hide Hidden', hx_get=f"/hide_hidden", hx_target='#experiment-table',
+                                      hx_swap="innerHTML", cls="menu-item")
+    else:
+        toggle_visibility_button = Li('Show Hidden', hx_get=f"/show_hidden", hx_target='#experiment-table',
+                                      hx_swap="innerHTML", cls="menu-item")
+    return Div(
+        Ul(
+            hideshow_button,
+            toggle_visibility_button,
+            cls='dropdown-menu'
+        ),
+        id='custom-menu',
+        style=f'visibility: visible; top: {top}px; left: {left}px;',
+    )

deepboard/gui/pages/main_page/datagrid/header.py

@@ -0,0 +1,43 @@
+from typing import *
+from fasthtml.common import *
+
+def Header(name: str, col_id: str, sort_dir: str = None):
+    if sort_dir == "asc":
+        return Th(
+            Div(name, Span("↑", cls='sort-icon'), hx_get=f'/sort?by={col_id}&order=desc', target_id='experiment-table',
+                hx_swap='innerHTML',
+                cls='sortable',
+                id=f"grid-header-{col_id}"
+                ),
+            data_col=col_id
+        ),
+    elif sort_dir == "desc":
+        return Th(
+            Div(name, Span("↓", cls='sort-icon'), hx_get=f'/sort?by={col_id}&order=', target_id='experiment-table',
+                hx_swap='innerHTML',
+                cls='sortable',
+                id=f"grid-header-{col_id}"),
+            data_col=col_id
+        ),
+    else:
+        return Th(
+            Div(name, Span('⇅', cls='sort-icon'), hx_get=f'/sort?by={col_id}&order=asc', target_id='experiment-table',
+                hx_swap='innerHTML',
+                cls='sortable',
+                id=f"grid-header-{col_id}"),
+            data_col=col_id
+        ),
+
+def HeaderRename(name: str, col_id: str):
+    return Th(
+        Input(
+            type="text",
+            value=name,
+            name="new_name",
+            hx_post=f'/rename_col?col_id={col_id}',
+            hx_target='#experiment-table',
+            hx_swap='innerHTML',
+            id=f"grid-header-{col_id}",
+            cls="rename-input"
+        )
+    ),