feat: add retrievability filter (http and rpa) for score compliance dashboards

* Add retrievability filter (http and rpa) for score compliance dashboards

* Remove retrieval rate colum from reports views

* Change query retrievabilityType value

Author: lukasz-wal

src/app/allocators/(pages)/[id]/(pages)/reports/(pages)/[...report]/components/provider-view/provider-table.tsx

@@ -165,31 +165,6 @@ const useReportViewProvidersColumns = (/*compareMode: boolean*/) => {
         );
       },
     },
-    {
-      accessorKey: "retrievability_success_rate",
-      header: () => {
-        return <div className="whitespace-nowrap">Retrieval Rate</div>;
-      },
-      cell: ({ row }) => {
-        if (row.original.not_found) {
-          return (
-            <div className="h-full flex items-center justify-end gap-1">
-              N/A
-            </div>
-          );
-        }
-
-        const successRate = row.getValue(
-          "retrievability_success_rate"
-        ) as number;
-
-        return (
-          <div className="h-full flex items-center justify-end gap-1">
-            <span>{(successRate * 100).toFixed(2)}%</span>
-          </div>
-        );
-      },
-    },
     {
       accessorKey: "retrievability_success_rate_http",
       header: () => {

src/app/clients/(pages)/[id]/(pages)/reports/(pages)/[...report]/components/provider-view/report-view-provider-table.tsx

@@ -248,36 +248,6 @@ const useReportViewProvidersColumns = (compareMode: boolean) => {
         );
       },
     },
-    {
-      accessorKey: "retrievability_success_rate",
-      header: () => {
-        return <div className="whitespace-nowrap">Retrieval Rate</div>;
-      },
-      cell: ({ row }) => {
-        if (row.original.not_found) {
-          return (
-            <div className="h-full flex items-center justify-end gap-1">
-              N/A
-            </div>
-          );
-        }
-
-        const successRate = row.getValue(
-          "retrievability_success_rate"
-        ) as number;
-
-        return (
-          <div className="h-full flex items-center justify-center gap-1">
-            <span>{(successRate * 100).toFixed(2)}%</span>
-            {compareMode && (
-              <CompareIcon
-                compare={row.original.retrievability_success_rate_compare}
-              />
-            )}
-          </div>
-        );
-      },
-    },
     {
       accessorKey: "retrievability_success_rate_http",
       header: () => {

src/app/compliance-data-portal/(pages)/allocators/retrievability/page.tsx

@@ -3,6 +3,7 @@
 import { ChartWrapper } from "@/app/compliance-data-portal/components/chart-wrapper";
 import { EditionRoundCheckbox } from "@/app/compliance-data-portal/components/edition-round-checkbox";
 import { StackedBarGraph } from "@/app/compliance-data-portal/components/graphs/stacked-bar-graph";
+import { RetrievabilityTypeSelect } from "@/app/compliance-data-portal/components/retrievability-type-select";
 import useWeeklyChartData from "@/app/compliance-data-portal/hooks/useWeeklyChartData";
 import { Checkbox } from "@/components/ui/checkbox";
 import { useAllocatorRetrievability } from "@/lib/hooks/cdp.hooks";
@@ -14,17 +15,17 @@ import { type ComponentProps, useCallback, useEffect, useState } from "react";
 type CheckboxProps = ComponentProps<typeof Checkbox>;
 type CheckedChangeHandler = NonNullable<CheckboxProps["onCheckedChange"]>;
 
-const httpRetrievabilityFilterKey = "httpRetrievability";
+const retrievabilityFilterKey = "retrievabilityType";
 const openDataFilterKey = "openDataOnly";
 
 export default function AllocatorRetrievabilityPage() {
   const { filters, updateFilter } = useSearchParamsFilters();
-  const httpRetrievability = filters[httpRetrievabilityFilterKey] === "true";
+  const retrievabilityType = filters[retrievabilityFilterKey] ?? "urlFinder";
   const openDataOnly = filters[openDataFilterKey] === "true";
   const [usePercentage, setUsePercentage] = useState(false);
 
   const { data, isLoading } = useAllocatorRetrievability({
-    httpRetrievability,
+    retrievabilityType,
     openDataOnly,
   });
 
@@ -45,17 +46,6 @@ export default function AllocatorRetrievabilityPage() {
   const { scale, calcPercentage, selectedScale, setSelectedScale } =
     useChartScale(minValue);
 
-  const handleHTTPRetrievabilityToggleChange =
-    useCallback<CheckedChangeHandler>(
-      (state) => {
-        updateFilter(
-          httpRetrievabilityFilterKey,
-          state === true ? "true" : undefined
-        );
-      },
-      [updateFilter]
-    );
-
   const handleOpenDataToggleChange = useCallback<CheckedChangeHandler>(
     (state) => {
       updateFilter(openDataFilterKey, state === true ? "true" : undefined);
@@ -86,19 +76,12 @@ export default function AllocatorRetrievabilityPage() {
         additionalFilters={[
           <div
             key="http-retrievability-toggle"
-            className="flex items-center space-x-2 py-3.5 px-2"
+            className="flex items-center space-x-2"
           >
-            <Checkbox
-              id="http-retrievability"
-              checked={httpRetrievability}
-              onCheckedChange={handleHTTPRetrievabilityToggleChange}
+            <RetrievabilityTypeSelect
+              label="Retrievability Type"
+              defaultValue="urlFinder"
             />
-            <label
-              className="text-sm font-medium leading-none"
-              htmlFor="http-retrievability"
-            >
-              HTTP Retrievability
-            </label>
           </div>,
           <div
             key="open-data-toggle"

src/app/compliance-data-portal/components/retrievability-type-select.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useSearchParamsFilters } from "@/lib/hooks/use-search-params-filters";
+import { useCallback, type ReactNode } from "react";
+
+export interface RetrievabilityTypeSelectProps {
+  defaultValue?: string;
+  label?: ReactNode;
+  queryParamName?: string;
+}
+
+const retrievabilityType = ["http", "urlFinder"] as const;
+const availableValues = retrievabilityType as unknown as string[];
+
+export function RetrievabilityTypeSelect({
+  defaultValue = "urlFinder",
+  label = null,
+  queryParamName = "retrievabilityType",
+}: RetrievabilityTypeSelectProps) {
+  const { filters, updateFilter } = useSearchParamsFilters();
+
+  const value =
+    !!filters[queryParamName] &&
+    availableValues.includes(filters[queryParamName])
+      ? filters[queryParamName]
+      : defaultValue;
+
+  const handleRetrievabilityTypeChange = useCallback(
+    (value: string) => {
+      updateFilter(queryParamName, value);
+    },
+    [updateFilter, queryParamName]
+  );
+
+  return (
+    <div className="flex items-center w-fit">
+      {!!label && <span className="mr-2">{label}</span>}
+
+      <Select value={value} onValueChange={handleRetrievabilityTypeChange}>
+        <SelectTrigger className="bg-white text-black border border-gray-300 hover:bg-gray-100 gap-2 w-[150px]">
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          {availableValues.map((type) => (
+            <SelectItem
+              key={`select_item_retrieveability_type_${type}`}
+              value={type}
+            >
+              {type === "urlFinder" ? "RPA" : "HTTP"}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

src/lib/hooks/cdp.hooks.ts

@@ -30,19 +30,21 @@ const allocatorSPsComplianceMetrics = [
 ] as const;
 
 interface UseStorageProviderRetrievabilityParameters {
-  httpRetrievability?: boolean;
+  retrievabilityType?: string;
   openDataOnly?: boolean;
 }
 
 const useStorageProviderRetrievability = ({
-  httpRetrievability = false,
+  retrievabilityType = undefined,
   openDataOnly = false,
 }: UseStorageProviderRetrievabilityParameters) => {
   const { selectedRoundId } = useEditionRound();
 
   const fetchData = useCallback(async () => {
     const searchParams = new URLSearchParams();
-    searchParams.set("httpRetrievability", String(httpRetrievability));
+    if (retrievabilityType)
+      searchParams.set("retrievabilityType", String(retrievabilityType));
+
     searchParams.set("openDataOnly", String(openDataOnly));
 
     if (selectedRoundId) searchParams.set("editionId", selectedRoundId);
@@ -55,7 +57,7 @@ const useStorageProviderRetrievability = ({
       count: data?.histogram?.total,
       buckets: data?.histogram?.results,
     } as ICDPUnifiedHistogram;
-  }, [httpRetrievability, openDataOnly, selectedRoundId]);
+  }, [retrievabilityType, openDataOnly, selectedRoundId]);
 
   const [data, setData] = useState<ICDPUnifiedHistogram | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(false);
@@ -141,19 +143,21 @@ const useStorageProviderBiggestDeal = () => {
 };
 
 interface UseAllocatorRetrievabilityParameters {
-  httpRetrievability?: boolean;
+  retrievabilityType?: string;
   openDataOnly?: boolean;
 }
 
 const useAllocatorRetrievability = ({
-  httpRetrievability = false,
+  retrievabilityType = undefined,
   openDataOnly = false,
 }: UseAllocatorRetrievabilityParameters) => {
   const { selectedRoundId } = useEditionRound();
 
   const fetchData = useCallback(async () => {
     const searchParams = new URLSearchParams();
-    searchParams.set("httpRetrievability", String(httpRetrievability));
+    if (retrievabilityType)
+      searchParams.set("retrievabilityType", String(retrievabilityType));
+
     searchParams.set("openDataOnly", String(openDataOnly));
     if (selectedRoundId) searchParams.set("editionId", selectedRoundId);
 
@@ -166,7 +170,7 @@ const useAllocatorRetrievability = ({
       count: data?.histogram?.total,
       buckets: data?.histogram?.results,
     } as ICDPUnifiedHistogram;
-  }, [httpRetrievability, openDataOnly, selectedRoundId]);
+  }, [retrievabilityType, openDataOnly, selectedRoundId]);
 
   const [data, setData] = useState<ICDPUnifiedHistogram | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(false);