From fe69fdccd82109a91a80847ebd0356377b3d2181 Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Sun, 17 May 2026 19:55:25 +0200
Subject: [PATCH 1/6] refactoring 1

---
 client/src/lib/progress/progressChart.ts | 80 ++++++++++++++++++++++++
 client/src/views/ProgressChart.vue       | 75 +---------------------
 2 files changed, 81 insertions(+), 74 deletions(-)
 create mode 100644 client/src/lib/progress/progressChart.ts

diff --git a/client/src/lib/progress/progressChart.ts b/client/src/lib/progress/progressChart.ts
new file mode 100644
index 0000000..83c53f4
--- /dev/null
+++ b/client/src/lib/progress/progressChart.ts
@@ -0,0 +1,80 @@
+import { DateTime } from 'luxon';
+import _ from 'lodash'
+
+import { Track } from '@/lib/Track'
+
+type TracksByYearDict = Record<number, Track[]>;
+
+interface ChartDataPoint {
+  x: DateTime<true>,
+  y: number,
+  name: string,
+  step: number,
+  originalDate: DateTime<true>
+}
+
+interface DSet {
+  label: string,
+  data: ChartDataPoint[],
+  pointRadius: number
+}
+
+/**
+ * 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) {
+
+      // Clean and sort tracks for the year
+      const sortedValidTracks: Track[] = []
+      for (const track of tracksByYear[year]) {
+
+        const tTime = track.getTime()
+
+        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 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: chartData,
+        pointRadius: (year === maxYear) ? 5 : 3
+      }
+
+      returnDataSetList.push(dataset)
+    }
+  }
+  return returnDataSetList
+}
+
+export { generateChartDataSets, type TracksByYearDict, type ChartDataPoint, type DSet }
\ No newline at end of file
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 4bf7e79..08b00c5 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { reportError } from '@/stores/errorstore';
+import { generateChartDataSets, type TracksByYearDict, type ChartDataPoint } from '@/lib/progress/progressChart'
 import _ from 'lodash'
 
 // chartjs
@@ -52,20 +53,6 @@ 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,
@@ -77,71 +64,11 @@ const props = defineProps({
 const loading = ref(true)
 const canvasref = ref<(null | HTMLCanvasElement)>(null)
 
-// helper functions
-type TracksByYearDict = Record<number, Track[]>;
-
 function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
   const trackFlatList = _.values(loadedTracks)
   return _.groupBy(trackFlatList, (x: Track) => x.year())
 }
 
-/**
- * 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) {
-
-      // Clean and sort tracks for the year
-      const sortedValidTracks: Track[] = []
-      for (const track of tracksByYear[year]) {
-
-        const tTime = track.getTime()
-
-        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 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: chartData,
-        pointRadius: (year === maxYear) ? 5 : 3
-      }
-
-      returnDataSetList.push(dataset)
-    }
-  }
-  return returnDataSetList
-}
 
 // load tracks async
 const allTracksPromise = getAllTracks(props.sid)

From 9b2fb7220adffc5d53d8839fdac089c32ec8fd83 Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Sun, 17 May 2026 23:17:56 +0200
Subject: [PATCH 2/6] refactoring

---
 client/src/lib/progress/progressChart.ts      | 20 +----
 .../src/lib/progress/progressChartConfig.ts   | 74 ++++++++++++++++++
 client/src/lib/progress/progressChartTypes.ts | 23 ++++++
 client/src/views/ProgressChart.vue            | 76 ++-----------------
 4 files changed, 105 insertions(+), 88 deletions(-)
 create mode 100644 client/src/lib/progress/progressChartConfig.ts
 create mode 100644 client/src/lib/progress/progressChartTypes.ts

diff --git a/client/src/lib/progress/progressChart.ts b/client/src/lib/progress/progressChart.ts
index 83c53f4..acddb60 100644
--- a/client/src/lib/progress/progressChart.ts
+++ b/client/src/lib/progress/progressChart.ts
@@ -2,22 +2,8 @@ import { DateTime } from 'luxon';
 import _ from 'lodash'
 
 import { Track } from '@/lib/Track'
+import type { TracksByYearDict, ExtendedPChartDataPoint, DSet } from '@/lib/progress/progressChartTypes'
 
-type TracksByYearDict = Record<number, Track[]>;
-
-interface ChartDataPoint {
-  x: DateTime<true>,
-  y: number,
-  name: string,
-  step: number,
-  originalDate: DateTime<true>
-}
-
-interface DSet {
-  label: string,
-  data: ChartDataPoint[],
-  pointRadius: number
-}
 
 /**
  * Converts yearly track data into Chart.js line datasets, calculating
@@ -52,7 +38,7 @@ function generateChartDataSets(tracksByYear: TracksByYearDict) {
 
       // map tracks to dataset structure with cumulative distance, normalizing dates to 2024 for comparison across years
       let sum = 0
-      const chartData: ChartDataPoint[] = sortedValidTracks.map(
+      const chartData: ExtendedPChartDataPoint[] = sortedValidTracks.map(
         (t: Track) => {
           const step = t.distance() / 1000
           sum += step
@@ -77,4 +63,4 @@ function generateChartDataSets(tracksByYear: TracksByYearDict) {
   return returnDataSetList
 }
 
-export { generateChartDataSets, type TracksByYearDict, type ChartDataPoint, type DSet }
\ No newline at end of file
+export { generateChartDataSets }
\ No newline at end of file
diff --git a/client/src/lib/progress/progressChartConfig.ts b/client/src/lib/progress/progressChartConfig.ts
new file mode 100644
index 0000000..637c0a5
--- /dev/null
+++ b/client/src/lib/progress/progressChartConfig.ts
@@ -0,0 +1,74 @@
+import type { ChartConfiguration } from "chart.js"
+import { DateTime } from "luxon";
+import type { ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
+
+
+const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PChartTLabel> = {
+  type: 'line',
+  data: {
+    datasets: [],
+  },
+  options: {
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: "time",
+        time: {
+          displayFormats: {
+            month: 'MMM',
+            year: ''
+          },
+          unit: 'month'
+        },
+        min: '2024-01-01',
+        max: '2025-01-02',
+        title: {
+          display: true,
+          text: "Day in year"
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Mileage'
+        },
+        ticks: {
+          callback: (value) => `${Math.round(value as number)} km`
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        boxPadding: 10,
+        callbacks: {
+          title: function (dataset) {
+            return (dataset[0]?.raw as ExtendedPChartDataPoint).originalDate.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
+          },
+          label: function (item) {
+            return Math.round((item.raw as ExtendedPChartDataPoint).step) + " km"
+          },
+          afterLabel: function (item) {
+            return (item.raw as ExtendedPChartDataPoint).name
+          }
+        }
+      },
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true
+          },
+          mode: 'xy',
+        },
+        pan: {
+          enabled: true,
+
+        }
+      }
+    }
+  }
+}
+
+export { chartConfig }
\ No newline at end of file
diff --git a/client/src/lib/progress/progressChartTypes.ts b/client/src/lib/progress/progressChartTypes.ts
new file mode 100644
index 0000000..c939e3e
--- /dev/null
+++ b/client/src/lib/progress/progressChartTypes.ts
@@ -0,0 +1,23 @@
+import { DateTime } from "luxon";
+import { Track } from "@/lib/Track";
+
+type TracksByYearDict = Record<number, Track[]>;
+
+type PChartTType = 'line'
+interface PChartDataPoint { x: DateTime<true>; y: number; }
+type PChartTLabel = DateTime
+
+
+interface ExtendedPChartDataPoint extends PChartDataPoint {
+  name: string,
+  step: number,
+  originalDate: DateTime<true>
+}
+
+interface DSet {
+  label: string,
+  data: ExtendedPChartDataPoint[],
+  pointRadius: number
+}
+
+export type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartTType, PChartDataPoint, PChartTLabel }
\ No newline at end of file
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 08b00c5..a472287 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -14,7 +14,9 @@
 
 <script setup lang="ts">
 import { reportError } from '@/stores/errorstore';
-import { generateChartDataSets, type TracksByYearDict, type ChartDataPoint } from '@/lib/progress/progressChart'
+import { chartConfig } from '@/lib/progress/progressChartConfig';
+import { generateChartDataSets } from '@/lib/progress/progressChart'
+import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
 import _ from 'lodash'
 
 // chartjs
@@ -51,7 +53,6 @@ import { Track } from '@/lib/Track'
 import { getAllTracks } from '@/lib/trackServices'
 import { BSpinner } from 'bootstrap-vue-next'
 import { ref, onMounted, nextTick } from 'vue'
-import { DateTime } from 'luxon';
 
 const props = defineProps({
   sid: {
@@ -80,76 +81,9 @@ onMounted(() => {
     // should be defined after mount
     if (canvasref.value !== null) {
 
-      const mychart = new Chart<"line", { x: DateTime; y: number; }[], DateTime>(
+      const mychart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(
         canvasref.value,
-        {
-          type: 'line',
-          data: {
-            datasets: [],
-          },
-          options: {
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  //  tooltipFormat: 'ccc MMM d',
-                  displayFormats: {
-                    month: 'MMM',
-                    year: ''
-                  },
-                  unit: 'month'
-                },
-                min: '2024-01-01',
-                max: '2025-01-02',
-                title: {
-                  display: true,
-                  text: "Day in year"
-                }
-              },
-              y: {
-                title: {
-                  display: true,
-                  text: 'Mileage'
-                },
-                ticks: {
-                  callback: (value) => `${Math.round(value as number)} km`
-                }
-              }
-            },
-            plugins: {
-              tooltip: {
-                boxPadding: 10,
-                callbacks: {
-                  title: function (dataset) {
-                    return (dataset[0]?.raw as ChartDataPoint).originalDate.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
-                  },
-                  label: function (item) {
-                    return Math.round((item.raw as ChartDataPoint).step) + " km"
-                  },
-                  afterLabel: function (item) {
-                    return (item.raw as ChartDataPoint).name
-                  }
-                }
-              },
-              zoom: {
-                zoom: {
-                  wheel: {
-                    enabled: true,
-                  },
-                  pinch: {
-                    enabled: true
-                  },
-                  mode: 'xy',
-                },
-                pan: {
-                  enabled: true,
-
-                }
-              }
-            }
-          }
-        }
+        chartConfig
       )
 
       // wait for loading of tracks to complete

From ff1eaf56045fb646d2df6188a88a935e0c64256f Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Mon, 18 May 2026 23:33:51 +0200
Subject: [PATCH 3/6] Filters for progress window

---
 client/src/lib/progress/progressChart.ts      | 104 ++++++++++++------
 client/src/lib/progress/progressChartTypes.ts |   4 +-
 client/src/views/ProgressChart.vue            |  35 ++++--
 client/src/views/TrackOverviewPage.vue        |  16 ++-
 4 files changed, 106 insertions(+), 53 deletions(-)

diff --git a/client/src/lib/progress/progressChart.ts b/client/src/lib/progress/progressChart.ts
index acddb60..5e105a9 100644
--- a/client/src/lib/progress/progressChart.ts
+++ b/client/src/lib/progress/progressChart.ts
@@ -2,64 +2,100 @@ import { DateTime } from 'luxon';
 import _ from 'lodash'
 
 import { Track } from '@/lib/Track'
-import type { TracksByYearDict, ExtendedPChartDataPoint, DSet } from '@/lib/progress/progressChartTypes'
+import type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartSortType } from '@/lib/progress/progressChartTypes'
 
 
 /**
  * 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
+ * @param maxSortType Determines whether to prioritize newest years or highest progress when limiting datasets
+ * @param maxLines Maximum number of datasets (years) to include in the output. Set to 0 for no limit.
  * @returns Array of Chart.js datasets with cumulative distance data, larger point radius for the most recent year
  */
-function generateChartDataSets(tracksByYear: TracksByYearDict) {
+function generateChartDataSets(tracksByYear: TracksByYearDict, maxSortType: PChartSortType = 'newest_year', maxLines = 0): DSet[] {
 
   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) {
+  const yearListToUse: number[] = []
 
-    if (tracksByYear[year] !== undefined) {
+  // Cut down list of years to use based on sorting preference and max lines
+  if (maxSortType === 'newest_year') {
+    yearListToUse.push(...yearList.slice(0, maxLines === 0 ? yearList.length : maxLines))
 
-      // Clean and sort tracks for the year
-      const sortedValidTracks: Track[] = []
-      for (const track of tracksByYear[year]) {
+  } else if (maxSortType === 'highest_progress') {
+    yearListToUse.push(...yearList) // filtering is later
+  }
 
-        const tTime = track.getTime()
+  const progressYearPairs: { year: number, progress: number }[] = [] // for ranking by progress if needed
+  const dataSetByYear: Record<number, DSet> = {} // for easy lookup when sorting by progress
 
-        if (tTime?.isValid) {
-          sortedValidTracks.push(track)
-        }
-        sortedValidTracks.sort((a, b) => (a.getTime()!.toSeconds() - b.getTime()!.toSeconds()))
+  for (const year of yearListToUse) {
+
+    if ((tracksByYear[year] === undefined) || tracksByYear[year].length === 0) continue
+
+    // Clean and sort tracks for the year
+    const sortedValidTracks: Track[] = []
+    for (const track of tracksByYear[year]) {
+
+      const tTime = track.getTime()
+
+      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 chartData: ExtendedPChartDataPoint[] = 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: chartData,
-        pointRadius: (year === maxYear) ? 5 : 3
+    // map tracks to dataset structure with cumulative distance, normalizing dates to 2024 for comparison across years
+    let sum = 0
+    const chartData: ExtendedPChartDataPoint[] = 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
+        }
       }
+    )
 
-      returnDataSetList.push(dataset)
+    const totalProgress = chartData.at(-1)?.y ?? 0 // can not happen 
+    progressYearPairs.push({ year, progress: totalProgress })
+
+    // Label below is for whole dataset, not individual points
+    const dataset: DSet = {
+      label: year.toString(),
+      data: chartData,
+      pointRadius: (year === maxYear) ? 5 : 3
     }
+
+    dataSetByYear[year] = dataset
+    //returnDataSetList.push(dataset)
+
   }
+
+  const returnDataSetList: DSet[] = []
+  if (maxSortType === 'newest_year') {
+    // Return datasets for the newest years
+    for (const year of yearListToUse) {
+      returnDataSetList.push(dataSetByYear[year]!)
+    }
+  } else if (maxSortType === 'highest_progress') {
+    // Sort years by progress and return datasets for the top years
+    progressYearPairs.sort((a, b) => b.progress - a.progress)
+    const topYears = progressYearPairs.slice(0, maxLines).map(p => p.year)
+    // sort them again by year for better visual comparison
+    topYears.sort().reverse()
+    for (const year of topYears) {
+      returnDataSetList.push(dataSetByYear[year]!)
+    }
+  }
+
   return returnDataSetList
 }
 
diff --git a/client/src/lib/progress/progressChartTypes.ts b/client/src/lib/progress/progressChartTypes.ts
index c939e3e..a8bbc6f 100644
--- a/client/src/lib/progress/progressChartTypes.ts
+++ b/client/src/lib/progress/progressChartTypes.ts
@@ -20,4 +20,6 @@ interface DSet {
   pointRadius: number
 }
 
-export type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartTType, PChartDataPoint, PChartTLabel }
\ No newline at end of file
+type PChartSortType = 'newest_year' | 'highest_progress'
+
+export type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartTType, PChartDataPoint, PChartTLabel, PChartSortType }
\ No newline at end of file
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index a472287..50028a4 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -1,12 +1,14 @@
 <template>
   <track-manager-nav-bar :sid="sid">
-    <div class="d-flex flex-column flex-grow-1 px-2">
-      <div class="d-flex flex-column">
-        <span v-if="loading">Loading <b-spinner small />
-        </span>
-      </div>
-      <div class="d-flex flex-column flex-grow-1">
-        <canvas id="acquisitions" ref="canvasref"></canvas>
+    <div class="d-flex flex-row border-top border-bottom border-0">
+      <button type="button" class="btn btn-outline-secondary m-2 expandbutton"
+        @click="console.log('Expand/collapse not implemented yet')">
+        ThisButton</button>
+    </div>
+    <div class="d-flex flex-column flex-grow-1">
+      <canvas id="acquisitions" ref="canvasref"></canvas>
+      <div v-if="loading" class="myspinner">
+        <b-spinner />
       </div>
     </div>
   </track-manager-nav-bar>
@@ -16,7 +18,7 @@
 import { reportError } from '@/stores/errorstore';
 import { chartConfig } from '@/lib/progress/progressChartConfig';
 import { generateChartDataSets } from '@/lib/progress/progressChart'
-import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
+import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType, PChartSortType } from '@/lib/progress/progressChartTypes'
 import _ from 'lodash'
 
 // chartjs
@@ -61,7 +63,11 @@ const props = defineProps({
   }
 })
 
+// constants
+const MAX_LINES_WITH_FILTER = 5
+
 // reactives and dom refs
+const filterType = ref<PChartSortType>('highest_progress')
 const loading = ref(true)
 const canvasref = ref<(null | HTMLCanvasElement)>(null)
 
@@ -89,7 +95,7 @@ onMounted(() => {
       // wait for loading of tracks to complete
       const allTracks = await allTracksPromise
       const tby = tracksByYear(allTracks)
-      const pgDs = generateChartDataSets(tby)
+      const pgDs = generateChartDataSets(tby, filterType.value, MAX_LINES_WITH_FILTER)
 
       // update chart data
       mychart.data.datasets = pgDs
@@ -105,3 +111,14 @@ onMounted(() => {
 })
 
 </script>
+
+<style scoped>
+.myspinner {
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+}
+</style>
diff --git a/client/src/views/TrackOverviewPage.vue b/client/src/views/TrackOverviewPage.vue
index c28e6ce..fed0880 100644
--- a/client/src/views/TrackOverviewPage.vue
+++ b/client/src/views/TrackOverviewPage.vue
@@ -1,14 +1,12 @@
 <template>
   <track-manager-nav-bar :sid="sid">
-    <div class="border-top border-bottom border-0">
-      <div class="d-flex flex-row">
-        <button type="button" class="btn btn-outline-secondary m-2 expandbutton" @click="toggleFullExpand">
-          {{ trackOverviewStore.expandPressed ? "Collapse" : "Expand" }}</button>
-        <form @submit.prevent>
-          <input v-model="searchStore.searchText" v-focus class="form-control m-2" placeholder="Search tracks..."
-            @keyup.enter="toggleFullExpand" />
-        </form>
-      </div>
+    <div class="d-flex flex-row border-top border-bottom border-0">
+      <button type="button" class="btn btn-outline-secondary m-2 expandbutton" @click="toggleFullExpand">
+        {{ trackOverviewStore.expandPressed ? "Collapse" : "Expand" }}</button>
+      <form @submit.prevent>
+        <input v-model="searchStore.searchText" v-focus class="form-control m-2" placeholder="Search tracks..."
+          @keyup.enter="toggleFullExpand" />
+      </form>
     </div>
     <div ref="scrollableContainer" class="px-2 flex-grow-1 overflow-auto" style="min-height: 0" @scroll="handleScroll">
       <div>

From 15a07220111249b5ea039e17aed7befa8aeb987b Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Wed, 20 May 2026 00:08:19 +0200
Subject: [PATCH 4/6] buttons and filtering

---
 client/src/lib/progress/progressChart.ts | 52 ++++++++++++-
 client/src/views/ProgressChart.vue       | 95 ++++++++++++++++++++----
 2 files changed, 130 insertions(+), 17 deletions(-)

diff --git a/client/src/lib/progress/progressChart.ts b/client/src/lib/progress/progressChart.ts
index 5e105a9..6b56eee 100644
--- a/client/src/lib/progress/progressChart.ts
+++ b/client/src/lib/progress/progressChart.ts
@@ -89,6 +89,12 @@ function generateChartDataSets(tracksByYear: TracksByYearDict, maxSortType: PCha
     // Sort years by progress and return datasets for the top years
     progressYearPairs.sort((a, b) => b.progress - a.progress)
     const topYears = progressYearPairs.slice(0, maxLines).map(p => p.year)
+
+    // check if min 1 year, then check if current year is in top years, if not add it to the list (for visual comparison)
+    if (topYears.length > 0 && !topYears.includes(maxYear)) {
+      topYears.push(maxYear)
+    }
+
     // sort them again by year for better visual comparison
     topYears.sort().reverse()
     for (const year of topYears) {
@@ -99,4 +105,48 @@ function generateChartDataSets(tracksByYear: TracksByYearDict, maxSortType: PCha
   return returnDataSetList
 }
 
-export { generateChartDataSets }
\ No newline at end of file
+/**
+ * State of both buttons, for now only one can be active at a time, but maybe in the future we want to allow both to be active at the same time. 
+ * Will also print classes for active/inactive state of buttons, so that they can be styled accordingly.
+ *  */
+class FilterButtonState {
+  newestActive: boolean
+  bestActive: boolean
+
+  constructor() {
+    this.newestActive = false
+    this.bestActive = false
+  }
+
+  toggleNewest() {
+    this.newestActive = !this.newestActive
+    if (this.newestActive) {
+      this.bestActive = false
+    }
+  }
+
+  toggleBest() {
+    this.bestActive = !this.bestActive
+    if (this.bestActive) {
+      this.newestActive = false
+    }
+  }
+
+  filterActive(): boolean {
+    return this.newestActive || this.bestActive
+  }
+
+  newestButtonClass() {
+    return FilterButtonState.activeClass(this.newestActive)
+  }
+
+  bestButtonClass() {
+    return FilterButtonState.activeClass(this.bestActive)
+  }
+
+  static activeClass(active: boolean) {
+    return active ? "btn-secondary" : "btn-outline-secondary"
+  }
+}
+
+export { generateChartDataSets, FilterButtonState }
\ No newline at end of file
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 50028a4..1cf0691 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -1,9 +1,10 @@
 <template>
   <track-manager-nav-bar :sid="sid">
     <div class="d-flex flex-row border-top border-bottom border-0">
-      <button type="button" class="btn btn-outline-secondary m-2 expandbutton"
-        @click="console.log('Expand/collapse not implemented yet')">
-        ThisButton</button>
+      <button type="button" class="filterbuttons btn m-2" :class="newestClass" @click="toggleNewest()">
+        Newest</button>
+      <button type="button" class="filterbuttons btn m-2" :class="bestClass" @click="toggleBest()">
+        Best</button>
     </div>
     <div class="d-flex flex-column flex-grow-1">
       <canvas id="acquisitions" ref="canvasref"></canvas>
@@ -17,7 +18,7 @@
 <script setup lang="ts">
 import { reportError } from '@/stores/errorstore';
 import { chartConfig } from '@/lib/progress/progressChartConfig';
-import { generateChartDataSets } from '@/lib/progress/progressChart'
+import { generateChartDataSets, FilterButtonState } from '@/lib/progress/progressChart'
 import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType, PChartSortType } from '@/lib/progress/progressChartTypes'
 import _ from 'lodash'
 
@@ -54,7 +55,9 @@ import TrackManagerNavBar from '@/components/TrackManagerNavBar.vue'
 import { Track } from '@/lib/Track'
 import { getAllTracks } from '@/lib/trackServices'
 import { BSpinner } from 'bootstrap-vue-next'
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, computed } from 'vue'
+
+type ProgressChartType = Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>
 
 const props = defineProps({
   sid: {
@@ -64,22 +67,61 @@ const props = defineProps({
 })
 
 // constants
-const MAX_LINES_WITH_FILTER = 5
+const MAX_YEARLINES_WITH_FILTER = 5
 
 // reactives and dom refs
-const filterType = ref<PChartSortType>('highest_progress')
 const loading = ref(true)
 const canvasref = ref<(null | HTMLCanvasElement)>(null)
 
+
+const filterState = ref(new FilterButtonState())
+
+const newestClass = computed(() => filterState.value.newestButtonClass())
+const bestClass = computed(() => filterState.value.bestButtonClass())
+
+function numYearLines() {
+  return filterState.value.filterActive() ? MAX_YEARLINES_WITH_FILTER : 0
+}
+
+function filterType(): PChartSortType {
+  if (filterState.value.bestActive) {
+    return "highest_progress"
+  } else {
+    return "newest_year"
+  }
+}
+
 function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
   const trackFlatList = _.values(loadedTracks)
   return _.groupBy(trackFlatList, (x: Track) => x.year())
 }
 
-
 // load tracks async
 const allTracksPromise = getAllTracks(props.sid)
 
+let chart: ProgressChartType | null = null
+let allTracks: Track[] = []
+
+function updateChart(ch: ProgressChartType | null, tracks: Track[]) {
+  if (ch !== null) {
+
+    const trByYear = tracksByYear(tracks)
+    const chartDataSets = generateChartDataSets(trByYear, filterType(), numYearLines())
+    ch.data.datasets = chartDataSets
+    ch.update()
+  }
+}
+
+function toggleNewest() {
+  filterState.value.toggleNewest()
+  updateChart(chart, allTracks)
+}
+
+function toggleBest() {
+  filterState.value.toggleBest()
+  updateChart(chart, allTracks)
+}
+
 // generate empty chart
 onMounted(() => {
   nextTick(async () => {
@@ -87,20 +129,15 @@ onMounted(() => {
     // should be defined after mount
     if (canvasref.value !== null) {
 
-      const mychart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(
+      chart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(
         canvasref.value,
         chartConfig
       )
 
       // wait for loading of tracks to complete
-      const allTracks = await allTracksPromise
-      const tby = tracksByYear(allTracks)
-      const pgDs = generateChartDataSets(tby, filterType.value, MAX_LINES_WITH_FILTER)
-
-      // update chart data
-      mychart.data.datasets = pgDs
-      mychart.update()
+      allTracks = await allTracksPromise
       loading.value = false
+      updateChart(chart, allTracks)
 
     } else {
       reportError("Canvas null")
@@ -121,4 +158,30 @@ onMounted(() => {
   transform: translate(-50%, -50%);
 
 }
+
+.filterbuttons {
+  /* disable hover effect */
+
+  &:hover {
+    background-color: var(--bs-btn-bg);
+    color: var(--bs-btn-color);
+  }
+
+  &:focus {
+    background-color: var(--bs-btn-bg);
+    color: var(--bs-btn-color);
+  }
+
+  &.active {
+    &:hover {
+      background-color: var(--bs-btn-active-bg);
+      color: var(--bs-btn-active-color);
+    }
+
+    &:focus {
+      background-color: var(--bs-btn-active-bg);
+      color: var(--bs-btn-active-color);
+    }
+  }
+}
 </style>

From da92d37e96226e275a7123e4142bbbbf32125889 Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Wed, 20 May 2026 00:13:17 +0200
Subject: [PATCH 5/6] comments

---
 client/src/views/ProgressChart.vue | 78 ++++++++++++++----------------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 1cf0691..796b35c 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { reportError } from '@/stores/errorstore';
-import { chartConfig } from '@/lib/progress/progressChartConfig';
+import { reportError } from '@/stores/errorstore'
+import { chartConfig } from '@/lib/progress/progressChartConfig'
 import { generateChartDataSets, FilterButtonState } from '@/lib/progress/progressChart'
 import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType, PChartSortType } from '@/lib/progress/progressChartTypes'
 import _ from 'lodash'
@@ -34,6 +34,8 @@ import {
   Legend,
   Tooltip
 } from 'chart.js'
+import 'chartjs-adapter-luxon'
+import zoomPlugin from 'chartjs-plugin-zoom'
 
 Chart.register(
   LineController,
@@ -44,11 +46,8 @@ Chart.register(
   LinearScale,
   Legend,
   Tooltip
-);
-import 'chartjs-adapter-luxon';
-
-import zoomPlugin from 'chartjs-plugin-zoom';
-Chart.register(zoomPlugin);
+)
+Chart.register(zoomPlugin)
 
 // internals
 import TrackManagerNavBar from '@/components/TrackManagerNavBar.vue'
@@ -69,26 +68,27 @@ const props = defineProps({
 // constants
 const MAX_YEARLINES_WITH_FILTER = 5
 
-// reactives and dom refs
+// reactive state and DOM references
 const loading = ref(true)
-const canvasref = ref<(null | HTMLCanvasElement)>(null)
-
-
+const canvasref = ref<HTMLCanvasElement | null>(null)
 const filterState = ref(new FilterButtonState())
 
 const newestClass = computed(() => filterState.value.newestButtonClass())
 const bestClass = computed(() => filterState.value.bestButtonClass())
 
-function numYearLines() {
+// Persist track loading so the chart uses the same data from one request
+const allTracksPromise = getAllTracks(props.sid)
+let chart: ProgressChartType | null = null
+let allTracks: Track[] = []
+
+// Helpers for filter state and chart generation
+function numYearLines(): number {
   return filterState.value.filterActive() ? MAX_YEARLINES_WITH_FILTER : 0
 }
 
 function filterType(): PChartSortType {
-  if (filterState.value.bestActive) {
-    return "highest_progress"
-  } else {
-    return "newest_year"
-  }
+  // if best is inactive, it does not matter if newest is active or not, it will just show the newest years according to limit. 
+  return filterState.value.bestActive ? 'highest_progress' : 'newest_year'
 }
 
 function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
@@ -96,22 +96,18 @@ function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
   return _.groupBy(trackFlatList, (x: Track) => x.year())
 }
 
-// load tracks async
-const allTracksPromise = getAllTracks(props.sid)
-
-let chart: ProgressChartType | null = null
-let allTracks: Track[] = []
-
 function updateChart(ch: ProgressChartType | null, tracks: Track[]) {
-  if (ch !== null) {
-
-    const trByYear = tracksByYear(tracks)
-    const chartDataSets = generateChartDataSets(trByYear, filterType(), numYearLines())
-    ch.data.datasets = chartDataSets
-    ch.update()
+  if (ch === null) {
+    return
   }
+
+  const trByYear = tracksByYear(tracks)
+  const chartDataSets = generateChartDataSets(trByYear, filterType(), numYearLines())
+  ch.data.datasets = chartDataSets
+  ch.update()
 }
 
+// button handlers
 function toggleNewest() {
   filterState.value.toggleNewest()
   updateChart(chart, allTracks)
@@ -122,31 +118,27 @@ function toggleBest() {
   updateChart(chart, allTracks)
 }
 
-// generate empty chart
+// Lifecycle: initialize chart after mount and update when data loads
 onMounted(() => {
   nextTick(async () => {
+    if (canvasref.value === null) {
+      reportError('Canvas null')
+      return
+    }
 
-    // should be defined after mount
-    if (canvasref.value !== null) {
-
-      chart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(
-        canvasref.value,
-        chartConfig
-      )
+    chart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(canvasref.value, chartConfig)
 
-      // wait for loading of tracks to complete
+    try {
       allTracks = await allTracksPromise
       loading.value = false
       updateChart(chart, allTracks)
-
-    } else {
-      reportError("Canvas null")
+    } catch (err) {
+      reportError('Failed to load tracks', err)
     }
   }).catch((err) => {
-    reportError("Error in nextTick", err)
+    reportError('Error in nextTick', err)
   })
 })
-
 </script>
 
 <style scoped>

From ea58b58460b45eae33679dffcf42467ab851f17d Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Wed, 20 May 2026 00:24:06 +0200
Subject: [PATCH 6/6] fix test

---
 client/src/views/ProgressChart.vue            | 2 +-
 client/tests/unit/views/ProgressChart.spec.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 796b35c..90e8874 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="d-flex flex-column flex-grow-1">
       <canvas id="acquisitions" ref="canvasref"></canvas>
-      <div v-if="loading" class="myspinner">
+      <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
         <b-spinner />
       </div>
     </div>
diff --git a/client/tests/unit/views/ProgressChart.spec.ts b/client/tests/unit/views/ProgressChart.spec.ts
index 29f4e24..596ed14 100644
--- a/client/tests/unit/views/ProgressChart.spec.ts
+++ b/client/tests/unit/views/ProgressChart.spec.ts
@@ -94,8 +94,8 @@ describe('ProgressChart', () => {
   test('shows loading spinner while tracks are loading', () => {
     // Delay resolution so spinner is visible during render
     vi.mocked(getAllTracks).mockReturnValue(new Promise(() => undefined))
-    const { getByText } = renderProgressChart()
-    expect(getByText('Loading')).toBeInTheDocument()
+    const { getByRole } = renderProgressChart()
+    expect(getByRole('status')).toBeInTheDocument()
   })
 
   test('hides loading spinner after tracks are loaded', async () => {