Webviewer für Mikroskopie-Bilder
Mikroskopie-Daten in verschiedenen Auflösungsstufen flüssig auf dem Bildschirm darzustellen und zu segmentieren, bringt auch moderne Werkzeuge ans technische Limit. SCS entwickelte für ariadne.ai einen leistungsstarken Webviewer.
-
Ausgangslage
Bei Mikroskopie-Bildern entstehen rasch grosse Datenmengen aufgrund von hohen Auflösungen, vielen Bildebenen und detaillierten Segmentierungen. Deshalb ist es eine Herausforderung, diese flüssig in einem modernen Webviewer darzustellen.
-
Lösung SCS
SCS entwickelte für ariadne.ai einen modernen Webviewer auf Basis von Neuroglancer und Angular, der die Bilder flüssig darstellen kann und dem Benutzer verschiedene Algorithmen zur Verarbeitung der Daten anbietet. Die verknüpften Metadaten einzelner Bildebenen können in einem Scatter Plot ausgewählt werden, woraufhin die Anzeige angepasst wird.
-
Mehrwert
Das robuste und intuitive Frontend zeigt die mit den Algorithmen aufbereiteten Bilddaten sehr schnell und flüssig im Webviewer an. SCS übernahm die gesamte Frontendentwicklung, von der Anforderungsanalyse über das UI/UX-Design bis zur Umsetzung und der Performance Analyse.
Biomedizinische Bilder
ariadne.ai ist ein Schweizer Unternehmen, das sich auf die automatisierte Analyse biomedizinischer Bilder spezialisiert hat. Dabei werden oft einige Terabytes an Bilddaten verarbeitet, vor allem Mikroskopie-Bilder in verschiedenen Auflösungsstufen. Zusätzlich werden die Bilder beispielsweise segmentiert und Zellen markiert. Diese Daten sollen nun flüssig auf dem Bildschirm dargestellt werden.
Moderner Webviewer
SCS entwickelte für ariadne.ai einen Webviewer (Ariadne SPATIAL), der die Daten darstellt und die Auswahl der entsprechenden Verarbeitungsalgorithmen und Datenbereiche ermöglicht. Die Bild-, Segmentations- und Annotationsdaten sind in verschiedenen Formaten gespeichert und können in verschiedenen Auflösungen dargestellt werden – mit flüssigem Zoom und Pannig sowie schneller Auswahl der relevanten Bildebenen. Zusätzlich können Metadaten wie statistische Informationen aus der Bildanalyse in einem Scatter Plot dargestellt werden, worin es wiederum möglich ist, einen Bereich mit einem Lasso-Tool auszuwählen. Die in sogenannten Selections oder via «Hierarchical Gating» ausgewählten Segmentierungen, beispielsweise die entsprechenden Zellen, werden nun auch im Mikroskopie-Bild angezeigt.
Frontend mit Angular, Neuroglancer und D3.js
Für das Frontend nutzen die Entwickler von SCS Neuroglancer als Basis für die Darstellung der Datensätze, D3.js für die interaktiven Plots und Angular für die klassischen Web-UI-Komponenten. Das Projekt enthielt die gesamte Frontendentwicklung von der Anforderungsanalyse über die Wireframes, dem UI/UX Design bis zur Dockerisierung des Deployments und der Performance Analyse und Optimierung.