Introduction
For many years, there has been an expectation for web front-ends to function like native mobile or PC applications, ensuring users experience no differences in interaction or the range of available features. In one of Apptimia's recent customer projects, we faced several challenges, including implementing interactive timelines, graphs, and more. The system is now successfully in production with our customer.
Thankfully, selecting the right open-source solutions makes such implementations quicker and easier. These days, nobody builds everything from scratch—and nobody wants to pay for that. Stay tuned!
Building an interactive timeline presents challenges beyond typical drag-and-drop. This article explores how interactive visualization, drag-and-drop mechanics, and an adaptive UI were implemented in a system where users can manipulate items along a timeline with specific temporal constraints.
At the core is an interactive graph where each card represents a key resource. Powered by React DnD, users can easily modify relationships between elements and visualize the consequences of their actions.
Throughout this article, we will dive into:
Tools that have been chosen for the implementation.
The drag-and-drop system powered by React DnD.
Challenges faced and solutions implemented.
Custom positioning logic.
Local state management.
Choosing the Right Tools
Selecting the right tools was crucial for our project’s success. When building a complex timeline interface, we needed solutions for:
Dynamic visualization – representing structured relationships intuitively.
Seamless drag-and-drop interactions – enabling easy element modification.
Resizable components – allowing flexible adjustments without breaking the layout.
Responsiveness – ensuring smooth and responsive interactions.
React DnD: Drag-and-Drop Foundation
After evaluating options, React DnD stood out for handling drag-and-drop interactions with:
Complete drag control – precise state tracking and drop logic.
Custom drag previews – ensures correct element positioning.
Hook-based API – keeping components modular and testable.
Built-in touch support – ensuring cross-device consistency.
/* Code Snippet – Dragging mechanism */
const GraphCardLayer = () => {
const { isDragging, item, initialOffset, currentOffset, itemType } = useDragLayer((monitor) => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
initialOffset: monitor.getInitialSourceClientOffset(),
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging(),
}));
const getItemStyles = (initialOffset: XYCoord | null, currentOffset: XYCoord | null) => {
if (!initialOffset || !currentOffset) {
return { display: 'none' };
}
const transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
return {
transform,
WebkitTransform: transform,
};
};
if (!isDragging) {
return null;
}
return (
<div className="fixed left-0 top-0 pointer-events-none z-50">
<div style={getItemStyles(initialOffset, currentOffset)}>
{/* Drag preview content */}
</div>
</div>
);
};/* Code Snippet - Dropping mechanism */
const [{ droppedItemIdx, draggedItemIdx }, drop] = useDrop(
() => ({
accept: [ItemTypes.GRAPHCARD, ItemTypes.ACTIONCARD],
drop: (item: Item, monitor) => {
if (item.idx == null) {
handleActionDetails(item);
} else {
moveGraphCard(monitor);
}
},
collect: (monitor) => ({
droppedItemIdx: monitor?.getItem()?.idx,
draggedItemIdx: idx,
isOver: !!monitor.isOver(),
monitor,
}),
hover() {
handleSwapping();
},
}),
[swappedArray, actionCards]
);Enhancing Flexibility with Re-Resizable
To support dynamic resizing, Re-resizable provided:
Timeline duration adjustments – direct resizing with constraints.
Interactive element flexibility – allowing structured modifications.
Grid snapping – ensuring accurate alignment.
Data-Driven Visualization with Victory.js
For structured visualizations, Victory.js offered:
Customizable graph – smart solution for business structures.
Scalability – possibility to create a complex graph pattern for further adjustments.
Built-in support for custom data components.
Powerful container components for complex interactions.
Architecture Overview
The architecture of our interactive timeline system was designed around two primary components that work in harmony to create a seamless user experience:
Timeline grid.
Interactive graph elements.
Component Structure
The timeline grid forms the system’s foundation, managing the time-based coordinate system, scroll behavior, and item positioning. It uses virtual scrolling for large time ranges and ensures precise conversion between time units and pixels. Each item is a self-contained component that handles its own drag, drop, and resize states, while syncing with the parent timeline.
Arcitecture Diagram
Core Implementation Challenges
A key part of our system is the time-to-pixel conversion mechanism, translating temporal data into visual coordinates. It supports various time scales, ensuring accurate item positioning.
Dragging and Repositioning
Our React DnD-powered drag-and-drop system ensures a seamless planning experience. Users can move cards freely with real-time updates, while auto-scrolling adapts to large timelines. Scrollbars appear only when needed. Cards align to time intervals with visual feedback for precision, and stacking indicates priority.
Resizing to Adjust Duration
Users can resize cards by dragging the right edge, adjusting durations effortlessly. Real-time feedback, snapping, and dynamic time-to-pixel conversion ensure precision. Adaptive handles and visual guides enhance usability across different timeline scales.
/* Code Snippet */
<Resizable
className="@container relative rounded-full"
enable={{
right: !readOnlyMode,
}}
handleStyles={ stylesObject }
size={{
width: currentWidth,
height: cardHeight,
}}
minWidth={pxPerMonth}
grid={[pxPerMonth, 1]}
onResizeStart={() => {
setIsResizing(true);
}}
onResizeStop={(e, direction, ref, d) => {
const newWidth = currentWidth + d.width * pxPerMonth;
setEndDateDifference(newWidth);
setIsResizing(false);
}}
>
/* Interactive Content */
</Resizable>Drop Zone Management
Drop zone system enables intuitive reordering while enforcing temporal constraints. It dynamically calculates valid drop zones, preventing conflicts and ensuring logical placement. Cards snap into position while allowing flexible reordering, maintaining control and data integrity.
State Synchronization – Optimizing Back-end Updates
Our system uses a local-first approach for real-time interactivity and back-end integrity. Changes update instantly in React state without constant API calls. Modifications are stored locally and submitted upon finalization, reducing network load and enhancing responsiveness.
Consolidation – Visualizing a complex interactive graph
Optimizing the interactive timeline required balancing functionality, performance, and usability. By integrating React DnD for drag-and-drop functionality, Victory.js for data visualization, and Re-resizable for flexible layout adjustments, a robust system was developed for managing and visualizing time-based data with dynamic user interactions. Key innovations like drop zones, adaptive resizing, and local-first state management ensure precision, real-time feedback, and efficient back-end sync.
Maciej B., Senior Software Engineer at Apptimia
Paweł K., Senior Software Engineer at Apptimia
Looking for the development of Modern Web Applications based on ReactJS?
Apptimia has delivered many software projects with advanced front-end capabilities and top-notch UX/UI. Get in touch with us, if you are need to develop modern web applications with ReactJS in your projects.