matthias/loggi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[loggi-749] Move stats reorder into customize modal & fix SortableJS crash #108

New issue
Closed
opened 2026-02-21 17:36:40 +01:00 by matthias · 0 comments
matthias commented 2026-02-21 17:36:40 +01:00
Owner
Copy link

Bead ID: loggi-749
Type: bug
Priority: P2
Status: closed
Close reason: Removed drag handles from stats grid cards. Moved chart reordering into the customize modal using SortableJS on the modal list. Each chart row now has a drag grip + visibility toggle. Reset to Defaults restores both visibility and order. Fixed the SortableJS crash (no multi-word classes passed). Kept SortableJS CDN script for modal use.

Problem

Bug

initSortable() in stats.js passes multi-word Tailwind classes to SortableJS options (chosenClass: "ring-2 ring-primary/40 rounded-2xl"). SortableJS internally uses classList.add(), which throws DOMException: DOMTokenList.add: The token can not contain whitespace. This completely breaks drag-and-drop reordering.

UX

Drag handles on individual stat cards clutter the main grid and are easy to accidentally trigger on mobile. The customize modal already handles chart visibility — reordering belongs there too.

What to do

  1. Remove drag handles from the stats grid cards — delete DRAG_HANDLE_HTML usage in card builders and the initSortable() call on the main grid.
  2. Add a sortable list inside the customize modal — each chart gets a draggable row (toggle + label + grip handle). Use SortableJS on the modal list instead. Since the modal list is simple <label> elements, the whitespace class bug doesn't apply (use single-token classes or avoid custom classes).
  3. Persist order — keep the existing localStorage order key (loggi-plot-order-{entryId}), just wire it to the modal list instead of the grid.
  4. Remove the SortableJS <script> tag from entry.html if no longer needed on the grid (it will still be needed for the modal list).

Files

  • app/static/js/stats.js — remove initSortable() on grid, remove DRAG_HANDLE_HTML, add sortable list to openPlotCustomize()
  • app/templates/entry.html — keep SortableJS CDN script (still needed for modal)

Acceptance criteria

  • No console errors when opening the stats tab
  • Charts can be reordered via the customize modal
  • Order persists across page reloads
  • Reset to Defaults restores both visibility and order
  • No drag handles visible on the main stats grid

Dependencies:

  • blocks: loggi-2ze
**Bead ID:** `loggi-749` **Type:** bug **Priority:** P2 **Status:** closed **Close reason:** Removed drag handles from stats grid cards. Moved chart reordering into the customize modal using SortableJS on the modal list. Each chart row now has a drag grip + visibility toggle. Reset to Defaults restores both visibility and order. Fixed the SortableJS crash (no multi-word classes passed). Kept SortableJS CDN script for modal use. --- ## Problem ### Bug `initSortable()` in `stats.js` passes multi-word Tailwind classes to SortableJS options (`chosenClass: "ring-2 ring-primary/40 rounded-2xl"`). SortableJS internally uses `classList.add()`, which throws `DOMException: DOMTokenList.add: The token can not contain whitespace`. This completely breaks drag-and-drop reordering. ### UX Drag handles on individual stat cards clutter the main grid and are easy to accidentally trigger on mobile. The customize modal already handles chart visibility — reordering belongs there too. ## What to do 1. **Remove drag handles from the stats grid cards** — delete `DRAG_HANDLE_HTML` usage in card builders and the `initSortable()` call on the main grid. 2. **Add a sortable list inside the customize modal** — each chart gets a draggable row (toggle + label + grip handle). Use SortableJS on the modal list instead. Since the modal list is simple `<label>` elements, the whitespace class bug doesn't apply (use single-token classes or avoid custom classes). 3. **Persist order** — keep the existing `localStorage` order key (`loggi-plot-order-{entryId}`), just wire it to the modal list instead of the grid. 4. **Remove the SortableJS `<script>` tag** from `entry.html` if no longer needed on the grid (it will still be needed for the modal list). ## Files - `app/static/js/stats.js` — remove `initSortable()` on grid, remove `DRAG_HANDLE_HTML`, add sortable list to `openPlotCustomize()` - `app/templates/entry.html` — keep SortableJS CDN script (still needed for modal) ## Acceptance criteria - No console errors when opening the stats tab - Charts can be reordered via the customize modal - Order persists across page reloads - Reset to Defaults restores both visibility and order - No drag handles visible on the main stats grid **Dependencies:** - blocks: `loggi-2ze`
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
beads-sync
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
matthias/loggi#108
No description provided.