jbrowse-plugin-mafviewer 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# v1.0.4
+
+- Fix row height calculations

package/README.md

@@ -6,3 +6,186 @@ This is a port of the JBrowse 1 plugin https://github.com/cmdcolin/mafviewer to
 JBrowse 2
 
 ![](img/1.png)
+
+## Demo
+
+https://jbrowse.org/code/jb2/main/?config=%2Fdemos%2Fmafviewer%2Fhg38%2Fdistconfig.json&session=share-O3sxhB3iS2&password=8Ysiv
+
+## GUI usage (e.g. in JBrowse Desktop)
+
+This short screenshot workflow shows how you can load your own custom MAF files
+via the GUI
+
+First install the plugin via the plugin store
+
+![](img/3.png)
+
+Then use the custom "Add track workflow"
+
+![](img/2.png)
+
+## Manual config entry
+
+### Add plugin to your jbrowse 2 config.json
+
+```json
+{
+  "plugins": [
+    {
+      "name": "MafViewer",
+      "url": "https://unpkg.com/jbrowse-plugin-mafviewer/dist/jbrowse-plugin-mafviewer.umd.production.min.js"
+    }
+  ]
+}
+```
+
+### Example MafTabixAdapter config
+
+The MafTabix track is created according to
+
+```json
+{
+  "type": "MafTrack",
+  "trackId": "chrI.bed",
+  "name": "chrI.bed",
+  "adapter": {
+    "type": "MafTabixAdapter",
+    "samples": ["ce10", "cb4", "caeSp111", "caeRem4", "caeJap4", "caePb3"],
+    "bedGzLocation": {
+      "uri": "chrI.bed.gz"
+    },
+    "index": {
+      "location": {
+        "uri": "chrI.bed.gz.tbi"
+      }
+    }
+  },
+  "assemblyNames": ["c_elegans"]
+}
+```
+
+### Example BigMafAdapter config
+
+```json
+{
+  "type": "MafTrack",
+  "trackId": "bigMaf",
+  "name": "bigMaf (chr22_KI270731v1_random)",
+  "adapter": {
+    "type": "BigMafAdapter",
+    "samples": [
+      "hg38",
+      "panTro4",
+      "rheMac3",
+      "mm10",
+      "rn5",
+      "canFam3",
+      "monDom5"
+    ],
+    "bigBedLocation": {
+      "uri": "bigMaf.bb"
+    }
+  },
+  "assemblyNames": ["hg38"]
+}
+```
+
+### Example with customized sample names and colors
+
+```json
+{
+  "trackId": "MAF",
+  "name": "example",
+  "type": "MafTrack",
+  "assemblyNames": ["hg38"],
+  "adapter": {
+    "type": "MafTabixAdapter",
+    "bedGzLocation": {
+      "uri": "data.txt.gz"
+    },
+    "index": {
+      "location": {
+        "uri": "data.txt.gz.tbi"
+      }
+    },
+    "samples": [
+      {
+        "id": "hg38",
+        "label": "Human",
+        "color": "rgba(255,255,255,0.7)"
+      },
+      {
+        "id": "panTro4",
+        "label": "Chimp",
+        "color": "rgba(255,0,0,0.7)"
+      },
+      {
+        "id": "gorGor3",
+        "label": "Gorilla",
+        "color": "rgba(0,0,255,0.7)"
+      },
+      {
+        "id": "ponAbe2",
+        "label": "Orangutan",
+        "color": "rgba(255,255,255,0.7)"
+      }
+    ]
+  }
+}
+```
+
+The samples array is either `string[]|{id:string,label:string,color?:string}[]`
+
+## Prepare data
+
+This is the same as the jbrowse 1 mafviewer plugin (currently the similar to
+the). This plugin supports two formats
+
+1. BigMaf format, which can be created following UCSC guidelines
+
+2. MAF tabix based format, based on a custom BED created via conversion tools in
+   this repo.
+
+The choice between the two is your convenience. BigMaf is a "standard" UCSC
+format, basically just a specialized BigBed, so it requires JBrowse 1.14.0 or
+newer for it's BigBed support. The custom BED format only requires JBrowse
+1.12.3 or newer, so therefore some slightly older JBrowse versions can support
+it.
+
+_Note: Both formats start with a MAF as input, and note that your MAF file
+should contain the species name and chromosome name e.g. hg38.chr1 in the
+sequence identifiers._
+
+### Preparing BigMaf
+
+Follow instructions from https://genome.ucsc.edu/FAQ/FAQformat.html#format9.3
+and set the storeType of your track as MAFViewer/Store/SeqFeature/BigMaf
+
+### Preparing the tabix BED format
+
+Start by converting the MAF into a pseudo-BED format using the maf2bed tool
+
+```bash
+# from https://github.com/cmdcolin/maf2bed
+cargo install maf2bed
+cat file.maf | maf2bed hg38 | bgzip > out.bed
+tabix -p bed out.bed.gz
+```
+
+The second argument to maf2bed is the genome version e.g. hg38 used for the main
+species in the MAF (if your MAF comes from a pipeline like Ensembl or UCSC, the
+identifiers in the MAF file will say something like hg38.chr1, therefore, the
+argument to maf2bed should just be hg38 to remove hg38 part of the identifier.
+if your MAF file does not include the species name as part of the identifier,
+you should add the species into them the those scaffold/chromosome e.g. create
+hg38.chr1 if it was just chr1 before)
+
+If all is well, your BED file should have 6 columns, with
+`chr, start, end, id, score, alignment_data`, where `alignment_data` is
+separated between each species by `;` and each field in the alignment is
+separated by `:`.
+
+### Footnote
+
+If you can't use the `cargo install maf2bed` binary, there is a `bin/maf2bed.pl`
+perl version of it in this repo

package/dist/jbrowse-plugin-mafviewer.umd.development.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBrowsePluginMafViewer = {}, global.JBrowseExports["@jbrowse/core/Plugin"], global.JBrowseExports["@jbrowse/core/pluggableElementTypes"], global.JBrowseExports["@jbrowse/core/configuration"], global.JBrowseExports["@jbrowse/core/data_adapters/BaseAdapter"], global.JBrowseExports["mobx-state-tree"], global.JBrowseExports["@jbrowse/core/util"], global.JBrowseExports["@jbrowse/core/util/rxjs"], global.JBrowseExports.react, global.JBrowseExports["mobx-react"], global.JBrowseExports["@mui/material"], global.JBrowseExports["@jbrowse/core/ui"], global.JBrowseExports["tss-react/mui"]));
 })(this, (function (exports, Plugin, pluggableElementTypes, configuration, BaseAdapter, mobxStateTree, util, rxjs, React, mobxReact, material, ui, mui) { 'use strict';
 
-  var version = "1.0.3";
+  var version = "1.0.4";
 
   const configSchema$2 = configuration.ConfigurationSchema('BigMafAdapter', {
       /**
@@ -649,28 +649,19 @@
                   const alignments = {};
                   const blocks2 = [];
                   for (const block of blocks) {
-                      if (block[0] === 's') {
-                          if (!aln) {
-                              aln = block.split(/ +/)[6];
-                              alns.push(aln);
+                      if (block.startsWith('s')) {
+                          if (aln) {
+                              alns.push(block.split(/ +/)[6]);
                               blocks2.push(block);
                           }
                           else {
-                              alns.push(block.split(/ +/)[6]);
+                              aln = block.split(/ +/)[6];
+                              alns.push(aln);
                               blocks2.push(block);
                           }
                       }
                   }
-                  const alns2 = alns.map(() => '');
-                  if (aln) {
-                      for (let i = 0; i < aln?.length; i++) {
-                          if (aln[i] !== '-') {
-                              for (let j = 0; j < alns.length; j++) {
-                                  alns2[j] += alns[j][i];
-                              }
-                          }
-                      }
-                  }
+                  // eslint-disable-next-line unicorn/no-for-loop
                   for (let i = 0; i < blocks2.length; i++) {
                       const elt = blocks2[i];
                       const ad = elt.split(/ +/);
@@ -683,7 +674,7 @@
                           srcSize: +ad[2],
                           strand: ad[3] === '+' ? 1 : -1,
                           unknown: +ad[4],
-                          data: alns2[i],
+                          data: alns[i],
                       };
                   }
                   observer.next(new util.SimpleFeature({
@@ -692,7 +683,7 @@
                           start: feature.get('start'),
                           end: feature.get('end'),
                           refName: feature.get('refName'),
-                          seq: alns2[0],
+                          seq: alns[0],
                           alignments: alignments,
                       },
                   }));
@@ -802,6 +793,10 @@
            * #property
            */
           rowProportion: 0.8,
+          /**
+           * #property
+           */
+          showAllLetters: false,
       }))
           .volatile(() => ({
           prefersOffset: true,
@@ -819,6 +814,12 @@
           setRowProportion(n) {
               self.rowProportion = n;
           },
+          /**
+           * #action
+           */
+          setShowAllLetters(f) {
+              self.showAllLetters = f;
+          },
       }))
           .views(self => ({
           /**
@@ -826,12 +827,9 @@
            */
           get samples() {
               const r = self.adapterConfig.samples;
-              if (isStrs(r)) {
-                  return r.map(elt => ({ id: elt, label: elt, color: undefined }));
-              }
-              else {
-                  return r;
-              }
+              return isStrs(r)
+                  ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+                  : r;
           },
           /**
            * #getter
@@ -858,12 +856,14 @@
                * #method
                */
               renderProps() {
+                  const { showAllLetters, rendererConfig, samples, rowHeight, rowProportion, } = self;
                   return {
                       ...superRenderProps(),
-                      config: self.rendererConfig,
-                      samples: self.samples,
-                      rowHeight: self.rowHeight,
-                      rowProportion: self.rowProportion,
+                      config: rendererConfig,
+                      samples,
+                      rowHeight,
+                      rowProportion,
+                      showAllLetters,
                   };
               },
               /**
@@ -881,11 +881,20 @@
                               ]);
                           },
                       },
+                      {
+                          label: 'Show all letters',
+                          type: 'checkbox',
+                          checked: self.showAllLetters,
+                          onClick: () => {
+                              self.setShowAllLetters(!self.showAllLetters);
+                          },
+                      },
                   ];
               },
           };
       })
           .actions(self => {
+          // eslint-disable-next-line @typescript-eslint/unbound-method
           const { renderSvg: superRenderSvg } = self;
           return {
               /**
@@ -904,15 +913,14 @@
       return React.createElement("rect", { ...props, fill: color });
   };
 
-  const ColorLegend = mobxReact.observer(function ({ model, labelWidth, }) {
+  const ColorLegend = mobxReact.observer(function ({ model, labelWidth, svgFontSize, }) {
       const { samples, rowHeight } = model;
-      const svgFontSize = Math.min(rowHeight, 10);
       const canDisplayLabel = rowHeight >= 10;
       const boxHeight = Math.min(20, rowHeight);
       return samples ? (React.createElement(React.Fragment, null,
-          samples.map((sample, idx) => (React.createElement(RectBg, { key: `${sample.id}-${idx}`, y: idx * rowHeight + 1, x: 0, width: labelWidth + 5, height: boxHeight, color: sample.color }))),
+          samples.map((sample, idx) => (React.createElement(RectBg, { key: `${sample.id}-${idx}`, y: idx * rowHeight, x: 0, width: labelWidth + 5, height: boxHeight, color: sample.color }))),
           canDisplayLabel
-              ? samples.map((sample, idx) => (React.createElement("text", { key: `${sample.id}-${idx}`, y: idx * rowHeight + 14, x: 2, fontSize: svgFontSize }, sample.label)))
+              ? samples.map((sample, idx) => (React.createElement("text", { key: `${sample.id}-${idx}`, y: idx * rowHeight + rowHeight / 2, dominantBaseline: "middle", x: 2, fontSize: svgFontSize }, sample.label)))
               : null)) : null;
   });
 
@@ -935,14 +943,14 @@
   const YScaleBars = mobxReact.observer(function (props) {
       const { model } = props;
       const { rowHeight, samples } = model;
-      const svgFontSize = Math.min(rowHeight, 12);
+      const svgFontSize = Math.min(Math.max(rowHeight, 10), 14);
       const canDisplayLabel = rowHeight >= 10;
       const minWidth = 20;
       const labelWidth = Math.max(...(samples
           .map(s => util.measureText(s.label, svgFontSize))
           .map(width => (canDisplayLabel ? width : minWidth)) || [0]));
       return (React.createElement(Wrapper, { ...props },
-          React.createElement(ColorLegend, { model: model, labelWidth: labelWidth })));
+          React.createElement(ColorLegend, { model: model, labelWidth: labelWidth, svgFontSize: svgFontSize })));
   });
 
   const LinearMafDisplay = mobxReact.observer(function (props) {
@@ -994,18 +1002,19 @@
       };
   }
   function makeImageData({ ctx, renderArgs, }) {
-      const { regions, bpPerPx, rowHeight, theme: configTheme, samples, rowProportion, } = renderArgs;
+      const { regions, bpPerPx, rowHeight, showAllLetters, theme: configTheme, samples, rowProportion, } = renderArgs;
       const [region] = regions;
       const features = renderArgs.features;
-      const h = rowHeight;
+      const h = rowHeight * rowProportion;
       const theme = ui.createJBrowseTheme(configTheme);
       const colorForBase = getColorBaseMap(theme);
       const contrastForBase = getContrastBaseMap(theme);
       const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]));
       const scale = 1 / bpPerPx;
       const f = 0.4;
-      const h2 = h * rowProportion;
-      const offset = h2 / 2;
+      const h2 = rowHeight / 2;
+      const hp2 = h / 2;
+      const offset = (rowHeight - h) / 2;
       // sample as alignments
       ctx.font = 'bold 10px Courier New,monospace';
       for (const feature of features.values()) {
@@ -1019,7 +1028,7 @@
               if (row === undefined) {
                   throw new Error(`unknown sample encountered: ${sample}`);
               }
-              const t = h * row;
+              const t = rowHeight * row;
               // gaps
               ctx.beginPath();
               ctx.fillStyle = 'black';
@@ -1034,29 +1043,31 @@
                   }
               }
               ctx.stroke();
-              // matches
-              ctx.beginPath();
-              ctx.fillStyle = 'lightgrey';
-              for (let i = 0, o = 0; i < alignment.length; i++) {
-                  if (seq[i] !== '-') {
-                      const c = alignment[i];
-                      const l = leftPx + scale * o;
-                      if (seq[i] === c && c !== '-') {
-                          ctx.rect(l, offset + t, scale + f, h2);
+              if (!showAllLetters) {
+                  // matches
+                  ctx.beginPath();
+                  ctx.fillStyle = 'lightgrey';
+                  for (let i = 0, o = 0; i < alignment.length; i++) {
+                      if (seq[i] !== '-') {
+                          const c = alignment[i];
+                          const l = leftPx + scale * o;
+                          if (seq[i] === c && c !== '-') {
+                              ctx.rect(l, offset + t, scale + f, h);
+                          }
+                          o++;
                       }
-                      o++;
                   }
+                  ctx.fill();
               }
-              ctx.fill();
               // mismatches
               for (let i = 0, o = 0; i < alignment.length; i++) {
                   const c = alignment[i];
                   if (seq[i] !== '-') {
-                      if (seq[i] !== c && c !== '-') {
+                      if ((showAllLetters || seq[i] !== c) && c !== '-') {
                           const l = leftPx + scale * o;
                           ctx.fillStyle =
-                              colorForBase[c] ?? 'purple';
-                          ctx.fillRect(l, offset + t, scale + f, h2);
+                              colorForBase[c] ?? 'black';
+                          ctx.fillRect(l, offset + t, scale + f, h);
                       }
                       o++;
                   }
@@ -1069,9 +1080,9 @@
                           const l = leftPx + scale * o;
                           const offset = (scale - charSize.w) / 2 + 1;
                           const c = alignment[i];
-                          if (seq[i] !== c && c !== '-') {
-                              ctx.fillStyle = contrastForBase[c] ?? 'black';
-                              ctx.fillText(origAlignment[i], l + offset, h2 + t + 3);
+                          if ((showAllLetters || seq[i] !== c) && c !== '-') {
+                              ctx.fillStyle = contrastForBase[c] ?? 'white';
+                              ctx.fillText(origAlignment[i], l + offset, hp2 + t + 3);
                           }
                           o++;
                       }
@@ -1092,7 +1103,7 @@
               if (row === undefined) {
                   throw new Error(`unknown sample encountered: ${sample}`);
               }
-              const t = h * row;
+              const t = rowHeight * row;
               ctx.beginPath();
               ctx.fillStyle = 'purple';
               for (let i = 0, o = 0; i < alignment.length; i++) {
@@ -1103,11 +1114,11 @@
                       }
                       i++;
                   }
-                  if (ins.length) {
-                      const l = leftPx + scale * o - 2;
-                      ctx.rect(l, offset + t, 2, h2);
-                      ctx.rect(l - 2, offset + t, 6, 1);
-                      ctx.rect(l - 2, offset + t + h2, 6, 1);
+                  if (ins.length > 0) {
+                      const l = leftPx + scale * o - 1;
+                      ctx.rect(l, offset + t + 1, 1, h - 1);
+                      ctx.rect(l - 2, offset + t, 5, 1);
+                      ctx.rect(l - 2, offset + t + h - 1, 5, 1);
                   }
                   o++;
               }
@@ -1129,7 +1140,7 @@
       async render(renderProps) {
           const { regions, bpPerPx, samples, rowHeight } = renderProps;
           const [region] = regions;
-          const height = samples.length * rowHeight;
+          const height = samples.length * rowHeight + 100;
           const width = (region.end - region.start) / bpPerPx;
           const features = await this.getFeatures(renderProps);
           const res = await util.renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
@@ -1240,19 +1251,7 @@
                   const data = feature.get('field5').split(',');
                   const alignments = {};
                   const alns = data.map(elt => elt.split(':')[5]);
-                  // const aln = alns[0]
-                  // const alns2 = data.map(() => '')
-                  // remove extraneous data in other alignments
-                  // reason being: cannot represent missing data in main species that are in others)
-                  // for (let i = 0; i < aln.length; i++) {
-                  //   if (aln[i] !== '-') {
-                  //     for (let j = 0; j < data.length; j++) {
-                  //       alns2[j] += alns[j][i]
-                  //     }
-                  //   }
-                  // }
-                  for (let j = 0; j < data.length; j++) {
-                      const elt = data[j];
+                  for (const [j, elt] of data.entries()) {
                       const ad = elt.split(':');
                       const [org, chr] = ad[0].split('.');
                       alignments[org] = {
@@ -1313,6 +1312,7 @@
       const [error, setError] = React.useState();
       const [trackName, setTrackName] = React.useState('MAF track');
       const [choice, setChoice] = React.useState('BigMafAdapter');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const rootModel = mobxStateTree.getRoot(model);
       return (React.createElement(material.Paper, { className: classes.paper },
           React.createElement(material.Paper, null,
@@ -1396,9 +1396,9 @@
   }
 
   async function renderSvg(self, opts, superRenderSvg) {
-      const { height } = self;
+      const { height, id } = self;
       const { offsetPx, width } = util.getContainingView(self);
-      const clipid = `mafclip-${self.id}`;
+      const clipid = `mafclip-${id}`;
       return (React.createElement(React.Fragment, null,
           React.createElement("defs", null,
               React.createElement("clipPath", { id: clipid },