Skip to content

Refine plot-builder UI, dark mode, annotations, and batch-generation/download#20

Open
afffe18 wants to merge 1 commit intocodex/2026-04-28_14-04-53-add-syntax-highlighting-for-json-editorfrom
codex/2026-04-28_14-53-41-hide-create_all_data_frames-option
Open

Refine plot-builder UI, dark mode, annotations, and batch-generation/download#20
afffe18 wants to merge 1 commit intocodex/2026-04-28_14-04-53-add-syntax-highlighting-for-json-editorfrom
codex/2026-04-28_14-53-41-hide-create_all_data_frames-option

Conversation

@afffe18
Copy link
Copy Markdown
Collaborator

@afffe18 afffe18 commented Apr 28, 2026

Motivation

  • Reduce UI clutter and fix tab-label interaction issues by hiding the large "create all" readouts and removing the textual generate label from tabs while keeping per-tab checkboxes.
  • Make dark mode visually consistent after regressions introduced by previous changes.
  • Reorganize controls so import/export/reset are more discoverable and move annotation editing into the correct (frame) context.
  • Provide clearer editing for colored areas and inline field help so the frontend matches the backend config semantics in backend/docs/config_explanation.jsonc.

Description

  • Hide the global create_all_dataframes / per-dataframe create_all_frames readouts from the form and keep generation selection as per-tab checkboxes, and removed the word "generate" next to those checkboxes to avoid clickable-label crashes (UI changes in src/App.tsx).
  • Moved Import, Export, and Reset controls from the footer into the top header action bar and removed the old footer row (changes in src/App.tsx).
  • Moved the Annotations editor into a dedicated section directly below Guidelines and renamed sub-setting labels to descriptive names (e.g., "Text offset X/Y") for better UX and clearer JSON-paths (changes in src/App.tsx).
  • Extended colored-areas editing to support the axes JSON structure (which overrides polygon x/y) and relabeled polygon inputs to match backend docs (backend/docs/config_explanation.jsonc) (changes in src/App.tsx).
  • Added localized (EN/DE) field descriptions that are appended to the hover tooltip (keeps JSON-path hint plus a short description) via Field enhancements (changes in src/App.tsx).
  • Improved dark-mode consistency by applying darker card backgrounds and explicit body-level dark background/foreground colors (changes in src/App.tsx and src/index.css).
  • On the Plot preview page, kept Preview and Generate buttons in the preview header, changed Generate to create and display all generated frames stacked below the preview, and added download options for individual files and a single combined HTML file (changes in src/components/PlotPage.tsx).
  • Minor fixes to JSON editor highlighting regex to satisfy linter and avoid unnecessary escape warnings (changes in src/App.tsx).

Testing

  • Ran npm run lint and addressed issues until lint passed successfully (final result: passed).
  • Ran a production build with npm run build to verify TypeScript compilation and Vite bundling (result: build succeeded without errors).

Codex Task

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant