diff --git a/src/vs/workbench/contrib/positronPlots/browser/components/plotsContainer.tsx b/src/vs/workbench/contrib/positronPlots/browser/components/plotsContainer.tsx index be85dbc8cf9..5ba930f594a 100644 --- a/src/vs/workbench/contrib/positronPlots/browser/components/plotsContainer.tsx +++ b/src/vs/workbench/contrib/positronPlots/browser/components/plotsContainer.tsx @@ -70,12 +70,13 @@ export const PlotsContainer = (props: PlotContainerProps) => { const plotHeight = historyBottom && props.height > 0 ? props.height - historyPx : props.height; const plotWidth = historyBottom || props.width <= 0 ? props.width : props.width - historyPx; - // Plot history useEffect to handle scrolling and mouse wheel events. + // Plot history useEffect to handle scrolling, mouse wheel events, and keyboard navigation. useEffect(() => { - // Get the current plot history. If the plot history is not rendered, + // Get the current plot history and container. If the plot history is not rendered, // return. const plotHistory = plotHistoryRef.current; - if (!plotHistory) { + const container = containerRef.current; + if (!plotHistory || !container) { return; } @@ -92,10 +93,26 @@ export const PlotsContainer = (props: PlotContainerProps) => { plotHistory.scrollTop = plotHistory.scrollHeight; } + // The keyboard event listener for the plot container. + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { + e.preventDefault(); + props.positronPlotsService.selectPreviousPlot(); + } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { + e.preventDefault(); + props.positronPlotsService.selectNextPlot(); + } + }; + // If the plot history is not at the bottom, there is no need to handle // horizontal scrolling with the mouse wheel. if (!historyBottom) { - return; + // Add keyboard event listener to the container + container.addEventListener('keydown', onKeyDown); + + return () => { + container.removeEventListener('keydown', onKeyDown); + }; } // The wheel event listener for the plot history. This allows the user to @@ -115,10 +132,16 @@ export const PlotsContainer = (props: PlotContainerProps) => { // handler.) plotHistory.addEventListener('wheel', onWheel, { passive: false }); - // Cleanup function to remove the wheel event listener when the component + // Add keyboard event listener to the container + container.addEventListener('keydown', onKeyDown); + + // Cleanup function to remove the wheel and keyboard event listeners when the component // unmounts. - return () => plotHistory.removeEventListener('wheel', onWheel); - }, [historyBottom, plotHistoryRef]); + return () => { + plotHistory.removeEventListener('wheel', onWheel); + container.removeEventListener('keydown', onKeyDown); + }; + }, [historyBottom, containerRef, plotHistoryRef, props.positronPlotsService]); useEffect(() => { // Be defensive against null sizes when pane is invisible @@ -322,7 +345,7 @@ export const PlotsContainer = (props: PlotContainerProps) => { // If there are no plot instances, show a placeholder; otherwise, show the // most recently generated plot. return ( -