Editor mode switch and full-screen dashboard (0.12.0) - #12
Merged
Merged
Conversation
The editor is one segmented control instead of a row of toggles: six icon segments — view / edit / code / chat / calcs / docs — at the left of the topbar, before the dashboard name, exactly one active, so the lit icon always says what the screen is showing. It replaces the Preview button and the three panel toggles. The dashboard is full width by default. The two-column split with its draggable divider is gone; `view` is where you land and the dashboard has the window to itself. `edit` keeps it full width and switches on the on-canvas affordances — drag-to-resize, chart toolbars, add buttons — so nothing covers what you are rearranging. The server already rendered the editor chrome and the client hid it with CSS, so a mode change is a class on `.layout` and costs no re-render. The other four modes open a panel *beside* the dashboard, never over it, because every one of them is used while looking at it. That split is draggable and the width is remembered in localStorage — how much room you want for YAML is a property of you, not of a dashboard you share — clamped so neither pane can be dragged away, and stored on release rather than on every mousemove. Chrome removed: no close buttons on panels (the switch is the only way in or out, Esc as a shortcut) and no panel headers. Every button in the calcs manager is an icon, as are the filter builder's add/remove that the chart edit modal shares. The pencil lost its underline stroke so every pencil in the product matches, and the assistant's speech bubble became a robot. Three bugs found on the way, all mine and all caught in the browser rather than by the suite: - Leaving `code` mode left its column behind: `setMode` removed the mode classes from a hand-written list that `code` was never added to, so the grid survived and the dashboard stayed pinned beside an empty column. The list is derived from MODES now, and the split is keyed off one `panel-open` class rather than per-mode rules, so neither can drift again. - The panels were nested inside the output pane, where `grid-area` cannot place them — the split silently did nothing and the YAML rendered below the dashboard. They are direct children of `.layout` now. The test that missed this read the CSS; the replacement parses the DOM, which is the only thing that can catch a structural mismatch. - `syncNameFromYaml` ran only from the textarea's `input` event, which setting `.value` never fires, so renaming through chat left the old name in the topbar. `run()` refreshes it alongside Save state now. Minor bump: editor UI only, no change to the dashboard format or the API. 539 tests pass.
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
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.
The editor is one segmented control instead of a row of toggles: six icon segments — view / edit / code / chat / calcs / docs — at the left of the topbar, before the dashboard name, exactly one active, so the lit icon always says what the screen is showing. It replaces the Preview button and the three panel toggles.
The dashboard is full width by default. The two-column split with its draggable divider is gone;
viewis where you land and the dashboard has the window to itself.editkeeps it full width and switches on the on-canvas affordances — drag-to-resize, chart toolbars, add buttons — so nothing covers what you are rearranging. The server already rendered the editor chrome and the client hid it with CSS, so a mode change is a class on.layoutand costs no re-render.The other four modes open a panel beside the dashboard, never over it, because every one of them is used while looking at it. That split is draggable and the width is remembered in localStorage — how much room you want for YAML is a property of you, not of a dashboard you share — clamped so neither pane can be dragged away, and stored on release rather than on every mousemove.
Chrome removed: no close buttons on panels (the switch is the only way in or out, Esc as a shortcut) and no panel headers. Every button in the calcs manager is an icon, as are the filter builder's add/remove that the chart edit modal shares. The pencil lost its underline stroke so every pencil in the product matches, and the assistant's speech bubble became a robot.
Three bugs found on the way, all mine and all caught in the browser rather than by the suite:
codemode left its column behind:setModeremoved the mode classes from a hand-written list thatcodewas never added to, so the grid survived and the dashboard stayed pinned beside an empty column. The list is derived from MODES now, and the split is keyed off onepanel-openclass rather than per-mode rules, so neither can drift again.grid-areacannot place them — the split silently did nothing and the YAML rendered below the dashboard. They are direct children of.layoutnow. The test that missed this read the CSS; the replacement parses the DOM, which is the only thing that can catch a structural mismatch.syncNameFromYamlran only from the textarea'sinputevent, which setting.valuenever fires, so renaming through chat left the old name in the topbar.run()refreshes it alongside Save state now.Minor bump: editor UI only, no change to the dashboard format or the API.
539 tests pass.