Add inline data explorer to R cells and Quarto documents by jmcphers · Pull Request #12693 · posit-dev/positron

jmcphers · 2026-03-25T16:33:39Z

This change adds support for inline data explorers to R cells in Jupyter notebooks and for both R and Python in Quarto documents with inline output. It extends the work @nstrayer did to support Pandas data frames in Python notebooks.

Requires posit-dev/qa-example-content#117
Requires posit-dev/ark#1124
Addresses #12148

Release Notes

New Features

Inline data explorer for notebooks and Quarto documents (Quarto Inline Output: Use rich data explorer when data frames are printed #12148)

Bug Fixes

N/A

QA Notes

E2E tests for both Python and R are included.

This feature can be disabled using this (existing) setting:

Test tags: @:quarto

github-actions · 2026-03-25T16:34:01Z

E2E Tests 🚀
This PR will run tests tagged with: @:critical @:quarto

^readme ^{valid tags}

nstrayer

Just a few questions about duplication. Things are working and I really appreciate the scroll fixes!

I'm totally good to defer the de-duplication to a different PR. )Also perhaps it's all premature optimization at this point.)

nstrayer · 2026-03-26T18:13:16Z

+			const newVerticalOffset = pinToRange(
+				context.instance.verticalScrollOffset + deltaY,
+				0,
+				context.instance.maximumVerticalScrollOffset
+			);
+
+			// If the scroll position wouldn't actually change, let the event
+			// bubble up so parent containers (e.g. Quarto documents) can scroll.
+			const horizontalChanged = newHorizontalOffset !== context.instance.horizontalScrollOffset;
+			const verticalChanged = newVerticalOffset !== context.instance.verticalScrollOffset;
+			if (!horizontalChanged && !verticalChanged) {
+				return;
+			}
+
+			// Consume the event to prevent scroll chaining to parent containers.
+			e.preventDefault();
+			e.stopPropagation();
+
+			// Record the last wheel event.
+			setLastWheelEvent(e.timeStamp);
+
+			// Set the scroll offsets.
+			context.instance.setScrollOffsets(newHorizontalOffset, newVerticalOffset);


Oh man. Thanks for fixing this.

Yeah, the scroll trap was too annoying until this was addressed!

nstrayer · 2026-03-26T18:19:40Z

 .inline-data-explorer-container {
 	display: flex;
 	flex-direction: column;
+	/* If you change the border width, update BORDER in quartoInlineDataExplorerLayout.ts */


Probably not in this PR but I wonder if we should do something like

export const INLINE_DE_LAYOUT = { toolbarHeight: 24, toolbarBorder: 1, containerBorder: 1, // ... } as const; // ... const layoutVars = { '--inline-de-toolbar-height': `${INLINE_DE_LAYOUT.toolbarHeight}px`, '--inline-de-toolbar-border': `${INLINE_DE_LAYOUT.toolbarBorder}px`, '--inline-de-container-border': `${INLINE_DE_LAYOUT.containerBorder}px`, } as React.CSSProperties;

In the future to make this harder to break. (Although maybe LLMs handle this totally fine with comments like this.)

It's nice to have constants in only one place but then you have to move the CSS out of the CSS file! 😭What we really need is some sort of CSS preprocessor we can feed variables to (or --var values)...

nstrayer · 2026-03-26T18:28:30Z

+		// Exception: when data explorer is present, always keep text/plain. The data
+		// explorer is a live component that won't work after the document is closed
+		// and reopened; text/plain serves as the cache-safe fallback for that case.


This is interesting. In notebooks we just keep everything and then try and find the comm and fallback after we dont find it. I like this approach a lot though.

I did the fallback thing originally, but it was hard to render nicely -- you'd see all the explorers TRYING to open and then failing.

nstrayer · 2026-03-26T18:29:54Z

+				(!mime.startsWith('application/vnd.positron.') ||
+					mime === DATA_EXPLORER_MIME_TYPE)) {


I really feel like we should eventually have a nice abstraction for dealing with mime type detection etc.

nstrayer · 2026-03-26T18:32:08Z

+	const { commId, shape, title, variablePath, documentUri, onFallback, onHeightChange } = props;
+	const services = PositronReactServices.services;
+	const [state, setState] = useState<QuartoInlineDataExplorerState>({ status: 'loading' });
+	const containerRef = useRef<HTMLDivElement>(null);


This is never used, right?

It is not! Deleted.

nstrayer · 2026-03-26T18:32:36Z

+	const [maxHeight, setMaxHeight] = useState<number>(
+		services.configurationService.getValue<number>(
+			POSITRON_QUARTO_INLINE_DATA_EXPLORER_MAX_HEIGHT_KEY
+		) ?? 300


pull 300 to constant as it's used elsewhere?

nstrayer · 2026-03-26T18:34:33Z

+function InlineDataExplorerHeader({ title, shape, onOpenInExplorer }: {
+	title: string;
+	shape: { rows: number; columns: number };
+	onOpenInExplorer?: () => void;
+}) {
+	return (
+		<div className='inline-data-explorer-header'>
+			<div className='inline-data-explorer-info'>
+				<span className='inline-data-explorer-title'>{title}</span>
+				<span className='inline-data-explorer-shape'>
+					{shape.rows.toLocaleString()} {localize('rows', 'rows')} x {shape.columns.toLocaleString()} {localize('columns', 'columns')}
+				</span>
+			</div>
+			{onOpenInExplorer && (
+				<button
+					className='inline-data-explorer-open-button'
+					title={localize('openInDataExplorer', 'Open in Data Explorer')}
+					onClick={onOpenInExplorer}
+				>
+					<span className='codicon codicon-go-to-file' />
+					{localize('openInDataExplorer', 'Open in Data Explorer')}
+				</button>
+			)}
+		</div>
+	);
+}


Should we just export InlineDataExplorerHeader from the notebook version? The function is identical.

sure, done!

nstrayer · 2026-03-26T18:45:04Z

+export function QuartoInlineDataExplorer(props: QuartoInlineDataExplorerProps) {
+	const { commId, shape, title, variablePath, documentUri, onFallback, onHeightChange } = props;


Curious about your opinion about extracting the shared logic to a common InlineDataExplorer component with an interface something like:

export interface InlineDataExplorerProps { commId: string; shape: { rows: number; columns: number }; title: string; variablePath?: string[]; documentUri: URI; onFallback?: () => void; onHeightChange?: (height: number) => void; className?: string; // For Quarto's font override class }

Then quarto and notebooks have simple components around it with some hooks to fill in the differences.

A good idea to follow up on! I didn't want to run the risk of refactoring the existing notebook code as I'm not as familiar with it. Maybe worth doing next time we're in there.

nstrayer · 2026-03-26T18:45:27Z

+/**
+ * Configuration key for the maximum height of the inline data explorer.
+ */
+export const POSITRON_QUARTO_INLINE_DATA_EXPLORER_MAX_HEIGHT_KEY = 'positron.quarto.inlineDataExplorer.maxHeight';


would it be reasonable to share this between quarto and notebooks?

After some research I think we should just use the existing notebook setting for this! I've removed the Quarto specific one.

…-data-explorer

jmcphers added 5 commits March 23, 2026 14:21

impl quarto inline output

07b2e2d

tests or it didn't happen

55b408c

share layout constants

fd43a3a

clean up settings and constants

ffda4a9

we don't need our own setting

dd44a43

jmcphers requested a review from nstrayer March 25, 2026 16:33

jmcphers added 4 commits March 25, 2026 09:54

remove scroll trap

8d70183

fallback to text/plain since r doesn't emit an html representation

f852ba3

don't cache data explorers

4179f41

omit r's html stub

f28c175

nstrayer previously approved these changes Mar 26, 2026

View reviewed changes

jmcphers added 2 commits March 31, 2026 09:42

Merge remote-tracking branch 'origin/main' into feature/quarto-inline…

9fe2e52

…-data-explorer

stricter filter

1007012

jmcphers dismissed nstrayer’s stale review via 1007012 March 31, 2026 18:09

jmcphers added 5 commits March 31, 2026 11:15

time for a new ark

3be5bbe

fix tab switching

bef6fba

code review feedback round 1

a98ed72

remove quarto-specific height key

84aa78b

better cache filtering logic

41ea788

jmcphers merged commit 6a532dd into main Apr 1, 2026
36 of 37 checks passed

jmcphers deleted the feature/quarto-inline-data-explorer branch April 1, 2026 04:05

github-actions bot locked and limited conversation to collaborators Apr 1, 2026

		(!mime.startsWith('application/vnd.positron.') \|\|
		mime === DATA_EXPLORER_MIME_TYPE)) {

		export function QuartoInlineDataExplorer(props: QuartoInlineDataExplorerProps) {
		const { commId, shape, title, variablePath, documentUri, onFallback, onHeightChange } = props;

Conversation

jmcphers commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

New Features

Bug Fixes

QA Notes

Uh oh!

github-actions bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nstrayer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jmcphers commented Mar 25, 2026 •

edited

Loading

github-actions bot commented Mar 25, 2026 •

edited

Loading