From 5c76b4190f952ddb33a0c79a212dcceeccbb3dc7 Mon Sep 17 00:00:00 2001 From: Colin Diesh Date: Fri, 23 Sep 2022 18:01:51 -0600 Subject: [PATCH] Hardcoded block width of 800px on static blocks (#3207) * Hardcode static block widths * Updates * Update snaps * Add hardcoded width * Update story to have static block listing --- .../cypress/integration/basic.spec.ts | 3 +- .../calculateStaticBlocks.test.ts.snap | 233 +- packages/core/util/calculateStaticBlocks.ts | 10 +- .../LinearGenomeView.test.js.snap | 112 +- .../src/LinearGenomeView/index.test.ts | 4 +- .../JBrowseLinearGenomeView.test.tsx.snap | 4020 +++++++++++++---- .../JBrowseLinearGenomeView.stories.tsx | 19 +- 7 files changed, 3366 insertions(+), 1035 deletions(-) diff --git a/component_test/cypress/integration/basic.spec.ts b/component_test/cypress/integration/basic.spec.ts index b66fe8f6a8..b848caa11e 100644 --- a/component_test/cypress/integration/basic.spec.ts +++ b/component_test/cypress/integration/basic.spec.ts @@ -5,9 +5,10 @@ describe('JBrowse embedded view', () => { }) it('track loads', () => { cy.visit('/') + // eslint-disable-next-line testing-library/await-async-query,testing-library/prefer-screen-queries cy.findByTestId('Blockset-pileup').findByTestId( - 'prerendered_canvas_{GRCh38}10:29,838,733..29,838,818-0_done', + 'prerendered_canvas_{GRCh38}10:29,838,637..29,838,705-0_done', { timeout: 10000 }, ) }) diff --git a/packages/core/util/__snapshots__/calculateStaticBlocks.test.ts.snap b/packages/core/util/__snapshots__/calculateStaticBlocks.test.ts.snap index 72591553ef..5901d8bbe9 100644 --- a/packages/core/util/__snapshots__/calculateStaticBlocks.test.ts.snap +++ b/packages/core/util/__snapshots__/calculateStaticBlocks.test.ts.snap @@ -7,21 +7,21 @@ BlockSet { "assemblyName": undefined, "end": undefined, "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgA:1..1,024-0-beforeFirstRegion", - "offsetPx": -1024, + "key": "{test}ctgA:1..800-0-beforeFirstRegion", + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 1024, + "end": 800, "isLeftEndOfDisplayedRegion": true, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:1..1,024-0", + "key": "{test}ctgA:1..800-0", "offsetPx": 0, "parentRegion": Object { "assemblyName": "test", @@ -34,15 +34,15 @@ BlockSet { "reversed": undefined, "start": 0, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 2048, + "end": 1600, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:1,025..2,048-0", - "offsetPx": 1024, + "key": "{test}ctgA:801..1,600-0", + "offsetPx": 800, "parentRegion": Object { "assemblyName": "test", "end": 10000, @@ -52,9 +52,9 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": undefined, - "start": 1024, + "start": 800, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -68,13 +68,13 @@ BlockSet { "end": undefined, "isLeftEndOfDisplayedRegion": undefined, "key": "{test}ctgA:1..100-0-beforeFirstRegion", - "offsetPx": -1024, + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", @@ -140,7 +140,7 @@ BlockSet { "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -151,11 +151,11 @@ BlockSet { "blocks": Array [ ContentBlock { "assemblyName": "test", - "end": 5120, + "end": 5600, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:4,097..5,120-0", - "offsetPx": 4096, + "key": "{test}ctgA:4,801..5,600-0", + "offsetPx": 4800, "parentRegion": Object { "assemblyName": "test", "end": 10000, @@ -165,17 +165,17 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": undefined, - "start": 4096, + "start": 4800, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 6144, + "end": 6400, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:5,121..6,144-0", - "offsetPx": 5120, + "key": "{test}ctgA:5,601..6,400-0", + "offsetPx": 5600, "parentRegion": Object { "assemblyName": "test", "end": 10000, @@ -185,9 +185,9 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": undefined, - "start": 5120, + "start": 5600, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -201,13 +201,13 @@ BlockSet { "end": undefined, "isLeftEndOfDisplayedRegion": undefined, "key": "{test}ctgA:1..200-0-beforeFirstRegion", - "offsetPx": -1024, + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", @@ -244,10 +244,10 @@ BlockSet { }, ContentBlock { "assemblyName": "test", - "end": 1000, + "end": 800, "isLeftEndOfDisplayedRegion": true, - "isRightEndOfDisplayedRegion": true, - "key": "{test}ctgB:1..1,000-1", + "isRightEndOfDisplayedRegion": false, + "key": "{test}ctgB:1..800-1", "offsetPx": 202, "parentRegion": Object { "assemblyName": "test", @@ -260,20 +260,7 @@ BlockSet { "reversed": undefined, "start": 0, "variant": undefined, - "widthPx": 1000, - }, - InterRegionPaddingBlock { - "assemblyName": undefined, - "end": undefined, - "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgB:1..1,000-1-afterLastRegion", - "offsetPx": 1202, - "refName": undefined, - "regionNumber": undefined, - "reversed": undefined, - "start": undefined, - "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -282,59 +269,33 @@ BlockSet { exports[`block calculation can calculate some blocks 7 1`] = ` BlockSet { "blocks": Array [ - InterRegionPaddingBlock { - "assemblyName": undefined, - "end": undefined, - "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgA:1..200-0-beforeFirstRegion", - "offsetPx": -1024, - "refName": undefined, - "regionNumber": undefined, - "reversed": undefined, - "start": undefined, - "variant": "boundary", - "widthPx": 1024, - }, ContentBlock { "assemblyName": "test", - "end": 200, + "end": 800, "isLeftEndOfDisplayedRegion": true, - "isRightEndOfDisplayedRegion": true, - "key": "{test}ctgA:1..200-0", - "offsetPx": 0, + "isRightEndOfDisplayedRegion": false, + "key": "{test}ctgB:1..800-1", + "offsetPx": 200, "parentRegion": Object { "assemblyName": "test", - "end": 200, - "refName": "ctgA", + "end": 1000, + "refName": "ctgB", "start": 0, }, - "refName": "ctgA", - "regionNumber": 0, + "refName": "ctgB", + "regionNumber": 1, "reversed": undefined, "start": 0, "variant": undefined, - "widthPx": 200, - }, - InterRegionPaddingBlock { - "assemblyName": undefined, - "end": undefined, - "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgA:1..200-0-rightpad", - "offsetPx": 200, - "refName": undefined, - "regionNumber": undefined, - "reversed": undefined, - "start": undefined, - "variant": undefined, - "widthPx": 2, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", "end": 1000, - "isLeftEndOfDisplayedRegion": true, + "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": true, - "key": "{test}ctgB:1..1,000-1", - "offsetPx": 202, + "key": "{test}ctgB:801..1,000-1", + "offsetPx": 1000, "parentRegion": Object { "assemblyName": "test", "end": 1000, @@ -344,22 +305,22 @@ BlockSet { "refName": "ctgB", "regionNumber": 1, "reversed": undefined, - "start": 0, + "start": 800, "variant": undefined, - "widthPx": 1000, + "widthPx": 200, }, InterRegionPaddingBlock { "assemblyName": undefined, "end": undefined, "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgB:1..1,000-1-afterLastRegion", - "offsetPx": 1202, + "key": "{test}ctgB:801..1,000-1-afterLastRegion", + "offsetPx": 1200, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -370,11 +331,11 @@ BlockSet { "blocks": Array [ ContentBlock { "assemblyName": "test", - "end": 2048, + "end": 1600, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgB:1,025..2,048-1", - "offsetPx": 1224, + "key": "{test}ctgB:801..1,600-1", + "offsetPx": 1000, "parentRegion": Object { "assemblyName": "test", "end": 10000000, @@ -384,17 +345,17 @@ BlockSet { "refName": "ctgB", "regionNumber": 1, "reversed": undefined, - "start": 1024, + "start": 800, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 3072, + "end": 2400, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgB:2,049..3,072-1", - "offsetPx": 2248, + "key": "{test}ctgB:1,601..2,400-1", + "offsetPx": 1800, "parentRegion": Object { "assemblyName": "test", "end": 10000000, @@ -404,9 +365,9 @@ BlockSet { "refName": "ctgB", "regionNumber": 1, "reversed": undefined, - "start": 2048, + "start": 1600, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -417,11 +378,11 @@ BlockSet { "blocks": Array [ ContentBlock { "assemblyName": "test", - "end": 4096, + "end": 3200, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:2,049..4,096-0", - "offsetPx": 1024, + "key": "{test}ctgA:1,601..3,200-0", + "offsetPx": 800, "parentRegion": Object { "assemblyName": "test", "end": 50000, @@ -431,17 +392,17 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": undefined, - "start": 2048, + "start": 1600, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 6144, + "end": 4800, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:4,097..6,144-0", - "offsetPx": 2048, + "key": "{test}ctgA:3,201..4,800-0", + "offsetPx": 1600, "parentRegion": Object { "assemblyName": "test", "end": 50000, @@ -451,9 +412,9 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": undefined, - "start": 4096, + "start": 3200, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -465,21 +426,21 @@ Array [ "assemblyName": undefined, "end": undefined, "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgA:101..152-0-beforeFirstRegion", - "offsetPx": -1024, + "key": "{test}ctgA:101..140-0-beforeFirstRegion", + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 152, + "end": 140, "isLeftEndOfDisplayedRegion": true, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:101..152-0", + "key": "{test}ctgA:101..140-0", "offsetPx": 0, "parentRegion": Object { "assemblyName": "test", @@ -492,7 +453,27 @@ Array [ "reversed": undefined, "start": 100, "variant": undefined, - "widthPx": 1040, + "widthPx": 800, + }, + ContentBlock { + "assemblyName": "test", + "end": 180, + "isLeftEndOfDisplayedRegion": false, + "isRightEndOfDisplayedRegion": false, + "key": "{test}ctgA:141..180-0", + "offsetPx": 800, + "parentRegion": Object { + "assemblyName": "test", + "end": 200, + "refName": "ctgA", + "start": 100, + }, + "refName": "ctgA", + "regionNumber": 0, + "reversed": undefined, + "start": 140, + "variant": undefined, + "widthPx": 800, }, ] `; @@ -504,21 +485,21 @@ BlockSet { "assemblyName": undefined, "end": undefined, "isLeftEndOfDisplayedRegion": undefined, - "key": "{test}ctgA:8,977..10,000[rev]-0-reversed-beforeFirstRegion", - "offsetPx": -1024, + "key": "{test}ctgA:9,201..10,000[rev]-0-reversed-beforeFirstRegion", + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", "end": 10000, "isLeftEndOfDisplayedRegion": true, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:8,977..10,000[rev]-0-reversed", + "key": "{test}ctgA:9,201..10,000[rev]-0-reversed", "offsetPx": 0, "parentRegion": Object { "assemblyName": "test", @@ -530,17 +511,17 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": true, - "start": 8976, + "start": 9200, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", - "end": 8976, + "end": 9200, "isLeftEndOfDisplayedRegion": false, "isRightEndOfDisplayedRegion": false, - "key": "{test}ctgA:7,953..8,976[rev]-0-reversed", - "offsetPx": 1024, + "key": "{test}ctgA:8,401..9,200[rev]-0-reversed", + "offsetPx": 800, "parentRegion": Object { "assemblyName": "test", "end": 10000, @@ -551,9 +532,9 @@ BlockSet { "refName": "ctgA", "regionNumber": 0, "reversed": true, - "start": 7952, + "start": 8400, "variant": undefined, - "widthPx": 1024, + "widthPx": 800, }, ], } @@ -651,13 +632,13 @@ BlockSet { "end": undefined, "isLeftEndOfDisplayedRegion": undefined, "key": "{test}ctgA:101..200[rev]-0-reversed-beforeFirstRegion", - "offsetPx": -1024, + "offsetPx": -800, "refName": undefined, "regionNumber": undefined, "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ContentBlock { "assemblyName": "test", @@ -725,7 +706,7 @@ BlockSet { "reversed": undefined, "start": undefined, "variant": "boundary", - "widthPx": 1024, + "widthPx": 800, }, ], } diff --git a/packages/core/util/calculateStaticBlocks.ts b/packages/core/util/calculateStaticBlocks.ts index a14f4a41c8..5271cbbc06 100644 --- a/packages/core/util/calculateStaticBlocks.ts +++ b/packages/core/util/calculateStaticBlocks.ts @@ -23,12 +23,7 @@ export default function calculateStaticBlocks( padding = true, elision = true, extra = 0, - - // on the main thread, window.innerWidth is used because this reduces - // recalculating the blocks, otherwise, model.width for cases such as - // off-main-thread. also this is not a ternary because our window.innerWidth - // might be undefined on off-main-thread, so instead use || model.width - width = (typeof window !== 'undefined' && window.innerWidth) || model.width, + width = 800, ) { const { offsetPx, @@ -36,10 +31,11 @@ export default function calculateStaticBlocks( bpPerPx, minimumBlockWidth, interRegionPaddingWidth, + width: modelWidth, } = model const windowLeftBp = offsetPx * bpPerPx - const windowRightBp = (offsetPx + width) * bpPerPx + const windowRightBp = (offsetPx + modelWidth) * bpPerPx const blockSizePx = width const blockSizeBp = Math.ceil(blockSizePx * bpPerPx) // for each displayed region diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap index 3b2d4f2e7b..3e15b20185 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap @@ -335,11 +335,11 @@ exports[` renders one track, one region 1`] = ` >
renders one track, one region 1`] = `
@@ -395,11 +395,11 @@ exports[` renders one track, one region 1`] = ` >
renders one track, one region 1`] = `
@@ -513,11 +513,11 @@ exports[` renders one track, one region 1`] = `
renders one track, one region 1`] = `
@@ -909,11 +909,11 @@ exports[` renders two tracks, two regions 1`] = ` >
renders two tracks, two regions 1`] = ` />
renders two tracks, two regions 1`] = ` class="tss-i794sq-tick-minorTick" style="left: 819px;" /> -
-
-
-
-
-
-
-
-
-
-
renders two tracks, two regions 1`] = ` >
renders two tracks, two regions 1`] = ` />
renders two tracks, two regions 1`] = ` 1,800

-
-

- 2,000 -

-
-

renders two tracks, two regions 1`] = `

renders two tracks, two regions 1`] = ` />
-
@@ -1516,11 +1454,11 @@ exports[` renders two tracks, two regions 1`] = `
renders two tracks, two regions 1`] = ` />
-
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/index.test.ts b/plugins/linear-genome-view/src/LinearGenomeView/index.test.ts index 8f42ba1fe3..63353bd597 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/index.test.ts +++ b/plugins/linear-genome-view/src/LinearGenomeView/index.test.ts @@ -636,8 +636,8 @@ test('can perform pxToBp on human genome things with ellided blocks (zoomed out) // chrX after an ellided block, this tests a specific coord but should just be // probably somewhat around here - expect(model.pxToBp(1228).coord).toBe(118604872) - expect(model.pxToBp(1228).refName).toBe('X') + expect(model.pxToBp(1228).coord).toBe(1075410) + expect(model.pxToBp(1228).refName).toBe('Y') // chrY_random at the end expect(model.pxToBp(1500).refName).toBe('Y_KI270740v1_random') diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap index 33f761e2f6..54501710af 100644 --- a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap +++ b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap @@ -427,15 +427,15 @@ exports[` renders successfully 1`] = ` >
renders successfully 1`] = ` class="tss-i794sq-tick-minorTick" style="left: 800px;" /> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -671,15 +796,15 @@ exports[` renders successfully 1`] = ` >
renders successfully 1`] = ` 40

+
+
+
+

+ 40 +

+

renders successfully 1`] = ` 50

+
+

+ 60 +

+
+
+

+ 70 +

+
+
+

+ 80 +

+
@@ -835,21 +1005,21 @@ exports[` renders successfully 1`] = `
renders successfully 1`] = ` text-anchor="middle" x="850" y="10" - > - S - - - - L - - - - T - - - - F - - - renders successfully 1`] = ` V - S + H - H + C - - F - - - - Y - - - - H - - - - C - - renders successfully 1`] = ` text-anchor="middle" x="870" y="50" - > - L - - - - S - - - - L - - - - L - - - renders successfully 1`] = ` C - - T - - - C + g t - c + a a @@ -2548,354 +2509,167 @@ exports[` renders successfully 1`] = ` height="20" stroke="#555" width="20" - x="960" - y="60" + x="80" + y="80" /> c - t + a - t + a - t + c - t + g - a + c - t + c - g + t - t + c - a - - - - a - - - - c - - - - a - - - - a - - - - c - - - - g - - - - c - - - - c - - - - t - - - - c - - - a @@ -3394,137 +3168,2772 @@ exports[` renders successfully 1`] = ` G - A + M - G + T - a + A - g + S - t + N + + F + + + + L + + + + P + + + + M + + + + L + + + + F + + + + V + + + + E + + + + T + + + + + + Q + + + + Q + + + + P + + + + T + + + + S + + + + C + + + + R + + + + C + + + + * + + + + S + + + + C + + + + K + + + + R + + + + + + N + + + + N + + + + R + + + + L + + + + Q + + + + V + + + + V + + + + A + + + + N + + + + P + + + + V + + + + S + + + + G + + + + D + + +
+
+ + + + P + + + + S + + + + L + + + + T + + + + F + + + + I + + + + R + + + + L + + + + * + + + + L + + + + V + + + + L + + + + * + + + + P + + + + W + + + + S + + + + V + + + + S + + + + H + + + + F + + + + Y + + + + T + + + + I + + + + M + + + + I + + + + G + + + + S + + + + L + + + + A + + + + L + + + + + + R + + + + L + + + + S + + + + L + + + + L + + + + Y + + + + D + + + + Y + + + + D + + + + W + + + + F + + + + F + + + + S + + + + L + + + + + + T + + + + C + + + + C + + + + G + + + + T + + + + C + + + + T + + + + C + + + + t + + + + c + + + + a + + + + c + + + + t + + + + t + + + + t + + + + t + + + + a + + + + t + + + + a + + + + c + + + + g + + + + a + + + + t + + + + t + + + + a + + + + t + + + + g + + + + a + + + + t + + + + t + + + + g + + + + g + + + + t + + + + t + + + + c + + + + t + + + + t + + + + t + + + + a + + + + g + + + + c + + + + c + + + + t + + + + t + + + + g + + + + g + + + + A + + + + G + + + + G + + + + C + + + + A + + + + G + + + + A + + + + G + + + + a + + + + g + + + + t + + + + g + + + + a + + + + a + + + + a + + + + a + + + + t + + + + a + + + + t + + + + g + + + + c + + + + t + + + + a + + + + a + + + + t + + + + a + + + + c + + + + t + + - g + a a + + + c + + + + c + a @@ -3534,797 +5943,824 @@ exports[` renders successfully 1`] = ` height="20" stroke="#555" width="20" - x="1020" + x="600" y="80" /> a + + + g + a - t + a a - M + t - T + c - A + g - S + g - N + a - F + a - L + c + + + + c - P + T - M + E - L + * - F + K - V + * - E + V - T + I - E + I - * + I - K + P - * + E + > + K + - Q + A - Q + K - P - + x="850" + y="110" + /> - T + R - S + R - C + E - R + S - C + K - * + Y S - C + * - K + S - R + Q - R + N - E + K - S + L - K + R - - - N + P - N + G - R + D - L + R - Q + V - V + K - V + I - A + R N @@ -4334,145 +6770,127 @@ exports[` renders successfully 1`] = ` height="20" stroke="#555" width="60" - x="560" + x="420" y="140" /> - P + H - V + N - S + T - G + R - D + * - R + G - V + Q - K - - - - I -
diff --git a/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx b/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx index 53b42a7e24..98677e0a9b 100644 --- a/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx +++ b/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx @@ -375,17 +375,18 @@ export const NextstrainExample = () => { return } +function loc(r: Region) { + return `${r.refName}:${Math.floor(r.start)}-${Math.floor(r.end)}` +} const VisibleRegions = observer( ({ state }: { state: ReturnType }) => { - const locstrings = state.session.views[0].coarseDynamicBlocks - .map( - (region: Region) => - `${region.refName}:${Math.floor(region.start)}-${Math.floor( - region.end, - )}`, - ) - .join(',') - return

Visible region: {locstrings}

+ const view = state.session.views[0] + return view.initialized ? ( +
+

Visible region {view.coarseDynamicBlocks.map(loc).join(',')}

+

Static blocks {view.staticBlocks.map(loc).join(',')}

+
+ ) : null }, )