@trackunit/filters-asset-filter-definitions 1.1.1 → 1.2.0

package/index.cjs.js

@@ -12,9 +12,9 @@ var filtersGraphqlHook = require('@trackunit/filters-graphql-hook');
 var utilizationIndicator = require('@trackunit/utilization-indicator');
 var geoJsonUtils = require('@trackunit/geo-json-utils');
 var reactComponents = require('@trackunit/react-components');
+var stringTs = require('string-ts');
 var zod = require('zod');
 var sharedUtils = require('@trackunit/shared-utils');
-var stringTs = require('string-ts');
 var translationsMachineType = require('@trackunit/translations-machine-type');
 var criticalityIndicator = require('@trackunit/criticality-indicator');
 var tailwindMerge = require('tailwind-merge');
@@ -1540,13 +1540,13 @@ const GetAssetTelematicsDeviceConnectionSummaryDocument = {
         },
     ],
 };
-const FindPlacesDocument = {
+const GetPlaceAutocompletePredictionsDocument = {
     kind: "Document",
     definitions: [
         {
             kind: "OperationDefinition",
             operation: "query",
-            name: { kind: "Name", value: "FindPlaces" },
+            name: { kind: "Name", value: "GetPlaceAutocompletePredictions" },
             variableDefinitions: [
                 {
                     kind: "VariableDefinition",
@@ -1559,7 +1559,7 @@ const FindPlacesDocument = {
                 selections: [
                     {
                         kind: "Field",
-                        name: { kind: "Name", value: "findPlaces" },
+                        name: { kind: "Name", value: "placeAutocompletePredictions" },
                         arguments: [
                             {
                                 kind: "Argument",
@@ -1567,6 +1567,46 @@ const FindPlacesDocument = {
                                 value: { kind: "Variable", name: { kind: "Name", value: "search" } },
                             },
                         ],
+                        selectionSet: {
+                            kind: "SelectionSet",
+                            selections: [
+                                { kind: "Field", name: { kind: "Name", value: "placeId" } },
+                                { kind: "Field", name: { kind: "Name", value: "description" } },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
+const GetPlaceDetailsDocument = {
+    kind: "Document",
+    definitions: [
+        {
+            kind: "OperationDefinition",
+            operation: "query",
+            name: { kind: "Name", value: "GetPlaceDetails" },
+            variableDefinitions: [
+                {
+                    kind: "VariableDefinition",
+                    variable: { kind: "Variable", name: { kind: "Name", value: "placeId" } },
+                    type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } },
+                },
+            ],
+            selectionSet: {
+                kind: "SelectionSet",
+                selections: [
+                    {
+                        kind: "Field",
+                        name: { kind: "Name", value: "placeDetails" },
+                        arguments: [
+                            {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "placeId" },
+                                value: { kind: "Variable", name: { kind: "Name", value: "placeId" } },
+                            },
+                        ],
                         selectionSet: {
                             kind: "SelectionSet",
                             selections: [
@@ -1720,58 +1760,100 @@ const areaFilterInternalSchema = zod.z.object({
     geometry: areaFilterInternalGeoJsonGeometrySchema,
     properties: zod.z.object({
         formattedAddress: zod.z.string(),
+        addressComponents: zod.z
+            .array(zod.z.object({
+            longName: zod.z.string(),
+            shortName: zod.z.string(),
+            types: zod.z.array(zod.z.string()),
+        }))
+            .optional(),
     }),
     dateIsoString: zod.z.string().datetime().optional(), //can not be date object since useLocalStorage (with validation) does not support date objects
 });
+// Complementary place schemas - used for the Places API search
+const placePredictionSchema = zod.z.object({
+    placeId: zod.z.string(),
+    description: zod.z.string(),
+});
+const placeSchema = areaFilterInternalSchema.extend({
+    placeId: zod.z.string(),
+    description: zod.z.string(),
+});
 
 const SHARED_LOCATIONS_LOCAL_STORAGE_KEY = "shared-recent-locations";
 const MAX_RECENT_SEARCHES$1 = 5;
 const MIN_LENGTH_SEARCH = 3;
 const MAX_RESULTS = 5;
 /**
- * useAreaSearch is a hook that provides a search input for finding areas and a list of recent areas.
- * It uses the FindPlacesDocument query to search for areas and debounces the search input.
- * It also provides a list of recent areas that are stored in local storage.
+ * Hook for place search with autocomplete predictions and recent places history.
+ * Queries the internal GeoEnrichment API for predictions and place details (geo data) from Google's Places Autocomplete.
+ *
+ * Local storage for recent searches prevents unnecessary repetitive queries.
  */
-const useAreaSearch = ({ localStorageKey = SHARED_LOCATIONS_LOCAL_STORAGE_KEY, maxRecentSearches = MAX_RECENT_SEARCHES$1, maxResults = MAX_RESULTS, }) => {
+const usePlacesSearch = ({ localStorageKey = SHARED_LOCATIONS_LOCAL_STORAGE_KEY, maxRecentSearches = MAX_RECENT_SEARCHES$1, maxResults = MAX_RESULTS, }) => {
     const [t] = useTranslation();
     const [searchString, setSearchString] = react.useState("");
-    const [recentAreas, setRecentAreas] = reactCoreHooks.useLocalStorage({
+    const [selectedPrediction, setSelectedPrediction] = react.useState(undefined);
+    const [recentPlaces, setRecentPlaces] = reactCoreHooks.useLocalStorage({
         defaultState: [],
         key: localStorageKey,
-        schema: zod.z.array(areaFilterInternalSchema),
+        schema: zod.z.array(placeSchema),
     });
     const debouncedSearchString = reactComponents.useDebounce(searchString);
-    const { data, previousData, loading } = client.useQuery(FindPlacesDocument, {
+    const isRecentPlace = react.useCallback((placeId) => {
+        return recentPlaces.some(r => r.placeId === placeId);
+    }, [recentPlaces]);
+    // Query for place predictions
+    const { data: placeAutocompleteData, previousData: previousPlaceAutocompleteData, loading: loadingPlaceAutocomplete, } = client.useQuery(GetPlaceAutocompletePredictionsDocument, {
         variables: { search: debouncedSearchString },
         skip: !debouncedSearchString || searchString.replace(/\s/g, "").length < MIN_LENGTH_SEARCH,
     });
-    const stableData = react.useMemo(() => data ?? previousData, [data, previousData]);
-    const loadedAreas = react.useMemo(() => {
-        return (stableData?.findPlaces
-            ?.map(place => {
-            const parsedBbox = geoJsonUtils.geoJsonBboxSchema.safeParse(place.bbox);
-            const parsedGeometry = areaFilterInternalGeoJsonGeometrySchema.safeParse(place.geometry?.type
-                ? {
-                    type: stringTs.titleCase(place.geometry.type),
-                    coordinates: place.geometry.coordinates,
-                }
-                : undefined);
-            if (!parsedGeometry.success || !parsedBbox.success || !place.properties?.formattedAddress) {
-                return null;
+    const stablePlaceAutocompleteData = react.useMemo(() => placeAutocompleteData ?? previousPlaceAutocompleteData, [placeAutocompleteData, previousPlaceAutocompleteData]);
+    // Query for place details when a place is selected
+    const { data: placeDetailsData, loading: loadingDetails } = client.useQuery(GetPlaceDetailsDocument, {
+        variables: { placeId: selectedPrediction?.placeId ?? "" },
+        skip: !selectedPrediction?.placeId || isRecentPlace(selectedPrediction.placeId),
+    });
+    // Combine place details and selected prediction
+    const selectedPlaceData = react.useMemo(() => {
+        if (!selectedPrediction) {
+            return null;
+        }
+        if (isRecentPlace(selectedPrediction.placeId)) {
+            return recentPlaces.find(r => r.placeId === selectedPrediction.placeId);
+        }
+        if (!placeDetailsData?.placeDetails) {
+            return null;
+        }
+        const details = placeDetailsData.placeDetails;
+        const parsedBbox = geoJsonUtils.geoJsonBboxSchema.safeParse(details.bbox);
+        const parsedGeometry = areaFilterInternalGeoJsonGeometrySchema.safeParse(details.geometry?.type
+            ? {
+                type: stringTs.titleCase(details.geometry.type),
+                coordinates: details.geometry.coordinates,
             }
-            return {
-                bBox: parsedBbox.data,
-                geometry: parsedGeometry.data,
-                properties: { formattedAddress: place.properties.formattedAddress },
-            };
-        })
-            .filter(sharedUtils.nonNullable) ?? []);
-    }, [stableData]);
-    const areas = debouncedSearchString ? loadedAreas : recentAreas;
+            : undefined);
+        if (!parsedGeometry.success || !parsedBbox.success || !details.properties?.formattedAddress) {
+            return null;
+        }
+        return {
+            bBox: parsedBbox.data,
+            geometry: parsedGeometry.data,
+            properties: { formattedAddress: details.properties.formattedAddress },
+            placeId: selectedPrediction.placeId,
+            description: selectedPrediction.description,
+        };
+    }, [placeDetailsData, selectedPrediction, isRecentPlace, recentPlaces]);
+    // List of predictions or recent places
+    const places = react.useMemo(() => {
+        if (debouncedSearchString) {
+            return stablePlaceAutocompleteData?.placeAutocompletePredictions ?? [];
+        }
+        return recentPlaces;
+    }, [debouncedSearchString, stablePlaceAutocompleteData, recentPlaces]);
     const hint = react.useMemo(() => {
         const noWhiteSpaceSearchString = searchString.replace(/\s/g, "");
-        if (searchString.length === 0 && areas.length === 0) {
+        if (searchString.length === 0 && places.length === 0) {
             return t("filters.shared.noHistory");
         }
         else if (noWhiteSpaceSearchString.length === 0 && searchString.length > 0) {
@@ -1780,47 +1862,61 @@ const useAreaSearch = ({ localStorageKey = SHARED_LOCATIONS_LOCAL_STORAGE_KEY, m
         else if (searchString.length > 0 && noWhiteSpaceSearchString.length < MIN_LENGTH_SEARCH) {
             return t("filters.shared.typeMore");
         }
-        else if (loading && areas.length === 0) {
+        else if (loadingPlaceAutocomplete && places.length === 0) {
             return t("filtersBar.loading");
         }
-        else if (areas.length === 0) {
+        else if (places.length === 0) {
             return t("filtersBar.emptyResults");
         }
         return null;
-    }, [searchString, areas, t, loading]);
-    const addRecentArea = (area) => {
-        setRecentAreas(prev => {
-            const noDuplicatesRecent = prev.filter(r => r.properties.formattedAddress !== area.properties.formattedAddress);
+    }, [searchString, places, t, loadingPlaceAutocomplete]);
+    const addRecentPlace = react.useCallback((place) => {
+        setRecentPlaces(prev => {
+            const noDuplicatesRecent = prev.filter(r => r.placeId !== place.placeId);
             const cappedLengthRecentAreas = noDuplicatesRecent.slice(0, maxRecentSearches - 1);
             return [
                 {
-                    ...area,
+                    ...place,
                     dateIsoString: new Date().toISOString(),
                 },
                 ...cappedLengthRecentAreas,
             ];
         });
+    }, [maxRecentSearches, setRecentPlaces]);
+    const removeRecentPlace = (place) => {
+        setRecentPlaces(prev => prev.filter(r => r.placeId !== place.placeId));
     };
-    const removeRecentArea = (area) => {
-        setRecentAreas(prev => prev.filter(r => r.properties.formattedAddress !== area.properties.formattedAddress));
-    };
+    react.useEffect(() => {
+        if (!selectedPlaceData) {
+            return;
+        }
+        if (!isRecentPlace(selectedPlaceData.placeId)) {
+            addRecentPlace(selectedPlaceData);
+        }
+    }, [selectedPlaceData, addRecentPlace, isRecentPlace]);
     return {
-        areas: areas.slice(0, maxResults),
-        loading,
+        places: places.slice(0, maxResults),
+        loading: loadingPlaceAutocomplete || loadingDetails,
         searchString,
         setSearchString,
         debouncedSearchString,
-        recentAreas,
-        setRecentAreas,
+        recentPlaces,
+        setRecentPlaces,
         hint,
-        removeRecentArea,
-        addRecentArea,
+        removeRecentPlace,
+        addRecentPlace,
+        selectedPrediction,
+        setSelectedPrediction,
+        selectedPlaceData,
     };
 };
 
 const AreaView = (props) => {
     const [t] = useTranslation();
     const { logEvent } = reactCoreHooks.useAnalytics(filtersFilterBar.FilterEvents);
+    const { places, recentPlaces, setRecentPlaces, selectedPlaceData, setSelectedPrediction, searchString, setSearchString, debouncedSearchString, loading, hint, } = usePlacesSearch({
+        localStorageKey: "shared-recent-locations",
+    });
     const placeholderOption = react.useMemo(() => {
         // If no selected option, use this placeholder option
         // Aka if applied from outside the filter UI
@@ -1834,59 +1930,73 @@ const AreaView = (props) => {
                 geometry: props.value,
                 properties: { formattedAddress: t("assetFilters.area.origin.mapArea") },
                 dateIsoString: undefined,
+                placeId: "applied-map-area",
+                description: t("assetFilters.area.origin.mapArea"),
             }
             : null;
     }, [props.value, t]);
-    const selectedOption = getSelectedOption(props.value, props.areas);
+    const selectedOption = react.useMemo(() => getSelectedOption(props.value, recentPlaces), [props.value, recentPlaces]);
+    const setFilter = react.useCallback((place) => {
+        const { properties, bBox, geometry, dateIsoString } = place;
+        if (geometry.type === "Polygon") {
+            // Polygons are stored directly
+            props.filterBarActions.setArea(geometry);
+        }
+        else {
+            // All other geometries are stored by the filter as a
+            // polygon derived from the features bbox
+            props.filterBarActions.setArea(geoJsonUtils.getPolygonFromBbox(bBox));
+        }
+        logEvent("Filters Applied - V2", {
+            type: "AreaFilter",
+            value: properties.formattedAddress,
+            additionalProperties: {
+                geometryType: geometry.type,
+                wasPreviousSearch: Boolean(dateIsoString),
+            },
+        });
+    }, [props.filterBarActions, logEvent]);
+    react.useEffect(() => {
+        if (!selectedPlaceData) {
+            return;
+        }
+        if (selectedPlaceData.placeId === selectedOption?.placeId) {
+            return;
+        }
+        setFilter(selectedPlaceData);
+    }, [selectedPlaceData, setFilter, selectedOption]);
     if (!props.showWithSearch) {
-        // Temoraray while we are testing the new area filter bar behind feature flag
+        // Temporary while we are testing the new area filter bar behind feature flag
         // This emulated the old look of the boundingbox filter
         // TODO [BUSS] Remove this once the new area filter is ready for prime time
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: jsxRuntime.jsx("p", { className: "p-2", children: `${t("assetFilters.boundingBoxFilter.value")}` }) })] }));
     }
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions, loading: props.loading, searchEnabled: true, searchProps: {
-                    onChange: props.setSearchString,
-                    value: props.searchString,
-                    count: props.areas.length,
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions, loading: loading, searchEnabled: true, searchProps: {
+                    onChange: setSearchString,
+                    value: searchString,
+                    count: places.length,
                     placeholder: t("assetFilters.area.searchPlaceholder"),
-                } }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: props.areas.length > 0 || placeholderOption ? (jsxRuntime.jsx(filtersFilterBar.FilterResults, { loading: false, results: [
+                } }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: places.length > 0 || placeholderOption ? (jsxRuntime.jsx(filtersFilterBar.FilterResults, { loading: false, results: [
                         // Show placeholder option first if selected option is not in filterResult
                         // Aka if applied from outside the filter UI
-                        ...(placeholderOption && !selectedOption && !props.debouncedSearchString ? [placeholderOption] : []),
-                        ...props.areas,
+                        ...(placeholderOption && !selectedOption && !debouncedSearchString ? [placeholderOption] : []),
+                        ...places,
                     ], children: filterResult => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { className: "m-1", id: "areaFilter", onChange: e => {
-                            const parsedResultLookup = areaFilterInternalSchema.safeParse(filterResult.find(result => result.properties.formattedAddress === e.currentTarget.value));
-                            if (!parsedResultLookup.success) {
-                                return;
-                            }
-                            const { properties, bBox, geometry, dateIsoString } = parsedResultLookup.data;
-                            logEvent("Filters Applied - V2", {
-                                type: "AreaFilter",
-                                value: properties.formattedAddress,
-                                additionalProperties: {
-                                    geometryType: geometry.type,
-                                    wasPreviousSearch: Boolean(dateIsoString),
-                                },
-                            });
-                            props.addRecentArea(parsedResultLookup.data);
-                            if (geometry.type === "Polygon") {
-                                // Polygons are stored directly
-                                props.filterBarActions.setArea(geometry);
-                            }
-                            else {
-                                // All other geometries are stored by the filter as a
-                                // polygon derived from the features bbox
-                                props.filterBarActions.setArea(geoJsonUtils.getPolygonFromBbox(bBox));
-                            }
-                            props.setSearchString(""); // Clear search input after selection
-                        }, value: selectedOption?.properties.formattedAddress ??
-                            placeholderOption?.properties.formattedAddress ?? // placeholder if no selected option
-                            "", children: filterResult.map(({ properties, dateIsoString }, index) => {
-                            const selected = selectedOption?.properties.formattedAddress === properties.formattedAddress;
-                            return (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { label: properties.formattedAddress, selected: selected, suffix: 
+                            const findOption = filterResult.find(result => result.description === e.currentTarget.value);
+                            findOption &&
+                                setSelectedPrediction({
+                                    placeId: findOption.placeId,
+                                    description: findOption.description,
+                                });
+                            setSearchString(""); // Clear search input after selection
+                        }, value: selectedOption?.description ??
+                            placeholderOption?.description ?? // placeholder if no selected option
+                            "", children: filterResult.map(({ ...rest }, index) => {
+                            const selected = selectedOption?.description === rest.description;
+                            return (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { label: rest.description, selected: selected, suffix: 
                                 // Only show clear button if not currently selected and previously searched
-                                !selected && dateIsoString ? (jsxRuntime.jsx(ClearItemButton, { onClick: () => props.setRecentAreas(prev => prev.filter(r => r.properties.formattedAddress !== properties.formattedAddress)) })) : null, value: properties.formattedAddress }, index));
-                        }) })) })) : (jsxRuntime.jsx("p", { className: "py-2 text-center text-sm text-gray-400", children: props.hint })) }), props.debouncedSearchString.length === 0 ? (jsxRuntime.jsx(RecentSearchesFooter, { count: props.recentAreas.length, onClearAll: () => props.setRecentAreas([]) })) : null] }));
+                                !selected && "dateIsoString" in rest ? (jsxRuntime.jsx(ClearItemButton, { onClick: () => setRecentPlaces(prev => prev.filter(r => r.description !== rest.description)) })) : null, value: rest.description }, index));
+                        }) })) })) : (jsxRuntime.jsx("p", { className: "py-2 text-center text-sm text-gray-400", children: hint })) }), debouncedSearchString.length === 0 ? (jsxRuntime.jsx(RecentSearchesFooter, { count: recentPlaces.length, onClearAll: () => setRecentPlaces([]) })) : null] }));
 };
 /**
  * Area filter definition
@@ -1897,7 +2007,7 @@ const useAreaFilter = ({ showWithSearch } = {
     showWithSearch: () => true,
 }) => {
     const [t] = useTranslation();
-    const areaSearch = useAreaSearch({
+    const { recentPlaces } = usePlacesSearch({
         localStorageKey: "shared-recent-locations",
     });
     const result = react.useMemo(() => {
@@ -1910,14 +2020,15 @@ const useAreaFilter = ({ showWithSearch } = {
             showInStarredMenu: () => showWithSearch(),
             showInFilterBar: () => showWithSearch(),
             valueAsText: value => {
-                const nameOfSelectedArea = getSelectedOption(value, areaSearch.recentAreas);
+                // Match the applied area filter to the places option if it exists in the recent places
+                const nameOfSelectedArea = getSelectedOption(value, recentPlaces);
                 return showWithSearch()
-                    ? (nameOfSelectedArea?.properties.formattedAddress ?? t("assetFilters.area.active"))
+                    ? (nameOfSelectedArea?.description ?? t("assetFilters.area.active"))
                     : t("assetFilters.boundingBoxFilter.value");
             },
-            component: props => jsxRuntime.jsx(AreaView, { ...props, ...areaSearch, showWithSearch: showWithSearch() }),
+            component: props => jsxRuntime.jsx(AreaView, { ...props, showWithSearch: showWithSearch() }),
         };
-    }, [t, showWithSearch, areaSearch]);
+    }, [t, showWithSearch, recentPlaces]);
     return result;
 };
 const getSelectedOption = (value, options) => {
@@ -3493,11 +3604,12 @@ exports.assetTypeConst = assetTypeConst;
 exports.mapActivityToLabelId = mapActivityToLabelId;
 exports.mapMetadataCompletenessToLabelId = mapMetadataCompletenessToLabelId;
 exports.metadataCompleteness = metadataCompleteness;
+exports.placePredictionSchema = placePredictionSchema;
+exports.placeSchema = placeSchema;
 exports.sortSiteTypeSummary = sortSiteTypeSummary;
 exports.useActiveFilterFilter = useActiveFilterFilter;
 exports.useActivityFilter = useActivityFilter;
 exports.useAreaFilter = useAreaFilter;
-exports.useAreaSearch = useAreaSearch;
 exports.useAssetIdsFilter = useAssetIdsFilter;
 exports.useAssetTypeFilter = useAssetTypeFilter;
 exports.useBrandFilter = useBrandFilter;
@@ -3512,6 +3624,7 @@ exports.useMetadataCompletenessFilter = useMetadataCompletenessFilter;
 exports.useModelsFilter = useModelsFilter;
 exports.useOwnerAccountIdsFilter = useOwnerAccountIdsFilter;
 exports.usePeriodFilter = usePeriodFilter;
+exports.usePlacesSearch = usePlacesSearch;
 exports.useProductionYearFilter = useProductionYearFilter;
 exports.useSearchFilter = useSearchFilter;
 exports.useServicePlanStatusFilter = useServicePlanStatusFilter;