fixes for heatmap data munging

Author: NiloCK

packages/common-ui/src/components/HeatMap.vue

@@ -89,7 +89,10 @@ export default defineComponent({
       return 7 * (this.cellSize + this.cellMargin);
     },
     effectiveActivityRecords(): ActivityRecord[] {
-      return this.localActivityRecords.length > 0 ? this.localActivityRecords : this.activityRecords;
+      const useLocal = Array.isArray(this.localActivityRecords) && this.localActivityRecords.length > 0;
+      const records = useLocal ? this.localActivityRecords : this.activityRecords || [];
+      console.log('Using effectiveActivityRecords, count:', records.length, 'source:', useLocal ? 'local' : 'prop');
+      return records;
     },
   },
 
@@ -107,12 +110,28 @@ export default defineComponent({
     if (this.activityRecordsGetter) {
       try {
         this.isLoading = true;
-        this.localActivityRecords = await this.activityRecordsGetter();
+        console.log('Fetching activity records using getter...');
+        // Ensure the getter is called safely with proper error handling
+        const result = await this.activityRecordsGetter();
+        
+        if (Array.isArray(result)) {
+          this.localActivityRecords = result;
+          console.log('Received activity records:', this.localActivityRecords.length);
+          // Process the loaded records
+          this.processRecords();
+          this.createWeeksData();
+        } else {
+          console.error('Activity records getter did not return an array:', result);
+          this.localActivityRecords = [];
+        }
       } catch (error) {
         console.error('Error fetching activity records:', error);
+        this.localActivityRecords = [];
       } finally {
         this.isLoading = false;
       }
+    } else {
+      console.log('No activityRecordsGetter provided, using direct activityRecords prop');
     }
   },
 
@@ -123,35 +142,67 @@ export default defineComponent({
     },
 
     processRecords() {
-      const records = this.effectiveActivityRecords;
+      const records = this.effectiveActivityRecords || [];
       console.log(`Processing ${records.length} records`);
 
       const data: { [key: string]: number } = {};
 
+      if (records.length === 0) {
+        console.log('No records to process');
+        this.heatmapData = data;
+        return;
+      }
+
       records.forEach((record) => {
-        const date = moment(record.timeStamp).format('YYYY-MM-DD');
-        data[date] = (data[date] || 0) + 1;
+        if (!record || typeof record !== 'object') {
+          console.warn('Invalid record:', record);
+          return;
+        }
+        
+        if (!record.timeStamp) {
+          console.warn('Record missing timeStamp:', record);
+          return;
+        }
+        
+        // Make sure timeStamp is properly handled
+        let date;
+        try {
+          // Try to parse the timestamp
+          const m = moment(record.timeStamp);
+          if (m.isValid()) {
+            date = m.format('YYYY-MM-DD');
+            data[date] = (data[date] || 0) + 1;
+          } else {
+            console.warn('Invalid date from record:', record);
+          }
+        } catch (e) {
+          console.error('Error processing record date:', e, record);
+        }
       });
 
+      console.log('Processed heatmap data:', Object.keys(data).length, 'unique dates');
       this.heatmapData = data;
     },
 
     createWeeksData() {
       // Reset weeks and max count
       this.weeks = [];
       this.maxInRange = 0;
-
+      
       const end = moment();
       const start = end.clone().subtract(52, 'weeks');
       const day = start.clone().startOf('week');
+      
+      console.log('Creating weeks data from', start.format('YYYY-MM-DD'), 'to', end.format('YYYY-MM-DD'));
 
       while (day.isSameOrBefore(end)) {
         const weekData: DayData[] = [];
         for (let i = 0; i < 7; i++) {
           const date = day.format('YYYY-MM-DD');
+          const count = this.heatmapData[date] || 0;
           const dayData: DayData = {
             date,
-            count: this.heatmapData[date] || 0,
+            count,
           };
           weekData.push(dayData);
           if (dayData.count > this.maxInRange) {
@@ -162,6 +213,10 @@ export default defineComponent({
         }
         this.weeks.push(weekData);
       }
+      
+      console.log('Weeks data created, maxInRange:', this.maxInRange);
+      console.log('First week sample:', this.weeks[0]);
+      console.log('Last week sample:', this.weeks[this.weeks.length - 1]);
     },
 
     getColor(count: number): string {

packages/common-ui/src/components/StudySession.vue

@@ -19,7 +19,7 @@
         Start <a @click="$emit('session-finished')">another study session</a>, or try
         <router-link :to="`/edit/${courseID}`">adding some new content</router-link> to challenge yourself and others!
       </p>
-      <heat-map :activity-records-getter="user.getActivityRecords" />
+      <heat-map :activity-records-getter="() => user.getActivityRecords()" />
     </div>
 
     <div v-else ref="shadowWrapper">

packages/db/src/impl/pouch/userDB.ts

@@ -245,20 +245,48 @@ Currently logged-in as ${this._username}.`
   }
 
   public async getActivityRecords(): Promise<ActivityRecord[]> {
-    const hist = await this.getHistory();
-
-    const allRecords: ActivityRecord[] = [];
-    for (let i = 0; i < hist.length; i++) {
-      if (hist[i] && hist[i]!.records) {
-        hist[i]!.records.forEach((record: CardRecord) => {
-          allRecords.push({
-            timeStamp: record.timeStamp.toString(),
-          });
-        });
+    try {
+      const hist = await this.getHistory();
+      
+      const allRecords: ActivityRecord[] = [];
+      if (!Array.isArray(hist)) {
+        console.error('getHistory did not return an array:', hist);
+        return allRecords;
+      }
+      
+      for (let i = 0; i < hist.length; i++) {
+        try {
+          if (hist[i] && Array.isArray(hist[i]!.records)) {
+            hist[i]!.records.forEach((record: CardRecord) => {
+              try {
+                // Convert Moment objects to ISO string format for consistency
+                const timeStamp = record.timeStamp && typeof record.timeStamp.isValid === 'function' && record.timeStamp.isValid() 
+                  ? record.timeStamp.toISOString() 
+                  : new Date().toISOString();
+                  
+                allRecords.push({
+                  timeStamp,
+                  courseID: record.courseID || 'unknown',
+                  cardID: record.cardID || 'unknown',
+                  timeSpent: record.timeSpent || 0,
+                  type: 'card_view'
+                });
+              } catch (err) {
+                console.error('Error processing record:', err, record);
+              }
+            });
+          }
+        } catch (err) {
+          console.error('Error processing history item:', err, hist[i]);
+        }
       }
-    }
 
-    return allRecords;
+      console.log(`Found ${allRecords.length} activity records`);
+      return allRecords;
+    } catch (err) {
+      console.error('Error in getActivityRecords:', err);
+      return [];
+    }
   }
 
   private async getReviewstoDate(targetDate: Moment, course_id?: string) {