Skip to content

hamed-musallam/analysis-ui-components

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-science

React components to build analysis UI.

Zakodium logo

Maintained by Zakodium

Installation

> npm i react-science

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

Packages

No packages published

Languages

  • TypeScript 88.6%
  • JavaScript 4.9%
  • JetBrains MPS 3.9%
  • CSS 2.3%
  • HTML 0.3%