react-spectra-editor

An editor to view and edit chemical spectra: NMR, IR, Raman, UV/VIS, MS, LC/MS, HPLC, GC, SEC, XRD, cyclic voltammetry, DSC, TGA and more. JCAMP-DX files whose data type it does not recognise open in a neutral plain layout.

Usage

Installing from npm

With yarn

$ yarn add @complat/react-spectra-editor

Or with npm

$ npm i @complat/react-spectra-editor

Installing from github source

$ yarn add https://github.com/ComPlat/react-spectra-editor

Allows users manual edit spectra's description

1. Set canChangeDescription to be true
2. Handle changed value on function onDescriptionChanged. The content is formatted with Delta Object

Editor dev page

For developing the editor: the editor with built-in sample spectra, and host callbacks that only log. No backend needed. It is what the E2E tests open.

$ yarn install

$ yarn start:dev                                          # http://localhost:3000

Standalone ChemSpectra client

The ChemSpectra upload page (spectrum, molfile and prediction-JSON inputs around the editor), formerly published as @complat/chem-spectra-client, ships with the editor as a separate entry point. The main entry does not load it.

import { ChemSpectraClient } from '@complat/react-spectra-editor/dist/standalone';

<ChemSpectraClient />            // full page: molfile, spectrum and prediction inputs
<ChemSpectraClient editorOnly /> // spectrum input only

It talks to a chem-spectra-app backend, served from the same origin, with these calls: POST /api/v1/chemspectra/file/convert, file/save and file/refresh, molfile/convert, and predict/nmr_peaks_form and predict/infrared.

To run it, yarn start serves it against the chem-spectra-app at CHEM_SPECTRA_APP_URL (local or remote; required), and proxies the backend calls above to it. The page is on port 4000 unless PORT is set; CHEM_SPECTRA_EDITOR_ONLY=true serves the editorOnly variant:

$ yarn install

$ CHEM_SPECTRA_APP_URL=http://localhost:3007 yarn start

See the standalone client docs for its backend calls, its contract with the editor, and its known limitations.

Demo & Manual

User manual: try the editor, then a step-by-step guide to every toolbar action.

Documentation

• Developer documentation: architecture and diagrams

Testing

Unit test

$ yarn test

E2E test

$ yarn start:dev

Open another terminal

$ yarn e2e

Acknowledgments

This project has been funded by the DFG.

Funded by the Deutsche Forschungsgemeinschaft (DFG, German Research Foundation) under the National Research Data Infrastructure – NFDI4Chem – Projektnummer 441958208 since 2020.

Funded by the Helmholtz Association under the program Biointerfaces (BIF-TM); currently supported by the Helmholtz program Information (until 2027).