Add some more dotplot drawing improvements

plugins/dotplot-view/src/DotplotView/components/Axes.tsx

@@ -52,7 +52,7 @@ export const HorizontalAxis = observer(function ({
   return (
     <svg width={viewWidth} height={borderY} className={classes.htext}>
       {dblocks
-        .filter(region => !hide.includes(region.key))
+        .filter(region => !hide.has(region.key))
         .map(region => {
           const x = region.offsetPx
           const y = 0
@@ -130,6 +130,7 @@ export const HorizontalAxis = observer(function ({
         x={(viewWidth - borderX) / 2}
         fill="black"
         textAnchor="middle"
+        dominantBaseline="hanging"
       >
         {hview.assemblyNames.join(',')}
       </text>
@@ -154,7 +155,7 @@ export const VerticalAxis = observer(function ({
   return (
     <svg className={classes.vtext} width={borderX} height={viewHeight}>
       {dblocks
-        .filter(region => !hide.includes(region.key))
+        .filter(region => !hide.has(region.key))
         .map(region => {
           const y = region.offsetPx
           const x = borderX

plugins/dotplot-view/src/DotplotView/components/util.ts

@@ -20,7 +20,7 @@ export function getBlockLabelKeysToHide(
   length: number,
   viewOffsetPx: number,
 ) {
-  const blockLabelKeysToHide: string[] = []
+  const blockLabelKeysToHide = new Set<string>()
   const sortedBlocks = blocks.slice(0).sort((a, b) => {
     const alen = a.end - a.start
     const blen = b.end - b.start
@@ -31,7 +31,7 @@ export function getBlockLabelKeysToHide(
     const y = Math.round(length - offsetPx + viewOffsetPx)
     const labelBounds = [Math.max(y - 12, 0), y]
     if (y === 0 || positions.slice(...labelBounds).some(Boolean)) {
-      blockLabelKeysToHide.push(key)
+      blockLabelKeysToHide.add(key)
     } else {
       positions.fill(true, ...labelBounds)
     }

plugins/dotplot-view/src/DotplotView/model.ts

@@ -10,7 +10,7 @@ import {
   SnapshotIn,
 } from 'mobx-state-tree'
 
-import { makeTicks } from './components/util'
+import { getBlockLabelKeysToHide, makeTicks } from './components/util'
 import { observable, autorun, transaction } from 'mobx'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { ReturnToImportFormDialog } from '@jbrowse/core/ui'
@@ -296,14 +296,12 @@ export default function stateModelFactory(pm: PluginManager) {
        * #action
        */
       setBorderX(n: number) {
-        console.log('x', n)
         self.borderX = n
       },
       /**
        * #action
        */
       setBorderY(n: number) {
-        console.log('y', n)
         self.borderY = n
       },
       /**
@@ -585,19 +583,35 @@ export default function stateModelFactory(pm: PluginManager) {
           self,
           autorun(function borderSetter() {
             // make sure we have a width on the view before trying to load
-            const { vview, hview } = self
             if (self.volatileWidth === undefined) {
               return
             }
+            const { vview, hview, viewHeight, viewWidth } = self
             const padding = 40
             const vblocks = vview.dynamicBlocks.contentBlocks
             const hblocks = hview.dynamicBlocks.contentBlocks
+
+            const vhide = getBlockLabelKeysToHide(
+              vblocks,
+              viewHeight,
+              vview.offsetPx,
+            )
+            const hhide = getBlockLabelKeysToHide(
+              hblocks,
+              viewWidth,
+              hview.offsetPx,
+            )
+
             const len = (a: string) => measureText(a.slice(0, 30))
-            const by = hblocks.reduce((a, b) => Math.max(a, len(b.refName)), 0)
-            const bx = vblocks.reduce((a, b) => Math.max(a, len(b.refName)), 0)
+            const by = hblocks
+              .filter(b => !hhide.has(b.key))
+              .reduce((a, b) => Math.max(a, len(b.refName)), 0)
+            const bx = vblocks
+              .filter(b => !vhide.has(b.key))
+              .reduce((a, b) => Math.max(a, len(b.refName)), 0)
             // these are set via autorun to avoid dependency cycle
-            self.setBorderY(Math.max(by + padding, 100))
-            self.setBorderX(Math.max(bx + padding, 100))
+            self.setBorderY(Math.max(by + padding, 50))
+            self.setBorderX(Math.max(bx + padding, 50))
           }),
         )
       },

products/jbrowse-web/src/tests/AlignmentsFeatures.test.tsx

@@ -28,7 +28,7 @@ test('opens the track menu and enables soft clipping', async () => {
   fireEvent.click(await findByTestId(hts('volvox-long-reads-sv-bam'), ...opts))
 
   // opens the track menu
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Show soft clipping'))
 
   // wait for block to rerender
@@ -48,7 +48,7 @@ test('selects a sort, sort by base pair', async () => {
   // load track
   fireEvent.click(await findByTestId(hts(track), ...opts))
 
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Sort by'))
   fireEvent.click(await findByText('Base pair'))
 
@@ -72,7 +72,7 @@ test('color by tag', async () => {
   fireEvent.click(await findByTestId(hts('volvox_cram'), ...opts))
 
   // colors by HP tag
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Color scheme'))
   fireEvent.click(await findByText('Color by tag...'))
   fireEvent.change(await findByTestId('color-tag-name-input'), {
@@ -91,7 +91,7 @@ test('toggle short-read arc display', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:1-50000')
   fireEvent.click(await findByTestId(hts('volvox_sv_cram'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Arc display'))[0])
   expectCanvasMatch(await findByTestId('Arc-display-true', ...opts))
@@ -103,7 +103,7 @@ test('toggle short-read cloud display', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:1-50000')
   fireEvent.click(await findByTestId(hts('volvox_sv_cram'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Read cloud display'))[0])
   expectCanvasMatch(await findByTestId('ReadCloud-display-true', ...opts))
@@ -115,7 +115,7 @@ test('toggle long-read cloud display', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:19,101..32,027')
   fireEvent.click(await findByTestId(hts('volvox-simple-inv.bam'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Read cloud display'))[0])
   expectCanvasMatch(await findByTestId('ReadCloud-display-true', ...opts))
@@ -127,7 +127,7 @@ test('toggle long-read arc display', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:19,101..32,027')
   fireEvent.click(await findByTestId(hts('volvox-simple-inv.bam'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Arc display'))[0])
   expectCanvasMatch(await findByTestId('Arc-display-true', ...opts))
@@ -139,7 +139,7 @@ test('toggle long-read arc display, use out of view pairing', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:478..6,191')
   fireEvent.click(await findByTestId(hts('volvox-long-reads-sv-cram'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Arc display'))[0])
   expectCanvasMatch(await findByTestId('Arc-display-true', ...opts))
@@ -151,7 +151,7 @@ test('toggle short-read arc display, use out of view pairing', async () => {
   await findByText('Help')
   await view.navToLocString('ctgA:478..6,191')
   fireEvent.click(await findByTestId(hts('volvox_sv_cram'), ...opts))
-  fireEvent.click(await findByTestId('track_menu_icon'))
+  fireEvent.click(await findByTestId('track_menu_icon', ...opts))
   fireEvent.click(await findByText('Replace lower panel with...'))
   fireEvent.click((await findAllByText('Arc display'))[0])
   expectCanvasMatch(await findByTestId('Arc-display-true', ...opts))

test_data/config_wormbase.json

@@ -1,5 +1,34 @@
 {
   "assemblies": [
+    {
+      "name": "c_brenneri_PRJNA20035",
+      "sequence": {
+        "displays": [
+          {
+            "displayId": "c_brenneri_PRJNA20035-LinearReferenceSequenceDisplay",
+            "type": "LinearReferenceSequenceDisplay"
+          }
+        ],
+        "trackId": "c_brenneri_PRJNA20035-1646426635733",
+        "type": "ReferenceSequenceTrack",
+        "adapter": {
+          "fastaLocation": {
+            "uri": "https://s3.amazonaws.com/wormbase-modencode/fasta/current/c_brenneri.PRJNA20035.WS284.genomic.fa.gz",
+            "locationType": "UriLocation"
+          },
+          "faiLocation": {
+            "locationType": "UriLocation",
+            "uri": "https://s3.amazonaws.com/wormbase-modencode/fasta/current/c_brenneri.PRJNA20035.WS284.genomic.fa.gz.fai"
+          },
+          "type": "BgzipFastaAdapter",
+          "gziLocation": {
+            "uri": "https://s3.amazonaws.com/wormbase-modencode/fasta/current/c_brenneri.PRJNA20035.WS284.genomic.fa.gz.gzi",
+            "locationType": "UriLocation"
+          }
+        }
+      },
+      "displayName": "c_brenneri_PRJNA20035"
+    },
     {
       "name": "C. elegans (N2)",
       "sequence": {