- ADD: Added the option to hide all trait circles regardless of which traits are active or not. This may be useful in cases where there is a huge number of traits.

Author: sebastian-raubach

components.d.ts

@@ -55,9 +55,7 @@ declare module 'vue' {
     BNavItem: typeof import('bootstrap-vue-next/components/BNav')['BNavItem']
     BNavItemDropdown: typeof import('bootstrap-vue-next/components/BNav')['BNavItemDropdown']
     BOffcanvas: typeof import('bootstrap-vue-next/components/BOffcanvas')['BOffcanvas']
-    BOverlay: typeof import('bootstrap-vue-next/components/BOverlay')['BOverlay']
     BPagination: typeof import('bootstrap-vue-next/components/BPagination')['BPagination']
-    BPlaceholderCard: typeof import('bootstrap-vue-next/components/BPlaceholder')['BPlaceholderCard']
     BPopover: typeof import('bootstrap-vue-next/components/BPopover')['BPopover']
     BProgress: typeof import('bootstrap-vue-next/components/BProgress')['BProgress']
     BProgressBar: typeof import('bootstrap-vue-next/components/BProgress')['BProgressBar']
@@ -131,7 +129,6 @@ declare module 'vue' {
     IBiCardChecklist: typeof import('~icons/bi/card-checklist')['default']
     IBiCardList: typeof import('~icons/bi/card-list')['default']
     IBiCardText: typeof import('~icons/bi/card-text')['default']
-    IBiCaretDown: typeof import('~icons/bi/caret-down')['default']
     IBiCaretLeftFill: typeof import('~icons/bi/caret-left-fill')['default']
     IBiCaretRight: typeof import('~icons/bi/caret-right')['default']
     IBiCaretRightFill: typeof import('~icons/bi/caret-right-fill')['default']
@@ -142,6 +139,7 @@ declare module 'vue' {
     IBiChatRightText: typeof import('~icons/bi/chat-right-text')['default']
     IBiChatRightTextFill: typeof import('~icons/bi/chat-right-text-fill')['default']
     IBiCheck: typeof import('~icons/bi/check')['default']
+    IBiCheck2: typeof import('~icons/bi/check2')['default']
     IBiCheck2Square: typeof import('~icons/bi/check2-square')['default']
     IBiCheckSquare: typeof import('~icons/bi/check-square')['default']
     IBiCheckSquareFill: typeof import('~icons/bi/check-square-fill')['default']
@@ -152,13 +150,9 @@ declare module 'vue' {
     IBiChevronDown: typeof import('~icons/bi/chevron-down')['default']
     IBiChevronLeft: typeof import('~icons/bi/chevron-left')['default']
     IBiChevronRight: typeof import('~icons/bi/chevron-right')['default']
-    IBiChevronUp: typeof import('~icons/bi/chevron-up')['default']
     IBiCircle: typeof import('~icons/bi/circle')['default']
     IBiCircleFill: typeof import('~icons/bi/circle-fill')['default']
     IBiCircleHalf: typeof import('~icons/bi/circle-half')['default']
-    IBiCircleInfo: typeof import('~icons/bi/circle-info')['default']
-    IBiCircleInformation: typeof import('~icons/bi/circle-information')['default']
-    IBiClear: typeof import('~icons/bi/clear')['default']
     IBiClipboardData: typeof import('~icons/bi/clipboard-data')['default']
     IBiClockHistory: typeof import('~icons/bi/clock-history')['default']
     IBiCloudDownload: typeof import('~icons/bi/cloud-download')['default']
@@ -169,10 +163,8 @@ declare module 'vue' {
     IBiCloudUpload: typeof import('~icons/bi/cloud-upload')['default']
     IBiCloudUploadFill: typeof import('~icons/bi/cloud-upload-fill')['default']
     IBiCollection: typeof import('~icons/bi/collection')['default']
-    IBiconArrowLeftRight: typeof import('~icons/bi/con-arrow-left-right')['default']
     IBiCursorFill: typeof import('~icons/bi/cursor-fill')['default']
     IBiDatabaseFill: typeof import('~icons/bi/database-fill')['default']
-    IBiDelete: typeof import('~icons/bi/delete')['default']
     IBiDiagram2: typeof import('~icons/bi/diagram2')['default']
     IBiDiamondHalf: typeof import('~icons/bi/diamond-half')['default']
     IBiDot: typeof import('~icons/bi/dot')['default']
@@ -277,7 +269,6 @@ declare module 'vue' {
     IBiTrashFill: typeof import('~icons/bi/trash-fill')['default']
     IBiTwitter: typeof import('~icons/bi/twitter')['default']
     IBiUiChecksGrid: typeof import('~icons/bi/ui-checks-grid')['default']
-    IBiUpb: typeof import('~icons/bi/upb')['default']
     IBiUpc: typeof import('~icons/bi/upc')['default']
     IBiViewStacked: typeof import('~icons/bi/view-stacked')['default']
     IBiX: typeof import('~icons/bi/x')['default']
@@ -300,7 +291,6 @@ declare module 'vue' {
     PlotCommentListModal: typeof import('./src/components/modals/PlotCommentListModal.vue')['default']
     PlotCommentModal: typeof import('./src/components/modals/PlotCommentModal.vue')['default']
     PlotDataSection: typeof import('./src/components/PlotDataSection.vue')['default']
-    PlotMetadataDataUpdateModal: typeof import('./src/components/modals/PlotMetadataDataUpdateModal.vue')['default']
     PlotMetadataUpdateModal: typeof import('./src/components/modals/PlotMetadataUpdateModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -347,7 +337,6 @@ declare module 'vue' {
     TrialSynchronizationModal: typeof import('./src/components/modals/TrialSynchronizationModal.vue')['default']
     TrialTraitTimeframeModal: typeof import('./src/components/modals/TrialTraitTimeframeModal.vue')['default']
     UploadTraitImageModal: typeof import('./src/components/modals/UploadTraitImageModal.vue')['default']
-    VideoModal: typeof import('./src/components/modals/VideoModal.vue')['default']
     VScroll: typeof import('./src/components/canvas/VScroll.vue')['default']
   }
   export interface ComponentCustomProperties {

package-lock.json

@@ -68,6 +68,7 @@
     "unplugin-icons": "^0.19.0",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.8",
+    "vite-bundle-analyzer": "^1.2.3",
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vue-tsc": "^2.2.0"

package.json

@@ -33,19 +33,19 @@
 
       <b-button type="submit" variant="primary" :disabled="!canProceed"><IBiCloudDownload /> {{ $t('buttonReceiveData') }}</b-button>
 
+      <div v-if="errors && errors.length > 0" class="my-3">
+        <h3>{{ $t('widgetBrapiTrialImportErrorsTitle') }}</h3>
+
+        <b-list-group class="import-errors">
+          <b-list-group-item variant="danger" v-for="(error, index) in errors" :key="`import-error-${index}`">{{ error }}</b-list-group-item>
+        </b-list-group>
+      </div>
+
       <template v-if="layoutValid">
         <hr />
 
         <TrialLayoutDimensionComponent class="mt-3" :editLabelsAllowed="false" :editValuesAllowed="false" :layout="layout" @layout-changed="updateLayout" ref="trialDimensionComponent" />
 
-        <div v-if="errors && errors.length > 0" class="my-3">
-          <h3>{{ $t('widgetBrapiTrialImportErrorsTitle') }}</h3>
-
-          <b-list-group class="import-errors">
-            <b-list-group-item variant="danger" v-for="(error, index) in errors" :key="`import-error-${index}`">{{ error }}</b-list-group-item>
-          </b-list-group>
-        </div>
-
         <b-button @click="importData" variant="primary" :disabled="!canImport"><IBiCloudDownload /> {{ $t('buttonImportData') }}</b-button>
       </template>
     </b-form>

src/components/BrapiTrialImportSection.vue

@@ -97,7 +97,8 @@ export default {
       'storeDisplayMinCellWidth',
       'storeCanvasDensity',
       'storeCanvasSize',
-      'storePlotDisplayField'
+      'storePlotDisplayField',
+      'storeHideTraitCircles'
     ])
   },
   watch: {
@@ -109,6 +110,9 @@ export default {
         this.scrollToPosition = this.$refs.plotCanvas.getCenterPosition()
       }
       this.reset()
+    },
+    storeHideTraitCircles: function () {
+      this.reset()
     }
   },
   methods: {
@@ -187,10 +191,14 @@ export default {
       this.isResetting = true
 
       this.$nextTick(() => {
-        if (this.storeHiddenTraits) {
-          this.dimensions.visibleTraitCount = this.trial.traits.filter(t => !this.storeHiddenTraits.includes(t.id)).length
+        if (this.storeHideTraitCircles) {
+          this.dimensions.visibleTraitCount = 0
         } else {
-          this.dimensions.visibleTraitCount = this.trial.traits.length
+          if (this.storeHiddenTraits) {
+            this.dimensions.visibleTraitCount = this.trial.traits.filter(t => !this.storeHiddenTraits.includes(t.id)).length
+          } else {
+            this.dimensions.visibleTraitCount = this.trial.traits.length
+          }
         }
 
         this.dimensions.rowHeaderWidth = this.dimensions.padding + (this.dimensions.fontSize * `${this.trial.layout.rows}`.length)

src/components/canvas/DataCanvas.vue

@@ -145,7 +145,8 @@ export default {
       'storeCanvasSize',
       'storeCanvasShape',
       'storeCanvasDensity',
-      'storePlotDisplayField'
+      'storePlotDisplayField',
+      'storeHideTraitCircles'
     ]),
     cellClass: function () {
       return {
@@ -247,7 +248,7 @@ export default {
     },
     visibleTraits: function () {
       if (this.trial) {
-        return this.trial.traits.filter(t => !this.storeHiddenTraits.includes(t.id))
+        return this.storeHideTraitCircles ? [] : this.trial.traits.filter(t => !this.storeHiddenTraits.includes(t.id))
       } else {
         return []
       }

src/components/canvas/DataGridComponent.vue

@@ -3,6 +3,7 @@
     <template #button-content>
       <IBiDiamondHalf :style="{ transform: 'rotate(45deg)' }" width="1.3em" height="1.3em" v-if="store.canvasShape === CANVAS_SHAPE_SQUARE" /><IBiCircleHalf v-else /> <span class="d-none d-lg-inline-block">{{ $t('toolbarTraitVisibility') }}</span>
     </template>
+    <b-dropdown-item-button @click="store.setHideTraitCircles(!store.storeHideTraitCircles)">{{ $t(store.storeCanvasShape === CANVAS_SHAPE_CIRCLE ? 'buttonHideTraitCircles' : 'buttonHideTraitSquares') }} <IBiCheck2 v-if="store.storeHideTraitCircles" /></b-dropdown-item-button>
     <b-dropdown-form>
       <b-form-group class="mb-0" :label="$t('formLabelTraitDropdownCutoffDate')" label-for="cutoff" :title="$t('formDescriptionTraitDropdownCutoffDate')" v-if="atLeastOneMultiTrait">
         <b-input-group>
@@ -37,7 +38,7 @@
 
 <script setup lang="ts">
 import { coreStore } from '@/store'
-import { CANVAS_SHAPE_SQUARE } from '@/plugins/constants'
+import { CANVAS_SHAPE_CIRCLE, CANVAS_SHAPE_SQUARE } from '@/plugins/constants'
 import TraitIcon from '@/components/icons/TraitIcon.vue'
 import { TraitPlus } from '@/plugins/types/client'
 import { useI18n } from 'vue-i18n'

src/components/dropdowns/TraitDropdown.vue

@@ -100,6 +100,8 @@
   "buttonDownloadSvg": "Als SVG herunterladen",
   "buttonSwapGuidedWalkCells": "Wechseln",
   "buttonDeleteLocalChanges": "Lokale Veränderungen löschen",
+  "buttonHideTraitCircles": "Merkmalskreise ausblenden",
+  "buttonHideTraitSquares": "Merkmalsrechtecke ausblenden",
   "cellCategoryControl": "Kontrolle",
   "changelogBadgeNew": "NEU",
   "changelogBadgeUpdate": "AKT",

src/plugins/i18n/de_DE.json

@@ -101,6 +101,8 @@
   "buttonDownloadSvg": "Download SVG",
   "buttonSwapGuidedWalkCells": "Swap",
   "buttonDeleteLocalChanges": "Delete local changes",
+  "buttonHideTraitCircles": "Hide trait circles",
+  "buttonHideTraitSquares": "Hide trait squares",
   "appTitle": "GridScore NEXT",
   "appTitleLegacy": "GridScore legacy",
   "cellCategoryControl": "Control/Check",

src/plugins/i18n/en_GB.json

@@ -47,6 +47,7 @@ export const coreStore = defineStore('core', {
     mapLayer: 'theme',
     trialListMode: TRIAL_LIST_ALL,
     trialListArrangement: TRIAL_LIST_GRID,
+    hideTraitCircles: false,
     hiddenTraits: [] as string[],
     showFullTraitDescription: true,
     escapeBarcode: null as (string | null),
@@ -100,6 +101,7 @@ export const coreStore = defineStore('core', {
     storeTrialListArrangement: (state): string => state.trialListArrangement,
     storeMapLayer: (state): string => state.mapLayer,
     storeSelectedTrial: (state): string | null => state.selectedTrial,
+    storeHideTraitCircles: (state): boolean => state.hideTraitCircles || false,
     storeHiddenTraits: (state): string[] => state.hiddenTraits,
     storePlausible: (state): PlausibleConfig => state.plausible,
     storeServerUrl: (state): string | null => state.serverUrl,
@@ -120,6 +122,9 @@ export const coreStore = defineStore('core', {
     setHiddenTraits: function (newHiddenTraits: string[]) {
       this.hiddenTraits = newHiddenTraits
     },
+    setHideTraitCircles: function (newHideTraitCircles: boolean) {
+      this.hideTraitCircles = newHideTraitCircles
+    },
     setSelectedTrialPerson: function (newSelectedTrialPerson: string | null) {
       this.selectedTrialPerson = newSelectedTrialPerson
     },
@@ -140,6 +145,7 @@ export const coreStore = defineStore('core', {
       const currentId = this.selectedTrial
       this.selectedTrial = newSelectedTrial
       this.hiddenTraits = []
+      this.hideTraitCircles = false
       if (currentId !== newSelectedTrial) {
         this.selectedTrialPerson = null
       }