Skip to content

Added list view option for data display and collapsing data cards.#9

Merged
haoruizhou merged 15 commits into
dev-mainfrom
dev-base-frontend
Nov 18, 2025
Merged

Added list view option for data display and collapsing data cards.#9
haoruizhou merged 15 commits into
dev-mainfrom
dev-base-frontend

Conversation

@elisedrouillard
Copy link
Copy Markdown
Contributor

  • Added a menu on the dashboard page to switch between view options
  • list and grid style data display available
  • Added collapsing functionality for data cards

@haoruizhou
Copy link
Copy Markdown
Contributor

Looking great!
For the DataCards, collapsing is currently in a secondary menu.
Screenshot 2025-10-25 at 1 27 51 PM

I recommend to allow triggering collapse/uncollapse by clicking the middle header as well.
Screenshot 2025-10-25 at 1 29 14 PM

- Remove content hashes from font file names
- Limit font names to 20 chars for ESP32 file system
- Generates clean names like 'ZipSonik-Italic.otf' instead of 'ZipSonik-Italic-M4NJSfvc.otf'
@numcap
Copy link
Copy Markdown
Contributor

numcap commented Oct 27, 2025

I absolutely love the data view, is there a way we can have the card collapse if only 1 of the the cards in the row collapse
image
like have the the 194 fill in the empty space

i think having a flex column in each column could help

Ellaharding1 and others added 7 commits November 3, 2025 16:02
- Add DataStore.ts: Singleton data store with 30s rolling window
- Add useDataStore.ts: React hooks for easy component integration
- Update Dashboard.tsx: Use DataStore instead of local state
- Implements all requirements from task spec
- Create WebSocketService.ts to manage WebSocket connection lifecycle
- Move CAN processor initialization from Dashboard to service
- Simplify Dashboard.tsx to focus on display logic only
- WebSocket now persists across page navigation
- Add automatic reconnection logic (up to 5 attempts)
- Update .gitignore for node_modules
…sed cards, and allowed cards to be collapsed from message name header.
@elisedrouillard
Copy link
Copy Markdown
Contributor Author

  • Integrated DataStore into DataCard and DataRow
    • Can be tested using the "Process Test Messages" button
  • Fixed issue with gaps between collapsed cards and next row by using two columns
  • DataCards can now be collapsed / expanded by clicking the Message Name header tab
  • Made the performance tab sticky at the bottom of the display, so its always visible

Replaced dynamic fetching of the DBC file with direct import using Vite's ?raw loader. Updated WebSocketService and canProcessor to use the new approach.
@haoruizhou
Copy link
Copy Markdown
Contributor

Tested the changes with the process button as well as websocket_sender.py script.

Issue: DBC file wasn't loading - fetch('/assets/dbc.dbc') returned HTML instead
Root cause: Vite doesn't serve files from src/assets/ via URL

Solution: Import DBC as raw text using Vite's ?raw suffix

  • Changed from: fetch('/assets/dbc.dbc')
  • Changed to: import dbcFile from '../assets/dbc.dbc?raw'
  • Updated createCanProcessor() to use imported file instead of fetch

@haoruizhou haoruizhou merged commit fbb7900 into dev-main Nov 18, 2025
@haoruizhou haoruizhou deleted the dev-base-frontend branch November 22, 2025 00:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants