react-msaview 6.2.1 → 6.2.2

package/src/components/msa/msaRaster.ts

@@ -180,7 +180,7 @@ interface RasterCache {
   numColumns: number
   numRows: number
   tiles: Map<string, RasterCanvas>
-  thumbnail?: RasterCanvas
+  thumbnail?: { height: number; canvas: RasterCanvas | undefined }
 }
 
 const caches = new WeakMap<object, RasterCache>()
@@ -341,7 +341,7 @@ export function canvasHref(canvas: RasterCanvas | undefined) {
     if (typeof ctx?.drawImage !== 'function') {
       return undefined
     }
-    ctx.drawImage(canvas as CanvasImageSource, 0, 0)
+    ctx.drawImage(canvas, 0, 0)
     return out.toDataURL('image/png')
   } catch {
     return undefined
@@ -434,24 +434,29 @@ export function msaThumbnail({
   if (numColumns <= 0 || numRows <= 0) {
     return undefined
   }
-  if (!cache.thumbnail) {
+  // keyed on the requested height as well as the cache: rowStep is derived from
+  // it, so a thumbnail built for a different bar height is the wrong sampling
+  if (cache.thumbnail?.height !== height) {
     const colStep = Math.max(1, Math.ceil(numColumns / maxThumbnailColumns))
     const rowStep = Math.max(1, Math.ceil(numRows / height))
     const w = Math.ceil(numColumns / colStep)
     const h = Math.ceil(numRows / rowStep)
-    cache.thumbnail = paint(
-      rasterPixels({
-        spec: cache.spec,
-        col0: 0,
-        row0: 0,
-        width: w,
-        height: h,
-        colStep,
-        rowStep,
-      }),
-      w,
-      h,
-    )
+    cache.thumbnail = {
+      height,
+      canvas: paint(
+        rasterPixels({
+          spec: cache.spec,
+          col0: 0,
+          row0: 0,
+          width: w,
+          height: h,
+          colStep,
+          rowStep,
+        }),
+        w,
+        h,
+      ),
+    }
   }
-  return cache.thumbnail
+  return cache.thumbnail.canvas
 }

package/src/components/tracks/drawTracks.ts

@@ -82,17 +82,16 @@ export function drawTextTrackContent({
   for (let i = 0; str && i < str.length; i++) {
     const letter = str[i]!
     const upper = letter.toUpperCase()
-    const color = colorScheme[upper]
+    const fill = bgColor ? colorScheme[upper] : undefined
     const x = (xStart + i) * colWidth
-    const filled = bgColor && !!color
-    if (filled) {
-      ctx.fillStyle = color!
+    if (fill) {
+      ctx.fillStyle = fill
       ctx.fillRect(x, 0, colWidth, rowHeight)
     }
     if (drawLetters) {
       // a letter on a colored tile needs the tile's contrast color; otherwise it
       // sits on the plain background and takes the theme's text color
-      ctx.fillStyle = filled ? (contrastScheme[upper] ?? 'black') : textColor
+      ctx.fillStyle = fill ? (contrastScheme[upper] ?? 'black') : textColor
       ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
     }
   }

package/src/components/tree/renderTreeCanvas.test.ts

@@ -229,3 +229,68 @@ describe('node bubble click targets', () => {
     expect(hits.filter(h => h.branch).length).toBe(3)
   })
 })
+
+describe('leaf label click targets', () => {
+  const bounds = { minX: 0, minY: 0, maxX: 10000, maxY: 10000 }
+  // the recorded fillText x is in content coordinates -- the fake ctx applies
+  // the same translate the real one does -- so it is directly comparable to the
+  // clickMap box, which is what the hit test searches
+  function renderLabels(labelsAlignRight: boolean) {
+    const model = stateModelFactory().create({
+      type: 'MsaView',
+      data: { msa: '>a\nA\n>b\nA', tree: '(a,b);' },
+    })
+    model.setWidth(1000)
+    model.setDrawTree(false)
+    model.setLabelsAlignRight(labelsAlignRight)
+
+    let tx = 0
+    const drawn: number[] = []
+    const ctx = {
+      font: '12px sans-serif',
+      measureText: (text: string) => ({ width: text.length * 6 }),
+      beginPath() {},
+      stroke() {},
+      setLineDash() {},
+      resetTransform() {
+        tx = 0
+      },
+      scale() {},
+      translate(x: number) {
+        tx += x
+      },
+      moveTo() {},
+      lineTo() {},
+      fillText(_text: string, x: number) {
+        drawn.push(x + tx)
+      },
+    } as unknown as RenderCtx
+
+    const clickMap = new ClickMapIndex()
+    renderTreeCanvas({
+      model,
+      ctx,
+      clickMap,
+      offsetY: 0,
+      theme: { palette: { text: { primary: '#000' } } } as Theme,
+    })
+    return { drawn, hits: clickMap.search(bounds).filter(h => !h.branch) }
+  }
+
+  it('boxes a right-aligned label at the edge it is drawn against', () => {
+    const { drawn, hits } = renderLabels(true)
+    expect(hits.length).toBe(drawn.length)
+    // textAlign is 'right' here, so the drawn x is the label's right edge
+    for (const hit of hits) {
+      expect(drawn).toContain(hit.maxX)
+    }
+  })
+
+  it('boxes a left-aligned label at the edge it is drawn from', () => {
+    const { drawn, hits } = renderLabels(false)
+    expect(hits.length).toBe(drawn.length)
+    for (const hit of hits) {
+      expect(drawn).toContain(hit.minX)
+    }
+  })
+})

package/src/components/tree/renderTreeCanvas.ts

@@ -265,7 +265,6 @@ function renderTreeLabels({
     blockSize,
     labelsAlignRight,
     drawTree,
-    treeAreaWidth,
     treeAreaWidthMinusMargin,
     marginLeft,
     noTree,
@@ -321,9 +320,13 @@ function renderTreeLabels({
           ctx.stroke()
         }
         ctx.fillText(displayName, offset, yp)
+        // everything here is drawn under translate(marginLeft), so the click box
+        // has to be the text's own right edge in that same space -- taking
+        // treeAreaWidth instead put the target smallPadding off the label
+        const labelRight = offset + marginLeft
         clickMap?.insert({
-          minX: treeAreaWidth - width,
-          maxX: treeAreaWidth,
+          minX: labelRight - width,
+          maxX: labelRight,
           minY: yp - emHeight,
           maxY: yp,
           name,

package/src/dataInitialized.test.ts

@@ -0,0 +1,42 @@
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
+import { expect, test } from 'vitest'
+
+import stateModelFactory from './model.ts'
+
+const MsaView = stateModelFactory()
+
+test('an empty model is not initialized', () => {
+  expect(MsaView.create({ type: 'MsaView' }).dataInitialized).toBe(false)
+})
+
+test('inline data initializes the view', () => {
+  const model = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>a\nACGT\n>b\nACGA\n', tree: '' },
+  })
+  expect(model.dataInitialized).toBe(true)
+})
+
+// DataModel's postProcessSnapshot drops a document over 50kb rather than
+// inlining it into a session or a shared URL, so it comes back `undefined`
+// rather than ''. That has to read as "no data" -- otherwise the restored
+// session renders an empty alignment instead of the import form
+test('a dropped oversize inline msa restores as uninitialized', () => {
+  const msa = `>a\n${'A'.repeat(60_000)}\n>b\n${'C'.repeat(60_000)}\n`
+  const model = MsaView.create({ type: 'MsaView', data: { msa, tree: '' } })
+  expect(model.dataInitialized).toBe(true)
+
+  const restored = MsaView.create(getSnapshot(model))
+  expect(restored.data.msa).toBeUndefined()
+  expect(restored.MSA).toBe(null)
+  expect(restored.dataInitialized).toBe(false)
+})
+
+test('an error keeps the view uninitialized', () => {
+  const model = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>a\nACGT\n', tree: '' },
+  })
+  model.setError(new Error('boom'))
+  expect(model.dataInitialized).toBe(false)
+})

package/src/model.ts

@@ -664,15 +664,15 @@ function stateModelFactory() {
       /**
        * #action
        */
-      setGFFFilehandle(gffFilehandle?: FileLocationType) {
-        self.gffFilehandle = gffFilehandle
+      setTreeMetadataFilehandle(treeMetadataFilehandle?: FileLocationType) {
+        self.treeMetadataFilehandle = treeMetadataFilehandle
       },
 
       /**
        * #action
        */
-      setTreeMetadataFilehandle(treeMetadataFilehandle?: FileLocationType) {
-        self.treeMetadataFilehandle = treeMetadataFilehandle
+      setGFFFilehandle(gffFilehandle?: FileLocationType) {
+        self.gffFilehandle = gffFilehandle
       },
 
       /**
@@ -1231,7 +1231,12 @@ function stateModelFactory() {
        * #getter
        */
       get dataInitialized() {
-        return (self.data.msa !== '' || self.data.tree !== '') && !self.error
+        // truthiness, not `!== ''`: these are types.maybe, and DataModel's
+        // postProcessSnapshot drops a document over 50kb, so a restored session
+        // that inlined a large alignment comes back `undefined` here -- which
+        // `!== ''` reads as initialized and renders an empty view instead of
+        // the import form
+        return !!(self.data.msa || self.data.tree) && !self.error
       },
       /**
        * #getter

package/src/reset.test.ts

@@ -0,0 +1,61 @@
+import { expect, test } from 'vitest'
+
+import stateModelFactory from './model.ts'
+
+const MsaView = stateModelFactory()
+
+function loaded() {
+  const model = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>a\nAC\n>b\nAC\n>c\nAC\n>d\nAC', tree: '((a,b),(c,d));' },
+  })
+  model.setWidth(1000)
+  return model
+}
+
+test('reset returns to the import form', () => {
+  const model = loaded()
+  expect(model.dataInitialized).toBe(true)
+  model.reset()
+  expect(model.dataInitialized).toBe(false)
+})
+
+// generateNodeIds derives ids from the path, so 'node-0-0-1' is the root's
+// first child in EVERY tree. Carrying collapsed/showOnly across a reset opens
+// the next file collapsed, or focused on a subtree, with nothing on screen
+// saying why
+test('reset drops view state that names the old data', () => {
+  const model = loaded()
+  const innerNode = model.hierarchy.children![0]!.data.id
+  model.toggleCollapsed(innerNode)
+  model.setShowOnly(innerNode)
+  model.drawRelativeTo('a')
+  model.setHighlightedColumns([0, 1])
+  model.setMousePos(1, 1)
+  model.setMouseClickPos(1, 1)
+  model.setHoveredTreeNode(innerNode)
+
+  model.reset()
+
+  expect([...model.collapsed]).toEqual([])
+  expect(model.showOnly).toBeUndefined()
+  expect(model.relativeTo).toBeUndefined()
+  expect(model.highlightedColumns).toBeUndefined()
+  expect(model.mouseCol).toBeUndefined()
+  expect(model.mouseClickCol).toBeUndefined()
+  expect(model.hoveredTreeNode).toBeUndefined()
+})
+
+test('a file opened after a reset is not collapsed by the previous one', () => {
+  const model = loaded()
+  model.toggleCollapsed(model.hierarchy.children![0]!.data.id)
+  expect(model.numRows).toBeLessThan(4)
+
+  model.reset()
+  model.setData({
+    msa: '>x\nGT\n>y\nGT\n>z\nGT\n>w\nGT',
+    tree: '((x,y),(z,w));',
+  })
+  expect(model.numRows).toBe(4)
+  expect(model.rowNames).toEqual(['x', 'y', 'z', 'w'])
+})

package/src/version.ts

@@ -1 +1 @@
-export const version = '6.2.1'
+export const version = '6.2.2'