From b07d013d5036d480e8f758175044c7450182342b Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 23 Jun 2025 19:36:38 +0200
Subject: [PATCH] add search with highilght

---
 .../insights/impact-metrics/ImpactMetrics.tsx | 12 +++++++-
 .../impact-metrics/ImpactMetricsControls.tsx  | 28 +++++++++++++++++--
 .../useImpactMetricsMetadata.ts               | 10 +++++--
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
index b766d5d9fb..65398a22fe 100644
--- a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
+++ b/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}
                         />
 
diff --git a/frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx b/frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx
index 7463d8c49a..3c782ee0b8 100644
--- a/frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx
+++ b/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}
-            onChange={(_, newValue) => onSeriesChange(newValue || '')}
+            getOptionLabel={(option) => option.name}
+            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}
diff --git a/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts b/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
index f0aaf003ed..a664f8fa07 100644
--- a/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
+++ b/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[];
-    labels: string[];
+    series: Record<string, ImpactMetricsSeries>;
 };
 
 export const useImpactMetricsMetadata = () => {
@@ -14,7 +18,7 @@ export const useImpactMetricsMetadata = () => {
         );
 
     return {
-        metadata: data || { series: [], labels: [] },
+        metadata: data,
         refetch,
         loading,
         error,