Scope keyboard controls to open trays

src/components/session-chart.tsx

@@ -109,16 +109,24 @@ export function SessionChart({
 	controlMode,
 	history,
 	keyboardEnabled = true,
+	onSelectChartMode,
 	route,
+	selectedChartMode,
 	speedUnit,
 }: {
 	controlMode?: ControlMode;
 	history: MetricSample[];
 	keyboardEnabled?: boolean;
+	onSelectChartMode?: (mode: ChartMode) => void;
 	route: readonly RoutePoint[];
+	selectedChartMode?: ChartMode;
 	speedUnit: SpeedUnit;
 }) {
-	const selectedMode = useSelector(preferencesStore, (preferences) => preferences.chartMode);
+	const preferredChartMode = useSelector(
+		preferencesStore,
+		(preferences) => preferences.chartMode
+	);
+	const selectedMode = selectedChartMode ?? preferredChartMode;
 	const resolvedControlMode =
 		controlMode ??
 		(history.some((sample) => sample.gear !== undefined)
@@ -254,8 +262,8 @@ export function SessionChart({
 		chartHistory.length > 1 ? (chartHistory.at(-1)?.elapsedSeconds ?? 0) - historyStart : 0;
 
 	const selectMode = useCallback(
-		(mode: ChartMode) => preferencesStore.actions.selectChartMode(mode),
-		[]
+		(mode: ChartMode) => (onSelectChartMode ?? preferencesStore.actions.selectChartMode)(mode),
+		[onSelectChartMode]
 	);
 
 	useEffect(() => {

src/components/session-detail.tsx

@@ -16,7 +16,7 @@ import {
 import { sessionDetailScrollPositionStorageKey } from '../lib/session-history-preferences';
 import { downloadSessionTcx } from '../lib/tcx';
 import { workoutTerrainAtDistance } from '../lib/workouts';
-import type { SavedSession, SpeedUnit } from '../types';
+import type { ChartMode, SavedSession, SpeedUnit } from '../types';
 import { SessionMetric } from './metrics';
 import { SessionChart } from './session-chart';
 import { SessionSummary } from './session-summary';
@@ -89,7 +89,9 @@ export function SessionDetail({
 	onCancelDelete,
 	onConfirmDelete,
 	onDelete,
+	onSelectChartMode,
 	onStartNew,
+	selectedChartMode,
 	session,
 	speedUnit,
 }: {
@@ -99,7 +101,9 @@ export function SessionDetail({
 	onCancelDelete?: () => void;
 	onConfirmDelete?: () => void;
 	onDelete?: () => void;
+	onSelectChartMode?: (mode: ChartMode) => void;
 	onStartNew?: () => void;
+	selectedChartMode?: ChartMode;
 	session: SavedSession;
 	speedUnit: SpeedUnit;
 }) {
@@ -269,7 +273,9 @@ export function SessionDetail({
 				controlMode={session.controlMode}
 				history={session.history}
 				keyboardEnabled={chartKeyboardEnabled}
+				onSelectChartMode={onSelectChartMode}
 				route={session.workout ? session.workout.course.points : EMPTY_ROUTE}
+				selectedChartMode={selectedChartMode}
 				speedUnit={speedUnit}
 			/>
 		</div>

src/components/session-history.tsx

@@ -17,7 +17,8 @@ import {
 	historyShortcutForKey,
 } from '../lib/keyboard';
 import { adjacentSession } from '../lib/saved-sessions';
-import type { SavedSession, SpeedUnit } from '../types';
+import { preferencesStore } from '../stores/preferences-store';
+import type { ChartMode, SavedSession, SpeedUnit } from '../types';
 import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog';
 import { SessionDetail } from './session-detail';
 import { SessionHistoryList } from './session-history-list';
@@ -62,6 +63,9 @@ export function SessionHistory({
 	} = useSessionHistory(open);
 	const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
 	const [historyHelpOpen, setHistoryHelpOpen] = useState(false);
+	const [selectedChartMode, setSelectedChartMode] = useState<ChartMode>(
+		() => preferencesStore.get().chartMode
+	);
 	const [downloadFormat, setDownloadFormat] = useState<ActivityFileFormat>(
 		ACTIVITY_FILE_FORMAT.FIT
 	);
@@ -177,7 +181,9 @@ export function SessionHistory({
 				onCancelDelete={() => setDeleteConfirmationOpen(false)}
 				onConfirmDelete={() => deleteSelectedSession()}
 				onDelete={() => setDeleteConfirmationOpen(true)}
+				onSelectChartMode={setSelectedChartMode}
 				onStartNew={() => onStartNew(selected)}
+				selectedChartMode={selectedChartMode}
 				session={selected}
 				speedUnit={speedUnit}
 			/>

tests/components.test.tsx

@@ -929,6 +929,31 @@ describe('view components', () => {
 		expect(gearModeWithoutSamples).toContain('Gear</button>');
 	});
 
+	test('supports a chart selection scoped outside the shared dashboard preference', () => {
+		const history = [
+			{
+				cadence: 85,
+				elapsedSeconds: 1,
+				heartRate: 140,
+				power: 180,
+				resistance: 42,
+				speed: 30,
+			},
+		];
+		const trayChart = render(
+			<SessionChart
+				history={history}
+				onSelectChartMode={() => undefined}
+				route={[]}
+				selectedChartMode="power"
+				speedUnit="kmh"
+			/>
+		);
+		expect(trayChart).toContain('Power over time');
+		expect(trayChart).not.toContain('Speed over time');
+		expect(trayChart).not.toContain('Cadence over time');
+	});
+
 	test('graphs recorded workout elevation with a distinct color', () => {
 		const [course] = WORKOUT_COURSES;
 		if (!course) {