fix: Minor updates to the UI

inferablehq · Dec 7, 2024 · 65751d5 · 65751d5
1 parent dd2f5bb
commit 65751d5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/app/components/debug-event.tsx b/app/components/debug-event.tsx
@@ -34,12 +34,14 @@ function formatDateTime(date: string | Date) {
 export function DebugEvent({
   event,
   clusterId,
+  msSincePreviousEvent,
 }: {
   event: ClientInferResponseBody<
     typeof contract.getRunTimeline,
     200
   >["activity"][number];
   clusterId: string;
+  msSincePreviousEvent: number;
 }) {
   const [eventMeta, setEventMeta] = useState<any | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -77,8 +79,11 @@ export function DebugEvent({
           <p className="text-sm font-medium text-gray-700">
             {startCase(event.type)}
           </p>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-xs text-muted-foreground font-mono">
             {formatDateTime(event.createdAt)}
+            <span className="text-muted-foreground font-mono text-blue-400">
+              {msSincePreviousEvent ? ` +${msSincePreviousEvent / 1000}s` : ""}
+            </span>
           </span>
         </div>
         <Sheet>

diff --git a/app/components/workflow.tsx b/app/components/workflow.tsx
@@ -308,14 +308,27 @@ export function Run({
     })) || [];
 
   const activityElements =
-    runTimeline?.activity.map((a) => ({
-      element: (
-        <ElementWrapper id={a.id} key={a.id} mutableId={mutableId}>
-          <DebugEvent clusterId={clusterId} event={a} />
-        </ElementWrapper>
-      ),
-      timestamp: new Date(a.createdAt).getTime(),
-    })) || [];
+    runTimeline?.activity
+      .sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1))
+      .map((a, index) => ({
+        element: (
+          <ElementWrapper id={a.id} key={a.id} mutableId={mutableId}>
+            <DebugEvent
+              clusterId={clusterId}
+              event={a}
+              msSincePreviousEvent={
+                index > 0
+                  ? new Date(a.createdAt).getTime() -
+                    new Date(
+                      runTimeline?.activity[index - 1]?.createdAt ?? 0
+                    ).getTime()
+                  : 0
+              }
+            />
+          </ElementWrapper>
+        ),
+        timestamp: new Date(a.createdAt).getTime(),
+      })) || [];
 
   const testHeader =
     runTimeline?.run.test === true