jbrowse-plugin-msaview 3.5.0 → 3.6.0

package/dist/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.js

@@ -8,6 +8,7 @@ import { useQueryRowName } from '../../useQueryRowName';
 import { getGeneDisplayName, getLinearGenomeView } from '../../util';
 import LaunchPanelContent from '../LaunchPanelContent';
 import QueryRowSelector from '../QueryRowSelector';
+import SequenceStatusMessage from '../SequenceStatus';
 import SubmitCancelActions from '../SubmitCancelActions';
 import TranscriptSelector from '../TranscriptSelector';
 import { useTranscriptSelection } from '../useTranscriptSelection';
@@ -26,7 +27,7 @@ const useStyles = makeStyles()({
         marginBottom: 20,
     },
 });
-const ManualMSALoader = observer(function PreLoadedMSA2({ model, feature, handleClose, }) {
+const ManualMSALoader = observer(function PreLoadedMSA2({ model, feature, handleClose, preferredTranscriptId, }) {
     const view = getLinearGenomeView(model);
     const { classes } = useStyles();
     const [launchViewError, setLaunchViewError] = useState();
@@ -35,8 +36,12 @@ const ManualMSALoader = observer(function PreLoadedMSA2({ model, feature, handle
     const [treeText, setTreeText] = useState('');
     const [msaFileLocation, setMsaFileLocation] = useState();
     const [treeFileLocation, setTreeFileLocation] = useState();
-    const transcriptSelection = useTranscriptSelection({ feature, view });
-    const { selectedTranscript, proteinSequence, error } = transcriptSelection;
+    const transcriptSelection = useTranscriptSelection({
+        feature,
+        view,
+        preferredTranscriptId,
+    });
+    const { selectedTranscript, proteinSequence, error, sequenceStatus } = transcriptSelection;
     const queryRow = useQueryRowName(msaText, proteinSequence);
     const e = launchViewError ?? error;
     return (React.createElement(React.Fragment, null,
@@ -58,7 +63,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({ model, feature, handle
                     } })))),
             React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection }),
             React.createElement(QueryRowSelector, { ...queryRow })),
-        React.createElement(SubmitCancelActions, { model: model, submitDisabled: !selectedTranscript ||
+        React.createElement(SubmitCancelActions, { model: model, hint: React.createElement(SequenceStatusMessage, { status: sequenceStatus }), submitDisabled: !selectedTranscript ||
                 (inputMethod === 'file' && !msaFileLocation) ||
                 (inputMethod === 'text' && !msaText.trim()), onSubmit: () => {
                 try {

package/dist/LaunchMsaView/components/OrthologQuery/OrthologPanel.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util';
-declare const OrthologPanel: ({ handleClose, feature, model, }: {
+declare const OrthologPanel: ({ handleClose, feature, model, preferredTranscriptId, }: {
     model: AbstractTrackModel;
     feature: Feature;
     handleClose: () => void;
+    /** the isoform the user right-clicked, preselected in the picker */
+    preferredTranscriptId?: string;
 }) => React.JSX.Element;
 export default OrthologPanel;

package/dist/LaunchMsaView/components/OrthologQuery/OrthologPanel.js

@@ -9,6 +9,7 @@ import { getGeneDisplayName, getGeneIdentifiers, getLinearGenomeView, getTranscr
 import MsaAlgorithmSelect from '../BlastQuery/MsaAlgorithmSelect';
 import { useStoredMsaAlgorithm } from '../BlastQuery/searchChoiceStorage';
 import LaunchPanelContent from '../LaunchPanelContent';
+import SequenceStatusMessage from '../SequenceStatus';
 import SubmitCancelActions from '../SubmitCancelActions';
 import TranscriptSelector from '../TranscriptSelector';
 import { useTranscriptSelection } from '../useTranscriptSelection';
@@ -20,12 +21,14 @@ const useStyles = makeStyles()({
         width: 180,
     },
 });
+// the N was literal: the helper text said "the closest N species" whatever the
+// box held
 const rowsHint = {
-    ncbi: 'the closest N species NCBI has',
-    panther: 'the closest N species PANTHER has',
-    uniref: 'one per species, reviewed entries first',
+    ncbi: rows => `the ${rows} closest species NCBI has`,
+    panther: rows => `the ${rows} closest species PANTHER has`,
+    uniref: rows => `${rows} rows, one per species, reviewed entries first`,
 };
-const OrthologPanel = observer(function ({ handleClose, feature, model, }) {
+const OrthologPanel = observer(function ({ handleClose, feature, model, preferredTranscriptId, }) {
     const { classes } = useStyles();
     const view = getLinearGenomeView(model);
     const [launchViewError, setLaunchViewError] = useState();
@@ -34,8 +37,12 @@ const OrthologPanel = observer(function ({ handleClose, feature, model, }) {
     const [msaAlgorithm, setMsaAlgorithm] = useStoredMsaAlgorithm();
     const [maxSpecies, setMaxSpecies] = useState(String(defaultMaxSpecies));
     const geneCandidates = useMemo(() => getGeneIdentifiers(feature), [feature]);
-    const transcriptSelection = useTranscriptSelection({ feature, view });
-    const { selectedTranscript, proteinSequence } = transcriptSelection;
+    const transcriptSelection = useTranscriptSelection({
+        feature,
+        view,
+        preferredTranscriptId,
+    });
+    const { selectedTranscript, proteinSequence, sequenceStatus } = transcriptSelection;
     const e = transcriptSelection.error ?? launchViewError;
     const rowCount = Number(maxSpecies);
     const rowCountValid = Number.isInteger(rowCount) && rowCount >= 2;
@@ -48,9 +55,11 @@ const OrthologPanel = observer(function ({ handleClose, feature, model, }) {
                 React.createElement(MsaAlgorithmSelect, { className: classes.selectField, value: msaAlgorithm, onChange: setMsaAlgorithm }),
                 React.createElement(TextField2, { variant: "outlined", label: "Rows to align", className: classes.selectField, type: "number", value: maxSpecies, onChange: event => {
                         setMaxSpecies(event.target.value);
-                    }, error: !rowCountValid, helperText: rowsHint[source] })),
+                    }, error: !rowCountValid, helperText: rowCountValid
+                        ? rowsHint[source](rowCount)
+                        : 'a whole number, 2 or more' })),
             React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection })),
-        React.createElement(SubmitCancelActions, { model: model, submitDisabled: !proteinSequence || !rowCountValid, onSubmit: () => {
+        React.createElement(SubmitCancelActions, { model: model, hint: React.createElement(SequenceStatusMessage, { status: sequenceStatus }), submitDisabled: !proteinSequence || !rowCountValid, onSubmit: () => {
                 try {
                     if (selectedTranscript) {
                         setLaunchViewError(undefined);

package/dist/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util';
-declare const PreLoadedMSA: ({ model, feature, handleClose, }: {
+declare const PreLoadedMSA: ({ model, feature, handleClose, preferredTranscriptId, }: {
     model: AbstractTrackModel;
     feature: Feature;
     handleClose: () => void;
+    /** the isoform the user right-clicked, preselected in the picker */
+    preferredTranscriptId?: string;
 }) => React.JSX.Element;
 export default PreLoadedMSA;

package/dist/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.js

@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui';
 import { getEnv, getSession } from '@jbrowse/core/util';
-import { MenuItem } from '@mui/material';
+import { MenuItem, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import TextField2 from '../../../components/TextField2';
 import { useFetch } from '../../../utils/useFetch';
-import { getGeneDisplayName, getLinearGenomeView } from '../../util';
+import { resolveQueryRowName, useQueryRowName } from '../../useQueryRowName';
+import { getGeneDisplayName, getLinearGenomeView, getTranscriptDisplayName, } from '../../util';
 import LaunchPanelContent from '../LaunchPanelContent';
+import QueryRowSelector from '../QueryRowSelector';
+import SequenceStatusMessage from '../SequenceStatus';
 import SubmitCancelActions from '../SubmitCancelActions';
 import TranscriptSelector from '../TranscriptSelector';
 import { useTranscriptSelection } from '../useTranscriptSelection';
@@ -19,7 +22,7 @@ const useStyles = makeStyles()({
         marginTop: 50,
     },
 });
-const PreLoadedMSA = observer(function ({ model, feature, handleClose, }) {
+const PreLoadedMSA = observer(function ({ model, feature, handleClose, preferredTranscriptId, }) {
     const session = getSession(model);
     const view = getLinearGenomeView(model);
     const { classes } = useStyles();
@@ -34,8 +37,9 @@ const PreLoadedMSA = observer(function ({ model, feature, handleClose, }) {
         feature,
         view,
         validIds: msaList,
+        preferredTranscriptId,
     });
-    const { selectedId, selectedTranscript } = transcriptSelection;
+    const { selectedId, selectedTranscript, proteinSequence, sequenceStatus } = transcriptSelection;
     const { data: msaData, isLoading: msaDataLoading, error: msaDataFetchError, } = useFetch(selectedId && selectedDataset && msaList
         ? `${selectedDataset.datasetId}-${selectedId}-msa`
         : null, () => fetchMSA({
@@ -43,6 +47,19 @@ const PreLoadedMSA = observer(function ({ model, feature, handleClose, }) {
         config: selectedDataset.adapter,
         pluginManager,
     }));
+    const msaText = useMemo(() => msaData?.map(r => `>${r.get('refName')}\n${r.get('seq')}`).join('\n') ??
+        '', [msaData]);
+    // The dataset's row for this transcript used to be assumed -- the launch
+    // named `<transcriptId>_<assembly>` and hoped the file agreed. Nothing
+    // checked, and a name the alignment does not carry fails silently: the view
+    // opens, renders, and never navigates. The row is found by sequence instead,
+    // the same way the Manual tab finds it.
+    const queryRow = useQueryRowName(msaText, proteinSequence);
+    // The name this panel used to launch with unconditionally. A dataset built to
+    // that convention does carry the row, so it is worth falling back to when the
+    // residues do not match closely enough to find it -- but only when the
+    // alignment really has it, which is the check the old code never made.
+    const querySeqName = resolveQueryRowName(queryRow, `${selectedId}_${assemblyNames[0] ?? ''}`);
     const e = msaListFetchError ??
         msaDataFetchError ??
         transcriptSelection.error ??
@@ -53,25 +70,26 @@ const PreLoadedMSA = observer(function ({ model, feature, handleClose, }) {
                     setSelectedDatasetId(event.target.value);
                 } }, datasets?.map(d => (React.createElement(MenuItem, { key: d.datasetId, value: d.datasetId }, d.name)))),
             selectedDataset ? (React.createElement("div", { className: classes.selectedContainer },
-                !msaListLoading && msaDataLoading ? (React.createElement(LoadingEllipses, { variant: "h6", message: `Loading MSA for (${selectedId})` })) : null,
+                !msaListLoading && msaDataLoading ? (React.createElement(LoadingEllipses, { variant: "h6", message: `Loading MSA for ${getTranscriptDisplayName(selectedTranscript) || selectedId}` })) : null,
                 msaListLoading ? (React.createElement(LoadingEllipses, { variant: "h6", message: `Loading available MSAs for (${selectedDataset.name})` })) : null,
                 msaList ? (React.createElement("div", null,
                     React.createElement(SanitizedHTML, { html: selectedDataset.description }),
-                    React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection }))) : null)) : null),
-        React.createElement(SubmitCancelActions, { model: model, submitDisabled: !selectedTranscript || !msaData?.length, onSubmit: () => {
+                    React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection }),
+                    msaText ? (React.createElement(QueryRowSelector, { ...queryRow, querySeqName: querySeqName })) : null)) : null)) : null),
+        React.createElement(SubmitCancelActions, { model: model, hint: msaDataLoading ? (React.createElement(LoadingEllipses, { message: "Loading alignment" })) : !!msaData?.length && !querySeqName ? (React.createElement(Typography, { color: "textSecondary", variant: "body2" }, "no row matches this transcript")) : (React.createElement(SequenceStatusMessage, { status: sequenceStatus })), 
+            // launching without a query row opens a view that renders and then
+            // never navigates, which reads as a broken feature rather than a
+            // dataset that does not cover this gene
+            submitDisabled: !selectedTranscript || !msaData?.length || !querySeqName, onSubmit: () => {
                 try {
-                    if (selectedTranscript && msaData) {
-                        const querySeqName = `${selectedId}_${assemblyNames[0]}`;
+                    if (selectedTranscript && msaText) {
                         preCalculatedLaunchView({
                             newViewTitle: getGeneDisplayName(selectedTranscript),
                             view,
                             querySeqName,
+                            querySeqOffset: queryRow.querySeqOffset,
                             feature: selectedTranscript,
-                            data: {
-                                msa: msaData
-                                    .map(r => `>${r.get('refName')}\n${r.get('seq')}`)
-                                    .join('\n'),
-                            },
+                            data: { msa: msaText },
                         });
                         handleClose();
                     }

package/dist/LaunchMsaView/components/PreLoadedMSA/preCalculatedLaunchView.d.ts

@@ -1,6 +1,6 @@
 import type { Feature } from '@jbrowse/core/util';
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-export declare function preCalculatedLaunchView({ newViewTitle, view, feature, data, querySeqName, }: {
+export declare function preCalculatedLaunchView({ newViewTitle, view, feature, data, querySeqName, querySeqOffset, }: {
     data: {
         msa: string;
     };
@@ -8,4 +8,6 @@ export declare function preCalculatedLaunchView({ newViewTitle, view, feature, d
     view: LinearGenomeViewModel;
     feature: Feature;
     querySeqName: string;
+    /** transcript residues before the query row's first residue */
+    querySeqOffset?: number;
 }): void;

package/dist/LaunchMsaView/components/PreLoadedMSA/preCalculatedLaunchView.js

@@ -1,12 +1,13 @@
 import { getSession } from '@jbrowse/core/util';
 import { launchMsaView } from '../../../utils/launchMsaView';
 import { readLaunchPlacement } from '../../../utils/workspaces';
-export function preCalculatedLaunchView({ newViewTitle, view, feature, data, querySeqName, }) {
+export function preCalculatedLaunchView({ newViewTitle, view, feature, data, querySeqName, querySeqOffset, }) {
     launchMsaView(getSession(view), {
         placement: readLaunchPlacement(),
         displayName: newViewTitle,
         treeAreaWidth: 200,
         querySeqName,
+        querySeqOffset,
         treeWidth: 100,
         drawNodeBubbles: false,
         labelsAlignRight: true,

package/dist/LaunchMsaView/components/SequenceStatus.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type SequenceStatus = 'loading' | 'ready' | 'missing' | 'error';
+/**
+ * Why Submit is grey. The query row is the selected transcript's translation,
+ * and fetching and translating it takes a round trip to the sequence adapter,
+ * so the button starts disabled on every panel — with nothing to distinguish
+ * "wait a moment" from "this gene has no protein and never will".
+ *
+ * An error says so through the panel's own ErrorMessage, so this stays quiet
+ * for that one rather than saying it twice.
+ */
+export default function SequenceStatusMessage({ status, }: {
+    status: SequenceStatus;
+}): React.JSX.Element | null;

package/dist/LaunchMsaView/components/SequenceStatus.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { Typography } from '@mui/material';
+/**
+ * Why Submit is grey. The query row is the selected transcript's translation,
+ * and fetching and translating it takes a round trip to the sequence adapter,
+ * so the button starts disabled on every panel — with nothing to distinguish
+ * "wait a moment" from "this gene has no protein and never will".
+ *
+ * An error says so through the panel's own ErrorMessage, so this stays quiet
+ * for that one rather than saying it twice.
+ */
+export default function SequenceStatusMessage({ status, }) {
+    return status === 'loading' ? (React.createElement(LoadingEllipses, { message: "Translating transcript" })) : status === 'missing' ? (React.createElement(Typography, { color: "textSecondary", variant: "body2" }, "no coding sequence to align")) : null;
+}

package/dist/LaunchMsaView/components/SubmitCancelActions.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { AbstractTrackModel } from '@jbrowse/core/util';
-export default function SubmitCancelActions({ onSubmit, onCancel, submitDisabled, submitLabel, cancelLabel, model, }: {
+export default function SubmitCancelActions({ onSubmit, onCancel, submitDisabled, hint, submitLabel, cancelLabel, model, }: {
     onSubmit: () => void;
     onCancel: () => void;
     submitDisabled?: boolean;
+    /** why Submit is grey, shown beside it */
+    hint?: React.ReactNode;
     submitLabel?: string;
     cancelLabel?: string;
     /** omitted by a panel that submits something other than a view launch */

package/dist/LaunchMsaView/components/SubmitCancelActions.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { Button, Checkbox, DialogActions, FormControlLabel, } from '@mui/material';
-import { readLaunchPlacement, sessionSupportsPlacement, writeLaunchPlacement, } from '../../utils/workspaces';
+import { sessionSupportsPlacement, writeLaunchPlacement, } from '../../utils/workspaces';
+import { useLaunchPlacement } from './launchPlacement';
 /**
  * Where the launch puts the view, offered wherever a launch is submitted.
  *
@@ -13,20 +14,31 @@ import { readLaunchPlacement, sessionSupportsPlacement, writeLaunchPlacement, }
  * release that places views its own way — because the box would do nothing
  * there and every launch would quietly ignore it.
  */
-function PlacementToggle({ model }) {
-    const session = getSession(model);
-    const [sideBySide, setSideBySide] = useState(() => readLaunchPlacement() === 'splitRight');
-    return sessionSupportsPlacement(session) ? (React.createElement(FormControlLabel, { label: "Open beside the genome view", control: React.createElement(Checkbox, { checked: sideBySide, onChange: event => {
-                const { checked } = event.target;
-                setSideBySide(checked);
-                writeLaunchPlacement(checked ? 'splitRight' : 'stack');
-            } }) })) : null;
+function PlacementToggle({ checked, onChange, }) {
+    return (React.createElement(FormControlLabel, { label: "Open beside the genome view", control: React.createElement(Checkbox, { checked: checked, onChange: event => {
+                onChange(event.target.checked);
+            } }) }));
 }
-export default function SubmitCancelActions({ onSubmit, onCancel, submitDisabled, submitLabel = 'Submit', cancelLabel = 'Cancel', model, }) {
+export default function SubmitCancelActions({ onSubmit, onCancel, submitDisabled, hint, submitLabel = 'Submit', cancelLabel = 'Cancel', model, }) {
+    const [sideBySide, setSideBySide] = useLaunchPlacement();
+    // The stored value is what the next launch reads, so it is written on submit
+    // rather than on the click: ticking the box and then pressing Cancel used to
+    // change where every future launch landed, from a dialog the user backed out
+    // of.
+    const offerPlacement = !!model && sessionSupportsPlacement(getSession(model));
     return (React.createElement(DialogActions, { sx: { flexWrap: 'wrap', rowGap: 1 } },
-        model ? React.createElement(PlacementToggle, { model: model }) : null,
-        React.createElement("div", { style: { display: 'flex', gap: 8, marginLeft: 'auto' } },
+        offerPlacement ? (React.createElement(PlacementToggle, { checked: sideBySide, onChange: setSideBySide })) : null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                marginLeft: 'auto',
+            } },
+            hint,
             React.createElement(Button, { sx: { flexShrink: 0 }, color: "primary", variant: "contained", disabled: submitDisabled, onClick: () => {
+                    if (offerPlacement) {
+                        writeLaunchPlacement(sideBySide ? 'splitRight' : 'stack');
+                    }
                     onSubmit();
                 } }, submitLabel),
             React.createElement(Button, { sx: { flexShrink: 0 }, color: "secondary", variant: "contained", onClick: () => {

package/dist/LaunchMsaView/components/SubmitCancelActions.test.js

@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import { LAUNCH_PLACEMENT_KEY } from '../../utils/workspaces';
 import SubmitCancelActions from './SubmitCancelActions';
+import { LaunchPlacementProvider } from './launchPlacement';
 // 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', () => ({
@@ -39,14 +40,43 @@ test('a panel that launches nothing passes no model, and gets no box', () => {
     render(React.createElement(SubmitCancelActions, { onSubmit: () => { }, onCancel: () => { } }));
     expect(toggle()).toBeNull();
 });
-test('clicking it writes the placement the next launch will read', () => {
+test('submitting writes the placement the launch will read', () => {
     render(React.createElement(SubmitCancelActions, { model: trackModel(tiling), onSubmit: () => { }, onCancel: () => { } }));
     toggle().click();
-    expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('stack');
     expect(toggle().checked).toBe(false);
+    screen.getByText('Submit').click();
+    expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('stack');
+});
+// the box is a property of this launch until it is launched; a dialog the user
+// backed out of should not have moved where every future one lands
+test('cancelling leaves the stored placement alone', () => {
+    render(React.createElement(SubmitCancelActions, { model: trackModel(tiling), onSubmit: () => { }, onCancel: () => { } }));
     toggle().click();
+    screen.getByText('Cancel').click();
+    expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBeNull();
+});
+// a host with no tiling never shows the box, so submitting there must not
+// overwrite the choice the user made on a host that does
+test('a host that cannot tile writes nothing on submit', () => {
+    localStorage.setItem(LAUNCH_PLACEMENT_KEY, 'splitRight');
+    render(React.createElement(SubmitCancelActions, { model: trackModel({}), onSubmit: () => { }, onCancel: () => { } }));
+    screen.getByText('Submit').click();
     expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('splitRight');
-    expect(toggle().checked).toBe(true);
+});
+// every visited tab stays mounted, so each has an actions row of its own; with
+// the answer held per row, ticking the box on one tab and submitting from
+// another wrote the other tab's stale one
+test('every tab in one dialog shares the answer', () => {
+    render(React.createElement(LaunchPlacementProvider, null,
+        React.createElement("div", { "data-testid": "tab-a" },
+            React.createElement(SubmitCancelActions, { model: trackModel(tiling), onSubmit: () => { }, onCancel: () => { } })),
+        React.createElement("div", { "data-testid": "tab-b" },
+            React.createElement(SubmitCancelActions, { model: trackModel(tiling), onSubmit: () => { }, onCancel: () => { }, submitLabel: "Launch" }))));
+    const boxes = screen.getAllByRole('checkbox');
+    boxes[0].click();
+    expect(boxes[1].checked).toBe(false);
+    screen.getByText('Launch').click();
+    expect(localStorage.getItem(LAUNCH_PLACEMENT_KEY)).toBe('stack');
 });
 test('a stored choice is what the box opens on', () => {
     localStorage.setItem(LAUNCH_PLACEMENT_KEY, 'stack');

package/dist/LaunchMsaView/components/TabPanel.js

@@ -1,5 +1,17 @@
-import React from 'react';
-// this is from MUI example
+import React, { useState } from 'react';
+// Once visited, a panel stays mounted and is hidden with the `hidden` attribute.
+// Unmounting it discarded whatever the user had typed and re-ran every fetch the
+// panel makes on the way back, so switching tabs to compare two of them cost an
+// EBI round trip and the pasted alignment.
+//
+// Lazy on first visit rather than mounted up front, because a panel mounts
+// fetches of its own: rendering all four on open would query the MSA dataset
+// adapter and the BLAST cache for tabs nobody looked at.
 export default function TabPanel({ children, value, index, ...other }) {
-    return (React.createElement("div", { role: "tabpanel", hidden: value !== index, ...other }, value === index ? children : null));
+    const active = value === index;
+    const [visited, setVisited] = useState(active);
+    if (active && !visited) {
+        setVisited(true);
+    }
+    return (React.createElement("div", { role: "tabpanel", hidden: !active, ...other }, visited || active ? children : null));
 }

package/dist/LaunchMsaView/components/TabPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/LaunchMsaView/components/TabPanel.test.js

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+import TabPanel from './TabPanel';
+afterEach(() => {
+    cleanup();
+});
+function Panels({ value }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TabPanel, { value: value, index: "a" },
+            React.createElement(Probe, { name: "a" })),
+        React.createElement(TabPanel, { value: value, index: "b" },
+            React.createElement(Probe, { name: "b" }))));
+}
+const mounted = vi.fn();
+function Probe({ name }) {
+    React.useEffect(() => {
+        mounted(name);
+    }, [name]);
+    return React.createElement("input", { defaultValue: name });
+}
+test('a visited panel keeps its state while another tab is shown', () => {
+    const { rerender } = render(React.createElement(Panels, { value: "a" }));
+    const typed = screen.getByDisplayValue('a');
+    typed.value = 'edited';
+    rerender(React.createElement(Panels, { value: "b" }));
+    rerender(React.createElement(Panels, { value: "a" }));
+    expect(screen.getByDisplayValue('edited')).toBeTruthy();
+    expect(mounted.mock.calls.filter(([n]) => n === 'a')).toHaveLength(1);
+});
+test('an unvisited panel does not mount, so it fetches nothing', () => {
+    mounted.mockClear();
+    render(React.createElement(Panels, { value: "a" }));
+    expect(mounted.mock.calls.map(([n]) => n)).toEqual(['a']);
+});

package/dist/LaunchMsaView/components/TranscriptSelector.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import type { SequenceStatus } from './SequenceStatus';
 import type { Feature } from '@jbrowse/core/util';
-export default function TranscriptSelector({ feature, options, selectedId, selectedTranscript, setSelectedId, proteinSequence, validIds, }: {
+export default function TranscriptSelector({ feature, options, selectedId, selectedTranscript, setSelectedId, proteinSequence, sequenceStatus, validIds, }: {
     feature: Feature;
     options: Feature[];
     selectedId: string;
     selectedTranscript: Feature | undefined;
     setSelectedId: (transcriptId: string) => void;
     proteinSequence: string | undefined;
+    sequenceStatus?: SequenceStatus;
     validIds?: string[];
 }): React.JSX.Element;

package/dist/LaunchMsaView/components/TranscriptSelector.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles()({
         marginLeft: 20,
     },
 });
-export default function TranscriptSelector({ feature, options, selectedId, selectedTranscript, setSelectedId, proteinSequence, validIds, }) {
+export default function TranscriptSelector({ feature, options, selectedId, selectedTranscript, setSelectedId, proteinSequence, sequenceStatus = 'ready', validIds, }) {
     const { classes } = useStyles();
     const [showSequence, setShowSequence] = useState(false);
     return (React.createElement(React.Fragment, null,
@@ -48,5 +48,7 @@ export default function TranscriptSelector({ feature, options, selectedId, selec
                     } }, showSequence ? 'Hide sequence' : 'Show sequence'))),
         showSequence ? (React.createElement(ReadOnlyTextField2, { value: proteinSequence
                 ? `>${getTranscriptDisplayName(selectedTranscript)}\n${proteinSequence}`
-                : 'Loading...' })) : null));
+                : sequenceStatus === 'missing'
+                    ? 'This transcript has no coding sequence, so there is nothing to translate.'
+                    : 'Loading...' })) : null));
 }

package/dist/LaunchMsaView/components/calculateProteinSequence.d.ts

@@ -11,7 +11,10 @@ export declare function revlist(list: Feat[], seqlen: number): {
     type?: string;
     phase?: number;
 }[];
-export declare function getProteinSequenceFromFeature({ feature, seq, }: {
+export declare function getProteinSequenceFromFeature({ feature, seq, assemblyGeneticCodeId, }: {
     seq: string;
     feature: Feature;
+    /** the assembly's code for the feature's contig, `{ chrM: 2 }` in hub
+     * configs; a transl_table on the feature wins */
+    assemblyGeneticCodeId?: number;
 }): string;

package/dist/LaunchMsaView/components/calculateProteinSequence.js

@@ -1,8 +1,9 @@
-import { dedupe, revcom } from '@jbrowse/core/util';
+import { revcom } from '@jbrowse/core/util';
 import { convertCodingSequenceToPeptides } from '@jbrowse/core/util/convertCodingSequenceToPeptides';
-import { getGeneticCode, parseTranslTable } from './geneticCodes';
-// `@jbrowse/core/util/convertCodingSequenceToPeptides` is a deep path, so unlike
-// the `@jbrowse/core/util` barrel it is absent from ReExports and gets bundled
+import { getGeneticCode, parseTranslTable, } from '@jbrowse/core/util/geneticCodes';
+// `@jbrowse/core/util/convertCodingSequenceToPeptides` and
+// `@jbrowse/core/util/geneticCodes` are deep paths, so unlike the
+// `@jbrowse/core/util` barrel they are absent from ReExports and get bundled
 // rather than resolved out of the host's JBrowseExports. That is what makes
 // reusing core's translation safe across every host a config names: this module
 // previously built its codon table at module scope from the barrel's
@@ -21,6 +22,13 @@ export function calculateProteinSequence({ cds, sequence, geneticCodeId, }) {
         codonTable,
     });
 }
+// The CDS list is sorted by start, so adjacent comparison is the whole job.
+function cdsId(feat) {
+    return `${feat.start}-${feat.end}`;
+}
+function dedupe(list) {
+    return list.filter((item, pos, ary) => !pos || cdsId(item) !== cdsId(ary[pos - 1]));
+}
 export function revlist(list, seqlen) {
     return list
         .map(sub => ({
@@ -30,7 +38,7 @@ export function revlist(list, seqlen) {
     }))
         .toSorted((a, b) => a.start - b.start);
 }
-export function getProteinSequenceFromFeature({ feature, seq, }) {
+export function getProteinSequenceFromFeature({ feature, seq, assemblyGeneticCodeId, }) {
     const { subfeatures, start, strand } = feature.toJSON();
     const cds = dedupe(subfeatures
         ?.toSorted((a, b) => a.start - b.start)
@@ -39,15 +47,17 @@ export function getProteinSequenceFromFeature({ feature, seq, }) {
         start: sub.start - start,
         end: sub.end - start,
     }))
-        .filter(subfeature => subfeature.type === 'CDS') ?? [], feat => `${feat.start}-${feat.end}`);
-    // a mitochondrial gene declares e.g. transl_table=2, so it translates with
-    // NCBI table 2 rather than the standard code. GFF3 usually carries the
-    // attribute on the CDS rather than the transcript, so check both.
+        .filter(subfeature => subfeature.type === 'CDS') ?? []);
+    // RefSeq declares transl_table=2 on a mitochondrial CDS, usually on the CDS
+    // rather than the transcript. GENCODE and UCSC declare nothing, so without
+    // the assembly's code all 13 human mitochondrial proteins read TGA as a stop
+    // and ATA as I.
     const cdsSubfeature = feature
         .get('subfeatures')
         ?.find((f) => f.get('type')?.toLowerCase() === 'cds');
     const geneticCodeId = parseTranslTable(feature.get('transl_table')) ??
-        parseTranslTable(cdsSubfeature?.get('transl_table'));
+        parseTranslTable(cdsSubfeature?.get('transl_table')) ??
+        assemblyGeneticCodeId;
     return calculateProteinSequence({
         cds: strand === -1 ? revlist(cds, seq.length) : cds,
         sequence: strand === -1 ? revcom(seq) : seq,

package/dist/LaunchMsaView/components/fetchSeq.d.ts

@@ -5,4 +5,7 @@ export declare function fetchSeq({ start, end, refName, session, assemblyName, }
     refName: string;
     assemblyName: string;
     session: AbstractSessionModel;
-}): Promise<string>;
+}): Promise<{
+    seq: string;
+    assemblyGeneticCodeId: number | undefined;
+}>;

package/dist/LaunchMsaView/components/fetchSeq.js

@@ -6,17 +6,27 @@ export async function fetchSeq({ start, end, refName, session, assemblyName, })
         throw new Error('assembly not found');
     }
     const sessionId = 'getSequence';
-    const feats = (await rpcManager.call(sessionId, 'CoreGetFeatures', {
+    // a named object keeps sessionId, which v4 hosts read from the args
+    const args = {
         adapterConfig: getConf(assembly, ['sequence', 'adapter']),
         sessionId,
         regions: [
             {
                 start,
                 end,
-                refName: assembly.getCanonicalRefName(refName),
+                refName: assembly.getCanonicalRefName(refName) ?? refName,
                 assemblyName,
             },
         ],
-    }));
-    return feats[0]?.get('seq') ?? '';
+    };
+    const feats = await rpcManager.call(sessionId, 'CoreGetFeatures', args);
+    return {
+        seq: feats[0]?.get('seq') ?? '',
+        // travels with the sequence because the caller needs both to translate, and
+        // resolving the assembly twice to get them is the shape that lost it
+        assemblyGeneticCodeId: geneticCodeId(assembly, refName),
+    };
+}
+function geneticCodeId(assembly, refName) {
+    return assembly.getGeneticCodeId?.(refName);
 }

package/dist/LaunchMsaView/components/launchPlacement.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type PlacementState = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export declare function LaunchPlacementProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** the dialog's answer, or a private one for a panel rendered outside it */
+export declare function useLaunchPlacement(): PlacementState;
+export {};