doc

client/src/components/UploadItem.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   },
   status: {
     type: String as PropType<QueueStatus>,
-    default: () => "Queued" as QueueStatus
+    default: () => "Queued"
   },
   error: {
     type: UploadError as PropType<UploadError | null>,

client/src/views/ProgressChart.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { reportError } from '@/stores/errorstore';
 import _ from 'lodash'
 
 // chartjs
@@ -51,6 +52,20 @@ import { BSpinner } from 'bootstrap-vue-next'
 import { ref, onMounted, nextTick } from 'vue'
 import { DateTime } from 'luxon';
 
+interface ChartDataPoint {
+  x: DateTime<true>,
+  y: number,
+  name: string,
+  step: number,
+  originalDate: DateTime<true>
+}
+
+interface DSet {
+  label: string,
+  data: ChartDataPoint[],
+  pointRadius: number
+}
+
 const props = defineProps({
   sid: {
     type: String,
@@ -70,50 +85,62 @@ function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
   return _.groupBy(trackFlatList, (x: Track) => x.year())
 }
 
-function progressDataSets(tracksByYear: TracksByYearDict) {
-
-  interface DSet {
-    label: string,
-    data: { x: DateTime, y: number }[],
-    pointRadius: number
-  }
-
-  const returnValue: DSet[] = []
+/**
+ * Converts yearly track data into Chart.js line datasets, calculating
+ * cumulative distance for each year with dates normalized to 2024 for comparison.
+ * @param tracksByYear Dictionary mapping years to arrays of Track objects
+ * @returns Array of Chart.js datasets with cumulative distance data, larger point radius for the most recent year
+ */
+function generateChartDataSets(tracksByYear: TracksByYearDict) {
 
   const yearList = _.keys(tracksByYear).map((ys) => Number.parseInt(ys))
   yearList.sort().reverse()
 
   const maxYear = Math.max(...yearList)
+
+  // Add one dataset per year, with cumulative distance and normalized dates for comparison
+  const returnDataSetList: DSet[] = []
   for (const year of yearList) {
 
     if (tracksByYear[year] !== undefined) {
 
-      const dateAndLength = tracksByYear[year].map((t) => {
-        return { x: t.getTime(), delta: t.distance(), name: t.getNameOrSrc() }
-      })
+      // Clean and sort tracks for the year
+      const sortedValidTracks: Track[] = []
+      for (const track of tracksByYear[year]) {
 
-      const dateAndLengthClean = dateAndLength.filter((e) => {
-        return (e.x !== null)
-      }) as { x: DateTime<boolean>, delta: number, name: string }[]
+        const tTime = track.getTime()
 
-      dateAndLengthClean.sort((a, b) => (a.x.toSeconds() - b.x.toSeconds()))
+        if (tTime?.isValid) {
+          sortedValidTracks.push(track)
+        }
+        sortedValidTracks.sort((a, b) => (a.getTime()!.toSeconds() - b.getTime()!.toSeconds()))
+      }
 
+      // map tracks to dataset structure with cumulative distance, normalizing dates to 2024 for comparison across years
       let sum = 0
-      const datesAndCumulatedLength = dateAndLengthClean.map(({ x, delta, name }) => {
-        const step = delta / 1000
-        sum += step
-        const normDate = x.set({ year: 2024 })
-        return { x: normDate, y: sum, step, name }
-      })
+      const chartData: ChartDataPoint[] = sortedValidTracks.map(
+        (t: Track) => {
+          const step = t.distance() / 1000
+          sum += step
+
+          const trackDate = t.getTime() as DateTime<true>
+          const normDate = trackDate.set({ year: 2024 })
+          return {
+            x: normDate, y: sum, step, name: t.getNameOrSrc(), originalDate: trackDate
+          }
+        })
+
+      // Label below is for whole dataset, not individual points
       const dataset: DSet = {
         label: year.toString(),
-        data: datesAndCumulatedLength,
+        data: chartData,
         pointRadius: (year === maxYear) ? 5 : 3
       }
-      returnValue.push(dataset)
+
+      returnDataSetList.push(dataset)
     }
   }
-  return returnValue
+  return returnDataSetList
 }
 
 // load tracks async
@@ -126,9 +153,6 @@ onMounted(() => {
     // should be defined after mount
     if (canvasref.value !== null) {
 
-      // create and paint chart with no data
-      interface ChartData { x: number, y: number, step: number, name: string }
-
       const mychart = new Chart<"line", { x: DateTime; y: number; }[], DateTime>(
         canvasref.value,
         {
@@ -142,7 +166,7 @@ onMounted(() => {
               x: {
                 type: "time",
                 time: {
-                  tooltipFormat: 'ccc MMM d',
+                  //  tooltipFormat: 'ccc MMM d',
                   displayFormats: {
                     month: 'MMM',
                     year: ''
@@ -170,14 +194,14 @@ onMounted(() => {
               tooltip: {
                 boxPadding: 10,
                 callbacks: {
-                  beforeLabel: function (context) {
-                    return context.dataset.label
+                  title: function (dataset) {
+                    return (dataset[0]?.raw as ChartDataPoint).originalDate.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
                   },
-                  label: function (context) {
-                    return Math.round((context.raw as ChartData).step) + " km"
+                  label: function (item) {
+                    return Math.round((item.raw as ChartDataPoint).step) + " km"
                   },
-                  afterLabel: function (context) {
-                    return (context.raw as ChartData).name
+                  afterLabel: function (item) {
+                    return (item.raw as ChartDataPoint).name
                   }
                 }
               },
@@ -204,18 +228,18 @@ onMounted(() => {
       // wait for loading of tracks to complete
       const allTracks = await allTracksPromise
       const tby = tracksByYear(allTracks)
-      const pgDs = progressDataSets(tby)
+      const pgDs = generateChartDataSets(tby)
 
       // update chart data
       mychart.data.datasets = pgDs
       mychart.update()
       loading.value = false
 
     } else {
-      console.log("Canvas null")
+      reportError("Canvas null")
     }
   }).catch((err) => {
-    console.error("Error in nextTick", err)
+    reportError("Error in nextTick", err)
   })
 })
 

client/src/views/UploadPage.vue

@@ -123,7 +123,7 @@ function completedCallBack(err: CallbackArguments[0], key: CallbackArguments[1])
     reportError('Error cause: ', err)
     setItemProcessingStatus(key, 'Failed')
   } else {
-    setItemProcessingStatus(key, 'Completed' as QueueStatus)
+    setItemProcessingStatus(key, 'Completed')
     setTimeout(() => {
       setItemVisibility(key, false)
       // console.log(`Removed ${key}`)

client/tests/unit/lib/auth/registration.spec.ts

@@ -40,7 +40,7 @@ describe("registerPasskey", () => {
       attestationObject: "test-attestation-object",
       transports: ["internal" as const]
     },
-    clientExtensionResults: {} as Record<string, unknown>,
+    clientExtensionResults: {},
     type: "public-key" as const
   } as RegistrationResponseJSON
 

client/tests/unit/lib/trackServices.spec.ts

@@ -62,7 +62,7 @@ class RelativeRequest extends OriginalRequest {
     if (typeof input === 'string' && input.startsWith('/')) {
       super(`http://localhost${input}`, init)
     } else {
-      super(input as string, init)
+      super(input, init)
     }
   }
 }