The Problem: Multi-Document Workflow in a Browser The laboratory workflow required users to compare multiple samples side by side while reviewing results, graphs, and supporting data. The traditional one-page-at-a-time web pattern was not a good fit.
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 exporting reports with graphs that matched the browser view closely enough to be useful outside the application.
Browser-native screenshot APIs struggled with SVG content rendered by D3, so I built a custom export path that serializes the SVG and renders it through an offscreen Canvas before including it in the report.
