From 3ca3fd756a5fc7365dbfc5be3ef906d49baf8456 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Thu, 10 Jul 2025 11:21:02 +0200
Subject: [PATCH] feat: user friendly impact metric name

---
 .../ImpactMetricsControls/components/SeriesSelector.tsx     | 6 +++---
 .../useImpactMetricsMetadata/useImpactMetricsMetadata.ts    | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx b/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
index 9b6f0fd6bc..55c3636594 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
@@ -3,7 +3,7 @@ import { Autocomplete, TextField, Typography, Box } from '@mui/material';
 import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 
-type SeriesOption = ImpactMetricsSeries & { name: string };
+type SeriesOption = ImpactMetricsSeries & { name: string; displayName: string };
 
 export type SeriesSelectorProps = {
     value: string;
@@ -20,7 +20,7 @@ export const SeriesSelector: FC<SeriesSelectorProps> = ({
 }) => (
     <Autocomplete
         options={options}
-        getOptionLabel={(option) => option.name}
+        getOptionLabel={(option) => option.displayName}
         value={options.find((option) => option.name === value) || null}
         onChange={(_, newValue) => onChange(newValue?.name || '')}
         disabled={loading}
@@ -29,7 +29,7 @@ export const SeriesSelector: FC<SeriesSelectorProps> = ({
                 <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                     <Typography variant='body2'>
                         <Highlighter search={inputValue}>
-                            {option.name}
+                            {option.displayName}
                         </Highlighter>
                     </Typography>
                     <Typography variant='caption' color='text.secondary'>
diff --git a/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts b/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
index a664f8fa07..57f3a852cb 100644
--- a/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
+++ b/frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
@@ -4,6 +4,7 @@ import { formatApiPath } from 'utils/formatPath';
 export type ImpactMetricsSeries = {
     type: string;
     help: string;
+    displayName: string;
 };
 
 export type ImpactMetricsMetadata = {