nmrium-react-wrapper/src/demo/NMRiumWrapperDemo.tsx at 1f007754ad28427b516a8c32d25791d68ab56adb · NFDI4Chem/nmrium-react-wrapper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import styled from '@emotion/styled';
import type { NMRiumData } from 'nmrium';
import { Button } from 'react-science/ui';

import NMRiumWrapper from '../NMRiumWrapper.js';
import events from '../events/event.js';
import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs.js';

import jsonData from './data/test.json' with { type: 'json' };

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`;

const Header = styled.div`
  height: 40px;
  width: 100%;
  padding: 5px;
  display: flex;
`;

export default function NMRiumWrapperDemo() {
  return (
    <Container>
      <Header>
        <Button
          style={{ marginRight: '10px' }}
          onClick={() => {
            events.trigger('load', {
              data: jsonData as unknown as NMRiumData,
              type: 'nmrium',
            });
          }}
        >
          Test load from json
        </Button>

        <Button
          style={{ marginRight: '10px' }}
          onClick={() => {
            events.trigger('load', {
              data: [
                'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
                'https://cheminfo.github.io/nmr-dataset-demo/cytisine/1h.jdx',
                'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
                // '../data/13c.zip',
                // 'https://cloud.uni-jena.de/s/y72GbCX8bJbmpJT/download/10.zip',
                // 'https://cloud.uni-jena.de/s/jsMed9fmqWZzo6r/download/53.zip',
              ],
              type: 'url',
            });
          }}
        >
          Test Load from URLS
        </Button>

        <Button
          style={{ marginRight: '10px' }}
          onClick={() => {
            events.trigger('load', {
              data: [
                'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h',
              ],
              type: 'url',
            });
          }}
        >
          Test Load URL without extension
        </Button>
        <Button
          style={{ marginRight: '10px' }}
          onClick={() => {
            void loadFilesFromURLs([
              '../data/COSY-12.zip',
              '../data/HMBC-13.zip',
              '../data/13c.zip',
            ]).then((files) => {
              events.trigger('load', {
                data: files,
                type: 'file',
                activeTab: '13C',
              });
            });
          }}
        >
          Test Load Files
        </Button>
        <Button
          className="logger-btn"
          onClick={() => {
            void loadFilesFromURLs(['../data/sample-with-error.zip']).then(
              (files) => {
                events.trigger('load', {
                  data: files,
                  type: 'file',
                  activeTab: '13C',
                });
              },
            );
          }}
        >
          Test Logger
        </Button>
      </Header>

      <NMRiumWrapper />
    </Container>
  );
}