Add column info to dataframe column menu #11303
Conversation
✅ PR preview is ready!
|
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
….tsx Co-authored-by: Copilot <[email protected]>
….tsx Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the DataFrame column menu by showing column metadata (type icon, name) and adding a copy-to-clipboard action.
- Introduces styled components to render a header row with type icon, column name, and copy button
- Updates
ColumnMenuto acceptcolumnName, compute and display the icon, and handle copying - Adds a
COLUMN_TYPE_ICONSmap, a new unit test for name rendering, and updated snapshots
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/DataFrame/menus/styled-components.ts | Adds StyledColumnHeaderRow, StyledTypeIconContainer, StyledColumnNameWithIcon, StyledColumnNameText, and StyledIconButton |
| frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.tsx | Accepts columnName, uses useMemo for icon lookup, and renders the header row with copy functionality |
| frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.test.tsx | Includes columnName in defaultProps and tests rendering of the name |
| frontend/lib/src/components/widgets/DataFrame/columns/index.ts | Defines COLUMN_TYPE_ICONS mapping for column kinds |
| frontend/lib/src/components/widgets/DataFrame/DataFrame.tsx | Passes columnName from originalColumns into ColumnMenu |
Comments suppressed due to low confidence (2)
frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.test.tsx:58
- Add a test to verify that clicking the copy button calls navigator.clipboard.writeText with the correct column name to ensure the copy-to-clipboard feature is covered.
test("renders the column menu with the correct column name", () => {
frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.test.tsx:61
- Consider adding a test that checks the type icon is rendered with the expected title attribute (column kind) to cover icon rendering behavior.
const columnName = screen.getByText("testColumn")
frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.tsx
Outdated
Show resolved
Hide resolved
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| /** | ||
| * Mapping of column types to icons. | ||
| */ | ||
| export const COLUMN_TYPE_ICONS: Record<string, string> = { |
There was a problem hiding this comment.
suggestion: Is there a better type we can use instead of string as the key type? If a new column type were to be added, this would fail type checking until all of the column types are handled.
There was a problem hiding this comment.
I made the typeIcon a required column property -> thereby, its enforced to be defined whenever we implement a new column type
frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.test.tsx
Outdated
Show resolved
Hide resolved
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(columnName).catch(error => { | ||
| LOG.error("Failed to copy column name to clipboard:", error) | ||
| }) | ||
| } else { | ||
| LOG.error("Clipboard API not supported.") | ||
| } |
There was a problem hiding this comment.
suggestion: Utilize the existing clipboard dependency so that it works across browsers.
Out of scope for this PR, but it would be better if we instead had a shared copyToClipboard function that abstracts this implementation and dependency away so every callsite doesn't need to handle this.
There was a problem hiding this comment.
I looked into this a bit, and I think it might be better to treat this as a follow-up. Here are a couple of findings:
How we use clipboard is a bit mixed: the json and code component are using the clipboard dependency while ExceptionElement and ThemeCreatorEditor are using navigator.clipboard.writeText directly. It looks like clipboard is a bit outdated since it hasn't been updated for 3 years and is not using the browser clipboard API. It's relying on the deprecated document.execCommand instead; maybe there is a better dependency for this. I think what we might want to have is a mix between using the clipboard API if possible, and falling back to the older behaviour (e.g., if permissions do not allow the clipboard API). I added a tech debt item here.
There was a problem hiding this comment.
Good find! Agree that we can align all of this in a follow-up!
Describe your changes
Add some column information to the column menu. This includes an icon for the column type, the name, and an easy way to copy the name to the clipboard.
In a potential follow-up, we might allow changing the column type by clicking on the icon.
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.