Add plotly figure support

frontend/package.json

@@ -25,6 +25,7 @@
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
     "pinia": "^2.2.2",
+    "plotly.js-dist-min": "^2.35.2",
     "simplebar-vue": "^2.3.5",
     "vega-embed": "^6.26.0",
     "vue": "^3.4.38",
@@ -39,6 +40,8 @@
     "@types/markdown-it-emoji": "^3.0.1",
     "@types/markdown-it-highlightjs": "^3.3.4",
     "@types/node": "^22.5.2",
+    "@types/plotly.js": "^2.33.4",
+    "@types/plotly.js-dist-min": "^2.3.4",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",

frontend/src/assets/styles/_reset.css

@@ -20,8 +20,7 @@ body {
 img,
 picture,
 video,
-canvas,
-svg {
+canvas {
   display: block;
   max-width: 100%;
 }

frontend/src/components/PlotlyWidget.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { newPlot, purge, relayout, type Layout } from "plotly.js-dist-min";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+const props = defineProps<{
+  spec: { data: any; layout: any };
+}>();
+
+const container = ref<HTMLDivElement>();
+
+function makeLayout(): Partial<Layout> {
+  return {
+    ...props.spec.layout,
+    width: container.value?.clientWidth,
+    height: container.value?.clientHeight,
+    font: {
+      family: "GeistMono, monospace",
+    },
+  };
+}
+
+const resizeObserver = new ResizeObserver(() => {
+  if (container.value) {
+    relayout(container.value, makeLayout());
+  }
+});
+
+onMounted(() => {
+  if (container.value) {
+    resizeObserver.observe(container.value);
+    newPlot(container.value, props.spec.data, makeLayout());
+  }
+});
+
+onBeforeUnmount(() => {
+  if (container.value) {
+    resizeObserver.unobserve(container.value);
+    purge(container.value);
+  }
+});
+</script>
+
+<template>
+  <div class="plotly-widget" ref="container"></div>
+</template>
+
+<style scoped>
+.plotly-widget {
+  width: 100%;
+}
+
+/*
+plotly "dark mode" fix
+https://github.com/plotly/plotly.js/issues/2006
+*/
+@media (prefers-color-scheme: dark) {
+  .plotly-widget {
+    filter: invert(75%) hue-rotate(180deg);
+  }
+}
+</style>

frontend/src/components/ReportCanvas.vue

@@ -6,6 +6,7 @@ import DataFrameWidget from "@/components/DataFrameWidget.vue";
 import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
 import ImageWidget from "@/components/ImageWidget.vue";
 import MarkdownWidget from "@/components/MarkdownWidget.vue";
+import PlotlyWidget from "@/components/PlotlyWidget.vue";
 import ReportCard from "@/components/ReportCard.vue";
 import VegaWidget from "@/components/VegaWidget.vue";
 import type { KeyLayoutSize, KeyMoveDirection } from "@/models";
@@ -36,7 +37,7 @@ const visibleItems = computed(() => {
           data = item.value;
         } else {
           data = atob(item.value);
-          if (mediaType === "application/vnd.vega.v5+json") {
+          if (mediaType.includes("json")) {
             data = JSON.parse(data);
           }
         }
@@ -112,6 +113,7 @@ function getItemSubtitle(created_at: Date, updated_at: Date) {
       />
       <MarkdownWidget v-if="mediaType === 'text/markdown'" :source="data" />
       <VegaWidget v-if="mediaType === 'application/vnd.vega.v5+json'" :spec="data" />
+      <PlotlyWidget v-if="mediaType === 'application/vnd.plotly.v1+json'" :spec="data" />
       <HtmlSnippetWidget
         v-if="mediaType === 'application/vnd.sklearn.estimator+html'"
         :src="data"

frontend/src/views/ReportBuilderView.vue

@@ -20,16 +20,14 @@ const infoMediaTypes = ["text/markdown", "text/html"];
 const mediaMediaTypes = [
   "application/vnd.dataframe+json",
   "application/vnd.sklearn.estimator+html",
+  "application/vnd.plotly.v1+json",
   "application/vnd.vega.v5+json",
   "image/png",
   "image/jpeg",
   "image/webp",
   "image/svg+xml",
 ];
 
-// {
-//       infoMediaTypes.includes(value.media_type);
-//     }
 function getFilteredUnusedReportKeys(filterPredicate: (key: string, value: ReportItem) => boolean) {
   if (reportStore.items === null) {
     return [];

frontend/tests/views/ReportBuilderView.spec.ts

@@ -15,6 +15,13 @@ vi.mock("@/services/api", () => {
   return { fetchReport };
 });
 
+vi.hoisted(() => {
+  // required because plotly depends on URL.createObjectURL
+  const mockObjectURL = vi.fn();
+  window.URL.createObjectURL = mockObjectURL;
+  window.URL.revokeObjectURL = mockObjectURL;
+});
+
 describe("ReportBuilderView", () => {
   beforeEach(() => {
     vi.mock("vue-router");

pyproject.toml

@@ -33,6 +33,7 @@ test = [
   "httpx",
   "matplotlib",
   "pandas",
+  "plotly",
   "pre-commit",
   "pytest",
   "pytest-cov",

requirements-test.txt

@@ -1,5 +1,5 @@
 #
-# This file is autogenerated by pip-compile with Python 3.11
+# This file is autogenerated by pip-compile with Python 3.12
 # by the following command:
 #
 #    pip-compile --extra=test --output-file=requirements-test.txt pyproject.toml
@@ -100,6 +100,7 @@ packaging==24.1
     #   altair
     #   huggingface-hub
     #   matplotlib
+    #   plotly
     #   pytest
     #   skops
 pandas==2.2.2
@@ -108,6 +109,8 @@ pillow==10.4.0
     # via matplotlib
 platformdirs==4.3.6
     # via virtualenv
+plotly==5.24.1
+    # via skore (pyproject.toml)
 pluggy==1.5.0
     # via pytest
 pre-commit==3.8.0
@@ -174,6 +177,8 @@ starlette==0.38.5
     # via fastapi
 tabulate==0.9.0
     # via skops
+tenacity==9.0.0
+    # via plotly
 threadpoolctl==3.5.0
     # via scikit-learn
 tqdm==4.66.5

requirements-tools.txt

@@ -1,5 +1,5 @@
 #
-# This file is autogenerated by pip-compile with Python 3.11
+# This file is autogenerated by pip-compile with Python 3.12
 # by the following command:
 #
 #    pip-compile --extra=tools --output-file=requirements-tools.txt pyproject.toml

requirements.txt

@@ -1,5 +1,5 @@
 #
-# This file is autogenerated by pip-compile with Python 3.11
+# This file is autogenerated by pip-compile with Python 3.12
 # by the following command:
 #
 #    pip-compile --output-file=requirements.txt pyproject.toml