Implement Option 1: Synchronized Swimlanes with Time Anchor
This commit is contained in:
@@ -47,77 +47,61 @@ export default function EventTimeline() {
|
||||
return <span className="badge">{state}</span>;
|
||||
};
|
||||
|
||||
const groupedEvents = useMemo(() => {
|
||||
return {
|
||||
CO: events.filter(e => e.camera_zone === 'CO'),
|
||||
Mill: events.filter(e => e.camera_zone === 'Mill'),
|
||||
Conveyor: events.filter(e => e.camera_zone === 'Conveyor')
|
||||
};
|
||||
const chronologicalBlocks = useMemo(() => {
|
||||
const blocks = {};
|
||||
events.forEach(ev => {
|
||||
// Group by Minute (HH:MM)
|
||||
const timeKey = ev.start_time.substring(0, 5);
|
||||
if (!blocks[timeKey]) {
|
||||
blocks[timeKey] = { timeKey, CO: [], Mill: [], Conveyor: [] };
|
||||
}
|
||||
if (ev.camera_zone === 'CO') blocks[timeKey].CO.push(ev);
|
||||
if (ev.camera_zone === 'Mill') blocks[timeKey].Mill.push(ev);
|
||||
if (ev.camera_zone === 'Conveyor') blocks[timeKey].Conveyor.push(ev);
|
||||
});
|
||||
|
||||
// Sort chronologically
|
||||
return Object.values(blocks).sort((a, b) => a.timeKey.localeCompare(b.timeKey));
|
||||
}, [events]);
|
||||
|
||||
const renderTimeline = (zone, zoneEvents, index) => (
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
maxHeight: '70vh',
|
||||
paddingLeft: index === 0 ? '0' : '1.5rem',
|
||||
paddingRight: index === 2 ? '0' : '1.5rem',
|
||||
borderRight: index === 2 ? 'none' : '1px solid rgba(255,255,255,0.05)'
|
||||
const renderEventCard = (ev, i, arrLength) => (
|
||||
<div key={ev.id} style={{
|
||||
display: 'flex', flexDirection: 'column',
|
||||
paddingBottom: i < arrLength - 1 ? '1rem' : '0',
|
||||
marginBottom: i < arrLength - 1 ? '1rem' : '0',
|
||||
borderBottom: i < arrLength - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none'
|
||||
}}>
|
||||
<h2 style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
background: 'var(--panel-bg)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
paddingBottom: '1rem',
|
||||
paddingTop: '0.5rem',
|
||||
borderBottom: '1px solid var(--panel-border)',
|
||||
zIndex: 10
|
||||
}}>
|
||||
{zone} Timeline
|
||||
</h2>
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
{zoneEvents.length === 0 ? (
|
||||
<p style={{ opacity: 0.5, textAlign: 'center' }}>No events recorded.</p>
|
||||
) : (
|
||||
zoneEvents.map((ev, i) => (
|
||||
<div key={ev.id} style={{ display: 'flex', flexDirection: 'column', padding: '1rem 0', borderBottom: i < zoneEvents.length -1 ? '1px dashed rgba(255,255,255,0.1)' : 'none' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
|
||||
<span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
|
||||
{ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}
|
||||
</span>
|
||||
{getStateBadge(ev.state)}
|
||||
</div>
|
||||
<p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
|
||||
<button
|
||||
disabled
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.25rem',
|
||||
padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
|
||||
background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
|
||||
cursor: 'not-allowed', fontSize: '0.75rem'
|
||||
}}
|
||||
title="Video review is currently disabled"
|
||||
>
|
||||
<Video size={12} /> View Video
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
|
||||
<div>
|
||||
<span style={{ opacity: 0.7 }}>Std Cycle: </span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ opacity: 0.7 }}>Manpower: </span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
|
||||
<span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
|
||||
{ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}
|
||||
</span>
|
||||
{getStateBadge(ev.state)}
|
||||
</div>
|
||||
<p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
|
||||
<button
|
||||
disabled
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.25rem',
|
||||
padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
|
||||
background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
|
||||
cursor: 'not-allowed', fontSize: '0.75rem'
|
||||
}}
|
||||
title="Video review is currently disabled"
|
||||
>
|
||||
<Video size={12} /> View Video
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
|
||||
<div>
|
||||
<span style={{ opacity: 0.7 }}>Std Cycle: </span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ opacity: 0.7 }}>Manpower: </span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -137,13 +121,75 @@ export default function EventTimeline() {
|
||||
<ArrowLeft size={16} /> Back to Changeover Analytics
|
||||
</Link>
|
||||
<h1>Event Timeline: {id}</h1>
|
||||
<p>Location-wise sequential breakdown of events</p>
|
||||
<p>Synchronized Swimlane Timeline</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-panel" style={{ display: 'flex', padding: '1.5rem', alignItems: 'stretch' }}>
|
||||
{renderTimeline('CO', groupedEvents.CO, 0)}
|
||||
{renderTimeline('Mill', groupedEvents.Mill, 1)}
|
||||
{renderTimeline('Conveyor', groupedEvents.Conveyor, 2)}
|
||||
<div className="glass-panel" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden' }}>
|
||||
|
||||
{/* Sticky Header Grid */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '80px 1fr 1fr 1fr',
|
||||
gap: '1.5rem',
|
||||
padding: '1.5rem 1.5rem 1rem 1.5rem',
|
||||
background: 'var(--panel-bg)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderBottom: '1px solid var(--panel-border)',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10
|
||||
}}>
|
||||
<h2 style={{ margin: 0, fontSize: '1rem', color: 'var(--text-secondary)' }}>Time</h2>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>CO Timeline</h2>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Mill Timeline</h2>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Conveyor Timeline</h2>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Timeline Tracks Container */}
|
||||
<div style={{ overflowY: 'auto', maxHeight: '65vh', padding: '0 1.5rem' }}>
|
||||
{chronologicalBlocks.length === 0 ? (
|
||||
<p style={{ padding: '2rem', textAlign: 'center', opacity: 0.5 }}>No events recorded.</p>
|
||||
) : (
|
||||
chronologicalBlocks.map((block, index) => (
|
||||
<div key={block.timeKey} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '80px 1fr 1fr 1fr',
|
||||
gap: '1.5rem',
|
||||
borderBottom: index < chronologicalBlocks.length - 1 ? '1px dashed rgba(255,255,255,0.1)' : 'none',
|
||||
padding: '1.5rem 0'
|
||||
}}>
|
||||
|
||||
{/* Time Anchor Left Column */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'sticky',
|
||||
top: '0',
|
||||
fontWeight: '600',
|
||||
color: 'var(--accent)',
|
||||
fontSize: '1.1rem',
|
||||
letterSpacing: '0.05em'
|
||||
}}>
|
||||
{block.timeKey}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Columns */}
|
||||
<div>
|
||||
{block.CO.map((ev, i) => renderEventCard(ev, i, block.CO.length))}
|
||||
</div>
|
||||
<div>
|
||||
{block.Mill.map((ev, i) => renderEventCard(ev, i, block.Mill.length))}
|
||||
</div>
|
||||
<div>
|
||||
{block.Conveyor.map((ev, i) => renderEventCard(ev, i, block.Conveyor.length))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user