The document provides a complete technical blueprint for building a standalone React web application that reports agricultural variety performance. It addresses five core concerns: (1) state management for a multi‑level cascading filter hierarchy (crop → MET dataset → state → region → site) recommending a centralized Zustand store combined with TanStack Query for data fetching and caching; (2) selection of a charting library, concluding that Nivo with custom SVG layers best supports bar charts with error bars and per‑trial point overlays; (3) Excel export implementation, advocating ExcelJS (with FileSaver) to preserve cell‑level colour‑coding; (4) performance strategies for handling tens of thousands of records, emphasizing Web Workers for heavy calculations, memoised selectors, and virtualisation (TanStack Virtual) for large tables; and (5) a feature‑slice component architecture that isolates concerns (auth, filters, tables, charts, tabs, export) to improve maintainability and AI‑assisted development. The guide also includes concrete code snippets for the Zustand store, selector utilities, TanStack Query integration, Nivo custom layers, Excel export service, and a stats Web Worker, plus notes on Microsoft Entra External ID authentication using @azure/msal‑react.
Topics
Zustand‑Based Cascading Filter Store with TanStack Query Integration
Design of a centralized Zustand store that holds five interdependent filter levels, automatically resets downstream filters on change, and provides atomic selectors to minimise re‑renders; coupled with TanStack Query for caching API responses per filter combination.
Nivo Bar Charts with Custom Error‑Bar and Trial‑Dot Layers
Rationale for choosing Nivo over Recharts, Chart.js, and Victory, and detailed pattern for injecting a custom D3‑powered SVG layer to render statistical error bars and individual trial markers on stacked bar charts.