From 9a7de488fd68e963a562adc7042d9dd2bfb61f45 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:32:14 +0000
Subject: [PATCH 01/24] add reading slide-level info from provided csv

---
 tests/test_app_bokeh.py                    | 17 +++++++---
 tiatoolbox/data/remote_samples.yaml        |  2 ++
 tiatoolbox/visualization/bokeh_app/main.py | 36 +++++++++++++++++++---
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index b29d78188..b76f098c0 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
-import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
+import bokeh.models as bkmodels
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
@@ -101,6 +101,10 @@ def annotation_path(data_path: dict[str, Path]) -> dict[str, object]:
         "patch-extraction-vf",
         data_path["base_path"] / "slides",
     )
+    data_path["meta"] = _fetch_remote_sample(
+        "test_meta",
+        data_path["base_path"] / "slides",
+    )
     data_path["annotations"] = _fetch_remote_sample(
         "annotation_store_svs_1",
         data_path["base_path"] / "overlays",
@@ -210,6 +214,11 @@ def test_slide_select(doc: Document, data_path: pytest.TempPathFactory) -> None:
     slide_select.value = ["CMU-1.ndpi"]
     assert main.UI["vstate"].slide_path == data_path["slide2"]
 
+    # check the slide metadata is loaded from csv
+    desc = doc.get_model_by_name("description")
+    assert "valA" in desc.text
+    assert "valB" not in desc.text
+
     # check selecting nothing has no effect
     slide_select.value = []
     assert main.UI["vstate"].slide_path == data_path["slide2"]
diff --git a/tiatoolbox/data/remote_samples.yaml b/tiatoolbox/data/remote_samples.yaml
index 364a5566e..b7fdae069 100644
--- a/tiatoolbox/data/remote_samples.yaml
+++ b/tiatoolbox/data/remote_samples.yaml
@@ -137,5 +137,7 @@ files:
     url: [ *testdata, "annotation/test1_config.json"]
   config_2:
     url: [ *testdata, "annotation/test2_config.json"]
+  test_meta:
+    url: [ *testdata, "annotation/test_meta.csv"]
   nuclick-output:
     url: [*modelroot, "predictions/nuclei_mask/nuclick-output.npy"]
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 0f29a4aea..4e83b97a8 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -12,8 +12,13 @@
 from typing import TYPE_CHECKING, Any, Callable, SupportsFloat
 
 import numpy as np
+import pandas as pd
 import requests
 import torch
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
+
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -58,9 +63,6 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))
@@ -131,9 +133,19 @@ def __getitem__(self: UIWrapper, key: str) -> Any:  # noqa: ANN401
 
 def format_info(info: dict[str, Any]) -> str:
     """Format the slide info for display."""
-    info_str = f"<b>Slide Name: {info.pop('file_path').name}</b><br>"
+    slide_name = info.pop("file_path").name
+    info_str = f"<b>Slide Name: {slide_name}</b><br>"
     for k, v in info.items():
         info_str += f"{k}: {v}<br>"
+    # if there is metadata, add it
+    if doc_config.metadata is not None:
+        try:
+            row = doc_config.metadata.loc[slide_name]
+            info_str += "<br><b>Metadata:</b><br>"
+            for k, v in row.items():
+                info_str += f"{k}: {v}<br>"
+        except KeyError:
+            info_str += "<br><b>No metadata found.</b><br>"
     return info_str
 
 
@@ -2070,6 +2082,22 @@ def setup_doc(self: DocConfig, base_doc: Document) -> tuple[Row, Tabs]:
 
         """
         self._get_config()
+        # see if there's a metadata .csv file in slides folder
+        metadata_file = list(doc_config["slide_folder"].glob("*.csv"))
+        if len(metadata_file) > 0:
+            metadata_file = metadata_file[0]
+            with metadata_file.open() as f:
+                metadata = pd.read_csv(f, encoding="utf-8")
+                # must have an 'Image File' column to associate with slides
+                if "Image File" in metadata.columns:
+                    metadata = metadata.set_index("Image File")
+                else:
+                    # can't use it so set to None
+                    metadata = None
+        else:
+            # no metadata file
+            metadata = None
+        self.metadata = metadata
 
         # Set initial slide to first one in base folder
         slide_list = []

From b811b6250297343e0f1ded8e0ee79e67326dc6d4 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:40:49 +0000
Subject: [PATCH 02/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_app_bokeh.py                    | 8 ++++----
 tiatoolbox/visualization/bokeh_app/main.py | 7 +++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index b76f098c0..997a12f52 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
+import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
-import bokeh.models as bkmodels
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 4e83b97a8..c8bf10fb0 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -15,10 +15,6 @@
 import pandas as pd
 import requests
 import torch
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
-
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -63,6 +59,9 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))

From a692c590855f3c34e162de2d3e334c8acb1119cb Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:56:54 +0000
Subject: [PATCH 03/24] add documentation entry

---
 docs/visualization.rst                     | 8 ++++++--
 tiatoolbox/visualization/bokeh_app/main.py | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/visualization.rst b/docs/visualization.rst
index af237dfb6..41df6523e 100644
--- a/docs/visualization.rst
+++ b/docs/visualization.rst
@@ -218,6 +218,10 @@ Additional features can be added to nodes by adding extra keys to the dictionary
 
 It will be possible to color the nodes by these features in the interface, and the top 10 will appear in a tooltip when hovering over a node (you will have to turn on the hovertool in the small toolbar to the right of the main window to enable this, it is disabled by default.)
 
+Slide Level Information
+^^^^^^^^^^^^^^^^^^^^^^^
+
+If you have slide-level predictions, ground truth labels, or other metadata you wish to be able to see associated with slides in the interface, this can be provided as a .csv formatted table placed in the slides folder, with "Image File" as the first column. The other columns can be anything you like. When loading a side in the UI, if the slide name appears in the "image File" column of the provided .csv, any other entries in that row will be displayed in the interface below the main view window when the slide is selected.
 
 .. _examples:
 
@@ -422,7 +426,7 @@ and the ability to toggle on or off specific UI elements:
 
 ::
 
-    "UI_elements_1": {              # controls which UI elements are visible
+    "ui_elements_1": {              # controls which UI elements are visible
         "slide_select": 1,          # slide select box
         "layer_drop": 1,            # overlay select drop down
         "slide_row": 1,             # slide alpha toggle and slider
@@ -437,7 +441,7 @@ and the ability to toggle on or off specific UI elements:
 
 ::
 
-    "UI_elements_2": {              # controls visible UI elements on second tab in UI
+    "ui_elements_2": {              # controls visible UI elements on second tab in UI
         "opt_buttons": 1,           # UI elements providing a few options including if annotations should be filled/outline only
         "pt_size_spinner": 1,       # control for point size and graph node size
         "edge_size_spinner": 1,     # control for edge thickness
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 4e83b97a8..8aac20269 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -140,9 +140,9 @@ def format_info(info: dict[str, Any]) -> str:
     # if there is metadata, add it
     if doc_config.metadata is not None:
         try:
-            row = doc_config.metadata.loc[slide_name]
+            row_data = doc_config.metadata.loc[slide_name]
             info_str += "<br><b>Metadata:</b><br>"
-            for k, v in row.items():
+            for k, v in row_data.items():
                 info_str += f"{k}: {v}<br>"
         except KeyError:
             info_str += "<br><b>No metadata found.</b><br>"
@@ -2016,6 +2016,7 @@ def __init__(self: DocConfig) -> None:
             "overlay_folder": Path("/app_data").joinpath("overlays"),
         }
         self.sys_args = None
+        self.metadata = None
 
     def __getitem__(self: DocConfig, key: str) -> Any:  # noqa: ANN401
         """Get an item from the config."""

From bcd5131509f785dcce8d1107b6fe4d33844ab9da Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:00:01 +0000
Subject: [PATCH 04/24] fix typo

---
 docs/visualization.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/visualization.rst b/docs/visualization.rst
index 41df6523e..69d12a6ed 100644
--- a/docs/visualization.rst
+++ b/docs/visualization.rst
@@ -221,7 +221,7 @@ It will be possible to color the nodes by these features in the interface, and t
 Slide Level Information
 ^^^^^^^^^^^^^^^^^^^^^^^
 
-If you have slide-level predictions, ground truth labels, or other metadata you wish to be able to see associated with slides in the interface, this can be provided as a .csv formatted table placed in the slides folder, with "Image File" as the first column. The other columns can be anything you like. When loading a side in the UI, if the slide name appears in the "image File" column of the provided .csv, any other entries in that row will be displayed in the interface below the main view window when the slide is selected.
+If you have slide-level predictions, ground truth labels, or other metadata you wish to be able to see associated with slides in the interface, this can be provided as a .csv formatted table placed in the slides folder, with "Image File" as the first column. The other columns can be anything you like. When loading a slide in the UI, if the slide name appears in the "Image File" column of the provided .csv, any other entries in that row will be displayed in the interface below the main view window when the slide is selected.
 
 .. _examples:
 

From d0995cca79e4d1bba6a75c226b95f073c1d814b2 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:05:08 +0000
Subject: [PATCH 05/24] improve test coverage

---
 tests/test_json_config_bokeh.py            | 16 +++++++++++++++-
 tiatoolbox/visualization/bokeh_app/main.py |  9 +++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/tests/test_json_config_bokeh.py b/tests/test_json_config_bokeh.py
index 4461cd431..cc70e5635 100644
--- a/tests/test_json_config_bokeh.py
+++ b/tests/test_json_config_bokeh.py
@@ -7,10 +7,11 @@
 from threading import Thread
 from typing import TYPE_CHECKING
 
+import pandas as pd
 import pytest
 import requests
-from bokeh.client.session import ClientSession, pull_session
 
+from bokeh.client.session import ClientSession, pull_session
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
 
@@ -29,6 +30,15 @@ def annotation_path(data_path: dict[str, Path]) -> dict[str, Path]:
         "ndpi-1",
         data_path["base_path"] / "slides",
     )
+    data_path["meta"] = _fetch_remote_sample(
+        "test_meta",
+        data_path["base_path"] / "slides",
+    )
+    meta_df = pd.read_csv(data_path["meta"])
+    # change 'Image File' column name to 'Wrong Name'
+    meta_df = meta_df.rename(columns={"Image File": "Wrong Name"})
+    # save so we can test behaviour if required column isn't there
+    meta_df.to_csv(data_path["meta"], index=False)
     data_path["annotations"] = _fetch_remote_sample(
         "annotation_store_svs_1",
         data_path["base_path"] / "overlays",
@@ -82,6 +92,10 @@ def test_slides_available(bk_session: ClientSession) -> None:
     slide_select.value = ["CMU-1.ndpi"]
     assert len(layer_drop.menu) == 2
 
+    # check the metadata wasnt found as the column name was wrong
+    desc = doc.get_model_by_name("description")
+    assert "Metadata:" not in desc.text
+
     bk_session.document.clear()
     assert len(bk_session.document.roots) == 0
     bk_session.close()
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index aae4945bc..c792861f3 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -15,6 +15,10 @@
 import pandas as pd
 import requests
 import torch
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
+
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -59,9 +63,6 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))
@@ -2101,7 +2102,7 @@ def setup_doc(self: DocConfig, base_doc: Document) -> tuple[Row, Tabs]:
 
         # Set initial slide to first one in base folder
         slide_list = []
-        for ext in ["*.svs", "*ndpi", "*.tiff", "*.mrxs", "*.png", "*.jpg"]:
+        for ext in ["*.svs", "*ndpi", "*.tiff", "*.mrxs", "*.png", "*.jpg", "*.tif"]:
             slide_list.extend(list(doc_config["slide_folder"].glob(ext)))
             slide_list.extend(
                 list(doc_config["slide_folder"].glob(str(Path("*") / ext))),

From 8b24409c2cbc8283d37f997186d9eb99ad118750 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:06:04 +0000
Subject: [PATCH 06/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_json_config_bokeh.py            | 2 +-
 tiatoolbox/visualization/bokeh_app/main.py | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/tests/test_json_config_bokeh.py b/tests/test_json_config_bokeh.py
index cc70e5635..ed103ca22 100644
--- a/tests/test_json_config_bokeh.py
+++ b/tests/test_json_config_bokeh.py
@@ -10,8 +10,8 @@
 import pandas as pd
 import pytest
 import requests
-
 from bokeh.client.session import ClientSession, pull_session
+
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
 
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index c792861f3..830c01a55 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -15,10 +15,6 @@
 import pandas as pd
 import requests
 import torch
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
-
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -63,6 +59,9 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))

From ab711ffb04bdb7f7ad696354e417883d8a799749 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:28:30 +0000
Subject: [PATCH 07/24] add simple plugins

---
 tiatoolbox/cli/visualize.py                   |  12 +-
 tiatoolbox/visualization/bokeh_app/main.py    |  50 ++++--
 .../bokeh_app/templates/__init__.py           |   1 +
 .../bokeh_app/templates/bar_plot_grid.py      | 100 +++++++++++
 .../bokeh_app/templates/image_grid.py         |  69 ++++++++
 .../bokeh_app/templates/index.html            |   5 +-
 .../bokeh_app/templates/stats_plot.py         | 161 ++++++++++++++++++
 tiatoolbox/visualization/ui_utils.py          |  57 +++++++
 8 files changed, 441 insertions(+), 14 deletions(-)
 create mode 100644 tiatoolbox/visualization/bokeh_app/templates/__init__.py
 create mode 100644 tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
 create mode 100644 tiatoolbox/visualization/bokeh_app/templates/image_grid.py
 create mode 100644 tiatoolbox/visualization/bokeh_app/templates/stats_plot.py

diff --git a/tiatoolbox/cli/visualize.py b/tiatoolbox/cli/visualize.py
index 86810954a..31b780a77 100644
--- a/tiatoolbox/cli/visualize.py
+++ b/tiatoolbox/cli/visualize.py
@@ -77,6 +77,14 @@ def run_bokeh(img_input: list[str], port: int, *, noshow: bool) -> None:
     This option must be used in conjunction with --slides.
     The --base-path option should not be used in this case.""",
 )
+@click.option(
+    "--plugin",
+    multiple=True,
+    help=r"""Path to a file to define an extra layout containing extra
+    resources such as graphs below each slide. Some pre-built plugins are
+    available in the tiatoolbox\visualization\templates folder. Can pass
+    multiple instances of this option to add multiple ui additions.""",
+)
 @click.option(
     "--port",
     type=int,
@@ -88,6 +96,7 @@ def visualize(
     base_path: str,
     slides: str,
     overlays: str,
+    plugin: list[str],
     port: int,
     *,
     noshow: bool,
@@ -101,6 +110,7 @@ def visualize(
         base_path (str): Path to base directory containing images to be displayed.
         slides (str): Path to directory containing slides to be displayed.
         overlays (str): Path to directory containing overlays to be displayed.
+        plugin (list): Paths to files containing ui plugins.
         port (int): Port to launch the visualization tool on.
         noshow (bool): Do not launch in browser (mainly intended for testing).
 
@@ -109,7 +119,7 @@ def visualize(
     if base_path is None and (slides is None or overlays is None):
         msg = "Must specify either base-path or both slides and overlays."
         raise ValueError(msg)
-    img_input = [base_path, slides, overlays]
+    img_input = [base_path, slides, overlays, *list(plugin)]
     img_input = [p for p in img_input if p is not None]
     # check that the input paths exist
     for input_path in img_input:
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 830c01a55..4401295b1 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import importlib
 import json
 import sys
 import tempfile
@@ -71,7 +72,7 @@
 )
 from tiatoolbox.tools.pyramid import ZoomifyGenerator
 from tiatoolbox.utils.visualization import random_colors
-from tiatoolbox.visualization.ui_utils import get_level_by_extent
+from tiatoolbox.visualization.ui_utils import UIWrapper, get_level_by_extent
 from tiatoolbox.wsicore.wsireader import WSIReader
 
 if TYPE_CHECKING:  # pragma: no cover
@@ -118,16 +119,10 @@ def __init__(self: DummyAttr, val: Any) -> None:  # noqa: ANN401
         self.item = val
 
 
-class UIWrapper:
-    """Wrapper class to access ui elements."""
-
-    def __init__(self: UIWrapper) -> None:
-        """Initialize the class."""
-        self.active = 0
-
-    def __getitem__(self: UIWrapper, key: str) -> Any:  # noqa: ANN401
-        """Gets ui element for the active window."""
-        return win_dicts[self.active][key]
+def to_camel(name: str) -> str:
+    """Convert a string to upper camel case."""
+    parts = name.split("_")
+    return "".join([p.capitalize() for p in parts])
 
 
 def format_info(info: dict[str, Any]) -> str:
@@ -859,6 +854,13 @@ def slide_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
     if len(new) == 0:
         return
     slide_path = Path(doc_config["slide_folder"]) / Path(new[0])
+    if doc_config["extra_layout"] is not None:
+        # create the extra layout if we can
+        extras = []
+        for cl in doc_config["extra_layout"]:
+            extras.extend(cl.create_extra_layout(slide_path, extra_layout.children))
+            cl.add_to_ui()
+        extra_layout.children = extras
     # Reset the data sources for glyph overlays
     UI["pt_source"].data = {"x": [], "y": []}
     UI["box_source"].data = {"x": [], "y": [], "width": [], "height": []}
@@ -1283,6 +1285,11 @@ def segment_on_box() -> None:
     height=200,
     sizing_mode="stretch_width",
 )
+extra_layout = column(
+    children=[],
+    name="extra_layout",
+    sizing_mode="stretch_both",
+)
 
 
 def gather_ui_elements(  # noqa: PLR0915
@@ -1868,10 +1875,10 @@ def make_window(vstate: ViewerState) -> dict:  # noqa: PLR0915
 
 
 # Main ui containers
-UI = UIWrapper()
 windows = []
 controls = []
 win_dicts = []
+UI = UIWrapper(win_dicts)
 
 # Popup for annotation viewing on double click
 popup_div = Div(
@@ -2045,6 +2052,23 @@ def _get_config(self: DocConfig) -> None:
         base_folder = slide_folder.parent
         overlay_folder = Path(sys_args[2])
 
+        plugins = None
+        if len(sys_args) > 3:  # noqa: PLR2004
+            # also passed a path to a plugin file defining extra ui elements
+            plugins = []
+            for p in sys_args[3:]:
+                plugin_path = Path(p)
+
+                # should have class named (in camel case) after the filename, that
+                # handles the extra ui elements
+                spec = importlib.util.spec_from_file_location(
+                    "plugin_mod",
+                    plugin_path,
+                )
+                module = importlib.util.module_from_spec(spec)
+                spec.loader.exec_module(module)  # Execute the module
+                plugins.append(module.__getattribute__(to_camel(plugin_path.stem))(UI))
+
         # Load a color_dict and/or slide initial view windows from a json file
         config_file = list(overlay_folder.glob("*config.json"))
         config = self.config
@@ -2057,6 +2081,7 @@ def _get_config(self: DocConfig) -> None:
         config["base_folder"] = base_folder
         config["slide_folder"] = slide_folder
         config["overlay_folder"] = overlay_folder
+        config["extra_layout"] = plugins
         config["demo_name"] = self.config["demo_name"]
         if "initial_views" not in config:
             config["initial_views"] = {}
@@ -2130,6 +2155,7 @@ def setup_doc(self: DocConfig, base_doc: Document) -> tuple[Row, Tabs]:
         base_doc.add_root(control_tabs)
         base_doc.add_root(popup_table)
         base_doc.add_root(slide_info)
+        base_doc.add_root(extra_layout)
         base_doc.title = "Tiatoolbox Visualization Tool"
         return slide_wins, control_tabs
 
diff --git a/tiatoolbox/visualization/bokeh_app/templates/__init__.py b/tiatoolbox/visualization/bokeh_app/templates/__init__.py
new file mode 100644
index 000000000..13658c8ad
--- /dev/null
+++ b/tiatoolbox/visualization/bokeh_app/templates/__init__.py
@@ -0,0 +1 @@
+"""plugins and templates for bokeh visualization app."""
diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
new file mode 100644
index 000000000..3d1e82acc
--- /dev/null
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -0,0 +1,100 @@
+"""This module contains a class for creating bar plots for CSV files in a folder."""
+
+import os
+from pathlib import Path
+
+import numpy as np
+import pandas as pd
+from bokeh.layouts import gridplot
+from bokeh.models import ColumnDataSource, HoverTool
+from bokeh.plotting import figure
+from bokeh.transform import dodge
+
+from tiatoolbox.utils.visualization import random_colors
+from tiatoolbox.visualization.ui_utils import UIPlugin
+
+
+class BarPlotGrid(UIPlugin):
+    """Class for creating a grid of bar plots for CSV files in a folder."""
+
+    def create_extra_layout(
+        self: UIPlugin,
+        slide_path: Path,
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Creates a grid-like layout of bar charts for each CSV file within a folder.
+
+        Args:
+            slide_path (str): The path to the slide for which the extra layout is
+            being created
+            UI: contains the main UI elements of the bokeh app
+            old_children: contains the previous children of the layout
+
+        Returns:
+            list: A list containing the new children of the extra layout
+        """
+        folder_path = slide_path.with_name(slide_path.stem + "_files")
+        if not folder_path.is_dir():
+            return []
+        csv_files = [f for f in os.listdir(folder_path) if f.endswith(".csv")]
+        plots = []
+
+        for file in csv_files:
+            filepath = folder_path / file
+            csv_data = pd.read_csv(filepath, header=0, index_col=0)
+
+            # Get tags and labels for the x-axis
+            tags = csv_data.index.tolist()
+            x_labels = csv_data.columns.tolist()
+            colors = random_colors(len(tags), bright=True)
+            colors = [
+                f"{int(c[0]):02x}{int(c[1]):02x}{int(c[2]):02x}" for c in 255 * colors
+            ]
+
+            # Prepare data for Bokeh
+            data = {"x": x_labels}
+            for tag in tags:
+                data[tag] = csv_data.loc[tag].tolist()
+
+            source = ColumnDataSource(data=data)
+
+            # Create the figure (customize as needed)
+            p = figure(
+                x_range=x_labels,
+                title=f"Data from {file}",
+                height=700,
+                width=900,
+                toolbar_location=None,
+                tools="",
+            )
+
+            # Add bars for each tag
+            r = np.array(range(len(tags)))
+            dodge_vals = (r - np.mean(r)) / ((len(r) - 1) * 2)
+            for i, tag in enumerate(tags):
+                p.vbar(
+                    x=dodge("x", dodge_vals[i], range=p.x_range),
+                    top=tag,
+                    width=0.6 / len(tags),
+                    source=source,
+                    legend_label=tag,
+                    color=colors[i],
+                )
+
+            # Customize axes and appearance
+            p.x_range.range_padding = 0.1
+            p.xgrid.grid_line_color = None
+            p.axis.minor_tick_line_color = None
+            p.outline_line_color = None
+
+            # Add a hover tool for more information
+            hover = HoverTool()
+            hover.tooltips = [(tag, f"@{tag}") for tag in tags]
+            p.add_tools(hover)
+
+            plots.append(p)
+
+        # Arrange plots in a grid
+        grid = gridplot(plots, ncols=2)
+
+        return [grid]
diff --git a/tiatoolbox/visualization/bokeh_app/templates/image_grid.py b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
new file mode 100644
index 000000000..614d084f4
--- /dev/null
+++ b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
@@ -0,0 +1,69 @@
+"""Contains a class for creating a Bokeh grid layout of images from a folder."""
+
+from pathlib import Path
+
+import numpy as np
+from bokeh.layouts import gridplot
+from bokeh.plotting import figure
+from PIL import Image
+
+from tiatoolbox.visualization.ui_utils import UIPlugin
+
+
+class ImageGrid(UIPlugin):
+    """Class for creating a grid of images from a folder."""
+
+    def create_extra_layout(
+        self: UIPlugin,
+        slide_path: Path,
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Creates a Bokeh grid layout of images from a specified folder.
+
+        Args:
+            slide_path (str): Path to slide for which the extra layout is being created
+            UI: contains the main UI elements of the bokeh app
+            old_children: contains the previous children of the layout
+
+        Returns:
+            list: A list containing the new children of the extra layout
+        """
+        image_folder_path = slide_path.with_name(slide_path.stem + "_files")
+        if not image_folder_path.is_dir():
+            return []
+        # Find supported images in the folder
+        search_patterns = ["*.jpg", "*.png"]
+        image_paths = []
+        for pattern in search_patterns:
+            image_paths.extend(image_folder_path.glob(pattern))
+
+        # Create figures for each image
+        figures = []
+        for image_path in image_paths:
+            img_pil = Image.open(image_path)
+            img_array = np.array(img_pil)
+            if img_array.shape[2] == 3:  # noqa: PLR2004
+                img_array = np.dstack(
+                    [
+                        img_array,
+                        np.full(
+                            (img_array.shape[0], img_array.shape[1]),
+                            255,
+                            dtype=np.uint8,
+                        ),
+                    ],
+                )
+            # bokeh needs as 2D uint32
+            img_rgba = img_array.view(dtype=np.uint32).reshape(
+                (img_array.shape[0], img_array.shape[1]),
+            )
+
+            p = figure(x_range=(0, 100), y_range=(0, 100), title=image_path.stem)
+            p.axis.visible = False
+            p.image_rgba(image=[img_rgba], x=0, y=0, dw=100, dh=100)
+            figures.append(p)
+
+        # Arrange figures in a grid layout
+        grid = gridplot(figures, ncols=3)
+
+        return [grid]
diff --git a/tiatoolbox/visualization/bokeh_app/templates/index.html b/tiatoolbox/visualization/bokeh_app/templates/index.html
index 863fd3a1f..2d8a9bfe3 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/index.html
+++ b/tiatoolbox/visualization/bokeh_app/templates/index.html
@@ -85,7 +85,10 @@ <h2>Annotation Properties</h2>
   </div>
 </div>
 <div class="slide"> {{ embed(roots.slide_windows) }} </div><div class="ui"> {{ embed(roots.ui_layout) }} </div>
-<div class="description"> {{ embed(roots.description) }} </div>
+<div class="description">
+  {{ embed(roots.description) }}
+  {{ embed(roots.extra_layout) }}
+ </div>
 <script>
   const closePopupBtn = document.getElementById('close-popup');
   const popup = document.getElementById('popup');
diff --git a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
new file mode 100644
index 000000000..02389439d
--- /dev/null
+++ b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
@@ -0,0 +1,161 @@
+"""Module for creating a histogram of distributions of properties of annotations."""
+
+import json
+from pathlib import Path
+
+import numpy as np
+from bokeh.models import Button, ColumnDataSource, Row, Select
+from bokeh.plotting import figure
+from scipy.stats import gaussian_kde
+
+from tiatoolbox import logger
+from tiatoolbox.visualization.ui_utils import UIPlugin
+
+
+def make_histogram(x: list, p: figure) -> None:
+    """Create a histogram and probability density function for the given data."""
+    bins = np.linspace(np.min(x), np.max(x), 40)
+    hist, edges = np.histogram(x, density=True, bins=bins)
+    source = ColumnDataSource(
+        data={
+            "top": hist.tolist(),
+            "bottom": np.zeros((39,)).tolist(),
+            "left": edges[:-1].tolist(),
+            "right": edges[1:].tolist(),
+        },
+    )
+    p.quad(
+        top="top",
+        bottom="bottom",
+        left="left",
+        right="right",
+        source=source,
+        fill_color="skyblue",
+        line_color="white",
+        legend_label="counts",
+    )
+
+    # Estimate probability density function by kernel smoothing
+    eval_pts = np.linspace(np.min(x), np.max(x), 100)
+    pdf = gaussian_kde(x).evaluate(eval_pts)
+
+    source = ColumnDataSource(data={"x": eval_pts, "pdf": pdf})
+    p.line(
+        "x",
+        "pdf",
+        source=source,
+        line_color="#FF8888",
+        line_width=4,
+        alpha=0.7,
+        legend_label="Probability Density Function",
+    )
+
+    p.y_range.start = 0
+    p.xaxis.axis_label = "x"
+    p.yaxis.axis_label = "PDF(x)"
+
+
+def update_histogram(x: list, p: figure) -> None:
+    """Update histrogram and pdf line in the plot."""
+    bins = np.linspace(np.min(x), np.max(x), 40)
+    hist, edges = np.histogram(x, density=True, bins=bins)
+    if len(p.renderers) == 0:
+        return
+    p.renderers[0].data_source.data = {
+        "top": hist.tolist(),
+        "bottom": np.zeros((39,)).tolist(),
+        "left": edges[:-1].tolist(),
+        "right": edges[1:].tolist(),
+    }
+
+    # Probability density function
+    eval_pts = np.linspace(np.min(x), np.max(x), 100)
+    pdf = gaussian_kde(x).evaluate(eval_pts)
+    p.renderers[1].data_source.data = {"x": eval_pts, "pdf": pdf}
+
+
+class StatsPlot(UIPlugin):
+    """Class for creating a histogram of distributions of properties of annotations."""
+
+    def create_extra_layout(
+        self: UIPlugin,
+        slide_path: Path,  # noqa: ARG002
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Creates a UI element to calculate annotation stats in a region.
+
+        Calculates stats of properties of the annotations contained
+        within the selected box, and displays the results in a histogram plot.
+
+        Args:
+            slide_path (str): The path to the slide for which the extra layout is being
+            created
+            UI: contains the main UI elements of the bokeh app
+            old_children: contains the previous children of the layout
+
+        Returns:
+            list: A list containing the new children of the extra layout
+        """
+        get_stats_btn = Button(
+            label="Get Stats",
+            button_type="success",
+            height=47,
+            width=160,
+        )
+        property_select = Select(title="Property", options=[])
+        p = figure(
+            width=1000,
+            height=600,
+            toolbar_location=None,
+            title="Property statistics within selected region",
+        )
+
+        def get_stats_cb(attr: str) -> None:  # noqa: ARG001
+            box = self.UI["box_source"]
+            if len(box.data["x"]) > 0:
+                x = round(
+                    box.data["x"][0] - 0.5 * box.data["width"][0],
+                )
+                y = -round(
+                    box.data["y"][0] + 0.5 * box.data["height"][0],
+                )
+                width = round(box.data["width"][0])
+                height = round(box.data["height"][0])
+            else:
+                logger.info("No box selected")
+                return
+
+            # Get the selected regions annotations
+            resp = self.UI["s"].get(
+                "http://127.0.0.1:5000/tileserver/annotations",
+                data={
+                    "bounds": json.dumps([x, y, x + width, y + height]),
+                    "where": json.dumps(None),
+                },
+            )
+            anns = json.loads(resp.text)
+            consolidate_props = {}
+            for ann in anns:
+                for prop, v in ann["properties"].items():
+                    if prop == "":
+                        continue
+                    if prop not in consolidate_props:
+                        consolidate_props[prop] = []
+                    consolidate_props[prop].append(v)
+
+            self.UI["vstate"].consolidate_props = consolidate_props
+            # Create a histogram of the selected property
+            property_select.options = list(consolidate_props.keys())
+            property_select.value = property_select.options[0]
+            prop = property_select.value
+            make_histogram(consolidate_props[prop], p)
+
+        def property_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
+            prop = property_select.value
+            update_histogram(self.UI["vstate"].consolidate_props[prop], p)
+
+        # associate callbaks
+        get_stats_btn.on_click(get_stats_cb)
+        property_select.on_change("value", property_select_cb)
+
+        return [Row(property_select, get_stats_btn), p]
diff --git a/tiatoolbox/visualization/ui_utils.py b/tiatoolbox/visualization/ui_utils.py
index 36f02a0ff..077d124c4 100644
--- a/tiatoolbox/visualization/ui_utils.py
+++ b/tiatoolbox/visualization/ui_utils.py
@@ -2,7 +2,9 @@
 
 from __future__ import annotations
 
+from abc import ABC, abstractmethod
 from cmath import pi
+from typing import Any
 
 import numpy as np
 
@@ -29,3 +31,58 @@ def get_level_by_extent(extent: tuple[float, float, float, float]) -> int:
 
     # Otherwise return the highest available resolution
     return i - 1
+
+
+class UIWrapper:
+    """Wrapper class to access ui elements."""
+
+    def __init__(self: UIWrapper, win_dicts: list) -> None:
+        """Initialize the class."""
+        self.active = 0
+        self.win_dicts = win_dicts
+
+    def __getitem__(self: UIWrapper, key: str) -> Any:  # noqa: ANN401
+        """Gets ui element for the active window."""
+        return self.win_dicts[self.active][key]
+
+
+class UIPlugin(ABC):
+    """Abstract class for UI plugins.
+
+    To add a new UI plugin, create a new class
+    in its own file that inherits from this class and implements the abstract
+    methods. The class must be named, in camel case, the same as the file that
+    defines it, for example:
+    image_grid.py -> ImageGrid
+    bar_plot_grid.py -> BarPlotGrid
+    To launch the UI with specified plugin(s), add --plugin options to the cli command
+    specifiying the path to each plugin .py file. For example:
+    tiatoolbox visualize --slides path/to/slides --overlays path/to/overlays
+        --plugin path/to/image_grid.py --plugin path/to/bar_plot_grid.py
+
+    We provide a few pre-built plugins in tiatoolbox.visualization.bokeh_app.templates
+    folder. These can be used as a starting point for creating new plugins, or as-is if
+    they happen to meet your needs. Provided plugins are:
+    - ImageGrid: Displays a grid of images below the main view window from a specified
+    folder for each slide.
+    - BarPlotGrid: Displays a grid of bar plots below the main view window for each csv
+    file found within a folder for each slide.
+    - StatsPlot: Displays a histogram of the distributions of properties of annotations
+    contained within the selected box-shaped region of the slide.
+    """
+
+    def __init__(self: UIPlugin, ui: UIWrapper) -> None:
+        """Initialize the class."""
+        self.UI = ui
+
+    @abstractmethod
+    def create_extra_layout(
+        self: UIPlugin,
+        slide_path: str,
+        old_children: list,
+    ) -> list:
+        """Create extra layout that will be placed below the main view window."""
+        raise NotImplementedError
+
+    def add_to_ui(self: UIPlugin) -> None:  # noqa: B027
+        """Insert a UI element into the existing main UI panel."""

From 8755f27a314ad399719296b3d539c0787e2a5605 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 13 Mar 2024 23:32:55 +0000
Subject: [PATCH 08/24] fix test

---
 tests/test_app_bokeh.py                    | 12 ++++++------
 tiatoolbox/visualization/bokeh_app/main.py |  9 ++++++---
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index 997a12f52..2978a4661 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
-import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
+import bokeh.models as bkmodels
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
@@ -185,8 +185,8 @@ def test_get_level_by_extent() -> None:
 
 def test_roots(doc: Document) -> None:
     """Test that the document has the correct number of roots."""
-    # should be 4 roots: main window, controls, slide_info, popup table
-    assert len(doc.roots) == 4
+    # should be 5 roots: main window, controls, slide_info, popup, extra_layout
+    assert len(doc.roots) == 5
 
 
 def test_config_loaded(data_path: pytest.TempPathFactory) -> None:
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 4401295b1..035a4193c 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -16,6 +16,10 @@
 import pandas as pd
 import requests
 import torch
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
+
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -60,9 +64,6 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))
@@ -1871,6 +1872,8 @@ def make_window(vstate: ViewerState) -> dict:  # noqa: PLR0915
         "hover": hover,
         "user": user,
         "color_bar": color_bar,
+        "ui_layout": ui_layout,
+        "extra_options": extra_options,
     }
 
 

From b7715f6897022141763f0c55580f09907be75a61 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 14 Mar 2024 20:59:17 +0000
Subject: [PATCH 09/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_app_bokeh.py                    | 8 ++++----
 tiatoolbox/visualization/bokeh_app/main.py | 7 +++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index 2978a4661..3444e5ade 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
+import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
-import bokeh.models as bkmodels
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 035a4193c..fb5d7365a 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -16,10 +16,6 @@
 import pandas as pd
 import requests
 import torch
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
-
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -64,6 +60,9 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))

From 4ca17e15063e283aa987b34b3e40b17e3ab65624 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Thu, 14 Mar 2024 23:34:31 +0000
Subject: [PATCH 10/24] change circle size->radius for bokeh 3.4 compatibility

---
 tiatoolbox/visualization/bokeh_app/main.py | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 035a4193c..1ef130a0f 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -785,7 +785,7 @@ def overlay_alpha_cb(attr: str, old: float, new: float) -> None:  # noqa: ARG001
 
 def pt_size_cb(attr: str, old: float, new: float) -> None:  # noqa: ARG001
     """Callback to change the size of the points."""
-    UI["vstate"].graph_node.size = 2 * new
+    UI["vstate"].graph_node.radius = 2 * new
 
 
 def edge_size_cb(attr: str, old: float, new: float) -> None:  # noqa: ARG001
@@ -1790,7 +1790,14 @@ def make_window(vstate: ViewerState) -> dict:  # noqa: PLR0915
     box_source = ColumnDataSource({"x": [], "y": [], "width": [], "height": []})
     pt_source = ColumnDataSource({"x": [], "y": []})
     r = p.rect("x", "y", "width", "height", source=box_source, fill_alpha=0)
-    c = p.circle("x", "y", source=pt_source, color="red", size=5)
+    c = p.circle(
+        "x",
+        "y",
+        source=pt_source,
+        color="red",
+        radius=3,
+        radius_units="screen",
+    )
     p.add_tools(BoxEditTool(renderers=[r], num_objects=1))
     p.add_tools(PointDrawTool(renderers=[c]))
     p.add_tools(TapTool())
@@ -1802,7 +1809,13 @@ def make_window(vstate: ViewerState) -> dict:  # noqa: PLR0915
     # Add graph stuff
     node_source = ColumnDataSource({"x_": [], "y_": [], "node_color_": []})
     edge_source = ColumnDataSource({"x0_": [], "y0_": [], "x1_": [], "y1_": []})
-    vstate.graph_node = Circle(x="x_", y="y_", fill_color="node_color_", size=5)
+    vstate.graph_node = Circle(
+        x="x_",
+        y="y_",
+        fill_color="node_color_",
+        radius=3,
+        radius_units="screen",
+    )
     vstate.graph_edge = Segment(x0="x0_", y0="y0_", x1="x1_", y1="y1_")
     p.add_glyph(node_source, vstate.graph_node)
     node_source.selected.on_change("indices", node_select_cb)

From 1e8df6293fc15f2d69568cf3ddb629e3d7cf5970 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:19:23 +0000
Subject: [PATCH 11/24] remove refs to size

---
 tests/test_app_bokeh.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index 3444e5ade..f5cefa6a4 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
-import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
+import bokeh.models as bkmodels
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
@@ -627,7 +627,7 @@ def test_pt_size_spinner(doc: Document) -> None:
     pt_size_spinner.value = 10
     # check that the point size has been set correctly
     assert (
-        main.UI["p"].renderers[main.UI["vstate"].layer_dict["nodes"]].glyph.size
+        main.UI["p"].renderers[main.UI["vstate"].layer_dict["nodes"]].glyph.radius
         == 2 * 10
     )
 

From 96ccd9786e8a0fee19299a925f83da246c90b11a Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:21:11 +0000
Subject: [PATCH 12/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_app_bokeh.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index f5cefa6a4..f9527a735 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
+import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
-import bokeh.models as bkmodels
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer

From cd9e3bd025d8aabe18df3e9fc35bb9280a1a6a9b Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:51:44 +0000
Subject: [PATCH 13/24] update img size

---
 .../visualization/bokeh_app/templates/image_grid.py       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/tiatoolbox/visualization/bokeh_app/templates/image_grid.py b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
index 614d084f4..17281aeea 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
@@ -58,7 +58,13 @@ def create_extra_layout(
                 (img_array.shape[0], img_array.shape[1]),
             )
 
-            p = figure(x_range=(0, 100), y_range=(0, 100), title=image_path.stem)
+            p = figure(
+                x_range=(0, 100),
+                y_range=(0, 100),
+                width=360,
+                height=360,
+                title=image_path.stem,
+            )
             p.axis.visible = False
             p.image_rgba(image=[img_rgba], x=0, y=0, dw=100, dh=100)
             figures.append(p)

From d2a6ec487a3e3a09019e0081d4d2b593e4e5515b Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:04:57 +0000
Subject: [PATCH 14/24] try dialog

---
 .../bokeh_app/templates/stats_plot.py         | 12 ++++++++---
 tiatoolbox/visualization/ui_utils.py          | 20 +++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
index 02389439d..fe492265f 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
@@ -4,12 +4,12 @@
 from pathlib import Path
 
 import numpy as np
-from bokeh.models import Button, ColumnDataSource, Row, Select
+from bokeh.models import Button, Column, ColumnDataSource, Select
 from bokeh.plotting import figure
 from scipy.stats import gaussian_kde
 
 from tiatoolbox import logger
-from tiatoolbox.visualization.ui_utils import UIPlugin
+from tiatoolbox.visualization.ui_utils import UIPlugin, make_into_popup
 
 
 def make_histogram(x: list, p: figure) -> None:
@@ -157,5 +157,11 @@ def property_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
         # associate callbaks
         get_stats_btn.on_click(get_stats_cb)
         property_select.on_change("value", property_select_cb)
+        make_into_popup(
+            Column(children=[property_select, p]),
+            get_stats_btn.js_on_click,
+            "Stats",
+        )
 
-        return [Row(property_select, get_stats_btn), p]
+        # return [Row(property_select, get_stats_btn), p]
+        return [get_stats_btn]
diff --git a/tiatoolbox/visualization/ui_utils.py b/tiatoolbox/visualization/ui_utils.py
index 077d124c4..9054ae23a 100644
--- a/tiatoolbox/visualization/ui_utils.py
+++ b/tiatoolbox/visualization/ui_utils.py
@@ -7,6 +7,7 @@
 from typing import Any
 
 import numpy as np
+from bokeh.models import Button, CloseDialog, Column, Dialog, OpenDialog
 
 scale_factor = 2
 init_res = 40211.5 * scale_factor * (2 / (100 * pi))
@@ -86,3 +87,22 @@ def create_extra_layout(
 
     def add_to_ui(self: UIPlugin) -> None:  # noqa: B027
         """Insert a UI element into the existing main UI panel."""
+
+
+def make_into_popup(layout, trigger: callable, title="popup") -> Dialog:
+    """Make a layout into a popup, that will open on trigger callback."""
+    close_plot = Button(label="Close")
+    dialog = Dialog(
+        title=title,
+        content=Column(
+            sizing_mode="stretch_both",
+            children=[
+                layout,
+                close_plot,
+            ],
+        ),
+    )
+    trigger(OpenDialog(dialog=dialog))
+    close_plot.js_on_click(CloseDialog(dialog=dialog))
+
+    return dialog

From 7b40965abc94746a56fb3c2374207d93271b2410 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:43:50 +0000
Subject: [PATCH 15/24] replace dropdown with select

---
 tiatoolbox/visualization/bokeh_app/main.py | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 4a36e494e..f5d8fd4fe 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -32,7 +32,6 @@
     CustomJS,
     DataTable,
     Div,
-    Dropdown,
     FuncTickFormatter,
     Glyph,
     HoverTool,
@@ -724,7 +723,7 @@ def populate_layer_list(slide_name: str, overlay_path: Path) -> None:
         file_list.extend(list(overlay_path.glob(str(Path("*") / ext))))
         file_list.extend(list(overlay_path.glob(ext)))
     file_list = [(str(p), str(p)) for p in sorted(file_list) if slide_name in str(p)]
-    UI["layer_drop"].menu = file_list
+    UI["layer_drop"].options = file_list
 
 
 def populate_slide_list(slide_folder: Path, search_txt: str | None = None) -> None:
@@ -884,7 +883,7 @@ def slide_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
 
     # Load the overlay and graph automatically if set in config
     if doc_config["auto_load"]:
-        for f in UI["layer_drop"].menu:
+        for f in UI["layer_drop"].options:
             dummy_attr = DummyAttr(f[0])
             layer_drop_cb(dummy_attr)
 
@@ -998,22 +997,22 @@ def update_ui_on_new_annotations(ann_types: list[str]) -> None:
     change_tiles("overlay")
 
 
-def layer_drop_cb(attr: MenuItemClick) -> None:
+def layer_drop_cb(attr: str, old: str, new: str) -> None:
     """Set up the newly chosen overlay."""
-    if Path(attr.item).suffix == ".json":
+    if Path(new).suffix == ".json":
         # It's a graph
         handle_graph_layer(attr)
         return
 
     # Otherwise it's a tile-based overlay of some form
-    fname = make_safe_name(attr.item)
+    fname = make_safe_name(new)
     resp = UI["s"].put(
         f"http://{host2}:5000/tileserver/overlay",
         data={"overlay_path": fname},
     )
     resp = json.loads(resp.text)
 
-    if Path(attr.item).suffix in [".db", ".dat", ".geojson"]:
+    if Path(new).suffix in [".db", ".dat", ".geojson"]:
         update_ui_on_new_annotations(resp)
     else:
         add_layer(resp)
@@ -1550,10 +1549,9 @@ def gather_ui_elements(  # noqa: PLR0915
         ColorPicker(color=col[0:3], width=60, max_width=60, sizing_mode="stretch_width")
         for col in vstate.colors
     ]
-    layer_drop = Dropdown(
-        label="Add Overlay",
-        button_type="warning",
-        menu=[None],
+    layer_drop = Select(
+        title="Add Overlay",
+        options=[None],
         sizing_mode="stretch_width",
         name=f"layer_drop{win_num}",
     )
@@ -1577,7 +1575,7 @@ def gather_ui_elements(  # noqa: PLR0915
     scale_spinner.on_change("value", scale_spinner_cb)
     to_model_button.on_click(to_model_cb)
     model_drop.on_change("value", model_drop_cb)
-    layer_drop.on_click(layer_drop_cb)
+    layer_drop.on_change("value", layer_drop_cb)
     opt_buttons.on_change("active", opt_buttons_cb)
     slide_toggle.on_click(slide_toggle_cb)
     overlay_toggle.on_click(overlay_toggle_cb)

From 646848e98121a37b20f48c83fa04347f428b23cf Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Thu, 4 Apr 2024 18:04:59 +0100
Subject: [PATCH 16/24] once and per slide options

---
 tiatoolbox/visualization/bokeh_app/main.py    | 54 ++++++++++-------
 .../bokeh_app/templates/bar_plot_grid.py      |  8 +++
 .../bokeh_app/templates/image_grid.py         | 12 +++-
 .../bokeh_app/templates/stats_plot.py         | 59 ++++++++++++-------
 tiatoolbox/visualization/ui_utils.py          | 42 +++++++++----
 5 files changed, 120 insertions(+), 55 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index f5d8fd4fe..d2d2dcaba 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -853,6 +853,7 @@ def slide_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
     if len(new) == 0:
         return
     slide_path = Path(doc_config["slide_folder"]) / Path(new[0])
+    # add any extra per-slide elements from plugins
     if doc_config["extra_layout"] is not None:
         # create the extra layout if we can
         extras = []
@@ -997,7 +998,7 @@ def update_ui_on_new_annotations(ann_types: list[str]) -> None:
     change_tiles("overlay")
 
 
-def layer_drop_cb(attr: str, old: str, new: str) -> None:
+def layer_drop_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
     """Set up the newly chosen overlay."""
     if Path(new).suffix == ".json":
         # It's a graph
@@ -1869,22 +1870,35 @@ def make_window(vstate: ViewerState) -> dict:  # noqa: PLR0915
         )
         slide_wins.children.append(p)
 
-    # Return a dictionary collecting all the things related to window
-    return {
-        **elements_dict,
-        "p": p,
-        "vstate": vstate,
-        "s": s,
-        "box_source": box_source,
-        "pt_source": pt_source,
-        "node_source": node_source,
-        "edge_source": edge_source,
-        "hover": hover,
-        "user": user,
-        "color_bar": color_bar,
-        "ui_layout": ui_layout,
-        "extra_options": extra_options,
-    }
+    # Add the dictionary collecting all the things related to window to UI
+    win_dicts.append(
+        {
+            **elements_dict,
+            "p": p,
+            "vstate": vstate,
+            "s": s,
+            "box_source": box_source,
+            "pt_source": pt_source,
+            "node_source": node_source,
+            "edge_source": edge_source,
+            "hover": hover,
+            "user": user,
+            "color_bar": color_bar,
+            "ui_layout": ui_layout,
+            "extra_options": extra_options,
+        },
+    )
+
+    # add in any extra one-time elements from plugins
+    if doc_config["extra_layout"] is not None:
+        # create the extra layout if we can
+        extras = []
+        for cl in doc_config["extra_layout"]:
+            extras.extend(
+                cl.create_extra_layout_once(vstate.slide_path, extra_layout.children),
+            )
+            cl.add_to_ui_once()
+        extra_layout.children = extras
 
 
 # Main ui containers
@@ -1959,13 +1973,13 @@ def control_tabs_cb(attr: str, old: int, new: int) -> None:  # noqa: ARG001
     """Callback to handle selecting active window."""
     if new == 1 and len(slide_wins.children) == 1:
         # Make new window
-        win_dicts.append(make_window(ViewerState(win_dicts[0]["vstate"].slide_path)))
+        UI.active = new
+        make_window(ViewerState(win_dicts[0]["vstate"].slide_path))
         win_dicts[1]["vstate"].thickness = win_dicts[0]["vstate"].thickness
         bounds = get_view_bounds(
             UI["vstate"].dims,
             np.array([UI["p"].width, UI["p"].height]),
         )
-        UI.active = new
         setup_config_ui_settings(doc_config)
         win_dicts[0]["vstate"].init_z = get_level_by_extent(
             (0, bounds[2], bounds[1], 0),
@@ -2149,7 +2163,7 @@ def setup_doc(self: DocConfig, base_doc: Document) -> tuple[Row, Tabs]:
             first_slide_path = self.config["slide_folder"] / self.config["first_slide"]
 
         # Make initial window
-        win_dicts.append(make_window(ViewerState(first_slide_path)))
+        make_window(ViewerState(first_slide_path))
         # Set up any initial ui settings from config file
         setup_config_ui_settings(self.config)
         UI["vstate"].init = False
diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
index 3d1e82acc..fad731375 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -98,3 +98,11 @@ def create_extra_layout(
         grid = gridplot(plots, ncols=2)
 
         return [grid]
+
+    def create_extra_layout_once(
+        self: UIPlugin,
+        slide_path: str,  # noqa: ARG002
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Create extra layout elements on widow initialization."""
+        return []
diff --git a/tiatoolbox/visualization/bokeh_app/templates/image_grid.py b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
index 17281aeea..a6127852b 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/image_grid.py
@@ -61,8 +61,8 @@ def create_extra_layout(
             p = figure(
                 x_range=(0, 100),
                 y_range=(0, 100),
-                width=360,
-                height=360,
+                width=400,
+                height=400,
                 title=image_path.stem,
             )
             p.axis.visible = False
@@ -73,3 +73,11 @@ def create_extra_layout(
         grid = gridplot(figures, ncols=3)
 
         return [grid]
+
+    def create_extra_layout_once(
+        self: UIPlugin,
+        slide_path: str,  # noqa: ARG002
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Create extra layout elements on widow initialization."""
+        return []
diff --git a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
index fe492265f..7930d011b 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
@@ -11,9 +11,30 @@
 from tiatoolbox import logger
 from tiatoolbox.visualization.ui_utils import UIPlugin, make_into_popup
 
+popup_list = []
 
-def make_histogram(x: list, p: figure) -> None:
+
+def make_histogram(consolidate_props: dict, prop: str, popup_layout: Column) -> None:
     """Create a histogram and probability density function for the given data."""
+    property_select = Select(title="Property", options=[])
+    p = figure(
+        width=1000,
+        height=600,
+        toolbar_location=None,
+        title="Property statistics within selected region",
+    )
+    popup_layout.children = [property_select, p]
+    property_select.options = list(consolidate_props.keys())
+    property_select.value = property_select.options[0]
+    prop = property_select.value
+
+    def property_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
+        prop = property_select.value
+        update_histogram(consolidate_props[prop], p)
+
+    property_select.on_change("value", property_select_cb)
+
+    x = consolidate_props[prop]
     bins = np.linspace(np.min(x), np.max(x), 40)
     hist, edges = np.histogram(x, density=True, bins=bins)
     source = ColumnDataSource(
@@ -82,6 +103,18 @@ def create_extra_layout(
         slide_path: Path,  # noqa: ARG002
         old_children: list,  # noqa: ARG002
     ) -> list:
+        """Create extra layout that will be placed below the main view window."""
+        return []
+
+    def create_extra_layout_once(
+        self: UIPlugin,
+        slide_path: str,  # noqa: ARG002
+        old_children: list,  # noqa: ARG002
+    ) -> list:
+        """Create extra layout elements on widow initialization."""
+        return []
+
+    def add_to_ui_once(self: UIPlugin) -> None:
         """Creates a UI element to calculate annotation stats in a region.
 
         Calculates stats of properties of the annotations contained
@@ -102,13 +135,7 @@ def create_extra_layout(
             height=47,
             width=160,
         )
-        property_select = Select(title="Property", options=[])
-        p = figure(
-            width=1000,
-            height=600,
-            toolbar_location=None,
-            title="Property statistics within selected region",
-        )
+        popup_layout = Column(children=[], sizing_mode="fixed")
 
         def get_stats_cb(attr: str) -> None:  # noqa: ARG001
             box = self.UI["box_source"]
@@ -145,23 +172,15 @@ def get_stats_cb(attr: str) -> None:  # noqa: ARG001
 
             self.UI["vstate"].consolidate_props = consolidate_props
             # Create a histogram of the selected property
-            property_select.options = list(consolidate_props.keys())
-            property_select.value = property_select.options[0]
-            prop = property_select.value
-            make_histogram(consolidate_props[prop], p)
-
-        def property_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
-            prop = property_select.value
-            update_histogram(self.UI["vstate"].consolidate_props[prop], p)
+            make_histogram(consolidate_props, prop, popup_layout)
 
         # associate callbaks
         get_stats_btn.on_click(get_stats_cb)
-        property_select.on_change("value", property_select_cb)
         make_into_popup(
-            Column(children=[property_select, p]),
+            popup_layout,
             get_stats_btn.js_on_click,
             "Stats",
         )
 
-        # return [Row(property_select, get_stats_btn), p]
-        return [get_stats_btn]
+        # add to extra_options column children
+        self.UI["extra_options"].children.append(get_stats_btn)
diff --git a/tiatoolbox/visualization/ui_utils.py b/tiatoolbox/visualization/ui_utils.py
index 9054ae23a..a6bf44730 100644
--- a/tiatoolbox/visualization/ui_utils.py
+++ b/tiatoolbox/visualization/ui_utils.py
@@ -7,7 +7,7 @@
 from typing import Any
 
 import numpy as np
-from bokeh.models import Button, CloseDialog, Column, Dialog, OpenDialog
+from bokeh.models import Dialog, Model, OpenDialog
 
 scale_factor = 2
 init_res = 40211.5 * scale_factor * (2 / (100 * pi))
@@ -82,27 +82,43 @@ def create_extra_layout(
         slide_path: str,
         old_children: list,
     ) -> list:
-        """Create extra layout that will be placed below the main view window."""
+        """Create extra layout that will be placed below the main view window.
+
+        Will be run every time the slide is changed.
+        """
         raise NotImplementedError
 
     def add_to_ui(self: UIPlugin) -> None:  # noqa: B027
-        """Insert a UI element into the existing main UI panel."""
+        """Insert a UI element into the existing main UI panel.
+
+        Will be run every time the slide is changed.
+        """
+
+    @abstractmethod
+    def create_extra_layout_once(
+        self: UIPlugin,
+        slide_path: str,
+        old_children: list,
+    ) -> list:
+        """Create extra layout that will be placed below the main view window.
+
+        Will be run only once on loading UI.
+        """
+        raise NotImplementedError
+
+    def add_to_ui_once(self: UIPlugin) -> None:  # noqa: B027
+        """Insert a UI element into the existing main UI panel.
+
+        Will be run only once on loading UI.
+        """
 
 
-def make_into_popup(layout, trigger: callable, title="popup") -> Dialog:
+def make_into_popup(layout: Model, trigger: callable, title: str = "popup") -> Dialog:
     """Make a layout into a popup, that will open on trigger callback."""
-    close_plot = Button(label="Close")
     dialog = Dialog(
         title=title,
-        content=Column(
-            sizing_mode="stretch_both",
-            children=[
-                layout,
-                close_plot,
-            ],
-        ),
+        content=layout,
     )
     trigger(OpenDialog(dialog=dialog))
-    close_plot.js_on_click(CloseDialog(dialog=dialog))
 
     return dialog

From 4a2e48f70c7d6a102dd4955783730647c248a8dc Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Mon, 8 Apr 2024 02:58:15 +0100
Subject: [PATCH 17/24] update tests for switch to layer select

---
 tests/test_app_bokeh.py                    | 31 ++++++++--------------
 tests/test_json_config_bokeh.py            |  4 +--
 tests/test_server_bokeh.py                 |  2 +-
 tiatoolbox/visualization/bokeh_app/main.py | 11 ++++----
 4 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index f9527a735..a862b2eae 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -18,7 +18,7 @@
 import requests
 from bokeh.application import Application
 from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
+from bokeh.events import ButtonClick, DoubleTap
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
@@ -262,8 +262,7 @@ def test_add_annotation_layer(doc: Document, data_path: pytest.TempPathFactory)
     slide_select.value = [data_path["slide2"].name]
     layer_drop = doc.get_model_by_name("layer_drop0")
     # trigger an event to select the geojson file
-    click = MenuItemClick(layer_drop, str(data_path["geojson_anns"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["geojson_anns"])
     assert main.UI["vstate"].types == ["annotation"]
 
     # test the name2type function.
@@ -272,11 +271,10 @@ def test_add_annotation_layer(doc: Document, data_path: pytest.TempPathFactory)
     # test loading an annotation store
     slide_select.value = [data_path["slide1"].name]
     layer_drop = doc.get_model_by_name("layer_drop0")
-    assert len(layer_drop.menu) == 5
+    assert len(layer_drop.options) == 5
     n_renderers = len(doc.get_model_by_name("slide_windows").children[0].renderers)
     # trigger an event to select the annotation .db file
-    click = MenuItemClick(layer_drop, str(data_path["annotations"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["annotations"])
     # should be one more renderer now
     assert len(doc.get_model_by_name("slide_windows").children[0].renderers) == (
         n_renderers + 1
@@ -369,8 +367,7 @@ def test_load_graph(doc: Document, data_path: pytest.TempPathFactory) -> None:
     """Test loading a graph."""
     layer_drop = doc.get_model_by_name("layer_drop0")
     # trigger an event to select the graph file
-    click = MenuItemClick(layer_drop, str(data_path["graph"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["graph"])
     # we should have 2144 nodes in the node_source now
     assert len(main.UI["node_source"].data["x_"]) == 2144
 
@@ -379,8 +376,7 @@ def test_graph_with_feats(doc: Document, data_path: pytest.TempPathFactory) -> N
     """Test loading a graph with features."""
     layer_drop = doc.get_model_by_name("layer_drop0")
     # trigger an event to select the graph .json file
-    click = MenuItemClick(layer_drop, str(data_path["graph_feats"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["graph_feats"])
     # we should have keys for the features in node data source now
     for i in range(10):
         assert f"feat_{i}" in main.UI["node_source"].data
@@ -402,8 +398,7 @@ def test_graph_with_feats(doc: Document, data_path: pytest.TempPathFactory) -> N
     )
 
     # test graph overlay option remains on loading new overlay
-    click = MenuItemClick(layer_drop, str(data_path["annotations"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["annotations"])
     assert "graph_overlay" in cmap_select.options
 
 
@@ -411,8 +406,7 @@ def test_load_img_overlay(doc: Document, data_path: pytest.TempPathFactory) -> N
     """Test loading an image overlay."""
     layer_drop = doc.get_model_by_name("layer_drop0")
     # trigger an event to select the image overlay
-    click = MenuItemClick(layer_drop, str(data_path["img_overlay"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["img_overlay"])
     layer_slider = doc.get_model_by_name("layer2_slider")
     assert layer_slider is not None
 
@@ -474,8 +468,7 @@ def test_hovernet_on_box(doc: Document, data_path: pytest.TempPathFactory) -> No
     cprop_select = doc.get_model_by_name("cprop0")
     cprop_select.value = ["prob"]
     layer_drop = doc.get_model_by_name("layer_drop0")
-    click = MenuItemClick(layer_drop, str(data_path["dat_anns"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["dat_anns"])
     assert main.UI["vstate"].types == ["annotation"]
     # check the per-type ui controls have been updated
     assert len(main.UI["color_column"].children) == 1
@@ -516,8 +509,7 @@ def test_type_select(doc: Document, data_path: pytest.TempPathFactory) -> None:
     """Test selecting/deselecting specific types."""
     # load annotation layer
     layer_drop = doc.get_model_by_name("layer_drop0")
-    click = MenuItemClick(layer_drop, str(data_path["annotations"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["annotations"])
     time.sleep(1)
     im = get_tile("overlay", 4, 8, 4, show=False)
     _, num_before = label(np.any(im[:, :, :3], axis=2))
@@ -569,8 +561,7 @@ def test_node_and_edge_alpha(doc: Document, data_path: pytest.TempPathFactory) -
     """Test sliders for adjusting graph node and edge alpha."""
     layer_drop = doc.get_model_by_name("layer_drop0")
     # trigger an event to select the graph .db file
-    click = MenuItemClick(layer_drop, str(data_path["graph"]))
-    layer_drop._trigger_event(click)
+    layer_drop.value = str(data_path["graph"])
 
     type_column_list = doc.get_model_by_name("type_column0").children
     color_column_list = doc.get_model_by_name("color_column0").children
diff --git a/tests/test_json_config_bokeh.py b/tests/test_json_config_bokeh.py
index ed103ca22..593d22d49 100644
--- a/tests/test_json_config_bokeh.py
+++ b/tests/test_json_config_bokeh.py
@@ -87,10 +87,10 @@ def test_slides_available(bk_session: ClientSession) -> None:
     assert slide_select.value[0] == "CMU-1-Small-Region.svs"
 
     layer_drop = doc.get_model_by_name("layer_drop0")
-    assert len(layer_drop.menu) == 2
+    assert len(layer_drop.options) == 2
     # check that the overlays are available.
     slide_select.value = ["CMU-1.ndpi"]
-    assert len(layer_drop.menu) == 2
+    assert len(layer_drop.options) == 2
 
     # check the metadata wasnt found as the column name was wrong
     desc = doc.get_model_by_name("description")
diff --git a/tests/test_server_bokeh.py b/tests/test_server_bokeh.py
index 2289bcbc2..cd6439714 100644
--- a/tests/test_server_bokeh.py
+++ b/tests/test_server_bokeh.py
@@ -85,7 +85,7 @@ def test_slides_available(bk_session: ClientSession) -> None:
     # check that the overlays are available.
     slide_select.value = ["CMU-1-Small-region.svs"]
     layer_drop = doc.get_model_by_name("layer_drop0")
-    assert len(layer_drop.menu) == 2
+    assert len(layer_drop.options) == 2
 
     bk_session.document.clear()
     assert len(bk_session.document.roots) == 0
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index d2d2dcaba..b119d8045 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -16,7 +16,7 @@
 import pandas as pd
 import requests
 import torch
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
+from bokeh.events import ButtonClick, DoubleTap
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
 from bokeh.models import (
@@ -885,14 +885,13 @@ def slide_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
     # Load the overlay and graph automatically if set in config
     if doc_config["auto_load"]:
         for f in UI["layer_drop"].options:
-            dummy_attr = DummyAttr(f[0])
-            layer_drop_cb(dummy_attr)
+            layer_drop_cb("", "", f[0])
 
 
-def handle_graph_layer(attr: MenuItemClick) -> None:  # skipcq: PY-R1000
+def handle_graph_layer(graph_path: str) -> None:  # skipcq: PY-R1000
     """Handle adding a graph layer."""
     do_feats = False
-    with Path(attr.item).open("rb") as f:
+    with Path(graph_path).open("rb") as f:
         graph_dict = json.load(f)
     # Convert the values to numpy arrays
     for k, v in graph_dict.items():
@@ -1002,7 +1001,7 @@ def layer_drop_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
     """Set up the newly chosen overlay."""
     if Path(new).suffix == ".json":
         # It's a graph
-        handle_graph_layer(attr)
+        handle_graph_layer(new)
         return
 
     # Otherwise it's a tile-based overlay of some form

From c8ffd306a9bad60bea312769de9f379d2ef524d4 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 12 Apr 2024 14:41:31 +0100
Subject: [PATCH 18/24] add missing docstrings

---
 tiatoolbox/visualization/bokeh_app/templates/stats_plot.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
index 7930d011b..3349c7e7f 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/stats_plot.py
@@ -14,7 +14,7 @@
 popup_list = []
 
 
-def make_histogram(consolidate_props: dict, prop: str, popup_layout: Column) -> None:
+def make_histogram(consolidate_props: dict, popup_layout: Column) -> None:
     """Create a histogram and probability density function for the given data."""
     property_select = Select(title="Property", options=[])
     p = figure(
@@ -29,6 +29,7 @@ def make_histogram(consolidate_props: dict, prop: str, popup_layout: Column) ->
     prop = property_select.value
 
     def property_select_cb(attr: str, old: str, new: str) -> None:  # noqa: ARG001
+        """Update the histogram and pdf line when new property is selected."""
         prop = property_select.value
         update_histogram(consolidate_props[prop], p)
 
@@ -138,6 +139,7 @@ def add_to_ui_once(self: UIPlugin) -> None:
         popup_layout = Column(children=[], sizing_mode="fixed")
 
         def get_stats_cb(attr: str) -> None:  # noqa: ARG001
+            """Get the stats of the annotations in the selected region."""
             box = self.UI["box_source"]
             if len(box.data["x"]) > 0:
                 x = round(
@@ -172,7 +174,7 @@ def get_stats_cb(attr: str) -> None:  # noqa: ARG001
 
             self.UI["vstate"].consolidate_props = consolidate_props
             # Create a histogram of the selected property
-            make_histogram(consolidate_props, prop, popup_layout)
+            make_histogram(consolidate_props, popup_layout)
 
         # associate callbaks
         get_stats_btn.on_click(get_stats_cb)

From e15f6bbe46c0f098aa831a4b5b20d87a5b8d94e3 Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Tue, 28 May 2024 19:14:31 +0100
Subject: [PATCH 19/24] add tests

---
 tests/test_app_bokeh.py                          | 16 ++++++++++++----
 tiatoolbox/data/remote_samples.yaml              |  2 ++
 .../bokeh_app/templates/bar_plot_grid.py         |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index a862b2eae..e5e39b6ee 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
-import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
+import bokeh.models as bkmodels
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
@@ -133,6 +133,14 @@ def annotation_path(data_path: dict[str, Path]) -> dict[str, object]:
         "config_2",
         data_path["base_path"] / "overlays",
     )
+    data_path["plugin_img"] = _fetch_remote_sample(
+        "stainnorm-source",
+        data_path["base_path"] / "slides" / "CMU-1_files",
+    )
+    data_path["plugin_csv"] = _fetch_remote_sample(
+        "test_csv",
+        data_path["base_path"] / "slides" / "CMU-1_files",
+    )
     return data_path
 
 
diff --git a/tiatoolbox/data/remote_samples.yaml b/tiatoolbox/data/remote_samples.yaml
index e8b943039..69d0cd28c 100644
--- a/tiatoolbox/data/remote_samples.yaml
+++ b/tiatoolbox/data/remote_samples.yaml
@@ -143,5 +143,7 @@ files:
     url: [ *testdata, "annotation/test2_config.json"]
   test_meta:
     url: [ *testdata, "annotation/test_meta.csv"]
+  test_csv:
+    url: [ *testdata, "annotation/metrics_10.csv"]
   nuclick-output:
     url: [*modelroot, "predictions/nuclei_mask/nuclick-output.npy"]
diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
index fad731375..428579275 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -5,11 +5,11 @@
 
 import numpy as np
 import pandas as pd
+
 from bokeh.layouts import gridplot
 from bokeh.models import ColumnDataSource, HoverTool
 from bokeh.plotting import figure
 from bokeh.transform import dodge
-
 from tiatoolbox.utils.visualization import random_colors
 from tiatoolbox.visualization.ui_utils import UIPlugin
 
@@ -104,5 +104,5 @@ def create_extra_layout_once(
         slide_path: str,  # noqa: ARG002
         old_children: list,  # noqa: ARG002
     ) -> list:
-        """Create extra layout elements on widow initialization."""
+        """Create extra layout elements on window initialization."""
         return []

From 0bfb5f022e21642f1f557c6378c755166ee40d63 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:32:56 +0000
Subject: [PATCH 20/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_app_bokeh.py                                   | 8 ++++----
 tests/test_json_config_bokeh.py                           | 2 +-
 tests/test_server_bokeh.py                                | 2 +-
 tiatoolbox/visualization/bokeh_app/main.py                | 7 +++----
 .../visualization/bokeh_app/templates/bar_plot_grid.py    | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index e5e39b6ee..dc916abf5 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
+import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
-import bokeh.models as bkmodels
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
diff --git a/tests/test_json_config_bokeh.py b/tests/test_json_config_bokeh.py
index fb69d5d5a..86fbb9355 100644
--- a/tests/test_json_config_bokeh.py
+++ b/tests/test_json_config_bokeh.py
@@ -10,8 +10,8 @@
 import pandas as pd
 import pytest
 import requests
-
 from bokeh.client.session import ClientSession, pull_session
+
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
 
diff --git a/tests/test_server_bokeh.py b/tests/test_server_bokeh.py
index c7aa6f807..ea90485b9 100644
--- a/tests/test_server_bokeh.py
+++ b/tests/test_server_bokeh.py
@@ -9,9 +9,9 @@
 
 import pytest
 import requests
+from bokeh.client.session import ClientSession, pull_session
 from click.testing import CliRunner
 
-from bokeh.client.session import ClientSession, pull_session
 from tiatoolbox import cli
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index 9ef23971d..08a2443a5 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -16,10 +16,6 @@
 import pandas as pd
 import requests
 import torch
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
-
 from bokeh.events import ButtonClick, DoubleTap
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -63,6 +59,9 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))
diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
index 428579275..54f384456 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -5,11 +5,11 @@
 
 import numpy as np
 import pandas as pd
-
 from bokeh.layouts import gridplot
 from bokeh.models import ColumnDataSource, HoverTool
 from bokeh.plotting import figure
 from bokeh.transform import dodge
+
 from tiatoolbox.utils.visualization import random_colors
 from tiatoolbox.visualization.ui_utils import UIPlugin
 

From c39fe41acefa35b634b0cd14350f849f516d60ac Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:19:35 +0100
Subject: [PATCH 21/24] fix test

---
 tests/conftest.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/conftest.py b/tests/conftest.py
index e3d676587..55e762e3e 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -606,5 +606,6 @@ def data_path(tmp_path_factory: pytest.TempPathFactory) -> dict[str, object]:
     """Set up a temporary data directory for testing visualization UI."""
     tmp_path = tmp_path_factory.mktemp("data")
     (tmp_path / "slides").mkdir()
+    (tmp_path / "slides" / "CMU-1_files").mkdir()
     (tmp_path / "overlays").mkdir()
     return {"base_path": tmp_path}

From 6d94488b6d98b1d66d6e7811bf6b0340e0d1b97a Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 9 Oct 2025 23:05:07 +0000
Subject: [PATCH 22/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tests/test_app_bokeh.py                    | 8 ++++----
 tests/test_json_config_bokeh.py            | 2 +-
 tests/test_server_bokeh.py                 | 2 +-
 tiatoolbox/visualization/bokeh_app/main.py | 7 +++----
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/tests/test_app_bokeh.py b/tests/test_app_bokeh.py
index 4c6be2bb7..db16f3ba2 100644
--- a/tests/test_app_bokeh.py
+++ b/tests/test_app_bokeh.py
@@ -11,19 +11,19 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 
+import bokeh.models as bkmodels
 import matplotlib.pyplot as plt
 import numpy as np
 import pytest
 import requests
+from bokeh.application import Application
+from bokeh.application.handlers import FunctionHandler
+from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from flask_cors import CORS
 from matplotlib import colormaps
 from PIL import Image
 from scipy.ndimage import label
 
-import bokeh.models as bkmodels
-from bokeh.application import Application
-from bokeh.application.handlers import FunctionHandler
-from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from tiatoolbox.data import _fetch_remote_sample
 from tiatoolbox.visualization.bokeh_app import main
 from tiatoolbox.visualization.tileserver import TileServer
diff --git a/tests/test_json_config_bokeh.py b/tests/test_json_config_bokeh.py
index a253ee8b4..cc8604743 100644
--- a/tests/test_json_config_bokeh.py
+++ b/tests/test_json_config_bokeh.py
@@ -10,8 +10,8 @@
 import pandas as pd
 import pytest
 import requests
-
 from bokeh.client.session import ClientSession, pull_session
+
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
 
diff --git a/tests/test_server_bokeh.py b/tests/test_server_bokeh.py
index 965bcbb5f..9544abc6d 100644
--- a/tests/test_server_bokeh.py
+++ b/tests/test_server_bokeh.py
@@ -9,9 +9,9 @@
 
 import pytest
 import requests
+from bokeh.client.session import ClientSession, pull_session
 from click.testing import CliRunner
 
-from bokeh.client.session import ClientSession, pull_session
 from tiatoolbox import cli
 from tiatoolbox.cli.visualize import run_bokeh, run_tileserver
 from tiatoolbox.data import _fetch_remote_sample
diff --git a/tiatoolbox/visualization/bokeh_app/main.py b/tiatoolbox/visualization/bokeh_app/main.py
index c95974275..1143ec629 100644
--- a/tiatoolbox/visualization/bokeh_app/main.py
+++ b/tiatoolbox/visualization/bokeh_app/main.py
@@ -16,10 +16,6 @@
 import pandas as pd
 import requests
 import torch
-from matplotlib import colormaps
-from PIL import Image
-from requests.adapters import HTTPAdapter, Retry
-
 from bokeh.events import ButtonClick, DoubleTap, MenuItemClick
 from bokeh.io import curdoc
 from bokeh.layouts import column, row
@@ -64,6 +60,9 @@
 from bokeh.models.tiles import WMTSTileSource
 from bokeh.plotting import figure
 from bokeh.util import token
+from matplotlib import colormaps
+from PIL import Image
+from requests.adapters import HTTPAdapter, Retry
 
 # GitHub actions seems unable to find TIAToolbox unless this is here
 sys.path.insert(0, str(Path(__file__).parent.parent.parent.parent))

From bf50ee3bfc79f9922dab837da22ca8045030968d Mon Sep 17 00:00:00 2001
From: measty <20169086+measty@users.noreply.github.com>
Date: Fri, 10 Oct 2025 00:14:02 +0100
Subject: [PATCH 23/24] precommit

---
 .../visualization/bokeh_app/templates/bar_plot_grid.py       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
index 54f384456..847205ddd 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -1,15 +1,14 @@
 """This module contains a class for creating bar plots for CSV files in a folder."""
 
-import os
 from pathlib import Path
 
 import numpy as np
 import pandas as pd
+
 from bokeh.layouts import gridplot
 from bokeh.models import ColumnDataSource, HoverTool
 from bokeh.plotting import figure
 from bokeh.transform import dodge
-
 from tiatoolbox.utils.visualization import random_colors
 from tiatoolbox.visualization.ui_utils import UIPlugin
 
@@ -36,7 +35,7 @@ def create_extra_layout(
         folder_path = slide_path.with_name(slide_path.stem + "_files")
         if not folder_path.is_dir():
             return []
-        csv_files = [f for f in os.listdir(folder_path) if f.endswith(".csv")]
+        csv_files = [f.name for f in folder_path.iterdir() if f.suffix == ".csv"]
         plots = []
 
         for file in csv_files:

From de8723b38964bc0836928b17c870d8582c67c03c Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 9 Oct 2025 23:15:03 +0000
Subject: [PATCH 24/24] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
index 847205ddd..8b18eeece 100644
--- a/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
+++ b/tiatoolbox/visualization/bokeh_app/templates/bar_plot_grid.py
@@ -4,11 +4,11 @@
 
 import numpy as np
 import pandas as pd
-
 from bokeh.layouts import gridplot
 from bokeh.models import ColumnDataSource, HoverTool
 from bokeh.plotting import figure
 from bokeh.transform import dodge
+
 from tiatoolbox.utils.visualization import random_colors
 from tiatoolbox.visualization.ui_utils import UIPlugin