All files / stories plugins.js

0% Statements 0/14
100% Branches 0/0
0% Functions 0/5
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, {Component} from 'react';
import { storiesOf } from '@storybook/react';
import {
  msaConnect,
  MSAViewer,
  withPositionStore,
  SequenceViewer,
} from '../lib';
 
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"
  },
];
 
storiesOf('Plugins', module)
  .add('My first plugin', function(){
 
    class MyFirstMSAPluginComponent extends Component {
      // called on every position update (e.g. mouse movement or scrolling)
      shouldRerender(newPosition) {
        return true;
      }
      render() {
        return (
          <div>
            x: {this.props.position.xPos},
            y: {this.props.position.yPos}
          </div>
        );
      }
    }
 
    // inject position awareness (this is done to avoid react tree computations)
    // "performance is the root of all evil"
    const MyFirstMSAPluginConnected = withPositionStore(MyFirstMSAPluginComponent);
 
    // select attributes from the main redux store
    const mapStateToProps = state => {
      return {
        height: state.props.height,
        sequences: state.sequences,
      }
    }
 
    // subscribe to the main redux store
    const MyFirstMSAPlugin = msaConnect(
      mapStateToProps,
    )(MyFirstMSAPluginConnected);
 
    return (
      <MSAViewer sequences={sequences} height={60}>
        <SequenceViewer />
        <MyFirstMSAPlugin />
      </MSAViewer>
    );
  })
 ;