You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "msyavuz (via GitHub)" <gi...@apache.org> on 2025/09/16 10:24:23 UTC
[I] [SIP] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
msyavuz opened a new issue, #35157:
URL: https://github.com/apache/superset/issues/35157
## [SIP] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit
### Motivation
Superset currently uses `react-dnd` as the drag-and-drop library for dashboards, filters and some UI components. While `react-dnd` has served us well, migrating to `dnd-kit` can improve both UX and DX significantly.
With the React 18 upgrade underway, we also need to upgrade `react-dnd` to the new hooks based API which breaks existing components and functionality. Since we already need to update all usages, this feels like the best time to migrate to a modern library that fits our needs.
- **Bundle size**: We already have `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` as peer dependencies of geostyler. Removing `react-dnd`, `react-dnd-html5-backend`, `react-sortable-hoc` from our dependency list will reduce our bundle size.
- **Maintenance**: `react-dnd` has its last release in 2022 and `react-sortable-hoc` is not actively maintained.
- **Better fit for modern requirements**: A modern toolkit like `dnd-kit` provides more utilities (collision detection, constraints, auto-scroll, etc.) that map well to what Superset needs out of the box.
- **Accessibility**: `dnd-kit` provides built-in accessibility improvements and documentation to improve it even more: https://docs.dndkit.com/guides/accessibility
### Proposed Change
Fully replace `react-dnd` and `react-sortable` with `dnd-kit`. Preferable branching off of React 18 upgrade branch to avoid having to upgrade `react-dnd` first.
### New or Changed Public Interfaces
**Dashboards**: Dragging/resizing charts should continue to work seamlessly with saved dashboards. No changes to dashboard metadata format are expected.
**Filters**: Cross-filter drag-and-drop should remain unchanged from a user perspective.
**Developer interfaces**: Developers extending dashboards may need to adapt if they directly relied on `react-dnd` internals (unlikely but possible).
End users should not experience breaking changes if migration is successful.
### New Dependencies
`@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`, `@dnd-kit/utilities` - all actively maintained under MIT License.
### Migration Plan and Compatibility
1. **React 18 Upgrade (Core Migration already underway)**
Upgrade Superset frontend to React 18 and confirm that `react-dnd` is not upgraded (skipped) since we will remove it.
**Refactor all Drag-and-Drop functionality to use dnd-kit:**
- **Dashboards**: Replace all `react-dnd` usage with `@dnd-kit/core` and `@dnd-kit/sortable`. Validate layout persistence, chart rearrangement, and resizing.
- **Refactor filters**: Migrate drag-and-drop interactions to `dnd-kit`.
- Run tests and visual regression checks to confirm feature parity.
2. **Stabilization**
- Fix edge cases (nested layouts, cross-container drag).
- Ensure accessibility testing with keyboard and screen readers.
3. **Removal of Legacy Dependencies**
- Once validated, remove `react-dnd` and `react-dnd-html5-backend` entirely.
### Rejected Alternatives
1. **Stay on `react-dnd`**
- **Pros**: Minimal code churn in the short term (no need to re-learn a new API immediately).
- **Cons**: `react-dnd` is increasingly outdated compared to `dnd-kit`, with less active development.
- `react-dnd` has slower adoption of modern React patterns (e.g., concurrent rendering in React 18).
- Community momentum has shifted toward `dnd-kit`, meaning long-term maintenance risk if `react-dnd` stagnates.
- Upgrading to React 18 first and later migrating to `dnd-kit` would result in two breaking migrations instead of one.
2. **Wait for a future Superset refactor to adopt `dnd-kit`**
- **Pros**: Spreads out work and reduces scope of the current React 18 upgrade.
- **Cons**: Defers inevitable migration and makes future migration harder:
- More Superset components will depend on `react-dnd` over time, increasing migration cost later.
- Future users and contributors may build new features around `react-dnd`, adding tech debt that must later be reworked.
- Missing the opportunity to align with the React 18 upgrade means Superset may require multiple disruptive migrations.
3. **Use a custom in-house drag-and-drop abstraction**
- **Pros**: Maximum control over APIs and interaction patterns.
- **Cons**: Requires continuous maintenance and Superset's contributors lose the benefit of a robust open-source community.
- Both `react-dnd` and `dnd-kit` are well-tested; building a new solution would add unnecessary risk.
- Would not provide significant advantages beyond what `dnd-kit` already offers.
4. **Adopt `react-beautiful-dnd`**
- **Pros**: Very popular, user-friendly API, good documentation, strong adoption in the React ecosystem.
- **Cons**: Project is in **maintenance mode** (no active development since Atlassian stopped maintaining it).
- No official support for React 18 concurrent rendering.
- Known performance limitations with large lists compared to `dnd-kit`.
- Using this would trade one aging library (`react-dnd`) for another.
5. **Adopt `@hello-pangea/dnd` (community fork of `react-beautiful-dnd`)**
- **Pros**: Actively maintained fork of `react-beautiful-dnd`, with bug fixes and React 18 support.
- **Cons**: Still tied to the original design decisions and performance constraints of `react-beautiful-dnd`.
- Focused primarily on list reordering use cases, while Superset requires more flexible drag-and-drop interactions (layout building, dashboards, etc.).
- Community smaller than `dnd-kit`.
6. **Adopt `@atlaskit/pragmatic-drag-and-drop`**
- **Pros**:
- Official successor to `react-beautiful-dnd`, created and maintained by Atlassian.
- Actively developed with modern React and TypeScript support.
- Lightweight, composable primitives instead of opinionated abstractions, giving more flexibility than `react-beautiful-dnd`.
- Good fit for React 18's rendering model.
- **Cons**:
- Still relatively new, with a smaller ecosystem and fewer real-world production examples compared to `dnd-kit`.
- Documentation and community adoption are not yet as mature as `dnd-kit`. One-way mirror to their internal repo and doesn't accept open source contributions.
- Designed with Atlassian's use cases in mind, which may not fully align with Superset's complex dashboard interactions.
- Migration effort similar to `dnd-kit`, so it offers no clear advantage for Superset over the more widely adopted `dnd-kit`.
--
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.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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "EnxDev (via GitHub)" <gi...@apache.org>.
EnxDev commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3303436640
+1!
--
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: [I] [SIP] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "alexandrusoare (via GitHub)" <gi...@apache.org>.
alexandrusoare commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3299598792
+1!
--
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: [I] [SIP] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "geido (via GitHub)" <gi...@apache.org>.
geido commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3299324914
+1!
--
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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3299718671
+1!
--
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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz closed issue #35157: [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit
URL: https://github.com/apache/superset/issues/35157
--
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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3366183267
Closing this the as it PASSED!
--
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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3329702037
+1
--
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: [I] [SIP-184] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3882689307
One step on the journey: https://github.com/apache/superset/pull/37445
--
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: [I] [SIP] Proposal for migrating from react-dnd and react-sortable-hoc to dnd-kit [superset]
Posted by "kgabryje (via GitHub)" <gi...@apache.org>.
kgabryje commented on issue #35157:
URL: https://github.com/apache/superset/issues/35157#issuecomment-3297542557
+1, dnd-kit feels more modern and easy to use than react-dnd
--
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