Heatmap: Display level and subdimension as title on hover

Author: vbakke

src/app/app.component.css

@@ -8,10 +8,10 @@
   align-items: center;
 }
 .tag-title {
-  font-size: 1.2rem;
+  font-size: 0.9em;
 }
 .tag-subtitle {
-  font-size: 0.7rem;
+  font-size: 0.7em;
 }
 
 /* --- experimental branch end --- */

src/app/app.component.ts

@@ -1,18 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
 import { ThemeService } from './service/theme.service';
+import { TitleService } from './service/title.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   title = '';
   defaultTitle = 'DSOMM beta edition';
   subtitle = '';
   menuIsOpen: boolean = true;
 
-  constructor(private themeService: ThemeService) {
+  private destroy$ = new Subject<void>();
+
+  constructor(private themeService: ThemeService, private titleService: TitleService) {
     this.themeService.initTheme();
   }
 
@@ -23,6 +27,17 @@ export class AppComponent implements OnInit {
         this.menuIsOpen = false;
       }, 600);
     }
+
+    // Subscribe to title changes
+    this.titleService.titleInfo$.pipe(takeUntil(this.destroy$)).subscribe(titleInfo => {
+      this.title = titleInfo?.dimension || '';
+      this.subtitle = titleInfo?.level ? 'Level ' + titleInfo?.level : '';
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   toggleMenu(): void {

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

@@ -26,6 +26,7 @@ import { Sector } from 'src/app/model/sector';
 import { perfNow } from 'src/app/util/util';
 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';
 
 @Component({
@@ -65,6 +66,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
     private sectorService: SectorService,
     private settings: SettingsService,
     private themeService: ThemeService,
+    private titleService: TitleService,
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
@@ -149,6 +151,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.titleService.clearTitle();
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -358,12 +361,21 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
         var index = parseInt(hoveredId.replace('index-', ''));
         if (dataset[index]?.activities?.length) {
           _self.setSectorCursor(svg, '#hover', hoveredId);
+          // Update title with sector info
+          const sector = dataset[index];
+          _self.titleService.setTitle({
+            level: sector.level,
+            dimension: sector.dimension,
+            subdimension: sector.subdimension,
+          });
         } else {
           _self.setSectorCursor(svg, '#hover', '');
         }
       })
       .on('mouseout', function () {
         _self.setSectorCursor(svg, '#hover', '');
+        // Clear title on mouseout
+        _self.titleService.clearTitle();
       });
   }
 

src/app/service/title.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export interface TitleInfo {
+  level?: number;
+  dimension?: string;
+  subdimension?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class TitleService {
+  private titleSubject = new BehaviorSubject<TitleInfo | null>(null);
+  public readonly titleInfo$ = this.titleSubject.asObservable();
+
+  constructor() {}
+
+  setTitle(titleInfo: TitleInfo | null): void {
+    this.titleSubject.next(titleInfo);
+  }
+
+  clearTitle(): void {
+    this.titleSubject.next(null);
+  }
+
+  formatTitle(titleInfo: TitleInfo | null, defaultTitle: string): string {
+    if (!titleInfo) {
+      return defaultTitle;
+    }
+
+    let parts: string[] = [];
+
+    if (titleInfo.dimension) {
+      parts.push(titleInfo.dimension);
+    }
+
+    if (titleInfo.level !== undefined) {
+      parts.push(`Level ${titleInfo.level}`);
+    }
+
+    if (titleInfo.subdimension) {
+      parts.push(titleInfo.subdimension);
+    }
+
+    return parts.length > 0 ? parts.join(' - ') : defaultTitle;
+  }
+}

src/assets/Markdown Files/TODO-v4.md

@@ -9,9 +9,6 @@
 - DSOMM: Read latest "activities.yaml" from DSOMM-data's github repo, to check for any new releases
 
 
-### Settings
-- Settings: Terms: Allow custom names for: team, group, etc
-
 ### Activity view
 - Activity: Shorten very long ISO references
 - Activity: Show Team Evidence from yaml file
@@ -43,7 +40,6 @@
 - Heatmap: Read previous local storage for backwards compatibility 
 - Heatmap: Outer rim: Increase subdimension to be two lines (and increase size)
 - Heatmap: Outer rim: Make hover display Dimension (over subdimension)
-- Heatmap: Show a dimension label in title when hovering (especially for the up-side down dimension)
 ### Activity view
 - Activity: Input Teams' evidence
 ### Documentation
@@ -52,6 +48,9 @@
 - Doc: Update `About Us`
 - Doc: Update `Development.md`
 - Doc: Update `INSTALL.md`
+### Settings
+- Settings: Terms: Allow custom names for: 'Team' and 'Group' (e.g. to 'App' and 'Portfolio')
+
 ### Misc
 - Refactor ProgressDefinitions to MetaStore to get definitions for 0%, 100% etc
 - Move About Us, last, renaming to About DSOMM
@@ -60,24 +59,17 @@
 - Move META_FILE constant from data service to main app
 - Check if loader can be optimized by load in yaml in parallel
 
-
 # Later
 - App: Search activities, across title description etc
 - Export to Excel. Move from Mapping, to just progress data
 - Filter: Bug: SPACE key does not trigger
 - Heatmap, Card: Add Complete-symbol per activity
-- Heatmap: Update url on open details + read querystring on open
 - Heatmap: Add 'Not applicable' as a status for a team
-- Matrix: Brushup layout of details page
-- Matrix: Remember filters, when moving back from details
-- Matrix: Dependency graph: Make it clickable
 - Matrix: Go through tags: remove, add and rename
-- Misc: What is the activities.yaml comment field for? Should it be displayed to the user?
-- Teams: View active initiatives for a team (>0% and <100%)
 - Teams: View timeline for a team
-- Meta.yaml: Allow admins to customize the terms 'Team' and 'Group' (e.g. to 'App' and 'Portfolio')
 
 # Done
+- Heatmap: Show a dimension label in title when hovering (especially for the up-side down dimension)
 - Settings: Proper text under Progress
 - Settings: Progress Definition: Make customizable stage: Name, Percentage, Definition (free text)
 - Settings: Make settings page