# Frontend User Guide β€” Dashboard Tabs This short guide explains the purpose of each tab in the frontend `Dashboard.jsx` and what a typical user needs to know to use them. Checklist - Describe each Dashboard tab and its main actions - Keep explanations short and aimed at end users (operators / engineers) - Include a couple of quick tips and common issues Quick start 1. Start the backend (Flask): run the Python backend as your project requires (commonly `python main.py`). 2. Start the frontend: from the `frontend` folder run `npm run dev` (Vite development server). 3. Open the UI at the configured address (usually http://localhost:5173/app or root served path). Tabs overview 1) Config (πŸ”§) - Purpose: configure PLC connection and UDP/streaming settings. - What you do here: edit connection parameters (IP, rack/slot, DB mappings), UDP target and sampling interval, and save the PLC configuration. - Main actions: Save configuration, Import/Export the PLC config (JSON), Reset the form. - Tip: If the form shows "Loading..." wait for the backend to respond or check backend logs. 2) Datasets (πŸ“Š) - Purpose: define logical datasets and the PLC variables that belong to each dataset. - What you do here: - "Dataset Definitions" card: add, edit or remove datasets (name, id, metadata). - "Dataset Variables" area: choose a dataset (combo selector) and configure its variables and streaming settings. - Main actions: add dataset, save all datasets, import/export full dataset files or single dataset variables. - Tip: Create datasets first, then select a dataset to add variables for streaming/recording. 3) Plots (πŸ“ˆ) - Purpose: define real-time plots and map variables to visual traces. - What you do here: configure plots (plot id, name, variables to show), manage sessions, and export plot definitions. - Main actions: Add/modify plots, start a plotting session in the frontend or launch PlotJuggler for advanced visualization (if available). - Tip: Use export/import to share plot templates with colleagues. 4) Historical (πŸ“‰) - Purpose: explore recorded (CSV) historical data and play it back or export slices. - What you do here: open historical sessions, choose time ranges or files, and replay or export subsets for analysis. - Main actions: load CSV sessions, playback controls, export data subset. - Tip: For large datasets, prefer server-side filtering or export to file and analyze offline. 5) CSV Files (πŸ“) - Purpose: browse stored CSV recordings created by the streamer. - What you do here: view file list, download selected CSVs, and see recording metadata (timestamp, size). - Main actions: Download, inspect file names and timestamps. - Tip: Check disk space and retention policy in the backend if recordings stop appearing. 6) Logs (πŸ“‹) - Purpose: view recent application logs and events for troubleshooting. - What you do here: read recent log lines, refresh the view and export logs to a file. - Main actions: Refresh logs, Export logs. - Tip: If the UI shows backend disconnected, open backend logs (`main.py` / `logs/`) to diagnose. Common issues & troubleshooting - Backend disconnected: StatusBar will show a connection error. Verify `main.py` is running and there are no firewall issues. - Import errors: Use the corresponding exported file as a template (array vs object shape matters). Single-item import expects one array element’s structure. - Empty lists: "Add First Item" buttons appear in empty array forms β€” use them to create the initial configuration. If you want, I can: add small JSON examples for each tab (sample dataset, variables, plot definition), translate this guide to Spanish, or embed screenshots.