From 02f7b77812dff697699a3a70221776b6d794877b Mon Sep 17 00:00:00 2001
From: Matthieu Jouis <matthieu@probabl.ai>
Date: Mon, 7 Oct 2024 16:12:38 +0200
Subject: [PATCH] fix(UI): Add animation frames to plotly widgets

---
 skore-ui/src/components/PlotlyWidget.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/skore-ui/src/components/PlotlyWidget.vue b/skore-ui/src/components/PlotlyWidget.vue
index 9a17cebb..53a2ecc4 100644
--- a/skore-ui/src/components/PlotlyWidget.vue
+++ b/skore-ui/src/components/PlotlyWidget.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { newPlot, purge, relayout, type Layout } from "plotly.js-dist-min";
+import { addFrames, newPlot, purge, relayout, type Layout } from "plotly.js-dist-min";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
-  spec: { data: any; layout: any };
+  spec: { data: any; layout: any; frames: any };
 }>();
 
 const container = ref<HTMLDivElement>();
@@ -25,10 +25,13 @@ const resizeObserver = new ResizeObserver(() => {
   }
 });
 
-onMounted(() => {
+onMounted(async () => {
   if (container.value) {
     resizeObserver.observe(container.value);
-    newPlot(container.value, props.spec.data, makeLayout());
+    const plot = await newPlot(container.value, props.spec.data, makeLayout());
+    if (props.spec.frames) {
+      addFrames(plot, props.spec.frames);
+    }
   }
 });