{"id":28343051,"url":"https://github.com/lipme/vue-svg-msa","last_synced_at":"2026-01-26T13:05:54.659Z","repository":{"id":57156561,"uuid":"320272460","full_name":"lipme/vue-svg-msa","owner":"lipme","description":"A VueJs module to create an multiple sequence alignment in SVG. https://www.npmjs.com/package/vue-svg-msa","archived":false,"fork":false,"pushed_at":"2021-06-18T13:25:32.000Z","size":1853,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-22T09:52:19.709Z","etag":null,"topics":["alignment","bioinformatics","msa"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lipme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-10T12:55:55.000Z","updated_at":"2021-07-07T09:31:02.000Z","dependencies_parsed_at":"2022-09-07T20:31:41.538Z","dependency_job_id":null,"html_url":"https://github.com/lipme/vue-svg-msa","commit_stats":null,"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lipme%2Fvue-svg-msa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lipme%2Fvue-svg-msa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lipme%2Fvue-svg-msa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lipme%2Fvue-svg-msa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lipme","download_url":"https://codeload.github.com/lipme/vue-svg-msa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lipme%2Fvue-svg-msa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":257695209,"owners_count":22587253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alignment","bioinformatics","msa"],"created_at":"2025-05-27T06:28:02.906Z","updated_at":"2026-01-26T13:05:54.653Z","avatar_url":"https://github.com/lipme.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-svg-msa\n\nVueJs component to build a svg multiple sequence alignment.\n\n![screenshot](https://raw.githubusercontent.com/lipme/vue-svg-msa/master/public/screenshot.png)\n\n## Installation\n\nnpm install --save vue-svg-msa\nnpm install --save vue-clipboard2\n\n## Usage\n\nin main.js, add:\n\n```\nimport VueClipboard from \"vue-clipboard2\";\nVue.use(VueClipboard);\n```\n\nNow you can use it in your component:\n\n```\nimport {SvgMsa} from 'vue-svg-msa'\nimport 'vue-svg-msa/dist/vue-svg-msa.css'\n```\n\n```\n\u003cSvgMsa :seqs=\"seqs\"\u003e\n\u003cSvgMsa\n      :seqs=\"seqs\"\n      :type=\"nt\"\n      :start=\"start\"\n      :end=\"end\"\n      :tracks=\"tracks\"\n      :display-track-tooltip=\"false\"\n      :metadata=\"metadata\"\n      :glyphs=\"glyphs\"\n      :display-glyph-tooltip=\"true\"\n      :selectedseqs=\"getselectectids\"\n      :highlight-selection=\"always\"\n      :offset-x=\"200\"\n      coloring=\"auto\"\n      :resolution=\"sequence\"\n    \u003e\u003c/SvgMsa\u003e\n```\n\nOnly the 'seqs' attribute is mandatory.\n**seqs** is an array as:\n\n```\nseqs: [\n{\nseq: 'ATCATCATCATCATCATACTCATTTTTACAT---CATCATACTACATCATCATATACTCATTTTTACATCATC-TCTT',\nid: 'seqid1',\nname: 'sequence1',\ncolor: 'red',\ntitleColor: 'blue',\nisConsensus: false,\nisNode: false\n},\n...\n],\n```\n\nOnly the 'seq' and 'id' attributes are mandatory. If the 'titleColor' attribute is defined, the name of the sequence is written in this color.\nThe 'color' attribute is the nucleotide background color only applied when the 'coloring' attribute of svg-msa is equal to 'seqcolor'. The sequences for which the attribute **isConsensus** is true are displayed in bold.\nThe name of the sequences for which the attribute **isNode** is true can be clicked, and an event named 'select-node' emits the id of the sequence.\n\n**type** is the composition of the sequences: 'nt' for nucleotides (value by default) or 'aa' for amino acids.\n\n**start** and **end** are respectively the start and end positions (1-based) of the sequence regions to be displayed.\n\nTo display additional tracks in the top of the svg, complete the **tracks** array.\n**tracks** is an array as:\n\n```\ntracks: [\n{\n  \"features\": [\n    {\n      \"positions\": [[1,20],[52,80]],\n      \"type\": \"exon\",\n      \"color\": \"green\",\n      \"fill-opacity\": \"0.5\"\n    },\n    {\n      \"positions\": [[21,51]],\n      \"type\": \"intron\",\n      \"color\": \"yellow\"\n    }\n  ],\n  \"trackLabel\": \"exon/intron\"\n}]\n```\n\nIf **display-track-tooltip** is true, display the type and the positions of the feature when hovering with the mouse\n\n**coloring** allows to colored the nucleotides. The accepted values are 'no', 'seqcolor', 'auto', 'metadata'. It is allowed to mix the values, eg 'seqcolor|metadata'\nIf the value is 'metadata', the styles described in the **metadata** array are apply to the svg image.\n\n```\nmetadata: [\n    {\n          label: \"Conservation level\",\n          categories: [\n            {\n              label: \"high level\",\n              style: {\n                fill: \"red\",\n                \"fill-opacity\": 0.5,\n                stroke: \"black\",\n              },\n              regions: [\n                {\n                  id: \"seqid1\",\n                  ranges: [\n                    [1, 31],\n                    [35, 78],\n                  ],\n                },\n                {\n                  id: \"seqid2\",\n                  ranges: [[1, 31]],\n                },\n              ],\n            },\n          ],\n  }, {...}\n]\n```\n\nIn a region (=an element of the 'regions' array), if the 'id' attribute is empty or missing, the regions of all the sequences would be colored.\nIn a region, if the 'ranges' attribute is empty or missing, all the sequence would be colored.\n\nNote: 'label' attributes are not used.\n\n**selectedseqs** is an array of sequence ids which will be highlighted in the msa.\n\n**glyphs** is an array used to display glyphs to makes possible to add information to describe the sequences.\nfor now, for all the sequences of a categorie, a colored circle is drawn to the left of the sequence\n\n```\nglyphs: [\n  {\n    label: 'resistant/not_resistant',\n    categories: [\n      { label: 'resistant', style: { fill: 'red' }, ids: ['seqid1'] },\n      { label: 'not resistant', style: { fill: 'pink' }, ids: ['seqid2', 'seqid3'] }\n    ]\n  }, ...\n]\n```\n\nIf **display-glyph-tooltip** is true, display the label of the glyph when hovering the mouse over a circle\n\n**resolution** allows the values 'sequence' (by default) and 'nt'. If \"nt\", the rendering quality would be better and hovering the mouse over a nucleotide gives access to its position in the sequence.\n\n**highlight-selection**: by default, if there are selected sequences, metadata on non selected sequences will appear with less opacity. If the highlight-selection property is set to\n'always', metadata on non selected sequences will appear with less opacity even if there is no selected sequences. On the contrary, if the highlight-selection property is set to\n'never', metadata will appear always with the same opacity, whatever if the sequence is selected or not.\n\n##Contributors\n\nLIPM Bioinfo Team\n\n- Erika Sallet\n- Ludovic Cottret\n- Sebastien Carrere\n- Ludovic Legrand\n- Jerome Gouzy\n\n##Contact\n\nludovic.cottret@inrae.fr\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flipme%2Fvue-svg-msa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flipme%2Fvue-svg-msa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flipme%2Fvue-svg-msa/lists"}