From 8b589a417b8499be5e321c25e8282e7a2c3f87e1 Mon Sep 17 00:00:00 2001 From: Andy Brenneke Date: Mon, 23 Oct 2023 12:30:24 -0700 Subject: [PATCH] Status bar show execution time --- .pnp.cjs | 20 +++++++++++ ...rse-ms-npm-3.0.0-3acf02c3f3-fc602bba09.zip | Bin 0 -> 2725 bytes ...tty-ms-npm-8.0.0-7a40e0b54a-07c78d9522.zip | Bin 0 -> 5507 bytes packages/app/package.json | 1 + packages/app/src/components/StatusBar.tsx | 33 +++++++++++++++--- packages/app/src/hooks/useCurrentExecution.ts | 3 ++ packages/app/src/state/dataFlow.ts | 5 +++ yarn.lock | 17 +++++++++ 8 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 .yarn/cache/parse-ms-npm-3.0.0-3acf02c3f3-fc602bba09.zip create mode 100644 .yarn/cache/pretty-ms-npm-8.0.0-7a40e0b54a-07c78d9522.zip diff --git a/.pnp.cjs b/.pnp.cjs index cfaaf8c84..2d4836a92 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -6887,6 +6887,7 @@ const RAW_RUNTIME_STATE = ["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", "virtual:388c29633752d7c364e0487c276ae72861ce5d69c069bff16a49b35801303d87d39cb24723bbac1721c48df59f346575324fe3c6de8ead4fb7d83d6ae4a0e521#npm:2.10.0"],\ ["react-color", "virtual:388c29633752d7c364e0487c276ae72861ce5d69c069bff16a49b35801303d87d39cb24723bbac1721c48df59f346575324fe3c6de8ead4fb7d83d6ae4a0e521#npm:2.19.3"],\ @@ -20025,6 +20026,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["parse-ms", [\ + ["npm:3.0.0", {\ + "packageLocation": "./.yarn/cache/parse-ms-npm-3.0.0-3acf02c3f3-fc602bba09.zip/node_modules/parse-ms/",\ + "packageDependencies": [\ + ["parse-ms", "npm:3.0.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["parse-numeric-range", [\ ["npm:1.3.0", {\ "packageLocation": "./.yarn/cache/parse-numeric-range-npm-1.3.0-71baf377a4-289ca126d5.zip/node_modules/parse-numeric-range/",\ @@ -21285,6 +21295,16 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["pretty-ms", [\ + ["npm:8.0.0", {\ + "packageLocation": "./.yarn/cache/pretty-ms-npm-8.0.0-7a40e0b54a-07c78d9522.zip/node_modules/pretty-ms/",\ + "packageDependencies": [\ + ["pretty-ms", "npm:8.0.0"],\ + ["parse-ms", "npm:3.0.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["pretty-time", [\ ["npm:1.1.0", {\ "packageLocation": "./.yarn/cache/pretty-time-npm-1.1.0-71de95ab9a-ed5783ea52.zip/node_modules/pretty-time/",\ 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 new file mode 100644 index 0000000000000000000000000000000000000000..96578f1bcbfc7a0ac4c1c492727ef6c4eab1eba5 GIT binary patch literal 2725 zcmZ`*c{r5o8y+)b8#K1EMfN4T6bjKCQpiME8iP4zVwgq9k|tRr+p&fy!k7v*l_eB% zjIl3`WmNV;5h;`wXR71Z$@QD}yRPqj|9GGK``-JxpXa^d)*!Gb;QKJE807h}`1d8i znh8WS#vM;YpT%JUwBc;G?%2B359J?#(Zp}Y00BHd;G4z9u#rFj00{;Fq}j&cu$~w~ z00wD~AdcvWUYK#(`Hpc^h;)aHRn~1eWhLL5@y=TqW*j5l(hcAE+N~RiSCK0W_)O@w zRHfrRxrnFlGmxW}VXuM4`YG^dh0+2H!n`tc?7Rl4>_T4m$Z7&Dzo8i>_N3+DK@*Z& zLEjY4G3OobQ8fYZrf^S@QGFAZ0n@<)Tl>WQ4twu6xn=`wijWx{|I;#s`>o&u>3Kh( zfB>YZt5+^DxYcifVguFmUPOBCoiu-wJBN!c0KJpO6OE0dyBq5tyLawVIN}=!4Fcpo zN*VWo&5!}JvWZo4iQp@_7krL1f3B(a3iB#>pPi-B+g1eX&uL^+8eP|l z7!>}1f((CPBvMtTr`nRnZO23+Enf7!xl~&N(-4E`KUcV1Kh&Myu)irT`Kh67NxVUM zGhKd)_!RuQcfD`rQC(UkO`u%q@VC%?4u<{QYps81SEr!-I7&tpdqJ+IZY!qC`IZaZ z0Z{%>UAM1o-Buq=$D0wI-zI7FwT3RvkVcQf_GdTFNvxD$Dz8jp$~};;BwAmk73o!VeoBJamKcd#1?yFzw2j>|bo_wFgzu7CbN8*Yxg^F3cwHdF+=8iFpIg~AIBg)Y6OQI@n8A9Mi$OTv-WuhZt z95V1MH{83;utVrJd8(%)f$9EJ@SEcGs!xym#1d@)OTaR0#fv4NF(Fz$0hxVGgeV<; zuJJvgkTo6iQXfx53|YR)A?4A^1B7K_99Y+1xX_EoL)6DDPE=>-wc{7w8 z>1Dx^a&RucewwCC;7M$Pkp!mboPF7ZHMsU7JzuIANH%fCNJP_yuG1&Z>i8)+@Nppw zgWiXoo>YB)U9wYp_g^~OO66;KgaUobK*~f$>Z!K&3$h~U_t^$<6VluIGocn1f8Uk5 zyz^{k5JEiPE1=7185bPBqgyNTaENWynT^4#$r;n35ur!8fWb@k3&`@M;2JaKBJ0V~ zulj_#Qi-ekh{G}~As$9gpU^*#(T_`EzeVUu;MeMI*2EEiC(ZHkbG;A_0N^c)GyQ zV#Qn>y%AOFsh;^~qG%5drNnqlnIpn&%xz}^jmGroX)j&GO5oPWuRTllA+Hf1Ze-m$ z6G_#No1C4!Izkc|VNgaOhqevxwaPNto^!wH7;Zh<1A@QUBXpc|@%__z0%a&=U4z;< zXdRSoqZ~h9yy5H^b-w&Ie6b^;^-=6WC0DB9`s$?nFfoeViDc1b^`ZH0D`zsj2D$D9Nv zY(oQSW5Crz{xj&{UFmDRUyeuT&{{u2f6v>3pPji3D{ow^yzOF}H-8KYjmK!=(J`sE z)*y5K*q*LCJSQlc70)W;dLzZ`WWYiu@x60|ksQ5U9g6Cr?-~x=_d%?T=cO6gjq0=s zBDUv1S^+~L*F6Jiri+kw$+^nVyF@}b=Ngtm02zuJAf zvVDwn1lQDv;7gI(12XrLn8Obxw$ZJhzm$Y8h z9Hs7gEOM0DqJeS$s&;j?G79q~tRxwA2TfBCS8P0B)BZJFhQ7OytDw<~w}twm%8{}^$yD0QX(>}*Ey#i`NV zWhcGsDIhE{JIll%Wta%vSaoe=Squ)~K@fXC!lLWPSTO%SZE+{;L%;iz&9Pvv&RYH! z`X9IQ6JxXGZ}lsi7{w9pY%%_IFPkUXgxY$0{DRsEV)r|ncga?)txfe8)^V1x`u|7! zZ;RcEx3$=R;qh{@!~0+9Zw1>b?_XeOZgyb5#16OSWPK6<;ATA>tO7~?VM+f1|9f1Z literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..de3b4e5c40a303510b5db41f3711679064413892 GIT binary patch literal 5507 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 literal 0 HcmV?d00001 diff --git a/packages/app/package.json b/packages/app/package.json index 0343ca194..e5a34c5fc 100644 --- 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 index d834feddc..e27d20f58 100644 --- 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(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 (
+ {(graphStartTime ?? 0) > 0 && ( +
+ Runtime: +
+ )} {tokens > 0 && (
Tokens: {tokens.toLocaleString()} diff --git a/packages/app/src/hooks/useCurrentExecution.ts b/packages/app/src/hooks/useCurrentExecution.ts index e94702aaf..2ff4acef0 100644 --- 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) => { 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 index 4bf137a26..abf33bcb2 100644 --- a/packages/app/src/state/dataFlow.ts +++ b/packages/app/src/state/dataFlow.ts @@ -54,6 +54,11 @@ export const graphRunningState = atom({ default: false, }); +export const graphStartTimeState = atom({ + key: 'graphStartTime', + default: undefined, +}); + export const graphPausedState = atom({ key: 'graphPaused', default: false, diff --git a/yarn.lock b/yarn.lock index e35ced5eb..e4fa907a1 100644 --- 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"