Chemcurator VueJS

Overview

Built as a tool to interface with the chemcurator_django backend, chemcurator_vuejs is a Vue SPA (Single Page Application) that allows for the curation of chemicals.

The decision to deploy this as a SPA was to abstract the front-end browser requirements of our django project from the backend API and business logic. This ensures that the decisions we are making for the API are focused on being the correct decisions for the data and are not driven by providing data in a way that is hard to maintain. Both chemcurator_django and chemcurator_vuejs have their own requirements and are expected to be able to be supported independent of each other.

User Guide

The VueJS app has the following pages

Lists

Displays Lists on a table. Each row should be clickable to allow for a detailed view.

Substances

Displays Substance and Compound Structure data using MarvinJS and Ketcher.

Substance data and the associated compound structure are displayed at the top of this page.

Substance Saving - The substance form to the left side of the Chemical Editors is responsible for saving and updating substances. Edits to a new form will save a new substance and mint an new Substance ID or SID, typically in the form of DTXSIDx0xxxxxxx. Edits to an existing form will update the loaded substance with the modified data. When saving the substance will attempt to save with the loaded compound. If no compound is currently loaded (the Record Compound ID field is blank) then the substance will be saved without a compound.

Compound Structure Saving - If the compound is considered "defined", then Ketcher will render the structure. If the structure is considered "ill-defined", then MarvinJS will render the structure. Structures must be saved using the "Save Compound" button and upon saving will be registered with a Compound ID or CID, typically in the form of DTXCIDx0xxxxxxx. At this point the compound can be associated with the new or loaded substance on pressing "Save Substance".

Synonyms - Synonyms are alternative names for the loaded substance and are located below the Substance editor. The table is rendered using ag-Grid. Authenticated users are allowed to adding, update, and delete synonyms using the this table. Synonyms may be added in bulk with a new line separated list for the synonym identifiers.

Substance Relationships - Substance Relationships show how the loaded substance is related to other substances. The table is rendered using ag-Grid. Authenticated users are allowed to adding, update, and delete relationships using the this table.

Lists - Lists show how the loaded substance is linked to lists and records. The table is rendered using ag-Grid.

Vocabularies - Admin only

Shows tables for controlled vocabularies.

Controlled vocabularies are any complex attribute that could be connected to a resource. This page is designed so all of these attributes can be viewed in one place.

Packages

All of the packages we use can be installed using npm. For a detailed install guide check the developer setup for chemcurator's front end.

Node.js and NPM (link)

Package manager and Node.js server to handle the installing of packages and deployment of code.

Vue (link)

The front end for chemcurator was decided to be a vue Single Page Application.

VueX (link)

Used as a data store for information coming in from the backend server.

Axios (link)

Used for http requests to load data from the backend server.

agGrid (link)

Used as an web-based spreadsheet/table renderer. Chosen for the customization it offers as well as EPA having a license. Only the free version's features are currently being used.