From a67766cf186ebe58f3e9990db6ac3f352e2f939f Mon Sep 17 00:00:00 2001
From: I-Al-Istannen <i-al-istannen@users.noreply.github.com>
Date: Mon, 7 Aug 2023 11:13:07 +0200
Subject: [PATCH] [frontend] Disable matrix selector if it has too many cells

If the matrix selector has too many cells (I picked 3000 as an arbitrary
limit), its usefulness reduces.
Additionally, webbrowsers are not great at rendering hundreds of
thousands of table cells, especially if they are a Vue component each.
---
 .../repodetail/GraphDimensionSelector.vue     | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/repodetail/GraphDimensionSelector.vue b/frontend/src/components/repodetail/GraphDimensionSelector.vue
index 55890468b..a6525fbd4 100644
--- a/frontend/src/components/repodetail/GraphDimensionSelector.vue
+++ b/frontend/src/components/repodetail/GraphDimensionSelector.vue
@@ -3,6 +3,7 @@
     <v-card-text>
       <div class="d-flex align-center justify-space-between">
         <v-btn
+          v-if="canUseMatrixSelector"
           @click="useMatrixSelector = !useMatrixSelector"
           color="primary"
           :outlined="!isFullscreen"
@@ -10,8 +11,12 @@
           style="display: block; margin: auto"
         >
           <span v-if="useMatrixSelector">Use tree selector</span>
-          <span v-if="!useMatrixSelector">Use matrix selector</span>
+          <span v-if="!useMatrixSelector"> Use matrix selector </span>
         </v-btn>
+        <span v-else class="font-italic">
+          Matrix selector disabled ({{ matrixSelectorCellCount }} cells >
+          {{ maxMatrixSelectorCellCount }})
+        </span>
 
         <v-btn v-if="!isFullscreen" icon @click="$emit('expand')">
           <v-icon>{{ expandIcon }}</v-icon>
@@ -67,6 +72,8 @@ export default class GraphDimensionSelector extends Vue {
   @Prop({ default: 'matrix' })
   private readonly selectorType!: 'tree' | 'matrix'
 
+  private readonly maxMatrixSelectorCellCount = 3000
+
   @Watch('selectedDimensions')
   @Watch('repoId')
   private reloadGraphData() {
@@ -77,8 +84,24 @@ export default class GraphDimensionSelector extends Vue {
     this.$emit('update:selectedDimensions', newDimensions)
   }
 
+  private get matrixSelectorCellCount() {
+    const benchmarks = new Set()
+    const metrics = new Set()
+    for (const dim of this.allDimensions) {
+      benchmarks.add(dim.benchmark)
+      metrics.add(dim.metric)
+    }
+    return benchmarks.size * metrics.size
+  }
+
+  private get canUseMatrixSelector() {
+    // This limit is arbitrary. It was chosen as a round number that does not cause rendering glitches in my browser...
+    // At some point you can not see the whole matrix in full-screen either, making it less useful
+    return this.matrixSelectorCellCount < this.maxMatrixSelectorCellCount
+  }
+
   private get useMatrixSelector() {
-    return this.selectorType === 'matrix'
+    return this.selectorType === 'matrix' && this.canUseMatrixSelector
   }
 
   private set useMatrixSelector(useMatrixSelector: boolean) {