Fix filtering highlighted columns in "manage-table-columns" (#1000)

Author: KaroMourad

aim/web/ui/src/components/ChartPanel/PopoverContent/PopoverContent.tsx

@@ -87,7 +87,7 @@ const PopoverContent = React.forwardRef(function PopoverContent(
                 {isSystemMetric(metric)
                   ? formatSystemMetricName(metric)
                   : metric ?? '--'}
-              </strong>
+              </strong>{' '}
               {context || null}
             </div>
             <div className='PopoverContent__value'>

aim/web/ui/src/pages/Metrics/components/Table/ManageColumnsPopover/ManageColumnsPopover.tsx

@@ -133,7 +133,7 @@ function ManageColumnsPopover({
     if (!!midPane) {
       if (searchKey && searchKey.trim() !== '') {
         const firstHighlightedCol: any = midPane.querySelector(
-          '.ColumnItem__container.highlighted',
+          '.ColumnItem.highlighted',
         );
         if (!!firstHighlightedCol) {
           midPane.scrollTop =

aim/web/ui/src/types/services/models/metrics/metricsAppModel.d.ts

@@ -189,7 +189,7 @@ export interface IChartTooltip {
 }
 
 export interface IAlignmentConfig {
-  metric: string;
+  metric?: string;
   type: AlignmentOptionsEnum;
 }
 

aim/web/ui/src/utils/d3/drawAxes.ts

@@ -37,11 +37,12 @@ function drawAxes(props: IDrawAxesProps): void {
     let xAlignmentText = '';
     const [first, last] = attributesRef.current.xScale.domain();
 
+    const alignmentKey = _.capitalize(getKeyByAlignment(alignmentConfig));
+
     switch (alignmentConfig?.type) {
       case AlignmentOptionsEnum.EPOCH:
         {
-          xAlignmentText =
-            _.capitalize(getKeyByAlignment(alignmentConfig)) + 's';
+          xAlignmentText = alignmentKey ? alignmentKey + 's' : '';
 
           let ticksCount = Math.floor(plotBoxRef.current.width / 50);
           ticksCount = ticksCount > 1 ? ticksCount - 1 : 1;
@@ -52,7 +53,7 @@ function drawAxes(props: IDrawAxesProps): void {
         break;
       case AlignmentOptionsEnum.RELATIVE_TIME:
         {
-          xAlignmentText = _.capitalize(getKeyByAlignment(alignmentConfig));
+          xAlignmentText = alignmentKey || '';
 
           let ticksCount = Math.floor(plotBoxRef.current.width / 85);
           ticksCount = ticksCount > 1 ? ticksCount - 1 : 1;
@@ -119,7 +120,7 @@ function drawAxes(props: IDrawAxesProps): void {
         break;
       case AlignmentOptionsEnum.ABSOLUTE_TIME:
         {
-          xAlignmentText = _.capitalize(getKeyByAlignment(alignmentConfig));
+          xAlignmentText = alignmentKey || '';
 
           let ticksCount = Math.floor(plotBoxRef.current.width / 120);
           ticksCount = ticksCount > 1 ? ticksCount - 1 : 1;
@@ -144,15 +145,15 @@ function drawAxes(props: IDrawAxesProps): void {
         break;
       case AlignmentOptionsEnum.CUSTOM_METRIC:
         {
-          xAlignmentText = alignmentConfig?.metric;
+          xAlignmentText = alignmentConfig?.metric || '';
 
           let ticksCount = Math.floor(plotBoxRef.current.width / 120);
           ticksCount = ticksCount > 1 ? ticksCount - 1 : 1;
           xAxis.ticks(ticksCount);
         }
         break;
       default: {
-        xAlignmentText = _.capitalize(getKeyByAlignment(alignmentConfig)) + 's';
+        xAlignmentText = alignmentKey ? alignmentKey + 's' : 'Steps';
 
         let ticksCount = Math.floor(plotBoxRef.current.width / 90);
         ticksCount = ticksCount > 1 ? ticksCount - 1 : 1;

aim/web/ui/src/utils/formatByAlignment.ts

@@ -44,7 +44,7 @@ function getKeyByAlignment(alignmentConfig?: IAlignmentConfig): string {
     case AlignmentOptionsEnum.RELATIVE_TIME:
       return AlignmentKeysEnum.RELATIVE_TIME.replace('_', ' ');
     case AlignmentOptionsEnum.CUSTOM_METRIC:
-      return alignmentConfig.metric;
+      return alignmentConfig?.metric || '';
     default:
       return '';
   }