Fix pileup "sort by" setting being lost on zoom level change (#3319)

* Fix sort on zoom

* Sort by base pair instead of by strand, easier to see result, and test zoom out retains the sort

plugins/alignments/src/LinearPileupDisplay/model.ts

@@ -55,6 +55,7 @@ type LGV = LinearGenomeViewModel
 
 /**
  * #stateModel LinearPileupDisplay
+ * extends `BaseLinearDisplay`
  */
 function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
   return types
@@ -117,6 +118,10 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             extra: types.frozen(),
           }),
         ),
+
+        /**
+         * #property
+         */
         filterBy: types.optional(
           types.model({
             flagInclude: types.optional(types.number, 0),
@@ -134,6 +139,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       colorTagMap: observable.map<string, string>({}),
       modificationTagMap: observable.map<string, string>({}),
       featureUnderMouseVolatile: undefined as undefined | Feature,
+      currSortBpPerPx: 0,
       ready: false,
     }))
     .actions(self => ({
@@ -143,6 +149,12 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       setReady(flag: boolean) {
         self.ready = flag
       },
+      /**
+       * #action
+       */
+      setCurrSortBpPerPx(n: number) {
+        self.currSortBpPerPx = n
+      },
       /**
        * #action
        */
@@ -288,7 +300,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
                     ...self.renderProps(),
                   })
                   self.setReady(true)
-                  self.setCurrBpPerPx(bpPerPx)
+                  self.setCurrSortBpPerPx(bpPerPx)
                 } else {
                   self.setReady(true)
                 }
@@ -567,7 +579,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             colorBy,
             filterBy,
             rpcDriverName,
-            currBpPerPx,
+            currSortBpPerPx,
             ready,
           } = self
 
@@ -578,7 +590,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             notReady:
               superProps.notReady ||
               !ready ||
-              (sortedBy && currBpPerPx !== view.bpPerPx),
+              (sortedBy && currSortBpPerPx !== view.bpPerPx),
             rpcDriverName,
             displayModel: self,
             sortedBy,

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

@@ -47,54 +47,32 @@ test('opens the track menu and enables soft clipping', async () => {
   )
 }, 30000)
 
-test('selects a sort, sort by strand', async () => {
+test('selects a sort, sort by base pair', async () => {
   console.error = jest.fn()
   const { view, findByTestId, findByText, findAllByTestId } = createView()
   await findByText('Help')
-  view.setNewView(0.02, 2086500)
+  view.setNewView(0.043688891869634636, 301762)
+  const track = 'volvox_cram_alignments_ctga'
 
   // load track
-  fireEvent.click(await findByTestId(hts('volvox-long-reads-cram'), {}, delay))
-  await findByTestId(
-    'display-volvox-long-reads-cram-LinearAlignmentsDisplay',
-    {},
-    delay,
-  )
+  fireEvent.click(await findByTestId(hts(track), {}, delay))
+  await findByTestId(`display-${track}-LinearAlignmentsDisplay`, {}, delay)
   expect(view.tracks[0]).toBeTruthy()
 
   fireEvent.click(await findByTestId('track_menu_icon'))
   fireEvent.click(await findByText('Sort by'))
-  fireEvent.click(await findByText('Read strand'))
+  fireEvent.click(await findByText('Base pair'))
 
   // wait for pileup track to render with sort
-  await findAllByTestId('pileup-Read strand', {}, delay)
+  await findAllByTestId('pileup-Base pair', {}, delay)
   const { findByTestId: find1 } = within(await findByTestId('Blockset-pileup'))
-  expectCanvasMatch(await find1(pc('{volvox}ctgA:41729..41744-0'), {}, delay))
-}, 35000)
-
-test('color by strand', async () => {
-  console.error = jest.fn()
-  const { view, findByTestId, findByText, findAllByTestId } = createView()
-  await findByText('Help')
-  view.setNewView(0.02, 2086500)
-
-  // load track
-  fireEvent.click(await findByTestId(hts('volvox-long-reads-cram'), {}, delay))
-  await findByTestId(
-    'display-volvox-long-reads-cram-LinearAlignmentsDisplay',
-    {},
-    delay,
-  )
+  expectCanvasMatch(await find1(pc('{volvox}ctgA:13196..13230-0'), {}, delay))
 
-  fireEvent.click(await findByTestId('track_menu_icon'))
-  fireEvent.click(await findByText('Color scheme'))
-  fireEvent.click(await findByText('Strand'))
-
-  // wait for pileup track to render with color
-  await findAllByTestId('pileup-strand', {}, delay)
-  const { findByTestId: find1 } = within(await findByTestId('Blockset-pileup'))
-  expectCanvasMatch(await find1(pc('{volvox}ctgA:41729..41744-0'), {}, delay))
-}, 30000)
+  fireEvent.click(await findByTestId('zoom_out'))
+  await findAllByTestId('pileup-Base pair', {}, delay)
+  const { findByTestId: find2 } = within(await findByTestId('Blockset-pileup'))
+  expectCanvasMatch(await find2(pc('{volvox}ctgA:13161..13230-0'), {}, delay))
+}, 35000)
 
 test('color by tag', async () => {
   console.error = jest.fn()