You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "EnxDev (via GitHub)" <gi...@apache.org> on 2026/07/08 12:29:47 UTC
[PR] fix(explore): render DragOverlay so dragged metric/column is visible [superset]
EnxDev opened a new pull request, #41879:
URL: https://github.com/apache/superset/pull/41879
### SUMMARY
This PR completes the `react-dnd` → `@dnd-kit` migration for the Explore chart builder by restoring the drag preview when dragging metrics or columns from the **Datasource** panel into Explore controls.
Unlike `react-dnd`, `@dnd-kit` does not provide a native drag preview. Although `ExploreDndContext` already tracked the active drag item, it never rendered a `DragOverlay`, resulting in no visible item following the cursor during external drags.
This PR adds a `DragOverlay` that displays the dragged item while dragging from the Datasource panel:
* Columns render using `StyledColumnOption`.
* Metrics render using `StyledMetricOption`.
The overlay is styled to match the lifted datasource row (background, border radius, drag handle, and subtle elevation). The source row remains faded during the drag, while the overlay stays fully opaque.
Reordering items within Explore controls is intentionally unchanged—those drags do not create an overlay, so the existing behavior is preserved.
This was likely introduced by https://github.com/apache/superset/pull/37880 during the `react-dnd` → `@dnd-kit` migration.
### BEFORE / AFTER
**Before**
* Dragging a metric or column showed no visual preview.
* The source row faded, but nothing followed the cursor.
https://github.com/user-attachments/assets/ffe20d25-2d5b-40a1-bcd1-f95c2838e4bf
**After**
* A drag preview displaying the item name and type follows the cursor throughout the drag operation.
https://github.com/user-attachments/assets/af313788-b112-43de-a7d4-eb84e230ffe8
### TESTING
1. Open any chart in Explore.
2. Drag a metric or column from the Datasource panel into a control (Metrics, Dimensions, Filters, etc.).
3. Verify the drag preview follows the cursor.
4. Drop the item and verify the existing drop behavior is unchanged.
5. Verify reordering items already inside a control still works as before.
**Automated tests**
```bash
npm run test -- src/explore/components/ExploreContainer/ExploreDndContext.test.tsx
```
All tests pass (**9/9**).
### ADDITIONAL INFORMATION
* [ ] Has associated issue
* [ ] Required feature flags
* [x] Changes UI
* [ ] Includes DB migration
* [ ] Introduces new feature or API
* [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(explore): render DragOverlay so dragged metric/column is visible [superset]
Posted by "codecov[bot] (via GitHub)" <gi...@apache.org>.
codecov[bot] commented on PR #41879:
URL: https://github.com/apache/superset/pull/41879#issuecomment-4914880384
## [Codecov](https://app.codecov.io/gh/apache/superset/pull/41879?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) Report
:x: Patch coverage is `33.33333%` with `4 lines` in your changes missing coverage. Please review.
:white_check_mark: Project coverage is 64.67%. Comparing base ([`3b1abf8`](https://app.codecov.io/gh/apache/superset/commit/3b1abf8260812960a8a8307f8a77e3f0e19831fe?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache)) to head ([`f12e71a`](https://app.codecov.io/gh/apache/superset/commit/f12e71a1084f356ca6f4a681cf9338886855fba9?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache)).
:warning: Report is 1 commits behind head on master.
| [Files with missing lines](https://app.codecov.io/gh/apache/superset/pull/41879?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | Patch % | Lines |
|---|---|---|
| [.../components/ExploreContainer/ExploreDndContext.tsx](https://app.codecov.io/gh/apache/superset/pull/41879?src=pr&el=tree&filepath=superset-frontend%2Fsrc%2Fexplore%2Fcomponents%2FExploreContainer%2FExploreDndContext.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9FeHBsb3JlQ29udGFpbmVyL0V4cGxvcmVEbmRDb250ZXh0LnRzeA==) | 33.33% | [4 Missing :warning: ](https://app.codecov.io/gh/apache/superset/pull/41879?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) |
<details><summary>Additional details and impacted files</summary>
```diff
@@ Coverage Diff @@
## master #41879 +/- ##
==========================================
- Coverage 64.68% 64.67% -0.01%
==========================================
Files 2702 2702
Lines 150192 150198 +6
Branches 34585 34589 +4
==========================================
+ Hits 97145 97147 +2
- Misses 51258 51262 +4
Partials 1789 1789
```
| [Flag](https://app.codecov.io/gh/apache/superset/pull/41879/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | Coverage Δ | |
|---|---|---|
| [javascript](https://app.codecov.io/gh/apache/superset/pull/41879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | `69.79% <33.33%> (-0.01%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache#carryforward-flags-in-the-pull-request-comment) to find out more.
</details>
[:umbrella: View full report in Codecov by Harness](https://app.codecov.io/gh/apache/superset/pull/41879?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).
<details><summary> :rocket: New features to boost your workflow: </summary>
- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(explore): render DragOverlay so dragged metric/column is visible [superset]
Posted by "bito-code-review[bot] (via GitHub)" <gi...@apache.org>.
bito-code-review[bot] commented on code in PR #41879:
URL: https://github.com/apache/superset/pull/41879#discussion_r3544059118
##########
superset-frontend/src/explore/components/ExploreContainer/ExploreDndContext.tsx:
##########
@@ -229,6 +266,30 @@ export const ExploreDndContextProvider: FC<ExploreDndContextProps> = ({
</ActiveDragContext.Provider>
</DraggingContext.Provider>
</DropzoneContext.Provider>
+ {/*
+ @dnd-kit has no native drag image (unlike react-dnd's HTML5 backend),
+ so the item following the cursor must be rendered explicitly here.
+ Reorder drags leave activeData null on purpose, so only external
+ DatasourcePanel drags (which carry a value) get a preview.
+ */}
+ <DragOverlay dropAnimation={null}>
+ {activeData?.value ? (
+ <DragOverlayContainer align="center" justify="space-between">
+ {activeData.type === DndItemType.Column ? (
+ <StyledColumnOption
+ column={activeData.value as ColumnOptionProps['column']}
+ showType
+ />
+ ) : (
+ <StyledMetricOption
+ metric={activeData.value as MetricOptionProps['metric']}
+ showType
+ />
+ )}
+ <Icons.Drag iconSize="xl" />
+ </DragOverlayContainer>
+ ) : null}
+ </DragOverlay>
Review Comment:
<div>
<div id="suggestion">
<div id="issue"><b>Missing test coverage for DragOverlay</b></div>
<div id="fix">
The new DragOverlay drag-preview feature has no test coverage in `ExploreDndContext.test.tsx`. While the implementation is correct (verified `ColumnOptionProps`/`MetricOptionProps` support `showType`, `Flex` supports `align`/`justify`, `dropAnimation={null}` disables animation per @dnd-kit docs), missing tests could allow this functionality to break unnoticed during future refactoring.
</div>
</div>
<small><i>Code Review Run #a67fbb</i></small>
</div>
---
Should Bito avoid suggestions like this for future reviews? (<a href=https://alpha.bito.ai/home/ai-agents/review-rules>Manage Rules</a>)
- [ ] Yes, avoid them
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(explore): render DragOverlay so dragged metric/column is visible [superset]
Posted by "bito-code-review[bot] (via GitHub)" <gi...@apache.org>.
bito-code-review[bot] commented on PR #41879:
URL: https://github.com/apache/superset/pull/41879#issuecomment-4914779620
AI Code Review is in progress (usually takes 3 to 15 minutes unless it's a very large PR).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(explore): render DragOverlay so dragged metric/column is visible [superset]
Posted by "EnxDev (via GitHub)" <gi...@apache.org>.
EnxDev merged PR #41879:
URL: https://github.com/apache/superset/pull/41879
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org