nwb-explorer/webapp/components/FileSampleSelector.js at cf1d3c74f2a30612b37cec515713b8a57f9e13d8 · MetaCell/nwb-explorer · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
import React from 'react';
import { Box, Button, Typography, FormControl, Select, MenuItem, Grid2 as Grid, } from '@mui/material';

const SAMPLE_LINK_FERGUSON = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015.nwb';
const SAMPLE_LINK_FERGUSON_2 = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015_PYR2.nwb';
const SAMPLE_LINK_FERGUSON_3 = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015_PYR3.nwb';
const SAMPLE_LINK_FERGUSON_4 = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015_PYR4.nwb';
const SAMPLE_LINK_FERGUSON_5 = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/FergusonEtAl2015/FergusonEtAl2015_PYR5_rebound.nwb';

const SAMPLE_LINK_TIMESERIES = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/NWB/time_series_data.nwb';
const SAMPLE_LINK_TRIPLETT = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/TriplettEtAl2018/TriplettEtAl2018.nwb';

const SAMPLE_LINK_LANORE = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/IgorPro/141210c3.nwb';
const SAMPLE_LINK_PACKER = 'https://github.com/OpenSourceBrain/CalciumImagingDriftingGrating/raw/master/neurofinder.01.01.jpg.nwb';
const SAMPLE_LINK_KATO = 'https://github.com/OpenSourceBrain/NWBShowcase/raw/master/KatoEtAl2015/KatoEtAl2018.WT_Stim.6.nwb';

const SAMPLE_LINK_LANTYER = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_170502_AL_257_CC.nwb';
const SAMPLE_LINK_LANTYER_2 = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_170315_AL_216_VC.nwb';
const SAMPLE_LINK_LANTYER_3 = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_170328_AB_277_ST50_C.nwb';
const SAMPLE_LINK_LANTYER_4 = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_170328_AL_238_VC.nwb';
const SAMPLE_LINK_LANTYER_5 = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_171220_NC_156_ST100_C.nwb';
const SAMPLE_LINK_LANTYER_6 = 'https://github.com/vrhaynes/NWBShowcase/raw/master/Lantyer/LantyerEtAl2018_180817_ME_9_CC.nwb';

export default class FileSampleSelector extends React.Component {
  constructor (props) {
    super(props);
    this.handleClickLoadFile = this.handleClickLoadFile.bind(this);

    this.state = {};
  }

  componentDidMount (prevProps, prevState) {
    console.log('Props in FileSampleSelector', this.props);
  }

  componentDidUpdate (prevProps, prevState) {
    console.log('Props in FileSampleSelector', this.props);
  }

  handleClickLoadFile (url) {
    const { loadNWBFile } = this.props;
    loadNWBFile(url);
  }

  handleChange = e => {
    this.handleClickLoadFile(e.target.value);
  }

  render () {
    return (
      <div>
        <Typography variant="h6">Don’t have a file to load? Pick a sample and get started!</Typography>
        <Box mt={2}>
          <Typography variant="h3">Intracellular Electrophysiology</Typography>
          <Box display="flex" className="left-bordered-container" mb={3}>
            <Grid container spacing={1}>
              <Grid item>
                <FormControl variant="outlined" className="custom-select">
                  <Select
                    id="samplefile-select"
                    value=""
                    onChange={this.handleChange}
                    className="button badge-button"
                    name="ferguson"
                    displayEmpty
                    variant="outlined"
                    inputProps={{ 'aria-label': 'ferguson' }}
                  >
                    <MenuItem value="" disabled>
                      Ferguson et al. 2015
                    </MenuItem>
                    <MenuItem value={SAMPLE_LINK_FERGUSON}>Ferguson 1</MenuItem>
                    <MenuItem value={SAMPLE_LINK_FERGUSON_2}>Ferguson 2</MenuItem>
                    <MenuItem value={SAMPLE_LINK_FERGUSON_3}>Ferguson 3</MenuItem>
                    <MenuItem value={SAMPLE_LINK_FERGUSON_4}>Ferguson 4</MenuItem>
                    <MenuItem value={SAMPLE_LINK_FERGUSON_5}>Ferguson 5</MenuItem>
                  </Select>
                </FormControl>
              </Grid>
              <Grid item>
                <FormControl variant="outlined" className="custom-select">
                  <Select
                    id="samplefile-select"
                    value=""
                    onChange={this.handleChange}
                    className="button badge-button"
                    name="ferguson"
                    displayEmpty
                    variant="outlined"
                    inputProps={{ 'aria-label': 'ferguson' }}
                  >
                    <MenuItem value="" disabled>
                      Lantyer et al. 2018
                    </MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER}>Lantyer 1</MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER_2}>Lantyer 2</MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER_3}>Lantyer 3</MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER_4}>Lantyer 4</MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER_5}>Lantyer 5</MenuItem>
                    <MenuItem value={SAMPLE_LINK_LANTYER_6}>Lantyer 6</MenuItem>
                  </Select>
                </FormControl>
              </Grid>
              <Grid item>
                <Button
                  id="loadFile"
                  variant="outlined"
                  className="button badge-button"
                  onClick={e => this.handleClickLoadFile(SAMPLE_LINK_LANORE)}
                  disabled={false}
                >
                  Lanore et al. 2019
                </Button>
              </Grid>
            </Grid>
          </Box>
          <Typography variant="h3">Calcium fluorescence imaging (time series)</Typography>
          <Box display="flex" className="left-bordered-container" mb={3}>
            <Grid container spacing={1}>
              <Grid item>
                <Button
                  id="loadFile"
                  variant="outlined"
                  className="button badge-button"
                  onClick={e => this.handleClickLoadFile(SAMPLE_LINK_TRIPLETT)}
                  disabled={false}
                >
                  Triplett et al. 2018
                </Button>
              </Grid>
              <Grid item>
                <Button
                  id="loadFile"
                  variant="outlined"
                  className="button badge-button"
                  onClick={e => this.handleClickLoadFile(SAMPLE_LINK_KATO)}
                  disabled={false}
                >
                  Kato et al. 2015
                </Button>
              </Grid>
            </Grid>
          </Box>
          <Typography variant="h3">Calcium fluorescence imaging (image series)</Typography>
          <Box display="flex" className="left-bordered-container">
            <Grid container spacing={1}>
              <Grid item>
                <Button
                  id="loadFile"
                  variant="outlined"
                  className="button badge-button"
                  onClick={e => this.handleClickLoadFile(SAMPLE_LINK_PACKER)}
                  disabled={false}
                >
                  Packer et al. 2015
                </Button>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </div>

    );
  }
}