- CHG: Removed dedicated "counter" trait again and replaced with a se…

…tting for large buttons in "int" traits.

src/components/BrapiExportSection.vue

@@ -219,7 +219,6 @@ export default {
               break
             case 'float':
             case 'int':
-            case 'counter':
             case 'range':
               scale.dataType = 'Numeric'
               break
@@ -348,7 +347,7 @@ export default {
                   matches = t.dataType === 'text'
                   break
                 case 'Numeric':
-                  matches = t.dataType === 'float' || t.dataType === 'int' || t.dataType === 'range' || t.dataType === 'counter'
+                  matches = t.dataType === 'float' || t.dataType === 'int' || t.dataType === 'range'
                   break
                 case 'Duration':
                   matches = t.dataType === 'int'

src/components/TraitDefinitionComponent.vue

@@ -46,7 +46,7 @@
             </template>
             <b-form-textarea v-model="newTrait.restrictions.categories" :rows="4" :placeholder="$t('formPlaceholderTraitRestrictionsCategories')" required id="trait-categories" :state="formState.categories" />
           </b-form-group>
-          <b-row v-if="newTrait.dataType === 'int' || newTrait.dataType === 'float' || newTrait.dataType === 'range' || newTrait.dataType === 'counter'">
+          <b-row v-if="newTrait.dataType === 'int' || newTrait.dataType === 'float' || newTrait.dataType === 'range'">
             <b-col cols=6>
               <b-form-group :description="$t('formDescriptionTraitRestrictionsMin')" label-for="trait-min">
                 <template #label>
@@ -316,9 +316,6 @@ export default {
       }, {
         text: this.$t('traitTypeRange'),
         value: 'range'
-      }, {
-        text: this.$t('traitTypeCounter'),
-        value: 'counter'
       }, {
         text: this.$t('traitTypeCategorical'),
         value: 'categorical'

src/components/TraitInput.vue

@@ -1,7 +1,7 @@
 <template>
   <b-input-group class="trait-data-input">
     <template #prepend v-if="trait.dataType === 'int'">
-      <b-button v-if="trait.dataType === 'int'" @click="nudge(-1)" :disabled="!editable">-</b-button>
+      <b-button :class="`${storeLargeButtonsForIntTraits ? 'nudge px-5' : ''}`" @click="nudge(-1)" :disabled="!editable">-</b-button>
     </template>
 
     <b-form-input :id="id"
@@ -18,7 +18,7 @@
     <b-form-input :id="id"
                   v-else-if="trait.dataType === 'int'"
                   ref="input"
-                  class="number-input"
+                  :class="`number-input ${storeLargeButtonsForIntTraits ? 'text-center' : ''}`"
                   :state="formState"
                   @wheel="$event.target.blur()"
                   type="number"
@@ -28,15 +28,6 @@
                   @keyup.enter="$emit('traverse')"
                   :min="(trait.restrictions && trait.restrictions.min !== null && trait.restrictions.min !== undefined) ? trait.restrictions.min : null"
                   :max="(trait.restrictions && trait.restrictions.max !== null && trait.restrictions.max !== undefined) ? trait.restrictions.max : null" />
-    <!-- For counter types, add big buttons -->
-    <div class="d-flex w-100" v-else-if="trait.dataType === 'counter'">
-      <b-button-group class="d-flex w-100 counter-buttons">
-        <b-button class="nudge" @click="nudge(-1)" :disabled="!editable">-</b-button>
-        <span class="btn label d-flex align-items-center justify-content-center"><span v-if="value !== undefined && value !== null && value !== ''">{{ (+value).toLocaleString() }}</span></span>
-        <b-button class="nudge" @click="nudge(1)" :disabled="!editable">+</b-button>
-      </b-button-group>
-      <b-button class="reset-button" v-b-tooltip="$t('tooltipDataEntryReset')" variant="danger" @click="resetValue" :disabled="!editable"><IBiSlashCircle /></b-button>
-    </div>
     <!-- For float types, show a number input, apply restrictions -->
     <b-form-input :id="id"
                   v-else-if="trait.dataType === 'float'"
@@ -101,13 +92,13 @@
         <b-button v-b-tooltip="$t('tooltipDataEntryDateMinusOne')" @click="setDateMinusOne" :disabled="!editable"><IBiCaretLeftFill /></b-button>
         <b-button v-b-tooltip="$t('tooltipDataEntryDateToday')" @click="setDateToday" :disabled="!editable"><IBiCalendar3 /></b-button>
         <b-button v-b-tooltip="$t('tooltipDataEntryDatePlusOne')" @click="setDatePlusOne" :disabled="!editable"><IBiCaretRightFill /></b-button>
-        <b-button v-b-tooltip="$t('tooltipDataEntryDateReset')" variant="danger" @click="resetValue" :disabled="!editable"><IBiSlashCircle /></b-button>
+        <b-button v-b-tooltip="$t('tooltipDataEntryReset')" variant="danger" @click="resetValue" :disabled="!editable"><IBiSlashCircle /></b-button>
       </template>
-      <b-button v-if="trait.dataType === 'int'" @click="nudge(1)" :disabled="!editable">+</b-button>
+      <b-button :class="`${storeLargeButtonsForIntTraits ? 'nudge px-5' : ''}`" v-if="trait.dataType === 'int'" @click="nudge(1)" :disabled="!editable">+</b-button>
     </template>
     <template #append v-else-if="trait.dataType === 'range'">
       <span :class="(value !== undefined && value !== null) ? 'bg-warning' : 'bg-secondary'"><span class="range-value">{{ (value !== undefined && value !== null) ? value : 'N/A' }}</span></span>
-      <b-button v-b-tooltip="$t('tooltipDataEntryRangeReset')" variant="danger" @click="resetValue" :disabled="!editable"><IBiSlashCircle /></b-button>
+      <b-button v-b-tooltip="$t('tooltipDataEntryReset')" variant="danger" @click="resetValue" :disabled="!editable"><IBiSlashCircle /></b-button>
     </template>
   </b-input-group>
 </template>
@@ -158,7 +149,8 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'storeCategoryCountInline'
+      'storeCategoryCountInline',
+      'storeLargeButtonsForIntTraits'
     ]),
     traitOptionsSelect: function () {
       if (this.trait && this.trait.dataType === 'categorical') {
@@ -380,17 +372,9 @@ export default {
 </script>
 
 <style scoped>
-.counter-buttons .btn.nudge {
+.btn.nudge {
   font-size: 30pt;
 }
-.counter-buttons .btn.label {
-  color: var(--bs-btn-color);
-  opacity: 1;
-  background-color: #d4d8db;
-}
-.counter-buttons .reset-button {
-  font-size: var(--bs-btn-font-size);
-}
 </style>
 
 <style>

src/components/charts/FieldHeatmap.vue

@@ -235,7 +235,7 @@ export default {
                   finalValue = m
                 }
 
-                if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range' || this.selectedTrait.dataType === 'counter') {
+                if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range') {
                   m.values.forEach(v => {
                     if (v !== undefined && v !== null) {
                       minValue = Math.min(minValue, +v)
@@ -310,7 +310,7 @@ export default {
             : `${this.$t('tooltipChartHeatmapRow')}: %{y}<br>${this.$t('tooltipChartHeatmapColumn')}: %{x}<br>${this.$t('tooltipChartHeatmapValue')}: %{z}<extra>%{text}</extra>`
         }]
 
-        if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range' || this.selectedTrait.dataType === 'counter') {
+        if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range') {
           traces[0].zauto = false
           traces[0].zmin = minValue
           traces[0].zmax = maxValue

src/components/charts/GermplasmRepHeatmap.vue

@@ -245,7 +245,7 @@ export default {
                   finalValue = m
                 }
 
-                if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range' || this.selectedTrait.dataType === 'counter') {
+                if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range') {
                   m.values.forEach(v => {
                     if (v !== undefined && v !== null) {
                       minValue = Math.min(minValue, +v)
@@ -325,7 +325,7 @@ export default {
             : `${this.$t('tooltipChartHeatmapGermplasm')}: %{y}<br>${this.$t('tooltipChartHeatmapRep')}: %{x}<br>${this.$t('tooltipChartHeatmapValue')}: %{z}<extra>%{text}</extra>`
         }]
 
-        if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range' || this.selectedTrait.dataType === 'counter') {
+        if (this.selectedTrait.dataType === 'int' || this.selectedTrait.dataType === 'float' || this.selectedTrait.dataType === 'range') {
           traces[0].zauto = false
           traces[0].zmin = minValue
           traces[0].zmax = maxValue

src/components/modals/SettingsShareModal.vue

@@ -72,6 +72,7 @@ export default {
       'storeNavigationMode',
       'storeTraitColors',
       'storeShowFullTraitDescription',
+      'storeLargeButtonsForIntTraits',
       'storeCategoryCountInline',
       'storeMainDisplayMode'
     ])
@@ -174,6 +175,12 @@ export default {
           this.$store.commit('ON_SHOW_FULL_TRAIT_DESCRIPTION_CHANGED', false)
         }
 
+        if (parsed.lb === 1) {
+          this.$store.commit('ON_LARGE_BUTTONS_FOR_INT_TRAITS_CHANGED', true)
+        } else if (parsed.lb === 0) {
+          this.$store.commit('ON_LARGE_BUTTONS_FOR_INT_TRAITS_CHANGED', false)
+        }
+
         this.$emit('data-changed')
 
         this.hide()
@@ -207,6 +214,7 @@ export default {
         nm: this.storeNavigationMode === NAVIGATION_MODE_DRAG ? 1 : 0,
         tc: this.storeTraitColors.map(c => c.replace('#', '')).join(','),
         ft: this.storeShowFullTraitDescription ? 1 : 0,
+        lb: this.storeLargeButtonsForIntTraits ? 1 : 0,
         cc: this.storeCategoryCountInline
       })
 

src/components/modals/TraitImportExportGerminateModal.vue

@@ -135,7 +135,6 @@ export default {
     toGerminateDataType: function (type) {
       switch (type) {
         case 'int':
-        case 'counter':
         case 'float':
         case 'range':
           return 'numeric'

src/components/modals/TraitImportExportTabularModal.vue

@@ -105,7 +105,7 @@ export default {
               trait.restrictions.categories = p['Categories'].split(',').map(c => c.trim())
             }
 
-            if ((trait.dataType === 'int' || trait.dataType === 'float' || trait.dataType === 'range', trait.dataType === 'counter')) {
+            if ((trait.dataType === 'int' || trait.dataType === 'float' || trait.dataType === 'range')) {
               if (p['Minimum'] !== undefined && p['Minimum'] !== null && p['Minimum'] !== '') {
                 if (!trait.restrictions) {
                   trait.restrictions = {}

src/plugins/i18n/de_DE.json

@@ -153,6 +153,8 @@
   "formDescriptionSettingsWidgetOrder": "Nutze die Griff in der oberen rechten Ecke um die Widgets auf der Homepage anzuordnen.",
   "formLabelSettingsHighlightControls": "Kontrollen hervorheben",
   "formDescriptionSettingsHighlightControls": "Sollen Kontrollen in der Datenansicht und Visualisierungen hervorgehoben werden?",
+  "formLabelSettingsLargeButtonsForIntTraits": "Zählertasten",
+  "formDescriptionSettingsLargeButtonsForIntTraits": "Sollen größere Tasten angezeigt werden für numerische Merkmale um es einfacher zu machen diese als Zähler zu nutzen.",
   "formPlaceholderTimelinePlotSearch": "Keimplasma suchen",
   "formLabelStatisticsTrait": "Merkmal",
   "formDescriptionStatisticsTrait": "Die Merkmale für welche die Statistiken dargestellt werden sollen.",
@@ -679,7 +681,6 @@
   "tooltipDataEntryDateToday": "Als Heute setzen",
   "tooltipDataEntryDatePlusOne": "Einen Tag hinzufügen",
   "tooltipDataEntryDateReset": "Datum auf Null zurücksetzen",
-  "tooltipDataEntryRangeReset": "Wert auf Null zurücksetzen",
   "tooltipDataEntryGetGps": "Aktuellen Standort nutzen",
   "tooltipDataEntryReset": "Wert auf Null zurücksetzen",
   "tooltipTraitAllowRepeatsTrue": "Wiederholte Messungen erlauben",

src/plugins/i18n/en_GB.json

@@ -158,6 +158,8 @@
   "formDescriptionSettingsCategoryCountInline": "Decide up to how many trait category values are shown as buttons inline before showing a dropdown box.",
   "formLabelSettingsHighlightControls": "Highlight controls",
   "formDescriptionSettingsHighlightControls": "Should controls/checks be highlighted in the main data display and data visualizations?",
+  "formLabelSettingsLargeButtonsForIntTraits": "Counter buttons",
+  "formDescriptionSettingsLargeButtonsForIntTraits": "Show larger buttons for numeric traits to make it easier to use these buttons as counters.",
   "formPlaceholderTimelinePlotSearch": "Search germplasm",
   "formLabelStatisticsTrait": "Trait",
   "formDescriptionStatisticsTrait": "The traits for which to plot the statistics.",
@@ -688,7 +690,6 @@
   "tooltipDataEntryDateToday": "Set as today",
   "tooltipDataEntryDatePlusOne": "Add one day",
   "tooltipDataEntryDateReset": "Reset date to null",
-  "tooltipDataEntryRangeReset": "Reset value to null",
   "tooltipDataEntryGetGps": "Get current location",
   "tooltipDataEntryReset": "Reset value to null",
   "tooltipTraitAllowRepeatsTrue": "Allow repeated measurements",

src/plugins/misc.js

@@ -68,8 +68,6 @@ const getTraitTypeText = (trait, short = false) => {
       return t(short ? 'traitTypeShortCategorical' : 'traitTypeCategorical')
     case 'gps':
       return t(short ? 'traitTypeShortGps' : 'traitTypeGps')
-    case 'counter':
-      return t(short ? 'traitTypeShortCounter' : 'traitTypeCounter')
     default:
       return null
   }
@@ -286,9 +284,9 @@ const isNumber = (value, isInt) => {
 const checkDataMatchesTraitType = (trait, value, checkDatesAndCategories = true) => {
   const trimmed = (typeof value === 'string') ? value.trim() : value
 
-  if (trait.dataType === 'int' || trait.dataType === 'float' || trait.dataType === 'range' || trait.dataType === 'counter') {
+  if (trait.dataType === 'int' || trait.dataType === 'float' || trait.dataType === 'range') {
     try {
-      if (!isNumber(trimmed, (trait.dataType === 'int' || trait.dataType === 'range' || trait.dataType === 'counter'))) {
+      if (!isNumber(trimmed, (trait.dataType === 'int' || trait.dataType === 'range'))) {
         return false
       }
 
@@ -410,7 +408,7 @@ const trialsDataToMatrix = (data, trial, aggregate = true) => {
               const onDate = v.measurements[t.id].filter(dp => dp.timestamp.split('T')[0] === date).reduce((a, b) => a.concat(b.values), []).filter(v => v !== undefined && v !== null)
 
               if (onDate.length > 0) {
-                if (t.dataType === 'float' || t.dataType === 'int' || t.dataType === 'range' || t.dataType === 'counter') {
+                if (t.dataType === 'float' || t.dataType === 'int' || t.dataType === 'range') {
                   result += `\t${onDate.reduce((acc, val) => acc + (+val), 0) / onDate.length}`
                 } else if (t.dataType === 'categorical') {
                   result += `\t${t.restrictions.categories[onDate[onDate.length - 1]]}`

src/store/index.js

@@ -25,6 +25,7 @@ export default createStore({
     gpsEnabled: true,
     voiceFeedbackEnabled: false,
     restrictInputToMarked: false,
+    largeButtonsForIntTraits: false,
     navigationMode: NAVIGATION_MODE_DRAG,
     traitColors: ['#910080', '#ff7c00', '#5ec418', '#00a0f1', '#c5e000', '#ff007a', '#222183', '#c83831', '#fff600'],
     homeWidgetOrder: ['banners', 'trials'],
@@ -69,6 +70,7 @@ export default createStore({
     storeTraitColors: (state) => state.traitColors,
     storeHomeWidgetOrder: (state) => state.homeWidgetOrder,
     storeSelectedTrialPerson: (state) => state.selectedTrialPerson,
+    storeLargeButtonsForIntTraits: (state) => state.largeButtonsForIntTraits,
     storeCanvasDensity: (state) => state.canvasDensity,
     storeCanvasShape: (state) => state.canvasShape,
     storeCanvasSize: (state) => state.canvasSize,
@@ -211,6 +213,9 @@ export default createStore({
     ON_SHOW_FULL_TRAIT_DESCRIPTION_CHANGED: function (state, newShowFullTraitDescription) {
       state.showFullTraitDescription = newShowFullTraitDescription
     },
+    ON_LARGE_BUTTONS_FOR_INT_TRAITS_CHANGED: function (state, newLargeButtonsForIntTraits) {
+      state.largeButtonsForIntTraits = newLargeButtonsForIntTraits
+    },
     ON_CATEGORY_COUNT_INLINE_CHANGED: function (state, newCategoryCountInline) {
       state.categoryCountInline = newCategoryCountInline
     }
@@ -306,6 +311,9 @@ export default createStore({
     setShowFullTraitDescription: function ({ commit }, showFullTraitDescription) {
       commit('ON_SHOW_FULL_TRAIT_DESCRIPTION_CHANGED', showFullTraitDescription)
     },
+    setLargeButtonsForIntTraits: function ({ commit }, largeButtonsForIntTraits) {
+      commit('ON_LARGE_BUTTONS_FOR_INT_TRAITS_CHANGED', largeButtonsForIntTraits)
+    },
     setCategoryCountInline: function ({ commit }, categoryCountInline) {
       commit('ON_CATEGORY_COUNT_INLINE_CHANGED', categoryCountInline)
     }

src/views/GermplasmPerformanceView.vue

@@ -56,7 +56,7 @@ export default {
     ]),
     numericTraits: function () {
       if (this.trial && this.trial.traits) {
-        return this.trial.traits.filter(t => t.dataType === 'int' || t.dataType === 'float' || t.dataType === 'date' || t.dataType === 'range' || t.dataType === 'counter')
+        return this.trial.traits.filter(t => t.dataType === 'int' || t.dataType === 'float' || t.dataType === 'date' || t.dataType === 'range')
       } else {
         return []
       }

src/views/SettingsView.vue

@@ -131,6 +131,12 @@
               </b-form-checkbox>
             </b-form-group>
 
+            <b-form-group :label="$t('formLabelSettingsLargeButtonsForIntTraits')" :description="$t('formDescriptionSettingsLargeButtonsForIntTraits')" label-for="largeButtonsForIntTraits">
+              <b-form-checkbox id="largeButtonsForIntTraits" v-model="largeButtonsForIntTraits" switch>
+                {{ largeButtonsForIntTraits ? $t('genericYes') : $t('genericNo') }}
+              </b-form-checkbox>
+            </b-form-group>
+
             <b-form-group :label="$t('formLabelSettingsMinCellWidth')" :description="$t('formDescriptionSettingsMinCellWidth')" label-for="displayMinCellWidth">
               <b-form-input id="displayMinCellWidth" type="range" class="form-control" :min=2 :max=10 v-model.number="displayMinCellWidth" />
               <div>
@@ -239,6 +245,7 @@ export default {
       newColor: '#000000',
       mainDisplayMode: MAIN_DISPLAY_MODE_AUTO,
       showFullTraitDescription: true,
+      largeButtonsForIntTraits: false,
       categoricalColors
     }
   },
@@ -260,6 +267,7 @@ export default {
       'storeHomeWidgetOrder',
       'storeTraitColors',
       'storeShowFullTraitDescription',
+      'storeLargeButtonsForIntTraits',
       'storeCategoryCountInline',
       'storeMainDisplayMode'
     ]),
@@ -352,6 +360,10 @@ export default {
       this.$store.dispatch('setShowFullTraitDescription', newValue)
       emitter.emit('plausible-event', { key: 'settings-changed', props: { showFullTraitDescription: newValue } })
     },
+    largeButtonsForIntTraits: function (newValue) {
+      this.$store.dispatch('setLargeButtonsForIntTraits', newValue)
+      emitter.emit('plausible-event', { key: 'settings-changed', props: { largeButtonsForIntTraits: newValue } })
+    },
     mainDisplayMode: function (newValue) {
       this.$store.dispatch('setMainDisplayMode', newValue)
       emitter.emit('plausible-event', { key: 'settings-changed', props: { mainDisplayMode: newValue } })
@@ -403,6 +415,7 @@ export default {
       this.canvasShape = this.storeCanvasShape
       this.canvasSize = this.storeCanvasSize
       this.showFullTraitDescription = this.storeShowFullTraitDescription
+      this.largeButtonsForIntTraits = this.storeLargeButtonsForIntTraits
       this.mainDisplayMode = this.storeMainDisplayMode || MAIN_DISPLAY_MODE_AUTO
     }
   },

src/views/TrialExportView.vue

@@ -306,7 +306,6 @@ export default {
     toGerminateDataType: function (type) {
       switch (type) {
         case 'int':
-        case 'counter':
         case 'float':
         case 'range':
           return 'numeric'

src/views/TrialSetupView.vue

@@ -370,7 +370,7 @@ export default {
     },
     numericTraitCount: function () {
       if (this.traits) {
-        return this.traits.filter(t => t.dataType === 'int' || t.dataType === 'float' || t.dataType === 'range' || t.dataType === 'counter').length
+        return this.traits.filter(t => t.dataType === 'int' || t.dataType === 'float' || t.dataType === 'range').length
       } else {
         return 0
       }

src/views/VizStatisticsView.vue

@@ -219,7 +219,6 @@ export default {
           switch (trait.dataType) {
             case 'float':
             case 'int':
-            case 'counter':
             case 'range':
             case 'date': {
               chartType = 'box'