Update marimo dashboard

Author: MalloryWittwer

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
         run: |
           python -m pip install marimo
       - name: Export notebook
-        run: marimo export html-wasm marimo_dashboard.py -o wasm --mode edit
+        run: marimo export html-wasm marimo_dashboard.py -o wasm --mode run
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

marimo_dashboard.py

@@ -9,12 +9,17 @@
     import os
     import zipfile
     import requests
+    import copy
     from pathlib import Path
 
     import marimo as mo
 
     import numpy as np
     import skimage.io
+    from skimage.measure import find_contours
+    import plotly.express as px
+    import plotly.graph_objects as go
+    from plotly.subplots import make_subplots
 
 
     def _object_count(mask: np.ndarray) -> int:
@@ -49,14 +54,38 @@ def binary_iou_score(gtruth_mask: np.ndarray, submission_mask: np.ndarray) -> fl
         return intersection / union
 
 
+    def scatters_from_mask(mask):
+        _labs = np.unique(mask)
+        _labs = _labs[_labs != 0]
+        _n_labs = len(_labs)
+    
+        _rng = np.random.default_rng(42)
+        _colors = {i: f"rgb({r},{g},{b})" for i, (r,g,b) in zip(_labs, _rng.integers(0, 255, (_n_labs, 3)))}
+    
+        _mask_scatters = []
+    
+        for _lab in _labs:
+            for _contour in find_contours(mask == _lab, 0.5):
+                _mask_scatters.append(
+                    go.Scatter(
+                        x=_contour[:, 1],
+                        y=_contour[:, 0],
+                        mode="lines",
+                        line=dict(color=_colors[int(_lab)], width=2),
+                        showlegend=False,
+                    )
+                )
+
+        return _mask_scatters
+
+
     public_folder_path = Path("./public")
     images_path = public_folder_path / "Images"
     ground_truths_path = public_folder_path / "Ground_Truths"
 
     if "pyodide" in sys.modules:
         import micropip
         await micropip.install("tifffile==2025.5.10")
-        await micropip.install("anybioimage")
 
         if not public_folder_path.exists():
             # Download and unzip the public folder from the repository
@@ -79,7 +108,8 @@ def binary_iou_score(gtruth_mask: np.ndarray, submission_mask: np.ndarray) -> fl
         for gt_file in _gt_challenge_folder.glob("*.tif"):
             _gt_mask = skimage.io.imread(gt_file)
             break  # There should only be one ground truth
-        ground_truths[_challenge] = _gt_mask
+        _gt_scatter = scatters_from_mask(_gt_mask)
+        ground_truths[_challenge] = (_gt_mask, _gt_scatter)
 
 
 @app.cell(hide_code=True)
@@ -90,8 +120,8 @@ def _(challenges_dropdown):
 
 @app.cell(hide_code=True)
 def _(challenges_dropdown):
-    gt_mask = skimage.io.imread(ground_truths_path / challenges_dropdown.value / f"{challenges_dropdown.value}-gt.tif")
-    return (gt_mask,)
+    gt_mask, gt_scatter = ground_truths[challenges_dropdown.value] #skimage.io.imread(ground_truths_path / challenges_dropdown.value / f"{challenges_dropdown.value}-gt.tif")
+    return gt_mask, gt_scatter
 
 
 @app.cell(hide_code=True)
@@ -125,27 +155,11 @@ def _():
     return
 
 
-@app.cell(hide_code=True)
-def _():
-    mo.md(r"""
-    ## Evaluation
-
-    The quality of your submissions is evaluated based on two metrics:
-
-    - **Object count** relative to the ground truth count (`oc_score`).
-    - **Intersection over union (IoU)** computed on the binary version of the mask (`iou_score`).
-
-    We also average both scores to give an overall score (`overall_score`).
-    """)
-    return
-
-
 @app.cell(hide_code=True)
 def _():
     challenges_dropdown = mo.ui.dropdown(challenges, value=challenges[0], label="Challenge")
 
     mo.callout(mo.hstack([challenges_dropdown], justify="center"), kind="neutral")
-
     return (challenges_dropdown,)
 
 
@@ -160,11 +174,12 @@ def _():
 @app.cell
 def _(file_drop):
     if file_drop.contents():
-        # TODO: add a little spinner
-        mask = skimage.io.imread(io.BytesIO(file_drop.contents()))
+        with mo.status.spinner(title=f"Loading mask...") as _spinner:
+            mask = skimage.io.imread(io.BytesIO(file_drop.contents()))
+            mask_scatters = scatters_from_mask(mask)
     else:
         mask = None
-    return (mask,)
+    return mask, mask_scatters
 
 
 @app.cell
@@ -175,6 +190,21 @@ def _(gt_mask, mask):
     return (valid_mask,)
 
 
+@app.cell(hide_code=True)
+def _():
+    mo.md(r"""
+    ## Evaluation
+
+    The quality of your submissions is evaluated based on two metrics:
+
+    - **Object count** relative to the ground truth count.
+    - **Intersection over union (IoU)** computed on the binary version of the mask.
+
+    We also average both scores to give an overall score.
+    """)
+    return
+
+
 @app.cell
 def _(challenges_dropdown, gt_mask, mask, valid_mask):
     mo.stop(not valid_mask, mo.callout(f"The uploaded mask file is invalid for the selected challenge ({challenges_dropdown.value}).", kind="danger"))
@@ -185,42 +215,159 @@ def _(challenges_dropdown, gt_mask, mask, valid_mask):
 
     overall_score = np.mean([oc_score, iou_score])
 
-    # TODO: make a lovely print:
     mo.vstack([
-        oc_score, iou_score, overall_score
-    ])
+            mo.md("Your Submission Scores"),
+            mo.hstack([mo.md(
+                f"""| Object count | IoU | Average |
+                | ------ | ------ | ------ |
+                | {oc_score*100:.0f} % | {iou_score*100:.0f} % | {overall_score*100:.0f} % |
+                """
+            )]),
+        ], align="center",
+    )
+    return
+
+
+@app.cell(hide_code=True)
+def _():
+    mo.md(r"""
+    Here is a comparison between the ground truth mask and your submission:
+    """)
     return
 
 
 @app.cell
-def _(gt_mask, image):
-    from anybioimage import BioImageViewer
+def _(gt_scatter, image, mask):
+    viewer_size = 500
+
+    base = px.imshow(
+        image,
+        height=viewer_size,
+        color_continuous_scale="gray",
+        contrast_rescaling="minmax",
+        aspect="equal",
+    )
 
-    viewer = BioImageViewer()
+    fig = make_subplots(
+        rows=1,
+        cols=2,
+        column_widths=[0.5, 0.5],
+        horizontal_spacing=0.02,
+        subplot_titles=("Ground truth", "Submission"),
+    )
 
-    viewer.set_image(image)
+    fig.update_annotations(
+        font=dict(size=16, color="white")
+    )
 
-    viewer.add_mask(
-        gt_mask,
-        name="Ground truth",
-        opacity=0.5,
-        contours_only=True,
+    for tr in base.data:
+        fig.add_trace(copy.deepcopy(tr), row=1, col=1)
+
+    for tr in gt_scatter:
+        fig.add_trace(copy.deepcopy(tr), row=1, col=1)
+
+    for ax in ["xaxis", "xaxis2"]:
+        fig.layout[ax].update(
+            showticklabels=False,
+            showgrid=False,
+            visible=False,
+            zeroline=False,
+        )
+
+    for ax, xanchor in [("yaxis", "x"), ("yaxis2", "x2")]:
+        fig.layout[ax].update(
+            showticklabels=False,
+            showgrid=False,
+            visible=False,
+            zeroline=False,
+            scaleanchor=xanchor,
+            autorange="reversed",
+        )
+
+    fig.update_layout(
+        coloraxis_showscale=False,
+        margin=dict(l=0, r=0, b=30, t=30, pad=0),
+        plot_bgcolor="black",
+        paper_bgcolor="black",
+        showlegend=False,
     )
 
-    mo.ui.anywidget(viewer)
-    return (viewer,)
+    mo.ui.plotly(fig) if not isinstance(mask, np.ndarray) else None
+    return (viewer_size,)
 
 
 @app.cell
-def _(mask, valid_mask, viewer):
+def _(gt_scatter, image, mask_scatters, valid_mask, viewer_size):
     mo.stop(not valid_mask)
 
-    viewer.add_mask(
-        mask,
-        name="Submission",
-        color="#ff0000",
-        opacity=0.5,
+
+    base2 = px.imshow(
+        image,
+        height=viewer_size,
+        color_continuous_scale="gray",
+        contrast_rescaling="minmax",
+        aspect="equal",
     )
+
+    fig2 = make_subplots(
+        rows=1,
+        cols=2,
+        column_widths=[0.5, 0.5],
+        horizontal_spacing=0.02,
+        subplot_titles=("Ground truth", "Submission"),
+    )
+
+    fig2.update_annotations(
+        font=dict(size=16, color="white")
+    )
+
+    for _tr in base2.data:
+        fig2.add_trace(copy.deepcopy(_tr), row=1, col=1)
+
+    for _tr in gt_scatter:
+        fig2.add_trace(copy.deepcopy(_tr), row=1, col=1)
+
+
+    # Added this:
+    for _tr in base2.data:
+        fig2.add_trace(copy.deepcopy(_tr), row=1, col=2)
+
+    for _tr in mask_scatters:
+        fig2.add_trace(copy.deepcopy(_tr), row=1, col=2)
+    # ----------
+
+    for _ax in ["xaxis", "xaxis2"]:
+        fig2.layout[_ax].update(
+            showticklabels=False,
+            showgrid=False,
+            visible=False,
+            zeroline=False,
+        )
+
+    for _ax, _xanchor in [("yaxis", "x"), ("yaxis2", "x2")]:
+        fig2.layout[_ax].update(
+            showticklabels=False,
+            showgrid=False,
+            visible=False,
+            zeroline=False,
+            scaleanchor=_xanchor,
+            autorange="reversed",
+        )
+
+    fig2.update_layout(
+        coloraxis_showscale=False,
+        margin=dict(l=0, r=0, b=30, t=30, pad=0),
+        plot_bgcolor="black",
+        paper_bgcolor="black",
+        showlegend=False,
+    )
+
+    mo.ui.plotly(fig2)
+    return
+
+
+@app.cell
+def _():
     return