From baa13e1d38348a5091ed7f97ef26b73b6e877289 Mon Sep 17 00:00:00 2001
From: Christian <35982795+Christian862@users.noreply.github.com>
Date: Tue, 22 Mar 2022 12:30:30 -0300
Subject: [PATCH 1/4] fix: overflow for data range

---
 .../page-time-range/page-time-range.component.ts  | 12 +++++++++++-
 .../src/time-range/time-range.component.ts        | 15 +++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/page-time-range/page-time-range.component.ts b/projects/components/src/page-time-range/page-time-range.component.ts
index 3a0c0c5b0..d1616fa84 100644
--- a/projects/components/src/page-time-range/page-time-range.component.ts
+++ b/projects/components/src/page-time-range/page-time-range.component.ts
@@ -2,13 +2,23 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, UrlSegment } from '@angular/router';
 import { LoggerService, NavigationService, PageTimeRangePreferenceService, TimeRange } from '@hypertrace/common';
 import { isNil } from 'lodash-es';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 
 @Component({
   selector: 'ht-page-time-range',
-  template: ` <ht-time-range (timeRangeSelected)="this.onTimeRangeSelected($event)"></ht-time-range> `,
+  template: `
+    <ht-time-range
+      [dropdownLocation]="this.dropdownLocation"
+      (timeRangeSelected)="this.onTimeRangeSelected($event)"
+    ></ht-time-range>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageTimeRangeComponent {
+  public readonly dropdownLocation: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowRightAligned
+  ];
+
   public constructor(
     private readonly pageTimeRangePreferenceService: PageTimeRangePreferenceService,
     private readonly navigationService: NavigationService,
diff --git a/projects/components/src/time-range/time-range.component.ts b/projects/components/src/time-range/time-range.component.ts
index caf457c55..f686372e0 100644
--- a/projects/components/src/time-range/time-range.component.ts
+++ b/projects/components/src/time-range/time-range.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import {
   FixedTimeRange,
@@ -12,6 +12,7 @@ import { concat, EMPTY, interval, Observable, of, timer } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { ButtonRole, ButtonSize } from '../button/button';
 import { IconSize } from '../icon/icon-size';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
 
 @Component({
@@ -21,7 +22,11 @@ import { PopoverRef } from '../popover/popover-ref';
   template: `
     <div class="time-range" *ngIf="this.timeRange$ | async as timeRange">
       <div class="time-range-selector">
-        <ht-popover (popoverOpen)="this.onPopoverOpen($event)" [closeOnNavigate]="false">
+        <ht-popover
+          (popoverOpen)="this.onPopoverOpen($event)"
+          [closeOnNavigate]="false"
+          [locationPreferences]="this.dropdownLocation"
+        >
           <ht-popover-trigger>
             <div class="trigger">
               <ht-icon class="trigger-icon" icon="${IconType.Calendar}" size="${IconSize.Medium}"></ht-icon>
@@ -67,6 +72,12 @@ import { PopoverRef } from '../popover/popover-ref';
   `
 })
 export class TimeRangeComponent {
+  @Input()
+  public dropdownLocation: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowLeftAligned,
+    PopoverRelativePositionLocation.BelowRightAligned
+  ];
+
   public timeRange$: Observable<TimeRange> = this.timeRangeService.getTimeRangeAndChanges();
 
   private popoverRef: PopoverRef | undefined;

From 7f8ab4bbab129c86dc4213e8720d3fd9fe658022 Mon Sep 17 00:00:00 2001
From: Christian <35982795+Christian862@users.noreply.github.com>
Date: Wed, 23 Mar 2022 18:24:09 -0300
Subject: [PATCH 2/4] refactor: requested changes

---
 .../src/page-time-range/page-time-range.component.ts      | 4 ++--
 .../components/src/time-range/time-range.component.ts     | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/page-time-range/page-time-range.component.ts b/projects/components/src/page-time-range/page-time-range.component.ts
index d1616fa84..d416b2f97 100644
--- a/projects/components/src/page-time-range/page-time-range.component.ts
+++ b/projects/components/src/page-time-range/page-time-range.component.ts
@@ -8,14 +8,14 @@ import { PopoverRelativePositionLocation } from '../popover/popover';
   selector: 'ht-page-time-range',
   template: `
     <ht-time-range
-      [dropdownLocation]="this.dropdownLocation"
+      [dropdownLocationPreference]="this.dropdownLocationPreference"
       (timeRangeSelected)="this.onTimeRangeSelected($event)"
     ></ht-time-range>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageTimeRangeComponent {
-  public readonly dropdownLocation: PopoverRelativePositionLocation[] = [
+  public readonly dropdownLocationPreference: PopoverRelativePositionLocation[] = [
     PopoverRelativePositionLocation.BelowRightAligned
   ];
 
diff --git a/projects/components/src/time-range/time-range.component.ts b/projects/components/src/time-range/time-range.component.ts
index f686372e0..411d45311 100644
--- a/projects/components/src/time-range/time-range.component.ts
+++ b/projects/components/src/time-range/time-range.component.ts
@@ -25,7 +25,7 @@ import { PopoverRef } from '../popover/popover-ref';
         <ht-popover
           (popoverOpen)="this.onPopoverOpen($event)"
           [closeOnNavigate]="false"
-          [locationPreferences]="this.dropdownLocation"
+          [locationPreferences]="this.dropdownLocationPreference"
         >
           <ht-popover-trigger>
             <div class="trigger">
@@ -73,9 +73,11 @@ import { PopoverRef } from '../popover/popover-ref';
 })
 export class TimeRangeComponent {
   @Input()
-  public dropdownLocation: PopoverRelativePositionLocation[] = [
+  public dropdownLocationPreference: PopoverRelativePositionLocation[] = [
     PopoverRelativePositionLocation.BelowLeftAligned,
-    PopoverRelativePositionLocation.BelowRightAligned
+    PopoverRelativePositionLocation.BelowRightAligned,
+    PopoverRelativePositionLocation.AboveLeftAligned,
+    PopoverRelativePositionLocation.AboveRightAligned
   ];
 
   public timeRange$: Observable<TimeRange> = this.timeRangeService.getTimeRangeAndChanges();

From 4b0e15ff65ea78b9762620be64eaf8d0ce517a49 Mon Sep 17 00:00:00 2001
From: Christian <35982795+Christian862@users.noreply.github.com>
Date: Tue, 22 Mar 2022 12:30:30 -0300
Subject: [PATCH 3/4] fix: overflow for data range

---
 .../page-time-range/page-time-range.component.ts  | 12 +++++++++++-
 .../src/time-range/time-range.component.ts        | 15 +++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/page-time-range/page-time-range.component.ts b/projects/components/src/page-time-range/page-time-range.component.ts
index 3a0c0c5b0..d1616fa84 100644
--- a/projects/components/src/page-time-range/page-time-range.component.ts
+++ b/projects/components/src/page-time-range/page-time-range.component.ts
@@ -2,13 +2,23 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, UrlSegment } from '@angular/router';
 import { LoggerService, NavigationService, PageTimeRangePreferenceService, TimeRange } from '@hypertrace/common';
 import { isNil } from 'lodash-es';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 
 @Component({
   selector: 'ht-page-time-range',
-  template: ` <ht-time-range (timeRangeSelected)="this.onTimeRangeSelected($event)"></ht-time-range> `,
+  template: `
+    <ht-time-range
+      [dropdownLocation]="this.dropdownLocation"
+      (timeRangeSelected)="this.onTimeRangeSelected($event)"
+    ></ht-time-range>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageTimeRangeComponent {
+  public readonly dropdownLocation: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowRightAligned
+  ];
+
   public constructor(
     private readonly pageTimeRangePreferenceService: PageTimeRangePreferenceService,
     private readonly navigationService: NavigationService,
diff --git a/projects/components/src/time-range/time-range.component.ts b/projects/components/src/time-range/time-range.component.ts
index caf457c55..f686372e0 100644
--- a/projects/components/src/time-range/time-range.component.ts
+++ b/projects/components/src/time-range/time-range.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import {
   FixedTimeRange,
@@ -12,6 +12,7 @@ import { concat, EMPTY, interval, Observable, of, timer } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { ButtonRole, ButtonSize } from '../button/button';
 import { IconSize } from '../icon/icon-size';
+import { PopoverRelativePositionLocation } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
 
 @Component({
@@ -21,7 +22,11 @@ import { PopoverRef } from '../popover/popover-ref';
   template: `
     <div class="time-range" *ngIf="this.timeRange$ | async as timeRange">
       <div class="time-range-selector">
-        <ht-popover (popoverOpen)="this.onPopoverOpen($event)" [closeOnNavigate]="false">
+        <ht-popover
+          (popoverOpen)="this.onPopoverOpen($event)"
+          [closeOnNavigate]="false"
+          [locationPreferences]="this.dropdownLocation"
+        >
           <ht-popover-trigger>
             <div class="trigger">
               <ht-icon class="trigger-icon" icon="${IconType.Calendar}" size="${IconSize.Medium}"></ht-icon>
@@ -67,6 +72,12 @@ import { PopoverRef } from '../popover/popover-ref';
   `
 })
 export class TimeRangeComponent {
+  @Input()
+  public dropdownLocation: PopoverRelativePositionLocation[] = [
+    PopoverRelativePositionLocation.BelowLeftAligned,
+    PopoverRelativePositionLocation.BelowRightAligned
+  ];
+
   public timeRange$: Observable<TimeRange> = this.timeRangeService.getTimeRangeAndChanges();
 
   private popoverRef: PopoverRef | undefined;

From c0ff17d2071ba44d847dbb5bd691c1049148e4cb Mon Sep 17 00:00:00 2001
From: Christian <35982795+Christian862@users.noreply.github.com>
Date: Wed, 23 Mar 2022 18:24:09 -0300
Subject: [PATCH 4/4] refactor: requested changes

---
 .../src/page-time-range/page-time-range.component.ts      | 4 ++--
 .../components/src/time-range/time-range.component.ts     | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/page-time-range/page-time-range.component.ts b/projects/components/src/page-time-range/page-time-range.component.ts
index d1616fa84..d416b2f97 100644
--- a/projects/components/src/page-time-range/page-time-range.component.ts
+++ b/projects/components/src/page-time-range/page-time-range.component.ts
@@ -8,14 +8,14 @@ import { PopoverRelativePositionLocation } from '../popover/popover';
   selector: 'ht-page-time-range',
   template: `
     <ht-time-range
-      [dropdownLocation]="this.dropdownLocation"
+      [dropdownLocationPreference]="this.dropdownLocationPreference"
       (timeRangeSelected)="this.onTimeRangeSelected($event)"
     ></ht-time-range>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageTimeRangeComponent {
-  public readonly dropdownLocation: PopoverRelativePositionLocation[] = [
+  public readonly dropdownLocationPreference: PopoverRelativePositionLocation[] = [
     PopoverRelativePositionLocation.BelowRightAligned
   ];
 
diff --git a/projects/components/src/time-range/time-range.component.ts b/projects/components/src/time-range/time-range.component.ts
index f686372e0..411d45311 100644
--- a/projects/components/src/time-range/time-range.component.ts
+++ b/projects/components/src/time-range/time-range.component.ts
@@ -25,7 +25,7 @@ import { PopoverRef } from '../popover/popover-ref';
         <ht-popover
           (popoverOpen)="this.onPopoverOpen($event)"
           [closeOnNavigate]="false"
-          [locationPreferences]="this.dropdownLocation"
+          [locationPreferences]="this.dropdownLocationPreference"
         >
           <ht-popover-trigger>
             <div class="trigger">
@@ -73,9 +73,11 @@ import { PopoverRef } from '../popover/popover-ref';
 })
 export class TimeRangeComponent {
   @Input()
-  public dropdownLocation: PopoverRelativePositionLocation[] = [
+  public dropdownLocationPreference: PopoverRelativePositionLocation[] = [
     PopoverRelativePositionLocation.BelowLeftAligned,
-    PopoverRelativePositionLocation.BelowRightAligned
+    PopoverRelativePositionLocation.BelowRightAligned,
+    PopoverRelativePositionLocation.AboveLeftAligned,
+    PopoverRelativePositionLocation.AboveRightAligned
   ];
 
   public timeRange$: Observable<TimeRange> = this.timeRangeService.getTimeRangeAndChanges();