jbrowse-plugin-graphgenomeviewer 4.0.0 → 4.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.0",
+  "version": "4.0.3",
   "description": "JBrowse 2 graph genome (pangenome) view: rGFA reference-anchored layouts, the Bandage force-directed engine, and haplotype lanes read from a gbz-base database",
   "license": "GPL-3.0-or-later",
   "repository": {

package/src/LinearGraphDisplay/LinearGraphDisplay.test.ts

@@ -13,6 +13,7 @@ import { types } from '@jbrowse/mobx-state-tree'
 import { linearGenomeViewStateModelFactory } from '@jbrowse/plugin-linear-genome-view'
 
 import LinearGraphDisplayF from './index'
+import GbzBaseSyntenyAdapterF from '../GbzBaseSyntenyAdapter/index'
 import RgfaTabixAdapterF from '../RgfaTabixAdapter/index'
 
 import type { LinearGraphDisplayModel } from './model'
@@ -97,25 +98,28 @@ function createEnvironment({ tiered = true } = {}) {
   console.warn = vi.fn()
   const pluginManager = new PluginManager()
   RgfaTabixAdapterF(pluginManager)
-  pluginManager.addTrackType(() => {
-    const trackConfigSchema = ConfigurationSchema(
-      'FeatureTrack',
-      {},
-      {
-        baseConfiguration: createBaseTrackConfig(pluginManager),
-        explicitIdentifier: 'trackId',
-      },
-    )
-    return new TrackType({
-      name: 'FeatureTrack',
-      configSchema: trackConfigSchema,
-      stateModel: createBaseTrackModel(
-        pluginManager,
-        'FeatureTrack',
-        trackConfigSchema,
-      ),
+  GbzBaseSyntenyAdapterF(pluginManager)
+  for (const name of ['FeatureTrack', 'SyntenyTrack']) {
+    pluginManager.addTrackType(() => {
+      const trackConfigSchema = ConfigurationSchema(
+        name,
+        {},
+        {
+          baseConfiguration: createBaseTrackConfig(pluginManager),
+          explicitIdentifier: 'trackId',
+        },
+      )
+      return new TrackType({
+        name,
+        configSchema: trackConfigSchema,
+        stateModel: createBaseTrackModel(
+          pluginManager,
+          name,
+          trackConfigSchema,
+        ),
+      })
     })
-  })
+  }
   LinearGraphDisplayF(pluginManager)
   pluginManager.addViewType(
     () =>
@@ -155,7 +159,20 @@ function createEnvironment({ tiered = true } = {}) {
     },
     { pluginManager },
   )
-  const trackConfigs = [trackConfig]
+  const gbzTrackConfig = trackSchema.create(
+    {
+      type: 'SyntenyTrack',
+      trackId: 'walks',
+      name: 'walks',
+      assemblyNames: [ASM, 'HG1.1', 'HG2.1'],
+      adapter: { type: 'GbzBaseSyntenyAdapter', assemblyNames: [ASM] },
+      displays: [
+        { type: 'LinearGraphDisplay', displayId: 'walks-LinearGraphDisplay' },
+      ],
+    },
+    { pluginManager },
+  )
+  const trackConfigs = [trackConfig, gbzTrackConfig]
 
   const assemblyRegions = [
     { refName: REF, start: 0, end: CONTIG, assemblyName: ASM },
@@ -343,6 +360,58 @@ test('the track is as tall as its rows, up to the configured height', async () =
   expect(display.height).toBe(pane.canvasHeight)
 })
 
+test("a launch names the pane's props without its type, and opens in that layout", async () => {
+  const { view, cuts } = createEnvironment()
+  view.zoomTo(60_000 / WIDTH_PX)
+  view.scrollTo(1_000_000 / view.bpPerPx)
+  view.showTrack(
+    'graph',
+    {},
+    {
+      type: 'LinearGraphDisplay',
+      pane: { layoutMode: 'force', colorScheme: 'uniform' },
+    },
+  )
+  const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  display.pane.startRenderingBackend(fakeRenderer())
+  await wait(SETTLE_MS)
+  expect(cuts).toHaveLength(1)
+  expect(display.pane.layoutMode).toBe('force')
+  expect(display.pane.colorScheme).toBe('uniform')
+  expect(display.pane.hostPlacesX).toBe(false)
+})
+
+test('a launch that states one pane prop takes the rest from the config', async () => {
+  const { view, cuts } = createEnvironment()
+  view.zoomTo(60_000 / WIDTH_PX)
+  view.scrollTo(1_000_000 / view.bpPerPx)
+  view.showTrack(
+    'graph',
+    {},
+    {
+      type: 'LinearGraphDisplay',
+      pane: { colorScheme: 'uniform' },
+    },
+  )
+  const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  display.pane.startRenderingBackend(fakeRenderer())
+  await wait(SETTLE_MS)
+  expect(cuts).toHaveLength(1)
+  expect(display.pane.colorScheme).toBe('uniform')
+  expect(display.pane.layoutMode).toBe('auto')
+  expect(display.pane.hostPlacesX).toBe(true)
+})
+
+test('a GBZ track cuts for the lanes it names', async () => {
+  const { view } = createEnvironment()
+  view.zoomTo(60_000 / WIDTH_PX)
+  view.scrollTo(1_000_000 / view.bpPerPx)
+  view.showTrack('walks')
+  const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  expect(display.type).toBe('LinearGraphDisplay')
+  expect(display.pane.subgraphHaplotypes).toEqual(['HG1.1', 'HG2.1'])
+})
+
 test('the track menu offers the layouts, colours and the settings dialog', async () => {
   const { display } = await shownGraph()
   const labels = display

package/src/LinearGraphDisplay/components/LinearGraphDisplay.tsx

@@ -25,6 +25,10 @@ const LinearGraphDisplay = observer(function LinearGraphDisplay({
   return (
     <div
       data-testid="linear-graph-display"
+      data-layout={pane.layoutMode}
+      data-cut-tier={pane.cutTier}
+      data-recuts={pane.recuts}
+      data-node-count={pane.hasGraph ? pane.nodeCount : undefined}
       style={{
         position: 'relative',
         width: pane.width,

package/src/LinearGraphDisplay/model.ts

@@ -12,6 +12,7 @@ import { COLOR_SCHEMES } from '../GraphGenomeView/colorSchemes'
 import { isLinearHost } from '../GraphGenomeView/host'
 import { LAYOUT_MODES } from '../GraphGenomeView/layoutModes'
 import paneModelFactory from '../GraphGenomeView/model'
+import { trackLanes } from '../launchSubgraph/subgraphTracks'
 
 import type { LinearGraphDisplayConfigModel } from './configSchema'
 import type { MenuItem } from '@jbrowse/core/ui'
@@ -21,206 +22,282 @@ const GraphSettingsDialog = lazy(
   () => import('../GraphGenomeView/components/GraphSettingsDialog'),
 )
 
+type ConfiguredSlot = 'layoutMode' | 'colorScheme' | 'height'
+
 export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
   const Pane = paneModelFactory()
-  return types
-    .compose(
-      'LinearGraphDisplay',
-      BaseDisplay,
-      TrackHeightMixin(),
-      types.model({
-        type: types.literal('LinearGraphDisplay'),
-        configuration: ConfigurationReference(configSchema),
-        // The graph pane, the same model the standalone view is. Here the
-        // linear view above is its host: x is that view's window for a layout
-        // whose x is reference bp, and the cut is re-made when the window
-        // leaves it (pane.host).
-        pane: types.optional(Pane, () => ({
-          type: 'GraphGenomeView' as const,
-        })),
-        // The config's layout and colour reach the pane once, so a choice made
-        // in the track menu survives a reload.
-        configured: types.optional(types.boolean, false),
-      }),
-    )
-    .views(self => ({
-      get host() {
-        let view: unknown
-        try {
-          view = getContainingView(self)
-        } catch {
-          return undefined
+  return (
+    types
+      .compose(
+        'LinearGraphDisplay',
+        BaseDisplay,
+        TrackHeightMixin(),
+        types.model({
+          type: types.literal('LinearGraphDisplay'),
+          configuration: ConfigurationReference(configSchema),
+          // The graph pane, the same model the standalone view is. Here the
+          // linear view above is its host: x is that view's window for a layout
+          // whose x is reference bp, and the cut is re-made when the window
+          // leaves it (pane.host).
+          pane: types.optional(Pane, () => ({
+            type: 'GraphGenomeView' as const,
+          })),
+          // Which of the config's slots have reached the pane. Each reaches it
+          // once, so a choice made in the track menu survives a reload, and a
+          // launch that states a pane prop keeps it over the config's.
+          configured: types.optional(
+            types.frozen<Partial<Record<ConfiguredSlot, boolean>>>(),
+            {},
+          ),
+        }),
+      )
+      // A launch names the pane's props without the pane's own type, and what
+      // it states is what the config does not set.
+      .preProcessSnapshot(snapshot => {
+        const { pane, configured } = snapshot as {
+          pane?: Record<string, unknown>
+          configured?: Partial<Record<ConfiguredSlot, boolean>>
         }
-        return isLinearHost(view) ? view : undefined
-      },
-      get trackId(): string {
-        return getConf(self.parentTrack, 'trackId')
-      },
-    }))
-    .views(self => ({
-      trackMenuItems(): MenuItem[] {
-        const { pane } = self
-        const { graph } = pane
-        const walks = pane.walkChoices
-        return [
-          {
-            label: 'Layout',
-            subMenu: LAYOUT_MODES.map(mode => ({
-              type: 'radio' as const,
-              label: mode.label,
-              checked: pane.layoutMode === mode.value,
-              disabled: graph ? !mode.available(graph) : false,
-              onClick: () => {
-                void pane.switchLayout(mode.value)
-              },
-            })),
-          },
-          {
-            label: 'Color',
-            subMenu: COLOR_SCHEMES.map(scheme => ({
-              type: 'radio' as const,
-              label: scheme.label,
-              checked: pane.colorScheme === scheme.value,
-              onClick: () => {
-                pane.setColorScheme(scheme.value)
+        return pane
+          ? ({
+              ...snapshot,
+              configured: {
+                layoutMode: pane.layoutMode !== undefined,
+                colorScheme: pane.colorScheme !== undefined,
+                height: pane.paneHeight !== undefined,
+                ...configured,
               },
-            })),
-          },
-          ...(walks.length > 0
-            ? [
-                {
-                  label: 'Walk',
-                  subMenu: [
-                    {
-                      type: 'radio' as const,
-                      label: 'None',
-                      checked: pane.highlightedPath === '',
-                      onClick: () => {
-                        pane.setHighlightedPath('')
+              pane:
+                pane.type === undefined
+                  ? { type: 'GraphGenomeView', ...pane }
+                  : pane,
+            } as typeof snapshot)
+          : snapshot
+      })
+      .views(self => ({
+        get host() {
+          let view: unknown
+          try {
+            view = getContainingView(self)
+          } catch {
+            return undefined
+          }
+          return isLinearHost(view) ? view : undefined
+        },
+        get trackId(): string {
+          return getConf(self.parentTrack, 'trackId')
+        },
+      }))
+      .views(self => ({
+        trackMenuItems(): MenuItem[] {
+          const { pane } = self
+          const { graph } = pane
+          const walks = pane.walkChoices
+          return [
+            {
+              label: 'Layout',
+              subMenu: LAYOUT_MODES.map(mode => ({
+                type: 'radio' as const,
+                label: mode.label,
+                checked: pane.layoutMode === mode.value,
+                disabled: graph ? !mode.available(graph) : false,
+                onClick: () => {
+                  void pane.switchLayout(mode.value)
+                },
+              })),
+            },
+            {
+              label: 'Color',
+              subMenu: COLOR_SCHEMES.map(scheme => ({
+                type: 'radio' as const,
+                label: scheme.label,
+                checked: pane.colorScheme === scheme.value,
+                onClick: () => {
+                  pane.setColorScheme(scheme.value)
+                },
+              })),
+            },
+            ...(walks.length > 0
+              ? [
+                  {
+                    label: 'Walk',
+                    subMenu: [
+                      {
+                        type: 'radio' as const,
+                        label: 'None',
+                        checked: pane.highlightedPath === '',
+                        onClick: () => {
+                          pane.setHighlightedPath('')
+                        },
                       },
-                    },
-                    ...walks.map(walk => ({
-                      type: 'radio' as const,
-                      label: walk.label,
-                      checked: pane.highlightedPath === walk.name,
-                      onClick: () => {
-                        pane.setHighlightedPath(walk.name)
+                      ...walks.map(walk => ({
+                        type: 'radio' as const,
+                        label: walk.label,
+                        checked: pane.highlightedPath === walk.name,
+                        onClick: () => {
+                          pane.setHighlightedPath(walk.name)
+                        },
+                      })),
+                    ],
+                  },
+                ]
+              : []),
+            ...(pane.layoutMode === 'walkrows' && pane.repeatChoices.length > 0
+              ? [
+                  {
+                    label: 'Repeat',
+                    subMenu: [
+                      {
+                        type: 'radio' as const,
+                        label: 'Whole window',
+                        checked: pane.repeatKey === '',
+                        onClick: () => {
+                          pane.setRepeatKey('')
+                        },
                       },
-                    })),
-                  ],
-                },
-              ]
-            : []),
-          ...(pane.hostPlacesX
-            ? []
-            : [
-                {
-                  label: 'Zoom in',
-                  onClick: () => {
-                    pane.zoom(1.5, pane.width / 2, pane.canvasHeight / 2)
+                      ...pane.repeatChoices.map(({ key, name, unit }) => ({
+                        type: 'radio' as const,
+                        label: `${name} · ${unit.toLocaleString()} bp unit`,
+                        checked: pane.repeatKey === key,
+                        onClick: () => {
+                          pane.setRepeatKey(key)
+                        },
+                      })),
+                    ],
                   },
-                },
-                {
-                  label: 'Zoom out',
-                  onClick: () => {
-                    pane.zoom(1 / 1.5, pane.width / 2, pane.canvasHeight / 2)
+                ]
+              : []),
+            ...(pane.hostPlacesX
+              ? []
+              : [
+                  {
+                    label: 'Zoom in',
+                    onClick: () => {
+                      pane.zoom(1.5, pane.width / 2, pane.canvasHeight / 2)
+                    },
                   },
-                },
-                {
-                  label: 'Zoom to fit',
-                  onClick: () => {
-                    pane.zoomToFit()
+                  {
+                    label: 'Zoom out',
+                    onClick: () => {
+                      pane.zoom(1 / 1.5, pane.width / 2, pane.canvasHeight / 2)
+                    },
                   },
-                },
-              ]),
-          {
-            type: 'checkbox',
-            label: 'Mark bubbles',
-            checked: pane.showBubbles,
-            onClick: () => {
-              pane.setShowBubbles(!pane.showBubbles)
-            },
-          },
-          {
-            type: 'checkbox',
-            label: 'Show deletion edges',
-            checked: pane.showDeletionEdges,
-            onClick: () => {
-              pane.setShowDeletionEdges(!pane.showDeletionEdges)
-            },
-          },
-          {
-            type: 'checkbox',
-            label: 'Genes on the backbone',
-            checked: pane.showGenes,
-            onClick: () => {
-              pane.setShowGenes(!pane.showGenes)
+                  {
+                    label: 'Zoom to fit',
+                    onClick: () => {
+                      pane.zoomToFit()
+                    },
+                  },
+                ]),
+            {
+              type: 'checkbox',
+              label: 'Mark bubbles',
+              checked: pane.showBubbles,
+              onClick: () => {
+                pane.setShowBubbles(!pane.showBubbles)
+              },
             },
-          },
-          {
-            label: 'Settings',
-            icon: SettingsIcon,
-            onClick: () => {
-              getSession(self).queueDialog(onClose => [
-                GraphSettingsDialog,
-                { model: pane, open: true, onClose },
-              ])
+            {
+              type: 'checkbox',
+              label: 'Show deletion edges',
+              checked: pane.showDeletionEdges,
+              onClick: () => {
+                pane.setShowDeletionEdges(!pane.showDeletionEdges)
+              },
             },
-          },
-        ]
-      },
-    }))
-    .actions(self => ({
-      setConfigured() {
-        self.configured = true
-      },
-      // The track's height is the pane's ceiling: a layout shorter than it
-      // takes only what it needs, and a drag on the handle moves the ceiling.
-      resizeHeight(distance: number) {
-        const before = self.height
-        const target = Math.max(before + distance, 40)
-        self.pane.setPaneHeight(target)
-        return target - before
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        const { pane } = self
-        if (!self.configured) {
-          pane.setLayoutMode(getConf(self, 'layoutMode'))
-          pane.setColorScheme(getConf(self, 'colorScheme'))
-          pane.setPaneHeight(getConf(self, 'height'))
-          self.setConfigured()
-        }
-        pane.adoptTrack(self.trackId)
-        pane.startHosting()
-        addDisposer(
-          self,
-          autorun(
-            () => {
-              const { host } = self
-              if (host) {
-                pane.setWidth(host.width)
-                pane.pairWithLinearView(host.id)
-              }
+            {
+              type: 'checkbox',
+              label: 'Genes on the backbone',
+              checked: pane.showGenes,
+              onClick: () => {
+                pane.setShowGenes(!pane.showGenes)
+              },
             },
-            { name: 'LinearGraphDisplayHost' },
-          ),
-        )
-        addDisposer(
-          self,
-          autorun(
-            () => {
-              const height = pane.canvasHeight
-              if (self.height !== height) {
-                self.setHeight(height)
-              }
+            {
+              label: 'Settings',
+              icon: SettingsIcon,
+              onClick: () => {
+                getSession(self).queueDialog(onClose => [
+                  GraphSettingsDialog,
+                  { model: pane, open: true, onClose },
+                ])
+              },
             },
-            { name: 'LinearGraphDisplayHeight' },
-          ),
-        )
-      },
-    }))
+          ]
+        },
+      }))
+      .actions(self => ({
+        // The config's slots the pane has not yet taken, then all of them.
+        applyConfig() {
+          const { pane, configured } = self
+          if (!configured.layoutMode) {
+            pane.setLayoutMode(getConf(self, 'layoutMode'))
+          }
+          if (!configured.colorScheme) {
+            pane.setColorScheme(getConf(self, 'colorScheme'))
+          }
+          if (!configured.height) {
+            pane.setPaneHeight(getConf(self, 'height'))
+          }
+          self.configured = {
+            layoutMode: true,
+            colorScheme: true,
+            height: true,
+          }
+        },
+        // The track's height is the pane's ceiling: a layout shorter than it
+        // takes only what it needs, and a drag on the handle moves the ceiling.
+        resizeHeight(distance: number) {
+          const before = self.height
+          const target = Math.max(before + distance, 40)
+          self.pane.setPaneHeight(target)
+          return target - before
+        },
+      }))
+      .actions(self => ({
+        afterAttach() {
+          const { pane } = self
+          self.applyConfig()
+          pane.adoptTrack(self.trackId)
+          // A GBZ track cuts for the lanes it names, as its lanes display
+          // draws them, unless a launch or a reader picked others.
+          if (
+            pane.subgraphHaplotypes === undefined &&
+            self.adapterConfig.type === 'GbzBaseSyntenyAdapter'
+          ) {
+            pane.setSubgraphHaplotypes(
+              trackLanes(self.parentTrack.configuration),
+            )
+          }
+          pane.startHosting()
+          addDisposer(
+            self,
+            autorun(
+              () => {
+                const { host } = self
+                if (host) {
+                  pane.setWidth(host.width)
+                  pane.pairWithLinearView(host.id)
+                }
+              },
+              { name: 'LinearGraphDisplayHost' },
+            ),
+          )
+          addDisposer(
+            self,
+            autorun(
+              () => {
+                const height = pane.canvasHeight
+                if (self.height !== height) {
+                  self.setHeight(height)
+                }
+              },
+              { name: 'LinearGraphDisplayHeight' },
+            ),
+          )
+        },
+      }))
+  )
 }
 
 export type LinearGraphDisplayStateModel = ReturnType<typeof stateModelFactory>

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.0.0'
+export const version = '4.0.3'

package/dist/chunks/LinearGraphDisplay-P7U6NCZF.js

@@ -1,2 +0,0 @@
-import{a as e,b as i}from"./chunk-SDTCVLC3.js";import"./chunk-A4ZWFDQY.js";import"./chunk-ZNGDWZ6Z.js";import"./chunk-OHT6UX4C.js";import"./chunk-OP7IRVG6.js";import"./chunk-F4C3BEPV.js";import{a as r,b as s,c as h}from"./chunk-XEJ47DLD.js";import{b as t}from"./chunk-FY3BTKY4.js";var p=t(h(),1),n=t(s(),1);var o=t(r(),1),m={position:"absolute",left:8,top:4,zIndex:5,background:"rgba(255,255,255,0.82)",padding:"0 4px",borderRadius:3},y=(0,n.observer)(function({model:l}){let{pane:a,height:d}=l;return(0,o.jsxs)("div",{"data-testid":"linear-graph-display",style:{position:"relative",width:a.width,height:d,overflow:"hidden"},children:[(0,o.jsx)(e,{model:a,toolbar:!1}),a.hasGraph?null:(0,o.jsx)(i,{model:a}),a.cutNote?(0,o.jsx)(p.Typography,{variant:"caption",color:"warning.main",style:m,"data-testid":"graph-cut-note",children:a.cutNote}):null]})}),g=y;export{g as default};
-//# sourceMappingURL=LinearGraphDisplay-P7U6NCZF.js.map