Mine Pile Visualizer — Stockpile & Circuit Topology Explorer
Published:
A local-first visualization platform for exploring mining circuit topology, live material state, stockpile 3D structure, and historical profiler data. Built on Next.js 16 with React 19 and TypeScript, it consumes app-ready cached outputs from a mineral tracking simulation engine and presents them through four dedicated operator workspaces.
Business context
Mineral tracking systems generate vast amounts of operational data — belt block compositions, stockpile voxel states, quality distributions, temporal evolution. The raw data exists, but operators and process engineers need structured, route-specific views to answer operational questions: What is the current state of each stockpile? How has the feed quality evolved over the last shift? Where in the circuit are quality deviations occurring?
Key Performance Indicators — Process impact
| KPI | Baseline | With Mine Pile Visualizer | Impact |
|---|---|---|---|
| State visibility | Tabular reports, delayed | Interactive 2D/3D views, real-time cache | Spatial understanding of material state |
| Decision context | Fragmented data sources | Four dedicated workspaces, one per question | Focused operator workflows |
| Historical review | Manual data extraction | Profiler workspace with snapshot navigation | Shift-to-shift trend analysis |
| Circuit understanding | Static diagrams | Interactive topology with flow roles and anchors | Live operational context |
Four operator workspaces
Circuit
Structural reading of the modeled mining area. Interactive 2D/3D circuit topology diagram showing stages, nodes, edges, flow roles, and anchor inventory. Built with @xyflow/react and dagre for automatic graph layout.
Live
Dense current-state inspection. Belt block compositions, stockpile voxel rendering (3D with @react-three/fiber + instancedMesh), mass histograms, quality distributions. Answers: What is happening right now?
Profiler
Historical summarized reading. Snapshot navigation through time, quality time-series, delta comparisons between snapshots. Answers: How has this evolved over the shift/day/week?
Simulator
Pile-centered discharge reading. Central pile structure, discharge routes, grouped reclaim sequences. Answers: Where does the material go when we extract?
Pile cells: (ix, iy, iz, massTon, timestamps, quality columns)
Belt blocks: (position, massTon, timestampOldest/Newest, qualities)
Dense binary format for sub-second loading of voxel datasets with thousands of cells
Technical stack
- Framework: Next.js 16 (App Router) + React 19 + TypeScript 5
- 2D Diagrams:
@xyflow/react+dagrefor circuit topology - 3D Rendering:
@react-three/fiber+ Three.js +dreifor stockpile voxels - Data Format: Apache Arrow IPC for dense block/cell datasets
- Validation: Zod 4 for runtime contract enforcement
- Testing: Vitest (unit/component) + Playwright (E2E)
- Local-first: No external services — reads app-ready cache from local filesystem
Live application
Recent updates
v1.00.001 (April 2026): Folded the Stockpiles workspace into Live (Piles/VPiles). Resolved 3D voxel rendering issue — moved from fragile instance-color to explicit merged visible-geometry approach.