fix: rename D3HeatmapService to D3HeatmapRenderer and fix click/theme bugs

Addresses maintainer feedback on PR #477:

- Renamed D3HeatmapService to D3HeatmapRenderer per suggestion
- Moved file from service/ to renderer/ folder
- Fixed TypeError when updateThemeColors called before initialize
- Fixed undefined sector issue in click/hover handlers by adding fallback lookup
- Added isInitialized() method to guard against premature theme updates
- Improved type safety by replacing 'any' with proper TypeScript types

Author: Biswas-Samrat

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

@@ -27,7 +27,7 @@ import { downloadYamlFile } from 'src/app/util/download';
 import { ThemeService } from '../../service/theme.service';
 import { TitleService } from '../../service/title.service';
 import { SettingsService } from 'src/app/service/settings/settings.service';
-import { D3HeatmapService, HeatmapColors } from '../../service/d3-heatmap.service';
+import { D3HeatmapRenderer, HeatmapColors } from '../../renderer/d3-heatmap.renderer';
 
 @Component({
   selector: 'app-circular-heatmap',
@@ -71,7 +71,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private location: Location,
     public modal: ModalMessageComponent,
-    private heatmapService: D3HeatmapService
+    private heatmapRenderer: D3HeatmapRenderer
   ) {
     this.theme = this.themeService.getTheme();
   }
@@ -153,14 +153,16 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
       };
       console.debug(`${perfNow()}s: themeService.pipe: Heatmap theme colors:`, this.theme_colors);
 
-      // Repaint segments with new theme
-      this.heatmapService.updateThemeColors(this.theme_colors);
-      this.reColorHeatmap();
+      // Only update theme colors if renderer is initialized
+      if (this.heatmapRenderer.isInitialized()) {
+        this.heatmapRenderer.updateThemeColors(this.theme_colors);
+        this.reColorHeatmap();
+      }
     });
   }
 
   private initializeHeatmap() {
-    this.heatmapService.initialize(
+    this.heatmapRenderer.initialize(
       '#chart',
       {
         imageWidth: 1200,
@@ -172,13 +174,13 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
       sector => this.getSectorProgress(sector)
     );
 
-    this.heatmapService.render(
+    this.heatmapRenderer.render(
       this.allSectors,
       {
         onClick: (sector, index, id) => {
           this.selectedSector = sector;
           if (this.selectedSector?.activities?.length) {
-            this.heatmapService.setSectorCursor('#selected', id);
+            this.heatmapRenderer.setSectorCursor('#selected', id);
             this.showActivityCard = this.selectedSector;
             console.log(
               `${perfNow()}: Heat: Clicked sector: '${this.selectedSector.dimension}' Level: ${
@@ -187,7 +189,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
             );
           } else {
             this.showActivityCard = null;
-            this.heatmapService.setSectorCursor('#selected', '');
+            this.heatmapRenderer.setSectorCursor('#selected', '');
             console.log(
               `${perfNow()}: Heat: Clicked disabled sector: '${
                 this.selectedSector?.dimension
@@ -197,18 +199,18 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
         },
         onMouseOver: (sector, index, id) => {
           if (sector?.activities?.length) {
-            this.heatmapService.setSectorCursor('#hover', id);
+            this.heatmapRenderer.setSectorCursor('#hover', id);
             this.titleService.setTitle({
               level: sector.level,
               dimension: sector.dimension,
               // subdimension: sector.subdimension, // Sector interface doesn't have subdimension
             });
           } else {
-            this.heatmapService.setSectorCursor('#hover', '');
+            this.heatmapRenderer.setSectorCursor('#hover', '');
           }
         },
         onMouseOut: () => {
-          this.heatmapService.setSectorCursor('#hover', '');
+          this.heatmapRenderer.setSectorCursor('#hover', '');
           this.titleService.clearTitle();
         },
       },
@@ -451,7 +453,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
         })`
       );
 
-    this.heatmapService.recolorSector(index, progressValue);
+    this.heatmapRenderer.recolorSector(index, progressValue);
   }
 
   exportTeamProgress() {

src/app/service/d3-heatmap.service.ts src/app/renderer/d3-heatmap.renderer.tssrc/app/service/d3-heatmap.service.ts renamed to src/app/renderer/d3-heatmap.renderer.ts

@@ -21,14 +21,15 @@ export interface HeatmapConfig {
 @Injectable({
   providedIn: 'root',
 })
-export class D3HeatmapService {
-  private svg: d3.Selection<SVGGElement, any, HTMLElement, any> | null = null;
-  private config!: HeatmapConfig;
+export class D3HeatmapRenderer {
+  private svg: d3.Selection<SVGGElement, unknown, HTMLElement, unknown> | null = null;
+  private config: HeatmapConfig | null = null;
   private segmentHeight!: number;
   private innerRadius!: number;
   private segmentLabelHeight!: number;
   private outerRadius!: number;
   private colorScale!: d3.ScaleLinear<string, string>;
+  private dataset: Sector[] = [];
 
   public initialize(
     domElement: string,
@@ -72,7 +73,7 @@ export class D3HeatmapService {
         `translate(${margin.left + this.segmentLabelHeight}, ${
           margin.top + this.segmentLabelHeight
         })`
-      ) as any;
+      ) as d3.Selection<SVGGElement, unknown, HTMLElement, unknown>;
   }
 
   public render(
@@ -84,7 +85,10 @@ export class D3HeatmapService {
     },
     sectorProgressFn: (sector: Sector) => number
   ): void {
-    if (!this.svg) return;
+    if (!this.svg || !this.config) return;
+
+    // Store the dataset reference for later use
+    this.dataset = dataset;
 
     const { dimLabels, colors } = this.config;
     const numSegments = dimLabels.length;
@@ -119,13 +123,38 @@ export class D3HeatmapService {
         }
         return this.colorScale(sectorProgressFn(d));
       })
-      .on('click', (event, d) => {
-        const index = dataset.indexOf(d);
-        handlers.onClick(d, index, 'index-' + index);
+      .on('click', (event: MouseEvent, d: Sector) => {
+        // Use the stored dataset to find the index
+        const index = this.dataset.indexOf(d);
+        if (index !== -1) {
+          handlers.onClick(d, index, 'index-' + index);
+        } else {
+          // Fallback: find by dimension and level
+          const fallbackIndex = this.dataset.findIndex(
+            sector => sector.dimension === d.dimension && sector.level === d.level
+          );
+          if (fallbackIndex !== -1) {
+            handlers.onClick(this.dataset[fallbackIndex], fallbackIndex, 'index-' + fallbackIndex);
+          }
+        }
       })
-      .on('mouseover', (event, d) => {
-        const index = dataset.indexOf(d);
-        handlers.onMouseOver(d, index, 'index-' + index);
+      .on('mouseover', (event: MouseEvent, d: Sector) => {
+        const index = this.dataset.indexOf(d);
+        if (index !== -1) {
+          handlers.onMouseOver(d, index, 'index-' + index);
+        } else {
+          // Fallback: find by dimension and level
+          const fallbackIndex = this.dataset.findIndex(
+            sector => sector.dimension === d.dimension && sector.level === d.level
+          );
+          if (fallbackIndex !== -1) {
+            handlers.onMouseOver(
+              this.dataset[fallbackIndex],
+              fallbackIndex,
+              'index-' + fallbackIndex
+            );
+          }
+        }
       })
       .on('mouseout', () => {
         handlers.onMouseOut();
@@ -194,7 +223,7 @@ export class D3HeatmapService {
   }
 
   public recolorSector(index: number, progressValue: number): void {
-    if (!this.svg) return;
+    if (!this.svg || !this.config) return;
 
     this.svg
       .select('#index-' + index)
@@ -205,10 +234,20 @@ export class D3HeatmapService {
   }
 
   public updateThemeColors(colors: HeatmapColors): void {
+    // Guard against being called before initialize()
+    if (!this.config) {
+      console.warn('D3HeatmapRenderer: updateThemeColors called before initialize, skipping.');
+      return;
+    }
+
     this.config.colors = colors;
     this.colorScale.range([colors.background, colors.filled]);
     if (this.svg) {
       this.svg.selectAll('.circular-heat path').attr('stroke', colors.stroke);
     }
   }
+
+  public isInitialized(): boolean {
+    return this.config !== null && this.svg !== null;
+  }
 }