fix(matrix): resolve MDC chip selection and styling issues

Author: sawankshrma

src/app/pages/matrix/matrix.component.css

@@ -2,12 +2,24 @@
   width: 100%;
 }
 
-.mat-mdc-form-field {
+.chip-filter-section {
   margin: 20px;
-  margin-bottom: 0;
+  margin-bottom: 10px;
   width: 90%;
 }
 
+.chip-filter-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  margin-bottom: 6px;
+  opacity: 0.7;
+}
+
+mat-divider {
+  opacity: 100%;
+}
+
 .matrix-table {
   margin: 20px;
 }
@@ -90,7 +102,7 @@
 .reset-button {
   background-color: #66bb6a;
   display: block;
-  margin: 0 20px;
+  margin: 10px 0 0 20px; 
   padding: 7px 12px;
   border-radius: 16px;
   font: 500 14px / 20px Roboto, 'Helvetica Neue', sans-serif;

src/app/pages/matrix/matrix.component.html

@@ -1,7 +1,8 @@
 <div class="content">
   <app-top-header section="Matrix"></app-top-header>
-  <mat-form-field class="activity-chip-list">
-    <mat-label>Dimension Filter</mat-label>
+
+  <div class="chip-filter-section">
+    <label class="chip-filter-label">Dimension Filter</label>
     <mat-chip-listbox #chipList selectable multiple>
       <mat-chip-option
         *ngFor="let dim of filtersDim | keyvalue"
@@ -11,9 +12,12 @@
         {{ dim.key }}
       </mat-chip-option>
     </mat-chip-listbox>
-  </mat-form-field>
-  <mat-form-field class="activity-chip-list">
-    <mat-label>Activity Tag Filter</mat-label>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <div class="chip-filter-section">
+    <label class="chip-filter-label">Activity Tag Filter</label>
     <mat-chip-listbox selectable multiple>
       <mat-chip-option
         *ngFor="let tag of filtersTag | keyvalue"
@@ -23,7 +27,9 @@
         {{ tag.key }}
       </mat-chip-option>
     </mat-chip-listbox>
-  </mat-form-field>
+  </div>
+
+  <mat-divider></mat-divider>
 
   <button class="reset-button" (click)="reset()">RESET</button>
 
@@ -52,7 +58,7 @@
       </td>
     </ng-container>
 
-    <div *ngFor="let level of levels | keyvalue">
+    <ng-container *ngFor="let level of levels | keyvalue">
       <ng-container matColumnDef="{{ level.key }}">
         <th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
         <td mat-cell *matCellDef="let element">
@@ -76,7 +82,7 @@
           </ul>
         </td>
       </ng-container>
-    </div>
+    </ng-container>
     <!-- eslint-enable -->
 
     <!-- No data message -->

src/app/pages/matrix/matrix.component.ts

@@ -5,7 +5,7 @@ import { Router, NavigationExtras } from '@angular/router';
 import { LoaderService } from 'src/app/service/loader/data-loader.service';
 import { Activity, ActivityStore, Data } from 'src/app/model/activity-store';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { MatChipOption, MatChipListbox, MatChipSelectionChange } from '@angular/material/chips';
+import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips';
 import { deepCopy } from 'src/app/util/util';
 import { DataStore } from 'src/app/model/data-store';
 import { perfNow } from 'src/app/util/util';
@@ -153,19 +153,29 @@ export class MatrixComponent implements OnInit {
   chipList!: MatChipListbox;
 
   toggleTagFilters(event: MatChipSelectionChange) {
-    let chip = event.source;
-    chip.toggleSelected();
-    this.filtersTag[chip.value] = chip.selected;
-    console.log(`${perfNow()}: Matrix: Chip flip Tag '${chip.value}: ${chip.selected}`);
-    this.updateActivitiesBeingDisplayed();
+    if (!event?.source || event.source.value == null) return;
+
+    const value = event.source.value;
+    const selected = event.selected;
+
+    setTimeout(() => {
+      this.filtersTag[value] = selected;
+      console.log(`${perfNow()}: Matrix: Chip flip Tag '${value}: ${selected}`);
+      this.updateActivitiesBeingDisplayed();
+    });
   }
 
   toggleDimensionFilters(event: MatChipSelectionChange) {
-    let chip = event.source;
-    chip.toggleSelected();
-    this.filtersDim[chip.value] = chip.selected;
-    console.log(`${perfNow()}: Matrix: Chip flip Dim '${chip.value}: ${chip.selected}`);
-    this.updateActivitiesBeingDisplayed();
+    if (!event?.source || event.source.value == null) return;
+
+    const value = event.source.value;
+    const selected = event.selected;
+
+    setTimeout(() => {
+      this.filtersDim[value] = selected;
+      console.log(`${perfNow()}: Matrix: Chip flip Dim '${value}: ${selected}`);
+      this.updateActivitiesBeingDisplayed();
+    });
   }
 
   @ViewChild('rowInput') rowInput!: ElementRef<HTMLInputElement>;