All files / src App.js

80% Statements 4/5
100% Branches 0/0
66.67% Functions 2/3
80% Lines 4/5
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                                    1x                                                                           1x 1000x           1x                  
/**
* Copyright 2018, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
 
import React, { Component } from 'react';
import MSAViewer from './lib';
 
import {
  repeat,
  times,
} from 'lodash';
 
class App extends Component {
  render() {
    const options = {
      sequences: [
        {
          name: "sequence 1",
          sequence: "MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED"
        },
        {
          name: "sequence 2",
          sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
        },
        {
          name: "sequence 3",
          sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
        },
        {
          name: "sequence 4",
          sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
        },
        {
          name: "sequence 5",
          sequence: "MEEPQSD--IEL-PLSEETFSDLWWPLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
        },
        {
          name: "sequence 6",
          sequence: "MEEPQEDLSSSL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
        },
        {
          name: "sequence 7",
          sequence: "MEEPQ---SISE-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE---LSENVAGWLEDP"
        },
      ],
      onResidueClick: (e) => {
        console.log("onResidueClick", e);
      },
      colorScheme: "clustal",
      width: 800,
      height: 800,
    };
    times(1000, (i) => {
      options.sequences.push({
        name: `sequence ${i}`,
        sequence:
          repeat(options.sequences[i % 7].sequence, 5),
      });
    });
    return (
      <div>
        <MSAViewer {...options} />
      </div>
    );
  }
}
 
export default App;