feat: implement Dimension modal component [DHIS2-20667] #112
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Copied from PR#111
Move and delete dimension operations.
|
🚀 Deployed on https://pr-112.event-visualizer.netlify.dhis2.org |
edoardo
commented
Dec 10, 2025
edoardo
commented
Dec 10, 2025
edoardo
commented
Dec 10, 2025
edoardo
commented
Dec 10, 2025
HendrikThePendric
requested changes
Dec 15, 2025
Collaborator
HendrikThePendric
left a comment
HendrikThePendric
left a comment
There was a problem hiding this comment.
Looking good! I did leave a few comments though.
edoardo
commented
Dec 15, 2025
src/components/plugin-wrapper/hooks/use-line-list-analytics-data.ts
Outdated
Show resolved
Hide resolved
HendrikThePendric
approved these changes
Dec 15, 2025
edoardo
force-pushed
the
feat/dimension-modal
branch
from
8f059ae to
5c9e1f8
Compare
edoardo
changed the title
HendrikThePendric
pushed a commit
that referenced
this pull request
Dec 16, 2025
HendrikThePendric
added a commit
that referenced
this pull request
Jan 5, 2026
* chore: add dnd-kit dependency * refactor: make ChipBase a purely presentational component * chore: add reducers to add move and remove dimensions from the layout * chore: add drag and drop provider components * chore: add DndContextProvider to AppWrapper * chore: make Axis a SortableContext with axis id * chore: add DndMonitor to DnDContextProvider * chore: make chip draggable WIP * chore: add tests for reordering same axis * chore: tweak drag-and-drop-types * chore: refactor DimensionMonitor component to useDimensionDragEndMonitor hook and implement correct sorting * chore: implement insert marker and dragging onto empty dimension * fix: do not use DnD hooks outside of their context * chore: add tests for `useOnDragEnd` * chore: fix unit tests * chore: defer implementation of adding metadata to store from sidebar * fix: use chip-end activation div for all chips This helps when the chips are multiple lines: this way you can always insert after and before any given chip * feat: implement Dimension modal component [DHIS2-20667] (#112) * chore: delegate sorting responsibility fully to the reducer * chore: omprove DnD testing by adding provider to mock app and adding test attributes * chore: implement sorting logic in reducer and tests for edge cases * fix: do no show insert marker on chips adjacent to the active chip * chore: fix cypress component drag-and-drop test * fix: do not show insert marker on adjacent items * fix: drag to empty axis bug and prevent types being any * chore: add tests for insert marker display logic * chore: fix types again * chore: tweak dragging styles * chore: remove displayName from LayoutDimension * chore: rename deleteVisUiConfigLayoutDimension to removeVisUiConfigLayoutDimension * chore: exclude active item from collisions * chore: remove empty axis drop area and make axis a drop zone * chore: fix metadata store dev tools * chore: improve collision detector * chore: improve chip dragging behaviour * fix: prevent flash when entering chip at end * fix: reimplement insert marker to address jumpiness * chore: fix failing DnD Cypress tests * chore: add unit test for marker visibility and position --------- Co-authored-by: Edoardo Sabadelli <edoardo@dhis2.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements DHIS2-20667
Description
This PR adds the DimensionModal component.
This renders the modal, modal title and action buttons.
The content for the modal is going to be implemented in several components depending of the dimension type.
The PR also has some fixes on types.
The Chip menu actions are now connected to the Redux store, so it's possible to move a dimension between the layout axes and remove a dimension from any axes.
The same reducer action is used for the split button in the dimension modal, which shows for dimensions that are not yet added to the layout (ie. in the main sidebar).
Quality checklist
Add N/A to items that are not applicable and check them.
ToDos
GenericMetadataItemtype I added to avoid type errors innormalisation.spec.ts.Screenshots
Examples of dimension modal opened:
