让开源，少一点语言距离。
npm包中文文档

@bighatbio/msa

中文文档
1.0.6发布于 2021/10/19BSL-1.0CommonJS近 30 天下载 1.9万

显示多个序列

中文使用文档
中文原文
文档目录33 节
  1. 用这个
  2. 演示
  3. 使用 MSA 服务器
  4. 导入
  5. (b) 从字符串中导入自己的序列
  6. 从 DOM 导入您的序列
  7. 基本配置参数
  8. 获得帮助
  9. 正在采取行动的MSAViewer
  10. 更改颜色方案
  11. 添加特性
  12. 更新如下
  13. 更新选择
  14. 跳转到一列
  15. 导出并保存
  16. 更新属性
  17. 听属性事件
  18. 倾听用户交互
  19. G 的配置参数
  20. 序列模型
  21. 财务问题
  22. 准则
  23. 第1步 设置
  24. 步骤2:发展
  25. 为浏览器编译
  26. 软件包列表
  27. 项目结构
  28. 想多学点吗?
  29. 参与
  30. 团队
  31. 版本 & CDN
  32. 许可证
  33. 引用MSAViewer号

MSA维耶尔

多序列对齐查看器 - MSAViewer - 一个BioJS组件.

          .         .
         ,8.       ,8.            d888888o.           .8.
        ,888.     ,888.         .`8888:' `88.        .888.
       .`8888.   .`8888.        8.`8888.   Y8       :88888.
      ,8.`8888. ,8.`8888.       `8.`8888.          . `88888.
     ,8'8.`8888,8^8.`8888.       `8.`8888.        .8. `88888.
    ,8' `8.`8888' `8.`8888.       `8.`8888.      .8`8. `88888.
   ,8'   `8.`88'   `8.`8888.       `8.`8888.    .8' `8. `88888.
  ,8'     `8.`'     `8.`8888.  8b   `8.`8888.  .8'   `8. `88888.
 ,8'       `8        `8.`8888. `8b.  ;8.`8888 .888888888. `88888.
,8'         `         `8.`8888. `Y8888P ,88P'.8'       `8. `88888.

Build Status NPM version Join the chat at https://gitter.im/wilzbach/msa Dependencies Code Climate NPM downloads

<script src=//cdn.bio.sh/msa/1.0/msa.min.gz.js></script>

是的,你可以链接到精密的,gzipped CDN版本,也可以从S3下载dev版本.

Min version Dev version

NPM

用这个

全屏幕 模式.

演示

这些例子表明,你如何将MSAViewer嵌入你的页面.

JSBin clustal JSBin large

目前狙击手 有不同实例

显示管理事务协议

basic MSA

特征

  • 纯在浏览器中运行
  • 以 FASTA, Clustal 等格式导入文件...
  • 互动和接收 活动
  • 过滤器, 排序, 隐藏序列
  • 显示序列 特性
  • 可扩展 视图 帮助您融入社会
  • 可自定义的视图端口
  • 作为设计规则的简单
  • 导出为 fASTAb
  • 生成相环
  • 再来点...

使用 MSA 服务器

以下例子假定: msa() 构造器可用 .

如果您已经装入 msa 作为你的网页上的脚本 和类似的东西...

<script src="//cdn.bio.sh/msa/latest/msa.min.gz.js"></script>

...然后祝贺! 你准备好了.

使用时 npm 并且正在添加msa作为依赖,然后您可以使用以下方法:

var msa = require("msa");

导入

(a) 直接导入url

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
};
var m = msa(opts);

- > (中文) JSBin 实例

(b) 从字符串中导入自己的序列

// your fasta file (advice: save it in a DOM node)
var fasta = ">seq1\n\
ACTG\n\
>seq2\n\
ACGG\n";

// parsed array of the sequences
var seqs =  msa.io.fasta.parse(fasta);

var m = msa({
     el: rootDiv,
     seqs: seqs
});
m.render();

- > (中文) JSBin 示例

c) 同步导入

var m = msa({
    el: rootDiv,
});
msa.io.clustal.read("https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal", function(err, seqs){
    m.seqs.reset(seqs);
    m.render();
});

- > (中文) JSBin 实例

从 DOM 导入您的序列

var fasta = document.getElementById("fasta-file").innerText;
var seqs = msa.io.fasta.parse(fasta);

var m = msa({
    el: rootDiv,
    seqs: seqs
});
m.render();

以下数据存储在您的 HTML 页面中:

<pre style="display: none" id="fasta-file">
>seq1
ACTG
>seq2
ACGG</pre>

- > (中文) JSBin 示例

基本配置参数

  • bootstrapMenu: 自动显示菜单
  • el: 根 DOM 元素
  • importURL: 当您想要自动导入文件时
  • seqs: 如果您喜欢通过序列作为对象

还有其他许多备选办法,归入这些类别。 详情见下文.

  • column: 隐藏列
  • colorscheme: 颜色图案的一切
  • conf: 基本配置
  • vis:视觉元素
  • visorder: 命令视觉元素
  • zoomer: 所有以像素为基础的

获得帮助

请打开一个 问题 或打我们 减肥

正在采取行动的MSAViewer

你在用MSAViewer吗? 不要异化做公关,让我们知道!

更改颜色方案

检查这个 现场实例 或者说 编辑。 。 。 .

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);

拥有颜色方案

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);
m.g.colorscheme.addStaticScheme("own",{A: "orange", C: "red", G: "green", T: "blue"});
m.g.colorscheme.set("scheme", "own");

看看这个 医生 需要更多信息.

添加特性

检查这个 现场实例 或者说 编辑。 。 。 .

var xhr = require("xhr");
var gffParser = require("biojs-io-gff");
var m = msa({el: rootDiv, importURL: "https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal");

// add features
xhr("./data/fer1.gff3", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

// or even more
xhr("./data/fer1.gff_jalview", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

更新如下

m.seqs.at(0).set("hidden", true) // hides the first seq
m.seqs.at(0).get("seq") // get raw seq
m.seqs.at(0).get("seqId") // get seqid
m.seqs.at(0).set("seq", "AAAA") // sets seq
m.seqs.add({seq: "AAA"});  // we add a new seq at the end
m.seqs.unshift({seq: "AAA"});  // we add a new seq at the beginning
m.seqs.pop() // remove and return last seq
m.seqs.shift() // remove and return first seq
m.seqs.length // nr
m.seqs.pluck("seqId") // ["id1", "id2", ..]
m.seqs.remove(m.seqs.at(2)) // remove seq2
m.seqs.getMaxLength() // 200
m.seqs.addFeatures()
m.seqs.removeAllFeatures()
m.seqs.setRef(m.seqs.at(1)) // sets the second seq as reference (default: first)
m.seqs.comparator = "seqId" // sort after seqId
m.seqs.sort() // apply our new comparator
m.seqs.comparator =  function(a,b){ return - a.get("seq").localeCompare(b.get("seq"))} // sort after the seq itself in descending order
m.seqs.sort()

连 更多 这是可能的.

更新选择

m.g.selcol.add(new msa.selection.rowsel({seqId: "f1"})); // row-based
m.g.selcol.add(new msa.selection.columnsel({xStart: 10, xEnd: 12})); // column-wise
m.g.selcol.add(new msa.selection.possel({xStart: 10, xEnd: 12, seqId: "f1"})); // union of row and column
m.g.selcol.reset([new msa.selection.rowsel({seqId: "f1"})]); // reset

m.g.selcol.getBlocksForRow() // array of all selected residues for a row
m.g.selcol.getAllColumnBlocks() // array with all selected columns
m.g.selcol.invertRow(@model.pluck "id")
m.g.selcol.invertCol([0,1,2])
m.g.selcol.reset() // remove the entire selection
m.g.user.set("searchText", search) // search

跳转到一列

m.g.zoomer.setLeftOffset(10) // jumps to column 10

导出并保存

m.utils.export.saveAsFile(m, "all.fasta") // export seqs
m.utils.export.saveSelection(m, "selection.fasta")
m.utils.export.saveAnnots(m, "features.gff3")
m.utils.export.saveAsImg(m,"biojs-msa.png")

// share the seqs with the public = get a public link
m.utils.export.shareLink(m, function(link){
    window.open(link, '_blank')
})

// share via jalview
var url =  m.g.config.get('url')
if url.indexOf("localhost") || url === "dragimport"
    m.utils.export.publishWeb(m, function(link){
        m.utils.export.openInJalview(link, m.g.colorscheme.get("scheme"))
    });
}else{
    m.utils.export.openInJalview(url, m.g.colorscheme.get("scheme"))
}

更新属性

msa.g.vis.set("marker", false); // hides the markers
msa.g.zoomer.set("alignmentHeight", 500) // modifies the default height

听属性事件

所有班级

m.g.selcol.on("change", function(prev, new){

})

您也可以聆听更具体的事件

m.g.vis.on("change:alignmentWidth", function(prev, new){

})

倾听用户交互

msa.g.on("residue:click", function(data){ ... }):
msa.g.on("residue:mousein", function(data){ ... }):
msa.g.on("residue:mouseout", function(data){ ... }):

如果您想听鼠标事件, 您需要设置旗: conf.registerMouseHover。 。 。 . 还有很多事情你可以听

msa.g.on("row:click", function(data){ ... }):
msa.g.on("column:click", function(data){ ... }):
msa.g.on("meta:click", function(data){ ... }):
...

G 的配置参数

conf: {
    registerMouseHover: false,
    registerMouseClicks: true,
    importProxy: "https://cors-anywhere.herokuapp.com/",
    eventBus: true,
    alphabetSize: 20,
    dropImport: false,
    debug: false,
    hasRef: false // hasReference,
    manualRendering: false // manually control the render (not recommened)
},
colorscheme: {
    scheme: "taylor", // name of your color scheme
    colorBackground: true, // otherwise only the text will be colored
    showLowerCase: true, // used to hide and show lowercase chars in the overviewbox
    opacity: 0.6 //opacity for the residues
},
columns: {
    hidden: [] // hidden columns
}
vis: {
    sequences: true,
    markers: true,
    metacell: false,
    conserv: false,
    overviewbox: false,
    seqlogo: false,
    gapHeader: false,
    leftHeader: true,

    // about the labels
    labels: true,
    labelName: true,
    labelId: true,
    labelPartition: false,
    labelCheckbox: false,

    // meta stuff
    metaGaps: true,
    metaIdentity: true,
    metaLinks: true
},
zoomer: {
    // general
    alignmentWidth: "auto",
    alignmentHeight: 225,
    columnWidth: 15,
    rowHeight: 15,
    autoResize: true, // only for the width

    // labels
    textVisible: true,
    labelIdLength: 30,
    labelNameLength: 100,
    labelPartLength: 15,
    labelCheckLength: 15,
    labelFontsize: 13,
    labelLineHeight: "13px",

    // marker
    markerFontsize: "10px",
    stepSize: 1,
    markerStepSize: 2,
    markerHeight: 20,

    // canvas
    residueFont: "13", //in px
    canvasEventScale: 1,

    // overview box
    boxRectHeight: 2,
    boxRectWidth: 2,
    overviewboxPaddingTop: 10,

    // meta cell
    metaGapWidth: 35,
    metaIdentWidth: 40,
    metaLinksWidth: 25
}

菜单有它自己的小组属性,可以被修改. 这是 menu 属性.

menu: {
    menuFontsize: "14px",
    menuItemFontsize: "14px",
    menuItemLineHeight: "14px",
    menuMarginLeft: "3px",
    menuPadding: "3px 4px 3px 4px",
}

序列模型

{
  name: "",
  id: "",
  seq: "",
  height: 1,
  ref: false // reference: the sequence used in BLAST or the consensus seq
}

财务问题

问:我如何定义自己的颜色方案?

↝ 在 JSBin 播放游戏 ↝ 读取文档

准则

  • 儿童状况 - > 避免混淆
  • 保持模块化
  • 避免锅炉-板码
  • 避免超过两个参数用于公共方法 - > 接受字典更灵活
  • 每个文件最多200行(- > 更好的组织)

第1步 设置

git clone https://github.com/wilzbach/msa
cd msa
npm install
  • 无: 你需要一个 npm 此软件包管理器( 和节点) . 在大多数发行版上,有一个软件包,看 这里

步骤2:发展

在根目录中执行 :

./w

你可以浏览片段 本地主机: 9090/ 片段。 。 。 .

为浏览器编译

对多数情况来说,使用我们的CDN建筑是最佳办法. 如果你需要修改 管理事务协议,你可以得到一个微调捆绑 文件夹 dist 改为:

gulp build

软件包列表

↝ 软件包列表

项目结构

  • browser.js 浏览器主文件 - 定义浏览器中的全局命名空间
  • css 样式表文件夹( 以前用于 SASS)
  • gulpfile.js 任务定义文件(用于 ulp
  • package.json npm 配置
  • examples 运行的短编码片段 sniper
  • src 主源代码

想多学点吗?

继续 维基百科。 。 。 .

参与

随便选一个公开的话题 问题跟踪器 并且帮助让MSAViewer更好.

得到你的特性请求的最好方式是 给我们发送一个拉出请求. 不要担心简单的执行,我们将帮助你使它更好.

问更多问题,我们查问题追踪器或 减肥。 。 。 .

团队

没有这些人的帮助 MSAViewer计划是不可能实现的:

塞巴斯蒂安·威尔斯巴赫(慕尼黑技术大学;TUM),伊恩·西利托(伦敦大学学院),贝内迪克特·劳斯赫(TUM),罗伯特·谢里丹(哈佛医学院),詹姆斯·普罗克特(邓德大学),苏珊娜·刘易斯(Berkeley),布尔哈尔德·罗斯特(TUM),塔季亚纳·戈德伯格(TUM)和盖伊·亚克达夫(TUM).

你想加入团队吗? 只要抓住一个问题 并给我们一个公关! 问我们 减肥 如果你需要帮助才能开始.

版本 & CDN

以下发布新的管理事务协议版本 语义版本。 。 。 . 从1.0.3起算 标记 匹配 npm 和 CDN 上部署的版本 . 在CDN上,我们提供了四个不同的版本:

https://cdn.bio.sh/msa/1.0.3/msa.min.gz.js // static, won't change
https://cdn.bio.sh/msa/1.0/msa.min.gz.js // will be updated until a new minor version is released
https://cdn.bio.sh/msa/1/msa.min.gz.js // will be updated until a new major version is released
https://cdn.bio.sh/msa/latest/msa.min.gz.js // will be updated on every commit

如果你在生产时使用MSAViewer,我们建议将CDN版本锁定到精确的发布和不时更新.

许可证

本项目根据以下规定获得许可证: 启动软件许可证 1.0。 。 。 .

特此免费准许任何人或任何组织 获取软件副本和所附文件 使用、复制、展示、分发、, 执行和传送软件,并编写 软件,并允许向 这样做,但须符合下列条件:

如果你在你的网站上使用MSAViewer,它只需要你链接到我们.

引用MSAViewer号

MSAViewer已经出版:tada:

请引用 本文当您在您的项目中使用 MSAViewer.

盖伊·雅克达夫和塞巴斯蒂安·威尔斯巴赫,贝内迪克特·劳斯彻和罗伯特·谢里丹,伊恩·西利托和詹姆斯·普罗克特和苏珊娜·刘易斯,布尔克哈德·罗斯特和塔特亚纳·戈德伯格. "MSAViewer:交互式JavaScript可视化多序列对接". Bioinformics (2016)

作为 Bibtex :

@Article{msaviewer,
   Author = {Guy Yachdav and Sebastian Wilzbach and Benedikt Rauscher and Robert Sheridan and Ian Sillitoe and James Procter and Suzanna Lewis and Burkhard Rost and Tatyana Goldberg},
   Title="{{M}{S}{A}{V}iewer: interactive {J}ava{S}cript visualization of multiple sequence alignments}",
   Journal="Bioinformatics",
   Year="2016",
   Pages=" ",
   Month="Jul",
   Doi = {10.1093/bioinformatics/btw474},
   Url = {http://dx.doi.org/10.1093/bioinformatics/btw474}
}

版本与发布记录

@bighatbio/msa 共发布 3 个版本，首次发布于 2021/10/18；过去 12 个月发布了 0 个版本。

版本发布日期距今
1.0.6latest2021/10/195 年前
1.0.52021/10/195 年前
1.0.42021/10/185 年前

关于 @bighatbio/msa 的常见问题

@bighatbio/msa 是什么？

显示多个序列

如何安装 @bighatbio/msa？

在项目目录运行 npm install @bighatbio/msa，或使用 pnpm add / yarn add / bun add。

@bighatbio/msa 支持 TypeScript 吗？

该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bighatbio__msa 是否存在。

@bighatbio/msa 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。

@bighatbio/msa 可以商用吗？

@bighatbio/msa 使用 BSL-1.0 许可。声明的许可为 BSL-1.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

@bighatbio/msa 的下载量有多少？

根据 npm 官方下载统计，@bighatbio/msa 在 2026/10/08 – 2026/11/06 这 30 天内被下载 19,107 次，日均约 637 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@bighatbio/msa 还在维护吗？

最新版本 1.0.6 发布于 2021/10/19（5 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。