1814 lines
74 KiB
HTML
1814 lines
74 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Event Stacking Visualization</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
padding: 40px;
|
|
background: #f5f5f5;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #ddd;
|
|
}
|
|
|
|
h3 {
|
|
color: #666;
|
|
margin-top: 30px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.calendar-column {
|
|
background: #fafafa;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
position: relative;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.column-title {
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 60px;
|
|
width: 50px;
|
|
height: calc(100% - 80px);
|
|
border-right: 2px solid #ddd;
|
|
background: #fff;
|
|
}
|
|
|
|
.time-marker {
|
|
position: absolute;
|
|
left: 5px;
|
|
font-size: 11px;
|
|
color: #999;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.events-container {
|
|
position: relative;
|
|
margin-left: 60px;
|
|
height: 350px;
|
|
background: white;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.event {
|
|
position: absolute;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: 2px solid;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.event-a {
|
|
background: #e3f2fd;
|
|
border-color: #2196f3;
|
|
color: #1565c0;
|
|
}
|
|
|
|
.event-b {
|
|
background: #f3e5f5;
|
|
border-color: #9c27b0;
|
|
color: #6a1b9a;
|
|
}
|
|
|
|
.event-c {
|
|
background: #fff3e0;
|
|
border-color: #ff9800;
|
|
color: #e65100;
|
|
}
|
|
|
|
.event-d {
|
|
background: #e8f5e9;
|
|
border-color: #4caf50;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.legend {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: #f9f9f9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.legend-item {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.badge-level-0 { background: #e3f2fd; color: #1565c0; }
|
|
.badge-level-1 { background: #f3e5f5; color: #6a1b9a; }
|
|
.badge-level-2 { background: #fff3e0; color: #e65100; }
|
|
|
|
.savings {
|
|
background: #c8e6c9;
|
|
padding: 15px;
|
|
border-left: 4px solid #4caf50;
|
|
margin-top: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.problem {
|
|
background: #ffcdd2;
|
|
padding: 15px;
|
|
border-left: 4px solid #f44336;
|
|
margin-top: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.note {
|
|
background: #fff9c4;
|
|
padding: 10px;
|
|
border-left: 4px solid #fbc02d;
|
|
margin: 15px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
code {
|
|
background: #f5f5f5;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.grid-lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.grid-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.single-column {
|
|
max-width: 600px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Event Stacking Visualization</h1>
|
|
<p style="color: #666; margin-bottom: 30px;">Visual demonstration of naive vs optimized event stacking</p>
|
|
|
|
<!-- Scenario 1: Your Example -->
|
|
<div class="section">
|
|
<h2>Scenario 1: Your Example - The Problem with Naive Stacking</h2>
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 09:00 - 14:00 (5 hours, contains both B and C)</li>
|
|
<li>Event B: 10:00 - 12:00 (2 hours)</li>
|
|
<li>Event C: 12:30 - 13:00 (30 minutes)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Key Observation:</strong> Event B and Event C do <strong>NOT</strong> overlap with each other!
|
|
They are separated by 30 minutes (12:00 to 12:30).
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Naive Stacking -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Naive Stacking (Inefficient)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 20%">10:00</div>
|
|
<div class="time-marker" style="top: 40%">11:00</div>
|
|
<div class="time-marker" style="top: 60%">12:00</div>
|
|
<div class="time-marker" style="top: 80%">13:00</div>
|
|
<div class="time-marker" style="top: 100%">14:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<div class="grid-lines">
|
|
<div class="grid-line" style="top: 0%"></div>
|
|
<div class="grid-line" style="top: 20%"></div>
|
|
<div class="grid-line" style="top: 40%"></div>
|
|
<div class="grid-line" style="top: 60%"></div>
|
|
<div class="grid-line" style="top: 80%"></div>
|
|
<div class="grid-line" style="top: 100%"></div>
|
|
</div>
|
|
|
|
<!-- Event A: 09:00-14:00 (full height) -->
|
|
<div class="event event-a" style="
|
|
top: 0%;
|
|
height: 100%;
|
|
left: 2px;
|
|
right: 2px;
|
|
z-index: 100;
|
|
">Event A (09:00-14:00)</div>
|
|
|
|
<!-- Event B: 10:00-12:00 (stackLevel 1 = 15px offset) -->
|
|
<div class="event event-b" style="
|
|
top: 20%;
|
|
height: 40%;
|
|
left: 17px;
|
|
right: 2px;
|
|
z-index: 101;
|
|
">Event B (10:00-12:00)</div>
|
|
|
|
<!-- Event C: 12:30-13:00 (stackLevel 2 = 30px offset) -->
|
|
<div class="event event-c" style="
|
|
top: 70%;
|
|
height: 10%;
|
|
left: 32px;
|
|
right: 2px;
|
|
z-index: 102;
|
|
">Event C (12:30-13:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: <code>marginLeft: 0px</code> <span class="badge badge-level-0">Level 0</span></div>
|
|
<div class="legend-item">Event B: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
<div class="legend-item">Event C: <code>marginLeft: 30px</code> <span class="badge badge-level-2">Level 2</span></div>
|
|
</div>
|
|
|
|
<div class="problem">
|
|
<strong>Problem:</strong> Event C is pushed 30px to the right even though it doesn't conflict with Event B! Wastes 15px of space.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optimized Stacking -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Optimized Stacking (Efficient)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 20%">10:00</div>
|
|
<div class="time-marker" style="top: 40%">11:00</div>
|
|
<div class="time-marker" style="top: 60%">12:00</div>
|
|
<div class="time-marker" style="top: 80%">13:00</div>
|
|
<div class="time-marker" style="top: 100%">14:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<div class="grid-lines">
|
|
<div class="grid-line" style="top: 0%"></div>
|
|
<div class="grid-line" style="top: 20%"></div>
|
|
<div class="grid-line" style="top: 40%"></div>
|
|
<div class="grid-line" style="top: 60%"></div>
|
|
<div class="grid-line" style="top: 80%"></div>
|
|
<div class="grid-line" style="top: 100%"></div>
|
|
</div>
|
|
|
|
<!-- Event A: 09:00-14:00 -->
|
|
<div class="event event-a" style="
|
|
top: 0%;
|
|
height: 100%;
|
|
left: 2px;
|
|
right: 2px;
|
|
z-index: 100;
|
|
">Event A (09:00-14:00)</div>
|
|
|
|
<!-- Event B: 10:00-12:00 (stackLevel 1 = 15px offset) -->
|
|
<div class="event event-b" style="
|
|
top: 20%;
|
|
height: 40%;
|
|
left: 17px;
|
|
right: 2px;
|
|
z-index: 101;
|
|
">Event B (10:00-12:00)</div>
|
|
|
|
<!-- Event C: 12:30-13:00 (ALSO stackLevel 1 = 15px offset) -->
|
|
<div class="event event-c" style="
|
|
top: 70%;
|
|
height: 10%;
|
|
left: 17px;
|
|
right: 2px;
|
|
z-index: 101;
|
|
">Event C (12:30-13:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: <code>marginLeft: 0px</code> <span class="badge badge-level-0">Level 0</span></div>
|
|
<div class="legend-item">Event B: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
<div class="legend-item">Event C: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Benefit:</strong> Event C reuses stackLevel 1 because it doesn't conflict with Event B. Saves 15px (33% space savings)!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 2: Multiple Parallel Tracks -->
|
|
<div class="section">
|
|
<h2>Scenario 2: Multiple Parallel Tracks</h2>
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 09:00 - 15:00 (6 hours, very long event)</li>
|
|
<li>Event B: 10:00 - 11:00 (1 hour)</li>
|
|
<li>Event C: 11:30 - 12:30 (1 hour)</li>
|
|
<li>Event D: 13:00 - 14:00 (1 hour)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Key Insight:</strong> Events B, C, and D all overlap with A, but <strong>NOT</strong> with each other.
|
|
They can all share stackLevel 1!
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Naive -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Naive (4 levels)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A</div>
|
|
|
|
<!-- Event B: stackLevel 1 -->
|
|
<div class="event event-b" style="top: 16.67%; height: 16.67%; left: 17px; right: 2px; z-index: 101;">Event B</div>
|
|
|
|
<!-- Event C: stackLevel 2 (naive) -->
|
|
<div class="event event-c" style="top: 41.67%; height: 16.67%; left: 32px; right: 2px; z-index: 102;">Event C</div>
|
|
|
|
<!-- Event D: stackLevel 3 (naive) -->
|
|
<div class="event event-d" style="top: 66.67%; height: 16.67%; left: 47px; right: 2px; z-index: 103;">Event D</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: Level 0 (0px)</div>
|
|
<div class="legend-item">Event B: Level 1 (15px)</div>
|
|
<div class="legend-item">Event C: Level 2 (30px)</div>
|
|
<div class="legend-item">Event D: Level 3 (45px)</div>
|
|
</div>
|
|
|
|
<div class="problem">
|
|
Total width: <strong>60px</strong> (0+15+30+45)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optimized -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Optimized (2 levels)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A</div>
|
|
|
|
<!-- Event B: stackLevel 1 -->
|
|
<div class="event event-b" style="top: 16.67%; height: 16.67%; left: 17px; right: 2px; z-index: 101;">Event B</div>
|
|
|
|
<!-- Event C: ALSO stackLevel 1 -->
|
|
<div class="event event-c" style="top: 41.67%; height: 16.67%; left: 17px; right: 2px; z-index: 101;">Event C</div>
|
|
|
|
<!-- Event D: ALSO stackLevel 1 -->
|
|
<div class="event event-d" style="top: 66.67%; height: 16.67%; left: 17px; right: 2px; z-index: 101;">Event D</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: Level 0 (0px)</div>
|
|
<div class="legend-item">Event B: Level 1 (15px)</div>
|
|
<div class="legend-item">Event C: Level 1 (15px)</div>
|
|
<div class="legend-item">Event D: Level 1 (15px)</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
Total width: <strong>30px</strong> (0+15+15+15)<br>
|
|
<strong>50% space savings!</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 3: Nested Overlaps -->
|
|
<div class="section">
|
|
<h2>Scenario 3: Nested Overlaps with Optimization</h2>
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 09:00 - 15:00 (6 hours, contains all)</li>
|
|
<li>Event B: 10:00 - 13:00 (3 hours)</li>
|
|
<li>Event C: 11:00 - 12:00 (1 hour)</li>
|
|
<li>Event D: 12:30 - 13:30 (1 hour)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Complex Case:</strong> C and D both overlap with A and B, but C and D don't overlap with <strong>each other</strong>. They can share a level!
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Naive -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Naive (4 levels)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: 09:00-15:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A</div>
|
|
|
|
<!-- Event B: 10:00-13:00 (stackLevel 1) -->
|
|
<div class="event event-b" style="top: 16.67%; height: 50%; left: 17px; right: 2px; z-index: 101;">Event B</div>
|
|
|
|
<!-- Event C: 11:00-12:00 (stackLevel 2) -->
|
|
<div class="event event-c" style="top: 33.33%; height: 16.67%; left: 32px; right: 2px; z-index: 102;">Event C</div>
|
|
|
|
<!-- Event D: 12:30-13:30 (stackLevel 3) -->
|
|
<div class="event event-d" style="top: 58.33%; height: 16.67%; left: 47px; right: 2px; z-index: 103;">Event D</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">A: Level 0, B: Level 1, C: Level 2, D: Level 3</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optimized -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Optimized (3 levels)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: 09:00-15:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A</div>
|
|
|
|
<!-- Event B: 10:00-13:00 (stackLevel 1) -->
|
|
<div class="event event-b" style="top: 16.67%; height: 50%; left: 17px; right: 2px; z-index: 101;">Event B</div>
|
|
|
|
<!-- Event C: 11:00-12:00 (stackLevel 2) -->
|
|
<div class="event event-c" style="top: 33.33%; height: 16.67%; left: 32px; right: 2px; z-index: 102;">Event C</div>
|
|
|
|
<!-- Event D: 12:30-13:30 (ALSO stackLevel 2!) -->
|
|
<div class="event event-d" style="top: 58.33%; height: 16.67%; left: 32px; right: 2px; z-index: 102;">Event D</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">A: Level 0, B: Level 1, C & D: Level 2</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>25% space savings!</strong> D shares level with C because they don't overlap.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 4: Fully Nested Events (Complete Containment) -->
|
|
<div class="section">
|
|
<h2>Scenario 4: Fully Nested Events - All Must Stack</h2>
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 09:00 - 15:00 (6 hours, contains B)</li>
|
|
<li>Event B: 10:00 - 14:00 (4 hours, contains C)</li>
|
|
<li>Event C: 11:00 - 13:00 (2 hours, innermost)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Important Case:</strong> When Event C is completely inside Event B, and Event B is completely inside Event A,
|
|
<strong>all three events overlap with each other</strong>. No optimization is possible - they must all stack sequentially.
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Naive -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">Naive Stacking</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: 09:00-15:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A (09:00-15:00)</div>
|
|
|
|
<!-- Event B: 10:00-14:00 (stackLevel 1) -->
|
|
<div class="event event-b" style="top: 16.67%; height: 66.67%; left: 17px; right: 2px; z-index: 101;">Event B (10:00-14:00)</div>
|
|
|
|
<!-- Event C: 11:00-13:00 (stackLevel 2) -->
|
|
<div class="event event-c" style="top: 33.33%; height: 33.33%; left: 32px; right: 2px; z-index: 102;">Event C (11:00-13:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: <code>marginLeft: 0px</code> <span class="badge badge-level-0">Level 0</span></div>
|
|
<div class="legend-item">Event B: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
<div class="legend-item">Event C: <code>marginLeft: 30px</code> <span class="badge badge-level-2">Level 2</span></div>
|
|
</div>
|
|
|
|
<div style="background: #e3f2fd; padding: 15px; border-left: 4px solid #2196f3; margin-top: 20px; border-radius: 4px;">
|
|
<strong>Analysis:</strong> All events overlap with each other:<br>
|
|
• A overlaps B: ✓ (B is inside A)<br>
|
|
• A overlaps C: ✓ (C is inside A)<br>
|
|
• B overlaps C: ✓ (C is inside B)<br>
|
|
<br>
|
|
Result: Sequential stacking required.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optimized (Same Result) -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">Optimized Stacking (Same Result)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 16.67%">10:00</div>
|
|
<div class="time-marker" style="top: 33.33%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 66.67%">13:00</div>
|
|
<div class="time-marker" style="top: 83.33%">14:00</div>
|
|
<div class="time-marker" style="top: 100%">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: 09:00-15:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A (09:00-15:00)</div>
|
|
|
|
<!-- Event B: 10:00-14:00 (stackLevel 1) -->
|
|
<div class="event event-b" style="top: 16.67%; height: 66.67%; left: 17px; right: 2px; z-index: 101;">Event B (10:00-14:00)</div>
|
|
|
|
<!-- Event C: 11:00-13:00 (stackLevel 2 - CANNOT be optimized) -->
|
|
<div class="event event-c" style="top: 33.33%; height: 33.33%; left: 32px; right: 2px; z-index: 102;">Event C (11:00-13:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: <code>marginLeft: 0px</code> <span class="badge badge-level-0">Level 0</span></div>
|
|
<div class="legend-item">Event B: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
<div class="legend-item">Event C: <code>marginLeft: 30px</code> <span class="badge badge-level-2">Level 2</span></div>
|
|
</div>
|
|
|
|
<div style="background: #fff9c4; padding: 15px; border-left: 4px solid #fbc02d; margin-top: 20px; border-radius: 4px;">
|
|
<strong>No Optimization Possible:</strong><br>
|
|
The optimized algorithm tries to assign C to level 1, but level 1 is occupied by B which overlaps with C.
|
|
It then tries level 2 - which is free. Result is identical to naive approach.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Algorithm Behavior:</h3>
|
|
<pre style="background: white; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 13px;">
|
|
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)</pre>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 4px;">
|
|
<strong>Key Takeaway:</strong> Optimization only helps when events at higher levels don't overlap with each other.
|
|
When events are fully nested (matryoshka doll pattern), both approaches yield the same result.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 5: Column Sharing vs Stacking -->
|
|
<div class="section">
|
|
<h2>Scenario 5: Column Sharing - When Events Start Close Together</h2>
|
|
<p><strong>New Concept:</strong> When events start within a threshold (±15 minutes, configurable), they should be displayed side-by-side (column sharing) instead of stacked.</p>
|
|
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 10:00 - 13:00 (3 hours)</li>
|
|
<li>Event B: 11:00 - 12:30 (1.5 hours, starts 60 min after A)</li>
|
|
<li>Event C: 11:00 - 12:00 (1 hour, starts same time as B)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Threshold Logic (±15 minutes):</strong><br>
|
|
• Event A starts at 10:00<br>
|
|
• Events B and C both start at 11:00<br>
|
|
• A vs B/C: 60 minutes apart (exceeds ±15 min threshold) → <strong>A is stacked separately</strong><br>
|
|
• B vs C: 0 minutes apart (within ±15 min threshold) → <strong>B and C share flexbox</strong><br>
|
|
• <strong>Result:</strong> A gets full width (stackLevel 0), B and C share flexbox at stackLevel 1 (50%/50%)
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Stacking Only (Wrong Approach) -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Pure Stacking (Poor UX)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">10:00</div>
|
|
<div class="time-marker" style="top: 25%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 75%">12:30</div>
|
|
<div class="time-marker" style="top: 100%">13:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 300px;">
|
|
<!-- Event A: 10:00-13:00 (full 3 hours) -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A (10:00-13:00)</div>
|
|
|
|
<!-- Event B: 11:00-12:30 (stacked at 15px) -->
|
|
<div class="event event-b" style="top: 33.33%; height: 50%; left: 17px; right: 2px; z-index: 101;">Event B (11:00-12:30)</div>
|
|
|
|
<!-- Event C: 11:00-12:00 (stacked at 30px) -->
|
|
<div class="event event-c" style="top: 33.33%; height: 33.33%; left: 32px; right: 2px; z-index: 102;">Event C (11:00-12:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: Level 0 (0px)</div>
|
|
<div class="legend-item">Event B: Level 1 (15px)</div>
|
|
<div class="legend-item">Event C: Level 2 (30px)</div>
|
|
</div>
|
|
|
|
<div class="problem">
|
|
<strong>Problem:</strong> B and C start at the same time but are stacked sequentially.
|
|
Wastes horizontal space and makes it hard to see that they start together.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column Sharing (Correct Approach) -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Column Sharing (Better UX)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">10:00</div>
|
|
<div class="time-marker" style="top: 25%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 75%">12:30</div>
|
|
<div class="time-marker" style="top: 100%">13:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 300px;">
|
|
<!-- Event A: 10:00-13:00 (full width) -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A (10:00-13:00)</div>
|
|
|
|
<!-- Flexbox container for B and C (they share space 50/50) -->
|
|
<div style="
|
|
position: absolute;
|
|
top: 33.33%;
|
|
height: 66.67%;
|
|
left: 17px;
|
|
right: 2px;
|
|
display: flex;
|
|
gap: 2px;
|
|
z-index: 101;
|
|
">
|
|
<!-- Event B: 11:00-12:30 (50% width, 75% of container height) -->
|
|
<div class="event event-b" style="
|
|
position: relative;
|
|
flex: 1;
|
|
height: 75%;
|
|
left: 0;
|
|
right: 0;
|
|
">Event B (11:00-12:30)</div>
|
|
|
|
<!-- Event C: 11:00-12:00 (50% width, 50% of container height) -->
|
|
<div class="event event-c" style="
|
|
position: relative;
|
|
flex: 1;
|
|
height: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
">Event C (11:00-12:00)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: stackLevel 0 (full width)</div>
|
|
<div class="legend-item">Events B & C: stackLevel 1 (flex: 1 each = 50% / 50%)</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Benefits:</strong><br>
|
|
• Clear visual indication that B and C start at same time<br>
|
|
• Better space utilization (no 30px offset for C)<br>
|
|
• Scales well: if Event D is added at 11:00, all three share 33% / 33% / 33%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Column Sharing Algorithm:</h3>
|
|
<pre style="background: white; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 13px;">
|
|
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)</pre>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Hybrid Approach: Column Sharing + Stacking + Nesting</h3>
|
|
<p>The best approach combines <strong>three techniques</strong>:</p>
|
|
<ul style="margin-left: 20px;">
|
|
<li><strong>Column Sharing (Flexbox):</strong> When events start within ±15 min threshold</li>
|
|
<li><strong>Regular Stacking:</strong> When events start far apart (> 15 min)</li>
|
|
<li><strong>Nested Stacking:</strong> When an event starts outside threshold but overlaps a flexbox column</li>
|
|
</ul>
|
|
<p style="margin-top: 10px;">
|
|
<strong>Example:</strong> 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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 6.5: Real Data - Events 144, 145, 146 -->
|
|
<div class="section">
|
|
<h2>Scenario 6.5: Real Data - Events 144, 145, 146 (Chain Overlap)</h2>
|
|
<p><strong>Events (from actual JSON data):</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event 145 (Månedlig Planlægning): 07:00 - 08:00 (1 hour)</li>
|
|
<li>Event 144 (Team Standup): 07:30 - 08:30 (1 hour)</li>
|
|
<li>Event 146 (Performance Test): 08:15 - 10:00 (1h 45min)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Key Observation:</strong><br>
|
|
• 145 ↔ 144: <strong>OVERLAP</strong> (07:30-08:00 = 30 min)<br>
|
|
• 145 ↔ 146: <strong>NO OVERLAP</strong> (145 ends 08:00, 146 starts 08:15)<br>
|
|
• 144 ↔ 146: <strong>OVERLAP</strong> (08:15-08:30 = 15 min)<br>
|
|
<br>
|
|
<strong>Expected Stack Levels:</strong><br>
|
|
• Event 145: stackLevel 0 (margin-left: 0px)<br>
|
|
• Event 144: stackLevel 1 (margin-left: 15px) - overlaps 145<br>
|
|
• Event 146: stackLevel 2 (margin-left: 30px) - overlaps 144<br>
|
|
<br>
|
|
<strong>Why 146 cannot share level with 145:</strong><br>
|
|
Even though 145 and 146 don't overlap, 146 overlaps with 144 (which has stackLevel 1).
|
|
Therefore 146 must be ABOVE 144 → stackLevel 2.
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Correct: Chain Overlap Stacking</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">07:00</div>
|
|
<div class="time-marker" style="top: 33%">08:00</div>
|
|
<div class="time-marker" style="top: 66%">09:00</div>
|
|
<div class="time-marker" style="top: 100%">10:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 300px;">
|
|
<!-- Event 145: 07:00-08:00 (stackLevel 0) -->
|
|
<div class="event event-a" style="
|
|
top: 0%;
|
|
height: 33.33%;
|
|
left: 2px;
|
|
right: 2px;
|
|
z-index: 100;
|
|
">145: Månedlig (07:00-08:00)</div>
|
|
|
|
<!-- Event 144: 07:30-08:30 (stackLevel 1 = 15px offset) -->
|
|
<div class="event event-b" style="
|
|
top: 16.66%;
|
|
height: 33.33%;
|
|
left: 17px;
|
|
right: 2px;
|
|
z-index: 101;
|
|
">144: Standup (07:30-08:30)</div>
|
|
|
|
<!-- Event 146: 08:15-10:00 (stackLevel 2 = 30px offset) -->
|
|
<div class="event event-c" style="
|
|
top: 41.66%;
|
|
height: 58.34%;
|
|
left: 32px;
|
|
right: 2px;
|
|
z-index: 102;
|
|
">146: Performance (08:15-10:00)</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event 145: <code>marginLeft: 0px</code> <span class="badge badge-level-0">Level 0</span></div>
|
|
<div class="legend-item">Event 144: <code>marginLeft: 15px</code> <span class="badge badge-level-1">Level 1</span></div>
|
|
<div class="legend-item">Event 146: <code>marginLeft: 30px</code> <span class="badge badge-level-2">Level 2</span></div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Why stackLevel 2 for 146?</strong><br>
|
|
146 overlaps with 144 (stackLevel 1), so 146 must be positioned ABOVE 144.
|
|
Even though 146 doesn't overlap 145, it forms a "chain" through 144.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 7: Column Sharing for Overlapping Events (Real Case: 153, 154) -->
|
|
<div class="section">
|
|
<h2>Scenario 7: Column Sharing for Overlapping Events Starting Simultaneously</h2>
|
|
<p><strong>Events (start at same time but overlap):</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event 153: 09:00 - 10:00 (1 hour)</li>
|
|
<li>Event 154: 09:00 - 09:30 (30 minutes)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Key Observation:</strong><br>
|
|
• Events start at SAME time (09:00)<br>
|
|
• Event 154 OVERLAPS with Event 153 (09:00-09:30)<br>
|
|
• Even though they overlap, they should share columns 50/50 because they start simultaneously<br>
|
|
<br>
|
|
<strong>Expected Rendering:</strong><br>
|
|
• Use GRID container (not stacking)<br>
|
|
• Both events get 50% width (side-by-side)<br>
|
|
• Event 153: Full height (1 hour) in left column<br>
|
|
• Event 154: Shorter height (30 min) in right column<br>
|
|
<br>
|
|
<strong>Rule:</strong><br>
|
|
Events starting simultaneously (±15 min) should ALWAYS use column sharing (GRID),
|
|
even if they overlap each other.
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Wrong: Stacking</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 50%">09:30</div>
|
|
<div class="time-marker" style="top: 100%">10:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 200px;">
|
|
<!-- Event 153: 09:00-10:00 (stackLevel 0) -->
|
|
<div class="event event-a" style="
|
|
top: 0%;
|
|
height: 100%;
|
|
left: 2px;
|
|
right: 2px;
|
|
z-index: 100;
|
|
">153 (09:00-10:00)</div>
|
|
|
|
<!-- Event 154: 09:00-09:30 (stackLevel 1 = 15px offset) - WRONG! -->
|
|
<div class="event event-b" style="
|
|
top: 0%;
|
|
height: 50%;
|
|
left: 17px;
|
|
right: 2px;
|
|
z-index: 101;
|
|
">154 (09:00-09:30)</div>
|
|
</div>
|
|
|
|
<div class="problem">
|
|
<strong>Problem:</strong> Event 154 is stacked on top of 153 even though they start at the same time.
|
|
This makes it hard to see that they're simultaneous events.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Correct: Column Sharing (GRID)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">09:00</div>
|
|
<div class="time-marker" style="top: 50%">09:30</div>
|
|
<div class="time-marker" style="top: 100%">10:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 200px;">
|
|
<!-- Grid container for both events (50/50 split) -->
|
|
<div style="
|
|
position: absolute;
|
|
top: 0%;
|
|
height: 100%;
|
|
left: 2px;
|
|
right: 2px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px;
|
|
z-index: 100;
|
|
">
|
|
<!-- Event 153: 09:00-10:00 (full height, left column) -->
|
|
<div class="event event-a" style="
|
|
position: relative;
|
|
height: 100%;
|
|
">153 (09:00-10:00)</div>
|
|
|
|
<!-- Event 154: 09:00-09:30 (50% height, right column) -->
|
|
<div class="event event-b" style="
|
|
position: relative;
|
|
height: 50%;
|
|
">154 (09:00-09:30)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Benefits:</strong><br>
|
|
• Clear visual that events start simultaneously<br>
|
|
• Better use of horizontal space<br>
|
|
• Each event gets 50% width instead of being stacked
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 6: Column Sharing + Nested Stacking -->
|
|
<div class="section">
|
|
<h2>Scenario 6: Column Sharing with Nested Stacking</h2>
|
|
<p><strong>Complex Case:</strong> What happens when a 4th event needs to be added to an existing column-sharing group?</p>
|
|
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 10:00 - 13:00 (3 hours)</li>
|
|
<li>Event B: 11:00 - 12:30 (1.5 hours)</li>
|
|
<li>Event C: 11:00 - 12:00 (1 hour)</li>
|
|
<li><strong>Event D: 11:30 - 11:45 (15 minutes) ← NEW!</strong></li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>New Rule:</strong> Flexbox threshold = <strong>±15 minutes</strong> (configurable)<br>
|
|
• B starts at 11:00<br>
|
|
• C starts at 11:00 (diff = 0 min ≤ 15 min) → <strong>B and C share flexbox</strong> ✓<br>
|
|
• D starts at 11:30 (diff = 30 min > 15 min) → <strong>D does NOT join flexbox</strong> ✗<br>
|
|
• D overlaps only with B → <strong>D is stacked inside B's column</strong> ✓
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Wrong: All in flexbox -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ All Events in Flexbox (Wrong)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">10:00</div>
|
|
<div class="time-marker" style="top: 25%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 75%">12:30</div>
|
|
<div class="time-marker" style="top: 100%">13:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 300px;">
|
|
<!-- Event A: 10:00-13:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A</div>
|
|
|
|
<!-- Flexbox with B, C, D (33% each) -->
|
|
<div style="
|
|
position: absolute;
|
|
top: 33.33%;
|
|
height: 66.67%;
|
|
left: 17px;
|
|
right: 2px;
|
|
display: flex;
|
|
gap: 2px;
|
|
z-index: 101;
|
|
">
|
|
<div class="event event-b" style="position: relative; flex: 1; height: 75%;">Event B</div>
|
|
<div class="event event-c" style="position: relative; flex: 1; height: 50%;">Event C</div>
|
|
<div class="event event-d" style="position: relative; flex: 1; height: 25%;">Event D</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="problem">
|
|
<strong>Problem:</strong> All events get 33% width, making them too narrow.
|
|
Event D is squeezed even though it's contained within Event B's timeframe.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Correct: Nested stacking inside flexbox column -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Flexbox + Nested Stack in Column</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">10:00</div>
|
|
<div class="time-marker" style="top: 25%">11:00</div>
|
|
<div class="time-marker" style="top: 50%">12:00</div>
|
|
<div class="time-marker" style="top: 75%">12:30</div>
|
|
<div class="time-marker" style="top: 100%">13:00</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 300px;">
|
|
<!-- Event A: 10:00-13:00 -->
|
|
<div class="event event-a" style="top: 0%; height: 100%; left: 2px; right: 2px; z-index: 100;">Event A (10:00-13:00)</div>
|
|
|
|
<!-- Flexbox container for B and C (they start at same time: 11:00) -->
|
|
<div style="
|
|
position: absolute;
|
|
top: 33.33%;
|
|
height: 66.67%;
|
|
left: 17px;
|
|
right: 2px;
|
|
display: flex;
|
|
gap: 2px;
|
|
z-index: 101;
|
|
">
|
|
<!-- Event B column (50% width) with nested Event D inside -->
|
|
<div style="position: relative; flex: 1;">
|
|
<!-- Event B -->
|
|
<div class="event event-b" style="
|
|
position: absolute;
|
|
top: 0;
|
|
height: 75%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 101;
|
|
">Event B (11:00-12:30)</div>
|
|
|
|
<!-- Event D nested INSIDE B's column, stacked with offset -->
|
|
<div class="event event-d" style="
|
|
position: absolute;
|
|
top: 25%;
|
|
height: 12.5%;
|
|
left: 15px;
|
|
right: 0;
|
|
z-index: 102;
|
|
font-size: 11px;
|
|
">Event D (11:30-11:45)</div>
|
|
</div>
|
|
|
|
<!-- Event C column (50% width) -->
|
|
<div class="event event-c" style="
|
|
position: relative;
|
|
flex: 1;
|
|
height: 50%;
|
|
">Event C (11:00-12:00)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">Event A: stackLevel 0 (full width)</div>
|
|
<div class="legend-item">Events B & C: stackLevel 1 (flexbox 50%/50%)</div>
|
|
<div class="legend-item">Event D: Nested in B's column with 15px marginLeft</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Strategy:</strong><br>
|
|
• B and C start at 11:00 (diff = 0 min ≤ 15 min threshold) → <strong>Use flexbox</strong> ✓<br>
|
|
• D starts at 11:30 (diff = 30 min > 15 min threshold) → <strong>NOT in flexbox</strong> ✗<br>
|
|
• D overlaps with B (11:00-12:30) but NOT C (11:00-12:00) ✓<br>
|
|
• D is stacked INSIDE B's flexbox column with 15px left margin
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Nested Stacking in Flexbox Columns:</h3>
|
|
<pre style="background: white; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 13px; line-height: 1.6;">
|
|
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!</pre>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Decision Tree: When to Use Nested Stacking</h3>
|
|
<pre style="background: white; padding: 15px; border-radius: 4px; font-size: 13px;">
|
|
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</pre>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #fff9c4; border-left: 4px solid #fbc02d; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">💡 Key Insight: Flexbox Threshold + Nested Stacking</h3>
|
|
<p>
|
|
<strong>The Two-Rule System:</strong>
|
|
</p>
|
|
<ol style="margin-left: 20px; line-height: 1.8;">
|
|
<li><strong>Flexbox Rule:</strong> Events with start times within <code>±15 minutes</code> (configurable) share flexbox columns</li>
|
|
<li><strong>Nested Stacking Rule:</strong> Events starting OUTSIDE threshold are stacked inside the overlapping flexbox column with 15px left margin</li>
|
|
</ol>
|
|
<p style="margin-top: 15px;">
|
|
<strong>Why ±15 minutes (not ±30)?</strong><br>
|
|
A tighter threshold ensures that only events with <em>truly simultaneous</em> start times share columns.
|
|
Events starting 30 minutes later are clearly sequential and should be visually nested/indented.
|
|
</p>
|
|
<p style="margin-top: 10px;">
|
|
<strong>When event overlaps multiple columns:</strong><br>
|
|
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.
|
|
</p>
|
|
<p style="margin-top: 10px; font-size: 13px; color: #666;">
|
|
<strong>Configuration:</strong> <code>FLEXBOX_START_THRESHOLD_MINUTES = 15</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="section">
|
|
<h2>Summary: Unified Layout Logic</h2>
|
|
|
|
<div style="background: #e3f2fd; padding: 25px; border-radius: 4px; margin-bottom: 30px; border-left: 5px solid #2196f3;">
|
|
<h3 style="margin-top: 0;">🎯 The Core Algorithm - One Rule to Rule Them All</h3>
|
|
<p style="font-size: 15px; line-height: 1.8;">
|
|
All scenarios follow the <strong>same underlying logic</strong>:
|
|
</p>
|
|
<ol style="margin-left: 20px; line-height: 2; font-size: 14px;">
|
|
<li><strong>Group by start time proximity:</strong> Events starting within ±15 min share a container</li>
|
|
<li><strong>Container type decision:</strong>
|
|
<ul style="margin-top: 8px;">
|
|
<li>If group has 1 event → Regular positioning (no special container)</li>
|
|
<li>If group has 2+ events with no mutual overlaps → <strong>Flexbox container</strong></li>
|
|
<li>If group has overlapping events → <strong>Regular stacking container</strong></li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Handle late arrivals:</strong> Events starting OUTSIDE threshold (> 15 min later) are nested inside the container they overlap with</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px;">
|
|
<div style="background: #ffebee; padding: 20px; border-radius: 4px;">
|
|
<h3 style="margin-top: 0; color: #c62828;">Scenario 1-2</h3>
|
|
<p style="font-size: 13px; margin-bottom: 8px;"><strong>Optimized Stacking</strong></p>
|
|
<ul style="margin-left: 20px; font-size: 13px; line-height: 1.6;">
|
|
<li>No flexbox groups</li>
|
|
<li>Events share levels when they don't overlap</li>
|
|
<li>Pure optimization play</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #fff3e0; padding: 20px; border-radius: 4px;">
|
|
<h3 style="margin-top: 0; color: #e65100;">Scenario 5</h3>
|
|
<p style="font-size: 13px; margin-bottom: 8px;"><strong>Flexbox Columns</strong></p>
|
|
<ul style="margin-left: 20px; font-size: 13px; line-height: 1.6;">
|
|
<li>B & C start together (±15 min)</li>
|
|
<li>They don't overlap each other</li>
|
|
<li>Perfect for flexbox (50%/50%)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: #e8f5e9; padding: 20px; border-radius: 4px;">
|
|
<h3 style="margin-top: 0; color: #2e7d32;">Scenario 6</h3>
|
|
<p style="font-size: 13px; margin-bottom: 8px;"><strong>Nested in Flexbox</strong></p>
|
|
<ul style="margin-left: 20px; font-size: 13px; line-height: 1.6;">
|
|
<li>B & C flexbox maintained</li>
|
|
<li>D starts later (> 15 min)</li>
|
|
<li>D nested in B's column</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding: 20px; background: #e3f2fd; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Unified Algorithm - All Scenarios Use This</h3>
|
|
<pre style="background: white; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 13px; line-height: 1.6;">
|
|
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!</pre>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding: 20px; background: #f5f5f5; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">Algorithm Complexity</h3>
|
|
<ul style="margin-left: 20px;">
|
|
<li><strong>Overlap Detection:</strong> O(n²) where n = number of events</li>
|
|
<li><strong>Grouping by Start Time:</strong> O(n log n) for sorting</li>
|
|
<li><strong>Stack Assignment:</strong> O(n²) for checking all overlaps</li>
|
|
<li><strong>Visual Update:</strong> O(n) to apply styling</li>
|
|
</ul>
|
|
<p style="margin-top: 10px;">
|
|
<strong>Total:</strong> O(n²) - Same as naive approach, but with much better UX!
|
|
</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding: 20px; background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 4px;">
|
|
<h3 style="margin-top: 0;">🎯 Key Insight: The Pattern That Connects Everything</h3>
|
|
<p style="line-height: 1.8; margin-bottom: 15px;">
|
|
The <strong>same 3-phase algorithm</strong> handles all scenarios:
|
|
</p>
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
|
|
<thead>
|
|
<tr style="background: #f5f5f5;">
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Phase</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Logic</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Scenario 1-4</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Scenario 5</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Scenario 6</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>1. Group</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">Start time ±15 min</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">No groups (all separate)</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">[B, C] group</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">[B, C] group, D separate</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>2. Container</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">Overlaps? Stack : Flex</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">N/A (single events)</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">Flexbox (no overlaps)</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">Flexbox (no overlaps)</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>3. Late arrivals</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">Nest in overlapping container</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">N/A</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">N/A</td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">D nested in B's column</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p style="margin-top: 20px; padding: 15px; background: white; border-radius: 4px; font-size: 14px;">
|
|
<strong>Conclusion:</strong> The difference between scenarios is NOT different algorithms,
|
|
but rather <strong>different inputs</strong> to the same algorithm. The 3 phases always run in order,
|
|
and each phase makes decisions based on the data (start times, overlaps, thresholds).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scenario 8: Edge Case - Exactly 15 min apart with overlap -->
|
|
<div class="section">
|
|
<h2>Scenario 8: Edge Case - Events Starting Exactly 15 Minutes Apart (WITH Overlap)</h2>
|
|
<p><strong>Edge Case:</strong> What happens when events start exactly at the ±15 min threshold AND overlap?</p>
|
|
|
|
<p><strong>Events:</strong></p>
|
|
<ul style="margin: 10px 0 20px 20px;">
|
|
<li>Event A: 11:00 - 12:00 (1 hour)</li>
|
|
<li>Event B: 11:15 - 12:30 (1.25 hours)</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<strong>Analysis:</strong><br>
|
|
• A starts at 11:00<br>
|
|
• B starts at 11:15 (diff = 15 min ≤ 15 min) → <strong>Within threshold</strong> ✓<br>
|
|
• A and B overlap (11:15 - 12:00) → <strong>They DO overlap</strong> ✓<br>
|
|
• <strong>Visual priority:</strong> Show that they start simultaneously (±15 min)<br>
|
|
• <strong>Result:</strong> Use GRID (column sharing) even though they overlap
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Wrong: Stacking -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">❌ Wrong: Stacking (Hides Simultaneity)</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">11:00</div>
|
|
<div class="time-marker" style="top: 33%">11:30</div>
|
|
<div class="time-marker" style="top: 66%">12:00</div>
|
|
<div class="time-marker" style="top: 100%">12:30</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 180px;">
|
|
<!-- Event A: 11:00-12:00 (60 min = 66.7% of 90 min total) -->
|
|
<div class="event event-a" style="top: 0%; height: 66.7%; left: 2px; right: 2px; z-index: 100;">
|
|
Event A<br>
|
|
<span style="font-size: 11px; opacity: 0.8;">11:00-12:00</span>
|
|
</div>
|
|
|
|
<!-- Event B: 11:15-12:30 (75 min = 83.3% of 90 min total, starts at 16.7%) -->
|
|
<div class="event event-b" style="top: 16.7%; height: 83.3%; left: 17px; right: 2px; z-index: 101; margin-left: 15px;">
|
|
Event B<br>
|
|
<span style="font-size: 11px; opacity: 0.8;">11:15-12:30</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="savings wrong">
|
|
<strong>Problems:</strong><br>
|
|
• B is offset to the right → looks like it happens AFTER A<br>
|
|
• Doesn't convey that they start almost simultaneously (15 min apart)<br>
|
|
• Wastes horizontal space
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: GRID -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">✅ Correct: GRID Column Sharing</div>
|
|
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%">11:00</div>
|
|
<div class="time-marker" style="top: 33%">11:30</div>
|
|
<div class="time-marker" style="top: 66%">12:00</div>
|
|
<div class="time-marker" style="top: 100%">12:30</div>
|
|
</div>
|
|
|
|
<div class="events-container" style="height: 180px;">
|
|
<!-- Grid container for A and B -->
|
|
<div style="position: absolute; top: 0%; left: 2px; right: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; z-index: 100;">
|
|
<!-- Event A: 11:00-12:00 -->
|
|
<div class="event event-a" style="position: relative; height: 120px;">
|
|
Event A<br>
|
|
<span style="font-size: 11px; opacity: 0.8;">11:00-12:00</span>
|
|
</div>
|
|
|
|
<!-- Event B: 11:15-12:30 (starts 15 min later = 10% offset) -->
|
|
<div class="event event-b" style="position: relative; height: 150px; top: 10%;">
|
|
Event B<br>
|
|
<span style="font-size: 11px; opacity: 0.8;">11:15-12:30</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="savings">
|
|
<strong>Benefits:</strong><br>
|
|
• Side-by-side layout shows they're concurrent<br>
|
|
• Each event gets 50% width<br>
|
|
• Clear visual: these events start nearly simultaneously (±15 min)<br>
|
|
• Despite overlapping, simultaneity is visual priority
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Key Rule:</strong> Events starting within ±15 minutes should ALWAYS use GRID (column sharing),
|
|
even if they overlap. The visual priority is to show that events start <em>simultaneously</em>,
|
|
not to avoid overlap. Overlap is handled by the grid container having appropriate height.
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<strong>Expected Behavior:</strong>
|
|
<pre style="background: #f8f8f8; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 13px;">
|
|
// Phase 1: Group by start time
|
|
groupEventsByStartTime([A, B])
|
|
→ Group 1: [A, B] // 15 min apart ≤ threshold
|
|
|
|
// Phase 2: Decide container type
|
|
decideContainerType(Group 1)
|
|
→ GRID // Always GRID for grouped events, even if overlapping
|
|
|
|
// Phase 3: Calculate stack level
|
|
calculateGridGroupStackLevel(Group 1)
|
|
→ stackLevel: 0 // No other events to stack above
|
|
|
|
// Result:
|
|
<swp-event-group class="cols-2 stack-level-0" style="top: 0px; margin-left: 0px; z-index: 100;">
|
|
<swp-event data-event-id="A" style="height: 120px;">Event A</swp-event>
|
|
<swp-event data-event-id="B" style="height: 150px; top: 10%;">Event B</swp-event>
|
|
</swp-event-group></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SCENARIO 9: Grid with Staggered Start Times -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<h2>Scenario 9: Grid with Staggered Start Times</h2>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item"><strong>Event A:</strong> 09:00 - 10:00 (1 hour)</div>
|
|
<div class="legend-item"><strong>Event B:</strong> 09:30 - 10:30 (1 hour, starts 30 min after A)</div>
|
|
<div class="legend-item"><strong>Event C:</strong> 10:15 - 12:00 (1h 45min, starts 45 min after B)</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Special Case: End-to-Start Conflicts Create Shared Columns</strong><br><br>
|
|
• Event A: 09:00 - 10:00<br>
|
|
• Event B: 09:30 - 10:30 (starts 30 min before A ends → conflicts with A)<br>
|
|
• Event C: 10:15 - 12:00 (starts 15 min before B ends → conflicts with B)<br><br>
|
|
<strong>Key Rule:</strong> Events share columns (GRID) when they conflict within threshold<br>
|
|
• Conflict = Event starts within ±threshold minutes of another event's end time<br>
|
|
• A and B: B starts 30 min before A ends → conflict (≤ 30 min threshold)<br>
|
|
• B and C: C starts 15 min before B ends → conflict (≤ 30 min threshold)<br>
|
|
• Therefore: A, B, and C all share columns in a 3-column GRID<br><br>
|
|
<strong>With threshold = 15 min:</strong> Only A-B conflict (30 min > 15), C is separate → Stack<br>
|
|
<strong>With threshold = 30 min:</strong> Both A-B and B-C conflict → All 3 share columns in GRID
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Threshold = 15 min -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">With Threshold = 15 min</div>
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%;">09:00</div>
|
|
<div class="time-marker" style="top: 25%;">10:00</div>
|
|
<div class="time-marker" style="top: 50%;">11:00</div>
|
|
<div class="time-marker" style="top: 75%;">12:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: 09:00-10:00 (stackLevel 0) -->
|
|
<div class="event event-a" style="top: 0px; left: 2px; right: 2px; height: 60px; margin-left: 0px; z-index: 100;">
|
|
Event A<br>09:00-10:00
|
|
</div>
|
|
|
|
<!-- Event B: 09:30-10:30 (stackLevel 1, overlaps A) -->
|
|
<div class="event event-b" style="top: 30px; left: 2px; right: 2px; height: 60px; margin-left: 15px; z-index: 101;">
|
|
Event B<br>09:30-10:30
|
|
</div>
|
|
|
|
<!-- Event C: 10:15-12:00 (stackLevel 2, overlaps B) -->
|
|
<div class="event event-c" style="top: 75px; left: 2px; right: 2px; height: 105px; margin-left: 30px; z-index: 102;">
|
|
Event C<br>10:15-12:00
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Threshold = 30 min -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">With Threshold = 30 min</div>
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%;">09:00</div>
|
|
<div class="time-marker" style="top: 25%;">10:00</div>
|
|
<div class="time-marker" style="top: 50%;">11:00</div>
|
|
<div class="time-marker" style="top: 75%;">12:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Grid Group for A, B & C: stackLevel 0 (2 columns, A and C share column 1) -->
|
|
<div style="position: absolute; top: 0px; left: 2px; right: 2px; margin-left: 0px; z-index: 100; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;">
|
|
<!-- Column 1: Event A and C (no overlap) -->
|
|
<div style="position: relative;">
|
|
<div class="event event-a" style="position: absolute; top: 0px; height: 60px; left: 0; right: 0;">
|
|
Event A<br>09:00-10:00
|
|
</div>
|
|
<div class="event event-c" style="position: absolute; top: 75px; height: 105px; left: 0; right: 0;">
|
|
Event C<br>10:15-12:00
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 2: Event B -->
|
|
<div style="position: relative;">
|
|
<div class="event event-b" style="position: absolute; top: 30px; height: 60px; left: 0; right: 0;">
|
|
Event B<br>09:30-10:30
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Stack Analysis</h3>
|
|
<div class="legend">
|
|
<p><strong>Threshold = 15 min (Stack):</strong></p>
|
|
<ul>
|
|
<li>Event A: stackLevel 0</li>
|
|
<li>Event B: stackLevel 1 (starts 30 min before A ends, but 30 > 15 threshold) → Stack with margin-left: 15px</li>
|
|
<li>Event C: stackLevel 2 (starts 15 min before B ends, but separate from A-B stack) → Stack with margin-left: 30px</li>
|
|
</ul>
|
|
|
|
<p><strong>Threshold = 30 min (Shared GRID with 2 columns):</strong></p>
|
|
<ul>
|
|
<li>Grid Group (A, B & C): 2-column grid layout</li>
|
|
<li><strong>Column 1:</strong> Event A (09:00-10:00) + Event C (10:15-12:00) - they don't overlap!</li>
|
|
<li><strong>Column 2:</strong> Event B (09:30-10:30) - overlaps both A and C</li>
|
|
<li>Event A: grid column 1, top: 0px</li>
|
|
<li>Event B: grid column 2, top: 30px</li>
|
|
<li>Event C: grid column 1, top: 75px (shares column with A, no overlap)</li>
|
|
<li>All events: stackLevel 0, margin-left: 0px (no stacking, all in same grid container)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SCENARIO 10: Complex Column Sharing with Multiple Events -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<h2>Scenario 10: Complex Column Sharing</h2>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item"><strong>Event A:</strong> 12:00 - 15:00 (3 hours)</div>
|
|
<div class="legend-item"><strong>Event B:</strong> 12:30 - 13:00 (30 min, starts 30 min after A)</div>
|
|
<div class="legend-item"><strong>Event C:</strong> 13:30 - 14:30 (1 hour, starts 30 min after B ends)</div>
|
|
<div class="legend-item"><strong>Event D:</strong> 14:00 - 15:00 (1 hour, starts 30 min before C ends)</div>
|
|
<div class="legend-item"><strong>Event E:</strong> 14:00 - 15:00 (1 hour, starts same time as D)</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Analysis with threshold = 30 min:</strong><br>
|
|
• A-B conflict: B starts 30 min after A (≤ 30) → grouped<br>
|
|
• B-C conflict: C starts 30 min after B ends (≤ 30) → grouped with A-B<br>
|
|
• C-D conflict: D starts 30 min before C ends (≤ 30) → grouped with A-B-C<br>
|
|
• D-E conflict: D and E start at same time (0 min) → grouped with all<br>
|
|
• Therefore: All 5 events in ONE grid group<br><br>
|
|
<strong>Column allocation:</strong><br>
|
|
• A overlaps: B, C, D, E → needs own column<br>
|
|
• B overlaps: A → needs own column<br>
|
|
• C overlaps: A, D, E → needs own column<br>
|
|
• D overlaps: A, C, E → needs own column<br>
|
|
• E overlaps: A, C, D → can share column with B (they don't overlap)<br>
|
|
• Result: 4 columns needed
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<!-- Threshold = 15 min -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">With Threshold = 15 min</div>
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%;">12:00</div>
|
|
<div class="time-marker" style="top: 33%;">13:00</div>
|
|
<div class="time-marker" style="top: 67%;">14:00</div>
|
|
<div class="time-marker" style="top: 100%;">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Event A: stackLevel 0 -->
|
|
<div class="event event-a" style="position: absolute; top: 0px; left: 2px; right: 2px; height: 180px; margin-left: 0px; z-index: 100;">
|
|
Event A<br>12:00-15:00
|
|
</div>
|
|
|
|
<!-- Event B: stackLevel 1 (overlaps A) -->
|
|
<div class="event event-b" style="position: absolute; top: 30px; left: 2px; right: 2px; height: 30px; margin-left: 15px; z-index: 101;">
|
|
Event B<br>12:30-13:00
|
|
</div>
|
|
|
|
<!-- Event C: stackLevel 2 (overlaps A, not B) -->
|
|
<div class="event event-c" style="position: absolute; top: 90px; left: 2px; right: 2px; height: 60px; margin-left: 30px; z-index: 102;">
|
|
Event C<br>13:30-14:30
|
|
</div>
|
|
|
|
<!-- Grid Group for D & E: stackLevel 3 (start simultaneously, overlap A and C) -->
|
|
<div style="position: absolute; top: 120px; left: 2px; right: 2px; margin-left: 45px; z-index: 103; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;">
|
|
<div style="position: relative;">
|
|
<div class="event event-d" style="position: absolute; top: 0px; height: 60px; left: 0; right: 0;">
|
|
Event D<br>14:00-15:00
|
|
</div>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<div class="event event-d" style="position: absolute; top: 0px; height: 60px; left: 0; right: 0;">
|
|
Event E<br>14:00-15:00
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Threshold = 30 min -->
|
|
<div class="calendar-column">
|
|
<div class="column-title">With Threshold = 30 min</div>
|
|
<div class="timeline">
|
|
<div class="time-marker" style="top: 0%;">12:00</div>
|
|
<div class="time-marker" style="top: 33%;">13:00</div>
|
|
<div class="time-marker" style="top: 67%;">14:00</div>
|
|
<div class="time-marker" style="top: 100%;">15:00</div>
|
|
</div>
|
|
|
|
<div class="events-container">
|
|
<!-- Grid Group: All 5 events (4 columns) -->
|
|
<div style="position: absolute; top: 0px; left: 2px; right: 2px; margin-left: 0px; z-index: 100; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px;">
|
|
|
|
<!-- Column 1: Event A -->
|
|
<div style="position: relative;">
|
|
<div class="event event-a" style="position: absolute; top: 0px; height: 180px; left: 0; right: 0;">
|
|
Event A<br>12:00-15:00
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 2: Event B + E (don't overlap) -->
|
|
<div style="position: relative;">
|
|
<div class="event event-b" style="position: absolute; top: 30px; height: 30px; left: 0; right: 0;">
|
|
Event B<br>12:30-13:00
|
|
</div>
|
|
<div class="event event-d" style="position: absolute; top: 120px; height: 60px; left: 0; right: 0;">
|
|
Event E<br>14:00-15:00
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 3: Event C -->
|
|
<div style="position: relative;">
|
|
<div class="event event-c" style="position: absolute; top: 90px; height: 60px; left: 0; right: 0;">
|
|
Event C<br>13:30-14:30
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 4: Event D -->
|
|
<div style="position: relative;">
|
|
<div class="event event-d" style="position: absolute; top: 120px; height: 60px; left: 0; right: 0;">
|
|
Event D<br>14:00-15:00
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Expected Layout</h3>
|
|
<div class="legend">
|
|
<p><strong>Threshold = 15 min (Stack + Small Grid):</strong></p>
|
|
<ul>
|
|
<li>Event A: stackLevel 0</li>
|
|
<li>Event B: stackLevel 1 (overlaps A, 30 min > 15 threshold) → margin-left: 15px</li>
|
|
<li>Event C: stackLevel 2 (overlaps A, 30 min > 15 threshold) → margin-left: 30px</li>
|
|
<li>Grid Group (D & E): stackLevel 3 (start simultaneously) → margin-left: 45px
|
|
<ul>
|
|
<li>2-column grid: D in column 1, E in column 2</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<p><strong>Threshold = 30 min (Large Grid):</strong></p>
|
|
<ul>
|
|
<li>Grid Group (A, B, C, D, E): All in ONE grid group
|
|
<ul>
|
|
<li><strong>Column 1:</strong> Event A (top: 0px, height: 180px)</li>
|
|
<li><strong>Column 2:</strong> Event B (top: 30px) + Event E (top: 120px)</li>
|
|
<li><strong>Column 3:</strong> Event C (top: 90px)</li>
|
|
<li><strong>Column 4:</strong> Event D (top: 120px)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<p><strong>Key Points:</strong></p>
|
|
<ul>
|
|
<li>With threshold = 30: All events grouped due to chained end-to-start conflicts</li>
|
|
<li>With threshold = 15: Only D & E grouped (start simultaneously), A/B/C stacked separately</li>
|
|
<li>B and E can share column 2 (they don't overlap: B ends 13:00, E starts 14:00)</li>
|
|
<li>D and E start at same time but need separate columns (they overlap perfectly)</li>
|
|
<li>Result with 30 min: 4 columns instead of 5 (optimization saves 1 column)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<footer style="text-align: center; color: #999; margin-top: 40px; padding: 20px;">
|
|
<p>Event Stacking Visualization - Calendar Plantempus</p>
|
|
<p style="font-size: 12px;">Static documentation for event stacking concepts</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|