@jbrowse/plugin-alignments 2.3.4 → 2.4.0

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -111,7 +111,7 @@ function AlignmentsModel(
     /**
      * #property
      */
-    height: 250,
+    heightPreConfig: types.maybe(types.number),
     /**
      * #property
      */
@@ -155,6 +155,14 @@ function stateModelFactory(
         self.snpCovHeight = n
       },
     }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get height() {
+        return self.heightPreConfig ?? getConf(self, 'height')
+      },
+    }))
     .views(self => ({
       /**
        * #getter
@@ -245,8 +253,8 @@ function stateModelFactory(
        * #action
        */
       setHeight(n: number) {
-        self.height = Math.max(n, minDisplayHeight)
-        return self.height
+        self.heightPreConfig = Math.max(n, minDisplayHeight)
+        return self.heightPreConfig
       },
       /**
        * #action
@@ -369,6 +377,14 @@ function stateModelFactory(
         },
       }
     })
+    .preProcessSnapshot(snap => {
+      if (!snap) {
+        return snap
+      }
+      // @ts-ignore
+      const { height, ...rest } = snap
+      return { heightPreConfig: height, ...rest }
+    })
 }
 
 export default stateModelFactory

package/src/LinearReadArcsDisplay/components/ReactComponent.tsx

@@ -14,18 +14,20 @@ import { LinearReadArcsDisplayModel } from '../model'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => ({
-  loading: {
-    paddingLeft: '0.6em',
-    backgroundColor: theme.palette.action.disabledBackground,
-    backgroundImage:
-      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-}))
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      height: '100%',
+      width: '100%',
+      pointerEvents: 'none',
+      textAlign: 'center',
+    },
+  }
+})
 
 const Arcs = observer(function ({
   model,

package/src/LinearReadArcsDisplay/model.tsx

@@ -22,11 +22,16 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 import { FilterModel } from '../shared'
 import drawFeats from './drawFeats'
 import { fetchChains, ChainData } from '../shared/fetchChains'
-import { ExportSvgOptions } from '@jbrowse/plugin-linear-genome-view/src/LinearGenomeView'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
 
+// stabilize clipid under test for snapshot
+function getId(id: string) {
+  const isJest = typeof jest === 'undefined'
+  return `arc-clip-${isJest ? id : 'jest'}`
+}
+
 interface Filter {
   flagInclude: number
   flagExclude: number
@@ -333,7 +338,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #method
        */
-      async renderSvg(opts: ExportSvgOptions) {
+      async renderSvg(opts: { rasterizeLayers?: boolean }) {
         const view = getContainingView(self) as LGV
         const width = view.dynamicBlocks.totalWidthPx
         const height = self.height
@@ -360,13 +365,26 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           const C2S = await import('canvas2svg')
           const ctx = new C2S.default(width, height)
           await drawFeats(self, ctx)
+          const clipid = getId(self.id)
           str = (
-            // eslint-disable-next-line react/no-danger
-            <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+            <>
+              <defs>
+                <clipPath id={clipid}>
+                  <rect x={0} y={0} width={width} height={height} />
+                </clipPath>
+              </defs>
+              <g
+                /* eslint-disable-next-line react/no-danger */
+                dangerouslySetInnerHTML={{
+                  __html: ctx.getSvg().innerHTML,
+                }}
+                clipPath={`url(#${clipid})`}
+              />
+            </>
           )
         }
 
-        return <g>{str}</g>
+        return <>{str}</>
       },
     }))
     .actions(self => ({

package/src/LinearReadCloudDisplay/model.tsx

@@ -17,10 +17,7 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 import { FilterModel } from '../shared'
 import { fetchChains, ChainData } from '../shared/fetchChains'
 import drawFeats from './drawFeats'
-import {
-  ExportSvgOptions,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view/src/LinearGenomeView'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
@@ -32,6 +29,12 @@ interface Filter {
   tagFilter?: { tag: string; value: string }
 }
 
+// stabilize clipid under test for snapshot
+function getId(id: string) {
+  const isJest = typeof jest === 'undefined'
+  return `cloud-clip-${isJest ? id : 'jest'}`
+}
+
 /**
  * #stateModel LinearReadCloudDisplay
  * extends `BaseLinearDisplay`
@@ -205,7 +208,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        async renderSvg(opts: ExportSvgOptions) {
+        async renderSvg(opts: { rasterizeLayers?: boolean }) {
           const view = getContainingView(self) as LinearGenomeViewModel
           const width = view.dynamicBlocks.totalWidthPx
           const height = self.height
@@ -232,9 +235,22 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
             const C2S = await import('canvas2svg')
             const ctx = new C2S.default(width, height)
             await drawFeats(self, ctx)
+            const clipid = getId(self.id)
             str = (
-              // eslint-disable-next-line react/no-danger
-              <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+              <>
+                <defs>
+                  <clipPath id={clipid}>
+                    <rect x={0} y={0} width={width} height={height} />
+                  </clipPath>
+                </defs>
+                <g
+                  /* eslint-disable-next-line react/no-danger */
+                  dangerouslySetInnerHTML={{
+                    __html: ctx.getSvg().innerHTML,
+                  }}
+                  clipPath={`url(#${clipid})`}
+                />
+              </>
             )
           }
 

package/src/MismatchParser/index.ts

@@ -25,7 +25,7 @@ export function cigarToMismatches(
   seq?: string,
   ref?: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   let roffset = 0 // reference offset
   let soffset = 0 // seq offset
   const mismatches: Mismatch[] = []
@@ -125,7 +125,7 @@ export function mdToMismatches(
   cigarMismatches: Mismatch[],
   seq: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   const mismatchRecords: Mismatch[] = []
   let curr: Mismatch = { start: 0, base: '', length: 0, type: 'mismatch' }
   const skips = cigarMismatches.filter(cigar => cigar.type === 'skip')
@@ -216,7 +216,7 @@ export function getMismatches(
   seq?: string,
   ref?: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   let mismatches: Mismatch[] = []
   const ops = parseCigar(cigar)
 

package/src/PileupRenderer/PileupRenderer.ts

@@ -74,11 +74,9 @@ function getColorBaseMap(theme: Theme) {
 }
 
 function getContrastBaseMap(theme: Theme) {
+  const map = getColorBaseMap(theme)
   return Object.fromEntries(
-    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
-      key,
-      theme.palette.getContrastText(value),
-    ]),
+    Object.entries(map).map(([k, v]) => [k, theme.palette.getContrastText(v)]),
   )
 }