All files / stories basic.js

0% Statements 0/13
100% Branches 0/0
0% Functions 0/3
0% Lines 0/13
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                                                                                                                                                       
/**
* 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 from 'react';
import { storiesOf } from '@storybook/react';
import { MSAViewer } from '../lib';
import { times } from 'lodash-es';
import { number, withKnobs } from '@storybook/addon-knobs';
 
const sequences = [
  {
    name: "seq.1",
    sequence: "MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED"
  },
  {
    name: "seq.2",
    sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
  },
  {
    name: "seq.3",
    sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
  },
  {
    name: "seq.4",
    sequence: "MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
  },
  {
    name: "seq.5",
    sequence: "MEEPQSD--IEL-PLSEETFSDLWWPLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
  },
  {
    name: "seq.6",
    sequence: "MEEPQEDLSSSL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP"
  },
  {
    name: "seq.7",
    sequence: "MEEPQ---SISE-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE---LSENVAGWLEDP"
  },
];
 
storiesOf('Basic', module)
  .add('Standard rendering', function(){
    const options = {
      sequences,
    };
    return (
      <MSAViewer {...options} />
    )
  })
  .addDecorator(withKnobs)
  .add('Big viewpoint', function(){
    const options = {
      sequences: [],
      height: number("height", 500),
      width: number("width", 500),
      tileHeight: number("tileHeight", 20),
      tileWidth: number("tileWidth", 20),
      colorScheme: "clustal",
    };
    times(100, () => {
      options.sequences.push({
          name: "seq",
          sequence: "MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED"
      });
    });
    return (
      <MSAViewer {...options} />
    )
  })
;