ui: more refactoring; silence warnings for list renderers

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx

@@ -65,7 +65,7 @@ const PillBar = (props) => {
 
 
 
-function CustomMetricLineChart(props: Props) {
+function CustomBarChart(props: Props) {
   const {
     data = { chart: [], namesMap: [] },
     compData = { chart: [], namesMap: [] },
@@ -156,4 +156,4 @@ function CustomMetricLineChart(props: Props) {
   );
 }
 
-export default CustomMetricLineChart;
+export default CustomBarChart;

frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx

@@ -64,7 +64,7 @@ const tabItems: Record<string, TabItem[]> = {
       icon: <Icon name={'dashboards/heatmap-2'} color={'inherit'} size={16} />,
       title: 'Heatmaps',
       type: HEATMAP,
-      description: 'Generate a report using by asking AI.',
+      description: 'Visualize user interaction patterns on your pages.',
     },
   ],
   monitors: [
@@ -153,6 +153,7 @@ function CategoryTab({ tab, inCards }: { tab: string, inCards?: boolean }) {
       ];
     }
 
+    // TODO This code here makes 0 sense
     if (selectedCard.cardType === FUNNEL) {
       cardData.series = [];
       cardData.series.filter = [];

frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx

@@ -53,7 +53,7 @@ export function AutocompleteModal({
       return sorted;
     }
     return options;
-  }, [options.length]);
+  }, [options.length, values]);
   return (
     <div
       className={cn(
@@ -74,6 +74,7 @@ export function AutocompleteModal({
       >
         {sortedOptions.map((item) => (
           <div
+            key={item.value}
             onClick={() => onSelectOption(item)}
             className={
               'cursor-pointer w-full py-1 hover:bg-active-blue rounded px-2'

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -65,6 +65,7 @@ export const FilterList = observer((props: Props) => {
       {filters.map((filter: any, filterIndex: any) =>
         !filter.isEvent ? (
           <div
+            key={`${filter.key}-${filterIndex}`}
             className={'py-2 hover:bg-active-blue px-5'}
             style={{
               marginLeft: '-1.25rem',