From 2a7f298eece95ce954a70b87a93572a2fbbf0f68 Mon Sep 17 00:00:00 2001
From: sebastian-raubach <sebastian.raubach@hutton.ac.uk>
Date: Fri, 26 Apr 2024 10:52:18 +0100
Subject: [PATCH] - ADD: Added color palette selector from pre-defined list. -
 CHG: Updated footer link to new GridScore website. -

---
 src/App.vue                                   |  2 +-
 src/components/MarkerSetup.vue                |  2 +-
 src/components/charts/FieldHeatmap.vue        |  5 +--
 src/components/charts/GermplasmRepHeatmap.vue |  5 +--
 src/components/modals/EditPeopleModal.vue     |  8 ++---
 .../modals/TrialPersonSelectModal.vue         |  8 ++---
 src/plugins/changelog/de_DE.json              |  5 +++
 src/plugins/changelog/en_GB.json              |  5 +++
 src/plugins/color.js                          | 12 ++++++-
 src/plugins/i18n/de_DE.json                   |  3 ++
 src/plugins/i18n/en_GB.json                   |  3 ++
 src/plugins/misc.js                           |  3 --
 src/views/DataStatistics.vue                  | 16 ++++-----
 src/views/SettingsView.vue                    | 33 +++++++++++++++++--
 src/views/TrialSetupView.vue                  |  8 ++---
 15 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a092f76..113b889 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,7 +69,7 @@
           </div>
 
           <ul class="nav col-md-4 justify-content-center justify-content-md-end list-unstyled d-flex">
-            <li class="ml-3"><a class="text-muted" href="https://cropgeeks.github.io/gridscore-next-client"><BIconGlobe2 /></a></li>
+            <li class="ml-3"><a class="text-muted" href="https://ics.hutton.ac.uk/get-gridscore"><BIconGlobe2 /></a></li>
             <li class="ml-3"><a class="text-muted" href="https://twitter.com/GerminateHub"><BIconTwitter /></a></li>
             <li class="ml-3"><a class="text-muted" href="https://github.com/cropgeeks/gridscore-next-client"><BIconGithub /></a></li>
           </ul>
diff --git a/src/components/MarkerSetup.vue b/src/components/MarkerSetup.vue
index dcb54f4..c9bdebb 100644
--- a/src/components/MarkerSetup.vue
+++ b/src/components/MarkerSetup.vue
@@ -187,7 +187,7 @@ export default {
           }
 
           // Draw the circle
-          this.ctx.fillStyle = this.storeTraitColors[1]
+          this.ctx.fillStyle = this.storeTraitColors[1 % this.storeTraitColors.length]
           this.ctx.beginPath()
           this.ctx.arc(finalX, finalY, 6, 0, 2 * Math.PI)
           this.ctx.fill()
diff --git a/src/components/charts/FieldHeatmap.vue b/src/components/charts/FieldHeatmap.vue
index edd75b7..646a02c 100644
--- a/src/components/charts/FieldHeatmap.vue
+++ b/src/components/charts/FieldHeatmap.vue
@@ -38,7 +38,8 @@
 import { mapGetters } from 'vuex'
 import { getTrialDataCached } from '@/plugins/datastore'
 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 { invertHex, toLocalDateString } from '@/plugins/misc'
+import { categoricalColors } from '@/plugins/color'
 import PlotDataSection from '@/components/PlotDataSection'
 
 const emitter = require('tiny-emitter/instance')
@@ -298,7 +299,7 @@ export default {
           colorscale: this.selectedTrait.dataType === 'categorical'
             ? restrictions.categories.map((_, i) => {
               const l = restrictions.categories.length
-              const c = categoryColors[i % categoryColors.length]
+              const c = categoricalColors.D3schemeCategory10[i % categoricalColors.D3schemeCategory10.length]
               return [[i / l, c], [(i + 1) / l, c]]
             }).flat()
             : [[0, this.storeDarkMode ? '#444444' : '#dddddd'], [1, this.selectedTrait.color]],
diff --git a/src/components/charts/GermplasmRepHeatmap.vue b/src/components/charts/GermplasmRepHeatmap.vue
index cbfabdf..df38c8c 100644
--- a/src/components/charts/GermplasmRepHeatmap.vue
+++ b/src/components/charts/GermplasmRepHeatmap.vue
@@ -35,7 +35,8 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getTrialDataCached } from '@/plugins/datastore'
-import { categoryColors, invertHex, toLocalDateString } from '@/plugins/misc'
+import { invertHex, toLocalDateString } from '@/plugins/misc'
+import { categoricalColors } from '@/plugins/color'
 import PlotDataSection from '@/components/PlotDataSection'
 import { CELL_CATEGORY_CONTROL } from '@/plugins/constants'
 
@@ -313,7 +314,7 @@ export default {
           colorscale: this.selectedTrait.dataType === 'categorical'
             ? restrictions.categories.map((_, i) => {
               const l = restrictions.categories.length
-              const c = categoryColors[i % categoryColors.length]
+              const c = categoricalColors.D3schemeCategory10[i % categoricalColors.D3schemeCategory10.length]
               return [[i / l, c], [(i + 1) / l, c]]
             }).flat()
             : [[0, this.storeDarkMode ? '#444444' : '#dddddd'], [1, this.selectedTrait.color]],
diff --git a/src/components/modals/EditPeopleModal.vue b/src/components/modals/EditPeopleModal.vue
index f663a3f..b9c4c46 100644
--- a/src/components/modals/EditPeopleModal.vue
+++ b/src/components/modals/EditPeopleModal.vue
@@ -22,22 +22,22 @@
         <b-row>
           <b-col :cols=12 :md=3>
             <b-button :variant="isCorrespondingAuthor ? 'dark' : 'outline-dark'" @click="toggle(PERSON_TYPE_CORRESPONDING_AUTHOR)" class="w-100 person-type-button d-flex flex-column align-items-center">
-              <h2 :style="{ color: storeTraitColors[0] }"><PersonTypeIcon :personType="PERSON_TYPE_CORRESPONDING_AUTHOR" /></h2> <span>{{ $t('personTypeCorrespondingAuthor') }}</span>
+              <h2 :style="{ color: storeTraitColors[0 % storeTraitColors.length] }"><PersonTypeIcon :personType="PERSON_TYPE_CORRESPONDING_AUTHOR" /></h2> <span>{{ $t('personTypeCorrespondingAuthor') }}</span>
             </b-button>
           </b-col>
           <b-col :cols=12 :md=3>
             <b-button :variant="isDataCollector ? 'dark' : 'outline-dark'" @click="toggle(PERSON_TYPE_DATA_COLLECTOR)" class="w-100 person-type-button d-flex flex-column align-items-center">
-              <h2 :style="{ color: storeTraitColors[1] }"><PersonTypeIcon :personType="PERSON_TYPE_DATA_COLLECTOR" /></h2> <span>{{ $t('personTypeDataCollector') }}</span>
+              <h2 :style="{ color: storeTraitColors[1 % storeTraitColors.length] }"><PersonTypeIcon :personType="PERSON_TYPE_DATA_COLLECTOR" /></h2> <span>{{ $t('personTypeDataCollector') }}</span>
             </b-button>
           </b-col>
           <b-col :cols=12 :md=3>
             <b-button :variant="isQualityChecker ? 'dark' : 'outline-dark'" @click="toggle(PERSON_TYPE_QUALITY_CHECKER)" class="w-100 person-type-button d-flex flex-column align-items-center">
-              <h2 :style="{ color: storeTraitColors[2] }"><PersonTypeIcon :personType="PERSON_TYPE_QUALITY_CHECKER" /></h2> <span>{{ $t('personTypeQualityChecker') }}</span>
+              <h2 :style="{ color: storeTraitColors[2 % storeTraitColors.length] }"><PersonTypeIcon :personType="PERSON_TYPE_QUALITY_CHECKER" /></h2> <span>{{ $t('personTypeQualityChecker') }}</span>
             </b-button>
           </b-col>
           <b-col :cols=12 :md=3>
             <b-button :variant="isSubmitter ? 'dark' : 'outline-dark'" @click="toggle(PERSON_TYPE_DATA_SUBMITTER)" class="w-100 person-type-button d-flex flex-column align-items-center">
-              <h2 :style="{ color: storeTraitColors[3] }"><PersonTypeIcon :personType="PERSON_TYPE_DATA_SUBMITTER" /></h2> <span>{{ $t('personTypeDataSubmitter') }}</span>
+              <h2 :style="{ color: storeTraitColors[3 % storeTraitColors.length] }"><PersonTypeIcon :personType="PERSON_TYPE_DATA_SUBMITTER" /></h2> <span>{{ $t('personTypeDataSubmitter') }}</span>
             </b-button>
           </b-col>
         </b-row>
diff --git a/src/components/modals/TrialPersonSelectModal.vue b/src/components/modals/TrialPersonSelectModal.vue
index a8ab792..0ab9ed5 100644
--- a/src/components/modals/TrialPersonSelectModal.vue
+++ b/src/components/modals/TrialPersonSelectModal.vue
@@ -68,10 +68,10 @@ export default {
     ]),
     personStyle: function () {
       const result = {}
-      result[PERSON_TYPE_CORRESPONDING_AUTHOR] = this.storeTraitColors[0]
-      result[PERSON_TYPE_DATA_COLLECTOR] = this.storeTraitColors[1]
-      result[PERSON_TYPE_QUALITY_CHECKER] = this.storeTraitColors[2]
-      result[PERSON_TYPE_DATA_SUBMITTER] = this.storeTraitColors[3]
+      result[PERSON_TYPE_CORRESPONDING_AUTHOR] = this.storeTraitColors[0 % this.storeTraitColors.length]
+      result[PERSON_TYPE_DATA_COLLECTOR] = this.storeTraitColors[1 % this.storeTraitColors.length]
+      result[PERSON_TYPE_QUALITY_CHECKER] = this.storeTraitColors[2 % this.storeTraitColors.length]
+      result[PERSON_TYPE_DATA_SUBMITTER] = this.storeTraitColors[3 % this.storeTraitColors.length]
 
       return result
     }
diff --git a/src/plugins/changelog/de_DE.json b/src/plugins/changelog/de_DE.json
index d108855..a6092d2 100644
--- a/src/plugins/changelog/de_DE.json
+++ b/src/plugins/changelog/de_DE.json
@@ -436,6 +436,11 @@
         "type": "new",
         "title": "Datensatatistiken",
         "text": "Eine Datenstatistk-Übersichtsseite wurde zu GridScore hinzugefügt welche verschiedene Ansichten auf die Daten erlaubt, z.B. eine Kalendarheatmap welche arbeitsreiche Tage hervorhebt sowie die Fläche die durch Datensammlung abgedeckt wurde und Vieles mehr."
+      },
+      {
+        "type": "new",
+        "title": "Farbpaletten",
+        "text": "Eine Vorauswahl von vordefinierten Farbpaletten wurde hinzugefügt. Diese beinhalten die Standard GridScore Palette sowie gängige Farbpaletten."
       }
     ]
   }
diff --git a/src/plugins/changelog/en_GB.json b/src/plugins/changelog/en_GB.json
index fd44439..f97c17b 100644
--- a/src/plugins/changelog/en_GB.json
+++ b/src/plugins/changelog/en_GB.json
@@ -436,6 +436,11 @@
         "type": "new",
         "title": "Data statistics",
         "text": "An overview trial statistics page has been added to GridScore that shows various views onto the data like a calendar heatmap showing busy data collection days as well as stats on the size of area covered by data collection and many others."
+      },
+      {
+        "type": "new",
+        "title": "Color palettes",
+        "text": "Added a pre-selection of color palettes to choose from. These include the default GridScore palette as well as other well-known color palettes."
       }
     ]
   }
diff --git a/src/plugins/color.js b/src/plugins/color.js
index 1d98789..47ebf32 100644
--- a/src/plugins/color.js
+++ b/src/plugins/color.js
@@ -44,9 +44,19 @@ const shadeColor = (hex, percent) => {
   return rgbToHex({ r, g, b })
 }
 
+const categoricalColors = {
+  GridScoreDefault: ['#910080', '#ff7c00', '#5ec418', '#00a0f1', '#c5e000', '#ff007a', '#222183', '#c83831', '#fff600'],
+  CBQuantPair12: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'],
+  CBQuantSet19: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'],
+  CBQuantDark28: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
+  OkabeIto: ['#E69F00', '#56B4E9', '#009E73', '#F5C710', '#0072B2', '#D55E00', '#CC79A7', '#999999', '#000000'],
+  D3schemeCategory10: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']
+}
+
 export {
   getHighContrastTextColor,
   shadeColor,
   hexToRgb,
-  rgbToHex
+  rgbToHex,
+  categoricalColors
 }
diff --git a/src/plugins/i18n/de_DE.json b/src/plugins/i18n/de_DE.json
index 5a266d5..2449dbb 100644
--- a/src/plugins/i18n/de_DE.json
+++ b/src/plugins/i18n/de_DE.json
@@ -322,6 +322,9 @@
   "formDescriptionPersonRole": "Eine Rolle die die Hauptfunktion dieser Person angibt. Es ist zu beachten, dass diese Rolle keinerlei Einfluss auf die Funktionsweise von GridScore hat.",
   "formLabelTrialSetupTrialPeople": "Involvierte Personen",
   "formDescriptionTrialSetupTrialPeople": "Optional können Personen definiert werden die am Versuch beteiligt sind.",
+  "formLabelSettingsTraitColorPreset": "Farbvorauswahl auswählen",
+  "formDescriptionSettingsTraitColorPreset": "Wähle eine dieser gängigen Farbvorauswahlen.",
+  "dropdownSettingsTraitColorPreset": "Farbvorauswahlen",
   "menuHome": "Home",
   "menuDataEntry": "Dateneingabe",
   "menuDataExport": "Exportieren",
diff --git a/src/plugins/i18n/en_GB.json b/src/plugins/i18n/en_GB.json
index 3af3aa7..4b7febf 100644
--- a/src/plugins/i18n/en_GB.json
+++ b/src/plugins/i18n/en_GB.json
@@ -327,6 +327,9 @@
   "formDescriptionPersonRole": "A role that determines the main purpose of this person. Please note that these do not affect the way GridScore behaves.",
   "formLabelTrialSetupTrialPeople": "People involved",
   "formDescriptionTrialSetupTrialPeople": "Optionally, define everyone who is involved in this trial.",
+  "formLabelSettingsTraitColorPreset": "Pick color preset",
+  "formDescriptionSettingsTraitColorPreset": "Choose one of these commonly used color presets.",
+  "dropdownSettingsTraitColorPreset": "Color presets",
   "genericDisabled": "Disabled",
   "genericEnabled": "Enabled",
   "genericYes": "Yes",
diff --git a/src/plugins/misc.js b/src/plugins/misc.js
index 3ff5e04..d8a5075 100644
--- a/src/plugins/misc.js
+++ b/src/plugins/misc.js
@@ -6,8 +6,6 @@ import store from '@/store'
 import { saveAs } from 'file-saver'
 import { DISPLAY_ORDER_LEFT_TO_RIGHT, DISPLAY_ORDER_TOP_TO_BOTTOM } from './constants'
 
-const categoryColors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']
-
 const DIVISIONS = [
   { amount: 60, name: 'seconds' },
   { amount: 60, name: 'minutes' },
@@ -531,7 +529,6 @@ export {
   isOffline,
   checkDataMatchesTraitType,
   isValidDateString,
-  categoryColors,
   getNumberWithSuffix,
   truncateAfterWords,
   formatTimeAgo
diff --git a/src/views/DataStatistics.vue b/src/views/DataStatistics.vue
index 31c0384..9d3cc62 100644
--- a/src/views/DataStatistics.vue
+++ b/src/views/DataStatistics.vue
@@ -26,31 +26,31 @@
           <b-row class="my-3 text-center" v-if="stats[trial.localId]">
             <b-col cols=6 md=4 lg=3 xl=2 offset-xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[0] }"><BIconUiChecksGrid /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[0 % storeTraitColors.length] }"><BIconUiChecksGrid /></h3>
                 <span>{{ $t('widgetTrialDataStatsPlots', { count: (stats[trial.localId].plots || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[1] }"><BIconTags /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[1 % storeTraitColors.length] }"><BIconTags /></h3>
                 <span>{{ $t('widgetTrialDataStatsTraits', { count: (stats[trial.localId].traits || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[2] }"><BIconChatLeftText /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[2 % storeTraitColors.length] }"><BIconChatLeftText /></h3>
                 <span>{{ $t('widgetTrialDataStatsComments', { count: (stats[trial.localId].comments || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[3] }"><BIconFlag /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[3 % storeTraitColors.length] }"><BIconFlag /></h3>
                 <span>{{ $t('widgetTrialDataStatsEvents', { count: (stats[trial.localId].events || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 offset-xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[4] }"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[4 % storeTraitColors.length] }"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16">
                   <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75z"/>
                 </svg></h3>
                 <span>{{ $t('widgetTrialDataStatsMeasurements', { count: (stats[trial.localId].measurements || 0).toLocaleString() }) }}</span>
@@ -58,20 +58,20 @@
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[5] }"><BIconBoundingBoxCircles /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[5 % storeTraitColors.length] }"><BIconBoundingBoxCircles /></h3>
                 <span v-if="stats[trial.localId].area">{{ $t('widgetTrialDataStatsArea', { area: (areaUnits[areaUnit].convert(stats[trial.localId].area) || 0).toLocaleString(), unit: areaUnits[areaUnit].unit }) }}</span>
                 <span v-else>{{ $t('widgetTrialDataStatsAreaUnknown') }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[7] }"><BIconCalendarRangeFill /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[7 % storeTraitColors.length] }"><BIconCalendarRangeFill /></h3>
                 <span>{{ $t('widgetTrialDataStatsDayRange', { count: (stats[trial.localId].dayRange || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
             <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
               <b-card class="h-100 bg-dark text-light">
-                <h3 class="mb-0" :style="{ color: storeTraitColors[8] }"><BIconCalendarDateFill /></h3>
+                <h3 class="mb-0" :style="{ color: storeTraitColors[8 % storeTraitColors.length] }"><BIconCalendarDateFill /></h3>
                 <span>{{ $t('widgetTrialDataStatsActiveDays', { count: (stats[trial.localId].activeDays || 0).toLocaleString() }) }}</span>
               </b-card>
             </b-col>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index d265758..7193409 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -91,6 +91,20 @@
               </b-input-group>
             </b-form-group>
 
+            <b-form-group :label="$t('formLabelSettingsTraitColorPreset')" label-for="preset-color" :description="$t('formDescriptionSettingsTraitColorPreset')" class="settings-colors">
+              <b-input-group>
+                <b-dropdown id="preset-color" :text="$t('dropdownSettingsTraitColorPreset')">
+                  <b-dropdown-group :header="colorKey" v-for="colorKey in Object.keys(categoricalColors)" :key="`color-preset-${colorKey}`">
+                    <b-dropdown-item @click="selectColorPreset(categoricalColors[colorKey])">
+                      <div class="d-flex flex-row gradient">
+                        <div v-for="color in categoricalColors[colorKey]" :key="`color-preset-${colorKey}-${color}`" :style="{ background: color }" />
+                      </div>
+                    </b-dropdown-item>
+                  </b-dropdown-group>
+                </b-dropdown>
+              </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') }}
@@ -175,6 +189,7 @@ import { BIconHandIndex, BIconX, BIconShare, BIconArrowsMove, BIconPlus, BIconAr
 import { NAVIGATION_MODE_JUMP, NAVIGATION_MODE_DRAG, CANVAS_DENSITY_LOW, CANVAS_DENSITY_MEDIUM, CANVAS_DENSITY_HIGH, CANVAS_SHAPE_CIRCLE, CANVAS_SHAPE_SQUARE, CANVAS_SIZE_SMALL, CANVAS_SIZE_MEDIUM, CANVAS_SIZE_LARGE } from '@/plugins/constants'
 import SettingsShareModal from '@/components/modals/SettingsShareModal'
 import draggable from 'vuedraggable'
+import { categoricalColors } from '@/plugins/color'
 
 const emitter = require('tiny-emitter/instance')
 
@@ -223,7 +238,8 @@ export default {
       navigationMode: null,
       traitColors: [],
       newColor: '#000000',
-      showFullTraitDescription: true
+      showFullTraitDescription: true,
+      categoricalColors
     }
   },
   computed: {
@@ -344,6 +360,9 @@ export default {
     }
   },
   methods: {
+    selectColorPreset: function (colors) {
+      this.traitColors = colors.concat()
+    },
     addColor: function () {
       this.traitColors.push(this.newColor)
       this.newColor = '#000000'
@@ -354,7 +373,7 @@ export default {
       }
     },
     resetColors: function () {
-      this.traitColors = ['#910080', '#ff7c00', '#5ec418', '#00a0f1', '#c5e000', '#ff007a', '#222183', '#c83831', '#fff600']
+      this.traitColors = categoricalColors.GridScoreDefault
     },
     reset: function () {
       this.locale = this.storeLocale
@@ -399,3 +418,13 @@ export default {
   cursor: move;
 }
 </style>
+
+<style scoped>
+.gradient {
+  min-width: 250px;
+  height: 30px;
+}
+.gradient > div {
+  flex-grow: 1;
+}
+</style>
diff --git a/src/views/TrialSetupView.vue b/src/views/TrialSetupView.vue
index 2d447d3..9020b11 100644
--- a/src/views/TrialSetupView.vue
+++ b/src/views/TrialSetupView.vue
@@ -331,10 +331,10 @@ export default {
     ]),
     personStyle: function () {
       const result = {}
-      result[PERSON_TYPE_CORRESPONDING_AUTHOR] = this.storeTraitColors[0]
-      result[PERSON_TYPE_DATA_COLLECTOR] = this.storeTraitColors[1]
-      result[PERSON_TYPE_QUALITY_CHECKER] = this.storeTraitColors[2]
-      result[PERSON_TYPE_DATA_SUBMITTER] = this.storeTraitColors[3]
+      result[PERSON_TYPE_CORRESPONDING_AUTHOR] = this.storeTraitColors[0 % this.storeTraitColors.length]
+      result[PERSON_TYPE_DATA_COLLECTOR] = this.storeTraitColors[1 % this.storeTraitColors.length]
+      result[PERSON_TYPE_QUALITY_CHECKER] = this.storeTraitColors[2 % this.storeTraitColors.length]
+      result[PERSON_TYPE_DATA_SUBMITTER] = this.storeTraitColors[3 % this.storeTraitColors.length]
 
       return result
     },