Update grid to render exact seconds for waterfall effect and fix page title

2026-07-28 14:25:50 +05:30
parent 25a3ef2a5a
commit 96c0d51867
2 changed files with 4 additions and 4 deletions
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ui</title>
+    <title>AI SOP Monitoring</title>
  </head>
  <body>
    <div id="root"></div>
@@ -50,8 +50,8 @@ export default function EventTimeline() {
  const chronologicalBlocks = useMemo(() => {
    const blocks = {};
    events.forEach(ev => {
-      // Group by Minute (HH:MM)
-      const timeKey = ev.start_time.substring(0, 5); 
+      // Group by exact time (HH:MM:SS) for a waterfall layout
+      const timeKey = ev.start_time.substring(0, 8); 
      if (!blocks[timeKey]) {
        blocks[timeKey] = { timeKey, CO: [], Mill: [], Conveyor: [] };
      }
@@ -79,7 +79,7 @@ export default function EventTimeline() {
    >
      <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)}
+          {ev.start_time.substring(0, 8)} - {ev.end_time.substring(0, 8)}
        </span>
        {getStateBadge(ev.state)}
      </div>