-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(trace): add live updating UI, stream on/off switch (#1554)
* wip * feat(tracing): live streaming UI with pause * feat(trace): streaming toggle and live ui * Fix comment * rename the callback * black formatting
- Loading branch information
1 parent
fd709de
commit 92e53bf
Showing
15 changed files
with
634 additions
and
126 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useEffect, useRef } from "react"; | ||
|
|
||
| type Callback = () => void; | ||
| export function useInterval(callback: Callback, delay: number) { | ||
| const savedCallback = useRef<Callback | null>(null); | ||
|
|
||
| // Remember the latest callback. | ||
| useEffect(() => { | ||
| savedCallback.current = callback; | ||
| }, [callback]); | ||
|
|
||
| // Set up the interval. | ||
| useEffect(() => { | ||
| function tick() { | ||
| savedCallback.current && savedCallback.current(); | ||
| } | ||
| if (delay !== null) { | ||
| const id = setInterval(tick, delay); | ||
| return () => clearInterval(id); | ||
| } | ||
| }, [delay]); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import React, { | ||
| startTransition, | ||
| useCallback, | ||
| useEffect, | ||
| useRef, | ||
| useState, | ||
| } from "react"; | ||
| import { graphql, useRefetchableFragment } from "react-relay"; | ||
|
|
||
| import { Switch } from "@arizeai/components"; | ||
|
|
||
| import { useInterval } from "@phoenix/hooks/useInterval"; | ||
|
|
||
| import { StreamToggle_data$key } from "./__generated__/StreamToggle_data.graphql"; | ||
|
|
||
| /** | ||
| * Check every few seconds for new data | ||
| */ | ||
| const REFRESH_INTERVAL_MS = 2000; | ||
|
|
||
| export function StreamToggle(props: { | ||
| query: StreamToggle_data$key; | ||
| onRefresh: () => void; | ||
| }) { | ||
| const { onRefresh } = props; | ||
| const [isStreaming, setIsStreaming] = useState<boolean>(true); | ||
|
|
||
| const [traceCountData, refetchCounts] = useRefetchableFragment( | ||
| graphql` | ||
| fragment StreamToggle_data on Query | ||
| @refetchable(queryName: "StreamToggleRefetchQuery") { | ||
| traceCount: spans(rootSpansOnly: true) { | ||
| pageInfo { | ||
| totalCount | ||
| } | ||
| } | ||
| } | ||
| `, | ||
| props.query | ||
| ); | ||
| // Keep track of the loaded trace count so we can detect when it changes | ||
| const loadedTraceCountRef = useRef<number>( | ||
| traceCountData.traceCount.pageInfo.totalCount | ||
| ); | ||
|
|
||
| // Refetch the count of traces if the streaming toggle is on | ||
| const refetchCountsIfStreaming = useCallback(() => { | ||
| if (isStreaming) { | ||
| startTransition(() => { | ||
| refetchCounts({}, { fetchPolicy: "store-and-network" }); | ||
| }); | ||
| } | ||
| }, [isStreaming, refetchCounts]); | ||
|
|
||
| // We want to refetch higher up the render tree when the counts change | ||
| const totalTraceCount = traceCountData.traceCount.pageInfo.totalCount; | ||
| useEffect(() => { | ||
| if (loadedTraceCountRef.current !== totalTraceCount) { | ||
| // Update the loaded trace count so the effect doesn't fire again | ||
| loadedTraceCountRef.current = totalTraceCount; | ||
| onRefresh(); | ||
| } | ||
| }, [onRefresh, totalTraceCount]); | ||
|
|
||
| useInterval(refetchCountsIfStreaming, REFRESH_INTERVAL_MS); | ||
| return ( | ||
| <Switch | ||
| labelPlacement="start" | ||
| defaultSelected | ||
| onChange={() => { | ||
| setIsStreaming(!isStreaming); | ||
| // Perform one last refresh before pausing / resuming | ||
| onRefresh(); | ||
| }} | ||
| > | ||
| Stream | ||
| </Switch> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.