jbrowse-plugin-msaview 3.1.0 → 3.2.0

package/dist/utils/launchMsaView.d.ts

@@ -0,0 +1,19 @@
+import type { MsaViewPlacement } from './workspaces';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * A launch, stated: what the view is, and where it goes. Everything but
+ * `placement` is a react-msaview or plugin-model snapshot property, passed
+ * through untouched so this never becomes a list that has to grow.
+ */
+export interface MsaViewLaunchSpec extends Record<string, unknown> {
+    /** default `stack`, the only thing an embedded session can do */
+    placement?: MsaViewPlacement;
+}
+/**
+ * The one place a launch adds an MSA view -- the dialog's four tabs, the Add
+ * menu, and the `LaunchView-MsaView` extension point a session spec arrives on
+ * all come through here. Each of them used to run its own `addView` and none
+ * placed the result, which is how a launch from a gene feature landed stacked
+ * under the very genome view it was connected to.
+ */
+export declare function launchMsaView(session: AbstractSessionModel, { placement, ...snapshot }: MsaViewLaunchSpec): import("@jbrowse/core/util").AbstractViewModel;

package/dist/utils/launchMsaView.js

@@ -0,0 +1,13 @@
+import { placeMsaView } from './workspaces';
+/**
+ * The one place a launch adds an MSA view -- the dialog's four tabs, the Add
+ * menu, and the `LaunchView-MsaView` extension point a session spec arrives on
+ * all come through here. Each of them used to run its own `addView` and none
+ * placed the result, which is how a launch from a gene feature landed stacked
+ * under the very genome view it was connected to.
+ */
+export function launchMsaView(session, { placement = 'stack', ...snapshot }) {
+    const view = session.addView('MsaView', { type: 'MsaView', ...snapshot });
+    placeMsaView(session, view.id, placement);
+    return view;
+}

package/dist/utils/workspaces.d.ts

@@ -0,0 +1,34 @@
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * Where a launched MSA view lands. Every launch names one of these and stops
+ * there, so a host that arranges views differently is one function to teach.
+ *
+ *   stack       append below whatever is on screen
+ *   splitRight  its own cell to the right, beside the view it is connected to
+ *   newTab      its own tab in the current cell
+ */
+export type MsaViewPlacement = 'stack' | 'splitRight' | 'newTab';
+/**
+ * What the dialog does unasked. Side-by-side, because a launch from a gene
+ * feature sets `connectedViewId`: the pair shares a hover and a highlight, and
+ * reads as a split. A session spec defaults to `stack` instead.
+ */
+export declare const DEFAULT_LAUNCH_PLACEMENT: MsaViewPlacement;
+export declare const LAUNCH_PLACEMENT_KEY = "msaView-launchPlacement";
+export declare function resetWorkspacesWarning(): void;
+/**
+ * Whether this host can honor anything other than `stack`. Silent: the dialog
+ * asks on every render, and only a launch is worth warning about.
+ */
+export declare function sessionSupportsPlacement(session: AbstractSessionModel): boolean;
+/**
+ * Put a freshly added view where the launch said to. `stack` is a placement
+ * rather than the absence of one, so no caller has to ask what host it is on.
+ */
+export declare function placeMsaView(session: AbstractSessionModel, viewId: string, placement: MsaViewPlacement): void;
+/**
+ * The dialog's own remembered choice — not the host's preferences system, which
+ * records whether the user likes workspaces and does not exist everywhere.
+ */
+export declare function readLaunchPlacement(): MsaViewPlacement;
+export declare function writeLaunchPlacement(placement: MsaViewPlacement): void;

package/dist/utils/workspaces.js

@@ -0,0 +1,100 @@
+const PLACEMENTS = ['stack', 'splitRight', 'newTab'];
+/**
+ * What the dialog does unasked. Side-by-side, because a launch from a gene
+ * feature sets `connectedViewId`: the pair shares a hover and a highlight, and
+ * reads as a split. A session spec defaults to `stack` instead.
+ */
+export const DEFAULT_LAUNCH_PLACEMENT = 'splitRight';
+export const LAUNCH_PLACEMENT_KEY = 'msaView-launchPlacement';
+function hasAction(session, name) {
+    return (name in session &&
+        typeof session[name] === 'function');
+}
+// Warned at most once. This is a property of the host, so the answer is the
+// same on every launch and a dialog the user reopens should not stack up noise.
+let warnedPartial = false;
+export function resetWorkspacesWarning() {
+    warnedPartial = false;
+}
+/**
+ * Whether this host can honor anything other than `stack`. Silent: the dialog
+ * asks on every render, and only a launch is worth warning about.
+ */
+export function sessionSupportsPlacement(session) {
+    return (hasAction(session, 'setUseWorkspaces') &&
+        hasAction(session, 'setPendingMove'));
+}
+function isSessionWithWorkspaces(session) {
+    const canEnable = hasAction(session, 'setUseWorkspaces');
+    const canPlace = hasAction(session, 'setPendingMove');
+    // Missing BOTH is an embedded session: it has no workspaces, there is nothing
+    // to ask for, and silence is the right answer.
+    //
+    // Missing ONE is a host that has workspaces but places views some other way,
+    // and silence there is how the same feature broke in jbrowse-plugin-protein3d
+    // — jbrowse-web folded `setPendingMove` into its layout `init`, the guard went
+    // false, and the plugin simply stopped asking: no error, no missing feature,
+    // two views quietly stacking, nobody noticed for weeks. Feature detection
+    // cannot ask a host to announce a change, but it can tell "not supported here"
+    // from "supported, and gone".
+    //
+    // Two very different hosts produce this one shape and nothing on the session
+    // tells them apart, so the message carries both rather than a guess:
+    //
+    // - releases through v4.3.0, where placement is `setPendingMoveToSplitRight`,
+    //   a module function in @jbrowse/app-core rather than a session action.
+    //   Nothing is wrong and nothing needs fixing
+    // - a newer host that moved the action out from under us, which is the
+    //   regression this warning exists to catch
+    //
+    // Do not quiet the first case by sniffing the version. The alarm is only worth
+    // having if it fires on a shape it cannot explain, and these two are identical.
+    if (canEnable !== canPlace && !warnedPartial) {
+        warnedPartial = true;
+        console.warn(`jbrowse-plugin-msaview: this session supports workspaces but not ` +
+            `${canPlace ? 'setUseWorkspaces' : 'setPendingMove'}, so the MSA view ` +
+            `was stacked instead of tiled. Expected on releases through v4.3.0, ` +
+            `which place views through @jbrowse/app-core instead; on a newer host ` +
+            `it means the session API moved and the plugin needs updating to match.`);
+    }
+    return canEnable && canPlace;
+}
+/**
+ * Put a freshly added view where the launch said to. `stack` is a placement
+ * rather than the absence of one, so no caller has to ask what host it is on.
+ */
+export function placeMsaView(session, viewId, placement) {
+    if (placement === 'stack' || !isSessionWithWorkspaces(session)) {
+        return;
+    }
+    session.setPendingMove({ type: placement, viewId });
+    // Session-scoped: turning workspaces on for this session leaves the user's
+    // own default alone, which is what `setUseWorkspaces` (as against
+    // `setUseWorkspacesPreference`) is for.
+    session.setUseWorkspaces(true);
+}
+function isPlacement(value) {
+    return PLACEMENTS.includes(value);
+}
+/**
+ * The dialog's own remembered choice — not the host's preferences system, which
+ * records whether the user likes workspaces and does not exist everywhere.
+ */
+export function readLaunchPlacement() {
+    try {
+        const stored = globalThis.localStorage.getItem(LAUNCH_PLACEMENT_KEY);
+        return isPlacement(stored) ? stored : DEFAULT_LAUNCH_PLACEMENT;
+    }
+    catch (error) {
+        console.error(error);
+        return DEFAULT_LAUNCH_PLACEMENT;
+    }
+}
+export function writeLaunchPlacement(placement) {
+    try {
+        globalThis.localStorage.setItem(LAUNCH_PLACEMENT_KEY, placement);
+    }
+    catch (error) {
+        console.error(error);
+    }
+}

package/dist/utils/workspaces.test.d.ts

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

package/dist/utils/workspaces.test.js

@@ -0,0 +1,100 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { launchMsaView } from './launchMsaView';
+import { DEFAULT_LAUNCH_PLACEMENT, LAUNCH_PLACEMENT_KEY, placeMsaView, readLaunchPlacement, resetWorkspacesWarning, sessionSupportsPlacement, writeLaunchPlacement, } from './workspaces';
+function makeSession({ canPlace = true, canEnable = true, } = {}) {
+    const recorded = { moves: [], workspaces: [], added: [] };
+    const session = {
+        addView(type, snapshot) {
+            recorded.added.push({ type, snapshot });
+            return { id: `view-${recorded.added.length}` };
+        },
+    };
+    if (canPlace) {
+        session.setPendingMove = (move) => recorded.moves.push(move);
+    }
+    if (canEnable) {
+        session.setUseWorkspaces = (on) => recorded.workspaces.push(on);
+    }
+    return { session: session, recorded };
+}
+// node has no localStorage, and the plugin runs in a browser -- a Map-backed
+// stub keeps read/write round-tripping without pulling in jsdom
+function stubStorage() {
+    const store = new Map();
+    vi.stubGlobal('localStorage', {
+        getItem: (key) => store.get(key) ?? null,
+        setItem: (key, value) => store.set(key, value),
+    });
+}
+beforeEach(() => {
+    resetWorkspacesWarning();
+    stubStorage();
+});
+afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+});
+test('stack places nothing, on a host that could tile', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'stack');
+    expect(recorded.moves).toEqual([]);
+    expect(recorded.workspaces).toEqual([]);
+});
+test('splitRight asks for the move, then turns workspaces on', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'splitRight');
+    expect(recorded.moves).toEqual([{ type: 'splitRight', viewId: 'view-1' }]);
+    expect(recorded.workspaces).toEqual([true]);
+});
+test('newTab is the same path with the other move type', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'newTab');
+    expect(recorded.moves).toEqual([{ type: 'newTab', viewId: 'view-1' }]);
+});
+// an embedded session has no workspaces at all, so there is nothing to report
+test('a session with neither action is a silent no-op', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    const { session, recorded } = makeSession({
+        canPlace: false,
+        canEnable: false,
+    });
+    placeMsaView(session, 'view-1', 'splitRight');
+    expect(recorded.moves).toEqual([]);
+    expect(warn).not.toHaveBeenCalled();
+    expect(sessionSupportsPlacement(session)).toBe(false);
+});
+// the shape that broke jbrowse-plugin-protein3d silently: workspaces are there,
+// the action this plugin reaches for is not
+test('a half-supported host warns once and stacks', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    const { session, recorded } = makeSession({ canPlace: false });
+    placeMsaView(session, 'view-1', 'splitRight');
+    placeMsaView(session, 'view-2', 'splitRight');
+    expect(recorded.moves).toEqual([]);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toContain('setPendingMove');
+});
+test('the dialog default is side-by-side, and a junk value falls back to it', () => {
+    expect(DEFAULT_LAUNCH_PLACEMENT).toBe('splitRight');
+    expect(readLaunchPlacement()).toBe('splitRight');
+    localStorage.setItem(LAUNCH_PLACEMENT_KEY, 'sideways');
+    expect(readLaunchPlacement()).toBe('splitRight');
+    writeLaunchPlacement('stack');
+    expect(readLaunchPlacement()).toBe('stack');
+});
+test('launchMsaView defaults to stack, so a spec written before placement existed is unchanged', () => {
+    const { session, recorded } = makeSession();
+    launchMsaView(session, { data: { msa: '>a\nAC' } });
+    expect(recorded.added).toEqual([
+        { type: 'MsaView', snapshot: { type: 'MsaView', data: { msa: '>a\nAC' } } },
+    ]);
+    expect(recorded.moves).toEqual([]);
+});
+// placement is a launch instruction, not view state: MST would drop it from the
+// snapshot without a word, and the view would land stacked with nothing said
+test('launchMsaView keeps placement out of the view snapshot', () => {
+    const { session, recorded } = makeSession();
+    launchMsaView(session, { placement: 'splitRight', colWidth: 10 });
+    expect(recorded.added[0]?.snapshot).toEqual({ type: 'MsaView', colWidth: 10 });
+    expect(recorded.moves).toEqual([{ type: 'splitRight', viewId: 'view-1' }]);
+});

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.1.0";
+export declare const version = "3.2.0";

package/dist/version.js

@@ -1 +1 @@
-export const version = '3.1.0';
+export const version = '3.2.0';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0",
+  "version": "3.2.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -32,6 +32,8 @@
     "@mui/material": "^9.2.0",
     "@mui/system": "^9.2.0",
     "@mui/x-data-grid": "^9.10.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "esbuild": "^0.28.1",
@@ -41,6 +43,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-unicorn": "^72.0.0",
     "git-cliff": "^2.13.1",
+    "jsdom": "^30.0.1",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
     "msa-parsers": "^6.0.0",

package/src/LaunchMsaView/components/BlastQuery/BlastAutomaticPanel.tsx

@@ -123,6 +123,7 @@ const BlastAutomaticPanel = observer(function ({
         ) : null}
       </LaunchPanelContent>
       <SubmitCancelActions
+        model={model}
         submitDisabled={!proteinSequence}
         onSubmit={() => {
           try {

package/src/LaunchMsaView/components/BlastQuery/BlastManualPanel.tsx

@@ -155,6 +155,7 @@ const BlastManualPanel = observer(function ({
       </LaunchPanelContent>
 
       <SubmitCancelActions
+        model={model}
         submitDisabled={!selectedTranscript || !msaText.trim()}
         onSubmit={() => {
           try {

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

@@ -98,9 +98,9 @@ const OrthologPanel = observer(function ({
         </div>
 
         <TranscriptSelector feature={feature} {...transcriptSelection} />
-
       </LaunchPanelContent>
       <SubmitCancelActions
+        model={model}
         submitDisabled={!proteinSequence || !rowCountValid}
         onSubmit={() => {
           try {

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>
   )
 }