This tool is being developed for the Design Automation Manufacturing Processes (DAMP) lab to facilitate the submission, management, and tracking of orders for labwork (e.g. DNA assembly/cloning, PCR, fluoresence-bassed assays, transcriptomics/NGS, culturing, etc.)
As of mid 2024, a demo of the website--with a login required--is available at:
Connect with a contributor below or a DAMP Lab representative to see about getting access....
To run locally for development and real-time updates...
First, you can clone this repo. (If necessary, you can install git and learn more about cloning a git repo at the linked instructions.)
Clone the repo with the following command:
git clone [email protected]:hicsail/damplab-ui.git
cd damplab-uiIf necessary, install Node.js and npm (Node Package Manager) (tested on v18.16.0):
You can then install the dependencies and launch the program in development mode by running the following from the root folder:
run npm install --legacy-peer-deps
npm startIn the currently supported use case, a user can construct workflows (sequence of services) on a canvas and submit those workflows as a job. Technicians can then see the submitted job and choose whether to approve the job or request additional changes. Technicians (and ultimately clients) can acces a page to the see the details associated with a given job, including the constituent workflows/services/parameters, and the current status of the job.
Ultimately, the tool will have a wide variety of other features, such as a biosecurity screening, eLabs integration, etc.
- Canvas (for creating workflows that contain a sequence of connected services/nodes and their associated parameters)
- Checkout (for submitting a job, which consists of the set of workflows, i.e. sets of conneted nodes, created on the canvas)
- (Currently Disabled) Client_View (for a detailed list of all workflows and associated services in a job)
- Dashboard (for showing a list of all submitted jobs, each of which links to the more detailed technician view)
- Technician_View (for a detailed list of all workflows and associated services in a job)
- Dominos (for a broad listing of all current workflows, across all jobs, intended for display on a laboratory screen)
- Elabs and Kernel (simply links to the associated services)
- Finish Kernel integration and associated sequence formation logic
- Email (or other) updates/notifications
- Proper OAuth for individuals to create personal accounts
- Branching path workflows/stages (re-implementation)
First, deploy a Keycloak instance. The exact method will depend on the platform. Here are the Keycloak quickstart docs for Docker. You will probably also want to [https://www.keycloak.org/server/db](set up a database) container alongside, and a Docker volume for the database. To use Keycloak in production, mount the appropriate TLS certificates into the container from Docker secrets, configure the cert/key locations accordingly, and configure the Keycloak hostname.
You will need to set up a realm, register a (public) client, and create user(s). Be sure to carefully configure appropriate Redirect URIs and Web Origins on the client; since the app must use a public client, this is especially important for security. To additionally enable the use of Google as an IdP, set up a client on Google Auth Platform, then configure the use of the client on Keycloak under the damplab realm's identity providers.
The damplab-ui app expects to see certain roles attached to its users.
These are: damplab-staff, internal-customer, and external-customer.
It often makes sense to assign roles to groups and then add users to groups, rather than configuring roles directly on the users.
The damplab-ui app will then need the following environment variables to be set in order to talk to Keycloak:
REACT_APP_KEYCLOAK_URLREACT_APP_KEYCLOAK_REALMREACT_APP_KEYCLOAK_CLIENT_ID
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
- Asad Malik
- Chris Krenz (primary contact as of mid 2024)
- Rishi Shah
- Greg Frasco