From 899d0a0c705d32b0a4eafa7edc6c7187f6333796 Mon Sep 17 00:00:00 2001
From: Rien Maertens <rien.maertens@posteo.be>
Date: Thu, 29 Jun 2023 14:11:11 +0200
Subject: [PATCH] Fix infinite update with timeline

---
 web/src/components/clustering/ClusterTimeSeries.vue | 7 +------
 web/src/components/graph/GraphLegend.vue            | 4 +++-
 web/src/views/analysis/cluster.vue                  | 4 ++--
 web/src/views/analysis/submission.vue               | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/src/components/clustering/ClusterTimeSeries.vue b/web/src/components/clustering/ClusterTimeSeries.vue
index 0d1ba6d12..3a4c68f26 100644
--- a/web/src/components/clustering/ClusterTimeSeries.vue
+++ b/web/src/components/clustering/ClusterTimeSeries.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="timeseries" ref="timeseriesElement">
-    <graph-legend :legend.sync="legend" />
+    <graph-legend :legend="legend" readonly />
   </div>
 </template>
 
@@ -226,11 +226,6 @@ watch(
   }
 );
 
-// Update the internal legend object when the legend changes.
-watch(legend, (l) => {
-  legend.value = l;
-});
-
 // Watch width changes & update the size.
 watch(width, () => {
   draw();
diff --git a/web/src/components/graph/GraphLegend.vue b/web/src/components/graph/GraphLegend.vue
index f6b012f2b..16815ef33 100644
--- a/web/src/components/graph/GraphLegend.vue
+++ b/web/src/components/graph/GraphLegend.vue
@@ -6,6 +6,7 @@
     >
       <label>
         <input
+          :disabled="readonly"
           type="checkbox"
           v-model="legendDatum.selected"
           class="legend-checkbox"
@@ -31,9 +32,10 @@ import { useVModel } from "@vueuse/core";
 
 interface Props {
   legend: Legend;
+  readonly?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), { readonly: false });
 const emit = defineEmits(["update:legend"]);
 const legendValue = useVModel(props, "legend", emit);
 
diff --git a/web/src/views/analysis/cluster.vue b/web/src/views/analysis/cluster.vue
index 8b60982f0..83d0097af 100644
--- a/web/src/views/analysis/cluster.vue
+++ b/web/src/views/analysis/cluster.vue
@@ -98,7 +98,7 @@
                 node-clickable
                 @click:node="onNodeClick"
               >
-                <graph-legend :legend.sync="legend" />
+                <graph-legend :legend="legend" readonly />
               </graph>
             </v-card-text>
           </v-card>
@@ -175,4 +175,4 @@ const showHeatmap = computed(() => {
     height: 350px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/analysis/submission.vue b/web/src/views/analysis/submission.vue
index 6e427a38a..ac2ce2319 100644
--- a/web/src/views/analysis/submission.vue
+++ b/web/src/views/analysis/submission.vue
@@ -126,7 +126,7 @@
                     node-clickable
                     @click:node="onNodeClick"
                   >
-                    <graph-legend :legend.sync="legend" />
+                    <graph-legend :legend="legend" readonly />
                   </graph>
                 </div>
               </v-card-text>