From 2fbb4beda650e0c990520a534b439305ec6704e5 Mon Sep 17 00:00:00 2001 From: Thomas S Date: Mon, 23 Sep 2024 16:17:59 +0200 Subject: [PATCH 1/3] Add plotly figure support in the backend --- pyproject.toml | 1 + requirements-test.txt | 7 ++++++- requirements-tools.txt | 2 +- requirements.txt | 2 +- src/skore/item/media_item.py | 28 ++++++++++++++++++++++++++++ tests/unit/item/test_media_item.py | 13 +++++++++++++ 6 files changed, 50 insertions(+), 3 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index a9ba31cbc..971a20ac8 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -32,6 +32,7 @@ test = [ "httpx", "matplotlib", "pandas", + "plotly", "pre-commit", "pytest", "pytest-cov", diff --git a/requirements-test.txt b/requirements-test.txt index 35b6fb9d2..f3dfd5be9 100644 --- a/requirements-test.txt +++ b/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 diff --git a/requirements-tools.txt b/requirements-tools.txt index c09a5cad3..a02f720ad 100644 --- a/requirements-tools.txt +++ b/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 diff --git a/requirements.txt b/requirements.txt index 23991ca8b..39ffc0f96 100644 --- a/requirements.txt +++ b/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 diff --git a/src/skore/item/media_item.py b/src/skore/item/media_item.py index 90edefd7a..5c35fda66 100644 --- a/src/skore/item/media_item.py +++ b/src/skore/item/media_item.py @@ -12,6 +12,7 @@ from altair.vegalite.v5.schema.core import TopLevelSpec as Altair from matplotlib.figure import Figure as Matplotlib from PIL.Image import Image as Pillow + from plotly.basedatatypes import BaseFigure as Plotly from skore.item.item import Item @@ -93,6 +94,8 @@ def factory(cls, media, *args, **kwargs): return cls.factory_matplotlib(media, *args, **kwargs) if lazy_is_instance(media, "PIL.Image.Image"): return cls.factory_pillow(media, *args, **kwargs) + if lazy_is_instance(media, "plotly.basedatatypes.BaseFigure"): + return cls.factory_plotly(media, *args, **kwargs) raise TypeError(f"Type '{media.__class__}' is not supported.") @@ -223,3 +226,28 @@ def factory_pillow(cls, media: Pillow) -> MediaItem: media_encoding="utf-8", media_type="image/png", ) + + @classmethod + def factory_plotly(cls, media: Plotly) -> MediaItem: + """ + Create a new MediaItem instance from a Plotly figure. + + Parameters + ---------- + media : Plotly + The Plotly figure to store. + + Returns + ------- + MediaItem + A new MediaItem instance. + """ + import plotly.io + + media_bytes = plotly.io.to_json(media, engine="json").encode("utf-8") + + return cls( + media_bytes=media_bytes, + media_encoding="utf-8", + media_type="application/vnd.plotly.v1+json", + ) diff --git a/tests/unit/item/test_media_item.py b/tests/unit/item/test_media_item.py index 25a876578..c8934e6a6 100644 --- a/tests/unit/item/test_media_item.py +++ b/tests/unit/item/test_media_item.py @@ -3,6 +3,7 @@ import altair import matplotlib.pyplot import PIL as pillow +import plotly.graph_objects as go import pytest from skore.item import MediaItem @@ -75,3 +76,15 @@ def test_factory_pillow(self, mock_nowstr): assert item.media_type == "image/png" assert item.created_at == mock_nowstr assert item.updated_at == mock_nowstr + + def test_factory_plotly(self, mock_nowstr): + figure = go.Figure(data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])]) + figure_bytes = figure.to_json().encode("utf-8") + + item = MediaItem.factory(figure) + + assert item.media_bytes == figure_bytes + assert item.media_encoding == "utf-8" + assert item.media_type == "application/vnd.plotly.v1+json" + assert item.created_at == mock_nowstr + assert item.updated_at == mock_nowstr From d62ed0aeab17bb283d11f58050c594a708cff653 Mon Sep 17 00:00:00 2001 From: Matthieu Jouis Date: Tue, 24 Sep 2024 13:23:54 +0200 Subject: [PATCH 2/3] plotly widget --- frontend/package-lock.json | 237 ++++++++++++++++------- frontend/package.json | 3 + frontend/src/assets/styles/_reset.css | 3 +- frontend/src/components/PlotlyWidget.vue | 61 ++++++ frontend/src/components/ReportCanvas.vue | 4 +- frontend/src/views/ReportBuilderView.vue | 4 +- 6 files changed, 239 insertions(+), 73 deletions(-) create mode 100644 frontend/src/components/PlotlyWidget.vue diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4fcabc9fc..2a02ee355 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,6 +16,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", @@ -30,6 +31,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", @@ -1403,6 +1406,19 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", + "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", @@ -1556,9 +1572,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz", - "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", + "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==", "cpu": [ "arm" ], @@ -1570,9 +1586,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz", - "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz", + "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==", "cpu": [ "arm64" ], @@ -1584,9 +1600,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz", - "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz", + "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==", "cpu": [ "arm64" ], @@ -1598,9 +1614,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz", - "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz", + "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==", "cpu": [ "x64" ], @@ -1612,9 +1628,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz", - "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz", + "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==", "cpu": [ "arm" ], @@ -1626,9 +1642,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz", - "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz", + "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==", "cpu": [ "arm" ], @@ -1640,9 +1656,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz", - "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz", + "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==", "cpu": [ "arm64" ], @@ -1654,9 +1670,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz", - "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz", + "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==", "cpu": [ "arm64" ], @@ -1668,9 +1684,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz", - "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz", + "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==", "cpu": [ "ppc64" ], @@ -1682,9 +1698,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz", - "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz", + "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==", "cpu": [ "riscv64" ], @@ -1696,9 +1712,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz", - "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz", + "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==", "cpu": [ "s390x" ], @@ -1710,9 +1726,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz", - "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz", + "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==", "cpu": [ "x64" ], @@ -1724,9 +1740,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz", - "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz", + "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==", "cpu": [ "x64" ], @@ -1738,9 +1754,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz", - "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz", + "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==", "cpu": [ "arm64" ], @@ -1752,9 +1768,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz", - "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz", + "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==", "cpu": [ "ia32" ], @@ -1766,9 +1782,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz", - "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz", + "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==", "cpu": [ "x64" ], @@ -1895,6 +1911,23 @@ "undici-types": "~6.19.2" } }, + "node_modules/@types/plotly.js": { + "version": "2.33.4", + "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-2.33.4.tgz", + "integrity": "sha512-BzAbsJTiUQyALkkYx1D31YZ9YvcU2ag3LlE/iePMo19eDPvM30cbM2EFNIcu31n39EhXj/9G7800XLA8/rfApA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/plotly.js-dist-min": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@types/plotly.js-dist-min/-/plotly.js-dist-min-2.3.4.tgz", + "integrity": "sha512-ISwLFV6Zs/v3DkaRFLyk2rvYAfVdnYP2VVVy7h+fBDWw52sn7sMUzytkWiN4M75uxr1uz1uiBioePTDpAfoFIg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/plotly.js": "*" + } + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -2818,6 +2851,15 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/bundle-name": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz", @@ -5938,6 +5980,12 @@ } } }, + "node_modules/plotly.js-dist-min": { + "version": "2.35.2", + "resolved": "https://registry.npmjs.org/plotly.js-dist-min/-/plotly.js-dist-min-2.35.2.tgz", + "integrity": "sha512-oWDTf2kYOmTtEw3epeeSBdfH/H3OSktF0suST9oI6fIgKfbyd4MT7TPh8+CVzdHYllYon24Q0HI1hZjOnLqk6g==", + "license": "MIT" + }, "node_modules/postcss": { "version": "8.4.44", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz", @@ -6282,9 +6330,9 @@ "peer": true }, "node_modules/rollup": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz", - "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz", + "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==", "dev": true, "license": "MIT", "dependencies": { @@ -6298,22 +6346,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.21.2", - "@rollup/rollup-android-arm64": "4.21.2", - "@rollup/rollup-darwin-arm64": "4.21.2", - "@rollup/rollup-darwin-x64": "4.21.2", - "@rollup/rollup-linux-arm-gnueabihf": "4.21.2", - "@rollup/rollup-linux-arm-musleabihf": "4.21.2", - "@rollup/rollup-linux-arm64-gnu": "4.21.2", - "@rollup/rollup-linux-arm64-musl": "4.21.2", - "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2", - "@rollup/rollup-linux-riscv64-gnu": "4.21.2", - "@rollup/rollup-linux-s390x-gnu": "4.21.2", - "@rollup/rollup-linux-x64-gnu": "4.21.2", - "@rollup/rollup-linux-x64-musl": "4.21.2", - "@rollup/rollup-win32-arm64-msvc": "4.21.2", - "@rollup/rollup-win32-ia32-msvc": "4.21.2", - "@rollup/rollup-win32-x64-msvc": "4.21.2", + "@rollup/rollup-android-arm-eabi": "4.22.4", + "@rollup/rollup-android-arm64": "4.22.4", + "@rollup/rollup-darwin-arm64": "4.22.4", + "@rollup/rollup-darwin-x64": "4.22.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.22.4", + "@rollup/rollup-linux-arm-musleabihf": "4.22.4", + "@rollup/rollup-linux-arm64-gnu": "4.22.4", + "@rollup/rollup-linux-arm64-musl": "4.22.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4", + "@rollup/rollup-linux-riscv64-gnu": "4.22.4", + "@rollup/rollup-linux-s390x-gnu": "4.22.4", + "@rollup/rollup-linux-x64-gnu": "4.22.4", + "@rollup/rollup-linux-x64-musl": "4.22.4", + "@rollup/rollup-win32-arm64-msvc": "4.22.4", + "@rollup/rollup-win32-ia32-msvc": "4.22.4", + "@rollup/rollup-win32-x64-msvc": "4.22.4", "fsevents": "~2.3.2" } }, @@ -6532,6 +6580,18 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -6540,6 +6600,19 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, "node_modules/speakingurl": { "version": "14.0.1", "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", @@ -7104,6 +7177,36 @@ "node": ">=8" } }, + "node_modules/terser": { + "version": "5.33.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.33.0.tgz", + "integrity": "sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==", + "dev": true, + "license": "BSD-2-Clause", + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/test-exclude": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 46819ea4a..aefe63efd 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/assets/styles/_reset.css b/frontend/src/assets/styles/_reset.css index 16d7c4fb4..cf357c1aa 100644 --- a/frontend/src/assets/styles/_reset.css +++ b/frontend/src/assets/styles/_reset.css @@ -20,8 +20,7 @@ body { img, picture, video, -canvas, -svg { +canvas { display: block; max-width: 100%; } diff --git a/frontend/src/components/PlotlyWidget.vue b/frontend/src/components/PlotlyWidget.vue new file mode 100644 index 000000000..9a17cebb0 --- /dev/null +++ b/frontend/src/components/PlotlyWidget.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/frontend/src/components/ReportCanvas.vue b/frontend/src/components/ReportCanvas.vue index 3b720d2c3..a106bd823 100644 --- a/frontend/src/components/ReportCanvas.vue +++ b/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) { /> + boolean) { if (reportStore.items === null) { return []; From cd6736830f70acf91dc3830bb91469de2fded14b Mon Sep 17 00:00:00 2001 From: Matthieu Jouis Date: Tue, 24 Sep 2024 13:45:44 +0200 Subject: [PATCH 3/3] fix tests --- frontend/tests/views/ReportBuilderView.spec.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/tests/views/ReportBuilderView.spec.ts b/frontend/tests/views/ReportBuilderView.spec.ts index ff4eda9da..2205fa1d2 100644 --- a/frontend/tests/views/ReportBuilderView.spec.ts +++ b/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");