jbrowse-plugin-mafviewer 1.0.2 → 1.0.4

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

@@ -1,10 +1,10 @@
 (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.2";
+  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,
                       },
                   }));
@@ -738,19 +729,42 @@
 
   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';
   }
@@ -760,10 +774,9 @@
    */
   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
            */
@@ -772,28 +785,51 @@
            * #property
            */
           configuration: configuration.ConfigurationReference(configSchema),
+          /**
+           * #property
+           */
+          rowHeight: 15,
+          /**
+           * #property
+           */
+          rowProportion: 0.8,
+          /**
+           * #property
+           */
+          showAllLetters: false,
       }))
           .volatile(() => ({
           prefersOffset: true,
       }))
-          .views(self => ({
+          .actions(self => ({
           /**
-           * #getter
+           * #action
            */
-          get samples() {
-              const r = self.adapterConfig.samples;
-              if (isStrs(r)) {
-                  return r.map(elt => ({ id: elt, label: elt, color: undefined }));
-              }
-              else {
-                  return r;
-              }
+          setRowHeight(n) {
+              self.rowHeight = n;
+          },
+          /**
+           * #action
+           */
+          setRowProportion(n) {
+              self.rowProportion = n;
+          },
+          /**
+           * #action
+           */
+          setShowAllLetters(f) {
+              self.showAllLetters = f;
           },
+      }))
+          .views(self => ({
           /**
            * #getter
            */
-          get rowHeight() {
-              return 20;
+          get samples() {
+              const r = self.adapterConfig.samples;
+              return isStrs(r)
+                  ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+                  : r;
           },
           /**
            * #getter
@@ -814,21 +850,51 @@
           },
       }))
           .views(self => {
-          const { renderProps: superRenderProps } = self;
+          const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
           return {
               /**
                * #method
                */
               renderProps() {
+                  const { showAllLetters, rendererConfig, samples, rowHeight, rowProportion, } = self;
                   return {
                       ...superRenderProps(),
-                      samples: self.samples,
-                      rowHeight: self.rowHeight,
+                      config: rendererConfig,
+                      samples,
+                      rowHeight,
+                      rowProportion,
+                      showAllLetters,
                   };
               },
+              /**
+               * #method
+               */
+              trackMenuItems() {
+                  return [
+                      ...superTrackMenuItems(),
+                      {
+                          label: 'Set row height',
+                          onClick: () => {
+                              util.getSession(self).queueDialog(handleClose => [
+                                  SetRowHeightDialog,
+                                  { model: self, handleClose },
+                              ]);
+                          },
+                      },
+                      {
+                          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 {
               /**
@@ -836,7 +902,6 @@
                */
               async renderSvg(opts) {
                   const { renderSvg } = await Promise.resolve().then(function () { return renderSvg$1; });
-                  // @ts-expect-error
                   return renderSvg(self, opts, superRenderSvg);
               },
           };
@@ -848,19 +913,15 @@
       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, 12);
-      const canDisplayLabel = rowHeight > 11;
-      const colorBoxWidth = 0;
-      const legendWidth = labelWidth + colorBoxWidth + 5;
-      const extraOffset = 0;
-      return samples ? (React.createElement(React.Fragment, null, samples.map((sample, idx) => {
-          const boxHeight = Math.min(20, rowHeight);
-          return (React.createElement(React.Fragment, { key: `${sample.id}-${idx}` },
-              React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight, color: sample.color }),
-              canDisplayLabel ? (React.createElement("text", { y: idx * rowHeight + 14, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, sample.label)) : null));
-      }))) : null;
+      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, 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 + rowHeight / 2, dominantBaseline: "middle", x: 2, fontSize: svgFontSize }, sample.label)))
+              : null)) : null;
   });
 
   const Wrapper = mobxReact.observer(function ({ children, model, exportSVG, }) {
@@ -882,14 +943,14 @@
   const YScaleBars = mobxReact.observer(function (props) {
       const { model } = props;
       const { rowHeight, samples } = model;
-      const svgFontSize = Math.min(rowHeight, 12);
-      const canDisplayLabel = rowHeight > 11;
+      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) {
@@ -925,20 +986,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,
@@ -955,16 +1002,19 @@
       };
   }
   function makeImageData({ ctx, renderArgs, }) {
-      const { regions, bpPerPx, rowHeight, theme: configTheme, samples, } = 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 correctionFactor = getCorrectionFactor(bpPerPx);
+      const f = 0.4;
+      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()) {
@@ -974,67 +1024,123 @@
           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);
+              const t = rowHeight * row;
+              // 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;
-              // 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);
+              ctx.stroke();
+              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++;
+                      }
                   }
+                  ctx.fill();
               }
-              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 ((showAllLetters || seq[i] !== c) && c !== '-') {
+                          const l = leftPx + scale * o;
+                          ctx.fillStyle =
+                              colorForBase[c] ?? 'black';
+                          ctx.fillRect(l, offset + t, scale + f, h);
+                      }
+                      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 ((showAllLetters || seq[i] !== c) && c !== '-') {
+                              ctx.fillStyle = contrastForBase[c] ?? 'white';
+                              ctx.fillText(origAlignment[i], l + offset, hp2 + 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 = rowHeight * 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 > 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++;
+              }
+              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;
-          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({
@@ -1133,6 +1239,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();
@@ -1140,31 +1250,17 @@
               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(() => '');
-                  // 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 j = 0; j < data.length; j++) {
-                      const elt = data[j];
+                  for (const [j, elt] of data.entries()) {
                       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({
@@ -1175,8 +1271,8 @@
                           refName: feature.get('refName'),
                           name: feature.get('name'),
                           score: feature.get('score'),
-                          alignments: alignments,
-                          seq: alns2[0],
+                          alignments,
+                          seq: alns[0],
                       },
                   }));
               }
@@ -1216,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,
@@ -1299,11 +1396,17 @@
   }
 
   async function renderSvg(self, opts, superRenderSvg) {
-      const { offsetPx } = util.getContainingView(self);
+      const { height, id } = self;
+      const { offsetPx, width } = util.getContainingView(self);
+      const clipid = `mafclip-${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 = {