From e1e8cef8afa11a1fd1b9ca2020fe541dc2ea9f1d Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Tue, 23 Jun 2026 22:28:20 +0100 Subject: [PATCH 1/7] Add a multi-select dropdown for gallery filtering --- .../genericComponents/multiSelectDropdown.vue | 164 ++++++++++++++++++ .../tabContentComponents/galleryContent.vue | 11 ++ 2 files changed, 175 insertions(+) create mode 100644 webapp/src/components/genericComponents/multiSelectDropdown.vue diff --git a/webapp/src/components/genericComponents/multiSelectDropdown.vue b/webapp/src/components/genericComponents/multiSelectDropdown.vue new file mode 100644 index 00000000..7d32d120 --- /dev/null +++ b/webapp/src/components/genericComponents/multiSelectDropdown.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/webapp/src/components/tabContentComponents/galleryContent.vue b/webapp/src/components/tabContentComponents/galleryContent.vue index 45f8f2ac..106d17f3 100644 --- a/webapp/src/components/tabContentComponents/galleryContent.vue +++ b/webapp/src/components/tabContentComponents/galleryContent.vue @@ -5,6 +5,13 @@
+
+ +
import PaginateLinks from "@/components/genericComponents/paginateLinks.vue"; +import MultiSelectDropdown from "@/components/genericComponents/multiSelectDropdown.vue"; import actionButton from "../labThingsComponents/actionButton.vue"; import galleryCard from "./galleryComponents/galleryCard.vue"; import galleryModal from "./galleryComponents/galleryViewer.vue"; @@ -92,6 +100,7 @@ export default { galleryCard, galleryModal, PaginateLinks, + MultiSelectDropdown, }, emits: ["scrollTop"], @@ -103,6 +112,8 @@ export default { osdViewer: null, currentPage: 1, itemsPerPage: 18, + selectedFilter: ["Scans", "Captures"], + filterOptions: ["Scans", "Captures"], }; }, From a5828fbf4108e7a39188fe9605654beb65455ac7 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Wed, 24 Jun 2026 10:34:09 +0100 Subject: [PATCH 2/7] Add filtering to gallery --- .../things/camera/__init__.py | 5 --- .../things/gallery.py | 29 ++++++++++++- .../things/smart_scan.py | 5 --- tests/unit_tests/test_gallery.py | 6 +-- tests/unit_tests/test_simulated_camera.py | 1 - .../tabContentComponents/galleryContent.vue | 43 +++++++++++-------- 6 files changed, 52 insertions(+), 37 deletions(-) diff --git a/src/openflexure_microscope_server/things/camera/__init__.py b/src/openflexure_microscope_server/things/camera/__init__.py index 8a2644f1..5a39f11c 100644 --- a/src/openflexure_microscope_server/things/camera/__init__.py +++ b/src/openflexure_microscope_server/things/camera/__init__.py @@ -295,11 +295,6 @@ class BaseCamera(OFMThing, ABC): # Register with gallery. _show_data_in_gallery = True - @property - def gallery_data_name(self) -> str: - """Name under which data shows up in gallery.""" - return "Captures" - @property def gallery_data_schema(self) -> type[CaptureInfo]: """The schema (BaseModel) for passing data to the gallery.""" diff --git a/src/openflexure_microscope_server/things/gallery.py b/src/openflexure_microscope_server/things/gallery.py index 2f701c73..2b1fd4ef 100644 --- a/src/openflexure_microscope_server/things/gallery.py +++ b/src/openflexure_microscope_server/things/gallery.py @@ -23,14 +23,14 @@ class GalleryCompatibleThing(Protocol): be picked up, but may throw an error when used. """ + name: str + # Ensure it is a Thing: _thing_server_interface: lt.ThingServerInterface # Ensure it is an OFMThing: show_data_in_gallery: bool - gallery_data_name: str - gallery_data_schema: type[BaseModel] # Ignore D102: No docstrings for the protocol. @@ -45,6 +45,7 @@ class GalleryThing(lt.Thing): all_ofm_things: Mapping[str, OFMThing] = lt.thing_slot() _gallery_providing_things: Optional[Mapping[str, GalleryCompatibleThing]] = None + _card_types: Optional[Mapping[str, GalleryCompatibleThing]] = None @property def gallery_providing_things(self) -> Mapping[str, GalleryCompatibleThing]: @@ -58,6 +59,7 @@ class GalleryThing(lt.Thing): def __enter__(self) -> Self: """Check for all gallery providing things on server startup.""" self._set_gallery_providers() + self._set_card_types() return self def _set_gallery_providers(self) -> None: @@ -86,6 +88,29 @@ class GalleryThing(lt.Thing): Mapping[str, GalleryCompatibleThing], gallery_providers ) + def _set_card_types(self) -> None: + """Find the card types from each provider.""" + card_types: list[str] = [] + for thing in self.gallery_providing_things.values(): + card_schema = thing.gallery_data_schema.schema() + props = card_schema["properties"] + if "card_type" not in props or "const" not in props["card_type"]: + raise TypeError( + f"Gallery data card for {thing.name} doesn't have a staticcard_type" + ) + card_type = props["card_type"]["const"] + if card_type not in card_types: + card_types.append(card_type) + + self._card_types = card_types + + @lt.property + def card_types(self) -> list[str]: + """Names for the card types in the gallery.""" + if self._card_types is None: + raise RuntimeError("Cannot access card_types before server has started.") + return self._card_types + @lt.property def list_data(self) -> list[dict[str, Any]]: """List the data from all registered things. diff --git a/src/openflexure_microscope_server/things/smart_scan.py b/src/openflexure_microscope_server/things/smart_scan.py index e51c84eb..d22cb55f 100644 --- a/src/openflexure_microscope_server/things/smart_scan.py +++ b/src/openflexure_microscope_server/things/smart_scan.py @@ -170,11 +170,6 @@ class SmartScanThing(OFMThing): # Register with gallery. _show_data_in_gallery = True - @property - def gallery_data_name(self) -> str: - """Name under which data shows up in gallery.""" - return "Scans" - @property def gallery_data_schema(self) -> type[scan_directories.ScanInfo]: """The schema (BaseModel) for passing data to the gallery.""" diff --git a/tests/unit_tests/test_gallery.py b/tests/unit_tests/test_gallery.py index 7baf8f2f..eedc3fc6 100644 --- a/tests/unit_tests/test_gallery.py +++ b/tests/unit_tests/test_gallery.py @@ -42,8 +42,6 @@ class MinimalGalleryClass: This should fail the protocol check as it is not an OFMThing """ - gallery_data_name: str = "Mock" - gallery_data_schema: type[BaseModel] = MockGalleryData def get_data_for_gallery(self) -> list[BaseModel]: @@ -66,13 +64,11 @@ class MinimalGallerySource(OFMThing, MinimalGalleryClass): class BadGallerySource(OFMThing): """An OFMThing that almost defines enough to show in the gallery. - Shouldn't match the protocol as ``gallery_data_name`` is missing. + Shouldn't match the protocol as ``gallery_data_schema`` is missing. """ show_data_in_gallery = True - gallery_data_schema: type[BaseModel] = MockGalleryData - def get_data_for_gallery(self) -> list[BaseModel]: """Return a list of Mock Gallery Data.""" return [MockGalleryData(mock="mock", foobar="foobar")] diff --git a/tests/unit_tests/test_simulated_camera.py b/tests/unit_tests/test_simulated_camera.py index 0be10c6d..cc8f5bba 100644 --- a/tests/unit_tests/test_simulated_camera.py +++ b/tests/unit_tests/test_simulated_camera.py @@ -297,7 +297,6 @@ def test_gallery_responses(camera, mocker, caplog): with tempfile.TemporaryDirectory() as tmpdir, caplog.at_level(logging.INFO): camera._data_dir = tmpdir - assert camera.gallery_data_name == "Captures" assert camera.gallery_data_schema == CaptureInfo # When we start there are no captures diff --git a/webapp/src/components/tabContentComponents/galleryContent.vue b/webapp/src/components/tabContentComponents/galleryContent.vue index 106d17f3..5bef578c 100644 --- a/webapp/src/components/tabContentComponents/galleryContent.vue +++ b/webapp/src/components/tabContentComponents/galleryContent.vue @@ -7,8 +7,8 @@
@@ -61,7 +61,7 @@

Nothing to show

-

There is no captured data to show..

+

There is no captured data to show.

this.selectedCardTypes.includes(item.card_type)); + }, noItems() { - return !this.all_items || this.all_items?.length === 0; + return !this.filtered_items || this.filtered_items?.length === 0; }, totalPages() { - return Math.ceil((this.all_items?.length || 0) / this.itemsPerPage); + return Math.ceil((this.filtered_items?.length || 0) / this.itemsPerPage); }, paginatedItems() { const start = (this.currentPage - 1) * this.itemsPerPage; - return (this.all_items || []).slice(start, start + this.itemsPerPage); + return (this.filtered_items || []).slice(start, start + this.itemsPerPage); + }, + }, + + watch: { + totalPages(newPageCount) { + if (this.currentPage > newPageCount) { + this.currentPage = Math.max(1, newPageCount); + } else if (this.currentPage < 1) { + this.currentPage == 1; + } }, }, async mounted() { - const store = useSettingsStore(); - const { ready } = storeToRefs(store); - this.unwatchStoreFunction = watch(ready, (isReady) => { - if (isReady) { - this.refreshGallery(); - } else { - this.all_items = []; - } - }); useIntersectionObserver( this.$refs.galleryDisplay, ([{ isIntersecting }]) => { @@ -150,6 +153,8 @@ export default { threshold: 0.0, // Adjust as needed }, ); + this.allCardTypes = await this.readThingProperty("gallery", "card_types"); + this.selectedCardTypes = this.allCardTypes; // Update on mount (does nothing if not connected) await this.refreshGallery(); // A global signal listener to perform a gallery refresh From c4ae7f7c9003c4a6ee0e47593aabe5a5b85972c0 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Wed, 24 Jun 2026 11:24:41 +0100 Subject: [PATCH 3/7] Only delete selected data types from gallery button. --- .../things/gallery.py | 18 +++++++++++------- webapp/src/components/appContent.vue | 1 + .../tabContentComponents/galleryContent.vue | 16 ++++++++++++++-- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/openflexure_microscope_server/things/gallery.py b/src/openflexure_microscope_server/things/gallery.py index 2b1fd4ef..532fff81 100644 --- a/src/openflexure_microscope_server/things/gallery.py +++ b/src/openflexure_microscope_server/things/gallery.py @@ -45,7 +45,8 @@ class GalleryThing(lt.Thing): all_ofm_things: Mapping[str, OFMThing] = lt.thing_slot() _gallery_providing_things: Optional[Mapping[str, GalleryCompatibleThing]] = None - _card_types: Optional[Mapping[str, GalleryCompatibleThing]] = None + _card_types: Optional[list[str]] = None + _card_type_map: dict[str, str] = {} @property def gallery_providing_things(self) -> Mapping[str, GalleryCompatibleThing]: @@ -101,6 +102,7 @@ class GalleryThing(lt.Thing): card_type = props["card_type"]["const"] if card_type not in card_types: card_types.append(card_type) + self._card_type_map[thing.name] = card_type self._card_types = card_types @@ -133,10 +135,12 @@ class GalleryThing(lt.Thing): return data_list @lt.action - def delete_all_data(self) -> None: - """Delete all the gallery data on this microscope.""" + def delete_all_data(self, card_types: list[str]) -> None: + """Delete all the gallery data on this microscope with the given card types.""" for thing in self.gallery_providing_things.values(): - try: - thing.delete_all_gallery_items() - except Exception as e: - self.logger.exception(e) + thing_card_type = self._card_type_map.get(thing.name) + if thing_card_type in card_types: + try: + thing.delete_all_gallery_items() + except Exception as e: + self.logger.exception(e) diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue index d5fac1a0..61051a6c 100644 --- a/webapp/src/components/appContent.vue +++ b/webapp/src/components/appContent.vue @@ -267,6 +267,7 @@ export default { #container-left { overflow: auto; + scrollbar-gutter: stable; background-color: rgba(180, 180, 180, 0.025); width: 100%; height: 100%; diff --git a/webapp/src/components/tabContentComponents/galleryContent.vue b/webapp/src/components/tabContentComponents/galleryContent.vue index 5bef578c..65da50bd 100644 --- a/webapp/src/components/tabContentComponents/galleryContent.vue +++ b/webapp/src/components/tabContentComponents/galleryContent.vue @@ -1,5 +1,5 @@