fix: addressing review comments

Author: itssharmasandeep

projects/observability/src/shared/components/cartesian/d3/legend/cartesian-legend.ts

@@ -1,7 +1,7 @@
 import { ComponentRef, Injector } from '@angular/core';
 import { Color, Dictionary, DynamicComponentService } from '@hypertrace/common';
 import { ContainerElement, EnterElement, select, Selection } from 'd3-selection';
-import { groupBy, isNil } from 'lodash-es';
+import { groupBy } from 'lodash-es';
 import { Observable, Subject } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 import { LegendPosition } from '../../../legend/legend.component';
@@ -28,7 +28,6 @@ export class CartesianLegend<TData> {
   private readonly groupedSeries: Dictionary<Series<TData>[]>;
 
   private readonly isGrouped: boolean = true;
-  private readonly isNonTitledGrouped: boolean = false;
   private isSelectionModeOn: boolean = false;
   private legendElement?: HTMLDivElement;
   private activeSeries: Series<TData>[];
@@ -41,8 +40,8 @@ export class CartesianLegend<TData> {
     private readonly intervalData?: CartesianIntervalData,
     private readonly summaries: Summary[] = []
   ) {
-    this.isGrouped = !isNil(this.series[0]?.groupName);
-    this.isNonTitledGrouped = this.series.length > 0 && this.series[0].name === this.series[0].groupName;
+    this.isGrouped =
+      this.series.length > 0 && this.series.every(seriesEntry => seriesEntry.groupName !== seriesEntry.name);
     this.groupedSeries = this.isGrouped ? groupBy(this.series, seriesEntry => seriesEntry.groupName) : {};
 
     this.activeSeries = [...this.series];
@@ -106,23 +105,21 @@ export class CartesianLegend<TData> {
         .data(Object.values(this.groupedSeries))
         .enter()
         .append('div')
-        .attr('class', (_, index) => `legend-entries group-${index + 1}`)
+        .classed('legend-entries', true)
         .each((seriesGroup, index, elements) => this.drawLegendEntriesTitleAndValues(seriesGroup, elements[index]));
     }
   }
 
   private drawLegendEntriesTitleAndValues(seriesGroup: Series<TData>[], element: HTMLDivElement): void {
     const legendEntriesSelection = select(element);
-    if (!this.isNonTitledGrouped) {
-      legendEntriesSelection
-        .selectAll('.legend-entries-title')
-        .data([seriesGroup])
-        .enter()
-        .append('div')
-        .classed('legend-entries-title', true)
-        .text(group => `${group[0].groupName}:`)
-        .on('click', () => this.updateActiveSeriesGroup(seriesGroup));
-    }
+    legendEntriesSelection
+      .selectAll('.legend-entries-title')
+      .data([seriesGroup])
+      .enter()
+      .append('div')
+      .classed('legend-entries-title', true)
+      .text(group => `${group[0].groupName}:`)
+      .on('click', () => this.updateActiveSeriesGroup(seriesGroup));
 
     legendEntriesSelection
       .append('div')

projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.ts

@@ -1,6 +1,6 @@
 import { ColorService, forkJoinSafeEmpty, RequireBy, TimeDuration } from '@hypertrace/common';
 import { ModelInject } from '@hypertrace/hyperdash-angular';
-import { isNil } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import { NEVER, Observable, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import { Series } from '../../../../components/cartesian/chart';
@@ -134,12 +134,9 @@ export abstract class ExploreCartesianDataSourceModel extends GraphQlDataSourceM
         data: result.data,
         units: obj.attribute.units !== '' ? obj.attribute.units : undefined,
         type: request.series.find(series => series.specification === result.spec)!.visualizationOptions.type,
-        name: result.groupName ?? obj.specDisplayName,
-        groupName: !isNil(result.groupName)
-          ? request.useGroupName
-            ? result.groupName
-            : obj.specDisplayName
-          : undefined,
+        name: !isEmpty(result.groupName) ? result.groupName! : obj.specDisplayName,
+        groupName:
+          !isEmpty(result.groupName) && (request.useGroupName ?? false) ? result.groupName! : obj.specDisplayName,
         color: color
       }))
     );