feat: implement filter parameter synchronization and enhance workerpools query with ordering options

Author: ErwanDecoster

src/hooks/useFilterParam.ts

@@ -0,0 +1,39 @@
+import { useSearch, useNavigate } from '@tanstack/react-router';
+
+/**
+ * Synchronize a string filter value with the URL search params.
+ * Ensures the value is part of the allowedValues list; otherwise falls back to defaultValue.
+ *
+ * @param paramName Query string key to store the filter value under.
+ * @param allowedValues List of allowed string values for the filter.
+ * @param defaultValue Default value if none present or invalid.
+ * @returns [currentValue, setValue]
+ */
+export function useFilterParam(
+  paramName: string,
+  allowedValues: string[],
+  defaultValue: string
+) {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+
+  const rawValue = (search?.[paramName] as string | undefined) ?? defaultValue;
+  const value = allowedValues.includes(rawValue) ? rawValue : defaultValue;
+
+  const setValue = (newValue: string) => {
+    if (!allowedValues.includes(newValue)) return; // ignore invalid values
+    if (newValue !== value) {
+      const nav: any = navigate;
+      nav({
+        search: (prev: any) => ({
+          ...prev,
+          [paramName]: newValue,
+        }),
+        replace: true,
+        resetScroll: false,
+      });
+    }
+  };
+
+  return [value, setValue] as const;
+}

src/modules/workerpools/WorkerpoolsPreviewTable.tsx

@@ -1,5 +1,6 @@
 import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
+import { Workerpool_OrderBy, OrderDirection } from '@/graphql/poco/graphql';
 import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { LoaderCircle } from 'lucide-react';
@@ -8,25 +9,38 @@ import { DataTable } from '@/components/DataTable';
 import WorkerpoolIcon from '@/components/icons/WorkerpoolIcon';
 import { Button } from '@/components/ui/button';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { createPlaceholderDataFn } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { ErrorAlert } from '../ErrorAlert';
 import { workerpoolsQuery } from './workerpoolsQuery';
 import { columns } from './workerpoolsTable/columns';
 
 export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
   const { chainId } = useUserStore();
 
-  const queryKey = [chainId, 'workerpools_preview'];
+  // Pertinent ordering: usageCount desc + recent usage constraint (last 14 days)
+  const recentFrom = Math.floor(Date.now() / 1000) - 14 * 24 * 60 * 60;
+  const orderBy: Workerpool_OrderBy = Workerpool_OrderBy.UsageCount;
+  const orderDirection: OrderDirection = OrderDirection.Desc;
+  const queryKey = [
+    chainId,
+    'workerpools_preview',
+    orderBy,
+    orderDirection,
+    recentFrom,
+  ];
   const workerpools = useQuery({
     queryKey,
     queryFn: () =>
       execute(workerpoolsQuery, chainId, {
         length: PREVIEW_TABLE_LENGTH,
         skip: 0,
+        orderBy,
+        orderDirection,
+        recentFrom,
       }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
     enabled: !!chainId,
-    placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    placeholderData: createPlaceholderDataFn(),
   });
 
   const formattedData =
@@ -40,7 +54,7 @@ export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
           <WorkerpoolIcon size={20} className="text-foreground" />
-          Latest workerpools deployed
+          Most pertinent workerpools
           {workerpools.data && workerpools.isError && (
             <span className="text-muted-foreground text-sm font-light">
               (outdated)

src/modules/workerpools/workerpoolsQuery.ts

@@ -1,26 +1,33 @@
 import { graphql } from '@/graphql/poco/gql';
 
+// @ts-expect-error Updated query; regenerate codegen
 export const workerpoolsQuery = graphql(`
   query Workerpools(
     $length: Int = 20
     $skip: Int = 0
     $nextSkip: Int = 20
     $nextNextSkip: Int = 40
+    $orderBy: Workerpool_orderBy = timestamp
+    $orderDirection: OrderDirection = desc
+    $recentFrom: BigInt = 0
   ) {
     workerpools(
       first: $length
       skip: $skip
-      orderBy: timestamp
-      orderDirection: desc
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { lastUsageTimestamp_gte: $recentFrom }
     ) {
       address: id
       owner {
         address: id
       }
       timestamp
+      lastUsageTimestamp
       description
       workerStakeRatio
       schedulerRewardRatio
+      usageCount
       transfers(orderBy: timestamp, orderDirection: desc) {
         transaction {
           txHash: id
@@ -32,16 +39,18 @@ export const workerpoolsQuery = graphql(`
     workerpoolsHasNext: workerpools(
       first: 1
       skip: $nextSkip
-      orderBy: timestamp
-      orderDirection: desc
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { lastUsageTimestamp_gte: $recentFrom }
     ) {
       address: id
     }
     workerpoolsHasNextNext: workerpools(
       first: 1
       skip: $nextNextSkip
-      orderBy: timestamp
-      orderDirection: desc
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { lastUsageTimestamp_gte: $recentFrom }
     ) {
       address: id
     }

src/routes/$chainSlug/_layout/workerpools.tsx

@@ -1,33 +1,54 @@
 import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
+import { Workerpool_OrderBy, OrderDirection } from '@/graphql/poco/graphql';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import WorkerpoolIcon from '@/components/icons/WorkerpoolIcon';
 import { BackButton } from '@/components/ui/BackButton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components/ui/select';
+import { useFilterParam } from '@/hooks/useFilterParam';
 import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import { WorkerpoolBreadcrumbsList } from '@/modules/workerpools/WorkerpoolBreadcrumbs';
 import { workerpoolsQuery } from '@/modules/workerpools/workerpoolsQuery';
 import { columns } from '@/modules/workerpools/workerpoolsTable/columns';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { createPlaceholderDataFn } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { getAdditionalPages } from '@/utils/format';
 
 export const Route = createFileRoute('/$chainSlug/_layout/workerpools')({
   component: WorkerpoolsRoute,
 });
 
-function useWorkerpoolsData(currentPage: number) {
+function useWorkerpoolsData(currentPage: number, orderFilter: string) {
   const { chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
   const nextSkip = skip + TABLE_LENGTH;
   const nextNextSkip = skip + 2 * TABLE_LENGTH;
+  const orderBy = orderFilter === 'pertinent' ? 'usageCount' : 'timestamp';
+  const orderDirection = orderFilter === 'oldest' ? 'asc' : 'desc';
+  const recentFrom =
+    orderFilter === 'pertinent'
+      ? Math.floor(Date.now() / 1000) - 14 * 24 * 60 * 60
+      : 0;
 
-  const queryKey = [chainId, 'workerpools', currentPage];
+  const queryKey = [
+    chainId,
+    'workerpools',
+    currentPage,
+    orderBy,
+    orderDirection,
+    recentFrom,
+  ];
   const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
     {
       queryKey,
@@ -37,10 +58,13 @@ function useWorkerpoolsData(currentPage: number) {
           skip,
           nextSkip,
           nextNextSkip,
+          orderBy: orderBy as Workerpool_OrderBy,
+          orderDirection: orderDirection as OrderDirection,
+          recentFrom,
         }),
       refetchInterval: TABLE_REFETCH_INTERVAL,
       enabled: !!chainId,
-      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+      placeholderData: createPlaceholderDataFn(),
     }
   );
 
@@ -68,20 +92,54 @@ function useWorkerpoolsData(currentPage: number) {
 }
 
 function WorkerpoolsRoute() {
+  const orders = [
+    { id: 1, value: 'recent', name: 'Recently deployed' },
+    { id: 2, value: 'oldest', name: 'Oldest deployed' },
+    { id: 3, value: 'pertinent', name: 'Most pertinent' },
+  ];
+  const allowedOrderValues = orders.map((o) => o.value);
   const [currentPage, setCurrentPage] = usePageParam('workerpoolsPage');
+  const [orderByFilter, setOrderByFilter] = useFilterParam(
+    'workerpoolsOrderBy',
+    allowedOrderValues,
+    'pertinent'
+  );
   const {
     data,
     isLoading,
     isRefetching,
     isError,
     hasPastError,
     additionalPages,
-  } = useWorkerpoolsData(currentPage - 1);
+  } = useWorkerpoolsData(currentPage - 1, orderByFilter);
+
+  function handleOrderChange(value: string) {
+    setOrderByFilter(value);
+    setCurrentPage(1);
+  }
 
   return (
     <div className="mt-8 grid gap-6">
       <div className="mt-6 flex flex-col justify-between lg:flex-row">
-        <SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
+        <div className="flex flex-col items-stretch gap-4 py-6 sm:flex-row lg:order-last lg:mr-0 lg:py-0">
+          <SearcherBar className="lg:max-w-md xl:max-w-xl" />
+          <Select
+            value={orderByFilter?.toString()}
+            onValueChange={handleOrderChange}
+            defaultValue="pertinent"
+          >
+            <SelectTrigger className="m-auto box-content h-9! rounded-2xl">
+              Order by
+            </SelectTrigger>
+            <SelectContent>
+              {orders.map((order) => (
+                <SelectItem key={order.id} value={order.value}>
+                  {order.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <div className="space-y-2">
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <WorkerpoolIcon size={24} />
@@ -116,6 +174,7 @@ function WorkerpoolsRoute() {
         currentPage={currentPage}
         totalPages={currentPage + additionalPages}
         onPageChange={setCurrentPage}
+        filterKey={orderByFilter}
       />
     </div>
   );

src/utils/createPlaceholderDataFnForQueryKey.ts

@@ -33,3 +33,17 @@ export const createPlaceholderDataFnForQueryKey =
       return previousData;
     }
   };
+
+/**
+ * Always reuse previous data (even if key changes) until fresh data arrives.
+ * Useful for aggressively smoothing rapid key churn (rare). Opt-in separately.
+ */
+export const createPlaceholderDataFn =
+  <TQueryFnData, TQueryData, TError>(): PlaceholderDataFunction<
+    TQueryFnData,
+    TError,
+    TQueryData,
+    QueryKey
+  > =>
+  (previousData) =>
+    previousData;