https://github.com/zakodium-oss/react-science
React components and tools to build scientific applications.
https://github.com/zakodium-oss/react-science
hacktoberfest react science spectroscopy
Last synced: 3 months ago
JSON representation
React components and tools to build scientific applications.
- Host: GitHub
- URL: https://github.com/zakodium-oss/react-science
- Owner: zakodium-oss
- License: mit
- Created: 2021-08-30T14:10:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-04T15:08:46.000Z (11 months ago)
- Last Synced: 2024-11-13T11:42:08.744Z (11 months ago)
- Topics: hacktoberfest, react, science, spectroscopy
- Language: TypeScript
- Homepage: https://react-science.pages.dev
- Size: 10.3 MB
- Stars: 3
- Watchers: 4
- Forks: 6
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-science
React components to build scientific applications UI.
Maintained by Zakodium
## Installation
```console
> 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:
```js
import 'react-science/styles/preflight.css';
```
Then import the blueprint stylesheets:
```js
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](https://cheminfo.github.io/filelist-utils/modules.html#fileCollectionFromWebservice). You can find an example of the webservice [here](https://zakodium-oss.github.io/analysis-dataset/jdx.json)
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](https://github.com/zakodium-oss/react-science/blob/6f36ab05af11f848d4ed98eb10c99184a713ae97/src/app/data/loaders/jcampLoader.ts)
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](https://github.com/zakodium-oss/react-science/blob/6f36ab05af11f848d4ed98eb10c99184a713ae97/src/app/context/load.ts#L15-L16) of the application.
## Testing the demo application
- [From some JCAMP-DX files](https://react-science.pages.dev/pages/demo.html#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Fjdx.json)
- [From Biologic file format](https://react-science.pages.dev/pages/demo.html#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Fbiologic.json)
- [From a UV-vis file format](https://react-science.pages.dev/pages/demo.html#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Fuvvis.json)
- [All the examples we have](https://react-science.pages.dev/pages/demo.html#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Ffull.json)