react-science

React components to build scientific applications UI.

Installation

> npm i react-science

Global css

Import the preflight css stylesheet, unless you use tailwindcss and you already added @tailwind base; to your tailwind stylesheet:

import 'react-science/styles/preflight.css';

Then import the blueprint stylesheets:

import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/select/lib/css/blueprint-select.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css';

Introduction

Science has specific requirements to display and process data. This is especially true in chemistry where a large number of techniques are used to extract important information (or characterize) samples.

This project simplifies the process of creating web applications for visualizing, processing and extracting information from measurements.

This project is composed of 2 parts:

• src/components: a set of reusable components that are published in the npm package and can be developed locally using npm run dev-stories
• src/pages: playgrounds in which we combine the components and many other project to test ideas and limitation of the design. It can be tested locally using npm run dev-app

Principle of the application

The application has a state containing 3 properties:

• data: containing information related to data
• view: containing the information related to what is displayed in which module
• settings: that will contain user defined preferences for the application

Loading new data in the application

New data can be added by drag/drop or by adding in the URL a link to a webservice that returns a list of files. This later will use FileCollectionFromWebservice. You can find an example of the webservice here

Both approach will generate internally a FileCollection (see https://cheminfo.github.io/filelist-utils/classes/FileCollection.html and https://github.com/cheminfo/filelist-utils).

To convert the various proprietary formats and add the parsed result to the application data state we will use loaders. A loader will receive a FileCollection and will try to parse what it can, often based on the file extension. An example of the JCAMP-DX loader can be found here

When create a new loader you also need to specify that it should be used when processing files by adding it in the following array of the application.

Testing the demo application

• From some JCAMP-DX files
• From Biologic file format
• From a UV-vis file format
• All the examples we have