[OPIK-576] [FR]: Consistent Experiments Dataset focus after page refr…

…esh or add refresh button (30s autorefresh is too long) (#906)

apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx

@@ -1,12 +1,18 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Info } from "lucide-react";
+import { Info, RotateCw } from "lucide-react";
 import useLocalStorageState from "use-local-storage-state";
 import {
   ColumnPinningState,
   Row,
   RowSelectionState,
 } from "@tanstack/react-table";
 import { keepPreviousData } from "@tanstack/react-query";
+import {
+  JsonParam,
+  NumberParam,
+  StringParam,
+  useQueryParam,
+} from "use-query-params";
 import get from "lodash/get";
 
 import DataTable from "@/components/shared/DataTable/DataTable";
@@ -34,6 +40,7 @@ import ExperimentsFiltersButton from "@/components/pages/ExperimentsShared/Exper
 import ExperimentRowActionsCell from "@/components/pages/ExperimentsPage/ExperimentRowActionsCell";
 import ExperimentsChartsWrapper from "@/components/pages/ExperimentsPage/charts/ExperimentsChartsWrapper";
 import SearchInput from "@/components/shared/SearchInput/SearchInput";
+import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import useGroupedExperimentsList, {
@@ -112,18 +119,34 @@ const ExperimentsPage: React.FunctionComponent = () => {
   const resetDialogKeyRef = useRef(0);
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
-  const [search, setSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [datasetId, setDatasetId] = useState("");
+  const [search = "", setSearch] = useQueryParam("search", StringParam, {
+    updateType: "replaceIn",
+  });
+
+  const [page = 1, setPage] = useQueryParam("page", NumberParam, {
+    updateType: "replaceIn",
+  });
+
+  const [datasetId = "", setDatasetId] = useQueryParam("dataset", StringParam, {
+    updateType: "replaceIn",
+  });
+
+  const [groupLimit, setGroupLimit] = useQueryParam<Record<string, number>>(
+    "limits",
+    { ...JsonParam, default: {} },
+    {
+      updateType: "replaceIn",
+    },
+  );
+
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [groupLimit, setGroupLimit] = useState<Record<string, number>>({});
 
-  const { data, isPending } = useGroupedExperimentsList({
+  const { data, isPending, refetch } = useGroupedExperimentsList({
     workspaceName,
     groupLimit,
-    datasetId,
-    search,
-    page,
+    datasetId: datasetId!,
+    search: search!,
+    page: page!,
     size: DEFAULT_GROUPS_PER_PAGE,
     polling: true,
   });
@@ -297,19 +320,29 @@ const ExperimentsPage: React.FunctionComponent = () => {
       <div className="mb-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
         <div className="flex items-center gap-2">
           <SearchInput
-            searchText={search}
+            searchText={search!}
             setSearchText={setSearch}
             placeholder="Search by name"
             className="w-[320px]"
           ></SearchInput>
           <ExperimentsFiltersButton
-            datasetId={datasetId}
+            datasetId={datasetId!}
             onChangeDatasetId={setDatasetId}
           />
         </div>
         <div className="flex items-center gap-2">
           <ExperimentsActionsPanel experiments={selectedRows} />
           <Separator orientation="vertical" className="ml-2 mr-2.5 h-6" />
+          <TooltipWrapper content="Refresh experiments list">
+            <Button
+              variant="outline"
+              size="icon"
+              className="shrink-0"
+              onClick={() => refetch()}
+            >
+              <RotateCw className="size-4" />
+            </Button>
+          </TooltipWrapper>
           <ColumnsButton
             columns={DEFAULT_COLUMNS}
             selectedColumns={selectedColumns}
@@ -351,7 +384,7 @@ const ExperimentsPage: React.FunctionComponent = () => {
       />
       <div className="py-4">
         <DataTablePagination
-          page={page}
+          page={page!}
           pageChange={setPage}
           size={DEFAULT_GROUPS_PER_PAGE}
           total={total}

apps/opik-frontend/src/hooks/useGroupedExperimentsList.ts

@@ -1,7 +1,8 @@
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import {
   keepPreviousData,
   QueryFunctionContext,
+  RefetchOptions,
   useQueries,
 } from "@tanstack/react-query";
 import isUndefined from "lodash/isUndefined";
@@ -44,8 +45,7 @@ type UseGroupedExperimentsListResponse = {
     total: number;
   };
   isPending: boolean;
-  isLoading: boolean;
-  isError: boolean;
+  refetch: (options?: RefetchOptions) => Promise<unknown>;
 };
 
 const extractPageSize = (
@@ -91,7 +91,10 @@ export default function useGroupedExperimentsList(
   );
   const isFilteredByDataset = Boolean(params.datasetId);
 
-  const { data: deletedDatasetExperiments } = useExperimentsList(
+  const {
+    data: deletedDatasetExperiments,
+    refetch: refetchDeletedDatasetExperiments,
+  } = useExperimentsList(
     {
       workspaceName: params.workspaceName,
       search: params.search,
@@ -106,7 +109,11 @@ export default function useGroupedExperimentsList(
     },
   );
 
-  const { data: dataset, isPending: isDatasetPending } = useDatasetById(
+  const {
+    data: dataset,
+    isPending: isDatasetPending,
+    refetch: refetchDataset,
+  } = useDatasetById(
     {
       datasetId: params.datasetId!,
     },
@@ -116,22 +123,25 @@ export default function useGroupedExperimentsList(
   const hasRemovedDatasetExperiments =
     (deletedDatasetExperiments?.total || 0) > 0;
 
-  const { data: datasetsRowData, isPending: isDatasetsPending } =
-    useDatasetsList(
-      {
-        workspaceName: params.workspaceName,
-        page: params.page,
-        size: params.size,
-        withExperimentsOnly: true,
-        sorting: GROUP_SORTING,
-        promptId: params.promptId,
-      },
-      {
-        placeholderData: keepPreviousData,
-        refetchInterval,
-        enabled: !isFilteredByDataset,
-      } as never,
-    );
+  const {
+    data: datasetsRowData,
+    isPending: isDatasetsPending,
+    refetch: refetchDatasetsRowData,
+  } = useDatasetsList(
+    {
+      workspaceName: params.workspaceName,
+      page: params.page,
+      size: params.size,
+      withExperimentsOnly: true,
+      sorting: GROUP_SORTING,
+      promptId: params.promptId,
+    },
+    {
+      placeholderData: keepPreviousData,
+      refetchInterval,
+      enabled: !isFilteredByDataset,
+    } as never,
+  );
 
   const datasetsData = useMemo(() => {
     return (
@@ -264,6 +274,23 @@ export default function useGroupedExperimentsList(
     total,
   ]);
 
+  const refetch = useCallback(
+    (options: RefetchOptions) => {
+      return Promise.all([
+        refetchDeletedDatasetExperiments(options),
+        refetchDataset(options),
+        refetchDatasetsRowData(options),
+        ...experimentsResponse.map((r) => r.refetch(options)),
+      ]);
+    },
+    [
+      experimentsResponse,
+      refetchDataset,
+      refetchDatasetsRowData,
+      refetchDeletedDatasetExperiments,
+    ],
+  );
+
   const isPending =
     (isFilteredByDataset ? isDatasetPending : isDatasetsPending) ||
     (experimentsResponse.length > 0 &&
@@ -273,5 +300,6 @@ export default function useGroupedExperimentsList(
   return {
     data,
     isPending,
+    refetch,
   } as UseGroupedExperimentsListResponse;
 }