{"_id":"react-msa-viewer","_rev":"57-393890e26bec8532dc9718f6f079c6e0","name":"react-msa-viewer","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"react-msa-viewer","version":"1.0.0","_id":"react-msa-viewer@1.0.0","maintainers":[{"name":"pvetest2","email":"pvetestacc2@gmail.com"}],"dist":{"shasum":"8b6a9f068e861911fe02332a0eaa1c9b99fead58","tarball":"https://registry.npmjs.org/react-msa-viewer/-/react-msa-viewer-1.0.0.tgz","fileCount":1,"integrity":"sha512-AgVWp/KOTwJE1GdoWQRP0afTaj91fmb7hQHZ3XES55b2ocAEL3+yjQYOgyf4cjGLxm+1U2G+r0zk65sYI2j64g==","signatures":[{"sig":"MEUCIQCP7ahbiaAlk4zn+FC66Hd/SPUNJUv7op/ppgd0Sl6HpAIgATt4w7CJq7CIxx+CApOr0z/5TZpdBVycLNTGi2iGBK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiCCXCRA9TVsSAnZWagAA2ywP/1V/X4hY+Kj9e+6Lvcdd\n2KC8bkWzyn3KAVfv1+sUdmLlFXHnjrj0l98oRdsJbNhK9x6YutwwqNR+Nmrh\neKMGLA/9IIQNmvePnOw9nWiL/q2fuNHicTiYYgNnL4avwymR5VZaN2+xnPIx\nY5v7Mvap2gmTBMThBAOZ9a40uRRvoBY9X9/EcQsEd829F2bSBlWDFoyhwte3\n3IdREofKcLWyoNBFD1VYXzBD7L507Xj+M1lf80QvzKyODnyioAHIsWimb18E\nA0gmoBNmEF6LzGc6xL5Y88Vni0PDTVQ8w5FzskG0vfY8vXKMrIr9QHlAXlhQ\nmoRSU2PzMgPvCTzVVHXuGmTyAEj/hubqDVhJEVi7RPJDrQpRyTw5wTjZf8eX\n4OteB4rJip5fMN8EMDFFHZv+KYVZLc2p/iMahEMOluB6okm5UqK7kRPGpqgL\nqBSJey13Qgctg7UZ84cPyv0JPNbKCE0QHP63UkWpDgxnwyJW0wzlRakMKa+N\nKLMuFHJTxm9YfAccfP/w3lNdYBfip+RvRCRqPXK8Ro6VsNmuuoydzG8zE2lb\nDAtmLfp76dK5cVzpW3UfVFKmSviFN3xC6IB2H1gLI3hhBeRD5RwSzSjeo887\ng5QNYSahAfinDkC9glOKGJSpaZ9HYgf/LL7IqJ659XR5RZH6npewxoDTdBu6\npZom\r\n=Yc93\r\n-----END PGP SIGNATURE-----\r\n"},"_from":".","_shasum":"8b6a9f068e861911fe02332a0eaa1c9b99fead58","scripts":{},"_npmUser":{"name":"pvetest2","email":"pvetestacc2@gmail.com"},"_npmVersion":"3.5.2","directories":{},"_nodeVersion":"4.2.6","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/react-msa-viewer_1.0.0_1535647895313_0.43134970429277075","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"react-msa-viewer","version":"1.0.1","keywords":["react","component","msa","alignment","viewer","multiple","sequence","plotly"],"author":{"name":"Plotly, Inc"},"license":"MIT","_id":"react-msa-viewer@1.0.1","maintainers":[{"name":"wilzbach","email":"sebi.wilzbach@gmail.com"}],"homepage":"https://github.com/plotly/react-msa-viewer","bugs":{"url":"https://github.com/plotly/react-msa-viewer/issues"},"dist":{"shasum":"fc1dd03b3cf5a349a98461da64f3d02897913f59","tarball":"https://registry.npmjs.org/react-msa-viewer/-/react-msa-viewer-1.0.1.tgz","fileCount":116,"integrity":"sha512-piKE+uDbKaXlG1V2Cu6+XanQX+Q7fYgda/J2ukHEFrmIGwDjwe/io/aKIXmFn+Dh8HJlhyv+QdxQMubgZC4o/g==","signatures":[{"sig":"MEUCIGLbx5NHLREFAvH3+dr0DKBspCsP2yc8YPCj1taIDPQzAiEA3LBUYU/yggxFafFIyen7DexxFa2c831dAtZgvqSnyCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3264748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb55o1CRA9TVsSAnZWagAA7okP/1l5isRc/vO3B/aQGeZQ\nDnlVXC3LZrwasz/66GR+ofCn7syOyR0DiQBatYycIdmbLh2Y/qUitGKV8/Mt\nIds+XcM973wRjXpV96rvVu5mNs0DgvKdSV19svWb3Uqk9331ZKuHZC7hOFVa\nHdZQpaS3NEyyoNCzdQcNrGZwOUiAPqY/OBI1oSnTq8hwjNs/77BZ789jmApj\nWPaDuJl4lUs42BOboPiMysC31BkRHm5sGrztFffRAydKfztZOt0upekX+pup\nOlKKk/HPAKpy19DstI6vaBB2Y3Y9CwxrN0tdQ65Jj6W1BM7CILU5VdknaesW\n7aWm6vINmNHoTiIkiGTIXieE3VeH8GR+uXXUOzV8t3zTnfwb+kQhfw2l96eo\nOm0FQMlrwfADJw283HDr10M/T7tQ3MHkzXykdg5vE/E+DoTp3Oqf1P8/zFkU\noymu2Ld1M3u04+qBMOkGZj3Oq1PUF1T+xRcq3FmqOgTi99C4T0I3MbKMD8r0\nJhYmXR8zBS1p1co14fhFa9D4ZdNV2SCBUuyABenoS/3l8lhuRD4gLBROJu56\nwxuEgDsjnOxdsvYJZSC6i+lFVlcL79ns+NH2KwImYMRmx5BYQs3mmnB3Zbm4\nFurWhuS/ASr5WOAw6A3CmCLM6Nxz4ErTpEkKfjn6dR+M/gCM7okNmlUs0wFE\nNN30\r\n=prJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.min.js","module":"dist/index.esm.min.js","gitHead":"954fb3fc765fa393260419405fcad06ccd6b51c4","private":false,"scripts":{"docs":"./docs/build","test":"jest","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","watch":"rollup -w -c","netlify":"npm run build-storybook && npm run build:lib && mv dist storybook-static","build:lib":"npm run build:lib-umd && npm run build:lib-esm","storybook":"start-storybook -p 9009 -s public","release-it":"npm run build:lib && npm run docs","test:watch":"jest --watch","build:lib-esm":"NODE_ENV=production rollup -c --format es --file dist/index.esm.js && ./terser.js dist/index.esm.js dist/index.esm.min.js","build:lib-umd":"NODE_ENV=production rollup -c && ./terser.js dist/index.umd.js dist/index.umd.min.js","build-storybook":"build-storybook -s public"},"_npmUser":{"name":"wilzbach","email":"sebi.wilzbach@gmail.com"},"repository":{"url":"git+https://github.com/plotly/react-msa-viewer.git","type":"git"},"_npmVersion":"6.4.1","description":"A React component to create Multiple Sequence Alignments","directories":{},"sideEffects":false,"_nodeVersion":"11.0.0","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"dependencies":{"redux":"^4.0.1","reselect":"^4.0.0","lodash-es":"^4.17.11","prop-types":"^15.6.2","react-redux":"^5.1.0","plotly-icons":"^1.2.2","create-react-ref":"^0.1.0","babel-preset-es2015":"^6.24.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.4.2","canvas":"^2.0.1","enzyme":"^3.7.0","moment":"^2.22.2","rollup":"^0.66.6","webpack":"^4.19.1","immutable":"^3.8.2","react-dom":"16.4.2","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","commenting":"^1.0.5","@babel/core":"^7.1.2","react-docgen":"^2.21.0","react-scripts":"^2.1.0","enzyme-to-json":"^3.3.4","@storybook/react":"^4.0.0","jest-canvas-mock":"^1.1.0","@babel/preset-env":"^7.1.0","@storybook/addons":"^4.0.0","@babel/preset-react":"^7.0.0","babel-plugin-lodash":"^3.3.4","react-test-renderer":"^16.6.0","rollup-plugin-babel":"^4.0.3","rollup-plugin-serve":"^0.6.0","rollup-plugin-strip":"^1.2.0","rollup-plugin-terser":"^3.0.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-replace":"^2.1.0","@storybook/addon-knobs":"^4.0.0","@storybook/addon-links":"^4.0.0","rollup-plugin-commonjs":"^9.2.0","enzyme-adapter-react-16":"^1.6.0","@storybook/addon-actions":"^4.0.0","@storybook/addon-options":"^4.0.0","rollup-plugin-visualizer":"^0.9.2","rollup-plugin-node-resolve":"^3.4.0","@storybook/addon-storysource":"^4.0.0","@babel/plugin-proposal-class-properties":"^7.1.0","react-docgen-external-proptypes-handler":"^1.0.0","@babel/plugin-proposal-object-rest-spread":"^7.0.0"},"peerDependencies":{"react":">= 15 < 17","react-dom":">= 15 < 17"},"_npmOperationalInternal":{"tmp":"tmp/react-msa-viewer_1.0.1_1541904948717_0.9440286920881007","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-08-30T16:51:35.312Z","modified":"2026-09-14T15:42:20.713Z","1.0.0":"2018-08-30T16:51:35.472Z","1.0.1":"2018-11-11T02:55:48.938Z"},"bugs":{"url":"https://github.com/plotly/react-msa-viewer/issues"},"author":{"name":"Plotly, Inc"},"license":"MIT","homepage":"https://github.com/plotly/react-msa-viewer","keywords":["react","component","msa","alignment","viewer","multiple","sequence","plotly"],"repository":{"url":"git+https://github.com/plotly/react-msa-viewer.git","type":"git"},"description":"A React component to create Multiple Sequence Alignments","maintainers":[{"email":"chris@plot.ly","name":"chriddyp"},{"email":"post.ben.here@gmail.com","name":"bpostlethwaite"},{"email":"antoine@plot.ly","name":"antrg"},{"email":"chuck@plot.ly","name":"bronsolo"},{"email":"t4rk@outlook.com","name":"t4rk"},{"email":"roman@plot.ly","name":"roman-nb"},{"email":"cameron.decoster@gmail.com","name":"camdecoster"},{"email":"alex@plot.ly","name":"alexcjohnson"},{"email":"adrian.borrmann@plot.ly","name":"aborrmann"},{"email":"emily@plot.ly","name":"emilykl-plotly"},{"email":"packages@plot.ly","name":"packages-team-plotly"},{"email":"sebi.wilzbach@gmail.com","name":"wilzbach"}],"readme":"`<MSAViewer />`\n=============\n\n[![Travis](https://img.shields.io/travis/plotly/react-msa-viewer/master.svg)](https://travis-ci.org/plotly/react-msa-viewer)\n[![NPM](https://img.shields.io/npm/v/@plotly/react-msa-viewer.svg)](https://www.npmjs.com/package/@plotly/react-msa-viewer)\n[![codecov](https://codecov.io/gh/plotly/react-msa-viewer/branch/master/graph/badge.svg)](https://codecov.io/gh/plotly/react-msa-viewer)\n\n`react-msa-viewer` is a performant, extendable, highly-customizable, production-ready\nReact Component that renders a Multiple Sequence Alignment (MSA).\n\n__WARNING: Work in progress - use with caution__\n\nLive demo\n---------\n\n<a href=\"https://msa.bio.sh\">\n  <img alt=\"MSAViewer example\" src=\"https://user-images.githubusercontent.com/4370550/46425572-50a8b900-c73c-11e8-9f46-a9cac3a5000b.png\" />\n</a>\n\nCheckout the storybook at https://msa.bio.sh\n\nGetting started\n---------------\n\n```jsx\nimport MSAViewer from '@plotly/react-msa-viewer';\n\nfunction MSA() {\n  const options = {\n    sequences: [\n      {\n        name: \"seq.1\",\n        sequence: \"MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED\"\n      },\n      {\n        name: \"seq.2\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n      {\n        name: \"seq.3\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n    ],\n    colorScheme: \"zappo\",\n  };\n  return (\n    <MSAViewer {...options} />\n  );\n}\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/ReJxvX?editors=0010)\n\n### Installation\n\nFor [npm](https://www.npmjs.com) users, run:\n\n```\nnpm i --save @plotly/react-msa-viewer\n```\n\nFor [yarn](https://yarnpkg.com/en) users, run:\n\n```\nyarn add @plotly/react-msa-viewer\n```\n\n### Use your own layout\n\n`<MSAViewer>` acts a Context Provider for all MSA subcomponents.\nHence, it will automatically take care of synchronization between all MSA components in its tree:\n\n```jsx\nimport {\n  Labels,\n  MSAViewer,\n  OverviewBar,\n  PositionBar,\n  SequenceOverview,\n  SequenceViewer,\n} from '@plotly/react-msa-viewer';\n\nfunction MSA() {\n  const options = {\n    sequences: [\n      {\n        name: \"seq.1\",\n        sequence: \"MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED\"\n      },\n      {\n        name: \"seq.2\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n      {\n        name: \"seq.3\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n    ],\n  };\n  return (\n    <MSAViewer {...options}>\n      <SequenceOverview method=\"information-content\"/>\n      <div style={{display: \"flex\"}} >\n        <div>\n          <SequenceViewer/>\n          <br/>\n          <OverviewBar/>\n          <PositionBar/>\n        </div>\n        <Labels/>\n      </div>\n    </MSAViewer>\n  );\n}\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/qJKpPK/left?editors=0010)\n\n### Usage in Vanilla JS\n\nUsing the `react-msa-viewer` with React is highly recommended.\nHowever, it can be used in Vanilla JS:\n\n```html\n<html>\n<meta charset=\"utf-8\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.5.2/prop-types.js\"></script>\n<script src=\"https://unpkg.com/@plotly/react-msa-viewer/dist/index.umd.min.js\"></script>\n<body>\n  <div id=\"my-msa\" />\n  <script>\n  var options = {\n    sequences: [\n      {\n        name: \"seq.1\",\n        sequence: \"MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED\"\n      },\n      {\n        name: \"seq.2\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n      {\n        name: \"seq.3\",\n        sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n      },\n    ],\n    colorScheme: \"zappo\",\n   };\n  ReactDOM.render(\n    React.createElement(ReactMSAViewer.MSAViewer, options),\n    document.getElementById('my-msa')\n  );\n  </script>\n</body>\n</html>\n```\n\nSee an [example on CodePen](https://codepen.io/greenify/pen/xyYaWN?editors=1010).\n\nProps\n-----\n\n__Warning__: these properties are still susceptible to a _change at any moment_.\n\n<!-- GENERATED_DOCUMENTATION_START -->\n<!-- Run 'npm run docs' to rebuild this -->\n\n### `MSAViewer` (component)\n\nA general-purpose layout for the MSA components\n\nWhen children are passed it acts as a Context Provider for the msaStore,\notherwise it provides a default layout and forwards it props the respective\ncomponents.\n\n#### Props\n\n##### `barAttributes`\n\nAttributes to apply to each bar.\n\ntype: `object`\n\n\n##### `barFillColor`\n\nFill color of the OverviewBar, e.g. `#999999`\n\ntype: `string`\n\n\n##### `barMethod`\n\nMethod to use for the OverviewBar:\n - `information-content`: Information entropy after Shannon of a column (scaled)\n - `conservation`: Conservation of a column (scaled)\n\ntype: `enum('information-content'|'conservation')`\n\n\n##### `barStyle`\n\nInline styles to apply to each bar.\n\ntype: `object`\n\n\n##### `colorScheme`\n\nColorscheme to use. Currently the follow colorschemes are supported:\n`buried_index`, `clustal`, `clustal2`, `cinema`, `helix_propensity`, `hydro`,\n`lesk`, `mae`, `nucleotide`, `purine_pyrimidine`, `strand_propensity`, `taylor`,\n`turn_propensity`, and `zappo`.\n\nSee [msa-colorschemes](https://github.com/wilzbach/msa-colorschemes) for details.\n\ntype: `custom`\n\n\n##### `height`\n\nHeight of the sequence viewer (in pixels), e.g. `500`.\n\ntype: `number`\n\n\n##### `labelAttributes`\n\nAttributes to apply to each label.\n\ntype: `object`\n\n\n##### `labelComponent`\n\nComponent to create labels from.\n\ntype: `union(object|func)`\n\n\n##### `labelStyle`\n\nInline styles to apply to each label.\n\ntype: `object`\n\n\n##### `layout`\n\nPredefined layout scheme to use (only used when no child elements are provided).\nAvailable layouts: `basic`, `inverse`, `full`, `compact`, `funky`\n\ntype: `enum('basic'|'default'|'inverse'|'full'|'compact'|'funky')`\n\n\n##### `markerAttributes`\n\nAttributes to apply to each marker.\n\ntype: `object`\n\n\n##### `markerComponent`\n\nComponent to create markers from.\n\ntype: `union(object|func)`\n\n\n##### `markerStartIndex`\n\nAt which number the PositionBar marker should start counting.\nTypical values are: `1` (1-based indexing) and `0` (0-based indexing).\n\ntype: `number`\n\n\n##### `markerSteps`\n\nAt which steps the position labels should appear, e.g. `2` for (1, 3, 5)\n\ntype: `number`\n\n\n##### `markerStyle`\n\nInline styles to apply to each marker.\n\ntype: `object`\n\n\n##### `msaStore`\n\nA custom msaStore (created with `createMSAStore`).\nUseful for custom interaction with other components\n\ntype: `object`\n\n\n##### `onResidueClick`\n\nCallback fired when the mouse pointer clicked a residue.\n\ntype: `func`\n\n\n##### `onResidueDoubleClick`\n\nCallback fired when the mouse pointer clicked a residue.\n\ntype: `func`\n\n\n##### `onResidueMouseEnter`\n\nCallback fired when the mouse pointer is entering a residue.\n\ntype: `func`\n\n\n##### `onResidueMouseLeave`\n\nCallback fired when the mouse pointer is leaving a residue.\n\ntype: `func`\n\n\n##### `position`\n\nCurrent x and y position of the viewpoint\nin the main sequence viewer (in pixels).\nThis specifies the position of the top-left corner\nof the viewpoint within the entire alignment,\ne.g. `{xPos: 20, yPos: 5}`.\n\ntype: `custom`\n\n\n##### `sequenceBorder`\n\nWhether to draw a border.\n\ntype: `bool`\n\n\n##### `sequenceBorderColor`\n\nColor of the border. Name, hex or RGB value.\n\ntype: `string`\n\n\n##### `sequenceBorderWidth`\n\nWidth of the border.\n\ntype: `number`\n\n\n##### `sequenceOverflow`\n\nWhat should happen if content overflows.\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\")`\n\n\n##### `sequenceOverflowX`\n\nWhat should happen if x-axis content overflows (overwrites \"overflow\")\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\"|\"initial\")`\n\n\n##### `sequenceOverflowY`\n\nWhat should happen if y-axis content overflows (overwrites \"overflow\")\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\"|\"initial\")`\n\n\n##### `sequenceScrollBarPositionX`\n\nX Position of the scroll bar (\"top or \"bottom\")\n\ntype: `enum(\"top\"|\"bottom\")`\n\n\n##### `sequenceScrollBarPositionY`\n\nY Position of the scroll bar (\"left\" or \"right\")\n\ntype: `enum(\"left\"|\"right\")`\n\n\n##### `sequenceTextColor`\n\nColor of the text residue letters (name, hex or RGB value)\n\ntype: `string`\n\n\n##### `sequenceTextFont`\n\nFont to use when drawing the individual residues.\n\ntype: `string`\n\n\n##### `sequences` (required)\n\nSequence data.\n`sequences` expects an array of individual sequences.\n\n`sequence`: Raw sequence, e.g. `MEEPQSDPSIEP` (required)\n`name`: name of the sequence, e.g. `Sequence X`\n\nExample:\n\n```js\nconst sequences = [\n  {\n    name: \"seq.1\",\n    sequence: \"MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED\",\n  },\n  {\n    name: \"seq.2\",\n    sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\",\n  },\n];\n```\n\ntype: `arrayOf[SequencePropType]`\n\n\n##### `tileHeight`\n\nHeight of the main tiles (in pixels), e.g. `20`\n\ntype: `number`\n\n\n##### `tileWidth`\n\nWidth of the main tiles (in pixels), e.g. `20`\n\ntype: `number`\n\n\n##### `width`\n\nWidth of the sequence viewer (in pixels), e.g. `500`.\n\ntype: `number`\n\n### `Labels` (component)\n\nDisplays the sequence names.\n\n#### Props\n\n##### `cacheElements`\n\ndefaultValue: `10`\n\n\n##### `font`\n\nFont of the sequence labels, e.g. `20px Arial`\n\ntype: `string`\n\n\n##### `labelAttributes`\n\nAttributes to apply to each label.\n\ntype: `object`\n\n\n##### `labelComponent`\n\nComponent to create labels from.\n\ntype: `union(object|func)`\n\n\n##### `labelStyle`\n\nInline styles to apply to each label.\n\ntype: `object`\ndefaultValue: `{}`\n\n\n##### `style`\n\nInline styles to apply to the Label component\n\ntype: `object`\n\n### `OverviewBar` (component)\n\nCreates a small overview box of the sequences for a general overview.\n\n#### Props\n\n##### `engine`\n\nRendering engine: `canvas` or `webgl` (experimental).\n\ntype: `enum('canvas'|'webgl')`\ndefaultValue: `\"canvas\"`\n\n\n##### `fillColor`\n\nFill color of the OverviewBar, e.g. `#999999`\n\ntype: `string`\ndefaultValue: `\"#999999\"`\n\n\n##### `height` (required)\n\nWidth of the component (in pixels), e.g. `100`\n\ntype: `number`\ndefaultValue: `50`\n\n\n##### `method`\n\nMethod to use for the OverviewBar:\n - `information-content`: Information entropy after Shannon of a column (scaled)\n - `conservation`: Conservation of a column (scaled)\n\ntype: `enum('information-content'|'conservation')`\ndefaultValue: `\"conservation\"`\n\n\n##### `style`\n\nCustom style configuration.\n\ntype: `object`\n\n\n##### `width` (required)\n\nWidth of the component (in pixels), e.g. `100`\n\ntype: `number`\n\n### `PositionBar` (component)\n\nDisplays the sequence names with an arbitrary Marker component\n\n#### Props\n\n##### `cacheElements`\n\ndefaultValue: `10`\n\n\n##### `font`\n\nFont of the sequence labels, e.g. `20px Arial`\n\ntype: `string`\n\n\n##### `height`\n\nHeight of the PositionBar (in pixels), e.g. `100`\n\ntype: `number`\ndefaultValue: `15`\n\n\n##### `markerAttributes`\n\nAttributes to apply to each marker.\n\ntype: `object`\n\n\n##### `markerComponent`\n\nComponent to create markers from.\n\ntype: `union(object|func)`\n\n\n##### `markerSteps`\n\nAt which steps the position labels should appear, e.g. `2` for (1, 3, 5)\n\ntype: `number`\ndefaultValue: `2`\n\n\n##### `markerStyle`\n\nInline styles to apply to each marker.\n\ntype: `object`\ndefaultValue: `{}`\n\n\n##### `startIndex`\n\nAt which number the PositionBar marker should start counting.\nTypical values are: `1` (1-based indexing) and `0` (0-based indexing).\n\ntype: `number`\ndefaultValue: `1`\n\n\n##### `style`\n\nInline styles to apply to the PositionBar component\n\ntype: `object`\ndefaultValue: `{\n  font: \"12px Arial\",\n}`\n\n### `SequenceOverview` (component)\n\n\n\n#### Props\n\n##### `engine`\n\nRendering engine: `canvas` or `webgl` (experimental).\n\ntype: `enum('canvas'|'webgl')`\ndefaultValue: `\"canvas\"`\n\n\n##### `height` (required)\n\nWidth of the component (in pixels), e.g. `100`\n\ntype: `number`\ndefaultValue: `50`\n\n\n##### `style`\n\nCustom style configuration.\n\ntype: `object`\n\n\n##### `tileHeight`\n\nHeight of a tile in the OverviewBar, e.g. `5`\n\ntype: `number`\ndefaultValue: `5`\n\n\n##### `tileWidth`\n\nWidth of a tile in the OverviewBar, e.g. `5`\n\ntype: `number`\ndefaultValue: `5`\n\n\n##### `width` (required)\n\nWidth of the component (in pixels), e.g. `100`\n\ntype: `number`\n\n### `SequenceViewer` (component)\n\nComponent to draw the main sequence alignment.\n\n#### Props\n\n##### `border`\n\nWhether to draw a border.\n\ntype: `bool`\ndefaultValue: `false`\n\n\n##### `borderColor`\n\nColor of the border. Name, hex or RGB value.\n\ntype: `string`\ndefaultValue: `\"black\"`\n\n\n##### `borderWidth`\n\nWidth of the border.\n\ntype: `number`\ndefaultValue: `1`\n\n\n##### `cacheElements`\n\nNumber of residues to prerender outside of the visible viewbox.\n\ntype: `number`\ndefaultValue: `20`\n\n\n##### `onResidueClick`\n\nCallback fired when the mouse pointer clicked a residue.\n\ntype: `func`\n\n\n##### `onResidueDoubleClick`\n\nCallback fired when the mouse pointer clicked a residue.\n\ntype: `func`\n\n\n##### `onResidueMouseEnter`\n\nCallback fired when the mouse pointer is entering a residue.\n\ntype: `func`\n\n\n##### `onResidueMouseLeave`\n\nCallback fired when the mouse pointer is leaving a residue.\n\ntype: `func`\n\n\n##### `overflow`\n\nWhat should happen if content overflows.\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\")`\ndefaultValue: `\"hidden\"`\n\n\n##### `overflowX`\n\nWhat should happen if x-axis content overflows (overwrites \"overflow\")\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\"|\"initial\")`\ndefaultValue: `\"auto\"`\n\n\n##### `overflowY`\n\nWhat should happen if y-axis content overflows (overwrites \"overflow\")\n\ntype: `enum(\"hidden\"|\"auto\"|\"scroll\"|\"initial\")`\ndefaultValue: `\"auto\"`\n\n\n##### `scrollBarPositionX`\n\nX Position of the scroll bar (\"top or \"bottom\")\n\ntype: `enum(\"top\"|\"bottom\")`\ndefaultValue: `\"bottom\"`\n\n\n##### `scrollBarPositionY`\n\nY Position of the scroll bar (\"left\" or \"right\")\n\ntype: `enum(\"left\"|\"right\")`\ndefaultValue: `\"right\"`\n\n\n##### `showModBar`\n\nShow the custom ModBar\n\ntype: `bool`\ndefaultValue: `false`\n\n\n##### `textColor`\n\nColor of the text residue letters (name, hex or RGB value)\n\ntype: `string`\ndefaultValue: `\"black\"`\n\n\n##### `textFont`\n\nFont to use when drawing the individual residues.\n\ntype: `string`\ndefaultValue: `\"18px Arial\"`\n\n\n##### `xGridSize`\n\nNumber of residues to cluster in one tile (x-axis) (default: 10)\n\ntype: `number`\ndefaultValue: `10`\n\n\n##### `yGridSize`\n\nNumber of residues to cluster in one tile (y-axis) (default: 10)\n\ntype: `number`\ndefaultValue: `10`\n\n\n<!-- GENERATED_DOCUMENTATION_END -->\n\n### Creating your own MSA components\n\nThe React MSA Viewer uses an Redux store internally.\nYou can connect your components with it too.\n\n```jsx\nimport React, {Component} from 'react';\nimport {\n  msaConnect,\n  MSAViewer,\n  SequenceViewer,\n} from '@plotly/react-msa-viewer';\n\nclass MyFirstMSAPluginComponent extends React.Component {\n  render() {\n    const residue = \"E\";\n    const style = {\n      width: this.props.tileWidth,\n      height: this.props.tileHeight,\n      backgroundColor: this.props.colorScheme.getColor(residue),\n    }\n    return (\n      <div style={style}>\n        {residue}\n      </div>\n    );\n  }\n}\n\nconst mapStateToProps = state => {\n  return {\n    tileHeight: state.props.tileHeight,\n    tileWidth: state.props.tileWidth,\n    colorScheme: state.props.colorScheme,\n  }\n}\n\nconst MyFirstMSAPlugin = msaConnect(\n  mapStateToProps,\n)(MyFirstMSAPluginComponent);\n\nfunction MyMSA() {\n  return (\n    <MSAViewer sequences={sequences}>\n      <SequenceViewer />\n      <br />\n      <MyFirstMSAPlugin />\n    </MSAViewer>\n  );\n}\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/MPLOZE?editors=0010)\n\nHowever, for performance reasons you need to use a special mixin to listen for\nposition events.\n\n```jsx\nimport {\n  withPositionStore,\n  MSAViewer,\n  SequenceViewer,\n} from '@plotly/react-msa-viewer';\n\n\nclass MyFirstMSAPlugin extends React.Component {\n  shouldRerender(newPosition) {\n     return true;\n  }\n  render() {\n    return (\n      <div>\n        x: {this.position.xPos}, y: {this.position.yPos}\n      </div>\n    );\n  }\n}\n\n// inject the MSAPositionStore as this.position\nwithPositionStore(MyFirstMSAPlugin);\n\nfunction MyMSA() {\n  return (\n    <MSAViewer sequences={sequences}>\n      <SequenceViewer />\n      <MyFirstMSAPlugin />\n    </MSAViewer>\n  );\n}\n\nReactDOM.render(<MyMSA />, document.getElementById(\"my-msa\"));\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/PyVOKM?editors=0010)\n\nAlternatively, you can also listen to events.\n\nListen to events\n----------------\n\nThe `MSAViewer` components (and its subcomponents) provide a variety of callbacks\nlike `onResidueClick` that can be used to plug with your code:\n\n```jsx\nimport {\n  MSAViewer,\n} from 'react-msa-viewer';\n\nfunction MyMSA() {\n  return <MSAViewer sequences={sequences} onResidueClick={console.log} />\n}\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/QZYOep?editors=1011)\n\nSome events also trigger custom DOM events which might simply subscription\noutside of React:\n\n```html\n<html>\n<meta charset=\"utf-8\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.5.2/prop-types.js\"></script>\n<script src=\"https://unpkg.com/@plotly/react-msa-viewer/dist/index.umd.min.js\"></script>\n<body>\n  <div id=\"my-msa\" />\n  <script>\n    var options = {\n      sequences: [\n        {\n          name: \"seq.1\",\n          sequence: \"MEEPQSDPSIEP-PLSQETFSDLWKLLPENNVLSPLPS-QA-VDDLMLSPDDLAQWLTED\"\n        },\n        {\n          name: \"seq.2\",\n          sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n        },\n        {\n          name: \"seq.3\",\n          sequence: \"MEEPQSDLSIEL-PLSQETFSDLWKLLPPNNVLSTLPS-SDSIEE-LFLSENVAGWLEDP\"\n        }\n      ],\n      colorScheme: \"zappo\"\n    };\n    var el = document.getElementById(\"my-msa\");\n    ReactDOM.render(React.createElement(ReactMSAViewer.MSAViewer, options), el);\n    el.addEventListener('residueClick', (e) => console.log(e.detail));\n  </script>\n</body>\n</html>\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/yRZPga?editors=1011).\n\nThe custom DOM events bubble up the tree and contain their payload in`.detail`.\n\nSending actions\n---------------\n\nWhile the most common way to update the MSA is to update its properties, you\ncan also send a variety of actions to the MSAViewer.\n\n```jsx\nimport {\n  MSAViewer,\n} from 'react-msa-viewer';\n\nclass MyMSA extends React.Component {\n  moveLeft = () => {\n    this.msa.movePosition({yMovement: -10})\n  }\n  moveRight = () => {\n    this.msa.movePosition({yMovement: 10})\n  }\n  jumpOrigin = () => {\n    debugger;\n    this.msa.movePosition({yPos: 0})\n  }\n  render() {\n    return (\n      <div>\n        <MSAViewer sequences={sequences} ref={(ref) => this.msa = ref} />\n        <button onClick={this.moveLeft}>Move left</button>\n        <button onClick={this.moveRight}>Move right</button>\n        <button onClick={this.jumpOrigin}>Jump to the origin</button>\n      </div>\n    );\n  }\n}\n```\n\n[Open on CodePen](https://codepen.io/greenify/pen/LgqeNo?editors=0010)\n\nIt's also possible to use `actions` to create a payload and dispatch it later:\n\n```jsx\nimport {\n  MSAViewer,\n} from 'react-msa-viewer';\n\nclass MyMSA extends React.Component {\n  moveLeft = () => {\n    const payload = actions.movePosition({yMovement: -10});\n    this.msa.dispatch(payload);\n  }\n  moveRight = () => {\n    const payload = actions.movePosition({yMovement: 10});\n    this.msa.dispatch(payload);\n  }\n  jumpOrigin = () => {\n    const payload = actions.updatePosition({yPos: 0});\n    this.msa.dispatch(payload);\n  }\n  render() {\n    return (\n      <div>\n        <MSAViewer sequences={sequences} ref={(ref) => this.msa = ref} />\n        <button onClick={this.moveLeft}>Move left</button>\n        <button onClick={this.moveRight}>Move right</button>\n        <button onClick={this.jumpOrigin}>Jump to the origin</button>\n      </div>\n    );\n  }\n}\n```\n\nDevelopment\n-----------\n\n### Getting started\n\nGet the code:\n\n```\ngit clone https://github.com/plotly/react-msa-viewer\n```\n\nInstall the project `dev` dependencies:\n\n```\nnpm install\n```\n\nContributing\n------------\n\nPlease, see the [CONTRIBUTING](CONTRIBUTING.md) file.\n\nContributor Code of Conduct\n---------------------------\n\nPlease note that this project is released with a [Contributor Code of\nConduct](http://contributor-covenant.org/). By participating in this project you\nagree to abide by its terms. See [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) file.\n\nLicense\n-------\n\nreact-msa-viewer is released under the MIT License. See the bundled\n[LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}