Overview & Stack
Web Application
The UI is designed to be run as a web application. This was chosen for a number of reasons:
- End users will not need to install any software onto their local machine, making deployment and updates far easier
- Many frameworks exist to support the creation of web applications
- Web application development is a skill widely available in industry so onboarding new starters into the project should be easier
Stack
The UI is a single-page application written in TypeScript with React. React was chosen as it is a very easy to use framework for creating user interfaces, is very well documented and has a very large user base.
| Library | What it is used for |
|---|---|
| React | Components and state |
| Vite | Development server and production build |
| React Router | Moving between pages |
| React Spectrum | Buttons, tables, dialogs and other standard components |
| Zod | Types for the data returned by the API, checked at runtime |
| Plotly and D3 | Plotting and annotation in the time series and profile 2D views |
| Annotorious and OpenSeadragon | Image annotation in the video view |
Shared State
The UI makes heavy use of React's contexts. These provide child components with access to shared data without passing it down through every component in between. The contexts are in src/app/contexts/.