From 9f192bd8bde13e437cc67d0f8e549bf7a9277678 Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 00:48:38 +0530
Subject: [PATCH 01/13] style(ui): added summary-box to consolidate +x usecases

---
 projects/components/src/public-api.ts         |  4 ++
 .../summary-box/summary-box.component.scss    | 13 ++++
 .../summary-box/summary-box.component.test.ts | 72 +++++++++++++++++++
 .../src/summary-box/summary-box.component.ts  | 55 ++++++++++++++
 .../src/summary-box/summary-box.module.ts     | 11 +++
 5 files changed, 155 insertions(+)
 create mode 100644 projects/components/src/summary-box/summary-box.component.scss
 create mode 100644 projects/components/src/summary-box/summary-box.component.test.ts
 create mode 100644 projects/components/src/summary-box/summary-box.component.ts
 create mode 100644 projects/components/src/summary-box/summary-box.module.ts

diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index 3d030055d..f2c637113 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -284,6 +284,10 @@ export * from './summary-value/summary-value.module';
 export * from './summary-values/summary-values.component';
 export * from './summary-values/summary-values.module';
 
+// Summary Box
+export * from './summary-box/summary-box.component';
+export * from './summary-box/summary-box.module';
+
 // Table
 export * from './table/controls/table-controls-api';
 export * from './table/data/table-data-source';
diff --git a/projects/components/src/summary-box/summary-box.component.scss b/projects/components/src/summary-box/summary-box.component.scss
new file mode 100644
index 000000000..2965755b5
--- /dev/null
+++ b/projects/components/src/summary-box/summary-box.component.scss
@@ -0,0 +1,13 @@
+.ht-summary-box {
+  .summary-text {
+    padding: 0 6px;
+    margin-left: 8px;
+    border-radius: 4px;
+  }
+
+  .tooltip-contents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/projects/components/src/summary-box/summary-box.component.test.ts b/projects/components/src/summary-box/summary-box.component.test.ts
new file mode 100644
index 000000000..93a93f7d2
--- /dev/null
+++ b/projects/components/src/summary-box/summary-box.component.test.ts
@@ -0,0 +1,72 @@
+import { Color } from '@hypertrace/common';
+import { TooltipDirective } from '@hypertrace/components';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockDirective } from 'ng-mocks';
+
+import { SummaryBoxComponent, SummaryBoxDisplay } from './summary-box.component';
+
+describe('Summary Box Component', () => {
+  let spectator: SpectatorHost<SummaryBoxComponent>;
+
+  const createHost = createHostFactory({
+    component: SummaryBoxComponent,
+    shallow: true,
+    declarations: [MockDirective(TooltipDirective)]
+  });
+
+  test('should not display if count is 0', () => {
+    spectator = createHost(
+      `<ht-summary-box [count]="count" [tooltip]="value" [displayStyle]="displayStyle">
+    </ht-summary-box>`,
+      {
+        hostProps: {
+          count: 0,
+          value: 'tooltip value',
+          displayStyle: SummaryBoxDisplay.Plain
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).not.toExist();
+    expect(spectator.query(TooltipDirective)).not.toExist();
+  });
+
+  test('should display if count greater than 0', () => {
+    spectator = createHost(
+      `<ht-summary-box [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle">
+    </ht-summary-box>`,
+      {
+        hostProps: {
+          count: 1,
+          value: 'tooltip value',
+          displayStyle: SummaryBoxDisplay.Plain
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).toExist();
+    expect(spectator.query('.summary-text')).toHaveText('+1');
+    expect(spectator.query(TooltipDirective)).toExist();
+  });
+
+  test('should have plain background for any background color if display style is plain', () => {
+    spectator = createHost(
+      `<ht-summary-box [count]="count" [tooltip] = "value"
+      [backgroundColor] = "background" [displayStyle] = "style">
+      </ht-summary-box>`,
+      {
+        hostProps: {
+          count: 1,
+          value: 'tooltip value',
+          style: SummaryBoxDisplay.Plain,
+          background: Color.Blue3
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).toExist();
+    expect(spectator.query(TooltipDirective)).toExist();
+    expect(spectator.query('.summary-text')).toHaveText('+1');
+    expect(spectator.component.backgroundColor).toBe(Color.White);
+  });
+});
diff --git a/projects/components/src/summary-box/summary-box.component.ts b/projects/components/src/summary-box/summary-box.component.ts
new file mode 100644
index 000000000..ed832dc36
--- /dev/null
+++ b/projects/components/src/summary-box/summary-box.component.ts
@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { Color } from '@hypertrace/common';
+
+@Component({
+  selector: 'ht-summary-box',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="ht-summary-box">
+    <span
+      class="summary-text"
+      *ngIf="this.count > 0"
+      [htTooltip]="summaryTooltip"
+      [style.color]="this.color"
+      [style.backgroundColor]="this.backgroundColor"
+      [ngClass]="this.displayStyle"
+      >{{ this.summaryText }} {{ this.suffix }}</span
+    >
+    <ng-template #summaryTooltip>
+      <div class="tooltip-contents">{{ this.tooltip }}</div>
+    </ng-template>
+  </div>`,
+  styleUrls: ['./summary-box.component.scss']
+})
+export class SummaryBoxComponent implements OnChanges {
+  @Input()
+  public count!: number;
+
+  @Input()
+  public suffix?: string = 'more';
+
+  @Input()
+  public displayStyle: SummaryBoxDisplay = SummaryBoxDisplay.Plain;
+
+  @Input()
+  public backgroundColor?: Color = Color.White;
+
+  @Input()
+  public color?: string = Color.Gray7;
+
+  @Input()
+  public tooltip!: string;
+
+  public summaryText!: string;
+
+  public ngOnChanges(): void {
+    this.summaryText = `+${this.count}`;
+    if (this.displayStyle === SummaryBoxDisplay.Plain) {
+      this.backgroundColor = Color.White;
+    }
+  }
+}
+
+export const enum SummaryBoxDisplay {
+  Plain = 'plain',
+  WithBackground = 'with-background'
+}
diff --git a/projects/components/src/summary-box/summary-box.module.ts b/projects/components/src/summary-box/summary-box.module.ts
new file mode 100644
index 000000000..22549ef15
--- /dev/null
+++ b/projects/components/src/summary-box/summary-box.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { SummaryBoxComponent } from './summary-box.component';
+
+@NgModule({
+  imports: [CommonModule, TooltipModule],
+  declarations: [SummaryBoxComponent],
+  exports: [SummaryBoxComponent]
+})
+export class SummaryBoxModule {}
\ No newline at end of file

From 374312e86c2b9490ef85346dfb19760123b9224c Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 13:37:58 +0530
Subject: [PATCH 02/13] fix(code) removed ng-template, changed initalisers

---
 .../summary-box/summary-box.component.scss    | 10 ++++-----
 .../summary-box/summary-box.component.test.ts | 20 +++++++++++++++++
 .../src/summary-box/summary-box.component.ts  | 22 ++++++++++---------
 .../src/summary-box/summary-box.module.ts     |  2 +-
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/projects/components/src/summary-box/summary-box.component.scss b/projects/components/src/summary-box/summary-box.component.scss
index 2965755b5..e11d745d9 100644
--- a/projects/components/src/summary-box/summary-box.component.scss
+++ b/projects/components/src/summary-box/summary-box.component.scss
@@ -1,13 +1,11 @@
+@import 'color-palette';
+
 .ht-summary-box {
   .summary-text {
     padding: 0 6px;
     margin-left: 8px;
     border-radius: 4px;
-  }
-
-  .tooltip-contents {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    color: #272c2e;
+    background-color: white;
   }
 }
diff --git a/projects/components/src/summary-box/summary-box.component.test.ts b/projects/components/src/summary-box/summary-box.component.test.ts
index 93a93f7d2..2e4b6b18b 100644
--- a/projects/components/src/summary-box/summary-box.component.test.ts
+++ b/projects/components/src/summary-box/summary-box.component.test.ts
@@ -69,4 +69,24 @@ describe('Summary Box Component', () => {
     expect(spectator.query('.summary-text')).toHaveText('+1');
     expect(spectator.component.backgroundColor).toBe(Color.White);
   });
+
+  test('should contain suffix if provided', () => {
+    spectator = createHost(
+      `<ht-summary-box [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle" [suffix] = "suffix">
+    </ht-summary-box>`,
+      {
+        hostProps: {
+          count: 1,
+          value: 'tooltip value',
+          displayStyle: SummaryBoxDisplay.Plain,
+          suffix: 'more'
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).toExist();
+    expect(spectator.query('.summary-text')).toHaveText('+1');
+    expect(spectator.query('.summary-text')).toHaveText('more');
+    expect(spectator.query(TooltipDirective)).toExist();
+  });
 });
diff --git a/projects/components/src/summary-box/summary-box.component.ts b/projects/components/src/summary-box/summary-box.component.ts
index ed832dc36..0b6ffa102 100644
--- a/projects/components/src/summary-box/summary-box.component.ts
+++ b/projects/components/src/summary-box/summary-box.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
 import { Color } from '@hypertrace/common';
+import { TooltipDirective } from '../public-api';
 
 @Component({
   selector: 'ht-summary-box',
@@ -8,15 +9,12 @@ import { Color } from '@hypertrace/common';
     <span
       class="summary-text"
       *ngIf="this.count > 0"
-      [htTooltip]="summaryTooltip"
+      [htTooltip]="this.tooltip"
       [style.color]="this.color"
       [style.backgroundColor]="this.backgroundColor"
       [ngClass]="this.displayStyle"
-      >{{ this.summaryText }} {{ this.suffix }}</span
+      >{{this.summaryText}}</span
     >
-    <ng-template #summaryTooltip>
-      <div class="tooltip-contents">{{ this.tooltip }}</div>
-    </ng-template>
   </div>`,
   styleUrls: ['./summary-box.component.scss']
 })
@@ -25,24 +23,28 @@ export class SummaryBoxComponent implements OnChanges {
   public count!: number;
 
   @Input()
-  public suffix?: string = 'more';
+  public suffix?: string = '';
 
   @Input()
   public displayStyle: SummaryBoxDisplay = SummaryBoxDisplay.Plain;
 
   @Input()
-  public backgroundColor?: Color = Color.White;
+  public backgroundColor?: Color;
 
   @Input()
-  public color?: string = Color.Gray7;
+  public color?: string;
 
   @Input()
-  public tooltip!: string;
+  public tooltip!: string | number | TemplateRef<TooltipDirective>;
 
   public summaryText!: string;
 
   public ngOnChanges(): void {
     this.summaryText = `+${this.count}`;
+
+    if(this.suffix !== '')
+    this.summaryText += ` ${this.suffix}`;
+
     if (this.displayStyle === SummaryBoxDisplay.Plain) {
       this.backgroundColor = Color.White;
     }
diff --git a/projects/components/src/summary-box/summary-box.module.ts b/projects/components/src/summary-box/summary-box.module.ts
index 22549ef15..dd6976bd3 100644
--- a/projects/components/src/summary-box/summary-box.module.ts
+++ b/projects/components/src/summary-box/summary-box.module.ts
@@ -8,4 +8,4 @@ import { SummaryBoxComponent } from './summary-box.component';
   declarations: [SummaryBoxComponent],
   exports: [SummaryBoxComponent]
 })
-export class SummaryBoxModule {}
\ No newline at end of file
+export class SummaryBoxModule {}

From 27346498f77e6e88e633b28a0368a65ca5783dba Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 13:56:05 +0530
Subject: [PATCH 03/13] fix(naming): refactored summary-box to x-more

---
 projects/components/src/public-api.ts         |  4 +--
 .../x-more.component.scss}                    |  2 +-
 .../x-more.component.test.ts}                 | 30 +++++++++----------
 .../x-more.component.ts}                      | 14 ++++-----
 .../x-more.module.ts}                         |  8 ++---
 5 files changed, 29 insertions(+), 29 deletions(-)
 rename projects/components/src/{summary-box/summary-box.component.scss => x-more/x-more.component.scss} (90%)
 rename projects/components/src/{summary-box/summary-box.component.test.ts => x-more/x-more.component.test.ts} (72%)
 rename projects/components/src/{summary-box/summary-box.component.ts => x-more/x-more.component.ts} (76%)
 rename projects/components/src/{summary-box/summary-box.module.ts => x-more/x-more.module.ts} (55%)

diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index f2c637113..77ebf4e85 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -285,8 +285,8 @@ export * from './summary-values/summary-values.component';
 export * from './summary-values/summary-values.module';
 
 // Summary Box
-export * from './summary-box/summary-box.component';
-export * from './summary-box/summary-box.module';
+export * from './x-more/x-more.component';
+export * from './x-more/x-more.module';
 
 // Table
 export * from './table/controls/table-controls-api';
diff --git a/projects/components/src/summary-box/summary-box.component.scss b/projects/components/src/x-more/x-more.component.scss
similarity index 90%
rename from projects/components/src/summary-box/summary-box.component.scss
rename to projects/components/src/x-more/x-more.component.scss
index e11d745d9..e95a2bb0a 100644
--- a/projects/components/src/summary-box/summary-box.component.scss
+++ b/projects/components/src/x-more/x-more.component.scss
@@ -1,6 +1,6 @@
 @import 'color-palette';
 
-.ht-summary-box {
+.ht-x-more {
   .summary-text {
     padding: 0 6px;
     margin-left: 8px;
diff --git a/projects/components/src/summary-box/summary-box.component.test.ts b/projects/components/src/x-more/x-more.component.test.ts
similarity index 72%
rename from projects/components/src/summary-box/summary-box.component.test.ts
rename to projects/components/src/x-more/x-more.component.test.ts
index 2e4b6b18b..997bbe751 100644
--- a/projects/components/src/summary-box/summary-box.component.test.ts
+++ b/projects/components/src/x-more/x-more.component.test.ts
@@ -3,26 +3,26 @@ import { TooltipDirective } from '@hypertrace/components';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
 
-import { SummaryBoxComponent, SummaryBoxDisplay } from './summary-box.component';
+import { XMoreComponent, XMoreDisplay } from './x-more.component';
 
 describe('Summary Box Component', () => {
-  let spectator: SpectatorHost<SummaryBoxComponent>;
+  let spectator: SpectatorHost<XMoreComponent>;
 
   const createHost = createHostFactory({
-    component: SummaryBoxComponent,
+    component: XMoreComponent,
     shallow: true,
     declarations: [MockDirective(TooltipDirective)]
   });
 
   test('should not display if count is 0', () => {
     spectator = createHost(
-      `<ht-summary-box [count]="count" [tooltip]="value" [displayStyle]="displayStyle">
-    </ht-summary-box>`,
+      `<ht-x-more [count]="count" [tooltip]="value" [displayStyle]="displayStyle">
+    </ht-x-more>`,
       {
         hostProps: {
           count: 0,
           value: 'tooltip value',
-          displayStyle: SummaryBoxDisplay.Plain
+          displayStyle: XMoreDisplay.Plain
         }
       }
     );
@@ -33,13 +33,13 @@ describe('Summary Box Component', () => {
 
   test('should display if count greater than 0', () => {
     spectator = createHost(
-      `<ht-summary-box [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle">
-    </ht-summary-box>`,
+      `<ht-x-more [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle">
+    </ht-x-more>`,
       {
         hostProps: {
           count: 1,
           value: 'tooltip value',
-          displayStyle: SummaryBoxDisplay.Plain
+          displayStyle: XMoreDisplay.Plain
         }
       }
     );
@@ -51,14 +51,14 @@ describe('Summary Box Component', () => {
 
   test('should have plain background for any background color if display style is plain', () => {
     spectator = createHost(
-      `<ht-summary-box [count]="count" [tooltip] = "value"
+      `<ht-x-more [count]="count" [tooltip] = "value"
       [backgroundColor] = "background" [displayStyle] = "style">
-      </ht-summary-box>`,
+      </ht-x-more>`,
       {
         hostProps: {
           count: 1,
           value: 'tooltip value',
-          style: SummaryBoxDisplay.Plain,
+          style: XMoreDisplay.Plain,
           background: Color.Blue3
         }
       }
@@ -72,13 +72,13 @@ describe('Summary Box Component', () => {
 
   test('should contain suffix if provided', () => {
     spectator = createHost(
-      `<ht-summary-box [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle" [suffix] = "suffix">
-    </ht-summary-box>`,
+      `<ht-x-more [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle" [suffix] = "suffix">
+    </ht-x-more>`,
       {
         hostProps: {
           count: 1,
           value: 'tooltip value',
-          displayStyle: SummaryBoxDisplay.Plain,
+          displayStyle: XMoreDisplay.Plain,
           suffix: 'more'
         }
       }
diff --git a/projects/components/src/summary-box/summary-box.component.ts b/projects/components/src/x-more/x-more.component.ts
similarity index 76%
rename from projects/components/src/summary-box/summary-box.component.ts
rename to projects/components/src/x-more/x-more.component.ts
index 0b6ffa102..bb08c8ee0 100644
--- a/projects/components/src/summary-box/summary-box.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -3,9 +3,9 @@ import { Color } from '@hypertrace/common';
 import { TooltipDirective } from '../public-api';
 
 @Component({
-  selector: 'ht-summary-box',
+  selector: 'ht-x-more',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ht-summary-box">
+  template: `<div class="ht-x-more">
     <span
       class="summary-text"
       *ngIf="this.count > 0"
@@ -16,9 +16,9 @@ import { TooltipDirective } from '../public-api';
       >{{this.summaryText}}</span
     >
   </div>`,
-  styleUrls: ['./summary-box.component.scss']
+  styleUrls: ['./x-more.component.scss']
 })
-export class SummaryBoxComponent implements OnChanges {
+export class XMoreComponent implements OnChanges {
   @Input()
   public count!: number;
 
@@ -26,7 +26,7 @@ export class SummaryBoxComponent implements OnChanges {
   public suffix?: string = '';
 
   @Input()
-  public displayStyle: SummaryBoxDisplay = SummaryBoxDisplay.Plain;
+  public displayStyle: XMoreDisplay = XMoreDisplay.Plain;
 
   @Input()
   public backgroundColor?: Color;
@@ -45,13 +45,13 @@ export class SummaryBoxComponent implements OnChanges {
     if(this.suffix !== '')
     this.summaryText += ` ${this.suffix}`;
 
-    if (this.displayStyle === SummaryBoxDisplay.Plain) {
+    if (this.displayStyle === XMoreDisplay.Plain) {
       this.backgroundColor = Color.White;
     }
   }
 }
 
-export const enum SummaryBoxDisplay {
+export const enum XMoreDisplay {
   Plain = 'plain',
   WithBackground = 'with-background'
 }
diff --git a/projects/components/src/summary-box/summary-box.module.ts b/projects/components/src/x-more/x-more.module.ts
similarity index 55%
rename from projects/components/src/summary-box/summary-box.module.ts
rename to projects/components/src/x-more/x-more.module.ts
index dd6976bd3..71eb69033 100644
--- a/projects/components/src/summary-box/summary-box.module.ts
+++ b/projects/components/src/x-more/x-more.module.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TooltipModule } from '../tooltip/tooltip.module';
-import { SummaryBoxComponent } from './summary-box.component';
+import { XMoreComponent } from './x-more.component';
 
 @NgModule({
   imports: [CommonModule, TooltipModule],
-  declarations: [SummaryBoxComponent],
-  exports: [SummaryBoxComponent]
+  declarations: [XMoreComponent],
+  exports: [XMoreComponent]
 })
-export class SummaryBoxModule {}
+export class XMoreModule {}

From 2eb794f4593286d1a00ac199742b2ee3ed1adc4e Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 14:00:01 +0530
Subject: [PATCH 04/13] fix(code): changed comment

---
 projects/components/src/public-api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index 77ebf4e85..b1811f15a 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -284,7 +284,7 @@ export * from './summary-value/summary-value.module';
 export * from './summary-values/summary-values.component';
 export * from './summary-values/summary-values.module';
 
-// Summary Box
+// X More
 export * from './x-more/x-more.component';
 export * from './x-more/x-more.module';
 

From c62df12313c495178cf03396c9524c29a7cc487e Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 14:11:02 +0530
Subject: [PATCH 05/13] fix(code): fixed linting

---
 projects/components/src/x-more/x-more.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index bb08c8ee0..3348cfe12 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -42,8 +42,9 @@ export class XMoreComponent implements OnChanges {
   public ngOnChanges(): void {
     this.summaryText = `+${this.count}`;
 
-    if(this.suffix !== '')
-    this.summaryText += ` ${this.suffix}`;
+    if(this.suffix !== ''){
+      this.summaryText += ` ${this.suffix}`;
+    }
 
     if (this.displayStyle === XMoreDisplay.Plain) {
       this.backgroundColor = Color.White;

From 02146207b1037505fa22c59995db7675b1f3e328 Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 14:17:59 +0530
Subject: [PATCH 06/13] fix(code): more linting issues

---
 projects/components/src/x-more/x-more.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index 3348cfe12..c02441f7b 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -13,7 +13,7 @@ import { TooltipDirective } from '../public-api';
       [style.color]="this.color"
       [style.backgroundColor]="this.backgroundColor"
       [ngClass]="this.displayStyle"
-      >{{this.summaryText}}</span
+      >{{ this.summaryText }}</span
     >
   </div>`,
   styleUrls: ['./x-more.component.scss']
@@ -42,7 +42,7 @@ export class XMoreComponent implements OnChanges {
   public ngOnChanges(): void {
     this.summaryText = `+${this.count}`;
 
-    if(this.suffix !== ''){
+    if (this.suffix !== '') {
       this.summaryText += ` ${this.suffix}`;
     }
 

From 74ce0d8e8ed4d71b31e5e538faef873eec6bf0d2 Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 16:45:54 +0530
Subject: [PATCH 07/13] feat(ui): refactored displayStyles to be specific

---
 .../src/x-more/x-more.component.scss          | 10 +++++++-
 .../src/x-more/x-more.component.test.ts       | 21 ----------------
 .../components/src/x-more/x-more.component.ts | 25 +++----------------
 3 files changed, 13 insertions(+), 43 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.scss b/projects/components/src/x-more/x-more.component.scss
index e95a2bb0a..b7a71984b 100644
--- a/projects/components/src/x-more/x-more.component.scss
+++ b/projects/components/src/x-more/x-more.component.scss
@@ -5,7 +5,15 @@
     padding: 0 6px;
     margin-left: 8px;
     border-radius: 4px;
-    color: #272c2e;
+  }
+
+  .plain {
+    color: $gray-7;
+    margin-left: 0px;
     background-color: white;
   }
+
+  .gray {
+    background-color: $gray-2;
+  }
 }
diff --git a/projects/components/src/x-more/x-more.component.test.ts b/projects/components/src/x-more/x-more.component.test.ts
index 997bbe751..98faa9677 100644
--- a/projects/components/src/x-more/x-more.component.test.ts
+++ b/projects/components/src/x-more/x-more.component.test.ts
@@ -49,27 +49,6 @@ describe('Summary Box Component', () => {
     expect(spectator.query(TooltipDirective)).toExist();
   });
 
-  test('should have plain background for any background color if display style is plain', () => {
-    spectator = createHost(
-      `<ht-x-more [count]="count" [tooltip] = "value"
-      [backgroundColor] = "background" [displayStyle] = "style">
-      </ht-x-more>`,
-      {
-        hostProps: {
-          count: 1,
-          value: 'tooltip value',
-          style: XMoreDisplay.Plain,
-          background: Color.Blue3
-        }
-      }
-    );
-
-    expect(spectator.query('.summary-text')).toExist();
-    expect(spectator.query(TooltipDirective)).toExist();
-    expect(spectator.query('.summary-text')).toHaveText('+1');
-    expect(spectator.component.backgroundColor).toBe(Color.White);
-  });
-
   test('should contain suffix if provided', () => {
     spectator = createHost(
       `<ht-x-more [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle" [suffix] = "suffix">
diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index c02441f7b..31bc29f29 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -1,20 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
-import { Color } from '@hypertrace/common';
 import { TooltipDirective } from '../public-api';
 
 @Component({
   selector: 'ht-x-more',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div class="ht-x-more">
-    <span
-      class="summary-text"
-      *ngIf="this.count > 0"
-      [htTooltip]="this.tooltip"
-      [style.color]="this.color"
-      [style.backgroundColor]="this.backgroundColor"
-      [ngClass]="this.displayStyle"
-      >{{ this.summaryText }}</span
-    >
+    <span class="summary-text" *ngIf="this.count > 0" [htTooltip]="this.tooltip" [ngClass]="this.displayStyle">{{
+      this.summaryText
+    }}</span>
   </div>`,
   styleUrls: ['./x-more.component.scss']
 })
@@ -28,12 +21,6 @@ export class XMoreComponent implements OnChanges {
   @Input()
   public displayStyle: XMoreDisplay = XMoreDisplay.Plain;
 
-  @Input()
-  public backgroundColor?: Color;
-
-  @Input()
-  public color?: string;
-
   @Input()
   public tooltip!: string | number | TemplateRef<TooltipDirective>;
 
@@ -45,14 +32,10 @@ export class XMoreComponent implements OnChanges {
     if (this.suffix !== '') {
       this.summaryText += ` ${this.suffix}`;
     }
-
-    if (this.displayStyle === XMoreDisplay.Plain) {
-      this.backgroundColor = Color.White;
-    }
   }
 }
 
 export const enum XMoreDisplay {
   Plain = 'plain',
-  WithBackground = 'with-background'
+  Gray = 'gray'
 }

From 9e2a4fc1b024e67c3520a20d58066082a37fdc7c Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Thu, 3 Feb 2022 16:52:42 +0530
Subject: [PATCH 08/13] fix(error): fixed error in test file

---
 projects/components/src/x-more/x-more.component.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.test.ts b/projects/components/src/x-more/x-more.component.test.ts
index 98faa9677..e0487c8d9 100644
--- a/projects/components/src/x-more/x-more.component.test.ts
+++ b/projects/components/src/x-more/x-more.component.test.ts
@@ -1,11 +1,10 @@
-import { Color } from '@hypertrace/common';
 import { TooltipDirective } from '@hypertrace/components';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
 
 import { XMoreComponent, XMoreDisplay } from './x-more.component';
 
-describe('Summary Box Component', () => {
+describe('X-More Component', () => {
   let spectator: SpectatorHost<XMoreComponent>;
 
   const createHost = createHostFactory({

From ee4394f1b12a43d5e629146fbf2f8f25054ce10c Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Mon, 7 Feb 2022 15:52:54 +0530
Subject: [PATCH 09/13] fix(ui): implemented lifecycle hooks

---
 .../components/src/x-more/x-more.component.ts | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index 31bc29f29..6a3246799 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
-import { TooltipDirective } from '../public-api';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, TemplateRef } from '@angular/core';
+import { TypedSimpleChanges } from '@hypertrace/common';
 
 @Component({
   selector: 'ht-x-more',
@@ -11,7 +11,8 @@ import { TooltipDirective } from '../public-api';
   </div>`,
   styleUrls: ['./x-more.component.scss']
 })
-export class XMoreComponent implements OnChanges {
+export class XMoreComponent implements OnChanges, OnInit {
+  
   @Input()
   public count!: number;
 
@@ -22,11 +23,22 @@ export class XMoreComponent implements OnChanges {
   public displayStyle: XMoreDisplay = XMoreDisplay.Plain;
 
   @Input()
-  public tooltip!: string | number | TemplateRef<TooltipDirective>;
+  public tooltip!: string | number | TemplateRef<unknown>;
 
   public summaryText!: string;
 
-  public ngOnChanges(): void {
+  public ngOnChanges(changes: TypedSimpleChanges<this>): void {
+    if(changes.count || changes.suffix){
+      this.summaryText = `+${this.count}`;
+
+      if (this.suffix !== '') {
+        this.summaryText += ` ${this.suffix}`;
+      }
+    }
+  }
+
+  ngOnInit(): void {
+
     this.summaryText = `+${this.count}`;
 
     if (this.suffix !== '') {

From 1a742b41cb33926a723c9660a313ee277f33b47f Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Mon, 7 Feb 2022 15:57:03 +0530
Subject: [PATCH 10/13] fix(code): fixed linting

---
 projects/components/src/x-more/x-more.component.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index 6a3246799..c9296b5bf 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -12,7 +12,6 @@ import { TypedSimpleChanges } from '@hypertrace/common';
   styleUrls: ['./x-more.component.scss']
 })
 export class XMoreComponent implements OnChanges, OnInit {
-  
   @Input()
   public count!: number;
 
@@ -28,7 +27,7 @@ export class XMoreComponent implements OnChanges, OnInit {
   public summaryText!: string;
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
-    if(changes.count || changes.suffix){
+    if (changes.count || changes.suffix) {
       this.summaryText = `+${this.count}`;
 
       if (this.suffix !== '') {
@@ -38,7 +37,6 @@ export class XMoreComponent implements OnChanges, OnInit {
   }
 
   ngOnInit(): void {
-
     this.summaryText = `+${this.count}`;
 
     if (this.suffix !== '') {

From 139e447e7a27a1034a85b93021233f289d9b4a1e Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Mon, 7 Feb 2022 16:15:52 +0530
Subject: [PATCH 11/13] fix(code): linting

---
 projects/components/src/x-more/x-more.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index c9296b5bf..d99efa050 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -36,7 +36,7 @@ export class XMoreComponent implements OnChanges, OnInit {
     }
   }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this.summaryText = `+${this.count}`;
 
     if (this.suffix !== '') {

From 8efda128432bbfc197cd4f1736d7912f445bab6f Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Tue, 8 Feb 2022 15:05:36 +0530
Subject: [PATCH 12/13] Update
 projects/components/src/x-more/x-more.component.ts

Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com>
---
 projects/components/src/x-more/x-more.component.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index d99efa050..df78cb187 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -28,11 +28,7 @@ export class XMoreComponent implements OnChanges, OnInit {
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.count || changes.suffix) {
-      this.summaryText = `+${this.count}`;
-
-      if (this.suffix !== '') {
-        this.summaryText += ` ${this.suffix}`;
-      }
+      this.summaryText = this.suffix !== undefined && this.suffix !== '' ? `+${this.count} ${this.suffix}` : `+${this.count}`
     }
   }
 

From 2ba86e8d0343c7321de824ae9a21d8925d968702 Mon Sep 17 00:00:00 2001
From: Shreyansh Sahu <shreyansh.sahu@traceable.ai>
Date: Tue, 8 Feb 2022 15:20:26 +0530
Subject: [PATCH 13/13] fix(code): deleted unrequired callback

---
 .../components/src/x-more/x-more.component.ts     | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/projects/components/src/x-more/x-more.component.ts b/projects/components/src/x-more/x-more.component.ts
index df78cb187..6aa8a0f5f 100644
--- a/projects/components/src/x-more/x-more.component.ts
+++ b/projects/components/src/x-more/x-more.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
 import { TypedSimpleChanges } from '@hypertrace/common';
 
 @Component({
@@ -11,7 +11,7 @@ import { TypedSimpleChanges } from '@hypertrace/common';
   </div>`,
   styleUrls: ['./x-more.component.scss']
 })
-export class XMoreComponent implements OnChanges, OnInit {
+export class XMoreComponent implements OnChanges {
   @Input()
   public count!: number;
 
@@ -28,15 +28,8 @@ export class XMoreComponent implements OnChanges, OnInit {
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.count || changes.suffix) {
-      this.summaryText = this.suffix !== undefined && this.suffix !== '' ? `+${this.count} ${this.suffix}` : `+${this.count}`
-    }
-  }
-
-  public ngOnInit(): void {
-    this.summaryText = `+${this.count}`;
-
-    if (this.suffix !== '') {
-      this.summaryText += ` ${this.suffix}`;
+      this.summaryText =
+        this.suffix !== undefined && this.suffix !== '' ? `+${this.count} ${this.suffix}` : `+${this.count}`;
     }
   }
 }