add search with highilght

frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx

@@ -46,6 +46,16 @@ export const ImpactMetrics: FC = () => {
         type: 'constant',
     });
 
+    const metricSeries = useMemo(() => {
+        if (!metadata?.series) {
+            return [];
+        }
+        return Object.entries(metadata.series).map(([name, rest]) => ({
+            name,
+            ...rest,
+        }));
+    }, [metadata]);
+
     const data = useMemo(() => {
         if (!timeSeriesData.length) {
             return {
@@ -119,7 +129,7 @@ export const ImpactMetrics: FC = () => {
                             onRangeChange={setSelectedRange}
                             beginAtZero={beginAtZero}
                             onBeginAtZeroChange={setBeginAtZero}
-                            metricSeries={metadata.series}
+                            metricSeries={metricSeries}
                             loading={metadataLoading}
                         />
 

frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx

@@ -11,6 +11,8 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
+import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
+import { Highlighter } from 'component/common/Highlighter/Highlighter';
 
 export interface ImpactMetricsControlsProps {
     selectedSeries: string;
@@ -19,7 +21,7 @@ export interface ImpactMetricsControlsProps {
     onRangeChange: (range: 'hour' | 'day' | 'week' | 'month') => void;
     beginAtZero: boolean;
     onBeginAtZeroChange: (beginAtZero: boolean) => void;
-    metricSeries: string[];
+    metricSeries: (ImpactMetricsSeries & { name: string })[];
     loading?: boolean;
 }
 
@@ -49,9 +51,29 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
 
         <Autocomplete
             options={metricSeries}
-            value={selectedSeries || null}
+            getOptionLabel={(option) => option.name}
-            onChange={(_, newValue) => onSeriesChange(newValue || '')}
+            value={
+                metricSeries.find((option) => option.name === selectedSeries) ||
+                null
+            }
+            onChange={(_, newValue) => onSeriesChange(newValue?.name || '')}
             disabled={loading}
+            renderOption={(props, option, { inputValue }) => (
+                <Box component='li' {...props}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                        <Typography variant='body2'>
+                            <Highlighter search={inputValue}>
+                                {option.name}
+                            </Highlighter>
+                        </Typography>
+                        <Typography variant='caption' color='text.secondary'>
+                            <Highlighter search={inputValue}>
+                                {option.help}
+                            </Highlighter>
+                        </Typography>
+                    </Box>
+                </Box>
+            )}
             renderInput={(params) => (
                 <TextField
                     {...params}

frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts

@@ -1,9 +1,13 @@
 import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
 import { formatApiPath } from 'utils/formatPath';
 
+export type ImpactMetricsSeries = {
+    type: string;
+    help: string;
+};
+
 export type ImpactMetricsMetadata = {
-    series: string[];
+    series: Record<string, ImpactMetricsSeries>;
-    labels: string[];
 };
 
 export const useImpactMetricsMetadata = () => {
@@ -14,7 +18,7 @@ export const useImpactMetricsMetadata = () => {
         );
 
     return {
-        metadata: data || { series: [], labels: [] },
+        metadata: data,
         refetch,
         loading,
         error,