LuciusWeb is the web component of an L1000 data querying application where the data processing itself is done using Spark.
The application (together with its related components, see below) is currently deployed at Janssen under the name ComPass. At Janssen, it is used to analyse and explore close to half a million L1000 samples in real-time thanks to the scalable data processing backend. Scalability has been a core feature of the design from the start and allows us to scale up further if need be.
The app uses cycle.js as a reactive Javascript library. The following packages are instrumental:
- Vega for the visualization components.
- cycle-onionifiy for state management
- cycle-storagify for storing settings
- Materialize-CSS for styling and layout
The home screen shows an interactive SVG with the 3 workflows the user can start.
The LuciusAPI REST backend is required for running this webapp.
Getting the necessary dependencies:
npm install
Starting the app in development mode:
npm run serve
Three filters are currently available:
- Concentration or dose
- Compound type: positive control or test
- "Protocol" or the cell type the sample was from
Keep in mind that the design allows for including filters in a very flexible way, so this is by no means a strict limitation.
The filter dialogs allow the user to specify which filter value to include, by (de) selecting them one by one. It's possible to invert the selection by clicking while keeping the a key pressed.
The UI for the tables has has been kept as clean as possible. There is a drawer for every table that appears when clicking the table header:
In order of appearance, this allows one to:
- Export the data in the table to tab-separated format (to be imported in Excel or …)
- Export the data in JSON format
- Subtract 10 rows
- Subtract 5 rows
- Add 5 rows
- Add 10 rows
Clicking the option drawer again closes it.
In the settings, there is now an on/off switch to enable blurring of sensitive data.
The amount of blur can be tuned as well, although I expect the default of 5 to be fine.
Configuration is performed using two files that each serve their own purpose:
-
deployments.jscontains entries for different deployments of the application. A deployment contains information such as: endpoint URIs, ports, model translations and various customizations. -
configuration.jscontains the user-specific settings with respect to tables, histograms, colors, etc. It also contains a reference to a deployment.
The user settings (i.e. all of the above) are cached on disk. Only when the version number in configuration.js is updated are these settings overridden with the new ones from that file.
In settings, there is one option that requires mentioning: Ghost mode.
Switch it on and switch to a workflow. A pre-defined scenario will run for all 3 workflows with popup comments explaining the steps performed.
User and Admin settings are split. One can go to the admin settings via the bottom of the User settings (or by adding /admin to the url of the application).
The file deployments.json contains different scenarios in which the application can be used. This makes it easy to quickly switch between a local instance of the application stack or a hosted one. The deployments.json file currently is included in the webpack bundle.js file, so it needs to be edited before actually calling npm run build.
Please note that the default value for the deployment is still in src/js/configuration.js.