Skip to content

feat: data link code snippets dialog#266

Open
allison-truhlar wants to merge 49 commits intomainfrom
data-link-code-snippets-dialog
Open

feat: data link code snippets dialog#266
allison-truhlar wants to merge 49 commits intomainfrom
data-link-code-snippets-dialog

Conversation

@allison-truhlar
Copy link
Collaborator

@allison-truhlar allison-truhlar commented Dec 12, 2025

Clickup ids: 86acuxatq, 86accr60r, 86aeq5001, 86accr5yg

This PR adds a data link usage dialog with copy-able code snippets and instructions for opening data links in external tools. The dialog is organized into tabs by tool/language (Fiji, Java, Napari, Python, and VVDViewer) and is context-aware — showing different content for zarr, N5, and directory data types. This determination is owned by the dialog - it uses the detectZarrVersions and detectN5 methods from /queries/fileQueries.ts. In the dialog header, viewable no matter which tab is selected, is a copy data link box. The dialog is accessible from the zarr/N5 preview panels, the properties drawer, and the data links table.

This PR also redesigns the data tool link icons (Neuroglancer, Vol-E, Avivator, etc.) as labeled circular buttons with hover effects, replacing the previous ButtonGroup layout. It adds the "More ways to open" button, displayed as a three-dot "More..." icon in the Zarr/N5 preview panels and a button with text in the properties panel, that opens the data link usage dialog.

Finally, this PR:

  • adds two reusable dialog button components (DialogIconBtn, DialogTextBtn)
  • fixes data links in the properties panel for directories inside data_external folders. Previously, if you clicked a sub-directory row of the current directory in the file browser, the properties panel did not update to show the link for that sub-directory. This is already fixed on main for data links that are not S3 proxy links (external data links).

@krokicki @neomorphic @cgoina

- also fixes location of the copy icon for the code blocks
- in the DataLinkUsageDialog, the copied message was not showing due to a CSS issue. However, in addressing this, I realized that this component was recreating logic from the CopyTooltip component and reworked it to use that component
@allison-truhlar allison-truhlar marked this pull request as ready for review January 22, 2026 14:24
@allison-truhlar allison-truhlar requested review from neomorphic and removed request for neomorphic January 22, 2026 14:50
@allison-truhlar allison-truhlar marked this pull request as draft January 22, 2026 15:50
@allison-truhlar allison-truhlar marked this pull request as ready for review February 24, 2026 22:00
Copy link
Member

@neomorphic neomorphic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It all works for me. I left a few cosmetic comments, but the code worked as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants