- ADD: Added control highlighting to more charts.

- ADD: Added control highlighting setting toggle.

src/components/PlotDataSection.vue

@@ -1,6 +1,13 @@
 <template>
   <div v-if="cell && traits && traits.length > 0">
     <h4>{{ cell.displayName }}</h4>
+
+    <p v-if="cell && cell.categories">
+      <b-badge v-for="cat in cell.categories" :key="`cell-category-${cell.row}-${cell.column}-${cat}`" :variant="CELL_CATEGORIES[cat].variant">
+        <component :is="CELL_CATEGORIES[cat].icon" /> {{ $t(CELL_CATEGORIES[cat].title) }}
+      </b-badge>
+    </p>
+
     <p class="text-muted">{{ $t('pageVisualizationMapPlotInfo', { row: rowIndex, column: columnIndex }) }}</p>
 
     <div v-if="cell.measurements">
@@ -28,9 +35,10 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import TraitIcon from '@/components/icons/TraitIcon'
 import { BIconCalendar3 } from 'bootstrap-vue'
-import { DISPLAY_ORDER_BOTTOM_TO_TOP, DISPLAY_ORDER_RIGHT_TO_LEFT } from '@/plugins/constants'
+import { CELL_CATEGORIES, CELL_CATEGORY_CONTROL, DISPLAY_ORDER_BOTTOM_TO_TOP, DISPLAY_ORDER_RIGHT_TO_LEFT } from '@/plugins/constants'
 
 export default {
   components: {
@@ -51,7 +59,22 @@ export default {
       default: () => null
     }
   },
+  data: function () {
+    return {
+      CELL_CATEGORIES
+    }
+  },
   computed: {
+    ...mapGetters([
+      'storeHighlightControls'
+    ]),
+    isControl: function () {
+      if (this.trial && this.cell) {
+        return this.storeHighlightControls && (this.cell.categories || []).includes(CELL_CATEGORY_CONTROL)
+      } else {
+        return null
+      }
+    },
     rowIndex: function () {
       if (this.trial && this.cell) {
         return this.trial.layout.rowOrder === DISPLAY_ORDER_BOTTOM_TO_TOP ? (this.trial.layout.rows - this.cell.row) : (this.cell.row + 1)

src/components/canvas/PlotCanvas.vue

@@ -82,7 +82,8 @@ export default {
       'storeDarkMode',
       'storeHiddenTraits',
       'storeDisplayMarkerIndicators',
-      'storeRestrictInputToMarked'
+      'storeRestrictInputToMarked',
+      'storeHighlightControls'
     ]),
     userPosition: function () {
       if (this.geolocation && this.gridProjection) {
@@ -678,7 +679,7 @@ export default {
       const cell = this.trialData[`${row}|${col}`]
 
       let count = 0
-      if (cell && cell.categories && cell.categories.includes(CELL_CATEGORY_CONTROL)) {
+      if (this.storeHighlightControls && cell && cell.categories && cell.categories.includes(CELL_CATEGORY_CONTROL)) {
         count = 5
         this.ctx.fillStyle = this.fillStyleControl
       } else if ((this.markedRows && this.markedRows[row]) || (this.markedColumns && this.markedColumns[col])) {

src/components/charts/FieldHeatmap.vue

@@ -37,8 +37,8 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getTrialDataCached } from '@/plugins/datastore'
-import { DISPLAY_ORDER_LEFT_TO_RIGHT, DISPLAY_ORDER_TOP_TO_BOTTOM } from '@/plugins/constants'
-import { categoryColors, toLocalDateString } from '@/plugins/misc'
+import { CELL_CATEGORY_CONTROL, DISPLAY_ORDER_LEFT_TO_RIGHT, DISPLAY_ORDER_TOP_TO_BOTTOM } from '@/plugins/constants'
+import { categoryColors, invertHex, toLocalDateString } from '@/plugins/misc'
 import PlotDataSection from '@/components/PlotDataSection'
 
 const emitter = require('tiny-emitter/instance')
@@ -63,7 +63,8 @@ export default {
   computed: {
     ...mapGetters([
       'storeDarkMode',
-      'storeLocale'
+      'storeLocale',
+      'storeHighlightControls'
     ]),
     traitOptions: function () {
       if (this.trial) {
@@ -172,6 +173,7 @@ export default {
         const z = []
         const text = []
         const customdata = []
+        const shapes = []
         for (let row = this.trial.layout.rows - 1; row >= 0; row--) {
           const rowData = []
           const rowText = []
@@ -186,6 +188,24 @@ export default {
               continue
             }
 
+            if (this.storeHighlightControls && cell.categories && cell.categories.includes(CELL_CATEGORY_CONTROL)) {
+              shapes.push({
+                type: 'rect',
+                // x-reference is assigned to the x-values
+                xref: 'x',
+                // y-reference is assigned to the plot paper [0,1]
+                yref: 'y',
+                x0: cell.column + 0.5,
+                y0: this.trial.layout.rows - 1 - cell.row + 0.5,
+                x1: cell.column + 1.5,
+                y1: this.trial.layout.rows - 1 - cell.row + 1.5,
+                line: {
+                  width: 2,
+                  color: invertHex(this.selectedTrait.color)
+                }
+              })
+            }
+
             rowText.push(cell.displayName)
 
             // Get all sorted measurements for this trait and plot
@@ -358,7 +378,8 @@ export default {
             title: { text: this.$t('widgetChartHeatmapAxisTitleRow'), font: { color: this.storeDarkMode ? 'white' : 'black' } },
             tickfont: { color: this.storeDarkMode ? 'white' : 'black' },
             fixedrange: !this.chartInteractionEnabled
-          }
+          },
+          shapes: shapes
         }
 
         const filename = this.selectedTrait.name.replace(/[^a-z0-9]/gi, '-').toLowerCase()

src/components/charts/GermplasmRepHeatmap.vue

@@ -35,8 +35,9 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getTrialDataCached } from '@/plugins/datastore'
-import { categoryColors, toLocalDateString } from '@/plugins/misc'
+import { categoryColors, invertHex, toLocalDateString } from '@/plugins/misc'
 import PlotDataSection from '@/components/PlotDataSection'
+import { CELL_CATEGORY_CONTROL } from '@/plugins/constants'
 
 const emitter = require('tiny-emitter/instance')
 
@@ -60,7 +61,8 @@ export default {
   computed: {
     ...mapGetters([
       'storeDarkMode',
-      'storeLocale'
+      'storeLocale',
+      'storeHighlightControls'
     ]),
     traitOptions: function () {
       if (this.trial) {
@@ -167,6 +169,7 @@ export default {
         const text = []
         const customdata = []
         const ids = []
+        const shapes = []
         for (let row = this.allGermplasm.length - 1; row >= 0; row--) {
           const rowData = []
           const rowText = []
@@ -194,6 +197,24 @@ export default {
               continue
             }
 
+            if (this.storeHighlightControls && cell.categories && cell.categories.includes(CELL_CATEGORY_CONTROL)) {
+              shapes.push({
+                type: 'rect',
+                // x-reference is assigned to the x-values
+                xref: 'x',
+                // y-reference is assigned to the plot paper [0,1]
+                yref: 'y',
+                x0: column - 1 + 0.5,
+                y0: this.allGermplasm.length - row - 0.5,
+                x1: column - 1 + 1.5,
+                y1: this.allGermplasm.length - row + 0.5,
+                line: {
+                  width: 2,
+                  color: invertHex(this.selectedTrait.color)
+                }
+              })
+            }
+
             rowText.push(this.$t('widgetChartHeatmapRowColumn', { row: cell.row + 1, column: cell.column + 1 }))
             // rowText.push(cell.displayName)
 
@@ -369,7 +390,8 @@ export default {
             title: { text: this.$t('widgetChartHeatmapAxisTitleGermplasm'), font: { color: this.storeDarkMode ? 'white' : 'black' } },
             tickfont: { color: this.storeDarkMode ? 'white' : 'black' },
             fixedrange: !this.chartInteractionEnabled
-          }
+          },
+          shapes: shapes
         }
 
         const filename = this.selectedTrait.name.replace(/[^a-z0-9]/gi, '-').toLowerCase()

src/components/modals/SettingsShareModal.vue

@@ -61,6 +61,7 @@ export default {
     ...mapGetters([
       'storeLocale',
       'storeDarkMode',
+      'storeHighlightControls',
       'storeHideCitationMessage',
       'storeDisplayMarkerIndicators',
       'storeCanvasDensity',
@@ -125,6 +126,11 @@ export default {
         } else if (parsed.hc === 0) {
           this.$store.commit('ON_HIDE_CITATION_MESSAGE_CHANGED', false)
         }
+        if (parsed.hi === 1) {
+          this.$store.commit('ON_HIGHLIGHT_CONTROLS_CHANGED', true)
+        } else if (parsed.hi === 0) {
+          this.$store.commit('ON_HIGHLIGHT_CONTROLS_CHANGED', false)
+        }
         if (parsed.rm === 1) {
           this.$store.commit('ON_RESTRICT_INPUT_TO_MARKED_CHANGED', true)
         } else if (parsed.rm === 0) {
@@ -186,6 +192,7 @@ export default {
         cs: this.storeCanvasShape === CANVAS_SHAPE_SQUARE ? 1 : 0,
         lc: this.storeLocale,
         hc: this.storeHideCitationMessage ? 1 : 0,
+        hi: this.storeHighlightControls ? 1 : 0,
         dm: this.storeDarkMode ? 1 : 0,
         mi: this.storeDisplayMarkerIndicators ? 1 : 0,
         hw: this.storeHomeWidgetOrder.join(','),

src/plugins/i18n/de_DE.json

@@ -137,6 +137,8 @@
   "formDescriptionSettingsRestrictInputToMarked": "Falls aktiviert, ist die Auswahl von Beeten in der Dateneingabe nur in markierten Zeilen oder Spalten möglich.",
   "formLabelSettingsWidgetOrder": "Home-Widget-Ordnung",
   "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?",
   "formPlaceholderTimelinePlotSearch": "Keimplasma suchen",
   "formLabelStatisticsTrait": "Merkmal",
   "formDescriptionStatisticsTrait": "Die Merkmale für welche die Statistiken dargestellt werden sollen.",

src/plugins/i18n/en_GB.json

@@ -142,6 +142,8 @@
   "formDescriptionSettingsWidgetOrder": "Use the handle in the top right to drag and reorder the widgets on the home page.",
   "formLabelSettingsCategoryCountInline": "Category count inline",
   "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?",
   "formPlaceholderTimelinePlotSearch": "Search germplasm",
   "formLabelStatisticsTrait": "Trait",
   "formDescriptionStatisticsTrait": "The traits for which to plot the statistics.",

src/plugins/misc.js

@@ -18,6 +18,18 @@ const DIVISIONS = [
   { amount: Number.POSITIVE_INFINITY, name: 'years' }
 ]
 
+const hexToRgba = (hex, a) => {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+
+  if (a) {
+    return `rgba(${r},${g},${b},${a})`
+  } else {
+    return `rgba(${r},${g},${b})`
+  }
+}
+
 const invertHex = (hex) => (Number(`0x1${hex.replace('#', '')}`) ^ 0xFFFFFF).toString(16).substring(1).toUpperCase()
 
 const formatTimeAgo = (date) => {
@@ -511,6 +523,7 @@ export {
   trialsDataToMatrix,
   getTraitTypeText,
   invertHex,
+  hexToRgba,
   downloadText,
   toLocalDateString,
   toLocalDateTimeString,

src/store/index.js

@@ -23,6 +23,7 @@ export default new Vuex.Store({
     locale: 'en-GB',
     darkMode: false,
     hideCitationMessage: false,
+    highlightControls: true,
     displayMarkerIndicators: true,
     displayMinCellWidth: 4,
     gpsEnabled: true,
@@ -61,6 +62,7 @@ export default new Vuex.Store({
     storeCalendarLocale: (state) => (state.locale || 'en-GB').replace('_', '-'),
     storeDarkMode: (state) => state.darkMode,
     storeHideCitationMessage: (state) => state.hideCitationMessage,
+    storeHighlightControls: (state) => state.highlightControls,
     storeDisplayMarkerIndicators: (state) => state.displayMarkerIndicators,
     storeDisplayMinCellWidth: (state) => state.displayMinCellWidth,
     storeGpsEnabled: (state) => state.gpsEnabled,
@@ -136,6 +138,13 @@ export default new Vuex.Store({
     ON_HIDE_CITATION_MESSAGE_CHANGED: function (state, newHideCitationMessage) {
       state.hideCitationMessage = newHideCitationMessage
     },
+    ON_HIGHLIGHT_CONTROLS_CHANGED: function (state, newHighlightControls) {
+      if (Object.prototype.hasOwnProperty.call(state, 'highlightControls')) {
+        state.highlightControls = newHighlightControls
+      } else {
+        Vue.set(state, 'highlightControls', newHighlightControls)
+      }
+    },
     ON_DISPLAY_MARKER_INDICATORS_CHANGED: function (state, newDisplayMarkerIndicators) {
       state.displayMarkerIndicators = newDisplayMarkerIndicators
     },
@@ -276,6 +285,9 @@ export default new Vuex.Store({
     setHideCitationMessage: function ({ commit }, hideCitationMessage) {
       commit('ON_HIDE_CITATION_MESSAGE_CHANGED', hideCitationMessage)
     },
+    setHighlightControls: function ({ commit }, highlightControls) {
+      commit('ON_HIGHLIGHT_CONTROLS_CHANGED', highlightControls)
+    },
     setDisplayMarkerIndicators: function ({ commit }, displayMarkerIndicators) {
       commit('ON_DISPLAY_MARKER_INDICATORS_CHANGED', displayMarkerIndicators)
     },

src/views/SettingsView.vue

@@ -91,6 +91,12 @@
               </b-input-group>
             </b-form-group>
 
+            <b-form-group :label="$t('formLabelSettingsHighlightControls')" :description="$t('formDescriptionSettingsHighlightControls')" label-for="highlightControls">
+              <b-form-checkbox id="highlightControls" v-model="highlightControls" switch>
+                {{ highlightControls ? $t('genericYes') : $t('genericNo') }}
+              </b-form-checkbox>
+            </b-form-group>
+
             <b-form-group :label="$t('formLabelSettingsDisplayMarkerIndicators')" :description="$t('formDescriptionSettingsDisplayMarkerIndicators')" label-for="markerIndicators">
               <b-form-checkbox id="markerIndicators" v-model="displayMarkerIndicators" switch>
                 {{ displayMarkerIndicators ? $t('genericYes') : $t('genericNo') }}
@@ -203,6 +209,7 @@ export default {
       locale: null,
       darkMode: false,
       hideCitationMessage: false,
+      highlightControls: true,
       displayMarkerIndicators: true,
       displayMinCellWidth: 4,
       categoryCountInline: 4,
@@ -224,6 +231,7 @@ export default {
       'storeLocale',
       'storeDarkMode',
       'storeHideCitationMessage',
+      'storeHighlightControls',
       'storeDisplayMarkerIndicators',
       'storeDisplayMinCellWidth',
       'storeGpsEnabled',
@@ -275,6 +283,10 @@ export default {
       this.$store.dispatch('setHideCitationMessage', newValue)
       emitter.emit('plausible-event', { key: 'citation-hidden', props: { hidden: newValue } })
     },
+    highlightControls: function (newValue) {
+      this.$store.dispatch('setHighlightControls', newValue)
+      emitter.emit('plausible-event', { key: 'settings-changed', props: { highlightControls: newValue } })
+    },
     displayMarkerIndicators: function (newValue) {
       this.$store.dispatch('setDisplayMarkerIndicators', newValue)
       emitter.emit('plausible-event', { key: 'settings-changed', props: { displayMarkerIndicators: newValue } })
@@ -348,6 +360,7 @@ export default {
       this.locale = this.storeLocale
       this.darkMode = this.storeDarkMode
       this.hideCitationMessage = this.storeHideCitationMessage
+      this.highlightControls = this.storeHighlightControls
       this.displayMarkerIndicators = this.storeDisplayMarkerIndicators
       this.displayMinCellWidth = this.storeDisplayMinCellWidth
       this.categoryCountInline = this.storeCategoryCountInline