feat(ui): add the ability to turn off auto-refresh of projects (#4414)

* feat(ui): add the ability to turn off auto-refresh of projects

* cleanup

* Update app/src/hooks/useInterval.ts

app/src/hooks/useInterval.ts

@@ -1,7 +1,13 @@
 import { useEffect, useRef } from "react";
 
 type Callback = () => void;
-export function useInterval(callback: Callback, delay: number) {
+
+/**
+ * Custom hook to use setInterval with React hooks
+ * @param callback
+ * @param {number | null} delay - if set to null, no interval will be set
+ */
+export function useInterval(callback: Callback, delay: number | null) {
   const savedCallback = useRef<Callback | null>(null);
 
   // Remember the latest callback.
@@ -14,7 +20,7 @@ export function useInterval(callback: Callback, delay: number) {
     function tick() {
       savedCallback.current && savedCallback.current();
     }
-    if (delay !== null) {
+    if (typeof delay === "number") {
       const id = setInterval(tick, delay);
       return () => clearInterval(id);
     }

app/src/pages/projects/ProjectsAutoRefreshToggle.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Switch } from "@arizeai/components";
+
+import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
+
+/**
+ * Enable / Disable auto refresh for projects
+ */
+export function ProjectsAutoRefreshToggle() {
+  const autoRefreshEnabled = usePreferencesContext(
+    (state) => state.projectsAutoRefreshEnabled
+  );
+  const setAutoRefreshEnabled = usePreferencesContext(
+    (state) => state.setProjectAutoRefreshEnabled
+  );
+
+  return (
+    <Switch
+      labelPlacement="start"
+      isSelected={autoRefreshEnabled}
+      onChange={() => {
+        setAutoRefreshEnabled(!autoRefreshEnabled);
+      }}
+    >
+      Auto-Refresh
+    </Switch>
+  );
+}

app/src/pages/projects/ProjectsPage.tsx

@@ -23,6 +23,7 @@ import {
   useLastNTimeRange,
 } from "@phoenix/components/datetime";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
+import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
 import { useInterval } from "@phoenix/hooks/useInterval";
 import { intFormatter } from "@phoenix/utils/numberFormatUtils";
 
@@ -34,9 +35,10 @@ import { ProjectsPageProjectsQuery } from "./__generated__/ProjectsPageProjectsQ
 import { ProjectsPageQuery } from "./__generated__/ProjectsPageQuery.graphql";
 import { NewProjectButton } from "./NewProjectButton";
 import { ProjectActionMenu } from "./ProjectActionMenu";
+import { ProjectsAutoRefreshToggle } from "./ProjectsAutoRefreshToggle";
 
 const REFRESH_INTERVAL_MS = 10000;
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 50;
 
 export function ProjectsPage() {
   const { timeRange } = useLastNTimeRange();
@@ -49,6 +51,9 @@ export function ProjectsPage() {
 }
 
 export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
+  const autoRefreshEnabled = usePreferencesContext(
+    (state) => state.projectsAutoRefreshEnabled
+  );
   const [notify, holder] = useNotification();
   // Convert the time range to a variable that can be used in the query
   const timeRangeVariable = useMemo(() => {
@@ -83,7 +88,7 @@ export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
       @refetchable(queryName: "ProjectsPageProjectsQuery")
       @argumentDefinitions(
         after: { type: "String", defaultValue: null }
-        first: { type: "Int", defaultValue: 100 }
+        first: { type: "Int", defaultValue: 50 }
       ) {
         projects(first: $first, after: $after)
           @connection(key: "ProjectsPage_projects") {
@@ -127,11 +132,14 @@ export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
     [hasNext, isLoadingNext, loadNext]
   );
 
-  useInterval(() => {
-    startTransition(() => {
-      refetch({}, { fetchPolicy: "store-and-network" });
-    });
-  }, REFRESH_INTERVAL_MS);
+  useInterval(
+    () => {
+      startTransition(() => {
+        refetch({}, { fetchPolicy: "store-and-network" });
+      });
+    },
+    autoRefreshEnabled ? REFRESH_INTERVAL_MS : null
+  );
 
   const onDelete = useCallback(
     (projectName: string) => {
@@ -195,7 +203,13 @@ export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
         borderBottomColor="grey-200"
         borderBottomWidth="thin"
       >
-        <Flex direction="row" justifyContent="end" gap="size-100">
+        <Flex
+          direction="row"
+          justifyContent="end"
+          alignItems="center"
+          gap="size-100"
+        >
+          <ProjectsAutoRefreshToggle />
           <NewProjectButton />
           <ConnectedLastNTimeRangePicker />
         </Flex>

app/src/store/preferencesStore.tsx

@@ -14,6 +14,11 @@ export interface PreferencesProps {
    * @default true
    */
   traceStreamingEnabled: boolean;
+  /**
+   * Whether or not to automatically refresh projects
+   * @default true
+   */
+  projectsAutoRefreshEnabled: boolean;
   /**
    * Whether or not to show the span aside that contains details about timing, status, etc.
    * @default true
@@ -34,9 +39,13 @@ export interface PreferencesState extends PreferencesProps {
   /**
    * Setter for enabling/disabling trace streaming
    * @param traceStreamingEnabled
-   * @returns
    */
   setTraceStreamingEnabled: (traceStreamingEnabled: boolean) => void;
+  /**
+   * Setter for enabling/disabling project auto refresh
+   * @param projectsAutoRefreshEnabled
+   */
+  setProjectAutoRefreshEnabled: (projectsAutoRefreshEnabled: boolean) => void;
   /**
    * Setter for enabling/disabling the span aside
    * @param showSpanAside
@@ -61,6 +70,10 @@ export const createPreferencesStore = (
     setTraceStreamingEnabled: (traceStreamingEnabled) => {
       set({ traceStreamingEnabled });
     },
+    projectsAutoRefreshEnabled: true,
+    setProjectAutoRefreshEnabled: (projectsAutoRefreshEnabled) => {
+      set({ projectsAutoRefreshEnabled });
+    },
     showSpanAside: true,
     setShowSpanAside: (showSpanAside) => {
       set({ showSpanAside });