Merge branch 'feat/central-loader-heatmap' into experiment

Author: vbakke

TODO-central-loader.md

@@ -2,41 +2,39 @@
 
 
 ## Doing
-- Load TeamProgress yaml
-    - Store teamProgress as part of activityStore under each activity
-    - How to deal with deleted progress??? (Do later)
-- Refactor Circular Heatmap
-    - Update progress (when slider is moved) when new sector is selected
-    - show progress for each activity on the slider
-    - update progress for each activity in the sector, on teams change
 
 ## Next
-- Load TeamProgress yaml
-    - Store in localStorage
-    - Handle boolean for backwards compatibility
-    - Merge localStorage and YAML
-- Progress Slider
-    - Data model, contains date, so warning about downgrade can show date
-    - Handle when previous value does not have a date (backwards compatibility)
-    - Catch close to save new progresses
-- Store TeamProgress to localStorage
-- Load localStorage TeamProgress
 - Export TeamProgress yaml
+- Read boolean from backwards compatibility storage
 - Filters
     - filter teams
     - filter none => all
 
 
 
 ## Later
-- Add validation for meta.yaml, progress step: include 0% and 100%, and increacing values
 - Merge in experiment's way of generating circ heat
 - Fix dependsOn that is uuid (e.g. 83057028-0b77-4d2e-8135-40969768ae88)
 - Sort linear list of activities (sorted by level, dim)
 - Move META_FILE constant from data service to main app
 - Filter: tags: Fix update on SPACE key (trouble)
+- Circular, Card: Add Complete symbol per activity
+
+- Dependency graph: Add to CircularHeatmap Details
+- Dependency graph: Make it clickable
+- Matrix: Remember filters, when moving back from details
+
+- Teams: Allow editing teams names in browser
+- Teams: Store teams names in localstorage
+- Teams: Export teams YAML from teams page
+- Teams: View timeline for a team
 
 # Done
+- Store TeamProgress to localStorage
+- Load localStorage TeamProgress
+- Load TeamProgress yaml
+- Refactor Circular Heatmap
+- Add validation for meta.yaml, progress step: include 0% and 100%
 - Load YAML progress
 - Navigate to activity-description without site reload
 - Refactor Dependecy graph

src/app/component/activity-description/activity-description.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import { LoaderService } from '../../service/loader/data-loader.service';
 import * as md from 'markdown-it';
 import { Activity, ActivityStore } from '../../model/activity-store';
+import { DataStore } from 'src/app/model/data-store';
 
 @Component({
   selector: 'app-activity-description',
@@ -36,15 +37,17 @@ export class ActivityDescriptionComponent implements OnInit {
     // Load data
     this.loader
       .load()
-      .then((activityStore: ActivityStore) => {
+      .then((dataStore: DataStore) => {
         // Find the activity with matching UUID (or potentially name)
-        let activity: Activity = activityStore.getActivity(uuid, name);
+        if (!dataStore.activityStore) throw Error("TODO: Must handle these");
+
+        let activity: Activity = dataStore.activityStore.getActivity(uuid, name);
         if (!activity) {
           throw new Error('Activity not found');
         }
 
         // Get meta data
-        const meta = this.loader.getMetaStrings();
+        const meta = dataStore.getMetaStrings();
         this.currentActivity = activity;
         this.KnowledgeLabel = meta.knowledgeLabels[activity.difficultyOfImplementation.knowledge];
         this.TimeLabel = meta.labels[activity.difficultyOfImplementation.time];

src/app/component/circular-heatmap/circular-heatmap.component.css

@@ -129,6 +129,12 @@ progress-slider {
 .filter-container {
   position: relative;
 }
+
+.ng-star-inserted span {
+    font-size: smaller;
+    font-style: italic;
+}
+
 button.filter-toggle {
   position: absolute;
   top: 2px;

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

@@ -258,11 +258,16 @@ <h2>Nothing to show</h2>
                     </label>
                           <progress-slider
                           [steps]="progressStates"
-                          [initial]="getTeamProgressState(activity['uuid'], team.key)">
+                          [initial]="getTeamProgressState(activity['uuid'], team.key)"
+                          (progressChange)="onProgressChange(activity['uuid'], team.key, $event)"
                           ></progress-slider>
                     </li>
                   </ng-container>
                 </ul>
+                <div>
+                  <span >* Has been modified</span><br/>
+                  <span >** Has been modified to less complete stage then before</span>
+                </div>
               </ng-template>
             </mat-expansion-panel>
           </mat-card-content>

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

@@ -17,9 +17,10 @@ import {
   ModalMessageComponent,
   DialogInfo,
 } from '../modal-message/modal-message.component';
-import { ActivityStore } from 'src/app/model/activity-store';
-import { MetaFile, ProgressDefinition } from 'src/app/model/meta';
+import { Activity, ActivityStore } from 'src/app/model/activity-store';
+import { Uuid, ProgressDefinition, TeamName, ProgressTitle } from 'src/app/model/meta';
 import { SectorViewController } from './sector-viewcontroller';
+import { DataStore } from 'src/app/model/data-store';
 
 
 export interface old_activitySchema {
@@ -72,8 +73,8 @@ export class CircularHeatmapComponent implements OnInit {
   old_activityDetails: any;
   @ViewChildren(MatChip) chips!: QueryList<MatChip>;
   matChipsArray: MatChip[] = [];
-  meta: MetaFile | null = null;
-  activityStore: ActivityStore | null = null;
+  // meta: MetaFile | null = null;
+  dataStore: DataStore | null = null;
 
   // New properties for refactored data
   dimLabels: string[] = [];
@@ -99,19 +100,26 @@ export class CircularHeatmapComponent implements OnInit {
     // Ensure that Levels and Teams load before MaturityData
     // using promises, since ngOnInit does not support async/await
     this.loader.load()
-      .then((activityStore: ActivityStore) => {
+      .then((dataStore: DataStore) => {
         console.log(`${this.perfNow()}s: set filters: ${this.chips?.length}`);
         this.matChipsArray = this.chips.toArray();
-        this.meta = this.loader.meta;
-        this.filtersTeams = this.buildFilters(this.meta?.teams as string[]);
-        this.filtersTeamGroups = this.buildFilters(Object.keys(this.meta?.teamGroups || {}));
+        // this.meta = this.loader.meta;
+        if (!dataStore.activityStore) {
+          throw Error("TODO: Ooops! Dette må håndteres");
+        }
+        if (!dataStore.progressStore) {
+          throw Error("TODO: Ooops! Dette må håndteres");
+        }
+
+        this.filtersTeams = this.buildFilters(dataStore.meta?.teams as string[]);
+        this.filtersTeamGroups = this.buildFilters(Object.keys(dataStore.meta?.teamGroups || {}));
         this.filtersTeamGroups['All'] = true;
 
-        let progressDefinition: ProgressDefinition = this.meta?.progressDefinition || {};
-        SectorViewController.init(this.meta?.teams || [], activityStore.getProgress(), progressDefinition);
+        let progressDefinition: ProgressDefinition = dataStore.meta?.progressDefinition || {};
+        SectorViewController.init(dataStore.progressStore, dataStore.meta?.teams || [], dataStore?.progressStore?.getProgressData() || {}, progressDefinition);
         this.progressStates = SectorViewController.getProgressStates();
 
-        this.setYamlData(activityStore);
+        this.setYamlData(dataStore);
 
         // For now, just draw the sectors (no activities yet)
         this.loadCircularHeatMap(
@@ -138,16 +146,16 @@ export class CircularHeatmapComponent implements OnInit {
     console.log(message);
   }
 
-  setYamlData(activityStore: ActivityStore) {
-    this.activityStore = activityStore;
-    this.maxLevel = this.loader.getMaxLevel();
-    this.dimensionLabels = activityStore.getAllDimensionNames();
+  setYamlData(dataStore: DataStore) {
+    this.dataStore = dataStore;
+    this.maxLevel = dataStore.getMaxLevel();
+    this.dimensionLabels = dataStore?.activityStore?.getAllDimensionNames() || [];
 
     // Prepare all sectors: one for each (dimension, level) pair
     this.allSectors = [];
     for (let lvl = 1; lvl <= this.maxLevel; lvl++) {
       for (let dimName of this.dimensionLabels) {
-        const activities = activityStore.getActivities(dimName, lvl);
+        const activities: Activity[] = dataStore?.activityStore?.getActivities(dimName, lvl) || [];
         this.allSectors.push(new SectorViewController(
           dimName,
           'Level ' + lvl,
@@ -174,7 +182,7 @@ export class CircularHeatmapComponent implements OnInit {
       this.old_yaml.setURI('./assets/YAML/generated/generated.yaml');
       this.old_yaml.getJson().subscribe(async data => {
         console.log(`${this.perfNow()}s: LoadMaturityData Downloaded`);
-        const activityStore: ActivityStore = await this.loader.load();
+        const activityStore: ActivityStore = new ActivityStore(); // await this.loader.load();
         this.old_YamlObject = activityStore.data;
         this.OBSOLETE_AddSegmentLabels(this.old_YamlObject);
         const localStorageData = this.getDatasetFromBrowserStorage();
@@ -361,16 +369,15 @@ export class CircularHeatmapComponent implements OnInit {
       chip.toggleSelected();
 
       Object.keys(this.filtersTeams).forEach(key => {
-        this.filtersTeams[key] = this.meta?.teamGroups[teamGroup]?.includes(key) || false;
+        this.filtersTeams[key] = this.dataStore?.meta?.teamGroups[teamGroup]?.includes(key) || false;
       });
       this.hasTeamsFilter = Object.values(this.filtersTeams).some(v => v === true);
     }
   }
 
   getTeamProgressState(activityUuid: string, teamName: string): string {
-    return this.activityStore?.getTeamProgressState(activityUuid, teamName) || '';
-    return this.selectedSector?.activities?.find(a => a.uuid === activityUuid)?.teamsImplemented[teamName] || '';
-
+    return this.dataStore?.progressStore?.getTeamActivityTitle(activityUuid, teamName) || '';
+    // return this.selectedSector?.activities?.find(a => a.uuid === activityUuid)?.teamsImplemented[teamName] || '';
   }
 
   toggleTeamFilter(chip: MatChip) {
@@ -381,8 +388,8 @@ export class CircularHeatmapComponent implements OnInit {
 
     let selectedTeams: string[] = Object.keys(this.filtersTeams).filter(key => this.filtersTeams[key]);
 
-    Object.keys(this.meta?.teamGroups || {}).forEach(group => {
-      let match: boolean = equalArray(selectedTeams, this.meta?.teamGroups[group]);
+    Object.keys(this.dataStore?.meta?.teamGroups || {}).forEach(group => {
+      let match: boolean = equalArray(selectedTeams, this.dataStore?.meta?.teamGroups[group]);
       this.filtersTeamGroups[group] = match;
     });
   }
@@ -480,6 +487,28 @@ export class CircularHeatmapComponent implements OnInit {
     this.reColorHeatmap();
   }
 
+  onProgressChange(
+    activityUuid: Uuid,
+    teamName: TeamName,
+    newProgress: ProgressTitle)
+  {
+    if (!this.dataStore || !this.dataStore.progressStore || !this.dataStore.activityStore) {
+      throw Error('Data store or progress store is not initialized.');
+    }
+
+    this.dataStore.progressStore.setTeamActivityProgressState(
+      activityUuid,
+      teamName,
+      newProgress);
+    // this.reColorHeatmap();
+    let activity: Activity = this.dataStore.activityStore.getActivityByUuid(activityUuid);   
+    let index = this.dimensionLabels.indexOf(activity.dimension)
+      + this.dimensionLabels.length * (activity.level -1) ;
+
+    this.recolorSector(index);
+    // this.recolorSector(activityUuid, teamName);
+  }
+
   loadCircularHeatMap(
     dom_element_to_append_to: string,
     dataset: any,
@@ -513,6 +542,8 @@ export class CircularHeatmapComponent implements OnInit {
       .segmentLabelHeight(segmentLabelHeight);
 
     chart.accessor(function (d: any) {
+      if (d.getSectorProgress() > 0)
+        console.log('Color', d.level, d.dimension, d.value, d.getSectorProgress());
       return d.getSectorProgress();
     });
 
@@ -885,6 +916,21 @@ export class CircularHeatmapComponent implements OnInit {
     }
   }
 
+  recolorSector(index: number) {
+    // console.log('recolorSector', index);
+    var colorSector = d3
+      .scaleLinear<string, string>()
+      .domain([0, 1])
+      .range(['white', 'green']);
+
+    let progressValue: number = this.allSectors[index].getSectorProgress();
+    d3.select('#index-' + index).attr(
+      'fill',
+      colorSector(progressValue)
+    );
+    console.log(`Recolor sector ${index} with progress ${(progressValue*100).toFixed(1)}%`);
+  }
+
   reColorHeatmap() {
     console.log('recolor');
     var teamsCount = this.old_teamVisible.length;

src/app/component/circular-heatmap/sector-viewcontroller.ts

@@ -1,7 +1,9 @@
 import { Activity } from "src/app/model/activity-store";
-import { ActivityProgress, Progress, ProgressDefinition, TeamNames, TeamProgress } from "src/app/model/meta";
+import { ActivityProgress, Progress, ProgressDefinition, TeamNames, TeamProgress, Uuid } from "src/app/model/meta";
+import { ProgressStore } from "src/app/model/progress-store";
 
 export class SectorViewController {
+    static _progressStore: ProgressStore | null;
     static _allProgress: Progress | null;
     static _progressValues: ProgressDefinition | null;
     static _progressStates: string[] | null;
@@ -13,16 +15,17 @@ export class SectorViewController {
     activities: Activity[];
     progressValue: number;
 
-    static init(teamnames: TeamNames, progress: Progress, progressStates: ProgressDefinition) {
+    static init(progressStore: ProgressStore, teamnames: TeamNames, progress: Progress, progressStates: ProgressDefinition) {
+      this._progressStore = progressStore;
       this._allTeams = teamnames;
       this._allProgress = progress;
       this._progressValues = progressStates;
       this._progressStates = Object.keys(progressStates)
-      .sort((a, b) => progressStates[b] - progressStates[a]);      
+            .sort((a, b) => progressStates[b] - progressStates[a]);      
     }
 
     static getProgressStates() {
-      return this._progressStates?.reverse() || [];
+      return this._progressStates?.slice().reverse() || [];
     }
 
     static setVisibleTeams(teams: TeamNames) {
@@ -54,27 +57,15 @@ export class SectorViewController {
     }
 
     // Calculate the progress of an activity, across all visible teams
-    private getActivityProgress(uuid: string, teams: TeamNames): number {
+    private getActivityProgress(uuid: Uuid, teams: TeamNames): number {
       let activity: ActivityProgress = SectorViewController._allProgress?.[uuid] || {};
       let progress: number = 0;
       for (const team of teams) {
-        progress += SectorViewController.getProgressValue(activity[team]);
+        progress += SectorViewController._progressStore?.getTeamActivityProgressValue(uuid, team) || 0;
       }
       return progress / teams.length;
     }
 
-    // Calculate the progress value for a team progress state
-    static getProgressValue(teamProgress: TeamProgress): number {
-      if (!this._progressValues) return 0;
-      if (!teamProgress) return 0;
-  
-      for (const state of SectorViewController._progressStates || []) {
-        if (teamProgress[state] !== undefined) {
-          return this._progressValues[state];
-        }
-      }
-      return 0;
-    }
   }