fix(UI): Add animation frames to plotly widgets

probabl-ai · Oct 7, 2024 · 02f7b77 · 02f7b77
1 parent 32baec4
commit 02f7b77
Showing 1 changed file with 7 additions and 4 deletions.
diff --git 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);
+    }
   }
 });