Posts Tagged ‘Visualization’
[OxidizeConf2024] Unlocking the Potential of Reusable Code with WebAssembly
Reusing Rust Code in Web Applications
WebAssembly (WASM) has emerged as a transformative technology for reusing backend code in web applications, offering portability and performance across platforms. At OxidizeConf2024, Georg Semmler and Jonas Klein from Giga Infosystems presented a compelling case study on leveraging Rust and WebAssembly to enhance a geological subsurface modeling system. Their project, developed for a German federal agency, involved reusing computationally intensive Rust code for generating virtual boreholes in both backend systems and a 3D web viewer, showcasing WebAssembly’s potential to bridge backend and frontend development.
The GST system, comprising a Rust-based backend, a TypeScript-based web application, and a desktop client, manages large geological models with millions of triangles. Georg and Jonas explained how the virtual borehole feature, which calculates intersections between a cylindrical probe and subsurface layers, was initially implemented in Rust for the backend. By compiling this code to WebAssembly, they enabled the same functionality in the web viewer, allowing users to validate models against real-world data in real time, a critical requirement for geological analysis.
Implementing WebAssembly Workflows
The implementation process involved several key steps, which Georg detailed with clarity. The team used the wasm32 target to compile Rust code into WebAssembly binaries, leveraging Rust’s robust tooling, including Cargo and wasm-bindgen. This library facilitated seamless integration with JavaScript, enabling type-safe communication between the Rust code and the web application. To avoid blocking the main thread, the team employed web workers and Comlink, a library that simplifies worker communication, alongside shared array buffers to minimize data copying.
Performance comparisons underscored WebAssembly’s advantages. For a small model with 300,000 triangles, the Rust-WebAssembly implementation computed intersections in 7 milliseconds, compared to 100 milliseconds for an unoptimized TypeScript version. For larger models, the performance gap widened, with WebAssembly significantly outperforming TypeScript due to its native execution speed. However, Jonas noted challenges, such as WebAssembly’s 2GB memory limit, which required careful optimization of data structures to handle large geometries.
Real-World Impact and Future Directions
The adoption of WebAssembly in the GST system has profound implications for geological applications, particularly in public communication and geothermal energy exploration. Jonas highlighted use cases like visualizing radioactive waste disposal sites and assessing subsurface potential, which benefit from the system’s ability to handle complex 3D models. The team’s success in reusing Rust code across platforms demonstrates WebAssembly’s potential to streamline development, reduce duplication, and enhance performance.
Looking forward, Georg and Jonas plan to optimize memory usage further and explore additional WebAssembly use cases, such as integrating game logic for interactive visualizations. Their work underscores the importance of community collaboration, with contributions to open-source WebAssembly tools enhancing the ecosystem. By sharing their approach, they inspire developers to leverage Rust and WebAssembly for efficient, reusable code in data-intensive applications.
Links:
[NodeCongress2021] How We Created the Giraffe Libraries for Time Series Data – Zoe Steinkamp
Time series visualization poses unique demands, especially when datasets balloon into millions of points, requiring both performance and expressiveness. Zoe Steinkamp recounts the genesis of Giraffe, InfluxData’s open-source React-based library, designed to render such data fluidly within the InfluxDB UI and beyond. Her overview demystifies its architecture, showcasing how Flux query outputs translate into dynamic charts.
Giraffe ingests annotated CSV streams—enriched with metadata like group keys and data types—from InfluxQL or Flux, bypassing raw parsing overheads. This format, marked by hashed headers, facilitates layered rendering, where plots compose via React components. Zoe highlights its decoupling from InfluxDB, allowing integration into diverse apps, from solar monitoring dashboards to mobile analytics.
Core Mechanics: From Data Ingestion to Layered Rendering
Giraffe’s plot primitive accepts a config object housing CSV payloads and layer definitions, dictating visualization types—lines, bars, gauges, or histograms. Zoe dissects a line layer: specifying X/Y axes, color schemes, and themes yields customizable outputs, with algorithms downsampling dense series for smooth interpolation. A hardcoded example—plotting static coordinates—illustrates brevity: mere objects define series, rendering SVG or canvas elements reactively.
For InfluxDB synergy, the JS client fetches queried data via URL, token, and bucket parameters, piping annotated CSVs directly. Zoe notes server-side rendering limitations, favoring client hydration for interactivity, while the Storybook sandbox—launched via Yarn—exposes 30+ prototypes, including nascent maps and candlesticks, for tinkering.
Extending Giraffe: Samples and Ecosystem Integration
Zoe furnishes code snippets for HTML embeds or React apps, emphasizing modularity: swap Flux for custom sources, layer heatmaps atop gauges. This extensibility positions Giraffe as a versatile toolkit, empowering Node.js developers to embed time series prowess without bespoke engines, all while inviting community contributions via GitHub.