jbrowse-plugin-msaview 3.1.0 → 3.3.0

package/src/LaunchMsaView/components/BlastQuery/blastLaunchView.ts

@@ -1,5 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { launchMsaView } from '../../../utils/launchMsaView'
+import { readLaunchPlacement } from '../../../utils/workspaces'
+
 import type { BlastParams } from '../../../MsaViewPanel/model'
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { Feature } from '@jbrowse/core/util'
@@ -16,8 +19,8 @@ export function blastLaunchView({
   feature: Feature
   blastParams: BlastParams
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),
@@ -39,8 +42,8 @@ export function blastLaunchViewFromCache({
   cached: CachedBlastResult
   connectedFeature?: ReturnType<Feature['toJSON']>
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature,

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -137,6 +137,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
       </LaunchPanelContent>
 
       <SubmitCancelActions
+        model={model}
         submitDisabled={
           !selectedTranscript ||
           (inputMethod === 'file' && !msaFileLocation) ||

package/src/LaunchMsaView/components/ManualMSALoader/launchView.ts

@@ -1,5 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { launchMsaView } from '../../../utils/launchMsaView'
+import { readLaunchPlacement } from '../../../utils/workspaces'
+
 import type { Feature, FileLocation } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -23,8 +26,8 @@ export function launchView({
     tree?: string
   }
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),

package/src/LaunchMsaView/components/OrthologQuery/OrthologPanel.tsx

@@ -4,10 +4,14 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import OrthologSourceSelect, {
+  ORTHOLOG_SOURCE_STORAGE_KEY,
+} from './OrthologSourceSelect'
 import QuerySpeciesSelect from './QuerySpeciesSelect'
 import { orthologLaunchView } from './orthologLaunchView'
 import TextField2 from '../../../components/TextField2'
 import { defaultMaxSpecies } from '../../../utils/ncbiOrthologs'
+import { useLocalStorage } from '../../../utils/useLocalStorage'
 import {
   getGeneDisplayName,
   getGeneIdentifiers,
@@ -20,6 +24,7 @@ import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
+import type { OrthologSource } from '../../../MsaViewPanel/model'
 import type { MsaAlgorithm } from '../BlastQuery/consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
@@ -42,6 +47,10 @@ const OrthologPanel = observer(function ({
   const view = getLinearGenomeView(model)
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [taxId, setTaxId] = useState(9606)
+  const [source, setSource] = useLocalStorage<OrthologSource>(
+    ORTHOLOG_SOURCE_STORAGE_KEY,
+    'ncbi',
+  )
   const [msaAlgorithm, setMsaAlgorithm] = useState<MsaAlgorithm>('clustalo')
   const [maxSpecies, setMaxSpecies] = useState(String(defaultMaxSpecies))
 
@@ -65,11 +74,17 @@ const OrthologPanel = observer(function ({
             instant, and it is now the aligner that costs the wait, about half a
             second per row. */}
         <Typography variant="body2">
-          NCBI&apos;s precomputed orthologs, one gene per species, looked up
-          rather than searched for. No BLAST job to queue.
+          Precomputed orthologs, one gene per species, looked up rather than
+          searched for. No BLAST job to queue.
         </Typography>
 
         <div>
+          <OrthologSourceSelect
+            className={classes.selectField}
+            value={source}
+            onChange={setSource}
+          />
+
           <QuerySpeciesSelect
             className={classes.selectField}
             value={taxId}
@@ -93,14 +108,14 @@ const OrthologPanel = observer(function ({
               setMaxSpecies(event.target.value)
             }}
             error={!rowCountValid}
-            helperText="the closest N species NCBI has"
+            helperText={`the closest N species ${source === 'panther' ? 'PANTHER' : 'NCBI'} has`}
           />
         </div>
 
         <TranscriptSelector feature={feature} {...transcriptSelection} />
-
       </LaunchPanelContent>
       <SubmitCancelActions
+        model={model}
         submitDisabled={!proteinSequence || !rowCountValid}
         onSubmit={() => {
           try {
@@ -112,6 +127,7 @@ const OrthologPanel = observer(function ({
                 newViewTitle: `Orthologs - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
                 orthologParams: {
                   taxId,
+                  source,
                   maxSpecies: rowCount,
                   geneCandidates,
                   msaAlgorithm,

package/src/LaunchMsaView/components/OrthologQuery/OrthologSourceSelect.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { MenuItem } from '@mui/material'
+
+import TextField2 from '../../../components/TextField2'
+
+import type { OrthologSource } from '../../../MsaViewPanel/model'
+
+export const ORTHOLOG_SOURCE_STORAGE_KEY = 'msaview-ortholog-source'
+
+export const orthologSourceLabels: Record<OrthologSource, string> = {
+  ncbi: 'NCBI orthologs',
+  panther: 'PANTHER',
+}
+
+// Which species a source can answer for, in the words a reader picking one
+// needs: NCBI's ortholog sets stop at vertebrates and insects, PANTHER's run
+// from human to yeast and Arabidopsis.
+const hints: Record<OrthologSource, string> = {
+  ncbi: 'vertebrates and insects',
+  panther: 'also yeast, worm, fly and plants',
+}
+
+export default function OrthologSourceSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value: OrthologSource
+  onChange: (val: OrthologSource) => void
+  className?: string
+}) {
+  return (
+    <TextField2
+      variant="outlined"
+      label="Source"
+      className={className}
+      select
+      value={value}
+      helperText={hints[value]}
+      onChange={event => {
+        onChange(event.target.value as OrthologSource)
+      }}
+    >
+      {(Object.keys(orthologSourceLabels) as OrthologSource[]).map(val => (
+        <MenuItem value={val} key={val}>
+          {orthologSourceLabels[val]}
+        </MenuItem>
+      ))}
+    </TextField2>
+  )
+}

package/src/LaunchMsaView/components/OrthologQuery/orthologLaunchView.ts

@@ -1,5 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { launchMsaView } from '../../../utils/launchMsaView'
+import { readLaunchPlacement } from '../../../utils/workspaces'
+
 import type { OrthologParams } from '../../../MsaViewPanel/model'
 import type { Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -15,8 +18,8 @@ export function orthologLaunchView({
   feature: Feature
   orthologParams: OrthologParams
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),

package/src/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.tsx

@@ -130,6 +130,7 @@ const PreLoadedMSA = observer(function ({
       </LaunchPanelContent>
 
       <SubmitCancelActions
+        model={model}
         submitDisabled={!selectedTranscript || !msaData?.length}
         onSubmit={() => {
           try {

package/src/LaunchMsaView/components/PreLoadedMSA/preCalculatedLaunchView.ts

@@ -1,5 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { launchMsaView } from '../../../utils/launchMsaView'
+import { readLaunchPlacement } from '../../../utils/workspaces'
+
 import type { Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -16,8 +19,8 @@ export function preCalculatedLaunchView({
   feature: Feature
   querySeqName: string
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     treeAreaWidth: 200,
     querySeqName,

package/src/LaunchMsaView/components/SubmitCancelActions.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import React from 'react'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, expect, test, vi } from 'vitest'
+
+import SubmitCancelActions from './SubmitCancelActions'
+import { LAUNCH_PLACEMENT_KEY } from '../../utils/workspaces'
+
+import type { AbstractTrackModel } from '@jbrowse/core/util'
+
+// getSession walks the MST tree, and this component only wants the two actions
+// off the far end of that walk
+vi.mock('@jbrowse/core/util', () => ({
+  getSession: (model: { session: unknown }) => model.session,
+}))
+
+function trackModel(session: Record<string, unknown>) {
+  return { session } as unknown as AbstractTrackModel
+}
+
+const tiling = { setUseWorkspaces() {}, setPendingMove() {} }
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+function toggle() {
+  return screen.queryByRole('checkbox')
+}
+
+test('a host that can tile offers the choice, checked by default', () => {
+  render(
+    <SubmitCancelActions
+      model={trackModel(tiling)}
+      onSubmit={() => {}}
+      onCancel={() => {}}
+    />,
+  )
+  expect(toggle()).toBeTruthy()
+  expect((toggle() as HTMLInputElement).checked).toBe(true)
+  expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBeNull()
+})
+
+// the box would do nothing on an embedded session, and a control that silently
+// does nothing is worse than one that is not there
+test('a host that cannot tile does not offer it', () => {
+  render(
+    <SubmitCancelActions
+      model={trackModel({})}
+      onSubmit={() => {}}
+      onCancel={() => {}}
+    />,
+  )
+  expect(toggle()).toBeNull()
+  expect(screen.getByText('Submit')).toBeTruthy()
+})
+
+test('a panel that launches nothing passes no model, and gets no box', () => {
+  render(<SubmitCancelActions onSubmit={() => {}} onCancel={() => {}} />)
+  expect(toggle()).toBeNull()
+})
+
+test('clicking it writes the placement the next launch will read', () => {
+  render(
+    <SubmitCancelActions
+      model={trackModel(tiling)}
+      onSubmit={() => {}}
+      onCancel={() => {}}
+    />,
+  )
+  toggle()!.click()
+  expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('stack')
+  expect((toggle() as HTMLInputElement).checked).toBe(false)
+
+  toggle()!.click()
+  expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('splitRight')
+  expect((toggle() as HTMLInputElement).checked).toBe(true)
+})
+
+test('a stored choice is what the box opens on', () => {
+  localStorage.setItem(LAUNCH_PLACEMENT_KEY, 'stack')
+  render(
+    <SubmitCancelActions
+      model={trackModel(tiling)}
+      onSubmit={() => {}}
+      onCancel={() => {}}
+    />,
+  )
+  expect((toggle() as HTMLInputElement).checked).toBe(false)
+})

package/src/LaunchMsaView/components/SubmitCancelActions.tsx

@@ -1,6 +1,53 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import { Button, DialogActions } from '@mui/material'
+import { getSession } from '@jbrowse/core/util'
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  FormControlLabel,
+} from '@mui/material'
+
+import {
+  readLaunchPlacement,
+  sessionSupportsPlacement,
+  writeLaunchPlacement,
+} from '../../utils/workspaces'
+
+import type { AbstractTrackModel } from '@jbrowse/core/util'
+
+/**
+ * Where the launch puts the view, offered wherever a launch is submitted.
+ *
+ * A checkbox rather than a menu of the three placements: the choice a reader
+ * has at this point is "beside the genome view or under it", and `newTab` is a
+ * spec's to state, not a thing to pick before you have seen the alignment.
+ *
+ * Absent entirely on a host that cannot tile — an embedded session, or a
+ * release that places views its own way — because the box would do nothing
+ * there and every launch would quietly ignore it.
+ */
+function PlacementToggle({ model }: { model: AbstractTrackModel }) {
+  const session = getSession(model)
+  const [sideBySide, setSideBySide] = useState(
+    () => readLaunchPlacement() === 'splitRight',
+  )
+  return sessionSupportsPlacement(session) ? (
+    <FormControlLabel
+      label="Open beside the genome view"
+      control={
+        <Checkbox
+          checked={sideBySide}
+          onChange={event => {
+            const { checked } = event.target
+            setSideBySide(checked)
+            writeLaunchPlacement(checked ? 'splitRight' : 'stack')
+          }}
+        />
+      }
+    />
+  ) : null
+}
 
 export default function SubmitCancelActions({
   onSubmit,
@@ -8,34 +55,45 @@ export default function SubmitCancelActions({
   submitDisabled,
   submitLabel = 'Submit',
   cancelLabel = 'Cancel',
+  model,
 }: {
   onSubmit: () => void
   onCancel: () => void
   submitDisabled?: boolean
   submitLabel?: string
   cancelLabel?: string
+  /** omitted by a panel that submits something other than a view launch */
+  model?: AbstractTrackModel
 }) {
   return (
-    <DialogActions>
-      <Button
-        color="primary"
-        variant="contained"
-        disabled={submitDisabled}
-        onClick={() => {
-          onSubmit()
-        }}
-      >
-        {submitLabel}
-      </Button>
-      <Button
-        color="secondary"
-        variant="contained"
-        onClick={() => {
-          onCancel()
-        }}
-      >
-        {cancelLabel}
-      </Button>
+    // The buttons are one child rather than two, so a dialog too narrow for
+    // the whole row wraps them together underneath the option instead of
+    // breaking Cancel away from Submit or shrinking both out of shape.
+    <DialogActions sx={{ flexWrap: 'wrap', rowGap: 1 }}>
+      {model ? <PlacementToggle model={model} /> : null}
+      <div style={{ display: 'flex', gap: 8, marginLeft: 'auto' }}>
+        <Button
+          sx={{ flexShrink: 0 }}
+          color="primary"
+          variant="contained"
+          disabled={submitDisabled}
+          onClick={() => {
+            onSubmit()
+          }}
+        >
+          {submitLabel}
+        </Button>
+        <Button
+          sx={{ flexShrink: 0 }}
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          {cancelLabel}
+        </Button>
+      </div>
     </DialogActions>
   )
 }

package/src/LaunchMsaViewExtensionPoint/index.ts

@@ -1,4 +1,7 @@
+import { launchMsaView } from '../utils/launchMsaView'
+
 import type { OrthologParams } from '../MsaViewPanel/model'
+import type { MsaViewPlacement } from '../utils/workspaces'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type { AbstractSessionModel } from '@jbrowse/core/util'
 
@@ -39,6 +42,23 @@ interface LaunchMsaViewArgs {
    * snapshot property passes through the same way.
    */
   allowedGappyness?: number
+  /**
+   * Where the view lands: `stack` (default), `splitRight` or `newTab`. The
+   * declarative half of the launch — a link states the arrangement it wants
+   * instead of the reader dragging the view into place.
+   *
+   * The default is `stack` and has to stay `stack`: it is what every link
+   * written before this key existed already does, and the only thing an
+   * embedded session can do. The launch DIALOG defaults to `splitRight`
+   * instead (see `DEFAULT_LAUNCH_PLACEMENT`), because a launch from a gene
+   * feature is a connected pair and reads as a split.
+   *
+   * A spec that arranges more than these two views should use the host's own
+   * `layout` key instead, which states the whole tree and is applied after
+   * every view in the spec has launched. Both may be given; `layout` wins,
+   * being the later and more specific statement.
+   */
+  placement?: MsaViewPlacement
 }
 
 export default function LaunchMsaViewExtensionPointF(
@@ -76,8 +96,7 @@ export default function LaunchMsaViewExtensionPointF(
       // directly, and so is orthologParams (the model's own autorun picks it up).
       // Only sources needing launch-time resolution go through `init`: msaUrl
       // (AlphaFold sniff) and the name-indexed bgzip block (no native loader).
-      session.addView('MsaView', {
-        type: 'MsaView',
+      launchMsaView(session, {
         ...rest,
         data,
         ...(treeFileLocation

package/src/MsaViewPanel/doLaunchOrthologs.test.ts

@@ -8,6 +8,7 @@ import {
   fetchProteinForGene,
   resolveGeneId,
 } from '../utils/ncbiOrthologs'
+import { fetchPantherOrthologs } from '../utils/pantherOrthologs'
 import { fetchTaxonomyInfo } from '../utils/taxonomyNames'
 
 import type { JBrowsePluginMsaViewModel } from './model'
@@ -24,12 +25,16 @@ vi.mock('../utils/ncbiOrthologs', async importOriginal => ({
   fetchProteinForGene: vi.fn(),
   fetchOrthologRows: vi.fn(),
 }))
+vi.mock('../utils/pantherOrthologs', () => ({
+  fetchPantherOrthologs: vi.fn(),
+}))
 vi.mock('../utils/msa', () => ({ launchMSA: vi.fn() }))
 vi.mock('../utils/taxonomyNames', () => ({ fetchTaxonomyInfo: vi.fn() }))
 
 const mockResolveGeneId = vi.mocked(resolveGeneId)
 const mockFetchProtein = vi.mocked(fetchProteinForGene)
 const mockFetchRows = vi.mocked(fetchOrthologRows)
+const mockFetchPanther = vi.mocked(fetchPantherOrthologs)
 const mockLaunchMSA = vi.mocked(launchMSA)
 const mockFetchTaxonomy = vi.mocked(fetchTaxonomyInfo)
 
@@ -245,3 +250,115 @@ describe('the Accession that drives the domain overlay', () => {
     expect(queryMetadata(result).Accession).toBeUndefined()
   })
 })
+
+// The second source. What is under test is the dispatch and what the PANTHER
+// result becomes on the query row -- the rows themselves are shaped upstream,
+// and the tail of the launch (labels, aligner, metadata) is the same code the
+// NCBI tests above already cover.
+describe('the PANTHER source', () => {
+  const YEAST = 559292
+  const found = {
+    matched: 'CDC28',
+    query: {
+      code: 'YEAST',
+      accession: 'P00546',
+      geneRef: 'SGD=S000000364',
+      sequence: 'MSGELANYKRLEKVGEGTYGVVYKA',
+    },
+    rows: [
+      {
+        taxId: HUMAN,
+        label: 'human',
+        scientificName: 'Homo sapiens',
+        commonName: 'human',
+        geneId: 'HGNC=1771',
+        protein: 'P24941',
+        sequence: 'MENFQKVEKIGEGTYGVVYKARNK',
+      },
+    ] as OrthologRow[],
+  }
+
+  beforeEach(() => {
+    mockFetchPanther.mockResolvedValue(found)
+    mockFetchTaxonomy.mockResolvedValue(
+      new Map([[YEAST, { sciname: 'Saccharomyces cerevisiae' }]]),
+    )
+  })
+
+  test('source omitted is NCBI, so an old launch never reaches PANTHER', async () => {
+    await doLaunchOrthologs({ self: makeModel(params()) })
+    expect(mockFetchPanther).not.toHaveBeenCalled()
+    expect(mockResolveGeneId).toHaveBeenCalled()
+  })
+
+  test('source panther asks PANTHER with the same species semantics, and skips NCBI', async () => {
+    await doLaunchOrthologs({
+      self: makeModel({
+        taxId: YEAST,
+        source: 'panther',
+        geneCandidates: ['CDC28'],
+        msaAlgorithm: 'clustalo',
+        taxa: [HUMAN, YEAST],
+        maxSpecies: 7,
+      }),
+    })
+    expect(mockResolveGeneId).not.toHaveBeenCalled()
+    expect(mockFetchRows).not.toHaveBeenCalled()
+    const { candidates, taxId, taxa, exclude, limit } =
+      mockFetchPanther.mock.calls[0]![0]
+    expect(candidates).toEqual(['CDC28'])
+    expect(taxId).toBe(YEAST)
+    expect([...taxa!]).toEqual([HUMAN, YEAST])
+    expect(exclude).toBe(YEAST)
+    expect(limit).toBe(7)
+  })
+
+  test("the query row is PANTHER's own entry for the gene when no sequence was supplied, and carries its UniProt accession for the domain overlay", async () => {
+    const result = await doLaunchOrthologs({
+      self: makeModel({
+        taxId: YEAST,
+        source: 'panther',
+        geneCandidates: ['CDC28'],
+        msaAlgorithm: 'clustalo',
+      }),
+    })
+    expect(queryRowName()).toBe('Saccharomyces_cerevisiae_query')
+    expect(queryRowSent()).toBe(found.query.sequence)
+    expect(queryMetadata(result)).toEqual({
+      'Gene ID': 'SGD=S000000364',
+      Accession: 'P00546',
+    })
+    expect(JSON.parse(result.treeMetadata).human).toMatchObject({
+      Accession: 'P24941',
+      'Gene ID': 'HGNC=1771',
+    })
+  })
+
+  test('a supplied sequence still wins, and a different isoform earns no Accession', async () => {
+    const result = await doLaunchOrthologs({
+      self: makeModel({
+        taxId: YEAST,
+        source: 'panther',
+        geneCandidates: ['CDC28'],
+        msaAlgorithm: 'clustalo',
+        proteinSequence: 'MDIFFERENTISOFORM',
+      }),
+    })
+    expect(queryRowSent()).toBe('MDIFFERENTISOFORM')
+    expect(queryMetadata(result).Accession).toBeUndefined()
+  })
+
+  test('names PANTHER when it has no protein for the query row', async () => {
+    mockFetchPanther.mockResolvedValue({ ...found, query: undefined })
+    await expect(
+      doLaunchOrthologs({
+        self: makeModel({
+          taxId: YEAST,
+          source: 'panther',
+          geneCandidates: ['CDC28'],
+          msaAlgorithm: 'clustalo',
+        }),
+      }),
+    ).rejects.toThrow(/PANTHER returned no representative protein/)
+  })
+})