data explorer: create "Copy as Code" modal #8537

isabelizimm · 2025-07-15T20:47:09Z

This PR implements the actions and modal dialog for the Copy as Code data explorer button.

A modal dialog was chosen over a modal popup since we cannot use a modal popup in the editor action bar at this point in time. Notes from @dhruvisompura:

The data explorer UI doesn't have the action bar component we created because we normally have it live in its own row below the VS Code editor action bar (the one that every editor tab has). We don't want the data explorer to have two action bars as that is confusing/annoying/bad ux for the user! We are relying on the VS Code editor action bar for the Data Explorer.
We have to contribute all of our buttons via a command for them to show up in that editor action bar.
There currently is no mechanism to show a popup that is anchored to the copy button via an action because commands have no way of knowing what DOM element to anchor a piece of UI to. Commands are pretty primitive and don't have UI context generally.

Note that this is just the first implementation! Things like the "Copy to Clipboard" functionality, real code editor block, etc will come in a follow up PR.

Release Notes

New Features

N/A

Bug Fixes

N/A

QA Notes

Intended behavior is that the modal has a dropdown that is populated with the name of a syntax, eg, pandas, + generated code. At this point, the code generation piece is not implemented, so we won't have to check the code is correct (yet).

On the Python side, a pandas dataframe will fill the dropdown with pandas. A polars dataframe will fill the dropdown with polars. For the R side, unless you have a locally built Ark, the button should be greyed out since there are no syntaxes available.

Co-authored-by: Dhruvi Sompura <dhruvisompura@users.noreply.github.com>

github-actions · 2025-07-15T20:47:25Z

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

^readme ^{valid tags}

isabelizimm · 2025-07-18T20:56:36Z

src/vs/workbench/services/positronDataExplorer/browser/positronDataExplorerInstance.ts

@@ -19,6 +19,8 @@ import { DataExplorerClientInstance } from '../../languageRuntime/common/languag
 import { DataExplorerSummaryCollapseEnabled, DefaultDataExplorerSummaryLayout } from './positronDataExplorerSummary.js';
 import { CodeSyntaxName } from '../../languageRuntime/common/positronDataExplorerComm.js';
 import { ClipboardCell, ClipboardCellRange, ClipboardColumnIndexes, ClipboardColumnRange, ClipboardRowIndexes, ClipboardRowRange } from '../../../browser/positronDataGrid/classes/dataGridInstance.js';
+import { POSITRON_DATA_EXPLORER_IS_CONVERT_TO_CODE_ENABLED } from '../../../contrib/positronDataExplorerEditor/browser/positronDataExplorerContextKeys.js';


locally i saw this message on commit:

[16:51:21] /Users/isabelizimm/code/positron/src/vs/workbench/services/positronDataExplorer/browser/positronDataExplorerInstance.ts: line 22, col 67, Warning - Imports violates 'vs/base/{common,browser}/** or vs/base/parts/*/{common,browser}/** or vs/platform/*/{common,browser}/** or vs/editor/{common,browser}/** or vs/editor/contrib/*/{common,browser}/** or vs/workbench/{common,browser}/** or vs/workbench/services/*/{common,browser}/** or tas-client-umd or vscode-textmate or @vscode/vscode-languagedetection or @vscode/tree-sitter-wasm or @xterm/xterm or vs/nls.js or vs/amdX.js' restrictions. See https://github.com/microsoft/vscode/wiki/Source-Code-Organization (local/code-import-patterns)

I don't know if it is a Very Bad Thing or something that is okay to ignore? There are no other errors for build, lint, etc, but want to call it out just in case?

Thanks for calling this out! I do think we want to address this eslint import error. I just messaged you about this via slack.

src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.tsx

dhruvisompura · 2025-07-18T23:48:39Z

src/vs/workbench/services/positronDataExplorer/browser/positronDataExplorerInstance.ts

@@ -19,6 +19,8 @@ import { DataExplorerClientInstance } from '../../languageRuntime/common/languag
 import { DataExplorerSummaryCollapseEnabled, DefaultDataExplorerSummaryLayout } from './positronDataExplorerSummary.js';
 import { CodeSyntaxName } from '../../languageRuntime/common/positronDataExplorerComm.js';
 import { ClipboardCell, ClipboardCellRange, ClipboardColumnIndexes, ClipboardColumnRange, ClipboardRowIndexes, ClipboardRowRange } from '../../../browser/positronDataGrid/classes/dataGridInstance.js';
+import { POSITRON_DATA_EXPLORER_IS_CONVERT_TO_CODE_ENABLED } from '../../../contrib/positronDataExplorerEditor/browser/positronDataExplorerContextKeys.js';


Thanks for calling this out! I do think we want to address this eslint import error. I just messaged you about this via slack.

src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerActions.ts

…alDialog.tsx Co-authored-by: Dhruvi Sompura <dhruvi.sompura@posit.co> Signed-off-by: Isabel Zimmerman <54685329+isabelizimm@users.noreply.github.com>

related issue: #8531 related pr for Ark: posit-dev/ark#873 I'm not exactly sure of the flow of these PRs with Ark, but I believe we'll want to merge that PR, release Ark, and then pick up the new release in this PR before this PR is merged. This PR implements makes 3 major changes to the comms: - **add `convert_to_code` as a supported feature:** there are other supported features, such as row filters and column filters. This structure includes if it is supported as well as supported syntaxes, as an array of values. - **`suggest_code_syntax` message:** for a particular data explorer instance, decide what options a user has for generating code. I would expect the return value of this to be `base-r` or something to that effect. - **`convert_to_code` message:** for a particular data explorer instance, this message sends over the filters and sorts applied to the data and the desired syntax. The expectation is that this will return a code snippet string. The front end will (eventually) apply code highlighting and formatting. Below is a diagram of the general flow through comms. Note that these comm messages will not call each other; they will be triggered by a modal in Positron core. ```mermaid flowchart TD A["Data explorer instance is created"] --> B["Get all potential syntaxes from language pack via the **supported_features**." ] B --> C["Also set suggested syntax with **suggest_code_syntax**"] C --> D[Open modal] D --> E["Use **dataExplorerInstance.suggestedSyntax**"] E --> F["Translate data view (filters, sorts) to code with **_translate_to_code_**"] F --> G[Display code for user to copy] G -->|user chooses another syntax from modal dropdown| F ``` There is an open PR that builds off this branch to use these comms, so you can actually fire them off/interact with them #8537 ### Release Notes  #### New Features - N/A #### Bug Fixes - N/A ### QA Notes It doesn't look like we have much testing for comms, but open to ideas! Currently I plan on adding unit tests on each language runtime and then e2e tests for the UI pieces. --------- Signed-off-by: Isabel Zimmerman <54685329+isabelizimm@users.noreply.github.com> Co-authored-by: Jennifer (Jenny) Bryan <jenny.f.bryan@gmail.com>

Signed-off-by: Isabel Zimmerman <54685329+isabelizimm@users.noreply.github.com>

isabelizimm · 2025-07-21T21:27:37Z

failing test is unrelated!

softwarenerd

There are just two comments left.

softwarenerd · 2025-07-23T17:33:46Z

src/vs/workbench/browser/positronModalDialogs/components/dropdownEntry.tsx

+			<div className='dropdown-entry-title'>
+				{props.title}
+			</div>
+			{props.group ? <div className='dropdown-entry-group'>{props.group}</div> : null}


This can be simplified as:

{props.group && <div className='dropdown-entry-group'>{props.group}</div>}

src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.tsx

softwarenerd · 2025-07-23T18:05:09Z

src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.tsx

+				"Convert to Code"
+			))()}
+			width={400}
+			onAccept={async () => {


async doesn't seem to be needed.

onAccept={() => renderer.dispose()}

src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerActions.ts

isabelizimm and others added 14 commits July 2, 2025 15:03

make action and button

02a2c28

Merge branch 'main' into export-to-code

dc9ef57

plumb through comms

6f502e0

export -> copy

dcf380b

add modal on filter bar

32eb2c0

ui updates

f9a2c01

Co-authored-by: Dhruvi Sompura <dhruvisompura@users.noreply.github.com>

make calls from modal

2b9f962

clean up comms

5083889

clean up modal

5be588b

linting for python

d59fd66

nit to modal

cc2d069

Merge branch 'export-as-code-comms' into copy-as-code-comms

bae6ced

add modal into new branch

1c0c11a

update names and comments

35a2114

updates from copilot

4d624bc

This was referenced Jul 15, 2025

WIP: copy as code comms #8492

Closed

data explorer: "Copy as Code" comms #8536

Merged

isabelizimm added 4 commits July 15, 2025 18:22

nit

ac12c66

cleanup

0d6e7d9

rename title creation

2e71d12

Merge branch 'copy-as-code-comms' into copy-as-code-modal

99e782f

isabelizimm requested a review from dhruvisompura July 15, 2025 22:55

isabelizimm added 7 commits July 16, 2025 18:03

updates from review

c33df7c

guess syntax immediately

45cd402

updates from review

d75c201

guess syntax immediately

87ae32f

rearrange with new updates

5d9eaa5

reorder guessing

1adfc02

no undefined for guessing

7a0d40b

rename files

4f6c40a

isabelizimm commented Jul 18, 2025

View reviewed changes

dhruvisompura reviewed Jul 19, 2025

View reviewed changes

isabelizimm and others added 3 commits July 21, 2025 09:40

Update src/vs/workbench/browser/positronModalDialogs/convertToCodeMod…

38efe31

…alDialog.tsx Co-authored-by: Dhruvi Sompura <dhruvi.sompura@posit.co> Signed-off-by: Isabel Zimmerman <54685329+isabelizimm@users.noreply.github.com>

Fix ESLint import warning

7f394bd

mark duckdb backends as unsupported

28739b4

isabelizimm marked this pull request as ready for review July 21, 2025 14:53

isabelizimm added 3 commits July 21, 2025 10:54

clean up actions

6115af3

always get code string

4363bb7

only show for supported backends

74027f9

Base automatically changed from copy-as-code-comms to main July 21, 2025 20:39

Merge branch 'main' into copy-as-code-modal

e978ca5

Signed-off-by: Isabel Zimmerman <54685329+isabelizimm@users.noreply.github.com>

isabelizimm added 2 commits July 22, 2025 14:42

Merge branch 'main' into copy-as-code-modal

781d7ae

add precondition for syntaxes

3d01ba4

isabelizimm requested a review from dhruvisompura July 23, 2025 14:34

isabelizimm added 2 commits July 23, 2025 11:05

nit if no supported features

2037e80

remove button if convertocode is missing

d8363e0

isabelizimm requested a review from softwarenerd July 23, 2025 15:35

isabelizimm added 2 commits July 23, 2025 13:54

remove unecessary services

02c4686

updates from review

ecb7bc1

softwarenerd previously approved these changes Jul 23, 2025

View reviewed changes

simplifying dropdown entry and onAccept

9b675eb

isabelizimm dismissed softwarenerd’s stale review via 9b675eb July 23, 2025 18:45

rearrange context key

98de592

dhruvisompura approved these changes Jul 23, 2025

View reviewed changes

isabelizimm merged commit eec9df6 into main Jul 23, 2025
10 checks passed

isabelizimm deleted the copy-as-code-modal branch July 23, 2025 21:25

github-actions bot locked and limited conversation to collaborators Jul 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

data explorer: create "Copy as Code" modal #8537

data explorer: create "Copy as Code" modal #8537

isabelizimm commented Jul 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 15, 2025 •

edited

Loading

Uh oh!

isabelizimm Jul 18, 2025

Uh oh!

dhruvisompura Jul 18, 2025

Uh oh!

Uh oh!

dhruvisompura Jul 18, 2025

Uh oh!

Uh oh!

isabelizimm commented Jul 21, 2025

Uh oh!

softwarenerd left a comment

Uh oh!

softwarenerd Jul 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

softwarenerd Jul 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

data explorer: create "Copy as Code" modal #8537

data explorer: create "Copy as Code" modal #8537

Conversation

isabelizimm commented Jul 15, 2025 • 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 Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

isabelizimm Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

dhruvisompura Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dhruvisompura Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

isabelizimm commented Jul 21, 2025

Uh oh!

softwarenerd left a comment

Choose a reason for hiding this comment

Uh oh!

softwarenerd Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

softwarenerd Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

isabelizimm commented Jul 15, 2025 •

edited

Loading

github-actions bot commented Jul 15, 2025 •

edited

Loading