react-science
React components to build scientific applications UI.
Maintained by Zakodium
Installation
> npm i react-scienceGlobal css
If you use tailwindcss and already you added @tailwind base; to your tailwind stylesheet, you can skip this step.
Otherwise, import the global styles in your application:
import 'react-science/styles/preflight.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.