Dynamic generation of Grafana dashboards based on user-selected hydrophones and associated plots. Upon submission of a UI form, (1) the selection info are stored in a node cache object and (2) a dashboard JSON is programmatically created. This JSON includes the required panels based on selected hydrophones and plot types (e.g., Octave, Noise, PDF, Spectrograms), and configures a unified API endpoint that delivers the response used by all panels. Each panel extracts and renders its data using a dedicated root_selector and a dynamically generated options.script
The plots to consider:
• OC
• NOISE
• PDF
• SPECTROGRAM1
• SPECTROGRAM2
Where each plot can be selected in two frequency bands: LF (Low Frequency) and HF (High Frequency).
Dynamic Dashboard Generation
1. User Interaction
Users select from:
o Up to 10 plot types (LF/HF combinations of OC, NOISE, PDF, SPECTROGRAM1, SPECTROGRAM2)
o One or more hydrophones. Maximum of 4 hydrophones.
2. Dashboard JSON Generation
For each (hydrophone, plot) combination:
o A unique root_selector is assigned using the format:
hydrophoneId-FrequencyBand-PlotType (e.g., hydro1-LF-OC)
o The options.script field for the panel is dynamically constructed based on Plot type and as per the plot rendering logic required for each plot type such as OC, PDF.
3. Unified API Integration
All panels reference a single API endpoint for data.
The API returns a JSON object where each key corresponds to a root_selector, and its value is the respective dataset:
{
"hydro1-LF-OC": [...],
"hydro1-HF-NOISE": [...],
...
}
4. root_selector filters the API response to the dataset relevant for the panel.
5. options.script generated dynamically per panel uses the data in required plot format
6. Cache and API Refresh Logic
• User selections (hydrophoneId-FrequencyBand-PlotType) are cached on the server along with user selected values for month and year
• Upon each refresh, the API endpoint uses cached selection info to:
o Identify required hydrophoneId-FrequencyBand-PlotType keys
o Determine the timestamp of the last data sent for each key
• The data retrieval logic queries only new data (incremental fetch) based on the last timestamp.
• The API returns an updated JSON object:
{
"hydro1-LF-OC": [],
"hydro1-HF-PDF": []
}
• Panels automatically use their root_selector to extract and render the new data.