[OBSV-711] feat: add orderBy to Explorer visualisation

projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts

@@ -4,6 +4,7 @@ import { Filter } from '@hypertrace/components';
 import { Observable } from 'rxjs';
 import { AttributeExpression } from '../../graphql/model/attribute/attribute-expression';
 import { GraphQlGroupBy } from '../../graphql/model/schema/groupby/graphql-group-by';
+import { GraphQlSortDirection } from '../../graphql/model/schema/sort/graphql-sort-direction';
 import { IntervalValue } from '../interval-select/interval-select.component';
 import {
   ExploreRequestContext,
@@ -37,13 +38,19 @@ import {
           [interval]="currentVisualization.interval"
           (intervalChange)="this.setInterval($event)"
         ></ht-explore-query-interval-editor>
+
         <ht-explore-query-group-by-editor
           class="group-by"
           [context]="currentVisualization.context"
           [groupByExpression]="(currentVisualization.groupBy?.keyExpressions)[0]"
           (groupByExpressionChange)="this.updateGroupByExpression(currentVisualization.groupBy, $event)"
         ></ht-explore-query-group-by-editor>
 
+        <ht-explore-query-order-by-editor
+          class="order-by"
+          (orderByDirectionChange)="this.updateOrderBy($event)"
+        ></ht-explore-query-order-by-editor>
+
         <ht-explore-query-limit-editor
           *ngIf="currentVisualization.groupBy"
           class="limit"
@@ -133,6 +140,10 @@ export class ExploreQueryEditorComponent implements OnChanges, OnInit {
     this.visualizationBuilder.groupBy({ ...groupBy, limit: limit });
   }
 
+  public updateOrderBy(orderBy?: GraphQlSortDirection): void {
+    this.visualizationBuilder.orderBy(orderBy);
+  }
+
   public setInterval(interval: IntervalValue): void {
     this.visualizationBuilder.interval(interval === 'NONE' ? undefined : interval);
   }

projects/observability/src/shared/components/explore-query-editor/explore-query-editor.module.ts

@@ -14,6 +14,7 @@ import { ExploreQueryEditorComponent } from './explore-query-editor.component';
 import { ExploreQueryGroupByEditorComponent } from './group-by/explore-query-group-by-editor.component';
 import { ExploreQueryIntervalEditorComponent } from './interval/explore-query-interval-editor.component';
 import { ExploreQueryLimitEditorComponent } from './limit/explore-query-limit-editor.component';
+import { ExploreQueryOrderByEditorComponent } from './order-by/explore-query-order-by-editor.component';
 import { ExploreQuerySeriesEditorComponent } from './series/explore-query-series-editor.component';
 import { ExploreQuerySeriesGroupEditorComponent } from './series/explore-query-series-group-editor.component';
 
@@ -24,7 +25,8 @@ import { ExploreQuerySeriesGroupEditorComponent } from './series/explore-query-s
     ExploreQuerySeriesEditorComponent,
     ExploreQueryGroupByEditorComponent,
     ExploreQueryLimitEditorComponent,
-    ExploreQueryIntervalEditorComponent
+    ExploreQueryIntervalEditorComponent,
+    ExploreQueryOrderByEditorComponent
   ],
   exports: [ExploreQueryEditorComponent],
   imports: [

projects/observability/src/shared/components/explore-query-editor/explore-visualization-builder.ts

@@ -8,6 +8,7 @@ import { AttributeMetadata } from '../../graphql/model/metadata/attribute-metada
 import { MetricAggregationType } from '../../graphql/model/metrics/metric-aggregation';
 import { GraphQlGroupBy } from '../../graphql/model/schema/groupby/graphql-group-by';
 import { ObservabilityTraceType } from '../../graphql/model/schema/observability-traces';
+import { GraphQlSortDirection } from '../../graphql/model/schema/sort/graphql-sort-direction';
 import { SPAN_SCOPE } from '../../graphql/model/schema/span';
 import { ExploreSpecification } from '../../graphql/model/schema/specifications/explore-specification';
 import { Specification } from '../../graphql/model/schema/specifier/specification';
@@ -81,6 +82,12 @@ export class ExploreVisualizationBuilder implements OnDestroy {
     });
   }
 
+  public orderBy(orderBy?: GraphQlSortDirection): this {
+    return this.updateState({
+      orderBy: orderBy
+    });
+  }
+
   public interval(interval?: TimeDuration | 'AUTO'): this {
     return this.updateState({
       interval: interval
@@ -117,6 +124,7 @@ export class ExploreVisualizationBuilder implements OnDestroy {
       filters: state.filters && [...state.filters],
       interval: state.interval,
       groupBy: state.groupBy && { ...state.groupBy },
+      orderBy: state.orderBy,
       exploreQuery$: this.mapStateToExploreQuery(state),
       resultsQuery$: this.mapStateToResultsQuery(state)
     };
@@ -130,6 +138,7 @@ export class ExploreVisualizationBuilder implements OnDestroy {
       interval: this.resolveInterval(state.interval),
       filters: state.filters && this.graphQlFilterBuilderService.buildGraphQlFieldFilters(state.filters),
       groupBy: state.groupBy,
+      orderBy: state.orderBy && [{ direction: state.orderBy, key: state.series[0].specification }],
       limit: state.resultLimit
     });
   }
@@ -226,6 +235,7 @@ export interface ExploreRequestState {
   interval?: TimeDuration | 'AUTO';
   filters?: Filter[];
   groupBy?: GraphQlGroupBy;
+  orderBy?: GraphQlSortDirection;
   useGroupName?: boolean;
   resultLimit: number;
 }

projects/observability/src/shared/components/explore-query-editor/group-by/explore-query-group-by-editor.component.ts

@@ -106,7 +106,7 @@ export class ExploreQueryGroupByEditorComponent implements OnChanges {
     this.groupByExpressionsToEmit.next({ ...previousExpression, subpath: newPath });
   }
 
-  public supportsSubpath(attribute?: AttributeMetadata): boolean {
+  public supportsSubpath(attribute?: AttributeMetadata | null): boolean {
     return attribute?.type === AttributeMetadataType.StringMap;
   }
 

projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.scss

@@ -0,0 +1,31 @@
+@import 'font';
+@import 'color-palette';
+
+.order-by-container {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+
+  .order-by-input-container {
+    display: flex;
+    flex-direction: column;
+
+    .order-by-label {
+      @include body-1-medium($gray-9);
+      height: 32px;
+      line-height: 32px;
+      margin-bottom: 12px;
+    }
+
+    .order-by-path-wrapper {
+      width: 81px;
+
+      .order-by-path-input {
+        @include body-2-regular($gray-9);
+        width: 100%;
+        height: 100%;
+        line-height: 32px;
+      }
+    }
+  }
+}

projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { SelectOption } from '@hypertrace/components';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { GraphQlSortDirection } from '../../../graphql/model/schema/sort/graphql-sort-direction';
+
+@Component({
+  selector: 'ht-explore-query-order-by-editor',
+  styleUrls: ['./explore-query-order-by-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="order-by-container">
+      <div class="order-by-input-container">
+        <span class="order-by-label"> Order </span>
+        <div class="order-by-path-wrapper">
+          <ht-select
+            [showBorder]="true"
+            class="order-by-selector"
+            [selected]="this.currentOrderOption"
+            (selectedChange)="this.onOrderByDirectionChange($event)"
+          >
+            <ht-select-option
+              *ngFor="let option of this.orderOptions"
+              [value]="option.value"
+              [label]="option.label"
+            ></ht-select-option>
+          </ht-select>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class ExploreQueryOrderByEditorComponent {
+  @Output()
+  public readonly orderByDirectionChange: EventEmitter<GraphQlSortDirection | undefined> = new EventEmitter();
+
+  public readonly orderOptions: SelectOption<string | undefined>[] = this.getOrderByOptions();
+  private readonly orderByExpressionsToEmit: Subject<GraphQlSortDirection | undefined> = new Subject();
+
+  public readonly currentOrderOption: string | undefined = this.orderOptions[0].value;
+
+  public constructor() {
+    this.orderByExpressionsToEmit.pipe(debounceTime(500)).subscribe(this.orderByDirectionChange);
+  }
+
+  public onOrderByDirectionChange(newDirection?: GraphQlSortDirection): void {
+    this.orderByExpressionsToEmit.next(newDirection);
+  }
+
+  private getOrderByOptions(): SelectOption<string | undefined>[] {
+    return [
+      this.getEmptyOrderByOption(),
+      ...['Asc', 'Desc'].map(order => ({
+        label: order,
+        value: order.toUpperCase()
+      }))
+    ];
+  }
+
+  private getEmptyOrderByOption(): SelectOption<string | undefined> {
+    return {
+      value: undefined,
+      label: 'None'
+    };
+  }
+}