Use autorun to synchronize width to child views

GMOD · Jun 10, 2022 · 58833ca · 58833ca
1 parent c0c9e5b
commit 58833ca
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/model.ts b/plugins/linear-comparative-view/src/LinearComparativeView/model.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { autorun } from 'mobx'
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
 import { MenuItem, ReturnToImportFormDialog } from '@jbrowse/core/ui'
 import { getSession, isSessionModelWithWidgets } from '@jbrowse/core/util'
@@ -124,7 +125,6 @@ export default function stateModelFactory(pluginManager: PluginManager) {
 
       setWidth(newWidth: number) {
         self.width = newWidth
-        self.views.forEach(v => v.setWidth(newWidth))
       },
       setHeight(newHeight: number) {
         self.height = newHeight
@@ -275,6 +275,18 @@ export default function stateModelFactory(pluginManager: PluginManager) {
         ]
       },
     }))
+    .actions(self => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(() => {
+            if (self.initialized) {
+              self.views.forEach(v => v.setWidth(self.width))
+            }
+          }),
+        )
+      },
+    }))
 }
 
 export type LinearComparativeViewStateModel = ReturnType<

diff --git a/products/jbrowse-web/src/tests/Loader.test.tsx b/products/jbrowse-web/src/tests/Loader.test.tsx
@@ -257,7 +257,8 @@ describe('<Loader />', () => {
   }, 40000)
 
   it('can use a spec url for synteny view', async () => {
-    const { findByText, findByPlaceholderText } = render(
+    console.warn = jest.fn()
+    const { findByText, findByTestId } = render(
       <QueryParamProvider
         // @ts-ignore
         location={{
@@ -270,13 +271,26 @@ describe('<Loader />', () => {
     )
 
     await findByText('Help', {}, delay)
+    await findByTestId('synteny_canvas', {}, delay)
+  }, 40000)
 
-    await findByText(/volvox-sorted.bam/, {}, delay)
-    const elt = await findByPlaceholderText('Search for location', {}, delay)
+  it('can use a spec url for spreadsheet view', async () => {
+    console.warn = jest.fn()
+    const { findByText } = render(
+      <QueryParamProvider
+        // @ts-ignore
+        location={{
+          search:
+            '?config=test_data/volvox/config_main_thread.json&session=spec-{"views":[{"type":"SpreadsheetView","uri":"test_data/volvox/volvox.filtered.vcf.gz","assembly":"volvox"}]}',
+        }}
+      >
+        <Loader />
+      </QueryParamProvider>,
+    )
 
-    // @ts-ignore
-    await waitFor(() => expect(elt.value).toBe('ctgA:5,999..6,999'), delay)
+    await findByText('Help', {}, delay)
+
+    // random row in spreadsheet
+    await findByText('ctgA:8470..8471', {}, delay)
   }, 40000)
 })
-
-//http://localhost:3000/?config=test_data/volvox/config_main_thread.json&session=spec-{%22views%22:[{%22type%22:%22LinearSyntenyView%22,%22tracks%22:[%22volvox_fake_synteny%22],%22views%22:[{%22loc%22:%22ctgA:1-100%22,%22assembly%22:%22volvox%22},{%22loc%22:%22ctgA:300-400%22,%22assembly%22:%22volvox%22}]}]}