Status bar show execution time

Ironclad · Oct 23, 2023 · 8b589a4 · 8b589a4
1 parent 2098adc
commit 8b589a4
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 4 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/parse-ms-npm-3.0.0-3acf02c3f3-fc602bba09.zip b/.yarn/cache/parse-ms-npm-3.0.0-3acf02c3f3-fc602bba09.zip
diff --git a/.yarn/cache/pretty-ms-npm-8.0.0-7a40e0b54a-07c78d9522.zip b/.yarn/cache/pretty-ms-npm-8.0.0-7a40e0b54a-07c78d9522.zip
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -97,6 +97,7 @@
     "pnpm": "^8.9.2",
     "prettier": "^3.0.3",
     "pretty-bytes": "^6.1.1",
+    "pretty-ms": "^8.0.0",
     "react": "^18.2.0",
     "react-collapsible": "^2.10.0",
     "react-color": "^2.19.3",

diff --git a/packages/app/src/components/StatusBar.tsx b/packages/app/src/components/StatusBar.tsx
@@ -1,6 +1,10 @@
-import { type FC } from 'react';
+import { useState, type FC, useRef, useEffect } from 'react';
 import { css } from '@emotion/react';
 import { useTotalRunCost } from '../hooks/useTotalRunCost';
+import { useRecoilValue } from 'recoil';
+import { graphRunningState, graphStartTimeState } from '../state/dataFlow';
+import { useInterval, useLatest } from 'ahooks';
+import prettyMs from 'pretty-ms';
 
 const styles = css`
   position: fixed;
@@ -24,13 +28,34 @@ const styles = css`
 
 export const StatusBar: FC<{}> = () => {
   const { cost, tokens } = useTotalRunCost();
+  const graphRunning = useRecoilValue(graphRunningState);
+  const graphStartTime = useRecoilValue(graphStartTimeState);
 
-  if (!cost && !tokens) {
-    return null;
-  }
+  const runtimeRef = useRef<HTMLDivElement>(null);
+  const latestGraphRunning = useLatest(graphRunning);
+  const latestGraphStartTime = useLatest(graphStartTime);
+
+  useEffect(() => {
+    const fn = () => {
+      if (latestGraphRunning.current && latestGraphStartTime.current != null) {
+        const duration = prettyMs(Date.now() - latestGraphStartTime.current, {
+          keepDecimalsOnWholeSeconds: true,
+          secondsDecimalDigits: 2,
+        });
+        runtimeRef.current!.innerText = duration;
+        requestAnimationFrame(fn);
+      }
+    };
+    requestAnimationFrame(fn);
+  }, [graphRunning, graphStartTime]);
 
   return (
     <div css={styles}>
+      {(graphStartTime ?? 0) > 0 && (
+        <div className="runtime">
+          Runtime: <strong ref={runtimeRef}></strong>
+        </div>
+      )}
       {tokens > 0 && (
         <div className="tokens">
           Tokens: <strong>{tokens.toLocaleString()}</strong>

diff --git a/packages/app/src/hooks/useCurrentExecution.ts b/packages/app/src/hooks/useCurrentExecution.ts
@@ -19,6 +19,7 @@ import {
   rootGraphState,
   runningGraphsState,
   selectedProcessPageNodesState,
+  graphStartTimeState,
 } from '../state/dataFlow';
 import { type ProcessQuestions, userInputModalQuestionsState } from '../state/userInput';
 import { lastRecordingState } from '../state/execution';
@@ -91,6 +92,7 @@ export function useCurrentExecution() {
   const trivetRunningLatest = useLatest(trivetRunning);
   const setRootGraph = useSetRecoilState(rootGraphState);
   const previousDataPerNodeToKeep = useRecoilValue(previousDataPerNodeToKeepState);
+  const setGraphStartTime = useSetRecoilState(graphStartTimeState);
 
   const setDataForNode = (nodeId: NodeId, processId: ProcessId, data: Partial<NodeRunData>) => {
     setLastRunData((prev) =>
@@ -178,6 +180,7 @@ export function useCurrentExecution() {
     setUserInputQuestions({});
     setGraphRunning(true);
     setRootGraph(startGraph.metadata!.id);
+    setGraphStartTime(Date.now());
 
     // Don't clear the last run data if we're running trivet tests, so you can see both the
     // test graph and the validation graph in the results.

diff --git a/packages/app/src/state/dataFlow.ts b/packages/app/src/state/dataFlow.ts
@@ -54,6 +54,11 @@ export const graphRunningState = atom<boolean>({
   default: false,
 });
 
+export const graphStartTimeState = atom<number | undefined>({
+  key: 'graphStartTime',
+  default: undefined,
+});
+
 export const graphPausedState = atom<boolean>({
   key: 'graphPaused',
   default: false,

diff --git a/yarn.lock b/yarn.lock
@@ -4072,6 +4072,7 @@ __metadata:
     pnpm: "npm:^8.9.2"
     prettier: "npm:^3.0.3"
     pretty-bytes: "npm:^6.1.1"
+    pretty-ms: "npm:^8.0.0"
     react: "npm:^18.2.0"
     react-collapsible: "npm:^2.10.0"
     react-color: "npm:^2.19.3"
@@ -14288,6 +14289,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-ms@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "parse-ms@npm:3.0.0"
+  checksum: fc602bba093835562321a67a9d6c8c9687ca4f26a09459a77e07ebd7efddd1a5766725ec60eb0c83a2abe67f7a23808f7deb1c1226727776eaf7f9607ae09db2
+  languageName: node
+  linkType: hard
+
 "parse-numeric-range@npm:^1.3.0":
   version: 1.3.0
   resolution: "parse-numeric-range@npm:1.3.0"
@@ -15051,6 +15059,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-ms@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "pretty-ms@npm:8.0.0"
+  dependencies:
+    parse-ms: "npm:^3.0.0"
+  checksum: 07c78d9522d7d3a8fa54fbb417d21c451b82de0fe3591de7d3a715160507067da77c421cbe601d9a65bfc10f52883057eb2922e2698913647d444fb35e9db6ed
+  languageName: node
+  linkType: hard
+
 "pretty-time@npm:^1.1.0":
   version: 1.1.0
   resolution: "pretty-time@npm:1.1.0"