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

Author: sawankshrma

src/app/pages/circular-heatmap/circular-heatmap.component.html

@@ -29,34 +29,31 @@ <h2>Nothing to show</h2>
       <div class="heatmapClass">
         <div id="chart" class="heatmapChart"></div>
         <div class="filter-container">
-          <button class="filter-toggle" mat-button color="primary" (click)="toggleFilters()">
+          <button class="filter-toggle" mat-icon-button color="primary" (click)="toggleFilters()">
             <mat-icon [class.hidden]="!showFilters">keyboard_arrow_up</mat-icon>
             <mat-icon [class.hidden]="showFilters">filter_alt</mat-icon>
           </button>
           <div class="team-filter" [class.hidden]="!showFilters">
-            <mat-form-field class="team-chip-list">
-              <mat-label>Team Group Filter</mat-label>
-              <mat-chip-listbox selectable>
-                <mat-chip-option
-                  *ngFor="let group of filtersTeamGroups | keyvalue : unsorted"
-                  (selectionChange)="toggleTeamGroupFilter($event)"
-                  [selected]="filtersTeamGroups[group.key]">
-                  {{ group.key }}
-                </mat-chip-option>
-              </mat-chip-listbox>
-            </mat-form-field>
-            <mat-form-field>
-              <mat-label>Team Filter</mat-label>
-              <mat-chip-listbox selectable multiple>
-                <mat-chip-option
-                  *ngFor="let team of filtersTeams | keyvalue"
-                  (selectionChange)="toggleTeamFilter($event)"
-                  [value]="team.key"
-                  [selected]="team.value">
-                  {{ team.key }}
-                </mat-chip-option>
-              </mat-chip-listbox>
-            </mat-form-field>
+            <label class="filter-label">Team Group Filter</label>
+            <mat-chip-listbox selectable>
+              <mat-chip-option
+                *ngFor="let group of filtersTeamGroups | keyvalue : unsorted"
+                (selectionChange)="toggleTeamGroupFilter($event)"
+                [selected]="filtersTeamGroups[group.key]">
+                {{ group.key }}
+              </mat-chip-option>
+            </mat-chip-listbox>
+
+            <label class="filter-label">Team Filter</label>
+            <mat-chip-listbox selectable multiple>
+              <mat-chip-option
+                *ngFor="let team of filtersTeams | keyvalue"
+                (selectionChange)="toggleTeamFilter($event)"
+                [value]="team.key"
+                [selected]="team.value">
+                {{ team.key }}
+              </mat-chip-option>
+            </mat-chip-listbox>
           </div>
         </div>
         <mat-card appearance="outlined" class="activity-card" *ngIf="showActivityCard">

src/app/pages/circular-heatmap/circular-heatmap.component.ts

@@ -219,49 +219,48 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
   }
 
   toggleTeamGroupFilter(event: MatChipSelectionChange) {
-    let chip = event.source;
-    let teamGroup = chip.value.trim();
-    if (!chip.selected) {
-      chip.toggleSelected();
-      console.log(`${perfNow()}: Heat: Chip flip Group '${teamGroup}: ${chip.selected}`);
-
-      // Update the team selections based on the team group selection
-      let selectedTeams: TeamName[] = [];
+    if (!event?.source || event.source.value == null) return;
+    if (!event.selected) return;
+
+    const teamGroup = event.source.value.trim();
+
+    setTimeout(() => {
+      console.log(`${perfNow()}: Heat: Chip flip Group '${teamGroup}`);
+      const selectedTeams: TeamName[] = [];
       Object.keys(this.filtersTeams).forEach(key => {
         this.filtersTeams[key] = this.teamGroups[teamGroup]?.includes(key) || false;
-        if (this.filtersTeams[key]) {
-          selectedTeams.push(key);
-        }
-        this.sectorService.setVisibleTeams(selectedTeams);
+        if (this.filtersTeams[key]) selectedTeams.push(key);
       });
+      this.sectorService.setVisibleTeams(selectedTeams);
       this.hasTeamsFilter = Object.values(this.filtersTeams).some(v => v === true);
       this.reColorHeatmap();
-    } else {
-      console.log(`${perfNow()}: Heat: Chip flip Group '${teamGroup}: already on`);
-    }
+    });
   }
 
   toggleTeamFilter(event: MatChipSelectionChange) {
-    let chip = event.source;
-    chip.toggleSelected();
-    this.filtersTeams[chip.value.trim()] = chip.selected;
-    console.log(`${perfNow()}: Heat: Chip flip Team '${chip.value}: ${chip.selected}`);
+    if (!event?.source || event.source.value == null) return;
 
-    this.hasTeamsFilter = Object.values(this.filtersTeams).some(v => v === true);
+    const value = event.source.value.trim();
+    const selected = event.selected;
 
-    let selectedTeams: string[] = Object.keys(this.filtersTeams).filter(
-      key => this.filtersTeams[key]
-    );
-    this.sectorService.setVisibleTeams(selectedTeams);
+    setTimeout(() => {
+      this.filtersTeams[value] = selected;
+      console.log(`${perfNow()}: Heat: Chip flip Team '${value}: ${selected}`);
 
-    // Update team group filter, if one matches selection
-    Object.keys(this.teamGroups || {}).forEach(group => {
-      let match: boolean = equalArray(selectedTeams, this.teamGroups[group]);
-      this.filtersTeamGroups[group] = match;
-    });
-    this.filtersTeamGroups = this.filtersTeamGroups;
+      this.hasTeamsFilter = Object.values(this.filtersTeams).some(v => v === true);
 
-    this.reColorHeatmap();
+      const selectedTeams: string[] = Object.keys(this.filtersTeams).filter(
+        key => this.filtersTeams[key]
+      );
+      this.sectorService.setVisibleTeams(selectedTeams);
+
+      Object.keys(this.teamGroups || {}).forEach(group => {
+        this.filtersTeamGroups[group] = equalArray(selectedTeams, this.teamGroups[group]);
+      });
+      this.filtersTeamGroups = { ...this.filtersTeamGroups };
+
+      this.reColorHeatmap();
+    });
   }
 
   getTeamProgressState(activityUuid: string, teamName: string): string {

src/custom-theme.scss

@@ -309,7 +309,11 @@ body.dark-theme {
     }
   }
 
-   
+  .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-selected,
+  .mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--selected {
+    background-color: var(--primary-color) !important;
+  }
+  
   // Form fields and inputs
   .mat-mdc-form-field .mdc-notched-outline__leading,
   .mat-mdc-form-field .mdc-notched-outline__notch,