Frontend

Overview of the Frontend

In addition to the ScanHub backend we are developing a user interface: ScanHub-UI

General Information and Technologies

The frontend application is written in react-typescript. The UI/UX is designed with MUI. We aim to build the application solely based on MUI Joy-UI. Only in case a certain functionality cannot be realized using Joy-UI, Material UI can be used for a temporary workaround, until the implementation is supported by Joy-UI.

Routing is done using the react-router-dom package with the following structure:

• patients
  • /patient-id/exam-id/procedure-id
• devices
• workflows
• dashboard The routing is defined in the Routes file which can be found next to index.

Database queries are performed using axios and an abstract-query-client implementation.

Structure

• src
  • views: All "main" views filling the whole browser window. This components are only included in the router file.
    • dashboard
    • patient-list/patient-table
    • device-list/device-table
    • patient-index
  • components: Sub-components for views, if a view is more complex, sub-components might be gathered in a sub-folder. Components can be accessed from different views or also from other components.
  • interfaces: Interface files contain ".interface" in front of the file ending ".tsx"
    • data.interface: Interfaces of all data objects like patient, device, workflow, etc.
    • component.interface: Component property interfaces
  • client: (Global) Definition of the query client.
    • abstract-query-client: Template
    • urls: Base urls for data queries
    • queries: Constructions of all data query services
    • healthcheck: Queries to health endpoints
  • utils: Contains general helper functions and global variables which can be shared between components/views.