- ADD: Added categorical trait timeline chart.

- FIX: Fixed media filename format bits not being stored.
- CHG: Updated timeline example trial by adding a categorical data timeseries trait.
-

Author: sebastian-raubach

public/data/timeline.json

@@ -163,7 +163,7 @@
         },
         shapes: [] as any[],
         annotations: [] as any[],
-        legend: { orientation: 'h', font: { color: store.storeIsDarkMode ? 'white' : 'black' } },
+        legend: { orientation: 'h', y: 1.1, font: { color: store.storeIsDarkMode ? 'white' : 'black' } },
       }
 
       if (compProps.trial.events && compProps.trial.events.length > 0) {

src/components/chart/PlotTraitCompletionChart.vue

@@ -22,7 +22,7 @@
   import { getTrialDataCached } from '@/plugins/datastore'
   import type { DownloadBlob } from '@/plugins/file'
   import { getId } from '@/plugins/id'
-  import type { CellPlus, TraitPlus, TrialPlus } from '@/plugins/types/client'
+  import type { CellPlus, TrialPlus } from '@/plugins/types/client'
   import { toLocalDateString } from '@/plugins/util'
   import { mdiChartBellCurveCumulative } from '@mdi/js'
   import emitter from 'tiny-emitter/instance'
@@ -154,7 +154,7 @@
         },
         shapes: [] as any[],
         annotations: [] as any[],
-        legend: { orientation: 'h', font: { color: store.storeIsDarkMode ? 'white' : 'black' } },
+        legend: { orientation: 'h', y: 1.1, font: { color: store.storeIsDarkMode ? 'white' : 'black' } },
       }
 
       if (compProps.trial.events && compProps.trial.events.length > 0) {

src/components/chart/TraitDatapointCountChart.vue

@@ -35,7 +35,7 @@
   import { coreStore } from '@/stores/app'
   import { useI18n } from 'vue-i18n'
   import type { UserSelection } from '@/components/util/HighlightSelect.vue'
-  import { CellCategory } from '@/plugins/types/gridscore'
+  import { CellCategory, TraitDataType } from '@/plugins/types/gridscore'
 
   // Only register the chart types we're actually using to reduce the final bundle size
   Plotly.register([
@@ -98,6 +98,7 @@
       })
 
       const sortedDates = [...allDates].sort((a, b) => a - b)
+      const isCategorical = compProps.trait.dataType === TraitDataType.categorical
 
       let selectedItems: string[] = []
       const datapoints: { [index: string]: (number | null)[] } = {}
@@ -158,7 +159,7 @@
           const timeIndex = sortedDates.indexOf(time)
 
           const existingValues = m.values.filter(v => v !== undefined && v !== null)
-          const avg = existingValues.length > 0 ? existingValues.reduce((acc, val) => acc + (+val), 0) / existingValues.length : 0
+          const avg = existingValues.length > 0 ? existingValues.reduce((acc: number, val) => acc + (+val), 0) / existingValues.length : 0
 
           // Update statistics
           if (avg !== undefined) {
@@ -248,6 +249,9 @@
           title: { text: compProps.trait.name, font: { color: store.storeIsDarkMode ? 'white' : 'black' } },
           tickfont: { color: store.storeIsDarkMode ? 'white' : 'black' },
           fixedrange: !interactive.value,
+          tickmode: isCategorical ? 'array' : undefined,
+          tickvals: isCategorical ? compProps.trait.restrictions?.categories?.map((c, i) => i) : undefined,
+          ticktext: isCategorical ? compProps.trait.restrictions?.categories : undefined,
         },
         shapes: [] as any[],
         annotations: [] as any[],

src/components/chart/TraitTimelineChart.vue

@@ -14,7 +14,6 @@
       clearable
       :readonly="abortController !== undefined"
       :multiple="multiple"
-      :chips="multiple"
       :min-width="minWidth"
       :max-width="maxWidth"
       autocomplete="off"
@@ -32,6 +31,13 @@
         <v-btn :icon="mdiNfcVariant" v-tooltip:top="$t('tooltipScanRFID')" @click="scanNfc" :color="abortController !== undefined ? 'info' : undefined" />
       </template>
 
+      <template #selection="{ item, index }" v-if="multiple">
+        <v-chip size="small" v-if="index < 5" :text="item.title" />
+
+        <!-- @vue-ignore -->
+        <span v-if="index === 5" class="text-grey text-caption align-self-center">{{ $t('formDetailsItemSelectOther', (searchMatch || []).length - 5) }}</span>
+      </template>
+
       <template #item="{ props, item }">
         <v-list-item
           v-bind="props"

src/components/inputs/CellAutocomplete.vue

@@ -12,7 +12,6 @@
       clearable
       :readonly="abortController !== undefined"
       :multiple="multiple"
-      :chips="multiple"
       :min-width="minWidth"
       :max-width="maxWidth"
       autocomplete="off"
@@ -30,6 +29,12 @@
         <v-btn :icon="mdiNfcVariant" v-tooltip:top="$t('tooltipScanRFID')" @click="scanNfc" :color="abortController !== undefined ? 'info' : undefined" />
       </template>
 
+      <template #selection="{ item, index }" v-if="multiple">
+        <v-chip size="small" v-if="index < 5" :text="item.title" />
+
+        <span v-if="index === 5" class="text-grey text-caption align-self-center">{{ $t('formDetailsItemSelectOther', (searchMatch || []).length - 5) }}</span>
+      </template>
+
       <template #item="{ props, item }">
         <v-list-item
           v-bind="props"

src/components/inputs/GermplasmAutocomplete.vue

@@ -130,6 +130,8 @@
     if (newValue.length > 0) {
       dialog.value = true
 
+      emitter.emit('plausible-event', { key: 'server-messages-shown', props: { date: newValue[newValue.length - 1]?.date } })
+
       store.setServerMessagesCheckedOn(new Date().toISOString().split('T')[0])
     }
   })

src/components/modals/ServerMessageModal.vue

@@ -175,14 +175,14 @@
       }
       timestamp = timestamp.toISOString()
 
-      const values: (string | undefined)[] = []
+      const values: (string | number | undefined)[] = []
       const parts = trait.setSize === 1 ? [row.Value] : (row.Value || '').split(',').map(v => v.trim())
 
       for (const part of parts) {
         if (part !== undefined && part !== null && part !== '') {
           if (trait.dataType === TraitDataType.categorical && trait.restrictions && trait.restrictions.categories) {
             const index = trait.restrictions.categories.indexOf(part)
-            values.push(`${index}`)
+            values.push(index)
           } else {
             values.push(part)
           }

src/components/modals/UpdateTrialDataModal.vue

@@ -8,7 +8,6 @@
     item-value="id"
     item-title="name"
     :multiple="multiple"
-    :chips="multiple"
     clearable
     :label="$t(label)"
     :hint="$t(hint)"
@@ -19,10 +18,12 @@
         <template #prepend><v-icon :color="item.raw.color" :icon="store.storeCanvasShape === CanvasShape.SQUARE ? mdiSquare : mdiCircle" /></template>
       </v-list-item>
     </template>
-    <template #selection="{ item }">
-      <v-list-item slim :title="item.raw.name">
-        <template #prepend><v-icon :color="item.raw.color" :icon="store.storeCanvasShape === CanvasShape.SQUARE ? mdiSquare : mdiCircle" /></template>
-      </v-list-item>
+
+    <template #selection="{ item, index }" v-if="multiple">
+      <v-chip size="small" v-if="index < 5" :text="item.title" />
+
+      <!-- @vue-ignore -->
+      <span v-if="index === 5" class="text-grey text-caption align-self-center">{{ $t('formDetailsItemSelectOther', (selectedTraits || []).length - 5) }}</span>
     </template>
   </v-select>
 </template>

src/components/trait/TraitSelect.vue

@@ -316,6 +316,7 @@
         name: t.name,
         description: t.description,
         group: t.group,
+        mediaFilenameFormat: t.mediaFilenameFormat,
         markers: t.layout.markers,
         corners: t.layout.corners,
         traits: t.traits,