Event Stacking Visualization

Algorithm Behavior:

For Event C (11:00-13:00):
  overlapping = [Event A, Event B]  // Both A and B overlap with C

  Try stackLevel 0:
    ✗ Occupied by Event A (which overlaps C)

  Try stackLevel 1:
    ✗ Occupied by Event B (which overlaps C)

  Try stackLevel 2:
    ✓ Free! Assign C to stackLevel 2

Result: C must be at level 2 (no optimization)

Column Sharing Algorithm:

const FLEXBOX_START_THRESHOLD_MINUTES = 15; // Configurable

function shouldShareFlexbox(event1, event2) {
  const startDiff = Math.abs(event1.start - event2.start) / (1000 * 60);
  return startDiff <= FLEXBOX_START_THRESHOLD_MINUTES;
}

For events A, B, C:
  • A starts at 10:00
  • B starts at 11:00 (diff = 60 min > 15 min) → A and B do NOT share
  • C starts at 11:00 (diff = 0 min ≤ 15 min) → B and C DO share

Result:
  • Event A: stackLevel 0, full width
  • Events B & C: stackLevel 1, flexbox container (50% each)

Hybrid Approach: Column Sharing + Stacking + Nesting

The best approach combines three techniques:

• Column Sharing (Flexbox): When events start within ±15 min threshold
• Regular Stacking: When events start far apart (> 15 min)
• Nested Stacking: When an event starts outside threshold but overlaps a flexbox column

Example: If a 4th event (Event D) starts at 11:30, it would NOT join the B/C flexbox (30 min > 15 min threshold). Instead, D would be stacked INSIDE whichever column it overlaps (e.g., B's column) with a 15px left margin to show the nested relationship.

Nested Stacking in Flexbox Columns:

const FLEXBOX_START_THRESHOLD_MINUTES = 15; // Configurable

Step 1: Identify flexbox groups (events starting within ±15 min)
  • B starts at 11:00
  • C starts at 11:00 (diff = 0 min ≤ 15 min) → B and C share flexbox ✓
  • D starts at 11:30 (diff = 30 min > 15 min) → D does NOT join flexbox ✗

Step 2: Create flexbox for B and C
  • Flexbox container at stackLevel 1 (15px from A)
  • B gets 50% width (left column)
  • C gets 50% width (right column)

Step 3: Process Event D (11:30-11:45)
  • D overlaps with B (11:00-12:30)? YES ✓
  • D overlaps with C (11:00-12:00)? NO ✗ (D starts at 11:30, C ends at 12:00)
    Wait... 11:30 < 12:00, so they DO overlap!

  • D overlaps with ONLY B? Let's check:
    - B: 11:00-12:30, D: 11:30-11:45 → overlap ✓
    - C: 11:00-12:00, D: 11:30-11:45 → overlap ✓

  • Actually D overlaps BOTH! But start time difference (30 min) > threshold
  • Decision: Stack D inside the column it overlaps most with (B is longer)

Step 4: Nested stacking inside B's column
  • D is placed INSIDE B's flexbox column (position: relative)
  • D gets 15px left margin (stacked within the column)
  • D appears only in B's half, not spanning both

Result: Flexbox preserved, D clearly nested in B!

Decision Tree: When to Use Nested Stacking

Analyzing events B (11:00-12:30), C (11:00-12:00), D (11:30-11:45):

Step 1: Check flexbox threshold (±15 min)
   ├─ B starts 11:00
   ├─ C starts 11:00 (diff = 0 min ≤ 15 min) → Join flexbox ✓
   └─ D starts 11:30 (diff = 30 min > 15 min) → Do NOT join flexbox ✗

Step 2: Create flexbox for B and C
   └─ Flexbox container: [B (50%), C (50%)]

Step 3: Process Event D
   ├─ D starts OUTSIDE threshold (30 min > 15 min)
   ├─ Check which flexbox columns D overlaps:
   │  ├─ D overlaps B? → YES ✓ (11:30-11:45 within 11:00-12:30)
   │  └─ D overlaps C? → YES ✓ (11:30-11:45 within 11:00-12:00)
   │
   └─ D overlaps BOTH B and C

Step 4: Placement strategy
   • D cannot join flexbox (start time > threshold)
   • D overlaps multiple columns
   • Choose primary column: B (longer duration: 1.5h vs 1h)
   • Nest D INSIDE B's column with 15px left margin

Result:
   • Flexbox maintained for B & C (50%/50%)
   • D stacked inside B's column with clear indentation

💡 Key Insight: Flexbox Threshold + Nested Stacking

The Two-Rule System:

1. Flexbox Rule: Events with start times within ±15 minutes (configurable) share flexbox columns
2. Nested Stacking Rule: Events starting OUTSIDE threshold are stacked inside the overlapping flexbox column with 15px left margin

Why ±15 minutes (not ±30)?
A tighter threshold ensures that only events with truly simultaneous start times share columns. Events starting 30 minutes later are clearly sequential and should be visually nested/indented.

When event overlaps multiple columns:
Choose the column with longest duration (or earliest start) as the "primary" parent, and nest the event there with proper indentation. This maintains the flexbox structure while showing clear parent-child relationships.

Configuration: FLEXBOX_START_THRESHOLD_MINUTES = 15

🎯 The Core Algorithm - One Rule to Rule Them All

All scenarios follow the same underlying logic:

1. Group by start time proximity: Events starting within ±15 min share a container
2. Container type decision:
   • If group has 1 event → Regular positioning (no special container)
   • If group has 2+ events with no mutual overlaps → Flexbox container
   • If group has overlapping events → Regular stacking container
3. Handle late arrivals: Events starting OUTSIDE threshold (> 15 min later) are nested inside the container they overlap with

Unified Algorithm - All Scenarios Use This

const FLEXBOX_START_THRESHOLD_MINUTES = 15;
const STACK_OFFSET_PX = 15;

// PHASE 1: Group events by start time proximity
function groupEventsByStartTime(events) {
  const groups = [];
  const sorted = events.sort((a, b) => a.start - b.start);

  for (const event of sorted) {
    const existingGroup = groups.find(g => {
      const groupStart = g[0].start;
      const diffMinutes = Math.abs(event.start - groupStart) / (1000 * 60);
      return diffMinutes <= FLEXBOX_START_THRESHOLD_MINUTES;
    });

    if (existingGroup) {
      existingGroup.push(event);
    } else {
      groups.push([event]);
    }
  }

  return groups; // Each group = events starting within ±15 min
}

// PHASE 2: Decide container type for each group
function decideContainerType(group) {
  if (group.length === 1) return 'NONE';

  // Check if any events in group overlap each other
  const hasOverlaps = group.some((e1, i) =>
    group.slice(i + 1).some(e2 => doEventsOverlap(e1, e2))
  );

  return hasOverlaps ? 'STACKING' : 'FLEXBOX';
}

// PHASE 3: Handle events that start OUTSIDE threshold
function nestLateArrivals(groups, allEvents) {
  for (const event of allEvents) {
    const belongsToGroup = groups.some(g => g.includes(event));
    if (belongsToGroup) continue; // Already placed

    // Find which group/container this event overlaps with
    const overlappingGroup = groups.find(g =>
      g.some(e => doEventsOverlap(event, e))
    );

    if (overlappingGroup) {
      // Nest inside the overlapping container
      // If flexbox: choose column with longest duration
      // If stacking: add to stack with proper offset
      nestEventInContainer(event, overlappingGroup);
    }
  }
}

Result: One algorithm handles ALL scenarios!

Algorithm Complexity

• Overlap Detection: O(n²) where n = number of events
• Grouping by Start Time: O(n log n) for sorting
• Stack Assignment: O(n²) for checking all overlaps
• Visual Update: O(n) to apply styling

Total: O(n²) - Same as naive approach, but with much better UX!

🎯 Key Insight: The Pattern That Connects Everything

The same 3-phase algorithm handles all scenarios:

Conclusion: The difference between scenarios is NOT different algorithms, but rather different inputs to the same algorithm. The 3 phases always run in order, and each phase makes decisions based on the data (start times, overlaps, thresholds).