From 8bf3da538bb441a7cdd3e758d404a67472e24478 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 13 Jul 2021 18:10:47 +0530
Subject: [PATCH 01/10] fix: donut chart fixes

---
 .../components/donut/donut-builder.service.ts | 21 +++++++++++++++----
 .../components/donut/donut.component.scss     |  4 +---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/projects/observability/src/shared/components/donut/donut-builder.service.ts b/projects/observability/src/shared/components/donut/donut-builder.service.ts
index 922cd5eb6..f0d4cd26d 100644
--- a/projects/observability/src/shared/components/donut/donut-builder.service.ts
+++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts
@@ -39,6 +39,9 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   private static readonly DONUT_ARC_CLASS: string = 'donut-arc';
 
   private static readonly DONUT_PADDING_PX: number = 10;
+  private static readonly MAX_DIAMETER_FOR_DONUT: number = 320;
+  private static readonly MAX_FONT_SIZE_FOR_TITLE: number = 15;
+  private static readonly MAX_FONT_SIZE_FOR_VALUE: number = 64;
 
   public constructor(
     d3: D3UtilService,
@@ -69,11 +72,19 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`);
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`)
+      .style(
+        'font-size',
+        Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE)
+      );
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`);
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`)
+      .style(
+        'font-size',
+        Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE)
+      );
   }
 
   protected drawVisualization(
@@ -127,12 +138,14 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions {
     let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight);
 
-    diameter -= DonutBuilderService.DONUT_PADDING_PX;
-
     // Reduce visualization area to diameter
     calculatedDimensions.visualizationWidth = diameter;
     calculatedDimensions.visualizationHeight = diameter;
 
+    diameter -= DonutBuilderService.DONUT_PADDING_PX;
+    diameter =
+      diameter > DonutBuilderService.MAX_DIAMETER_FOR_DONUT ? DonutBuilderService.MAX_DIAMETER_FOR_DONUT : diameter;
+
     return {
       ...calculatedDimensions,
       donutOuterRadius: diameter / 2,
diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss
index ea3aa6b3f..01b3be92f 100644
--- a/projects/observability/src/shared/components/donut/donut.component.scss
+++ b/projects/observability/src/shared/components/donut/donut.component.scss
@@ -9,12 +9,10 @@
 
   .donut-svg {
     .donut-value-title {
-      font-size: 15px;
       dominant-baseline: hanging;
     }
 
     .donut-value {
-      font-size: 64px;
       dominant-baseline: hanging;
     }
   }
@@ -22,7 +20,7 @@
 
 .donut-arc {
   stroke: white;
-  stroke-width: 2px;
+  stroke-width: 0.5px;
 }
 
 .donut-value-title {

From 5599c6aa5eb0e254313d4001b3333bbd8feca35f Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 13 Jul 2021 18:11:33 +0530
Subject: [PATCH 02/10] Revert "fix: donut chart fixes"

This reverts commit 8bf3da538bb441a7cdd3e758d404a67472e24478.
---
 .../components/donut/donut-builder.service.ts | 21 ++++---------------
 .../components/donut/donut.component.scss     |  4 +++-
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/projects/observability/src/shared/components/donut/donut-builder.service.ts b/projects/observability/src/shared/components/donut/donut-builder.service.ts
index f0d4cd26d..922cd5eb6 100644
--- a/projects/observability/src/shared/components/donut/donut-builder.service.ts
+++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts
@@ -39,9 +39,6 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   private static readonly DONUT_ARC_CLASS: string = 'donut-arc';
 
   private static readonly DONUT_PADDING_PX: number = 10;
-  private static readonly MAX_DIAMETER_FOR_DONUT: number = 320;
-  private static readonly MAX_FONT_SIZE_FOR_TITLE: number = 15;
-  private static readonly MAX_FONT_SIZE_FOR_VALUE: number = 64;
 
   public constructor(
     d3: D3UtilService,
@@ -72,19 +69,11 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`)
-      .style(
-        'font-size',
-        Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE)
-      );
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`);
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`)
-      .style(
-        'font-size',
-        Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE)
-      );
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`);
   }
 
   protected drawVisualization(
@@ -138,14 +127,12 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions {
     let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight);
 
+    diameter -= DonutBuilderService.DONUT_PADDING_PX;
+
     // Reduce visualization area to diameter
     calculatedDimensions.visualizationWidth = diameter;
     calculatedDimensions.visualizationHeight = diameter;
 
-    diameter -= DonutBuilderService.DONUT_PADDING_PX;
-    diameter =
-      diameter > DonutBuilderService.MAX_DIAMETER_FOR_DONUT ? DonutBuilderService.MAX_DIAMETER_FOR_DONUT : diameter;
-
     return {
       ...calculatedDimensions,
       donutOuterRadius: diameter / 2,
diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss
index 01b3be92f..ea3aa6b3f 100644
--- a/projects/observability/src/shared/components/donut/donut.component.scss
+++ b/projects/observability/src/shared/components/donut/donut.component.scss
@@ -9,10 +9,12 @@
 
   .donut-svg {
     .donut-value-title {
+      font-size: 15px;
       dominant-baseline: hanging;
     }
 
     .donut-value {
+      font-size: 64px;
       dominant-baseline: hanging;
     }
   }
@@ -20,7 +22,7 @@
 
 .donut-arc {
   stroke: white;
-  stroke-width: 0.5px;
+  stroke-width: 2px;
 }
 
 .donut-value-title {

From e67e48a4801ec043ce42bf71ee8bfca2a81e22f2 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Mon, 23 Aug 2021 21:23:16 +0530
Subject: [PATCH 03/10] feat: tag search or filter in explorer

---
 .../builder/types/abstract-filter-builder.ts  |  6 ++-
 .../src/list-view/list-view.component.scss    | 30 +++++++++++++--
 .../src/list-view/list-view.component.test.ts |  5 ++-
 .../src/list-view/list-view.component.ts      | 38 +++++++++++++++++++
 .../src/list-view/list-view.module.ts         |  4 +-
 projects/components/src/public-api.ts         |  4 +-
 .../tags/span-tags-detail.component.ts        |  8 +++-
 7 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts b/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
index 7a1572a44..f15e191ad 100644
--- a/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
+++ b/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
@@ -36,6 +36,10 @@ export abstract class AbstractFilterBuilder<TValue> {
   }
 
   protected buildUrlFilterString(attribute: FilterAttribute, operator: FilterOperator, value: TValue): string {
-    return encodeURIComponent(`${attribute.name}${toUrlFilterOperator(operator)}${this.buildValueString(value)}`);
+    return this.buildEncodedUrlFilterString(attribute.name, operator, value);
+  }
+
+  public buildEncodedUrlFilterString(attributeName: string, operator: FilterOperator, value: TValue): string {
+    return encodeURIComponent(`${attributeName}${toUrlFilterOperator(operator)}${this.buildValueString(value)}`);
   }
 }
diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss
index e52468408..621d52e04 100644
--- a/projects/components/src/list-view/list-view.component.scss
+++ b/projects/components/src/list-view/list-view.component.scss
@@ -1,15 +1,15 @@
-@import 'font';
-@import 'color-palette';
+@import 'mixins';
 
 $key-width: 40%;
-$value-width: 60%;
+$value-width: auto;
+$action-item-width: 32px;
 $horizontal-offset: 12px;
 
 @mixin grid-view {
   width: 100%;
   padding: 8px 0;
   display: grid;
-  grid-template-columns: $key-width $value-width;
+  grid-template-columns: $key-width $value-width $action-item-width;
   align-content: center;
 }
 
@@ -56,6 +56,28 @@ $horizontal-offset: 12px;
     .key {
       font-weight: 500;
     }
+
+    .action-item {
+      display: none;
+      align-self: center;
+
+      .attribute-search {
+        @include center-contents();
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid $gray-5;
+
+        &:hover {
+          @include link-hover();
+          border: 1px solid $blue-4;
+        }
+      }
+    }
+
+    &:hover .action-item {
+      display: contents;
+    }
   }
 
   .data-row:nth-child(odd) {
diff --git a/projects/components/src/list-view/list-view.component.test.ts b/projects/components/src/list-view/list-view.component.test.ts
index f4343f829..8678b0755 100644
--- a/projects/components/src/list-view/list-view.component.test.ts
+++ b/projects/components/src/list-view/list-view.component.test.ts
@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavigationService } from '@hypertrace/common';
+import { mockProvider } from '@ngneat/spectator/jest';
 import { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view.component';
 
 describe('List View Component', () => {
@@ -32,7 +34,8 @@ describe('List View Component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestHostComponent, ListViewComponent],
-      imports: [CommonModule]
+      imports: [CommonModule],
+      providers: [mockProvider(NavigationService)]
     });
 
     fixture = TestBed.createComponent(TestHostComponent);
diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index a25c37bca..6e3e1f280 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -1,4 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconType } from '@hypertrace/assets-library';
+import { NavigationParamsType, NavigationService } from '@hypertrace/common';
+import { StringMapFilterBuilder } from '../filtering/filter/builder/types/string-map-filter-builder';
+import { FilterOperator } from '../filtering/filter/filter-operators';
+import { IconSize } from '../icon/icon-size';
 
 @Component({
   selector: 'ht-list-view',
@@ -21,6 +26,16 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
         <div class="value">
           <span>{{ record.value }}</span>
         </div>
+        <div *ngIf="this.actionType" class="action-item">
+          <ht-icon
+            *ngIf="this.actionType === '${ListViewActionType.AttributeSearch}'"
+            class="attribute-search icon"
+            icon="${IconType.ChevronRight}"
+            size="${IconSize.Small}"
+            htTooltip="Search in Explorer"
+            (click)="this.searchAttributes(record.key, record.value)"
+          ></ht-icon>
+        </div>
       </div>
     </div>
   `
@@ -31,6 +46,25 @@ export class ListViewComponent {
 
   @Input()
   public records?: ListViewRecord[];
+
+  @Input()
+  public actionType?: ListViewActionType;
+
+  private readonly scopeQueryParam: string = 'endpoint-traces';
+  private readonly filterBuilder: StringMapFilterBuilder = new StringMapFilterBuilder();
+
+  public constructor(private readonly navigationService: NavigationService) {}
+
+  public searchAttributes(key: string, value: string): void {
+    this.navigationService.navigate({
+      navType: NavigationParamsType.InApp,
+      path: '/explorer',
+      queryParams: {
+        scope: this.scopeQueryParam,
+        filter: this.filterBuilder.buildEncodedUrlFilterString('tags', FilterOperator.ContainsKeyValue, [key, value])
+      }
+    });
+  }
 }
 
 export interface ListViewHeader {
@@ -42,3 +76,7 @@ export interface ListViewRecord {
   key: string;
   value: string | number;
 }
+
+export const enum ListViewActionType {
+  AttributeSearch = 'attribute-search'
+}
diff --git a/projects/components/src/list-view/list-view.module.ts b/projects/components/src/list-view/list-view.module.ts
index 60e655c20..c6e7e9d07 100644
--- a/projects/components/src/list-view/list-view.module.ts
+++ b/projects/components/src/list-view/list-view.module.ts
@@ -1,10 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({
   declarations: [ListViewComponent],
   exports: [ListViewComponent],
-  imports: [CommonModule]
+  imports: [CommonModule, IconModule, TooltipModule]
 })
 export class ListViewModule {}
diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index 8bbf6d651..a8bd27c84 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -167,8 +167,8 @@ export * from './link/link.component';
 export * from './link/link.module';
 
 // List View
-export { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view/list-view.component';
-export { ListViewModule } from './list-view/list-view.module';
+export * from './list-view/list-view.component';
+export * from './list-view/list-view.module';
 
 // Load Async
 export { LoadAsyncDirective } from './load-async/load-async.directive';
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/tags/span-tags-detail.component.ts
index 3d42eaa2b..34f1ff6d4 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/tags/span-tags-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Dictionary, TypedSimpleChanges } from '@hypertrace/common';
-import { ListViewRecord } from '@hypertrace/components';
+import { ListViewActionType, ListViewRecord } from '@hypertrace/components';
 import { isNil } from 'lodash-es';
 import { EMPTY, Observable, of } from 'rxjs';
 
@@ -11,7 +11,11 @@ import { EMPTY, Observable, of } from 'rxjs';
   template: `
     <div class="tags-details">
       <ng-container *htLoadAsync="this.tagRecords$ as tagRecords">
-        <ht-list-view [records]="tagRecords" data-sensitive-pii></ht-list-view>
+        <ht-list-view
+          [records]="tagRecords"
+          actionType="${ListViewActionType.AttributeSearch}"
+          data-sensitive-pii
+        ></ht-list-view>
       </ng-container>
     </div>
   `

From 3487f871e74580eb84667f452bbefa0ab20c6ca5 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Mon, 30 Aug 2021 15:26:18 +0530
Subject: [PATCH 04/10] fix: using template and existing filter link

---
 .../builder/types/abstract-filter-builder.ts  |  6 +--
 .../src/list-view/list-view.component.scss    | 21 ++--------
 .../src/list-view/list-view.component.ts      | 42 ++++---------------
 .../src/list-view/list-view.module.ts         |  4 +-
 .../tags/span-tags-detail.component.ts        | 29 +++++++++----
 .../tags/span-tags-detail.module.ts           |  5 ++-
 6 files changed, 38 insertions(+), 69 deletions(-)

diff --git a/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts b/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
index f15e191ad..7a1572a44 100644
--- a/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
+++ b/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
@@ -36,10 +36,6 @@ export abstract class AbstractFilterBuilder<TValue> {
   }
 
   protected buildUrlFilterString(attribute: FilterAttribute, operator: FilterOperator, value: TValue): string {
-    return this.buildEncodedUrlFilterString(attribute.name, operator, value);
-  }
-
-  public buildEncodedUrlFilterString(attributeName: string, operator: FilterOperator, value: TValue): string {
-    return encodeURIComponent(`${attributeName}${toUrlFilterOperator(operator)}${this.buildValueString(value)}`);
+    return encodeURIComponent(`${attribute.name}${toUrlFilterOperator(operator)}${this.buildValueString(value)}`);
   }
 }
diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss
index 621d52e04..10941f1e4 100644
--- a/projects/components/src/list-view/list-view.component.scss
+++ b/projects/components/src/list-view/list-view.component.scss
@@ -2,14 +2,14 @@
 
 $key-width: 40%;
 $value-width: auto;
-$action-item-width: 32px;
+$action-width: 32px;
 $horizontal-offset: 12px;
 
 @mixin grid-view {
   width: 100%;
   padding: 8px 0;
   display: grid;
-  grid-template-columns: $key-width $value-width $action-item-width;
+  grid-template-columns: $key-width $value-width $action-width;
   align-content: center;
 }
 
@@ -57,25 +57,12 @@ $horizontal-offset: 12px;
       font-weight: 500;
     }
 
-    .action-item {
+    .action {
       display: none;
       align-self: center;
-
-      .attribute-search {
-        @include center-contents();
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        border: 1px solid $gray-5;
-
-        &:hover {
-          @include link-hover();
-          border: 1px solid $blue-4;
-        }
-      }
     }
 
-    &:hover .action-item {
+    &:hover .action {
       display: contents;
     }
   }
diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index 6e3e1f280..0709bd8d9 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -1,10 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IconType } from '@hypertrace/assets-library';
-import { NavigationParamsType, NavigationService } from '@hypertrace/common';
-import { StringMapFilterBuilder } from '../filtering/filter/builder/types/string-map-filter-builder';
-import { FilterOperator } from '../filtering/filter/filter-operators';
-import { IconSize } from '../icon/icon-size';
-
+import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { Dictionary } from '@hypertrace/common';
 @Component({
   selector: 'ht-list-view',
   styleUrls: ['./list-view.component.scss'],
@@ -26,15 +21,8 @@ import { IconSize } from '../icon/icon-size';
         <div class="value">
           <span>{{ record.value }}</span>
         </div>
-        <div *ngIf="this.actionType" class="action-item">
-          <ht-icon
-            *ngIf="this.actionType === '${ListViewActionType.AttributeSearch}'"
-            class="attribute-search icon"
-            icon="${IconType.ChevronRight}"
-            size="${IconSize.Small}"
-            htTooltip="Search in Explorer"
-            (click)="this.searchAttributes(record.key, record.value)"
-          ></ht-icon>
+        <div *ngIf="this.action" class="action">
+          <ng-container *ngTemplateOutlet="this.action; context: this.getContext(record)"></ng-container>
         </div>
       </div>
     </div>
@@ -48,22 +36,10 @@ export class ListViewComponent {
   public records?: ListViewRecord[];
 
   @Input()
-  public actionType?: ListViewActionType;
-
-  private readonly scopeQueryParam: string = 'endpoint-traces';
-  private readonly filterBuilder: StringMapFilterBuilder = new StringMapFilterBuilder();
-
-  public constructor(private readonly navigationService: NavigationService) {}
+  public action?: TemplateRef<unknown>;
 
-  public searchAttributes(key: string, value: string): void {
-    this.navigationService.navigate({
-      navType: NavigationParamsType.InApp,
-      path: '/explorer',
-      queryParams: {
-        scope: this.scopeQueryParam,
-        filter: this.filterBuilder.buildEncodedUrlFilterString('tags', FilterOperator.ContainsKeyValue, [key, value])
-      }
-    });
+  public getContext(record: ListViewRecord): Dictionary<ListViewRecord> {
+    return { record: record };
   }
 }
 
@@ -76,7 +52,3 @@ export interface ListViewRecord {
   key: string;
   value: string | number;
 }
-
-export const enum ListViewActionType {
-  AttributeSearch = 'attribute-search'
-}
diff --git a/projects/components/src/list-view/list-view.module.ts b/projects/components/src/list-view/list-view.module.ts
index c6e7e9d07..60e655c20 100644
--- a/projects/components/src/list-view/list-view.module.ts
+++ b/projects/components/src/list-view/list-view.module.ts
@@ -1,12 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { IconModule } from '../icon/icon.module';
-import { TooltipModule } from '../tooltip/tooltip.module';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({
   declarations: [ListViewComponent],
   exports: [ListViewComponent],
-  imports: [CommonModule, IconModule, TooltipModule]
+  imports: [CommonModule]
 })
 export class ListViewModule {}
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
index 34f1ff6d4..2f0e36b4e 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
-import { Dictionary, TypedSimpleChanges } from '@hypertrace/common';
-import { ListViewActionType, ListViewRecord } from '@hypertrace/components';
+import { Dictionary, NavigationParams, TypedSimpleChanges } from '@hypertrace/common';
+import { FilterOperator, ListViewRecord } from '@hypertrace/components';
 import { isNil } from 'lodash-es';
 import { EMPTY, Observable, of } from 'rxjs';
+import { ExplorerService } from '../../../../pages/explorer/explorer-service';
+import { ScopeQueryParam } from '../../../../pages/explorer/explorer.component';
 
 @Component({
   selector: 'ht-span-tags-detail',
@@ -11,11 +13,16 @@ import { EMPTY, Observable, of } from 'rxjs';
   template: `
     <div class="tags-details">
       <ng-container *htLoadAsync="this.tagRecords$ as tagRecords">
-        <ht-list-view
-          [records]="tagRecords"
-          actionType="${ListViewActionType.AttributeSearch}"
-          data-sensitive-pii
-        ></ht-list-view>
+        <ht-list-view [records]="tagRecords" [action]="tagAction" data-sensitive-pii></ht-list-view>
+        <ng-template #tagAction let-tag="record">
+          <ht-explore-filter-link
+            *ngIf="this.getExploreNavigationParams(tag) | async as exploreNavigationParams"
+            class="explore-filter"
+            [paramsOrUrl]="exploreNavigationParams"
+            htTooltip="See traces in Explorer"
+          >
+          </ht-explore-filter-link
+        ></ng-template>
       </ng-container>
     </div>
   `
@@ -26,12 +33,20 @@ export class SpanTagsDetailComponent implements OnChanges {
 
   public tagRecords$?: Observable<ListViewRecord[]>;
 
+  public constructor(private readonly explorerService: ExplorerService) {}
+
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.tags && this.tags) {
       this.buildTagRecords();
     }
   }
 
+  public getExploreNavigationParams(tag: ListViewRecord): Observable<NavigationParams> {
+    return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [
+      { field: 'tags', operator: FilterOperator.ContainsKeyValue, value: [tag.key, tag.value] }
+    ]);
+  }
+
   private buildTagRecords(): void {
     if (isNil(this.tags)) {
       this.tagRecords$ = EMPTY;
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
index 8db8ed9d4..c5a73b097 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { LabelModule, ListViewModule, LoadAsyncModule } from '@hypertrace/components';
+import { LabelModule, ListViewModule, LoadAsyncModule, TooltipModule } from '@hypertrace/components';
+import { ExploreFilterLinkModule } from '../../explore-filter-link/explore-filter-link.module';
 import { SpanTagsDetailComponent } from './span-tags-detail.component';
 
 @NgModule({
-  imports: [CommonModule, ListViewModule, LabelModule, LoadAsyncModule],
+  imports: [CommonModule, ExploreFilterLinkModule, ListViewModule, LabelModule, LoadAsyncModule, TooltipModule],
   declarations: [SpanTagsDetailComponent],
   exports: [SpanTagsDetailComponent]
 })

From ff921fa58e0c0eb6da5c2359a773d3fb69bac217 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Mon, 30 Aug 2021 15:35:31 +0530
Subject: [PATCH 05/10] fix: test errors

---
 .../components/span-detail/span-detail.component.test.ts    | 3 ++-
 .../span-detail/tags/span-tags-detail.component.test.ts     | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
index 430205f59..a16969845 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
@@ -3,6 +3,7 @@ import { fakeAsync } from '@angular/core/testing';
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { ExplorerService } from '../../../pages/explorer/explorer-service';
 import { SpanData } from './span-data';
 import { SpanDetailComponent } from './span-detail.component';
 import { SpanDetailModule } from './span-detail.module';
@@ -14,7 +15,7 @@ describe('Span detail component', () => {
     component: SpanDetailComponent,
     imports: [SpanDetailModule, HttpClientTestingModule, IconLibraryTestingModule],
     declareComponent: false,
-    providers: [mockProvider(NavigationService)]
+    providers: [mockProvider(NavigationService), mockProvider(ExplorerService)]
   });
 
   test('should display child components', () => {
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
index 0a9e12601..52d866e10 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 
 import {
   JsonViewerModule,
@@ -11,6 +11,7 @@ import {
   ToggleButtonModule
 } from '@hypertrace/components';
 import { SpanTagsDetailComponent } from './span-tags-detail.component';
+import { ExplorerService } from '../../../../pages/explorer/explorer-service';
 
 describe('Span Tags Detail Component', () => {
   let spectator: Spectator<SpanTagsDetailComponent>;
@@ -25,7 +26,8 @@ describe('Span Tags Detail Component', () => {
       LabelModule,
       LoadAsyncModule,
       HttpClientTestingModule
-    ]
+    ],
+    providers: [mockProvider(ExplorerService)]
   });
 
   test('should display tag records', () => {

From 76ae62e2f4cfbb78919b7d085f812fdab2fddc2f Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Mon, 30 Aug 2021 15:40:40 +0530
Subject: [PATCH 06/10] refactor: code

---
 projects/components/src/list-view/list-view.component.ts   | 7 +------
 .../span-detail/tags/span-tags-detail.component.ts         | 3 +--
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index 0709bd8d9..23f47f1cd 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
-import { Dictionary } from '@hypertrace/common';
 @Component({
   selector: 'ht-list-view',
   styleUrls: ['./list-view.component.scss'],
@@ -22,7 +21,7 @@ import { Dictionary } from '@hypertrace/common';
           <span>{{ record.value }}</span>
         </div>
         <div *ngIf="this.action" class="action">
-          <ng-container *ngTemplateOutlet="this.action; context: this.getContext(record)"></ng-container>
+          <ng-container *ngTemplateOutlet="this.action; context: { $implicit: record }"></ng-container>
         </div>
       </div>
     </div>
@@ -37,10 +36,6 @@ export class ListViewComponent {
 
   @Input()
   public action?: TemplateRef<unknown>;
-
-  public getContext(record: ListViewRecord): Dictionary<ListViewRecord> {
-    return { record: record };
-  }
 }
 
 export interface ListViewHeader {
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
index 2f0e36b4e..6bcd4cb4b 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -14,10 +14,9 @@ import { ScopeQueryParam } from '../../../../pages/explorer/explorer.component';
     <div class="tags-details">
       <ng-container *htLoadAsync="this.tagRecords$ as tagRecords">
         <ht-list-view [records]="tagRecords" [action]="tagAction" data-sensitive-pii></ht-list-view>
-        <ng-template #tagAction let-tag="record">
+        <ng-template #tagAction let-tag>
           <ht-explore-filter-link
             *ngIf="this.getExploreNavigationParams(tag) | async as exploreNavigationParams"
-            class="explore-filter"
             [paramsOrUrl]="exploreNavigationParams"
             htTooltip="See traces in Explorer"
           >

From c016b25e6b9881004ee46812fa74b7a99e53f4c2 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Mon, 30 Aug 2021 15:45:59 +0530
Subject: [PATCH 07/10] fix: lint errors

---
 .../span-detail/tags/span-tags-detail.component.test.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
index 52d866e10..d0e1731bf 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
@@ -10,8 +10,8 @@ import {
   LoadAsyncModule,
   ToggleButtonModule
 } from '@hypertrace/components';
-import { SpanTagsDetailComponent } from './span-tags-detail.component';
 import { ExplorerService } from '../../../../pages/explorer/explorer-service';
+import { SpanTagsDetailComponent } from './span-tags-detail.component';
 
 describe('Span Tags Detail Component', () => {
   let spectator: Spectator<SpanTagsDetailComponent>;

From c0395a88363a68cff7e75e87df2c8a01188dfe61 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 1 Sep 2021 21:33:25 +0530
Subject: [PATCH 08/10] fix: using renderer directive

---
 .../list-view-value-renderer.directive.ts     | 12 ++++++++++
 .../src/list-view/list-view.component.scss    | 12 +---------
 .../src/list-view/list-view.component.ts      | 20 ++++++++++------
 .../src/list-view/list-view.module.ts         |  5 ++--
 .../tags/span-tags-detail.component.scss      | 15 ++++++++++++
 .../tags/span-tags-detail.component.ts        | 24 +++++++++----------
 .../tags/span-tags-detail.module.ts           | 11 ++++++++-
 7 files changed, 66 insertions(+), 33 deletions(-)
 create mode 100644 projects/components/src/list-view/list-view-value-renderer.directive.ts

diff --git a/projects/components/src/list-view/list-view-value-renderer.directive.ts b/projects/components/src/list-view/list-view-value-renderer.directive.ts
new file mode 100644
index 000000000..040fd4323
--- /dev/null
+++ b/projects/components/src/list-view/list-view-value-renderer.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[htListViewValueRenderer]'
+})
+export class ListViewValueRendererDirective {
+  public constructor(private readonly templateRef: TemplateRef<unknown>) {}
+
+  public getTemplateRef(): TemplateRef<unknown> {
+    return this.templateRef;
+  }
+}
diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss
index 10941f1e4..cbc523154 100644
--- a/projects/components/src/list-view/list-view.component.scss
+++ b/projects/components/src/list-view/list-view.component.scss
@@ -2,14 +2,13 @@
 
 $key-width: 40%;
 $value-width: auto;
-$action-width: 32px;
 $horizontal-offset: 12px;
 
 @mixin grid-view {
   width: 100%;
   padding: 8px 0;
   display: grid;
-  grid-template-columns: $key-width $value-width $action-width;
+  grid-template-columns: $key-width $value-width;
   align-content: center;
 }
 
@@ -56,15 +55,6 @@ $horizontal-offset: 12px;
     .key {
       font-weight: 500;
     }
-
-    .action {
-      display: none;
-      align-self: center;
-    }
-
-    &:hover .action {
-      display: contents;
-    }
   }
 
   .data-row:nth-child(odd) {
diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index 23f47f1cd..7186fff19 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
+import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 @Component({
   selector: 'ht-list-view',
   styleUrls: ['./list-view.component.scss'],
@@ -18,11 +19,16 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular
           <span>{{ record.key }}</span>
         </div>
         <div class="value">
-          <span>{{ record.value }}</span>
-        </div>
-        <div *ngIf="this.action" class="action">
-          <ng-container *ngTemplateOutlet="this.action; context: { $implicit: record }"></ng-container>
+          <ng-container
+            *ngTemplateOutlet="
+              this.valueRenderer ? this.valueRenderer!.getTemplateRef() : defaultValueRenderer;
+              context: { $implicit: record }
+            "
+          ></ng-container>
         </div>
+        <ng-template #defaultValueRenderer let-record
+          ><span>{{ record.value }}</span></ng-template
+        >
       </div>
     </div>
   `
@@ -34,8 +40,8 @@ export class ListViewComponent {
   @Input()
   public records?: ListViewRecord[];
 
-  @Input()
-  public action?: TemplateRef<unknown>;
+  @ContentChild(ListViewValueRendererDirective)
+  public valueRenderer?: ListViewValueRendererDirective;
 }
 
 export interface ListViewHeader {
diff --git a/projects/components/src/list-view/list-view.module.ts b/projects/components/src/list-view/list-view.module.ts
index 60e655c20..6d71b637b 100644
--- a/projects/components/src/list-view/list-view.module.ts
+++ b/projects/components/src/list-view/list-view.module.ts
@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({
-  declarations: [ListViewComponent],
-  exports: [ListViewComponent],
+  declarations: [ListViewComponent, ListViewValueRendererDirective],
+  exports: [ListViewComponent, ListViewValueRendererDirective],
   imports: [CommonModule]
 })
 export class ListViewModule {}
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss
index d2275d916..15f2032c4 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.scss
@@ -7,4 +7,19 @@
   height: 100%;
   width: 100%;
   overflow: auto;
+
+  .tag-value {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto min-content;
+
+    .filter-link {
+      visibility: hidden;
+      margin-left: 12px;
+    }
+
+    &:hover .filter-link {
+      visibility: visible;
+    }
+  }
 }
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
index 6bcd4cb4b..cae342b35 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -13,15 +13,16 @@ import { ScopeQueryParam } from '../../../../pages/explorer/explorer.component';
   template: `
     <div class="tags-details">
       <ng-container *htLoadAsync="this.tagRecords$ as tagRecords">
-        <ht-list-view [records]="tagRecords" [action]="tagAction" data-sensitive-pii></ht-list-view>
-        <ng-template #tagAction let-tag>
-          <ht-explore-filter-link
-            *ngIf="this.getExploreNavigationParams(tag) | async as exploreNavigationParams"
-            [paramsOrUrl]="exploreNavigationParams"
-            htTooltip="See traces in Explorer"
-          >
-          </ht-explore-filter-link
-        ></ng-template>
+        <ht-list-view [records]="tagRecords" data-sensitive-pii
+          ><div class="tag-value" *htListViewValueRenderer="let record">
+            <div class="value">{{ record.value }}</div>
+            <ht-explore-filter-link
+              class="filter-link"
+              [paramsOrUrl]="this.getExploreNavigationParams | htMemoize: record | async"
+              htTooltip="See traces in Explorer"
+            >
+            </ht-explore-filter-link></div
+        ></ht-list-view>
       </ng-container>
     </div>
   `
@@ -40,11 +41,10 @@ export class SpanTagsDetailComponent implements OnChanges {
     }
   }
 
-  public getExploreNavigationParams(tag: ListViewRecord): Observable<NavigationParams> {
-    return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [
+  public getExploreNavigationParams = (tag: ListViewRecord): Observable<NavigationParams> =>
+    this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [
       { field: 'tags', operator: FilterOperator.ContainsKeyValue, value: [tag.key, tag.value] }
     ]);
-  }
 
   private buildTagRecords(): void {
     if (isNil(this.tags)) {
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
index c5a73b097..6d748c339 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.module.ts
@@ -1,12 +1,21 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { MemoizeModule } from '@hypertrace/common';
 import { LabelModule, ListViewModule, LoadAsyncModule, TooltipModule } from '@hypertrace/components';
 import { ExploreFilterLinkModule } from '../../explore-filter-link/explore-filter-link.module';
 import { SpanTagsDetailComponent } from './span-tags-detail.component';
 
 @NgModule({
-  imports: [CommonModule, ExploreFilterLinkModule, ListViewModule, LabelModule, LoadAsyncModule, TooltipModule],
+  imports: [
+    CommonModule,
+    ExploreFilterLinkModule,
+    ListViewModule,
+    LabelModule,
+    LoadAsyncModule,
+    MemoizeModule,
+    TooltipModule
+  ],
   declarations: [SpanTagsDetailComponent],
   exports: [SpanTagsDetailComponent]
 })

From 72925859507bc96e4bc1c0c3b3a982f191393e89 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 1 Sep 2021 21:48:17 +0530
Subject: [PATCH 09/10] fix: test cases

---
 .../tags/span-tags-detail.component.test.ts            | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
index d0e1731bf..5a4528f6b 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.test.ts
@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-
+import { MemoizeModule } from '@hypertrace/common';
 import {
   JsonViewerModule,
   LabelModule,
@@ -10,7 +9,10 @@ import {
   LoadAsyncModule,
   ToggleButtonModule
 } from '@hypertrace/components';
+import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 import { ExplorerService } from '../../../../pages/explorer/explorer-service';
+import { ExploreFilterLinkComponent } from '../../explore-filter-link/explore-filter-link.component';
 import { SpanTagsDetailComponent } from './span-tags-detail.component';
 
 describe('Span Tags Detail Component', () => {
@@ -25,8 +27,10 @@ describe('Span Tags Detail Component', () => {
       JsonViewerModule,
       LabelModule,
       LoadAsyncModule,
-      HttpClientTestingModule
+      HttpClientTestingModule,
+      MemoizeModule
     ],
+    declarations: [MockComponent(ExploreFilterLinkComponent)],
     providers: [mockProvider(ExplorerService)]
   });
 

From 4ffe7836390f8848357ad5d15aa6ab478d452c72 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 2 Sep 2021 00:53:41 +0530
Subject: [PATCH 10/10] fix: addressing review comments

---
 .../components/src/list-view/list-view.component.ts   |  6 +++---
 .../span-detail/span-detail.component.test.ts         | 11 ++---------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index 7186fff19..58cf8e8d1 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -5,6 +5,9 @@ import { ListViewValueRendererDirective } from './list-view-value-renderer.direc
   styleUrls: ['./list-view.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
+    <ng-template #defaultValueRenderer let-record
+      ><span>{{ record.value }}</span></ng-template
+    >
     <div class="list-view">
       <div *ngIf="this.header" class="header-row">
         <div class="header-key-label">
@@ -26,9 +29,6 @@ import { ListViewValueRendererDirective } from './list-view-value-renderer.direc
             "
           ></ng-container>
         </div>
-        <ng-template #defaultValueRenderer let-record
-          ><span>{{ record.value }}</span></ng-template
-        >
       </div>
     </div>
   `
diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
index a16969845..22b8fb71c 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
@@ -1,21 +1,14 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync } from '@angular/core/testing';
-import { IconLibraryTestingModule } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
-import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { ExplorerService } from '../../../pages/explorer/explorer-service';
+import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { SpanData } from './span-data';
 import { SpanDetailComponent } from './span-detail.component';
-import { SpanDetailModule } from './span-detail.module';
 
 describe('Span detail component', () => {
   let spectator: Spectator<SpanDetailComponent>;
 
   const createHost = createHostFactory({
     component: SpanDetailComponent,
-    imports: [SpanDetailModule, HttpClientTestingModule, IconLibraryTestingModule],
-    declareComponent: false,
-    providers: [mockProvider(NavigationService), mockProvider(ExplorerService)]
+    shallow: true
   });
 
   test('should display child components', () => {