Improve usability

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -2,7 +2,7 @@
   mat-dialog-title
   position="center"
   [deviceType]="data.deviceType"
-  [title]="assetProfile?.name"
+  [title]="assetProfile?.name ?? assetProfile?.symbol"
   (closeButtonClicked)="onClose()"
 />
 

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -2,15 +2,7 @@
   <ng-container matColumnDef="name">
     <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Index</th>
     <td *matCellDef="let element" class="px-2" mat-cell>
-      <a
+      {{ element?.name }}
-        [queryParams]="{
-          benchmarkDetailDialog: true,
-          dataSource: element.dataSource,
-          symbol: element.symbol
-        }"
-        [routerLink]="[]"
-        >{{ element?.name }}</a
-      >
     </td>
   </ng-container>
 
@@ -118,5 +110,15 @@
   </ng-container>
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  <tr
+    *matRowDef="let row; columns: displayedColumns"
+    class="cursor-pointer"
+    mat-row
+    (click)="
+      onOpenBenchmarkDialog({
+        dataSource: row.dataSource,
+        symbol: row.symbol
+      })
+    "
+  ></tr>
 </table>

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -84,6 +84,12 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
     }
   }
 
+  public onOpenBenchmarkDialog({ dataSource, symbol }: UniqueAsset) {
+    this.router.navigate([], {
+      queryParams: { dataSource, symbol, benchmarkDetailDialog: true }
+    });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();