jbrowse-plugin-mafviewer 1.0.1 → 1.0.3

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

@@ -1,17 +1,18 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@jbrowse/core/Plugin'), require('@jbrowse/core/pluggableElementTypes'), require('@jbrowse/core/configuration'), require('@jbrowse/core/data_adapters/BaseAdapter'), require('mobx-state-tree'), require('@jbrowse/core/util'), require('@jbrowse/core/util/rxjs'), require('react'), require('mobx-react'), require('@jbrowse/core/ui'), require('@mui/material'), require('tss-react/mui')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@jbrowse/core/Plugin', '@jbrowse/core/pluggableElementTypes', '@jbrowse/core/configuration', '@jbrowse/core/data_adapters/BaseAdapter', 'mobx-state-tree', '@jbrowse/core/util', '@jbrowse/core/util/rxjs', 'react', 'mobx-react', '@jbrowse/core/ui', '@mui/material', 'tss-react/mui'], factory) :
-  (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["@jbrowse/core/ui"], global.JBrowseExports["@mui/material"], global.JBrowseExports["tss-react/mui"]));
-})(this, (function (exports, Plugin, pluggableElementTypes, configuration, BaseAdapter, mobxStateTree, util, rxjs, React, mobxReact, ui, material, mui) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@jbrowse/core/Plugin'), require('@jbrowse/core/pluggableElementTypes'), require('@jbrowse/core/configuration'), require('@jbrowse/core/data_adapters/BaseAdapter'), require('mobx-state-tree'), require('@jbrowse/core/util'), require('@jbrowse/core/util/rxjs'), require('react'), require('mobx-react'), require('@mui/material'), require('@jbrowse/core/ui'), require('tss-react/mui')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@jbrowse/core/Plugin', '@jbrowse/core/pluggableElementTypes', '@jbrowse/core/configuration', '@jbrowse/core/data_adapters/BaseAdapter', 'mobx-state-tree', '@jbrowse/core/util', '@jbrowse/core/util/rxjs', 'react', 'mobx-react', '@mui/material', '@jbrowse/core/ui', 'tss-react/mui'], factory) :
+  (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.1";
+  var version = "1.0.3";
 
   const configSchema$2 = configuration.ConfigurationSchema('BigMafAdapter', {
       /**
        * #slot
        */
       samples: {
-          type: 'stringArray',
+          type: 'frozen',
+          description: 'string[] or {id:string,label:string,color?:string}[]',
           defaultValue: [],
       },
       /**
@@ -737,29 +738,54 @@
 
   function configSchemaF(pluginManager) {
       const LinearGenomePlugin = pluginManager.getPlugin('LinearGenomeViewPlugin');
-      // @ts-expect-error
-      const { linearBasicDisplayConfigSchemaFactory } = LinearGenomePlugin.exports;
+      const { baseLinearDisplayConfigSchema } = LinearGenomePlugin.exports;
       return configuration.ConfigurationSchema('LinearMafDisplay', {
           /**
            * #slot
            */
           renderer: pluginManager.pluggableConfigSchemaType('renderer'),
       }, {
-          baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+          baseConfiguration: baseLinearDisplayConfigSchema,
           explicitlyTyped: true,
       });
   }
 
+  const useStyles$1 = mui.makeStyles()({
+      root: {
+          width: 500,
+      },
+  });
+  const SetRowHeightDialog = mobxReact.observer(function (props) {
+      const { model, handleClose } = props;
+      const { classes } = useStyles$1();
+      const [rowHeight, setRowHeight] = React.useState(`${model.rowHeight}`);
+      const [rowProportion, setRowProportion] = React.useState(`${model.rowProportion}`);
+      return (React.createElement(ui.Dialog, { open: true, onClose: handleClose, title: "Filter options" },
+          React.createElement(material.DialogContent, { className: classes.root },
+              React.createElement(material.Typography, null, "Set row height and the proportion of the row height to use for drawing each row"),
+              React.createElement(material.TextField, { value: rowHeight, onChange: event => setRowHeight(event.target.value), placeholder: "Enter row height" }),
+              React.createElement(material.TextField, { value: rowProportion, onChange: event => setRowProportion(event.target.value), placeholder: "Enter row proportion" }),
+              React.createElement(material.DialogActions, null,
+                  React.createElement(material.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                          model.setRowProportion(+rowProportion);
+                          model.setRowHeight(+rowHeight);
+                          handleClose();
+                      } }, "Submit"),
+                  React.createElement(material.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+  });
+
+  function isStrs(array) {
+      return typeof array[0] === 'string';
+  }
   /**
    * #stateModel LinearMafDisplay
    * extends LinearBasicDisplay
    */
   function stateModelFactory(configSchema, pluginManager) {
       const LinearGenomePlugin = pluginManager.getPlugin('LinearGenomeViewPlugin');
-      // @ts-expect-error
-      const { linearBasicDisplayModelFactory } = LinearGenomePlugin.exports;
+      const { BaseLinearDisplay } = LinearGenomePlugin.exports;
       return mobxStateTree.types
-          .compose('LinearMafDisplay', linearBasicDisplayModelFactory(configSchema), mobxStateTree.types.model({
+          .compose('LinearMafDisplay', BaseLinearDisplay, mobxStateTree.types.model({
           /**
            * #property
            */
@@ -768,23 +794,44 @@
            * #property
            */
           configuration: configuration.ConfigurationReference(configSchema),
+          /**
+           * #property
+           */
+          rowHeight: 15,
+          /**
+           * #property
+           */
+          rowProportion: 0.8,
       }))
           .volatile(() => ({
           prefersOffset: true,
       }))
-          .views(self => ({
+          .actions(self => ({
           /**
-           * #getter
+           * #action
            */
-          get samples() {
-              const r = self.adapterConfig.samples;
-              return r.map(elt => ({ name: elt, color: undefined }));
+          setRowHeight(n) {
+              self.rowHeight = n;
           },
+          /**
+           * #action
+           */
+          setRowProportion(n) {
+              self.rowProportion = n;
+          },
+      }))
+          .views(self => ({
           /**
            * #getter
            */
-          get rowHeight() {
-              return 20;
+          get samples() {
+              const r = self.adapterConfig.samples;
+              if (isStrs(r)) {
+                  return r.map(elt => ({ id: elt, label: elt, color: undefined }));
+              }
+              else {
+                  return r;
+              }
           },
           /**
            * #getter
@@ -805,7 +852,7 @@
           },
       }))
           .views(self => {
-          const { renderProps: superRenderProps } = self;
+          const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
           return {
               /**
                * #method
@@ -813,10 +860,29 @@
               renderProps() {
                   return {
                       ...superRenderProps(),
+                      config: self.rendererConfig,
                       samples: self.samples,
                       rowHeight: self.rowHeight,
+                      rowProportion: self.rowProportion,
                   };
               },
+              /**
+               * #method
+               */
+              trackMenuItems() {
+                  return [
+                      ...superTrackMenuItems(),
+                      {
+                          label: 'Set row height',
+                          onClick: () => {
+                              util.getSession(self).queueDialog(handleClose => [
+                                  SetRowHeightDialog,
+                                  { model: self, handleClose },
+                              ]);
+                          },
+                      },
+                  ];
+              },
           };
       })
           .actions(self => {
@@ -827,7 +893,6 @@
                */
               async renderSvg(opts) {
                   const { renderSvg } = await Promise.resolve().then(function () { return renderSvg$1; });
-                  // @ts-expect-error
                   return renderSvg(self, opts, superRenderSvg);
               },
           };
@@ -841,18 +906,14 @@
 
   const ColorLegend = mobxReact.observer(function ({ model, labelWidth, }) {
       const { samples, rowHeight } = model;
-      const svgFontSize = Math.min(rowHeight, 12);
-      const canDisplayLabel = rowHeight > 11;
-      const colorBoxWidth = 15;
-      const legendWidth = labelWidth + colorBoxWidth + 5;
-      const extraOffset = 0;
-      return samples ? (React.createElement(React.Fragment, null, samples.map((source, idx) => {
-          const boxHeight = Math.min(20, rowHeight);
-          return (React.createElement(React.Fragment, { key: `${source.name}-${idx}` },
-              source.color ? (React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: boxHeight, color: source.color })) : null,
-              React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight }),
-              canDisplayLabel ? (React.createElement("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, source.name)) : null));
-      }))) : null;
+      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 }))),
+          canDisplayLabel
+              ? samples.map((sample, idx) => (React.createElement("text", { key: `${sample.id}-${idx}`, y: idx * rowHeight + 14, x: 2, fontSize: svgFontSize }, sample.label)))
+              : null)) : null;
   });
 
   const Wrapper = mobxReact.observer(function ({ children, model, exportSVG, }) {
@@ -875,10 +936,10 @@
       const { model } = props;
       const { rowHeight, samples } = model;
       const svgFontSize = Math.min(rowHeight, 12);
-      const canDisplayLabel = rowHeight > 11;
+      const canDisplayLabel = rowHeight >= 10;
       const minWidth = 20;
       const labelWidth = Math.max(...(samples
-          .map(s => util.measureText(s, svgFontSize))
+          .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 })));
@@ -917,20 +978,6 @@
       explicitlyTyped: true,
   });
 
-  function getCorrectionFactor(scale) {
-      if (scale >= 1) {
-          return 0.6;
-      }
-      else if (scale >= 0.2) {
-          return 0.05;
-      }
-      else if (scale >= 0.02) {
-          return 0.03;
-      }
-      else {
-          return 0.02;
-      }
-  }
   function getContrastBaseMap(theme) {
       return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
           key,
@@ -947,16 +994,18 @@
       };
   }
   function makeImageData({ ctx, renderArgs, }) {
-      const { regions, bpPerPx, rowHeight, theme: configTheme, samples, } = renderArgs;
+      const { regions, bpPerPx, rowHeight, theme: configTheme, samples, rowProportion, } = renderArgs;
       const [region] = regions;
       const features = renderArgs.features;
       const h = rowHeight;
       const theme = ui.createJBrowseTheme(configTheme);
       const colorForBase = getColorBaseMap(theme);
       const contrastForBase = getContrastBaseMap(theme);
-      const sampleToRowMap = new Map(samples.map((s, i) => [s.name, i]));
+      const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]));
       const scale = 1 / bpPerPx;
-      const correctionFactor = getCorrectionFactor(bpPerPx);
+      const f = 0.4;
+      const h2 = h * rowProportion;
+      const offset = h2 / 2;
       // sample as alignments
       ctx.font = 'bold 10px Courier New,monospace';
       for (const feature of features.values()) {
@@ -966,63 +1015,117 @@
           for (const [sample, val] of Object.entries(vals)) {
               const origAlignment = val.data;
               const alignment = origAlignment.toLowerCase();
-              // gaps
-              ctx.beginPath();
-              ctx.fillStyle = 'black';
-              const offset0 = (5 / 12) * h;
-              const h6 = h / 6;
               const row = sampleToRowMap.get(sample);
               if (row === undefined) {
                   throw new Error(`unknown sample encountered: ${sample}`);
               }
               const t = h * row;
-              for (let i = 0; i < alignment.length; i++) {
-                  const l = leftPx + scale * i;
-                  if (alignment[i] === '-') {
-                      ctx.rect(l, offset0 + t, scale + correctionFactor, h6);
+              // gaps
+              ctx.beginPath();
+              ctx.fillStyle = 'black';
+              for (let i = 0, o = 0; i < alignment.length; i++) {
+                  if (seq[i] !== '-') {
+                      if (alignment[i] === '-') {
+                          const l = leftPx + scale * o;
+                          ctx.moveTo(l, t + h2);
+                          ctx.lineTo(l + scale + f, t + h2);
+                      }
+                      o++;
                   }
               }
-              ctx.fill();
-              const offset = (1 / 4) * h;
-              const h2 = h / 2;
+              ctx.stroke();
               // matches
               ctx.beginPath();
               ctx.fillStyle = 'lightgrey';
-              for (let i = 0; i < alignment.length; i++) {
-                  const c = alignment[i];
-                  const l = leftPx + scale * i;
-                  if (seq[i] === c && c !== '-') {
-                      ctx.rect(l, offset + t, scale + correctionFactor, h2);
+              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);
+                      }
+                      o++;
                   }
               }
               ctx.fill();
               // mismatches
-              for (let i = 0; i < alignment.length; i++) {
+              for (let i = 0, o = 0; i < alignment.length; i++) {
                   const c = alignment[i];
-                  if (seq[i] !== c && c !== '-') {
-                      const l = leftPx + scale * i;
-                      ctx.fillStyle =
-                          colorForBase[c] ?? 'purple';
-                      ctx.fillRect(l, offset + t, scale + correctionFactor, h2);
+                  if (seq[i] !== '-') {
+                      if (seq[i] !== c && c !== '-') {
+                          const l = leftPx + scale * o;
+                          ctx.fillStyle =
+                              colorForBase[c] ?? 'purple';
+                          ctx.fillRect(l, offset + t, scale + f, h2);
+                      }
+                      o++;
                   }
               }
               // font
               const charSize = { w: 10 };
               if (scale >= charSize.w) {
-                  for (let i = 0; i < alignment.length; i++) {
-                      const l = leftPx + scale * i;
-                      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);
+                  for (let i = 0, o = 0; i < alignment.length; i++) {
+                      if (seq[i] !== '-') {
+                          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);
+                          }
+                          o++;
                       }
                   }
               }
           }
       }
+      // second pass for insertions, has slightly improved look since the
+      // insertions are always 'on top' of the other features
+      for (const feature of features.values()) {
+          const [leftPx] = util.featureSpanPx(feature, region, bpPerPx);
+          const vals = feature.get('alignments');
+          const seq = feature.get('seq').toLowerCase();
+          for (const [sample, val] of Object.entries(vals)) {
+              const origAlignment = val.data;
+              const alignment = origAlignment.toLowerCase();
+              const row = sampleToRowMap.get(sample);
+              if (row === undefined) {
+                  throw new Error(`unknown sample encountered: ${sample}`);
+              }
+              const t = h * row;
+              ctx.beginPath();
+              ctx.fillStyle = 'purple';
+              for (let i = 0, o = 0; i < alignment.length; i++) {
+                  let ins = '';
+                  while (seq[i] === '-') {
+                      if (alignment[i] !== '-') {
+                          ins += alignment[i];
+                      }
+                      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);
+                  }
+                  o++;
+              }
+              ctx.fill();
+          }
+      }
   }
   class LinearMafRenderer extends pluggableElementTypes.FeatureRendererType {
+      getExpandedRegion(region) {
+          const { start, end } = region;
+          const bpExpansion = 1;
+          return {
+              // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+              ...region,
+              start: Math.floor(Math.max(start - bpExpansion, 0)),
+              end: Math.ceil(end + bpExpansion),
+          };
+      }
       async render(renderProps) {
           const { regions, bpPerPx, samples, rowHeight } = renderProps;
           const [region] = regions;
@@ -1069,7 +1172,8 @@
        * #slot
        */
       samples: {
-          type: 'stringArray',
+          type: 'frozen',
+          description: 'string[] or {id:string,label:string,color?:string}[]',
           defaultValue: [],
       },
       /**
@@ -1124,6 +1228,10 @@
           const { adapter } = await this.setup();
           return adapter.getRefNames();
       }
+      async getHeader() {
+          const { adapter } = await this.setup();
+          return adapter.getHeader();
+      }
       getFeatures(query) {
           return rxjs.ObservableCreate(async (observer) => {
               const { adapter } = await this.setup();
@@ -1131,31 +1239,29 @@
               for (const feature of features) {
                   const data = feature.get('field5').split(',');
                   const alignments = {};
-                  const main = data[0];
-                  const aln = main.split(':')[5];
                   const alns = data.map(elt => elt.split(':')[5]);
-                  const alns2 = data.map(() => '');
+                  // 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, o = 0; i < aln.length; i++, o++) {
-                      if (aln[i] !== '-') {
-                          for (let j = 0; j < data.length; j++) {
-                              alns2[j] += alns[j][i];
-                          }
-                      }
-                  }
+                  // 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];
                       const ad = elt.split(':');
-                      const org = ad[0].split('.')[0];
-                      const chr = ad[0].split('.')[1];
+                      const [org, chr] = ad[0].split('.');
                       alignments[org] = {
-                          chr: chr,
+                          chr,
                           start: +ad[1],
                           srcSize: +ad[2],
                           strand: ad[3] === '-' ? -1 : 1,
                           unknown: +ad[4],
-                          data: alns2[j],
+                          data: alns[j],
                       };
                   }
                   observer.next(new util.SimpleFeature({
@@ -1166,8 +1272,8 @@
                           refName: feature.get('refName'),
                           name: feature.get('name'),
                           score: feature.get('score'),
-                          alignments: alignments,
-                          seq: alns2[0],
+                          alignments,
+                          seq: alns[0],
                       },
                   }));
               }
@@ -1286,15 +1392,21 @@
           MafTabixAdapterF(pluginManager);
           MafAddTrackWorkflowF(pluginManager);
       }
-      configure(pluginManager) { }
+      configure(_pluginManager) { }
   }
 
   async function renderSvg(self, opts, superRenderSvg) {
-      const { offsetPx } = util.getContainingView(self);
+      const { height } = self;
+      const { offsetPx, width } = util.getContainingView(self);
+      const clipid = `mafclip-${self.id}`;
       return (React.createElement(React.Fragment, null,
-          React.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
-          React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-              React.createElement(YScaleBars, { model: self, orientation: "left", exportSVG: true }))));
+          React.createElement("defs", null,
+              React.createElement("clipPath", { id: clipid },
+                  React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
+          React.createElement("g", { clipPath: `url(#${clipid})` },
+              React.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
+              React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
+                  React.createElement(YScaleBars, { model: self, orientation: "left", exportSVG: true })))));
   }
 
   var renderSvg$1 = {