@trackunit/filters-asset-filter-definitions 2.24.10 → 2.24.11

package/index.cjs.js

@@ -17,6 +17,7 @@ var reactComponents = require('@trackunit/react-components');
 var stringTs = require('string-ts');
 var sharedUtils = require('@trackunit/shared-utils');
 var translationsMachineType = require('@trackunit/translations-machine-type');
+var graphql = require('graphql');
 var criticalityIndicator = require('@trackunit/criticality-indicator');
 var translationsDevice = require('@trackunit/translations-device');
 var tailwindMerge = require('tailwind-merge');
@@ -269,7 +270,7 @@ const GET_ACCESS_MANAGEMENT_MODE_DESIRED_SUMMARY = client.gql `
     }
   }
 `;
-const FETCH_LIMIT$5 = 1000;
+const FETCH_LIMIT = 1000;
 /**
  * Maps an access-management-mode value to its static translation key.
  *
@@ -306,7 +307,7 @@ const AccessManagementModeFilterView = ({ filterDefinition, filterState, filterB
     const { data, loading } = reactGraphqlHooks.useQuery(GET_ACCESS_MANAGEMENT_MODE_DESIRED_SUMMARY, {
         fetchPolicy: "cache-first",
         variables: {
-            limit: FETCH_LIMIT$5,
+            limit: FETCH_LIMIT,
             filters: {
                 ...activeFilters,
                 accessManagementDesiredModes: null, // Omit the filters own values so list shows options correctly
@@ -5161,29 +5162,6 @@ const asSummaryConnectionNode = (node) => {
  * for a facet. `DefaultCheckboxFilter` pins the option carrying this key to the bottom of the list.
  */
 const UNDEFINED_SUMMARY_KEY = "UNDEFINED";
-/**
- * Flattens connection edges into plain summary entries, appending the bucket of assets without
- * a value when one is reported.
- *
- * @param edges the edges of a key/count summary connection
- * @param missing the number of assets without a value, counted by a separate query
- * @param loading whether either query behind the facet is still fetching, which suppresses the
- *   entries until the first page arrives. The two queries resolve independently, and
- *   `FilterResults` only renders its loading state for an empty list, so without this a facet
- *   would briefly show whichever of the two landed first as its only content — the undefined
- *   bucket alone, or a set of values that the undefined bucket is about to be appended to.
- * @returns {Array<{ key: string; count: number }>} the summary entries to render as filter options
- */
-const toSummaryEntries = (edges, missing, loading = false) => {
-    if (loading && edges.length === 0) {
-        return [];
-    }
-    const entries = edges.map(edge => asSummaryConnectionNode(edge.node));
-    if (typeof missing === "number" && missing > 0) {
-        entries.push({ key: UNDEFINED_SUMMARY_KEY, count: missing });
-    }
-    return entries;
-};
 /**
  * Reads a group summary node.
  *
@@ -5205,6 +5183,11 @@ const asOwnerAccountConnectionNode = (node) => {
     return parsed.success ? parsed.data : { count: 0, ownerAccount: null };
 };
 
+/**
+ * Stands in for the count document of a facet that has none, since the query hook has to run
+ * unconditionally. It is always skipped, so it is never sent.
+ */
+const NO_MISSING_COUNT_DOCUMENT = graphql.parse("query FacetWithoutMissingCount { __typename }");
 /**
  * Counts the assets that have no value for a facet.
  *
@@ -5212,16 +5195,16 @@ const asOwnerAccountConnectionNode = (node) => {
  * the facet search term and outside paging, so it is identical on every page and would only be
  * re-fetched for nothing if it rode along with the paginated query.
  *
- * @param document the generated `…SummaryMissing` query
+ * @param document the generated `…SummaryMissing` query, or undefined for a facet without a missing row
  * @param connectionField name of the connection field on `assetSummary`
  * @param filters the filters scoping the summary, the same ones the paginated query uses
  * @param options optional skip flag and Apollo context
  * @returns {object} the count of assets without a value, plus loading state
  */
 const useFacetMissingCount = (document, connectionField, filters, options = {}) => {
-    const { data, loading } = reactGraphqlHooks.useQuery(document, {
+    const { data, loading } = reactGraphqlHooks.useQuery(document ?? NO_MISSING_COUNT_DOCUMENT, {
         variables: { filters: filters ?? null },
-        skip: options.skip,
+        skip: options.skip || document === undefined,
         context: options.context,
     });
     const missing = react.useMemo(() => extractAssetSummaryConnection(data, connectionField)?.missing, [data, connectionField]);
@@ -5273,29 +5256,62 @@ const useFleetSummaryConnection = (document, connectionField, queryVariables, op
     }), [connectionData, edges, loading, pagination]);
 };
 
+/**
+ * Everything `DefaultCheckboxFilter` needs for a facet backed by a paginated `assetSummary` connection:
+ * the shared search box, the paged options with the optional missing row, and the loading state.
+ *
+ * `loading` is only true while there is nothing to show yet, so refreshing a list on screen does not
+ * flash the loading state.
+ *
+ * @param filterState the filter state handed to the filter view
+ * @param config the facet's data source and how its nodes become options
+ * @returns {object} props to spread into `DefaultCheckboxFilter`
+ */
+const useFacetConnectionOptions = (filterState, config) => {
+    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
+    const { debouncedSearch, customSearch } = filtersFilterBar.useFilterSearch();
+    const filters = config.scope(activeFilters);
+    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(config.document, config.connectionField, { search: debouncedSearch, filters }, { context: config.context });
+    const { missing, loading: loadingMissing } = useFacetMissingCount(config.missing?.document, config.connectionField, filters, { context: config.context });
+    const loading = loadingValues || loadingMissing;
+    // Reading a node validates it, so it is memoized on the pages alone: callers usually pass the
+    // config inline, which reruns the cheap option mapping below on every render.
+    const read = config.node?.read;
+    const customNodes = react.useMemo(() => (read ? edges.map(edge => read(edge.node)) : []), [edges, read]);
+    const summaryEntries = react.useMemo(() => (read ? [] : edges.map(edge => asSummaryConnectionNode(edge.node))), [edges, read]);
+    const options = react.useMemo(() => {
+        // The two queries resolve independently, so until the first page is in, show nothing rather
+        // than whichever of the values or the missing row happened to land first.
+        if (loading && edges.length === 0) {
+            return [];
+        }
+        const missingRow = config.missing && typeof missing === "number" && missing > 0
+            ? { key: UNDEFINED_SUMMARY_KEY, count: missing }
+            : undefined;
+        const facetOptions = config.node === undefined
+            ? (missingRow ? [...summaryEntries, missingRow] : summaryEntries).map(config.toOption)
+            : [
+                ...customNodes.map(config.node.toOption),
+                ...(config.missing && missingRow ? [{ ...missingRow, label: config.missing.label }] : []),
+            ];
+        return config.showCount === false ? facetOptions.map(option => ({ ...option, count: undefined })) : facetOptions;
+    }, [config, customNodes, summaryEntries, missing, loading, edges.length]);
+    return react.useMemo(() => ({ customSearch, loading: loading && options.length === 0, options, pagination }), [customSearch, loading, options, pagination]);
+};
+
 /**
  * React component for rendering the brand filter.
  */
 const BrandFilterView = (props) => {
     const { getMachineTypeTranslation } = translationsMachineType.useMachineTypeTranslations();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, brands: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetBrandsSummaryConnectionDocument, "brandsConnection", {
-        search: debouncedSearch,
-        filters,
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetBrandsSummaryConnectionDocument,
+        connectionField: "brandsConnection",
+        scope: filters => ({ ...filters, brands: null }),
+        missing: { document: GetFleetBrandsSummaryMissingDocument },
+        toOption: entry => ({ ...entry, label: getMachineTypeTranslation(entry.key) }),
     });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetBrandsSummaryMissingDocument, "brandsConnection", filters);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
-            key: entry.key,
-            count: entry.count,
-            label: getMachineTypeTranslation(entry.key),
-        }));
-    }, [edges, missing, loading, getMachineTypeTranslation]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Brand filter definition
@@ -5323,35 +5339,25 @@ const useBrandFilter = () => {
  */
 const Can1ProfileFilter = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, can1Profile: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetCan1ProfileSummaryConnectionDocument, "can1ProfileSummaryConnection", {
-        search: debouncedSearch,
-        filters,
-    });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetCan1ProfileSummaryMissingDocument, "can1ProfileSummaryConnection", filters);
-    const loading = loadingValues || loadingMissing;
     const { data: profileNamesData } = reactGraphqlHooks.useQuery(TelematicsDeviceCan1ProfileNamesDocument, {
         context: { headers: { "TU-PREVIEW": "TELEMATICS_DEVICE_PREVIEW" } },
         fetchPolicy: "cache-first",
     });
     const profileNameByKey = react.useMemo(() => new Map(profileNamesData?.telematicsDeviceSummary?.can1Profiles?.summary?.map(profile => [profile.key, profile.name]) ??
         []), [profileNamesData?.telematicsDeviceSummary?.can1Profiles?.summary]);
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => {
-            if (entry.key === UNDEFINED_SUMMARY_KEY) {
-                return { key: entry.key, count: entry.count, label: t(`machine.types.Unknown`) };
-            }
-            return {
-                key: entry.key,
-                count: entry.count,
-                label: profileNameByKey.get(entry.key) ?? entry.key,
-            };
-        });
-    }, [edges, missing, loading, profileNameByKey, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    const facet = useFacetConnectionOptions(filterState, {
+        document: GetFleetCan1ProfileSummaryConnectionDocument,
+        connectionField: "can1ProfileSummaryConnection",
+        scope: filters => ({ ...filters, can1Profile: null }),
+        missing: { document: GetFleetCan1ProfileSummaryMissingDocument },
+        toOption: entry => ({
+            ...entry,
+            label: entry.key === UNDEFINED_SUMMARY_KEY
+                ? t(`machine.types.Unknown`)
+                : (profileNameByKey.get(entry.key) ?? entry.key),
+        }),
+    });
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 
 /**
@@ -5377,35 +5383,25 @@ const useCan1ProfileFilter = () => {
  */
 const Can2ProfileFilter = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, can2Profile: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetCan2ProfileSummaryConnectionDocument, "can2ProfileSummaryConnection", {
-        search: debouncedSearch,
-        filters,
-    });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetCan2ProfileSummaryMissingDocument, "can2ProfileSummaryConnection", filters);
-    const loading = loadingValues || loadingMissing;
     const { data: profileNamesData } = reactGraphqlHooks.useQuery(TelematicsDeviceCan2ProfileNamesDocument, {
         context: { headers: { "TU-PREVIEW": "TELEMATICS_DEVICE_PREVIEW" } },
         fetchPolicy: "cache-first",
     });
     const profileNameByKey = react.useMemo(() => new Map(profileNamesData?.telematicsDeviceSummary?.can2Profiles?.summary?.map(profile => [profile.key, profile.name]) ??
         []), [profileNamesData?.telematicsDeviceSummary?.can2Profiles?.summary]);
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => {
-            if (entry.key === UNDEFINED_SUMMARY_KEY) {
-                return { key: entry.key, count: entry.count, label: t(`machine.types.Unknown`) };
-            }
-            return {
-                key: entry.key,
-                count: entry.count,
-                label: profileNameByKey.get(entry.key) ?? entry.key,
-            };
-        });
-    }, [edges, missing, loading, profileNameByKey, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    const facet = useFacetConnectionOptions(filterState, {
+        document: GetFleetCan2ProfileSummaryConnectionDocument,
+        connectionField: "can2ProfileSummaryConnection",
+        scope: filters => ({ ...filters, can2Profile: null }),
+        missing: { document: GetFleetCan2ProfileSummaryMissingDocument },
+        toOption: entry => ({
+            ...entry,
+            label: entry.key === UNDEFINED_SUMMARY_KEY
+                ? t(`machine.types.Unknown`)
+                : (profileNameByKey.get(entry.key) ?? entry.key),
+        }),
+    });
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 
 /**
@@ -5703,22 +5699,50 @@ const useCriticalityFilter = () => {
     return result;
 };
 
-const FETCH_LIMIT$4 = 1000;
+/** How many rows a limited facet fetches. A full page means there may be more, so the user is asked to search. */
+const FACET_FETCH_LIMIT = 1000;
+/**
+ * Supplies a `DefaultCheckboxFilter` whose options come from one summary query capped at
+ * {@link FACET_FETCH_LIMIT} rows. The search text is sent as typed once debounced.
+ *
+ * @param filterState the filter view's state, used to resolve the active asset filters
+ * @param config which query to run and how to turn its rows into options
+ * @returns {object} props to spread onto `DefaultCheckboxFilter`; `loading` is only true while there are no options yet
+ */
+const useFacetLimitedOptions = (filterState, config) => {
+    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
+    const { debouncedSearch, customSearch } = filtersFilterBar.useFilterSearch();
+    const { data, loading } = reactGraphqlHooks.useQuery(config.document, {
+        fetchPolicy: "cache-first",
+        variables: { limit: FACET_FETCH_LIMIT, search: debouncedSearch, filters: config.scope(activeFilters) },
+    });
+    const options = react.useMemo(() => {
+        const items = data ? (config.read(data) ?? []) : [];
+        const facetOptions = items.map(item => config.toOption(item));
+        return config.showCount === false ? facetOptions.map(option => ({ ...option, count: undefined })) : facetOptions;
+    }, [config, data]);
+    return react.useMemo(() => ({
+        customSearch,
+        loading: loading && options.length === 0,
+        options,
+        showRequestMoreUseSearch: options.length === FACET_FETCH_LIMIT,
+    }), [customSearch, loading, options]);
+};
+
 /**
  * Custom hook to fetch customer summary data based on active filters and search text.
  *
  * @param filterValues - The current values from the filter bar.
  * @param customerId - The ID of the customer that owns the customers shown in the filter bar.
- * @returns {object} An object containing the fetched data, loading state, and a function to set search text.
+ * @returns {object} The fetched data, `loading` (only true while there are no customers yet) and the `customSearch` for the filter.
  */
 const useCustomerData = (filterValues, customerId) => {
     const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterValues);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
+    const { debouncedSearch, customSearch } = filtersFilterBar.useFilterSearch();
     const { data, loading } = reactGraphqlHooks.useQuery(GetCustomerIdSummaryDocument, {
         fetchPolicy: "cache-first",
         variables: {
-            limit: FETCH_LIMIT$4,
+            limit: FACET_FETCH_LIMIT,
             search: debouncedSearch,
             filters: {
                 ...activeFilters,
@@ -5726,7 +5750,8 @@ const useCustomerData = (filterValues, customerId) => {
             },
         },
     });
-    return react.useMemo(() => ({ data, loading, searchText, setSearchText }), [data, loading, searchText, setSearchText]);
+    const hasCustomers = (data?.assetSummary?.customers?.summary.length ?? 0) > 0;
+    return react.useMemo(() => ({ data, loading: loading && !hasCustomers, customSearch }), [data, loading, hasCustomers, customSearch]);
 };
 
 /**
@@ -5836,13 +5861,10 @@ const useCustomerHierarchy = (customerSummary) => {
  * @returns {ReactElement} A customer ID filter component for rendering in the UI.
  */
 const CustomerIdsFilterView = ({ customerId, hasCount = true, ...props }) => {
-    const { data, loading, searchText, setSearchText } = useCustomerData(props.filterState.values, customerId);
+    const { data, loading, customSearch } = useCustomerData(props.filterState.values, customerId);
     const hierarchicalOptions = useCustomerHierarchy(data?.assetSummary?.customers?.summary);
     const valueNameArrayFilterDefinition = props.filterDefinition;
-    return (jsxRuntime.jsx(filtersFilterBar.HierarchicalCheckboxFilter, { cascadeSelection: true, customSearch: {
-            value: searchText,
-            onChange: setSearchText,
-        }, filterBarActions: props.filterBarActions, filterDefinition: valueNameArrayFilterDefinition, filterState: props.filterState, loading: loading, options: hierarchicalOptions, setValue: props.setValue, showCount: hasCount, value: props.value }));
+    return (jsxRuntime.jsx(filtersFilterBar.HierarchicalCheckboxFilter, { cascadeSelection: true, customSearch: customSearch, filterBarActions: props.filterBarActions, filterDefinition: valueNameArrayFilterDefinition, filterState: props.filterState, loading: loading, options: hierarchicalOptions, setValue: props.setValue, showCount: hasCount, value: props.value }));
 };
 /**
  * Custom hook to create and configure a customer IDs filter definition.
@@ -6023,6 +6045,21 @@ const useDeviceHealthIssueStatusFilter = (hookProps) => {
     }, [t, hookProps?.deviceHealthStates, hookProps?.deviceHealthDateTimeRange]);
 };
 
+/**
+ * Supplies a `DefaultCheckboxFilter` whose options are all fetched up front and searched locally.
+ * Matching is on the label, trimmed and case-insensitive, once the search is debounced.
+ *
+ * @param allOptions every option the facet can show
+ * @param loading whether the query behind `allOptions` is loading
+ * @returns {object} props to spread onto `DefaultCheckboxFilter`; `loading` is only true while there are no options yet
+ */
+const useFacetLocalOptions = (allOptions, loading) => {
+    const { debouncedSearch, customSearch } = filtersFilterBar.useFilterSearch();
+    const needle = debouncedSearch.trim().toLocaleLowerCase();
+    const options = react.useMemo(() => (needle ? allOptions.filter(option => option.label.toLowerCase().includes(needle)) : allOptions), [allOptions, needle]);
+    return react.useMemo(() => ({ customSearch, loading: loading && allOptions.length === 0, options }), [customSearch, loading, allOptions.length, options]);
+};
+
 /**
  * Get a record of device health issue type display names
  *
@@ -6056,8 +6093,6 @@ const useDeviceHealthIssueTypeDisplayNames = () => {
 const DeviceHealthIssueTypeFilter = ({ deviceHealthStates, deviceHealthDateTimeRange, ...props }) => {
     const issueTypeDisplayNames = useDeviceHealthIssueTypeDisplayNames();
     const filters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchQuery, setSearchQuery] = react.useState("");
-    const debouncedSearchQuery = reactComponents.useDebounce(searchQuery.trim().toLocaleLowerCase(), { delay: 300 });
     const { data, loading } = reactGraphqlHooks.useQuery(DeviceHealthIssueTypeSummariesDocument, {
         variables: {
             filters: {
@@ -6069,11 +6104,12 @@ const DeviceHealthIssueTypeFilter = ({ deviceHealthStates, deviceHealthDateTimeR
             },
         },
     });
-    const { options } = useFleetHealthFilterUtils({
+    const { options: allOptions } = useFleetHealthFilterUtils({
         filterSummaries: data?.assetSummary?.deviceHealthTypesSummary.summary,
         filterTranslations: issueTypeDisplayNames,
     });
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchQuery, onChange: setSearchQuery }, loading: loading, options: options.filter(option => option.label.toLowerCase().includes(debouncedSearchQuery)) }));
+    const facet = useFacetLocalOptions(allOptions, loading);
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 
 /**
@@ -6104,16 +6140,15 @@ const useDeviceHealthIssueTypeFilter = (hookProps) => {
 const DeviceTypesFilter = (props) => {
     const { deviceTypeDisplayNames } = translationsDevice.useDeviceTypeTranslations();
     const filters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchQuery, setSearchQuery] = react.useState("");
-    const debouncedSearchQuery = reactComponents.useDebounce(searchQuery.trim().toLocaleLowerCase(), { delay: 300 });
     const { data, loading } = reactGraphqlHooks.useQuery(DeviceTypesSummaryDocument, {
         variables: { filters: { ...filters, deviceTypes: undefined } },
     });
-    const { options } = useFleetHealthFilterUtils({
+    const { options: allOptions } = useFleetHealthFilterUtils({
         filterSummaries: data?.assetSummary?.deviceTypesSummary?.summary,
         filterTranslations: deviceTypeDisplayNames,
     });
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchQuery, onChange: setSearchQuery }, loading: loading, options: options.filter(option => option.label.toLowerCase().includes(debouncedSearchQuery)) }));
+    const facet = useFacetLocalOptions(allOptions, loading);
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 
 /**
@@ -6140,24 +6175,17 @@ const useDeviceTypesFilter = (showInFilterBar) => {
  */
 const FirmwareVersionFilter = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, firmwareVersion: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetFirmwareVersionSummaryConnectionDocument, "firmwareVersionSummaryConnection", {
-        search: debouncedSearch,
-        filters,
-    });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetFirmwareVersionSummaryMissingDocument, "firmwareVersionSummaryConnection", filters);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
-            key: entry.key,
-            count: entry.count,
+    const facet = useFacetConnectionOptions(filterState, {
+        document: GetFleetFirmwareVersionSummaryConnectionDocument,
+        connectionField: "firmwareVersionSummaryConnection",
+        scope: filters => ({ ...filters, firmwareVersion: null }),
+        missing: { document: GetFleetFirmwareVersionSummaryMissingDocument },
+        toOption: entry => ({
+            ...entry,
             label: entry.key === UNDEFINED_SUMMARY_KEY ? t(`machine.types.Unknown`) : entry.key,
-        }));
-    }, [edges, missing, loading, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+        }),
+    });
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 
 /**
@@ -6227,38 +6255,22 @@ const useFollowedFilter = () => {
  */
 const GroupIdsFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, groups: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetGroupSummaryConnectionDocument, "groupsConnection", {
-        search: debouncedSearch,
-        filters,
-    });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetGroupSummaryMissingDocument, "groupsConnection", filters);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        if (loading && edges.length === 0) {
-            return [];
-        }
-        const result = edges.map(edge => {
-            const node = asGroupConnectionNode(edge.node);
-            return {
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetGroupSummaryConnectionDocument,
+        connectionField: "groupsConnection",
+        scope: filters => ({ ...filters, groups: null }),
+        missing: { document: GetFleetGroupSummaryMissingDocument, label: t("assetFilters.groupFilter.missingGroup") },
+        node: {
+            read: asGroupConnectionNode,
+            toOption: node => ({
                 key: node.group?.groupId || "unknown",
-                count: props.hasCount ? node.count || 0 : undefined,
+                count: node.count || 0,
                 label: node.group?.name || t("machine.types.Unknown"),
-            };
-        });
-        if (typeof missing === "number" && missing > 0) {
-            result.push({
-                key: UNDEFINED_SUMMARY_KEY,
-                count: props.hasCount ? missing : undefined,
-                label: t("assetFilters.groupFilter.missingGroup"),
-            });
-        }
-        return result;
-    }, [edges, missing, loading, props.hasCount, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+            }),
+        },
+        showCount: Boolean(props.hasCount),
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * GroupIds filter definition
@@ -7047,16 +7059,6 @@ const useMetadataCompletenessFilter = ({ isDefault } = {}) => {
  */
 const ModbusProfileFilter = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, modbusProfile: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetModbusProfileSummaryConnectionDocument, "modbusProfileSummaryConnection", {
-        search: debouncedSearch,
-        filters,
-    });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetModbusProfileSummaryMissingDocument, "modbusProfileSummaryConnection", filters);
-    const loading = loadingValues || loadingMissing;
     const { data: profileNamesData } = reactGraphqlHooks.useQuery(TelematicsDeviceModbusProfileNamesDocument, {
         context: { headers: { "TU-PREVIEW": "TELEMATICS_DEVICE_PREVIEW" } },
         fetchPolicy: "cache-first",
@@ -7065,19 +7067,19 @@ const ModbusProfileFilter = ({ filterDefinition, filterState, filterBarActions,
         profile.key,
         profile.name,
     ]) ?? []), [profileNamesData?.telematicsDeviceSummary?.modbusProfiles?.summary]);
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => {
-            if (entry.key === UNDEFINED_SUMMARY_KEY) {
-                return { key: entry.key, count: entry.count, label: t(`machine.types.Unknown`) };
-            }
-            return {
-                key: entry.key,
-                count: entry.count,
-                label: profileNameByKey.get(entry.key) ?? entry.key,
-            };
-        });
-    }, [edges, missing, loading, profileNameByKey, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    const facet = useFacetConnectionOptions(filterState, {
+        document: GetFleetModbusProfileSummaryConnectionDocument,
+        connectionField: "modbusProfileSummaryConnection",
+        scope: filters => ({ ...filters, modbusProfile: null }),
+        missing: { document: GetFleetModbusProfileSummaryMissingDocument },
+        toOption: entry => ({
+            ...entry,
+            label: entry.key === UNDEFINED_SUMMARY_KEY
+                ? t(`machine.types.Unknown`)
+                : (profileNameByKey.get(entry.key) ?? entry.key),
+        }),
+    });
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 
 /**
@@ -7107,24 +7109,14 @@ const useModbusProfileFilter = () => {
  */
 const ModelsFilterView = (props) => {
     const { getMachineTypeTranslation } = translationsMachineType.useMachineTypeTranslations();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, models: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetModelsSummaryConnectionDocument, "modelsConnection", {
-        search: debouncedSearch,
-        filters,
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetModelsSummaryConnectionDocument,
+        connectionField: "modelsConnection",
+        scope: filters => ({ ...filters, models: null }),
+        missing: { document: GetFleetModelsSummaryMissingDocument },
+        toOption: entry => ({ ...entry, label: getMachineTypeTranslation(entry.key) }),
     });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetModelsSummaryMissingDocument, "modelsConnection", filters);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
-            key: entry.key,
-            count: entry.count,
-            label: getMachineTypeTranslation(entry.key),
-        }));
-    }, [edges, missing, loading, getMachineTypeTranslation]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  *
@@ -7287,7 +7279,6 @@ const useNameFilter = (props) => {
     return result;
 };
 
-const FETCH_LIMIT$3 = 1000;
 /**
  * Maps a network-technology summary key to its localized label.
  * Falls back to the raw key for values that have no translation yet (e.g. future technologies).
@@ -7322,31 +7313,13 @@ const networkTechnologyLabel = (t, key) => {
  */
 const NetworkTechnologyFilter = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [showRequestMoreUseSearch, setShowRequestMoreUseSearch] = react.useState(false);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const { data, loading } = reactGraphqlHooks.useQuery(GetFleetNetworkTechnologySummaryDocument, {
-        variables: {
-            limit: FETCH_LIMIT$3,
-            search: debouncedSearch,
-            filters: {
-                ...activeFilters,
-                networkTechnology: null, // Omit the filter's own values so the list shows all options correctly
-            },
-        },
-        fetchPolicy: "cache-first",
+    const facet = useFacetLimitedOptions(filterState, {
+        document: GetFleetNetworkTechnologySummaryDocument,
+        scope: filters => ({ ...filters, networkTechnology: null }),
+        read: data => data.assetSummary?.networkTechnologySummary?.summary,
+        toOption: networkTechnology => ({ ...networkTechnology, label: networkTechnologyLabel(t, networkTechnology.key) }),
     });
-    const options = react.useMemo(() => {
-        return (data?.assetSummary?.networkTechnologySummary?.summary.map(networkTechnology => ({
-            ...networkTechnology,
-            label: networkTechnologyLabel(t, networkTechnology.key),
-        })) ?? []);
-    }, [data?.assetSummary?.networkTechnologySummary?.summary, t]);
-    react.useEffect(() => {
-        setShowRequestMoreUseSearch(options.length === FETCH_LIMIT$3);
-    }, [options]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: loading, options: options, showRequestMoreUseSearch: showRequestMoreUseSearch }));
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 
 /**
@@ -7375,27 +7348,20 @@ const useNetworkTechnologyFilter = () => {
  */
 const OwnerAccountIdsFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const { edges, loading, pagination } = useFleetSummaryConnection(GetFleetOwnerAccountSummaryConnectionDocument, "ownerAccountsConnection", {
-        search: debouncedSearch,
-        filters: {
-            ...activeFilters,
-            ownerAccountIds: null,
-        },
-    });
-    const options = react.useMemo(() => {
-        return edges.map(edge => {
-            const node = asOwnerAccountConnectionNode(edge.node);
-            return {
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetOwnerAccountSummaryConnectionDocument,
+        connectionField: "ownerAccountsConnection",
+        scope: filters => ({ ...filters, ownerAccountIds: null }),
+        node: {
+            read: asOwnerAccountConnectionNode,
+            toOption: node => ({
                 key: node.ownerAccount?.accountId || "unknown",
                 count: node.count || 0,
                 label: node.ownerAccount?.name || t("machine.types.Unknown"),
-            };
-        });
-    }, [edges, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+            }),
+        },
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * OwnerAccountIds filter definition
@@ -7527,7 +7493,6 @@ const usePeriodFilter = () => {
     return result;
 };
 
-const FETCH_LIMIT$2 = 1000;
 /**
  * Production Year Filter View component.
  *
@@ -7542,32 +7507,16 @@ const FETCH_LIMIT$2 = 1000;
  */
 const ProductionYearFilterView = ({ filterDefinition, filterState, filterBarActions, ...props }) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(filterState.values);
-    const [showRequestMoreUseSearch, setShowRequestMoreUseSearch] = react.useState(false);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const { data, loading } = reactGraphqlHooks.useQuery(GetFleetProductionYearsSummaryDocument, {
-        variables: {
-            limit: FETCH_LIMIT$2,
-            search: debouncedSearch,
-            filters: {
-                ...activeFilters,
-                productionYears: null, // Omit the filters own values so list shows options correctly
-            },
-        },
-        fetchPolicy: "cache-first",
-    });
-    const options = react.useMemo(() => {
-        const result = data?.assetSummary?.productionYears?.summary.map(productionYear => ({
+    const facet = useFacetLimitedOptions(filterState, {
+        document: GetFleetProductionYearsSummaryDocument,
+        scope: filters => ({ ...filters, productionYears: null }),
+        read: data => data.assetSummary?.productionYears?.summary,
+        toOption: productionYear => ({
             ...productionYear,
             label: productionYear.key.toUpperCase() === "UNDEFINED" ? t(`machine.types.Unknown`) : productionYear.key,
-        })) ?? [];
-        return result;
-    }, [data?.assetSummary?.productionYears?.summary, t]);
-    react.useEffect(() => {
-        setShowRequestMoreUseSearch(options.length === FETCH_LIMIT$2);
-    }, [options]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState, loading: loading, options: options, showRequestMoreUseSearch: showRequestMoreUseSearch }));
+        }),
+    });
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet, filterBarActions: filterBarActions, filterDefinition: filterDefinition, filterState: filterState }));
 };
 /**
  * Production year filter definition
@@ -7653,10 +7602,8 @@ const useRentalActiveContractItemOnRentDatesDateRangeFilter = ({ showInFilterBar
 };
 
 const RENTAL_PREVIEW_CONTEXT$3 = {
-    context: {
-        headers: {
-            "TU-PREVIEW": "dragonfruit-monty",
-        },
+    headers: {
+        "TU-PREVIEW": "dragonfruit-monty",
     },
 };
 /**
@@ -7664,27 +7611,22 @@ const RENTAL_PREVIEW_CONTEXT$3 = {
  */
 const RentalContractCustomerParentExternalReferenceFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = {
-        ...activeFilters,
-        rentalActiveContractFilters: {
-            ...activeFilters.rentalActiveContractFilters,
-            customerParentExternalReferences: null,
-        },
-    };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetRentalCustomerParentExternalReferenceSummaryConnectionDocument, "rentalContractCustomerParentExternalReferencesConnection", { search: debouncedSearch, filters }, RENTAL_PREVIEW_CONTEXT$3);
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetRentalCustomerParentExternalReferenceSummaryMissingDocument, "rentalContractCustomerParentExternalReferencesConnection", filters, RENTAL_PREVIEW_CONTEXT$3);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetRentalCustomerParentExternalReferenceSummaryConnectionDocument,
+        connectionField: "rentalContractCustomerParentExternalReferencesConnection",
+        scope: filters => ({
+            ...filters,
+            rentalActiveContractFilters: { ...filters.rentalActiveContractFilters, customerParentExternalReferences: null },
+        }),
+        missing: { document: GetFleetRentalCustomerParentExternalReferenceSummaryMissingDocument },
+        toOption: entry => ({
             key: entry.key || "unknown",
             count: entry.count,
             label: entry.key && entry.key !== UNDEFINED_SUMMARY_KEY ? entry.key : t(`machine.types.Unknown`),
-        }));
-    }, [edges, missing, loading, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+        }),
+        context: RENTAL_PREVIEW_CONTEXT$3,
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Rental contract customer parent external reference filter definition
@@ -7706,10 +7648,8 @@ const useRentalContractCustomerParentExternalReferenceFilter = (props) => {
 };
 
 const RENTAL_PREVIEW_CONTEXT$2 = {
-    context: {
-        headers: {
-            "TU-PREVIEW": "dragonfruit-monty",
-        },
+    headers: {
+        "TU-PREVIEW": "dragonfruit-monty",
     },
 };
 /**
@@ -7717,27 +7657,22 @@ const RENTAL_PREVIEW_CONTEXT$2 = {
  */
 const RentalContractCustomerParentNameFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = {
-        ...activeFilters,
-        rentalActiveContractFilters: {
-            ...activeFilters.rentalActiveContractFilters,
-            customerParentNames: null,
-        },
-    };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetRentalCustomerParentNameSummaryConnectionDocument, "rentalContractCustomerParentNamesConnection", { search: debouncedSearch, filters }, RENTAL_PREVIEW_CONTEXT$2);
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetRentalCustomerParentNameSummaryMissingDocument, "rentalContractCustomerParentNamesConnection", filters, RENTAL_PREVIEW_CONTEXT$2);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetRentalCustomerParentNameSummaryConnectionDocument,
+        connectionField: "rentalContractCustomerParentNamesConnection",
+        scope: filters => ({
+            ...filters,
+            rentalActiveContractFilters: { ...filters.rentalActiveContractFilters, customerParentNames: null },
+        }),
+        missing: { document: GetFleetRentalCustomerParentNameSummaryMissingDocument },
+        toOption: entry => ({
             key: entry.key || "unknown",
             count: entry.count,
             label: entry.key && entry.key !== UNDEFINED_SUMMARY_KEY ? entry.key : t(`machine.types.Unknown`),
-        }));
-    }, [edges, missing, loading, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+        }),
+        context: RENTAL_PREVIEW_CONTEXT$2,
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Rental contract customer parent name filter definition
@@ -7759,10 +7694,8 @@ const useRentalContractCustomerParentNameFilter = (props) => {
 };
 
 const RENTAL_PREVIEW_CONTEXT$1 = {
-    context: {
-        headers: {
-            "TU-PREVIEW": "dragonfruit-monty",
-        },
+    headers: {
+        "TU-PREVIEW": "dragonfruit-monty",
     },
 };
 /**
@@ -7770,21 +7703,19 @@ const RENTAL_PREVIEW_CONTEXT$1 = {
  */
 const RentalContractOrderNumberFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, rentalContractOrderNumbers: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetRentalContractOrderNumberSummaryConnectionDocument, "rentalContractOrderNumbersConnection", { search: debouncedSearch, filters }, RENTAL_PREVIEW_CONTEXT$1);
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetRentalContractOrderNumberSummaryMissingDocument, "rentalContractOrderNumbersConnection", filters, RENTAL_PREVIEW_CONTEXT$1);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetRentalContractOrderNumberSummaryConnectionDocument,
+        connectionField: "rentalContractOrderNumbersConnection",
+        scope: filters => ({ ...filters, rentalContractOrderNumbers: null }),
+        missing: { document: GetFleetRentalContractOrderNumberSummaryMissingDocument },
+        toOption: entry => ({
             key: entry.key || "unknown",
             count: entry.count,
             label: entry.key && entry.key !== UNDEFINED_SUMMARY_KEY ? entry.key : t(`machine.types.Unknown`),
-        }));
-    }, [edges, missing, loading, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+        }),
+        context: RENTAL_PREVIEW_CONTEXT$1,
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Rental contract order number filter definition
@@ -7836,10 +7767,8 @@ const useRentalContractReferenceCodeDescriptionFilter = (props) => {
 };
 
 const RENTAL_PREVIEW_CONTEXT = {
-    context: {
-        headers: {
-            "TU-PREVIEW": "dragonfruit-monty",
-        },
+    headers: {
+        "TU-PREVIEW": "dragonfruit-monty",
     },
 };
 /**
@@ -7847,21 +7776,19 @@ const RENTAL_PREVIEW_CONTEXT = {
  */
 const RentalContractReferenceCodeFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, rentalContractReferenceCodes: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetRentalContractReferenceCodesSummaryConnectionDocument, "rentalContractReferenceCodesConnection", { search: debouncedSearch, filters }, RENTAL_PREVIEW_CONTEXT);
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetRentalContractReferenceCodesSummaryMissingDocument, "rentalContractReferenceCodesConnection", filters, RENTAL_PREVIEW_CONTEXT);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetRentalContractReferenceCodesSummaryConnectionDocument,
+        connectionField: "rentalContractReferenceCodesConnection",
+        scope: filters => ({ ...filters, rentalContractReferenceCodes: null }),
+        missing: { document: GetFleetRentalContractReferenceCodesSummaryMissingDocument },
+        toOption: entry => ({
             key: entry.key || "unknown",
             count: entry.count,
             label: entry.key && entry.key !== UNDEFINED_SUMMARY_KEY ? entry.key : t(`machine.types.Unknown`),
-        }));
-    }, [edges, missing, loading, t]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+        }),
+        context: RENTAL_PREVIEW_CONTEXT,
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Rental contract reference code filter definition
@@ -8081,7 +8008,6 @@ const useServicePlanStatusFilter = ({ servicePlanStatusToShow = SERVICE_PLAN_STA
     return result;
 };
 
-const FETCH_LIMIT$1 = 1000;
 /**
  * Component for rendering a filter view specific to site depot ownership.
  *
@@ -8090,35 +8016,19 @@ const FETCH_LIMIT$1 = 1000;
  */
 const SiteDepotOwnershipIdsFilterView = (props) => {
     const [t] = useTranslation();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [showRequestMoreUseSearch, setShowRequestMoreUseSearch] = react.useState(false);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const { data, loading } = reactGraphqlHooks.useQuery(GetSiteDepotOwnershipIdSummaryDocument, {
-        fetchPolicy: "cache-first",
-        variables: {
-            limit: FETCH_LIMIT$1,
-            search: debouncedSearch,
-            filters: {
-                ...activeFilters,
-                owningDepotSiteIds: null, // Omit the filters own values so list shows options correctly
-            },
-        },
-    });
-    const options = react.useMemo(() => {
-        const result = data?.assetSummary?.owningDepots?.summary.map(owningDepotEdge => ({
-            key: owningDepotEdge.site?.siteId ? owningDepotEdge.site.siteId || "unknown" : "UNDEFINED",
+    const facet = useFacetLimitedOptions(props.filterState, {
+        document: GetSiteDepotOwnershipIdSummaryDocument,
+        scope: filters => ({ ...filters, owningDepotSiteIds: null }),
+        read: data => data.assetSummary?.owningDepots?.summary,
+        toOption: owningDepotEdge => ({
+            key: owningDepotEdge.site?.siteId || "UNDEFINED",
             count: owningDepotEdge.count || 0,
             label: owningDepotEdge.site?.name === "UNDEFINED"
                 ? t("siteOwningDepot.notOwned")
                 : owningDepotEdge.site?.name || t("siteOwningDepot.unknown"),
-        })) ?? [];
-        return result;
-    }, [data?.assetSummary?.owningDepots?.summary, t]);
-    react.useEffect(() => {
-        setShowRequestMoreUseSearch(options.length === FETCH_LIMIT$1);
-    }, [options]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: loading, options: options, showRequestMoreUseSearch: showRequestMoreUseSearch }));
+        }),
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Site depot ownership filter definition
@@ -8142,7 +8052,6 @@ const useSiteDepotOwnershipIdsFilter = (props) => {
     return result;
 };
 
-const FETCH_LIMIT = 1000;
 /**
  * Filter view component for selecting Site IDs.
  *
@@ -8153,33 +8062,19 @@ const FETCH_LIMIT = 1000;
  * @returns {ReactElement} The rendered Site IDs filter view component.
  */
 const SiteIdsFilterView = (props) => {
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [showRequestMoreUseSearch, setShowRequestMoreUseSearch] = react.useState(false);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const { data, loading } = reactGraphqlHooks.useQuery(GetSiteIdSummaryDocument, {
-        fetchPolicy: "cache-first",
-        variables: {
-            limit: FETCH_LIMIT,
-            search: debouncedSearch,
-            filters: {
-                ...activeFilters,
-                siteIds: null, // Omit the filters own values so list shows options correctly
-            },
-        },
-    });
-    const options = react.useMemo(() => {
-        const result = data?.assetSummary?.sites?.summary.map(siteEdge => ({
+    const [t] = useTranslation();
+    const facet = useFacetLimitedOptions(props.filterState, {
+        document: GetSiteIdSummaryDocument,
+        scope: filters => ({ ...filters, siteIds: null }),
+        read: data => data.assetSummary?.sites?.summary,
+        toOption: siteEdge => ({
             key: siteEdge.site?.siteId || "unknown",
-            count: props.hasCount ? siteEdge.count || 0 : undefined,
-            label: siteEdge.site?.name || "Unknown",
-        })) ?? [];
-        return result;
-    }, [data?.assetSummary?.sites?.summary, props.hasCount]);
-    react.useEffect(() => {
-        setShowRequestMoreUseSearch(options.length === FETCH_LIMIT);
-    }, [options]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: loading, options: options, showRequestMoreUseSearch: showRequestMoreUseSearch }));
+            count: siteEdge.count || 0,
+            label: siteEdge.site?.name || t("machine.types.Unknown"),
+        }),
+        showCount: Boolean(props.hasCount),
+    });
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  *
@@ -8443,24 +8338,14 @@ const useTelematicsConnectedFilter = () => {
  */
 const TypesFilterView = (props) => {
     const { getMachineTypeTranslation } = translationsMachineType.useMachineTypeTranslations();
-    const activeFilters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
-    const [searchText, setSearchText] = react.useState("");
-    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: 500 });
-    const filters = { ...activeFilters, types: null };
-    const { edges, loading: loadingValues, pagination, } = useFleetSummaryConnection(GetFleetTypesSummaryConnectionDocument, "typesConnection", {
-        search: debouncedSearch,
-        filters,
+    const facet = useFacetConnectionOptions(props.filterState, {
+        document: GetFleetTypesSummaryConnectionDocument,
+        connectionField: "typesConnection",
+        scope: filters => ({ ...filters, types: null }),
+        missing: { document: GetFleetTypesSummaryMissingDocument },
+        toOption: entry => ({ ...entry, label: getMachineTypeTranslation(entry.key) }),
     });
-    const { missing, loading: loadingMissing } = useFacetMissingCount(GetFleetTypesSummaryMissingDocument, "typesConnection", filters);
-    const loading = loadingValues || loadingMissing;
-    const options = react.useMemo(() => {
-        return toSummaryEntries(edges, missing, loading).map(entry => ({
-            key: entry.key,
-            count: entry.count,
-            label: getMachineTypeTranslation(entry.key),
-        }));
-    }, [edges, missing, loading, getMachineTypeTranslation]);
-    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }, loading: Boolean(loading && options.length === 0), options: options, pagination: pagination }));
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, ...facet });
 };
 /**
  * Types filter definition