Graph Prototype: Atlas Explorer

1. Overview

Important

• This experiment was developed on the instruction of HDRUK's Disease Atlas team, a project being built alongside the BHF Data Science Centre and NHS Digital

This repository implements a WebGl2-based FDG graph to enable users to navigate each of the diseases/medications defined within the Atlas of Human Disease; both drawing and graph layout is handled on the GPU.

2. TODO

1. Data ingress

   • Discuss with web team as to which method of data fetching they would prefer, e.g. iterative API queries supported by some endpoint to retrieve node/edge/disease/medication data, or would we prefer to serialise & compress data before streaming to client via IPC?
   • Fetching methods & processing will need to be updated once a decision is realised

2. Finalise implementation

   • Review current functionality, iterate on design & interactivity guided by feedback from HDRUK et al
   • Complete gpu implementation required for production, e.g. state management & caching shaders
   • Merge Python data processor with this monorepo

3. Finalise package

   • Inquire about bundler & test framework preference of downstream consumers:
     • Add bundler, set up publication GH action
     • Consider adding e2e testing and unit tests,
   • Cleanup project incl. finalising documentation
   • Add CI/CD, storybook +/- docusaurus/TSdoc etc

3. Project

3.1. Structure & Content

The project structure is composed as a monorepo, or turborepo, such that:

graph TD
    A["@atlas-explorer"] --> B[apps]
    B --> C[docs]
    B --> D[web]
    A --> E[packages]
    E --> F["@atlas-explorer/graphs"]
    E --> G["@atlas-explorer/force-graph"]

Loading

The project is broadly divided into the following directories:

1. apps - example integration(s) and/or a generated documentation app

2. packages - component packages

3.2. Technology & Implementation

This application was developed with:

Type	Details
Stack	NextJS & React
Languages	TypeScript & GLSL
Tooling	Turbo, ESLint & Prettier

4. Usage

Caution

Please note that you will need the Atlas dataset to use this app:

• This app requires the pre-processed state.explorer.json file to display datapoints (or 3x input data files when simulating)
• For BHF/HDRUK users, please find a pre-prepared example in the assoc. files accessible via the Citrix VM

4.1. Prerequisites

1. Install git

   • Instructions on installing git for different platforms can be found here

2. Download the Javascript runtime

   • Install Node.JS and npm - note that installing node would usually install npm alongside it
   • Either download the prebuilt installer here or consider downloading nvm instead to manage your node install

4.2. Cloning

1. Open a terminal and navigate to a directory in which you'd like to install the app, e.g. cd /some/path/to/folder

2. Enter the following into your terminal to clone the repository:

$ git clone https://github.com/JackScanlon/atlas-explorer.git

4.3. Local Development

Caution

• Production build instructions TBC, need to determine which build & bundlers tools are most familiar to the downstream consumers

1. Open a terminal and navigate to the project directory, e.g. cd /path/to/atlas-explorer

2. Install the application dependencies first by running the following:

$ npm install

3. To host the app locally enter the following:

$ npm run dev

3. The application will now be accessible at http://localhost:3000