- CHG: Updated to vuetify 4.1.

- CHG: Moved trait stats calculation to datastore and incrementally update rather than recalculate every time. Should improve performance.

Author: sebastian-raubach

package-lock.json

@@ -42,7 +42,7 @@
     "vue-qrcode-reader": "^5.7.3",
     "vue-router": "^4.5.1",
     "vue-virtual-scroller": "^2.0.0-beta.8",
-    "vuetify": "^4.0.3"
+    "vuetify": "^4.1.2"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",

package.json

@@ -30,7 +30,7 @@
 
         <v-menu>
           <template #activator="{ props }">
-            <v-btn :icon="mdiThemeLightDark" v-bind="props" />
+            <v-btn :icon="mdiThemeLightDark" v-bind="props" id="theme-button" />
           </template>
           <v-list>
             <v-list-subheader class="text-high-emphasis text-uppercase font-weight-black">{{ $t('menuTheme') }}</v-list-subheader>
@@ -145,7 +145,7 @@
     <v-dialog
       v-model="updateExists"
       persistent
-      :max-width="`min(90vw, 401px)`"
+      width="min(90vw, 401px)"
     >
       <v-card :title="$t('modalTitleAppUpdateAvailable')" :text="$t('modalTextAppUpdateAvailable')">
         <template #actions>
@@ -330,7 +330,8 @@
   // Listen for theme changes in the store
   watchEffect(() => {
     const str = isDark.value ? 'dark' : 'light'
-    theme.change(store.storeTheme === 'system' ? str : store.storeTheme)
+    theme.setTransitionOrigin(document.querySelector('#theme-button'))
+    theme.change(store.storeTheme === 'system' ? str : store.storeTheme, store.storeTransitionsEnabled === true)
     store.setSystemTheme(str)
   })
 

src/App.vue

@@ -37,6 +37,12 @@
     heatmap,
   ])
 
+  interface HeatmapCell {
+    row: string
+    column: string
+    value: number | null
+  }
+
   const compProps = defineProps<{
     year: number
     trial: TrialPlus
@@ -62,6 +68,9 @@
       return []
     }
   })
+  const heatmapMonths = computed(() => {
+    return (months.value || []).concat().reverse()
+  })
 
   const isHorizontal = computed(() => width.value < 720)
   const safeTrialName = computed(() => compProps.trial ? compProps.trial.name.replace(/[^a-z0-9]/gi, '-').toLowerCase() : '')
@@ -101,9 +110,26 @@
 
       let max = 0
 
+      const hd: { [key: string]: HeatmapCell } = {}
+
+      z.forEach((monthData, month) => {
+        monthData.forEach((_, day) => {
+          hd[`${month}|${day}`] = {
+            row: heatmapMonths.value[month] || '',
+            column: `${day + 1}`,
+            value: null,
+          }
+        })
+      })
+
       Object.keys(cData).forEach(key => {
         const value = cData[key] || 0
         const d = new Date(key)
+
+        const hmd = hd[`${d.getMonth()}|${d.getDate() - 1}`]
+        if (hmd) {
+          hmd.value = value
+        }
         // @ts-ignore
         z[11 - d.getMonth()][d.getDate() - 1] = value
 

src/components/chart/CalendarHeatmap.vue

@@ -83,7 +83,7 @@
   import Plotly from 'plotly.js/lib/core'
   import heatmap from 'plotly.js/lib/heatmap'
   import scatter from 'plotly.js/lib/scatter'
-  import { getTrialDataCached } from '@/plugins/datastore'
+  import { getTrialDataCached, trialTraitStats } from '@/plugins/datastore'
   import { coreStore } from '@/stores/app'
   import { CellCategory, TraitDataType, type Measurement } from '@/plugins/types/gridscore'
   import { categoricalColors, invertHex, toCssNamedColors } from '@/plugins/color'
@@ -92,7 +92,7 @@
   import TraitSelect from '@/components/trait/TraitSelect.vue'
   import { mdiAlert, mdiInformation, mdiLandFields } from '@mdi/js'
   import { getDateTSIndependent, getI18nParams } from '@/plugins/formatting'
-  import { calculateTraitStatsIndividual, createDynamicQuantiles, isSuspicious } from '@/plugins/stats'
+  import { isSuspicious } from '@/plugins/stats'
 
   // Only register the chart types we're actually using to reduce the final bundle size
   Plotly.register([
@@ -286,22 +286,6 @@
         }
       }
 
-      if (isNumericOrDate.value && store.storeSuspiciousDataPointHighlight) {
-        if (highlightSus.value) {
-          trait.suspiciousChecker = createDynamicQuantiles()
-          const timepoint = (timepoints.value.length > 0 && trait.allowRepeats) ? timepoints.value[currentTimepoint.value] : undefined
-          calculateTraitStatsIndividual(trait, trialData, timepoint, v => {
-            if (trait.dataType === TraitDataType.date) {
-              return (new Date(v).getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24)
-            } else {
-              return +v
-            }
-          })
-        } else {
-          delete trait.suspiciousChecker
-        }
-      }
-
       const catColors = ((trait.dataType === TraitDataType.categorical && restrictions) ? restrictions.categories : []) || []
       const colorMap = toCssNamedColors(catColors)
       const allValidNamedColors = Object.keys(colorMap).length === catColors.length
@@ -341,7 +325,10 @@
           : `${t('tooltipChartHeatmapRow', i18nParams.value)}: %{y}<br>${t('tooltipChartHeatmapColumn', i18nParams.value)}: %{x}<br>${t('tooltipChartHeatmapValue')}: %{z}<extra>%{text}</extra>`,
       }]
 
-      if (store.storeSuspiciousDataPointHighlight && trait.suspiciousChecker && trait.suspiciousChecker.validRangeInfo?.isReady) {
+      const traitStats = trialTraitStats.value[trait.id || '']
+
+      if (traitStats && store.storeSuspiciousDataPointHighlight && traitStats.suspiciousChecker && traitStats.suspiciousChecker.validRangeInfo?.isReady) {
+        console.log(traitStats)
         const susDots = {
           x: [] as number[],
           y: [] as number[],
@@ -356,7 +343,7 @@
           for (let column = 0; column < compProps.trial.layout.columns; column++) {
             const v = z[row]?.[column]
 
-            if (v !== undefined && v !== null && isSuspicious(trait.suspiciousChecker, +v)) {
+            if (v !== undefined && v !== null && isSuspicious(traitStats.suspiciousChecker, trait.dataType === TraitDataType.date ? (+v * (1000 * 60 * 60 * 24)) : +v)) {
               susDots.x.push(column + 1)
               susDots.y.push(row + 1)
             }

src/components/chart/FieldLayoutHeatmap.vue

@@ -305,6 +305,7 @@
   import { mdiCalendarToday, mdiCamera, mdiCancel, mdiChevronLeft, mdiChevronRight, mdiMapMarker, mdiVideo } from '@mdi/js'
   import { getId } from '@/plugins/id'
   import { isSuspicious } from '@/plugins/stats'
+  import { trialTraitStats } from '@/plugins/datastore'
 
   const nonTtsTraitTypes = new Set([TraitDataType.gps, TraitDataType.video, TraitDataType.image, TraitDataType.date, TraitDataType.text, TraitDataType.range])
 
@@ -332,6 +333,8 @@
   const input = useTemplateRef('input')
   const id = ref(`data-input-${getId()}`)
 
+  const traitStats = computed(() => trialTraitStats.value[compProps.trait.id || ''])
+
   const valid = computed(() => {
     const mv = model.value
     if (mv !== undefined && mv !== null && rules.value && rules.value.length > 0) {
@@ -343,8 +346,8 @@
 
   const warning = computed(() => {
     const mv = model.value
-    if (mv !== undefined && mv !== null && (TraitDataType.isNumeric(compProps.trait.dataType) || compProps.trait.dataType === TraitDataType.date) && compProps.trait.suspiciousChecker && compProps.trait.suspiciousChecker.validRangeInfo?.isReady) {
-      return isSuspicious(compProps.trait.suspiciousChecker, TraitDataType.isNumeric(compProps.trait.dataType) ? +mv : new Date(mv).getTime())
+    if (mv !== undefined && mv !== null && (TraitDataType.isNumeric(compProps.trait.dataType) || compProps.trait.dataType === TraitDataType.date) && traitStats.value && traitStats.value.suspiciousChecker && traitStats.value.suspiciousChecker.validRangeInfo?.isReady) {
+      return isSuspicious(traitStats.value.suspiciousChecker, TraitDataType.isNumeric(compProps.trait.dataType) ? +mv : new Date(mv).getTime())
     }
     return false
   })

src/components/inputs/TraitInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" max-width="min(90vw, 1024px)">
+  <v-dialog v-model="dialog" width="min(90vw, 1024px)">
     <v-card :title="$t('modalTitleEditPeople')">
       <template #text>
         <v-form @submit.prevent>

src/components/modals/AddPersonModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-dialog v-model="dialog" scrollable max-width="min(90vw, 1024px)">
+    <v-dialog v-model="dialog" scrollable width="min(90vw, 1024px)">
       <v-card>
         <template #title>
           <div class="d-flex justify-space-between">

src/components/modals/AddTraitReferenceImageModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" scrollable max-width="min(90vw, 1024px)">
+  <v-dialog v-model="dialog" scrollable width="min(90vw, 1024px)">
     <v-card :title="$t('modalTitleAddGermplasm')">
       <template #text>
         <p>{{ $t('modalTextAddGermplasm') }}</p>

src/components/modals/AddTrialGermplasmModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" max-width="min(90vw, 1024px)" scrollable>
+  <v-dialog v-model="dialog" width="min(90vw, 1024px)" scrollable>
     <v-card :title="$t('modalTitleChangelog')">
       <template #text>
         <p v-html="$t('modalTextChangelog')" />