The Problem: Multi-Document Workflow in a Browser NEMKO Norlab is one of Norway's largest testing and certification laboratories. Their analysts needed to compare multiple laboratory samples side-by-side - examining test results, graphs, and compliance data simultaneously. The traditional web paradigm of one-page-at-a-time navigation was insufficient for this workflow.
The designers gave me a wonderful challenge: Creating a 'desktop OS' experience in a browser, with multiple windows. No existing React library provided the level of control needed, so I built the windowing system from scratch using the browser's native Drag & Drop API and CSS transforms.
Custom Windowing System Architecture I designed a state management system that tracks every window's position (x, y), size (width, height), z-index (for stacking order), and state (maximized, minimized, normal). Each window is represented as a React component that renders absolutely positioned within a 'desktop' container.
A big problem was that the users would frequently drag windows near the viewport edge, and be unable to pull them back in. I implemented a restraint that prevents windows from being moved outside.
Z-index management was critical to ensure the active window always appears on top. I landed on a stack-based system where clicking a window moves it to the front of the stack and recalculates z-indices for all windows. This required careful event handling to prevent z-index thrashing when users rapidly switch between windows.
For window minimization, I built a custom taskbar component that displays minimized windows as clickable 'tiles'. Clicking a tile restores the window to its previous position and size, which I persist using a reference stored in state. This mimics the behavior of Windows/macOS task management.
The design didn't specify it, but resizing seemed obvious to me, so I implemented it - and it became a valued feature. Resizing windows was implemented using draggable 'grips' at the corners and edges. I calculated new dimensions in real-time as the user drags, enforcing minimum/maximum size constraints to prevent unusable window states.
D3.js Visualization with Interactive Tooltips Laboratory sample data often includes time-series measurements (e.g., temperature over time during stress testing). I used D3.js to build interactive line graphs with hover tooltips that display precise values at each data point.
Some samples had thousands of data points, and rendering all of them was a bad user experience. I implemented an adaptive rendering strategy where the initial view focuses on the most critical recent data. I also built a dynamic axis labeling system that automatically calculates optimal tick intervals to prevent text overlap, regardless of whether the user is viewing 15 samples or a full year of historical data.
Tooltips were particularly tricky in a windowed environment. D3 tooltips typically use absolute positionin relative to the document body, but inside a draggable window, this breaks. I rewrote the tooltip positioning logic to calculate positions relative to the window container, ensuring tooltips stay attached to data points even as the window moves.
PNG Export for Reporting A critical feature was generating official PDF reports that include the D3.js graphs exactly as displayed in the browser. The client needed pixel-perfect reproduction because these reports go to regulatory agencies.
Browser-native screenshot APIs (like `html2canvas`) struggled with SVG content rendered by D3. I built a custom export system that serializes the D3 SVG to a string, injects it into an offscreen canvas, and uses the Canvas API to render it as a high-DPI PNG.
The process: (1) Serialize the D3 SVG with all computed styles inlined (external stylesheets don't transfer), (2) Convert the SVG string to a Blob, (3) Create an Image element from the Blob URL, (4) Draw the Image onto a Canvas with 2x scaling for Retina displays, (5) Export the Canvas as a PNG via `toBlob()`. This produces a 300 DPI image suitable for print.
