From c2f164e226e67aa38edda73b8f27c4804aeb5778 Mon Sep 17 00:00:00 2001
From: Matthieu Jouis <matthieu@probabl.ai>
Date: Tue, 1 Oct 2024 21:46:19 +0200
Subject: [PATCH] refactor to enable multi view

---
 frontend/src/ShareApp.vue                     |   2 +-
 frontend/src/assets/fonts/icomoon.eot         | Bin 5876 -> 5576 bytes
 frontend/src/assets/fonts/icomoon.svg         |  40 ++---
 frontend/src/assets/fonts/icomoon.ttf         | Bin 5712 -> 5412 bytes
 frontend/src/assets/fonts/icomoon.woff        | Bin 5788 -> 5488 bytes
 frontend/src/assets/styles/_icons.css         |  42 ++---
 frontend/src/assets/styles/main.css           |   1 +
 frontend/src/components/DropdownButton.vue    |   2 +-
 frontend/src/components/EditableList.vue      |  20 ++-
 frontend/src/components/EditableListItem.vue  |   9 +-
 ...ReportCanvas.vue => ProjectViewCanvas.vue} |  68 +++-----
 .../{ReportCard.vue => ProjectViewCard.vue}   |  23 +--
 frontend/src/main.ts                          |   1 -
 frontend/src/models.ts                        |  26 ++-
 frontend/src/router.ts                        |   4 +-
 frontend/src/services/api.ts                  |  28 +++-
 frontend/src/share.ts                         |   9 +-
 frontend/src/stores/{report.ts => project.ts} | 157 ++++++++++--------
 frontend/src/views/ComponentsView.vue         |  14 +-
 ...{ReportBuilderView.vue => ProjectView.vue} | 136 ++++++++++++---
 frontend/tests/services/api.spec.ts           |  60 ++-----
 frontend/tests/stores/project.spec.ts         |  74 +++++++++
 frontend/tests/stores/reports.spec.ts         | 129 --------------
 .../tests/views/ReportBuilderView.spec.ts     |   2 +-
 src/skore/ui/app.py                           |   4 +-
 src/skore/ui/{report.py => project_routes.py} |  25 +--
 src/skore/ui/templates/share.html.jinja       |   2 +-
 tests/integration/ui/test_ui.py               |  16 +-
 28 files changed, 431 insertions(+), 463 deletions(-)
 rename frontend/src/components/{ReportCanvas.vue => ProjectViewCanvas.vue} (72%)
 rename frontend/src/components/{ReportCard.vue => ProjectViewCard.vue} (77%)
 rename frontend/src/stores/{report.ts => project.ts} (55%)
 rename frontend/src/views/{ReportBuilderView.vue => ProjectView.vue} (60%)
 create mode 100644 frontend/tests/stores/project.spec.ts
 delete mode 100644 frontend/tests/stores/reports.spec.ts
 rename src/skore/ui/{report.py => project_routes.py} (90%)

diff --git a/frontend/src/ShareApp.vue b/frontend/src/ShareApp.vue
index 86d9ef78..e580dace 100644
--- a/frontend/src/ShareApp.vue
+++ b/frontend/src/ShareApp.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Simplebar from "simplebar-vue";
 
-import ReportCanvas from "@/components/ReportCanvas.vue";
+import ReportCanvas from "@/components/ProjectViewCanvas.vue";
 </script>
 
 <template>
diff --git a/frontend/src/assets/fonts/icomoon.eot b/frontend/src/assets/fonts/icomoon.eot
index 0522958e21dba37b78f5396a08aba6a391056124..948bc6ff6573aad6839f79a5cbec1b35a5f50ccb 100644
GIT binary patch
delta 342
zcmeyOdqSJ-geU`pis(c(GZy3MIe#ZQlnd%IFfi-^;)LYf!~*fKOY<h4kg4x0@{DF+
zV60$Z5V(_(nwX*~Z~l>iK_~>M&MX5cz+TUM7s&4c@>Mc&ODfWU3?P34kSNH>PfoNB
zGke3pAglo7TjeHJ6fhVtQ~~)hK)ym=Vs7e8FV5dUehtu$wu1cP5(Z|V41*{ONS=Y2
zneol!6h?bS@ySaVy@BKh#>~l<EGm;vG8b%)WGZ0X9LutSee+(PEv%cb3fVKt{GAhR
z9M5m_m4O>%00YBg#h<%i^kf4Ob4HoT86pKfU^y-Z5e7M+b21ne7<(8`F_kf$Vzy!4
z!@|Sj!Lp3y2Wt%LD>etVKDHa|Htd(!e{m>rcyZ(bbut363_}HjFxV8P$q&VZH~Wh&
GWdr~&AXYE{

delta 633
zcmX@1{Y97Uix>k#fY?MfGnS2ND^E=p6cL#ik}PP<z`(Evh!c`?6AQ${E-jjPLZ-gs
z$Guq$42%^F41ymrQWH}&Wi)FU7=$x`>dZ2L0_^q74}tszK)y;wZb?NMkOAZ$0TK;4
z`N@f19<FB?7(`rve5c&RiUI}`hAJSx1ISm%OUzB3>BadQ$X@}pqpcvnxP*ZjD8nFT
z0Fq~5W@dahIfc=lQF`(cMsFbbfiZLQTc!fW$+b)clOvf_HpjATV6SInVEBK4*_ZhM
zg8<NKMI$j$K@m1(MI|*;K@&6M8%zNLqM`zSH-Jc{I#Gdtn?Wo_Ujb2|C1AZwQy_X7
zjUjrq8KHU^C*I>16XORH7+Rrvz4U>a`GF>(X=c3b1=0&5P_=I6=Gn%Y!~}LU1K46k
zh_huGA<njC1Ug$3=noWuzl?9VczL=0iE#4qaU!#s9C*3pL4xvJyt8<@<Up!`1jFY2
zf{u(br&g+MjOVxc%D~M63R#B73PlYtda{hLIitel5aEK!1;PR$AYleB1`!51hHH#`
zj0%iBjHj5&m`*X<Fz;dEVew#D#`1$zjMaoSfOQL-6Wa{7XY2;-Q#iCZVmMkj)^J?m
e_yN=p3{VCIh6)B@kYNl=lQ)VAZ&nsr$_N07riz;Y

diff --git a/frontend/src/assets/fonts/icomoon.svg b/frontend/src/assets/fonts/icomoon.svg
index c41e8d8c..df16e710 100644
--- a/frontend/src/assets/fonts/icomoon.svg
+++ b/frontend/src/assets/fonts/icomoon.svg
@@ -7,32 +7,28 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="trash" d="M208.842 670.316c-18.603 0-33.684-15.081-33.684-33.684s15.081-33.684 33.684-33.684v67.368zM815.158 602.947c18.604 0 33.684 15.081 33.684 33.684s-15.080 33.684-33.684 33.684v-67.368zM478.316 468.211c0 18.604-15.080 33.684-33.684 33.684-18.603 0-33.684-15.080-33.684-33.684h67.368zM410.947 299.789c0-18.604 15.081-33.684 33.684-33.684 18.604 0 33.684 15.080 33.684 33.684h-67.368zM613.053 468.211c0 18.604-15.080 33.684-33.684 33.684s-33.684-15.080-33.684-33.684h67.368zM545.684 299.789c0-18.604 15.080-33.684 33.684-33.684s33.684 15.080 33.684 33.684h-67.368zM609.873 628.235c4.635-18.016 23.002-28.862 41.019-24.225 18.012 4.637 28.861 23.002 24.22 41.018l-65.24-16.793zM242.601 634.391l31.588-473.817 67.219 4.479-31.588 473.82-67.22-4.482zM341.408 97.684h341.18v67.368h-341.18v-67.368zM749.811 160.574l31.588 473.817-67.218 4.482-31.593-473.82 67.223-4.479zM747.789 670.316h-471.579v-67.368h471.579v67.368zM208.842 602.947h67.368v67.368h-67.368v-67.368zM747.789 602.947h67.368v67.368h-67.368v-67.368zM682.588 97.684c35.474 0 64.862 27.502 67.223 62.89l-67.223 4.479v-67.368zM274.189 160.574c2.359-35.387 31.752-62.89 67.219-62.89v67.368l-67.219-4.479zM410.947 468.211v-168.421h67.368v168.421h-67.368zM545.684 468.211v-168.421h67.368v168.421h-67.368zM512 704c47.040 0 86.652-32.172 97.873-75.765l65.24 16.793c-18.696 72.634-84.588 126.341-163.112 126.341v-67.368zM414.129 628.235c11.22 43.592 50.831 75.765 97.871 75.765v67.368c-78.523 0-144.418-53.707-163.112-126.341l65.242-16.793z" />
+<glyph unicode="&#xe900;" glyph-name="branch" d="M403.54 704h32.337v-506.611h184.598v-32.337h-216.934v538.947z" />
 <glyph unicode="&#xe901;" glyph-name="more" d="M175.158 434.526c0 37.207 30.162 67.368 67.368 67.368s67.368-30.161 67.368-67.368c0-37.209-30.162-67.368-67.368-67.368s-67.368 30.159-67.368 67.368zM444.632 434.526c0 37.207 30.161 67.368 67.368 67.368s67.368-30.161 67.368-67.368c0-37.209-30.161-67.368-67.368-67.368s-67.368 30.159-67.368 67.368zM714.105 434.526c0 37.207 30.159 67.368 67.368 67.368s67.368-30.161 67.368-67.368c0-37.209-30.159-67.368-67.368-67.368s-67.368 30.159-67.368 67.368z" />
-<glyph unicode="&#xe902;" glyph-name="branch" d="M403.54 704h32.337v-506.611h184.598v-32.337h-216.934v538.947z" />
+<glyph unicode="&#xe902;" glyph-name="trash" d="M208.842 670.316c-18.603 0-33.684-15.081-33.684-33.684s15.081-33.684 33.684-33.684v67.368zM815.158 602.947c18.604 0 33.684 15.081 33.684 33.684s-15.080 33.684-33.684 33.684v-67.368zM478.316 468.211c0 18.604-15.080 33.684-33.684 33.684-18.603 0-33.684-15.080-33.684-33.684h67.368zM410.947 299.789c0-18.604 15.081-33.684 33.684-33.684 18.604 0 33.684 15.080 33.684 33.684h-67.368zM613.053 468.211c0 18.604-15.080 33.684-33.684 33.684s-33.684-15.080-33.684-33.684h67.368zM545.684 299.789c0-18.604 15.080-33.684 33.684-33.684s33.684 15.080 33.684 33.684h-67.368zM609.873 628.235c4.635-18.016 23.002-28.862 41.019-24.225 18.012 4.637 28.861 23.002 24.22 41.018l-65.24-16.793zM242.601 634.391l31.588-473.817 67.219 4.479-31.588 473.82-67.22-4.482zM341.408 97.684h341.18v67.368h-341.18v-67.368zM749.811 160.574l31.588 473.817-67.218 4.482-31.593-473.82 67.223-4.479zM747.789 670.316h-471.579v-67.368h471.579v67.368zM208.842 602.947h67.368v67.368h-67.368v-67.368zM747.789 602.947h67.368v67.368h-67.368v-67.368zM682.588 97.684c35.474 0 64.862 27.502 67.223 62.89l-67.223 4.479v-67.368zM274.189 160.574c2.359-35.387 31.752-62.89 67.219-62.89v67.368l-67.219-4.479zM410.947 468.211v-168.421h67.368v168.421h-67.368zM545.684 468.211v-168.421h67.368v168.421h-67.368zM512 704c47.040 0 86.652-32.172 97.873-75.765l65.24 16.793c-18.696 72.634-84.588 126.341-163.112 126.341v-67.368zM414.129 628.235c11.22 43.592 50.831 75.765 97.871 75.765v67.368c-78.523 0-144.418-53.707-163.112-126.341l65.242-16.793z" />
 <glyph unicode="&#xe903;" glyph-name="edit" d="M199.013 720.842c0-18.603 15.081-33.684 33.684-33.684h538.952c18.599 0 33.684 15.081 33.684 33.684s-15.085 33.684-33.684 33.684h-538.952c-18.603 0-33.684-15.081-33.684-33.684zM199.013 586.105c0-18.603 15.081-33.684 33.684-33.684h218.95c18.603 0 33.684 15.081 33.684 33.684s-15.081 33.684-33.684 33.684h-218.95c-18.603 0-33.684-15.081-33.684-33.684zM675.145 538.468l82.545-82.549-274.024-274.025h-82.547v82.551l274.026 274.023zM722.782 586.105c-26.311 26.31-68.964 26.31-95.275 0.001 0-0.001 0-0.001 0-0.001l-283.892-283.889c-6.317-6.316-9.865-14.886-9.865-23.816v-130.188c0-18.604 15.081-33.684 33.684-33.684h130.184c8.934 0 17.501 3.546 23.818 9.868l283.891 283.891c26.306 26.307 26.317 68.959 0 95.27 0 0.001 0 0.002-0.005 0.003l-82.54 82.546c0 0 0 0.001 0 0.001zM198.948 451.368c0 18.603 15.081 33.684 33.684 33.684h101.126c18.603 0 33.684-15.081 33.684-33.684s-15.081-33.684-33.684-33.684h-101.126c-18.603 0-33.684 15.081-33.684 33.684z" />
 <glyph unicode="&#xe904;" glyph-name="copy" d="M242.526 704h336.842v-336.842h-336.842v336.842zM646.737 569.263v151.579c0 27.907-22.625 50.526-50.526 50.526h-370.526c-27.905 0-50.526-22.621-50.526-50.526v-370.526c0-27.901 22.62-50.526 50.526-50.526h151.579v-151.579c0-27.901 22.62-50.526 50.526-50.526h370.526c27.901 0 50.526 22.625 50.526 50.526v370.526c0 27.907-22.625 50.526-50.526 50.526h-151.579zM646.737 501.895h134.737v-336.842h-336.842v134.737h151.579c27.901 0 50.526 22.625 50.526 50.526v151.579z" />
-<glyph unicode="&#xe905;" glyph-name="pill" d="M204.767 581.427c-13.602-13.541-17.258-24.453-17.258-32.383s3.655-18.843 17.258-32.383c13.747-13.686 35.575-27.766 65.603-40.41 59.902-25.222 145.307-41.733 241.63-41.733 49.769 0 96.622 4.408 138.553 12.148l-363.474 181.736c-5.767-2.115-11.341-4.305-16.709-6.565-30.028-12.644-51.856-26.724-65.603-40.409zM402.379 656.115l355.812-177.905c27.686 12.13 47.999 25.468 61.041 38.451 13.603 13.541 17.257 24.452 17.257 32.383s-3.654 18.842-17.257 32.383c-13.749 13.685-35.576 27.765-65.601 40.409-59.904 25.222-145.311 41.734-241.632 41.734-38.607 0-75.461-2.653-109.621-7.456zM836.489 433.531c-16.066-10.353-34.018-19.56-53.232-27.65-71.357-30.041-167.284-47.713-271.258-47.713s-199.9 17.672-271.258 47.713c-19.212 8.090-37.166 17.297-53.233 27.65v-113.52c0-7.933 3.655-18.842 17.257-32.385 13.748-13.684 35.576-27.767 65.604-40.41 59.902-25.223 145.307-41.731 241.63-41.731 96.321 0 181.728 16.508 241.632 41.731 30.025 12.644 51.852 26.726 65.601 40.41 13.603 13.544 17.257 24.452 17.257 32.385v113.52zM912.842 549.044v-229.033c0-34.239-16.643-63.499-39.742-86.496-22.959-22.851-54.24-41.677-89.843-56.665-71.357-30.046-167.284-47.718-271.258-47.718s-199.9 17.672-271.259 47.718c-35.601 14.988-66.884 33.814-89.841 56.665-23.101 22.997-39.743 52.256-39.743 86.496v229.033c0 34.237 16.641 63.496 39.743 86.494 22.956 22.852 54.24 41.677 89.841 56.667 71.358 30.046 167.285 47.717 271.258 47.717 103.974 0 199.901-17.671 271.258-47.717 35.603-14.99 66.883-33.814 89.843-56.667 23.099-22.997 39.742-52.257 39.742-86.494z" />
-<glyph unicode="&#xe906;" glyph-name="new-document" d="M235.439 803.298c-40.734 0-73.754-33.021-73.754-73.754v-590.031c0-40.739 33.021-73.755 73.754-73.755h375.065c-4.074 11.533-6.295 23.945-6.295 36.875-61.1 0-110.63 49.529-110.63 110.63 0 61.106 49.53 110.635 110.63 110.635 0 61.1 49.529 110.63 110.635 110.63 12.929 0 25.341-2.22 36.875-6.295v301.312c0 40.734-33.021 73.754-73.755 73.754h-442.525zM751.686 323.897c0 20.367-16.513 36.875-36.88 36.875s-36.875-16.508-36.875-36.875v-73.755h-73.755c-20.367 0-36.877-16.513-36.877-36.88s16.51-36.875 36.877-36.875h73.755v-73.755c0-20.367 16.508-36.875 36.875-36.875s36.88 16.508 36.88 36.875v73.755h73.755c20.367 0 36.875 16.508 36.875 36.875s-16.508 36.88-36.875 36.88h-73.755v73.755z" />
-<glyph unicode="&#xe907;" glyph-name="recent-document" d="M239.532 823.767c-42.994 0-77.848-34.854-77.848-77.848v-622.785c0-42.992 34.854-77.846 77.848-77.846h237.475c-50.465 49.454-81.779 118.38-81.779 194.619 0 150.479 121.988 272.468 272.469 272.468 41.79 0 81.376-9.408 116.774-26.219v259.763c0 42.995-34.854 77.848-77.851 77.848h-467.087zM667.697 434.527c-107.486 0-194.62-87.138-194.62-194.62s87.135-194.619 194.62-194.619c53.728 0 102.438 21.822 137.615 57.004 35.177 35.177 57.004 83.882 57.004 137.615 0 107.482-87.137 194.62-194.619 194.62zM550.924 239.907c0 50.844 32.494 94.1 77.85 110.129v-110.129c0-10.321 4.101-20.227 11.399-27.524l77.878-77.873c-15.247-7.303-32.315-11.377-50.354-11.377-64.496 0-116.773 52.278-116.773 116.774zM706.619 256.027v94.009c45.352-16.028 77.851-59.284 77.851-110.129 0-18.044-4.080-35.107-11.377-50.354l-66.474 66.474z" />
+<glyph unicode="&#xe905;" glyph-name="pill" d="M204.767 581.427c-13.602-13.541-17.258-24.453-17.258-32.383s3.655-18.843 17.258-32.383c13.747-13.686 35.575-27.766 65.603-40.41 59.902-25.222 145.307-41.733 241.63-41.733 49.769 0 96.624 4.408 138.553 12.148l-363.474 181.736c-5.767-2.115-11.341-4.305-16.709-6.565-30.028-12.644-51.856-26.724-65.603-40.409zM402.379 656.115l355.812-177.905c27.686 12.13 47.999 25.468 61.041 38.451 13.603 13.541 17.257 24.452 17.257 32.383s-3.654 18.842-17.257 32.383c-13.749 13.685-35.576 27.765-65.601 40.409-59.904 25.222-145.309 41.734-241.632 41.734-38.607 0-75.461-2.653-109.621-7.456zM836.489 433.531c-16.066-10.353-34.018-19.56-53.232-27.65-71.357-30.041-167.285-47.713-271.258-47.713s-199.9 17.672-271.258 47.713c-19.212 8.090-37.166 17.297-53.233 27.65v-113.52c0-7.933 3.655-18.842 17.257-32.385 13.748-13.684 35.576-27.767 65.604-40.41 59.902-25.223 145.307-41.731 241.63-41.731s181.728 16.508 241.632 41.731c30.025 12.644 51.852 26.726 65.601 40.41 13.603 13.544 17.257 24.452 17.257 32.385v113.52zM912.842 549.044v-229.033c0-34.239-16.643-63.499-39.742-86.496-22.959-22.851-54.24-41.677-89.843-56.665-71.357-30.046-167.285-47.718-271.258-47.718s-199.9 17.672-271.259 47.718c-35.601 14.988-66.884 33.814-89.841 56.665-23.101 22.997-39.743 52.256-39.743 86.496v229.033c0 34.237 16.641 63.496 39.743 86.494 22.956 22.852 54.24 41.677 89.841 56.667 71.358 30.046 167.285 47.717 271.258 47.717s199.901-17.671 271.258-47.717c35.603-14.99 66.883-33.814 89.843-56.667 23.099-22.997 39.742-52.257 39.742-86.494z" />
+<glyph unicode="&#xe906;" glyph-name="new-document" d="M235.439 803.298c-40.734 0-73.754-33.021-73.754-73.754v-590.031c0-40.739 33.021-73.755 73.754-73.755h375.066c-4.074 11.533-6.295 23.945-6.295 36.875-61.102 0-110.631 49.529-110.631 110.63 0 61.106 49.53 110.635 110.631 110.635 0 61.1 49.528 110.63 110.634 110.63 12.929 0 25.341-2.22 36.875-6.295v301.312c0 40.734-33.021 73.754-73.755 73.754h-442.525zM751.686 323.897c0 20.367-16.513 36.875-36.88 36.875s-36.875-16.508-36.875-36.875v-73.755h-73.755c-20.367 0-36.877-16.513-36.877-36.88s16.51-36.875 36.877-36.875h73.755v-73.755c0-20.367 16.508-36.875 36.875-36.875s36.88 16.508 36.88 36.875v73.755h73.755c20.367 0 36.875 16.508 36.875 36.875s-16.508 36.88-36.875 36.88h-73.755v73.755z" />
+<glyph unicode="&#xe907;" glyph-name="recent-document" d="M239.532 823.767c-42.994 0-77.848-34.854-77.848-77.848v-622.785c0-42.992 34.854-77.846 77.848-77.846h237.475c-50.465 49.454-81.779 118.38-81.779 194.619 0 150.479 121.988 272.468 272.469 272.468 41.79 0 81.376-9.408 116.774-26.219v259.763c0 42.995-34.854 77.848-77.851 77.848h-467.087zM667.697 434.527c-107.486 0-194.62-87.138-194.62-194.62s87.135-194.619 194.62-194.619c53.728 0 102.438 21.822 137.615 57.004 35.177 35.177 57.004 83.882 57.004 137.615 0 107.482-87.137 194.62-194.619 194.62zM550.924 239.907c0 50.844 32.494 94.1 77.85 110.129v-110.129c0-10.321 4.101-20.227 11.399-27.524l77.878-77.873c-15.247-7.303-32.315-11.377-50.354-11.377-64.494 0-116.773 52.278-116.773 116.774zM706.619 256.027v94.009c45.352-16.028 77.851-59.284 77.851-110.129 0-18.044-4.080-35.107-11.377-50.354l-66.474 66.474z" />
 <glyph unicode="&#xe908;" glyph-name="plus-circle" d="M512 704c-148.826 0-269.474-120.648-269.474-269.474s120.648-269.474 269.474-269.474c148.825 0 269.474 120.649 269.474 269.474 0 148.826-120.649 269.474-269.474 269.474zM175.158 434.526c0 186.033 150.809 336.842 336.842 336.842s336.842-150.809 336.842-336.842c0-186.034-150.808-336.842-336.842-336.842s-336.842 150.808-336.842 336.842zM512 602.943c18.603 0 33.684-15.081 33.684-33.684v-101.047l101.053 0.002c18.604 0.001 33.684-15.080 33.684-33.683s-15.080-33.683-33.684-33.683l-101.053-0.005v-101.053c0-18.604-15.081-33.684-33.684-33.684s-33.684 15.080-33.684 33.684v101.053l-101.052-0.005c-18.603 0-33.685 15.080-33.685 33.685-0.001 18.603 15.080 33.685 33.683 33.685l101.054 0.002v101.049c0 18.603 15.081 33.684 33.684 33.684z" />
 <glyph unicode="&#xe909;" glyph-name="warning" d="M511.996 793.825c198.434 0 359.299-160.864 359.299-359.298 0-198.43-160.865-359.3-359.299-359.3s-359.298 160.87-359.298 359.3c0 198.434 160.864 359.298 359.298 359.298zM484.15 459.677c1.437-19.762 3.054-38.986 4.851-57.666l3.773-38.265h37.726l3.773 38.265c1.437 18.68 2.695 38.084 3.773 58.205 1.437 20.121 2.156 37.008 2.156 50.661v121.263h-57.667v-121.263c0-14.013 0.539-31.079 1.617-51.2zM546.129 317.397h-70.063v-67.907h70.063v67.907z" />
 <glyph unicode="&#xe90a;" glyph-name="info" d="M511.996 793.825c198.434 0 359.299-160.864 359.299-359.298 0-198.43-160.865-359.3-359.299-359.3s-359.298 160.87-359.298 359.3c0 198.434 160.864 359.298 359.298 359.298zM537.686 523.633h-57.128v-286.722h57.128v286.722zM539.303 622.26h-59.823v-57.128h59.823v57.128z" />
-<glyph unicode="&#xe90b;" glyph-name="error" d="M152.697 434.527c0 198.435 160.863 359.298 359.298 359.298 198.434 0 359.299-160.863 359.299-359.298s-160.865-359.301-359.299-359.301c-198.435 0-359.298 160.865-359.298 359.301zM429.613 567.722c-14.032 14.031-36.782 14.031-50.813 0s-14.031-36.781 0-50.812l82.384-82.383-82.384-82.384c-14.031-14.029-14.031-36.783 0-50.812s36.781-14.029 50.813 0l82.383 82.383 82.382-82.383c14.034-14.029 36.783-14.029 50.812 0 14.034 14.029 14.034 36.783 0 50.812l-82.382 82.384 82.382 82.383c14.034 14.031 14.034 36.781 0 50.812-14.029 14.031-36.778 14.031-50.812 0l-82.382-82.383-82.383 82.383z" />
-<glyph unicode="&#xe90c;" glyph-name="success" d="M511.996 793.825c198.434 0 359.299-160.863 359.299-359.298s-160.865-359.301-359.299-359.301c-198.435 0-359.298 160.865-359.298 359.301s160.863 359.298 359.298 359.298zM647.594 501.597c12.568 15.359 10.305 37.996-5.055 50.562-15.36 12.565-37.996 10.301-50.563-5.056l-136.541-166.886-43.787 43.786c-14.031 14.030-36.781 14.030-50.812 0s-14.031-36.78 0-50.814l71.859-71.858c7.178-7.179 17.057-10.989 27.196-10.483s19.589 5.282 26.020 13.134l161.683 197.614z" />
-<glyph unicode="&#xe90d;" glyph-name="xl" d="M215.629 638.316h592.745c20.462 0 37.050-16.588 37.050-37.050v-333.479c0-20.462-16.588-37.050-37.050-37.050h-592.745c-20.462 0-37.050 16.588-37.050 37.050v333.479c0 20.462 16.588 37.050 37.050 37.050z" />
-<glyph unicode="&#xe90e;" glyph-name="sm" d="M400.866 638.316h222.276c20.462 0 37.050-16.588 37.050-37.050v-333.479c0-20.462-16.588-37.050-37.050-37.050h-222.276c-20.462 0-37.050 16.588-37.050 37.050v333.479c0 20.462 16.588 37.050 37.050 37.050z" />
-<glyph unicode="&#xe90f;" glyph-name="xs" d="M474.957 638.316h74.088c20.462 0 37.050-16.588 37.050-37.050v-333.479c0-20.462-16.588-37.050-37.050-37.050h-74.088c-20.462 0-37.050 16.588-37.050 37.050v333.479c0 20.462 16.588 37.050 37.050 37.050z" />
-<glyph unicode="&#xe910;" glyph-name="search" d="M464.846 780.351c-164.949 0-298.667-133.718-298.667-298.667s133.718-298.668 298.667-298.668c164.951 0 298.664 133.718 298.664 298.668s-133.713 298.667-298.664 298.667zM103.303 481.684c0 199.675 161.869 361.544 361.544 361.544s361.543-161.869 361.543-361.544c0-88.516-31.809-169.606-84.626-232.458l169.736-169.731c12.277-12.277 12.277-32.186 0-44.463s-32.186-12.277-44.463 0l-169.731 169.736c-62.852-52.817-143.941-84.626-232.46-84.626-199.675 0-361.544 161.867-361.544 361.542z" />
-<glyph unicode="&#xe911;" glyph-name="maximize" d="M176.662 865.669c-52.92 0-95.82-42.896-95.82-95.811v-143.717c0-26.457 21.45-47.906 47.91-47.906s47.91 21.448 47.91 47.906v143.717h143.73c26.46 0 47.91 21.448 47.91 47.905s-21.45 47.905-47.91 47.905h-143.73zM703.607 865.684c-26.457 0-47.907-21.448-47.907-47.905s21.45-47.906 47.907-47.906h143.732v-143.716c0-26.457 21.45-47.906 47.907-47.906 26.462 0 47.912 21.448 47.912 47.906v143.716c0 52.915-42.9 95.811-95.819 95.811h-143.732zM176.662 242.898c0 26.457-21.451 47.902-47.91 47.902s-47.91-21.445-47.91-47.902v-143.721c0-52.914 42.9-95.809 95.82-95.809h143.73c26.46 0 47.91 21.445 47.91 47.907 0 26.457-21.45 47.902-47.91 47.902h-143.73v143.721zM943.158 242.898c0 26.457-21.45 47.902-47.912 47.902-26.457 0-47.907-21.445-47.907-47.902v-143.721h-143.732c-26.457 0-47.907-21.445-47.907-47.902 0-26.462 21.45-47.907 47.907-47.907h143.732c52.919 0 95.819 42.895 95.819 95.809v143.721zM559.941 578.235c0 26.457-21.449 47.906-47.91 47.906s-47.91-21.448-47.91-47.906v-95.811h-95.82c-26.46 0-47.91-21.447-47.91-47.905 0-26.46 21.45-47.905 47.91-47.905h95.82v-95.814c0-26.457 21.449-47.902 47.91-47.902s47.91 21.445 47.91 47.902v95.814h95.818c26.462 0 47.912 21.445 47.912 47.905 0 26.458-21.45 47.905-47.912 47.905h-95.818v95.811z" />
-<glyph unicode="&#xe912;" glyph-name="folder" d="M229.053 798.316h158.84c40.545 0 78.408-20.263 100.898-53.998l44.843-67.265h220.893c66.975 0 121.263-54.291 121.263-121.263v-41.706c46.657-8.38 77.409-56.371 62.631-103.669l-66.926-214.162c-15.538-49.718-61.036-83.855-112.904-85.062-0.744-0.016-1.493-0.027-2.242-0.032-0.199 0-0.426 0-0.625 0h-549.275c-54.487 0-98.658 44.172-98.658 98.66v467.235c0 66.972 54.291 121.263 121.263 121.263zM794.947 515.368v40.421c0 22.324-18.098 40.421-40.421 40.421h-220.893c-27.029 0-52.273 13.509-67.264 35.999l-44.844 67.264c-7.497 11.245-20.117 18-33.632 18h-158.84c-22.324 0-40.421-18.097-40.421-40.421v-467.235c0-9.841 7.977-17.818 17.816-17.818 7.793 0 14.681 5.066 17.005 12.504l70.554 225.77c15.821 50.628 62.705 85.094 115.744 85.094h385.197z" />
-<glyph unicode="&#xe913;" glyph-name="plot" d="M188.632 798.316c22.324 0 40.421-18.097 40.421-40.421v-427.892l102.786 102.789c43.69 43.691 114.525 43.691 158.216 0 12.119-12.117 31.771-12.117 43.89 0l94.414 94.415c47.357 47.356 124.136 47.356 171.493 0l23.676-23.679c15.786-15.784 15.786-41.379 0-57.163s-41.375-15.785-57.161 0l-23.681 23.679c-15.786 15.784-41.375 15.784-57.161 0l-94.418-94.414c-43.692-43.692-114.524-43.692-158.214 0-12.12 12.116-31.769 12.116-43.889 0l-159.95-159.949v-23.681c0-22.323 18.097-40.421 40.421-40.421h565.895c22.323 0 40.421-18.098 40.421-40.421s-18.098-40.421-40.421-40.421h-565.895c-66.972 0-121.263 54.288-121.263 121.263v565.895c0 22.324 18.097 40.421 40.421 40.421z" />
-<glyph unicode="&#xe914;" glyph-name="text" d="M431.158 757.895c-22.324 0-40.421-18.097-40.421-40.421s18.097-40.421 40.421-40.421h202.105v-565.895c0-22.323 18.098-40.421 40.421-40.421s40.421 18.098 40.421 40.421v565.895h202.105c22.323 0 40.421 18.097 40.421 40.421s-18.098 40.421-40.421 40.421h-485.053zM266.513 111.158v323.368h-158.724c-22.324 0-40.421 18.096-40.421 40.421s18.097 40.421 40.421 40.421h197.342c0.598 0.026 1.199 0.039 1.803 0.039s1.205-0.013 1.802-0.039h203.263c22.324 0 40.421-18.097 40.421-40.421s-18.097-40.421-40.421-40.421h-164.645v-323.368c0-22.323-18.097-40.421-40.421-40.421s-40.421 18.098-40.421 40.421z" />
-<glyph unicode="&#xe915;" glyph-name="gift" d="M269.474 730.947c0 59.531 48.259 107.789 107.789 107.789 54.178 0 102.606-24.596 134.737-63.23 32.132 38.634 80.562 63.23 134.737 63.23 59.532 0 107.789-48.259 107.789-107.789 0-34.725-10.105-67.091-27.535-94.316h67.956c44.652 0 80.842-36.194 80.842-80.842 0-44.649-36.19-80.842-80.842-80.842h-242.526v161.684h26.947c52.089 0 94.316 42.227 94.316 94.316 0 14.882-12.067 26.947-26.947 26.947-52.089 0-94.316-42.227-94.316-94.316v-26.947h-80.842v26.947c0 52.089-42.227 94.316-94.316 94.316-14.882 0-26.947-12.065-26.947-26.947 0-52.089 42.227-94.316 94.314-94.316h26.949v-161.684h-242.526c-44.648 0-80.842 36.193-80.842 80.842s36.194 80.842 80.842 80.842h67.956c-17.43 27.225-27.535 59.59-27.535 94.316zM552.421 394.105h282.947v-202.105c0-66.975-54.288-121.263-121.263-121.263h-161.684v323.368zM471.579 394.105h-282.947v-202.105c0-66.975 54.291-121.263 121.263-121.263h161.684v323.368z" />
-<glyph unicode="&#xe916;" glyph-name="element" d="M680.691 826.633l-0.981 0.276c-4.522 1.278-10.574 2.989-16.249 3.935-7.243 1.206-16.406 1.696-26.683-1.249-14.153-4.054-27.136-13.886-34.875-26.408-5.955-9.63-7.772-19.165-8.483-26.219-0.582-5.843-0.582-12.428-0.577-17.748v-172.047c0-4.814-0.005-10.565 0.415-15.631 0.474-5.87 1.708-14.277 6.193-23.087 5.815-11.408 15.091-20.684 26.5-26.497 8.812-4.489 17.219-5.719 23.089-6.199 5.061-0.416 10.817-0.411 15.629-0.411h172.043c5.325 0 11.911-0.004 17.748 0.581 7.055 0.707 16.589 2.524 26.225 8.478 12.52 7.74 22.35 20.724 26.403 34.876 2.948 10.279 2.458 19.443 1.25 26.682-0.943 5.674-2.657 11.729-3.934 16.252l-0.275 0.98c-30.429 108.002-115.432 193.008-223.437 223.435zM471.579 757.895c-200.915 0-363.789-162.874-363.789-363.789 0-200.92 162.874-363.789 363.789-363.789 200.92 0 363.789 162.87 363.789 363.789 0 22.323-18.098 40.421-40.421 40.421h-226.358c-17.645 0-28.446 0.032-36.533 0.691-3.763 0.307-6.043 0.695-7.425 1.018-0.659 0.158-1.063 0.287-1.282 0.364-0.21 0.077-0.315 0.129-0.315 0.129-3.804 1.936-6.896 5.028-8.832 8.832l-0.040 0.089-0.088 0.226c-0.077 0.218-0.206 0.622-0.364 1.282-0.323 1.382-0.711 3.662-1.018 7.425-0.659 8.084-0.691 18.888-0.691 36.533v226.358c0 22.324-18.096 40.421-40.421 40.421z" />
-<glyph unicode="&#xe917;" glyph-name="equal" d="M253.44 576h491.52c12.725 0 23.040-10.315 23.040-23.040v-30.72c0-12.725-10.315-23.040-23.040-23.040h-491.52c-12.725 0-23.040 10.315-23.040 23.040v30.72c0 12.725 10.315 23.040 23.040 23.040zM253.44 422.4h491.52c12.725 0 23.040-10.315 23.040-23.040v-30.72c0-12.725-10.315-23.040-23.040-23.040h-491.52c-12.725 0-23.040 10.315-23.040 23.040v30.72c0 12.725 10.315 23.040 23.040 23.040z" />
-<glyph unicode="&#xe918;" glyph-name="chevron-left" d="M676.178 752.526c20.628-20.632 20.628-54.082 0-74.714l-209.405-209.403c-4.201-4.201-4.201-11.017 0-15.219l209.405-209.402c20.628-20.634 20.628-54.083 0-74.716-20.634-20.628-54.083-20.628-74.716 0l-209.402 209.403c-45.465 45.466-45.465 119.183 0 164.647l209.402 209.403c20.634 20.632 54.083 20.632 74.716 0z" />
-<glyph unicode="&#xe919;" glyph-name="chevron-down" d="M207.474 612.171c20.632 20.632 54.082 20.632 74.714 0l209.403-209.401c4.201-4.204 11.017-4.204 15.219 0l209.402 209.401c20.634 20.632 54.083 20.632 74.716 0 20.628-20.632 20.628-54.082 0-74.714l-209.403-209.403c-45.466-45.466-119.183-45.466-164.647 0l-209.403 209.403c-20.632 20.632-20.632 54.082 0 74.714z" />
-<glyph unicode="&#xe91a;" glyph-name="chevron-right" d="M373.424 169.073c-20.632 20.634-20.632 54.083 0 74.716l209.401 209.402c4.204 4.201 4.204 11.017 0 15.219l-209.401 209.403c-20.632 20.632-20.632 54.082 0 74.714s54.082 20.632 74.714 0l209.404-209.403c45.466-45.465 45.466-119.182 0-164.647l-209.404-209.403c-20.632-20.628-54.082-20.628-74.714 0z" />
-<glyph unicode="&#xe91b;" glyph-name="chevron-up" d="M788.403 307.2c-23.992-23.992-62.894-23.992-86.886 0l-202.317 202.315-202.315-202.315c-23.994-23.992-62.896-23.992-86.889 0s-23.994 62.894 0 86.892l202.316 202.314c47.986 47.986 125.791 47.986 173.775 0l202.317-202.314c23.997-23.997 23.997-62.899 0-86.892z" />
+<glyph unicode="&#xe90b;" glyph-name="error" d="M152.697 434.527c0 198.435 160.863 359.298 359.298 359.298 198.434 0 359.299-160.863 359.299-359.298s-160.865-359.301-359.299-359.301c-198.435 0-359.298 160.865-359.298 359.301zM429.613 567.722c-14.032 14.031-36.782 14.031-50.813 0s-14.031-36.781 0-50.812l82.384-82.383-82.384-82.384c-14.031-14.029-14.031-36.783 0-50.812s36.781-14.029 50.813 0l82.383 82.383 82.383-82.383c14.030-14.029 36.782-14.029 50.811 0 14.034 14.029 14.034 36.783 0 50.812l-82.382 82.384 82.382 82.383c14.034 14.031 14.034 36.781 0 50.812-14.029 14.031-36.78 14.031-50.811 0l-82.383-82.383-82.383 82.383z" />
+<glyph unicode="&#xe90c;" glyph-name="success" d="M511.996 793.825c198.434 0 359.299-160.863 359.299-359.298s-160.865-359.301-359.299-359.301c-198.435 0-359.298 160.865-359.298 359.301s160.863 359.298 359.298 359.298zM647.594 501.597c12.568 15.359 10.305 37.996-5.055 50.562-15.36 12.565-37.995 10.301-50.563-5.056l-136.541-166.886-43.787 43.786c-14.031 14.030-36.781 14.030-50.812 0s-14.031-36.78 0-50.814l71.859-71.858c7.178-7.179 17.057-10.989 27.196-10.483s19.589 5.282 26.020 13.134l161.683 197.614z" />
+<glyph unicode="&#xe90d;" glyph-name="search" d="M464.846 780.351c-164.949 0-298.667-133.718-298.667-298.667s133.718-298.668 298.667-298.668c164.951 0 298.664 133.718 298.664 298.668s-133.713 298.667-298.664 298.667zM103.303 481.684c0 199.675 161.869 361.544 361.544 361.544s361.543-161.869 361.543-361.544c0-88.516-31.809-169.606-84.626-232.458l169.736-169.731c12.277-12.277 12.277-32.186 0-44.463s-32.186-12.277-44.463 0l-169.731 169.736c-62.852-52.817-143.941-84.626-232.46-84.626-199.675 0-361.544 161.867-361.544 361.542z" />
+<glyph unicode="&#xe90e;" glyph-name="maximize" d="M176.662 865.669c-52.92 0-95.82-42.896-95.82-95.811v-143.717c0-26.457 21.45-47.906 47.91-47.906s47.91 21.448 47.91 47.906v143.717h143.73c26.46 0 47.91 21.448 47.91 47.905s-21.45 47.905-47.91 47.905h-143.73zM703.607 865.684c-26.457 0-47.907-21.448-47.907-47.905s21.45-47.906 47.907-47.906h143.732v-143.716c0-26.457 21.45-47.906 47.907-47.906 26.462 0 47.912 21.448 47.912 47.906v143.716c0 52.915-42.9 95.811-95.819 95.811h-143.732zM176.662 242.898c0 26.457-21.451 47.902-47.91 47.902s-47.91-21.445-47.91-47.902v-143.721c0-52.914 42.9-95.809 95.82-95.809h143.73c26.46 0 47.91 21.445 47.91 47.907 0 26.457-21.45 47.902-47.91 47.902h-143.73v143.721zM943.158 242.898c0 26.457-21.45 47.902-47.912 47.902-26.457 0-47.907-21.445-47.907-47.902v-143.721h-143.732c-26.457 0-47.907-21.445-47.907-47.902 0-26.462 21.45-47.907 47.907-47.907h143.732c52.919 0 95.819 42.895 95.819 95.809v143.721zM559.941 578.235c0 26.457-21.449 47.906-47.91 47.906s-47.91-21.448-47.91-47.906v-95.811h-95.82c-26.46 0-47.91-21.447-47.91-47.905 0-26.46 21.45-47.905 47.91-47.905h95.82v-95.814c0-26.457 21.449-47.902 47.91-47.902s47.91 21.445 47.91 47.902v95.814h95.818c26.462 0 47.912 21.445 47.912 47.905 0 26.458-21.45 47.905-47.912 47.905h-95.818v95.811z" />
+<glyph unicode="&#xe90f;" glyph-name="folder" d="M229.053 798.316h158.84c40.545 0 78.408-20.263 100.898-53.998l44.843-67.265h220.893c66.975 0 121.263-54.291 121.263-121.263v-41.706c46.657-8.38 77.409-56.371 62.631-103.669l-66.926-214.162c-15.538-49.718-61.036-83.855-112.904-85.062-0.744-0.016-1.493-0.027-2.242-0.032-0.199 0-0.426 0-0.625 0h-549.275c-54.487 0-98.658 44.172-98.658 98.66v467.235c0 66.972 54.291 121.263 121.263 121.263zM794.947 515.368v40.421c0 22.324-18.098 40.421-40.421 40.421h-220.893c-27.029 0-52.273 13.509-67.264 35.999l-44.844 67.264c-7.497 11.245-20.117 18-33.632 18h-158.84c-22.324 0-40.421-18.097-40.421-40.421v-467.235c0-9.841 7.977-17.818 17.816-17.818 7.793 0 14.681 5.066 17.005 12.504l70.554 225.77c15.821 50.628 62.705 85.094 115.744 85.094h385.197z" />
+<glyph unicode="&#xe910;" glyph-name="plot" d="M188.632 798.316c22.324 0 40.421-18.097 40.421-40.421v-427.892l102.786 102.789c43.69 43.691 114.525 43.691 158.216 0 12.119-12.117 31.771-12.117 43.89 0l94.414 94.415c47.357 47.356 124.136 47.356 171.493 0l23.676-23.679c15.786-15.784 15.786-41.379 0-57.163s-41.375-15.785-57.161 0l-23.681 23.679c-15.786 15.784-41.375 15.784-57.161 0l-94.418-94.414c-43.69-43.692-114.524-43.692-158.214 0-12.12 12.116-31.769 12.116-43.889 0l-159.95-159.949v-23.681c0-22.323 18.097-40.421 40.421-40.421h565.895c22.323 0 40.421-18.098 40.421-40.421s-18.098-40.421-40.421-40.421h-565.895c-66.972 0-121.263 54.288-121.263 121.263v565.895c0 22.324 18.097 40.421 40.421 40.421z" />
+<glyph unicode="&#xe911;" glyph-name="text" d="M431.158 757.895c-22.324 0-40.421-18.097-40.421-40.421s18.097-40.421 40.421-40.421h202.105v-565.895c0-22.323 18.098-40.421 40.421-40.421s40.421 18.098 40.421 40.421v565.895h202.105c22.323 0 40.421 18.097 40.421 40.421s-18.098 40.421-40.421 40.421h-485.053zM266.513 111.158v323.368h-158.724c-22.324 0-40.421 18.096-40.421 40.421s18.097 40.421 40.421 40.421h197.342c0.598 0.026 1.199 0.039 1.803 0.039s1.205-0.013 1.802-0.039h203.263c22.324 0 40.421-18.097 40.421-40.421s-18.097-40.421-40.421-40.421h-164.645v-323.368c0-22.323-18.097-40.421-40.421-40.421s-40.421 18.098-40.421 40.421z" />
+<glyph unicode="&#xe912;" glyph-name="gift" d="M269.474 730.947c0 59.531 48.259 107.789 107.789 107.789 54.178 0 102.606-24.596 134.737-63.23 32.131 38.634 80.562 63.23 134.737 63.23 59.532 0 107.789-48.259 107.789-107.789 0-34.725-10.105-67.091-27.535-94.316h67.956c44.652 0 80.842-36.194 80.842-80.842 0-44.649-36.19-80.842-80.842-80.842h-242.526v161.684h26.947c52.089 0 94.316 42.227 94.316 94.316 0 14.882-12.067 26.947-26.947 26.947-52.089 0-94.316-42.227-94.316-94.316v-26.947h-80.842v26.947c0 52.089-42.227 94.316-94.316 94.316-14.882 0-26.947-12.065-26.947-26.947 0-52.089 42.227-94.316 94.314-94.316h26.949v-161.684h-242.526c-44.648 0-80.842 36.193-80.842 80.842s36.194 80.842 80.842 80.842h67.956c-17.43 27.225-27.535 59.59-27.535 94.316zM552.421 394.105h282.947v-202.105c0-66.975-54.288-121.263-121.263-121.263h-161.684v323.368zM471.579 394.105h-282.947v-202.105c0-66.975 54.291-121.263 121.263-121.263h161.684v323.368z" />
+<glyph unicode="&#xe913;" glyph-name="pie-chart" d="M680.691 826.633l-0.981 0.276c-4.522 1.278-10.574 2.989-16.249 3.935-7.243 1.206-16.406 1.696-26.683-1.249-14.153-4.054-27.136-13.886-34.875-26.408-5.955-9.63-7.772-19.165-8.483-26.219-0.582-5.843-0.582-12.428-0.577-17.748v-172.047c0-4.814-0.005-10.565 0.415-15.631 0.474-5.87 1.708-14.277 6.193-23.087 5.815-11.408 15.091-20.684 26.5-26.497 8.812-4.489 17.219-5.719 23.089-6.199 5.061-0.416 10.817-0.411 15.629-0.411h172.043c5.325 0 11.911-0.004 17.748 0.581 7.055 0.707 16.589 2.524 26.225 8.478 12.52 7.74 22.35 20.724 26.403 34.876 2.948 10.279 2.458 19.443 1.25 26.682-0.943 5.674-2.657 11.729-3.934 16.252l-0.275 0.98c-30.429 108.002-115.432 193.008-223.437 223.435zM471.579 757.895c-200.915 0-363.789-162.874-363.789-363.789 0-200.92 162.874-363.789 363.789-363.789 200.92 0 363.789 162.87 363.789 363.789 0 22.323-18.098 40.421-40.421 40.421h-226.358c-17.644 0-28.448 0.032-36.533 0.691-3.763 0.307-6.043 0.695-7.425 1.018-0.659 0.158-1.063 0.287-1.282 0.364-0.21 0.077-0.315 0.129-0.315 0.129-3.804 1.936-6.896 5.028-8.832 8.832l-0.040 0.089-0.088 0.226c-0.077 0.218-0.206 0.622-0.364 1.282-0.323 1.382-0.711 3.662-1.018 7.425-0.659 8.084-0.691 18.888-0.691 36.533v226.358c0 22.324-18.096 40.421-40.421 40.421z" />
+<glyph unicode="&#xe914;" glyph-name="chevron-left" d="M676.178 752.526c20.628-20.632 20.628-54.082 0-74.714l-209.405-209.403c-4.201-4.201-4.201-11.017 0-15.219l209.405-209.402c20.628-20.634 20.628-54.083 0-74.716-20.634-20.628-54.083-20.628-74.716 0l-209.402 209.403c-45.465 45.466-45.465 119.183 0 164.647l209.402 209.403c20.634 20.632 54.083 20.632 74.716 0z" />
+<glyph unicode="&#xe915;" glyph-name="chevron-down" d="M207.474 612.171c20.632 20.632 54.082 20.632 74.714 0l209.403-209.401c4.201-4.204 11.017-4.204 15.219 0l209.402 209.401c20.634 20.632 54.083 20.632 74.716 0 20.628-20.632 20.628-54.082 0-74.714l-209.403-209.403c-45.466-45.466-119.183-45.466-164.647 0l-209.403 209.403c-20.632 20.632-20.632 54.082 0 74.714z" />
+<glyph unicode="&#xe916;" glyph-name="chevron-right" d="M373.424 169.073c-20.632 20.634-20.632 54.083 0 74.716l209.401 209.402c4.204 4.201 4.204 11.017 0 15.219l-209.401 209.403c-20.632 20.632-20.632 54.082 0 74.714s54.082 20.632 74.714 0l209.404-209.403c45.466-45.465 45.466-119.182 0-164.647l-209.404-209.403c-20.632-20.628-54.082-20.628-74.714 0z" />
+<glyph unicode="&#xe917;" glyph-name="chevron-up" d="M788.403 307.2c-23.992-23.992-62.894-23.992-86.886 0l-202.317 202.315-202.315-202.315c-23.994-23.992-62.896-23.992-86.889 0s-23.994 62.894 0 86.892l202.316 202.314c47.986 47.986 125.791 47.986 173.775 0l202.317-202.314c23.997-23.997 23.997-62.899 0-86.892z" />
 </font></defs></svg>
diff --git a/frontend/src/assets/fonts/icomoon.ttf b/frontend/src/assets/fonts/icomoon.ttf
index 40bb42ffa56281932f69df0e81d839f936240fb5..60f856194aa6cc46c906505537bda0bc701686d7 100644
GIT binary patch
delta 351
zcmcbhvqY<&fsuiMft#U$ftkU;KUm+0Ux-Z?D6$8L6OwZi3&g`N&0}C-lmYTX(i4jd
zfV2RR5288Jb1KvNiaeu%{0gA(os87P6is>aj|>b#AwYSv44?peJ@Z{4zX!-y$;d6K
zNCPr}{0%^&ASXZBG0{5A><t5humVuPDmSsBfWd&F3doNE@)hzDb5mz}asCGKYk-!t
z733F}038YhqAVbJ24?0r6A#!kiceznW)z?7!<adFDznODRpx@tTNw)&H}7QLz`j|M
zXAA3QLm_)cnZI+QjpO-kzA|uwbTcqKR{XgOMo;b$HfNNXd_=gw2`tCOAi^LAbV~-K
z0%H&3DW)=}Q_MEZdsui_JXn^o{9uh?eZ}U$*2i{(-G==V`!5b94lj;8piWS5%53fv
HIm8G6TSHQo

delta 627
zcmZ3YbwQ_|fsuiMft#U$ftkU;KUm+0Ux>{ZD6$8L6OwZi3&g`NEn;9`lmYTX(i4jd
zfV2RR5288Jb1Kt1e%zY{<X12-2!6;&O-#|0(X3@)5Y7O~n`Hn6*z1`e0{IJoe3gvc
zl8Q1Q1IRxDBpPz^lN}SiJY3H(Fo?JS1)OpdD+(A)7^;B$4j^A4FEKZDrWfaLAb$nW
zlD2~U;u4@kfk4avB+tOi{BGg_dq(L=jNXjWlYJO7H+wP_FiyV7STK1jqsr!;%p2J2
zfgb#SfZ3P%0LbCOibi6hf+B3nib`sxf+l9hH<$thL`4PuZUB)?b)o|QHiKA<z5=2^
z8^C&*ra<&E8bkDIGeY$;PQ1r2CdLmYFtkGTdg%i-^8-yn)696=3#1oBplaQm&b^H_
zi3#jz2C&775NFFWLY!^O2z0h6&>tuQe;MC!@$z#06XE3J<3wgNIq-7Hg9PQdcxUl)
z$$?Y>35Lzmf{u(br&g+MjOVxc%D~M63RZ^43PlYtdUA!3Iitel4MGKzF9-=tRuJZ9
zzQ)KmSx;D8UyRj+HGp*sn-kj%wrA`H>{B?jIAS<jIM#4n;rId64-7X31%?U+VUSr2
POp^sgg*Vp=FJ%M(n{$Ll

diff --git a/frontend/src/assets/fonts/icomoon.woff b/frontend/src/assets/fonts/icomoon.woff
index b2df8d54bf70d8af62eae2a536f2811f48895423..c73706aa87c68164074132c5685d411c58f43ec7 100644
GIT binary patch
delta 369
zcmbQE`$0>j+~3WOfsp|SL<<<W!L-WcMlp$rI>Pn3$+?LI3=E7JK;aM&77x2LFFmms
zB(?|0=YV2?^qk5xpx6-x27x;u+*jloospWD!oVQ30I0?cgf->OKV|?0fnqm+d=(I8
zuV=oSky}y$6#E0@1I=Y902;)Qlb;M!=O>&4WLtr-b(q<k+{6l?0^t=vz5*B<FjVCw
z=B5J0P5>=$1L2uooWBe5i%WpM34p6(2C|r$-%RFVv}Y8b?8E2{Bxf*YPJYO&GP#hs
zU^63A0pn&?mJRHiQ+c+qZmt!wXO#InC)zlk-{va=Hw#cV1H)s*pSxi6<Qu}~j53o2
zL<%NP5aDJvV91y}PefcchV>Pj16v>44R#y$OYFZmlsLRN@_>3kfh)85mdGJS03$zE
A82|tP

delta 670
zcmeyMHAh#Z+~3WOfsp|S#O5$?gXw^YBHH!F$+?LI3=E7JK%o#277x3$C_S+lB(?|0
z=YV2?^qk5xpx6-x2Eh*?-0|bytc=ve6b1(2EkHG9Agn2)S(^bA1d6=@@>M{Xy`K4D
zMs7(31A~YFklz5pWk4b)KN+abPh<j+?F7PJ9<FC{6Dxogi(CQn6~Nepp(-yiHx(%M
z1!#F22+#E5{9TY=Tmtk-4O|^Fkj2dWZZZ#}J)`twA4YE=IfF5C^Hin+#>uKo1(O+>
zR5r7+Y+$bkhQa>>%)ZPA7=X?ZRx}b56%=7pR#Z|m6*Mt3zQGhAASx>GcLRuIsuLCX
zw;9A@^c4^V+5pzeGzFrU(HNpvn-Qv)apFCGF)@BHfuR+u*GnI$nIC8pnr6n^ULd_7
z0#)ng&D`5qlbFDcW&m5P2ywP7BgEOZj6i3L0{wv^@R#uo7cVc@KM_toK2BsdlLIf8
zJV;QUi+2_;mmEkHkYL!HF6hW8b84m9#&~|4uMFHQK<_dzJXR=bfYFnW2$?e~O#UNO
zFj+xZU~-NyxBWFnK1Kz`9>!BlWlX1-ZJ774@UVEWEMxh>D#mKU8o;`R&53OW+cS0p
f_9+}%95Ea%9BVkPaQpz82n<OEh0W`P4>1A&yi1I^

diff --git a/frontend/src/assets/styles/_icons.css b/frontend/src/assets/styles/_icons.css
index 35bc5f37..663ae34f 100644
--- a/frontend/src/assets/styles/_icons.css
+++ b/frontend/src/assets/styles/_icons.css
@@ -27,7 +27,7 @@
   text-transform: none;
 }
 
-.icon-trash::before {
+.icon-branch::before {
   content: "\e900";
 }
 
@@ -35,7 +35,7 @@
   content: "\e901";
 }
 
-.icon-branch::before {
+.icon-trash::before {
   content: "\e902";
 }
 
@@ -79,62 +79,46 @@
   content: "\e90c";
 }
 
-.icon-xl::before {
-  content: "\e90d";
-}
-
-.icon-sm::before {
-  content: "\e90e";
-}
-
-.icon-xs::before {
-  content: "\e90f";
-}
-
 .icon-search::before {
-  content: "\e910";
+  content: "\e90d";
 }
 
 .icon-maximize::before {
-  content: "\e911";
+  content: "\e90e";
 }
 
 .icon-folder::before {
-  content: "\e912";
+  content: "\e90f";
 }
 
 .icon-plot::before {
-  content: "\e913";
+  content: "\e910";
 }
 
 .icon-text::before {
-  content: "\e914";
+  content: "\e911";
 }
 
 .icon-gift::before {
-  content: "\e915";
+  content: "\e912";
 }
 
 .icon-pie-chart::before {
-  content: "\e916";
-}
-
-.icon-equal::before {
-  content: "\e917";
+  content: "\e913";
 }
 
 .icon-chevron-left::before {
-  content: "\e918";
+  content: "\e914";
 }
 
 .icon-chevron-down::before {
-  content: "\e919";
+  content: "\e915";
 }
 
 .icon-chevron-right::before {
-  content: "\e91a";
+  content: "\e916";
 }
 
 .icon-chevron-up::before {
-  content: "\e91b";
+  content: "\e917";
 }
diff --git a/frontend/src/assets/styles/main.css b/frontend/src/assets/styles/main.css
index 94eb7ec9..64da1cd0 100644
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -3,6 +3,7 @@
 @import url("./_typography.css");
 @import url("./_animations.css");
 @import url("./_icons.css");
+@import url("simplebar-vue/dist/simplebar.min.css");
 @import url("highlight.js/styles/atom-one-dark.css") screen and (prefers-color-scheme: dark);
 @import url("highlight.js/styles/atom-one-light.css") screen and (prefers-color-scheme: light);
 
diff --git a/frontend/src/components/DropdownButton.vue b/frontend/src/components/DropdownButton.vue
index c6adb921..9fd85a22 100644
--- a/frontend/src/components/DropdownButton.vue
+++ b/frontend/src/components/DropdownButton.vue
@@ -100,7 +100,7 @@ onBeforeUnmount(() => {
 
   & .items {
     position: fixed;
-    z-index: 1000;
+    z-index: 9999;
     display: flex;
     overflow: visible;
     width: max-content;
diff --git a/frontend/src/components/EditableList.vue b/frontend/src/components/EditableList.vue
index 2a853848..c2337598 100644
--- a/frontend/src/components/EditableList.vue
+++ b/frontend/src/components/EditableList.vue
@@ -19,7 +19,10 @@ const props = defineProps<{
   actions?: EditableListAction[];
 }>();
 
-const emit = defineEmits<{ action: [payload: string, item: EditableListItemModel] }>();
+const emit = defineEmits<{
+  action: [payload: string, item: EditableListItemModel];
+  select: [name: string];
+}>();
 const items = defineModel<EditableListItemModel[]>("items", { required: true });
 
 const onAction = (payload: string, item: EditableListItemModel) => {
@@ -29,13 +32,14 @@ const onAction = (payload: string, item: EditableListItemModel) => {
 
 <template>
   <div class="editable-list">
-    <div class="editable-list-item" v-for="(item, index) in items" :key="item.name">
-      <EditableListItem
-        v-model="items[index]"
-        :actions="props.actions"
-        @action="onAction($event, item)"
-      />
-    </div>
+    <EditableListItem
+      v-for="(item, index) in items"
+      :key="item.name"
+      v-model="items[index]"
+      :actions="props.actions"
+      @action="onAction($event, item)"
+      @select="emit('select', item.name)"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/components/EditableListItem.vue b/frontend/src/components/EditableListItem.vue
index fd06c0ec..7ca5b64c 100644
--- a/frontend/src/components/EditableListItem.vue
+++ b/frontend/src/components/EditableListItem.vue
@@ -7,7 +7,10 @@ import type { EditableListAction, EditableListItemModel } from "@/components/Edi
 
 const props = defineProps<{ actions?: EditableListAction[] }>();
 
-const emit = defineEmits<{ action: [payload: string] }>();
+const emit = defineEmits<{
+  action: [payload: string];
+  select: [name: string];
+}>();
 
 const item = defineModel<EditableListItemModel>({ required: true });
 const label = ref<HTMLSpanElement>();
@@ -35,7 +38,7 @@ onMounted(() => {
 
 <template>
   <div class="editable-list-item">
-    <div class="label-container">
+    <div class="label-container" @click="emit('select', item.name)">
       <span class="icon" v-if="item.icon" :class="item.icon" />
       <span
         class="label"
@@ -77,7 +80,6 @@ onMounted(() => {
 
   .label {
     min-width: 100px;
-    caret-color: var(--color-primary);
     color: var(--text-color-highlight);
     line-height: 2;
     outline: none;
@@ -85,6 +87,7 @@ onMounted(() => {
 
     &[contenteditable="true"] {
       background-color: var(--color-primary);
+      caret-color: var(--color-secondary);
       color: var(--button-color);
       cursor: text;
     }
diff --git a/frontend/src/components/ReportCanvas.vue b/frontend/src/components/ProjectViewCanvas.vue
similarity index 72%
rename from frontend/src/components/ReportCanvas.vue
rename to frontend/src/components/ProjectViewCanvas.vue
index a106bd82..2a21021b 100644
--- a/frontend/src/components/ReportCanvas.vue
+++ b/frontend/src/components/ProjectViewCanvas.vue
@@ -7,19 +7,26 @@ 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 ProjectViewCard from "@/components/ProjectViewCard.vue";
 import VegaWidget from "@/components/VegaWidget.vue";
-import type { KeyLayoutSize, KeyMoveDirection } from "@/models";
-import { useReportStore } from "@/stores/report";
+import { useProjectStore } from "@/stores/project";
 
-const reportStore = useReportStore();
+const props = defineProps({
+  showCardButtons: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const projectStore = useProjectStore();
 
 const visibleItems = computed(() => {
   const items = [];
   let index = 0;
-  if (reportStore.items !== null) {
-    for (const { key, size } of reportStore.layout) {
-      const item = reportStore.items[key];
+  if (projectStore.items !== null && projectStore.currentView !== null) {
+    const v = projectStore.views[projectStore.currentView];
+    for (const key of v) {
+      const item = projectStore.items[key];
       if (item) {
         const mediaType = item.media_type || "";
         let data;
@@ -45,7 +52,6 @@ const visibleItems = computed(() => {
         const updatedAt = new Date(item.updated_at);
         items.push({
           key,
-          size,
           mediaType,
           data,
           createdAt,
@@ -59,25 +65,12 @@ const visibleItems = computed(() => {
   return items;
 });
 
-function onLayoutChange(key: string, size: KeyLayoutSize) {
-  reportStore.setKeyLayoutSize(key, size);
-}
-
 function onCardRemoved(key: string) {
-  reportStore.hideKey(key);
-}
-
-function onPositionChanged(key: string, direction: KeyMoveDirection) {
-  reportStore.moveKey(key, direction);
+  if (projectStore.currentView) {
+    projectStore.hideKey(projectStore.currentView, key);
+  }
 }
 
-const props = defineProps({
-  showCardButtons: {
-    type: Boolean,
-    default: true,
-  },
-});
-
 function getItemSubtitle(created_at: Date, updated_at: Date) {
   const now = new Date();
   return `Created ${formatDistance(created_at, now)} ago, updated ${formatDistance(updated_at, now)} ago`;
@@ -86,18 +79,13 @@ function getItemSubtitle(created_at: Date, updated_at: Date) {
 
 <template>
   <div class="canvas">
-    <ReportCard
-      v-for="{ key, size, mediaType, data, createdAt, updatedAt, index } in visibleItems"
+    <ProjectViewCard
+      v-for="{ key, mediaType, data, createdAt, updatedAt } in visibleItems"
       :key="key"
       :title="key.toString()"
       :subtitle="getItemSubtitle(createdAt, updatedAt)"
       :showButtons="props.showCardButtons"
-      :can-move-up="index > 0"
-      :can-move-down="index < reportStore.layout.length - 1"
-      :class="size"
       class="canvas-element"
-      @layout-changed="onLayoutChange(key.toString(), $event)"
-      @position-changed="onPositionChanged(key.toString(), $event)"
       @card-removed="onCardRemoved(key.toString())"
     >
       <DataFrameWidget
@@ -119,33 +107,21 @@ function getItemSubtitle(created_at: Date, updated_at: Date) {
         :src="data"
       />
       <HtmlSnippetWidget v-if="mediaType === 'text/html'" :src="data" />
-    </ReportCard>
+    </ProjectViewCard>
   </div>
 </template>
 
 <style scoped>
 .canvas {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   padding: var(--spacing-gap-normal);
   background-color: var(--background-color-normal);
   gap: var(--spacing-gap-normal);
-  grid-template-columns: 1fr 1fr 1fr;
   transition: grid-column var(--transition-duration) var(--transition-easing);
 
   & .canvas-element {
     max-width: 100%;
-
-    &.small {
-      grid-column: span 1;
-    }
-
-    &.medium {
-      grid-column: span 2;
-    }
-
-    &.large {
-      grid-column: span 3;
-    }
   }
 }
 </style>
diff --git a/frontend/src/components/ReportCard.vue b/frontend/src/components/ProjectViewCard.vue
similarity index 77%
rename from frontend/src/components/ReportCard.vue
rename to frontend/src/components/ProjectViewCard.vue
index 4e5e8dff..7f88dce3 100644
--- a/frontend/src/components/ReportCard.vue
+++ b/frontend/src/components/ProjectViewCard.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import type { KeyLayoutSize, KeyMoveDirection } from "@/models";
-
 const props = defineProps<{
   title: string;
   subtitle?: string;
   showButtons: boolean;
-  canMoveUp: boolean;
-  canMoveDown: boolean;
 }>();
 
 const emit = defineEmits<{
-  layoutChanged: [size: KeyLayoutSize];
-  positionChanged: [direction: KeyMoveDirection];
   cardRemoved: [];
 }>();
 </script>
@@ -26,22 +20,7 @@ const emit = defineEmits<{
         </div>
       </div>
       <div v-if="props.showButtons" class="buttons">
-        <button @click="emit('layoutChanged', 'small')">
-          <span class="icon-xs"></span>
-        </button>
-        <button @click="emit('layoutChanged', 'medium')">
-          <span class="icon-sm"></span>
-        </button>
-        <button @click="emit('layoutChanged', 'large')">
-          <span class="icon-xl"></span>
-        </button>
-        <button v-if="props.canMoveUp" @click="emit('positionChanged', 'up')">
-          <span class="icon-chevron-up"></span>
-        </button>
-        <button v-if="props.canMoveDown" @click="emit('positionChanged', 'down')">
-          <span class="icon-chevron-down"></span>
-        </button>
-        <button @click="emit('cardRemoved')">x</button>
+        <button @click="emit('cardRemoved')"><span class="icon-trash"></span></button>
       </div>
     </div>
     <hr />
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 152b6ab8..2499e09b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,3 @@
-import "simplebar-vue/dist/simplebar.min.css";
 import "./assets/styles/main.css";
 
 import { createPinia } from "pinia";
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index d46ded80..22a2f5f8 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -1,16 +1,24 @@
-export type KeyLayoutSize = "small" | "medium" | "large";
-export type KeyMoveDirection = "up" | "down";
-
-export type Layout = Array<{ key: string; size: KeyLayoutSize }>;
-
-export interface ReportItem {
+/**
+ * A project item is a single item in the project.
+ *
+ * It's contributed by a user python side.
+ */
+export interface ProjectItem {
   media_type: string;
   value: any;
   updated_at: string;
   created_at: string;
 }
 
-export interface Report {
-  items: { [key: string]: ReportItem };
-  layout: Layout;
+/**
+ * A layout is a list of keys that are visible in a view
+ */
+export type Layout = string[];
+
+/**
+ * A project is a collection of items and views
+ */
+export interface Project {
+  items: { [key: string]: ProjectItem };
+  views: { [key: string]: Layout };
 }
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 461f9b41..22b14b79 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import ReportBuilderView from "./views/ReportBuilderView.vue";
+import ProjectView from "./views/ProjectView.vue";
 
 export enum ROUTE_NAMES {
   REPORT_BUILDER = "report-builder",
@@ -13,7 +13,7 @@ const router = createRouter({
     {
       path: "/",
       name: "report-builder",
-      component: ReportBuilderView,
+      component: ProjectView,
     },
     {
       path: "/components",
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 94a1d0d9..7cc2fc59 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,4 +1,4 @@
-import type { Layout, Report } from "@/models";
+import type { Layout, Project } from "@/models";
 import { useToastsStore } from "@/stores/toasts";
 
 const { protocol, hostname, port: windowPort } = window.location;
@@ -23,9 +23,9 @@ function checkResponseStatus(r: Response, attendedStatusCode: number) {
   }
 }
 
-export async function fetchReport(): Promise<Report | null> {
+export async function fetchProject(): Promise<Project | null> {
   try {
-    const r = await fetch(`${BASE_URL}/items`);
+    const r = await fetch(`${BASE_URL}/project/items`);
     checkResponseStatus(r, 200);
     return await r.json();
   } catch (error) {
@@ -34,11 +34,11 @@ export async function fetchReport(): Promise<Report | null> {
   return null;
 }
 
-export async function putLayout(payload: Layout): Promise<Report | null> {
+export async function putView(view: string, layout: Layout): Promise<Project | null> {
   try {
-    const r = await fetch(`${BASE_URL}/report/layout`, {
+    const r = await fetch(`${BASE_URL}/project/views/${view}`, {
       method: "PUT",
-      body: JSON.stringify(payload),
+      body: JSON.stringify(layout),
       headers: {
         "Content-Type": "application/json",
       },
@@ -51,11 +51,21 @@ export async function putLayout(payload: Layout): Promise<Report | null> {
   return null;
 }
 
-export async function fetchShareableBlob(layout: Layout) {
+export async function deleteView(view: string) {
+  try {
+    const r = await fetch(`${BASE_URL}/project/views/${view}`, {
+      method: "DELETE",
+    });
+    checkResponseStatus(r, 200);
+  } catch (error) {
+    reportError(getErrorMessage(error));
+  }
+}
+
+export async function fetchShareableBlob(view: string) {
   try {
-    const r = await fetch(`${BASE_URL}/report/share`, {
+    const r = await fetch(`${BASE_URL}/project/views/share/${view}`, {
       method: "POST",
-      body: JSON.stringify(layout),
       headers: {
         "Content-Type": "application/json",
       },
diff --git a/frontend/src/share.ts b/frontend/src/share.ts
index bdbb7223..abea6e2e 100644
--- a/frontend/src/share.ts
+++ b/frontend/src/share.ts
@@ -5,14 +5,15 @@ import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "@/ShareApp.vue";
-import { useReportStore } from "@/stores/report";
+import { useProjectStore } from "@/stores/project";
 
-export default async function share() {
+export default async function share(selectedView: string) {
   const app = createApp(App);
   app.use(createPinia());
   app.mount("#app");
 
   const m = JSON.parse(document.getElementById("project-data")?.innerText || "{}");
-  const reportsStore = useReportStore();
-  await reportsStore.setReport(m);
+  const projectStore = useProjectStore();
+  await projectStore.setProject(m);
+  projectStore.currentView = selectedView;
 }
diff --git a/frontend/src/stores/report.ts b/frontend/src/stores/project.ts
similarity index 55%
rename from frontend/src/stores/report.ts
rename to frontend/src/stores/project.ts
index a25c123a..28e7e269 100644
--- a/frontend/src/stores/report.ts
+++ b/frontend/src/stores/project.ts
@@ -1,102 +1,71 @@
 import { defineStore } from "pinia";
 import { ref, shallowRef } from "vue";
 
-import {
-  type KeyLayoutSize,
-  type KeyMoveDirection,
-  type Layout,
-  type Report,
-  type ReportItem,
-} from "@/models";
-import { fetchReport, putLayout } from "@/services/api";
-import { swapItemsInArray } from "@/services/utils";
+import { type Layout, type Project, type ProjectItem } from "@/models";
+import { deleteView as deleteViewApi, fetchProject, putView } from "@/services/api";
 
 export interface TreeNode {
   name: string;
   children: TreeNode[];
 }
 
-export const useReportStore = defineStore("reports", () => {
+export const useProjectStore = defineStore("project", () => {
   // this object is not deeply reactive as it may be very large
-  const items = shallowRef<{ [key: string]: ReportItem } | null>(null);
-  const layout = ref<Layout>([]);
+  const items = shallowRef<{ [key: string]: ProjectItem } | null>(null);
+  const views = ref<{ [key: string]: Layout }>({});
+  const currentView = ref<string | null>(null);
 
   /**
    * Return true if the the given key is in the list of displayed keys, false otherwise.
+   * @param view the view to check
    * @param key the key to look for
+   * @returns true if the key is displayed, false otherwise
    */
-  function isKeyDisplayed(key: string) {
-    const visibleKeys = layout.value.map(({ key: k }) => k);
+  function isKeyDisplayed(view: string, key: string) {
+    const visibleKeys = views.value[view] ?? [];
     return visibleKeys.includes(key);
   }
 
   /**
-   * Add the value of a key to the report.
-   * @param key the key to add to the report
+   * Add the value of a key to the view.
+   * @param view the view to add the key to
+   * @param key the key to add to the view
    */
-  async function displayKey(key: string) {
+  async function displayKey(view: string, key: string) {
     stopBackendPolling();
-    if (!isKeyDisplayed(key)) {
-      layout.value.push({ key, size: "large" });
-      await persistLayout();
+    const realKey = key.replace(" (self)", "");
+    if (!isKeyDisplayed(view, realKey)) {
+      views.value[view].push(realKey);
+      await persistView(view, views.value[view]);
     }
     await startBackendPolling();
   }
 
   /**
-   * Hide the value of a key from the report.
+   * Hide the value of a key from the view.
+   * @param view the view to hide the key from
    * @param key the key to hide
    */
-  async function hideKey(key: string) {
+  async function hideKey(view: string, key: string) {
     stopBackendPolling();
-    if (isKeyDisplayed(key)) {
-      layout.value = layout.value.filter(({ key: k }) => key != k);
-      await persistLayout();
+    if (isKeyDisplayed(view, key)) {
+      const v = views.value[view];
+      views.value[view] = v.filter((k) => k === key);
+      await persistView(view, v);
     }
     await startBackendPolling();
   }
 
-  /**
-   * Change the visual size of the value of a key in the report.
-   * @param key the key which changes
-   * @param size the target size
-   */
-  async function setKeyLayoutSize(key: string, size: KeyLayoutSize) {
-    stopBackendPolling();
-    if (isKeyDisplayed(key)) {
-      const index = layout.value.findIndex(({ key: k }) => key == k);
-      if (index !== -1) {
-        layout.value[index].size = size;
-      }
-      await persistLayout();
-    }
-    await startBackendPolling();
-  }
-
-  /**
-   * Move a displayed key up or down in the list
-   * @param key the key to replace
-   * @param direction up or down
-   */
-  async function moveKey(key: string, direction: KeyMoveDirection) {
-    stopBackendPolling();
-    const offset = direction == "up" ? -1 : 1;
-    const index = layout.value.findIndex(({ key: k }) => key == k);
-    swapItemsInArray(layout.value, index, index + offset);
-    await persistLayout();
-    await startBackendPolling();
-  }
-
   /**
    * Fetch all reports URI
-   * and eventually the detail of the currently selected report
+   * and eventually the detail of the currently selected view
    */
   let _isCanceledCall = false;
   async function fetch() {
     if (!_isCanceledCall) {
-      const r = await fetchReport();
+      const r = await fetchProject();
       if (r) {
-        setReport(r);
+        setProject(r);
       }
     }
   }
@@ -106,7 +75,7 @@ export const useReportStore = defineStore("reports", () => {
   let _stopBackendPolling: Function | null = null;
   async function startBackendPolling() {
     _isCanceledCall = false;
-    fetch();
+    await fetch();
     _stopBackendPolling = () => {}; //await poll(fetch, 1500);
   }
 
@@ -119,24 +88,26 @@ export const useReportStore = defineStore("reports", () => {
   }
 
   /**
-   * Send new layout to backend
+   * Send the view's layout to backend
+   * @param view the view to persist
+   * @param layout the layout to persist
    */
-  async function persistLayout() {
-    if (items.value && layout.value) {
-      const r = await putLayout(layout.value);
+  async function persistView(view: string, layout: Layout) {
+    if (items.value && views.value) {
+      const r = await putView(view, layout);
       if (r) {
-        setReport(r);
+        setProject(r);
       }
     }
   }
 
   /**
-   * Set the current report and populate the layout
+   * Set the current view and populate the layout
    * @param r data received from the backend
    */
-  async function setReport(r: Report) {
+  async function setProject(r: Project) {
     items.value = r.items;
-    layout.value = r.layout;
+    views.value = r.views;
   }
 
   /**
@@ -215,16 +186,58 @@ export const useReportStore = defineStore("reports", () => {
     return tree;
   }
 
+  /**
+   * Create a new view with the given name.
+   * @param name the name of the view to create
+   */
+  async function createView(name: string) {
+    views.value[name] = [];
+    await persistView(name, views.value[name]);
+  }
+
+  /**
+   * Duplicate a view.
+   * @param src the source view to duplicate
+   * @param name the name of the new view
+   */
+  async function duplicateView(src: string, name: string) {
+    views.value[name] = [...views.value[src]];
+    await persistView(name, views.value[name]);
+  }
+
+  /**
+   * Delete a view.
+   * @param name the name of the view to delete
+   */
+  async function deleteView(name: string) {
+    delete views.value[name];
+    await deleteViewApi(name);
+  }
+
+  /**
+   * Rename a view.
+   * @param name the name of the view to rename
+   */
+  async function renameView(name: string, newName: string) {
+    views.value[newName] = views.value[name];
+    delete views.value[name];
+    await deleteView(name);
+    await persistView(newName, views.value[newName]);
+  }
+
   return {
-    layout,
     items,
+    views,
+    currentView,
     displayKey,
     hideKey,
-    setKeyLayoutSize,
     startBackendPolling,
     stopBackendPolling,
-    setReport,
-    moveKey,
+    setProject,
     keysAsTree,
+    createView,
+    duplicateView,
+    deleteView,
+    renameView,
   };
 });
diff --git a/frontend/src/views/ComponentsView.vue b/frontend/src/views/ComponentsView.vue
index 447e5d2e..8c7a3afe 100644
--- a/frontend/src/views/ComponentsView.vue
+++ b/frontend/src/views/ComponentsView.vue
@@ -118,14 +118,18 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
     case "rename":
       item.isUnnamed = true;
       break;
-    case "duplicate":
-      items.value.unshift({ name: "Unnamed", icon: "icon-plot", isUnnamed: true });
+    case "duplicate": {
+      const index = items.value.indexOf(item) ?? 0;
+      items.value.splice(index + 1, 0, { name: "Unnamed", icon: "icon-plot", isUnnamed: true });
       break;
+    }
     case "delete":
       items.value.splice(items.value.indexOf(item), 1);
       break;
   }
 }
+
+const lastSelectedItem = ref<string | null>(null);
 </script>
 
 <template>
@@ -349,6 +353,7 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
           <ul>
             <li v-for="item in items" :key="item.name">{{ item.name }}</li>
           </ul>
+          It also emit an event when an item is selected. Last selected item: {{ lastSelectedItem }}
         </div>
         <div class="editable-list-container">
           <SectionHeader
@@ -365,6 +370,7 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
                 { label: 'delete', emitPayload: 'delete', icon: 'icon-trash' },
               ]"
               @action="onEditableListAction"
+              @select="lastSelectedItem = $event"
             />
           </Simplebar>
         </div>
@@ -384,9 +390,6 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
           <div>icon-info <span class="icon-info"></span></div>
           <div>icon-error <span class="icon-error"></span></div>
           <div>icon-success <span class="icon-success"></span></div>
-          <div>icon-xl <span class="icon-xl"></span></div>
-          <div>icon-sm <span class="icon-sm"></span></div>
-          <div>icon-xs <span class="icon-xs"></span></div>
           <div>icon-search <span class="icon-search"></span></div>
           <div>icon-maximize <span class="icon-maximize"></span></div>
           <div>icon-folder <span class="icon-folder"></span></div>
@@ -394,7 +397,6 @@ function onEditableListAction(action: string, item: EditableListItemModel) {
           <div>icon-text <span class="icon-text"></span></div>
           <div>icon-gift <span class="icon-gift"></span></div>
           <div>icon-pie-chart <span class="icon-pie-chart"></span></div>
-          <div>icon-equal <span class="icon-equal"></span></div>
           <div>icon-chevron-left <span class="icon-chevron-left"></span></div>
           <div>icon-chevron-down <span class="icon-chevron-down"></span></div>
           <div>icon-chevron-right <span class="icon-chevron-right"></span></div>
diff --git a/frontend/src/views/ReportBuilderView.vue b/frontend/src/views/ProjectView.vue
similarity index 60%
rename from frontend/src/views/ReportBuilderView.vue
rename to frontend/src/views/ProjectView.vue
index 09e70f41..1e13acc9 100644
--- a/frontend/src/views/ReportBuilderView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -1,29 +1,30 @@
 <script setup lang="ts">
+import { format } from "date-fns";
 import Simplebar from "simplebar-vue";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
-import ReportCanvas from "@/components/ReportCanvas.vue";
+import EditableList, { type EditableListItemModel } from "@/components/EditableList.vue";
+import ProjectViewCanvas from "@/components/ProjectViewCanvas.vue";
 import SectionHeader from "@/components/SectionHeader.vue";
 import SimpleButton from "@/components/SimpleButton.vue";
 import TreeAccordion from "@/components/TreeAccordion.vue";
 import { fetchShareableBlob } from "@/services/api";
 import { saveBlob } from "@/services/utils";
-import { useReportStore } from "@/stores/report";
+import { useProjectStore } from "@/stores/project";
 
-const reportStore = useReportStore();
+const projectStore = useProjectStore();
 const isDropIndicatorVisible = ref(false);
 const editor = ref<HTMLDivElement>();
 const isInFocusMode = ref(false);
+const views = ref<EditableListItemModel[]>([]);
 
 async function onShareReport() {
-  const shareable = await fetchShareableBlob(reportStore.layout);
-  if (shareable) {
-    let name = prompt("Enter a name for the report");
-    if (name) {
-      if (!name.toLowerCase().endsWith(".html")) {
-        name += ".html";
-      }
-      saveBlob(shareable, name);
+  const currentView = projectStore.currentView;
+  if (currentView) {
+    const shareable = await fetchShareableBlob(currentView);
+    if (shareable) {
+      const formattedDate = format(new Date(), "yyyy-MM-dd-HH-mm");
+      saveBlob(shareable, `${formattedDate}-${currentView}.html`);
     }
   }
 }
@@ -36,12 +37,16 @@ function onItemDrop(event: DragEvent) {
   isDropIndicatorVisible.value = false;
   if (event.dataTransfer) {
     const key = event.dataTransfer.getData("key");
-    reportStore.displayKey(key);
+    if (projectStore.currentView) {
+      projectStore.displayKey(projectStore.currentView, key);
+    }
   }
 }
 
 function onDragEnter() {
-  isDropIndicatorVisible.value = true;
+  if (projectStore.currentView) {
+    isDropIndicatorVisible.value = true;
+  }
 }
 
 function onDragLeave(event: DragEvent) {
@@ -51,23 +56,87 @@ function onDragLeave(event: DragEvent) {
 }
 
 function onItemSelected(key: string) {
-  reportStore.displayKey(key);
+  if (projectStore.currentView) {
+    projectStore.displayKey(projectStore.currentView, key);
+  }
 }
 
-onMounted(() => {
-  reportStore.startBackendPolling();
-});
+function onViewSelected(view: string) {
+  const item = views.value.find((item) => item.name === view);
+  if (item && !item.isUnnamed) {
+    projectStore.currentView = view;
+  }
+}
 
-onBeforeUnmount(() => reportStore.stopBackendPolling());
+async function onViewsListAction(action: string, item: EditableListItemModel) {
+  switch (action) {
+    case "rename": {
+      item.isUnnamed = true;
+      // TODO: wait for end of namina ge rename
+      // await projectStore.renameView(item.name, item.name);
+      break;
+    }
+    case "duplicate": {
+      const index = views.value.indexOf(item) ?? 0;
+      const newName = `${item.name} - copy`;
+      views.value.splice(index + 1, 0, {
+        name: newName,
+        icon: "icon-new-document",
+        isUnnamed: true,
+      });
+      await projectStore.duplicateView(item.name, newName);
+      break;
+    }
+    case "delete": {
+      views.value.splice(views.value.indexOf(item), 1);
+      await projectStore.deleteView(item.name);
+      break;
+    }
+  }
+}
+
+function onAddView() {
+  views.value.push({ name: "New view", icon: "icon-new-document", isUnnamed: true });
+}
+
+onMounted(async () => {
+  await projectStore.startBackendPolling();
+  views.value = Object.keys(projectStore.views).map((key) => ({
+    name: key,
+    icon: "icon-new-document",
+    isUnnamed: false,
+  }));
+});
+onBeforeUnmount(() => {
+  projectStore.stopBackendPolling();
+});
 </script>
 
 <template>
   <main>
-    <article v-if="reportStore.items !== null">
-      <div class="items" v-if="reportStore.items && !isInFocusMode">
+    <article v-if="projectStore.items !== null">
+      <div class="items" v-if="projectStore.items && !isInFocusMode">
+        <SectionHeader
+          title="Views"
+          icon="icon-recent-document"
+          action-icon="icon-plus-circle"
+          @action="onAddView"
+        />
+        <Simplebar class="views-list">
+          <EditableList
+            v-model:items="views"
+            :actions="[
+              { label: 'rename', emitPayload: 'rename', icon: 'icon-edit' },
+              { label: 'duplicate', emitPayload: 'duplicate', icon: 'icon-copy' },
+              { label: 'delete', emitPayload: 'delete', icon: 'icon-trash' },
+            ]"
+            @action="onViewsListAction"
+            @select="onViewSelected"
+          />
+        </Simplebar>
         <SectionHeader title="Elements" icon="icon-pie-chart" />
         <Simplebar class="key-list">
-          <TreeAccordion :nodes="reportStore.keysAsTree()" @item-selected="onItemSelected" />
+          <TreeAccordion :nodes="projectStore.keysAsTree()" @item-selected="onItemSelected" />
         </Simplebar>
       </div>
 
@@ -80,20 +149,28 @@ onBeforeUnmount(() => reportStore.stopBackendPolling());
         @dragleave="onDragLeave"
       >
         <div class="editor-header">
-          <SimpleButton icon="icon-focus" @click="onFocusMode" />
-          <h1>Report</h1>
+          <SimpleButton icon="icon-maximize" @click="onFocusMode" />
+          <h1>{{ projectStore.currentView }}</h1>
           <SimpleButton label="Share report" @click="onShareReport" :is-primary="true" />
         </div>
         <div class="drop-indicator" :class="{ visible: isDropIndicatorVisible }"></div>
         <Transition name="fade">
           <div
-            v-if="!isDropIndicatorVisible && reportStore.layout.length === 0"
+            v-if="
+              projectStore.currentView === null ||
+              projectStore.views[projectStore.currentView] === undefined ||
+              projectStore.views[projectStore.currentView]?.length === 0
+            "
             class="placeholder"
           >
-            <div class="wrapper">No item selected yet, start by dragging one element.</div>
+            <div class="wrapper" v-if="projectStore.currentView === null">No view selected.</div>
+            <div class="wrapper" v-else>
+              No elements in this view, start by dragging or double clicking an element from the
+              tree on the left.
+            </div>
           </div>
           <Simplebar class="canvas-wrapper" v-else>
-            <ReportCanvas />
+            <ProjectViewCanvas />
           </Simplebar>
         </Transition>
       </div>
@@ -145,7 +222,14 @@ main {
       flex-shrink: 0;
       border-right: solid 1px var(--border-color-normal);
 
+      & .views-list {
+        z-index: 2;
+        max-height: 20vh;
+        background-color: var(--background-color-elevated-high);
+      }
+
       & .key-list {
+        z-index: 1;
         height: 0;
         flex-grow: 1;
         padding: var(--spacing-padding-large);
diff --git a/frontend/tests/services/api.spec.ts b/frontend/tests/services/api.spec.ts
index b816a702..db7b17b8 100644
--- a/frontend/tests/services/api.spec.ts
+++ b/frontend/tests/services/api.spec.ts
@@ -2,8 +2,7 @@ import { createTestingPinia } from "@pinia/testing";
 import { setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import type { KeyLayoutSize } from "@/models";
-import { fetchReport, putLayout } from "@/services/api";
+import { deleteView, fetchProject, fetchShareableBlob, putView } from "@/services/api";
 import { useToastsStore } from "@/stores/toasts";
 import { createFetchResponse, mockedFetch } from "../test.utils";
 
@@ -16,58 +15,29 @@ describe("API Service", () => {
     vi.restoreAllMocks();
   });
 
-  it("Can fetch the current project from the server", async () => {
-    const p = {
-      layout: [
-        { key: "Any", size: "small" },
-        { key: "Array", size: "medium" },
-      ],
-      items: {
-        Any: { item_type: "json", media_type: null, serialized: { k1: "v1" } },
-        Array: {
-          item_type: "json",
-          media_type: null,
-          serialized: [1, 2, 3],
-        },
-      },
-    };
-    mockedFetch.mockResolvedValue(createFetchResponse(p));
-    const r = await fetchReport();
-    expect(Object.keys(r!).length).toBe(2);
-  });
-
   it("Can report errors.", async () => {
     const error = new Error("Something went wrong");
     mockedFetch.mockImplementation(() => {
       throw error;
     });
 
-    expect(await fetchReport()).toBeNull();
+    expect(await fetchProject()).toBeNull();
     const toastsStore = useToastsStore();
     expect(toastsStore.toasts.length).toBe(1);
   });
 
-  it("Can put a layout", async () => {
-    const layoutPayload = [
-      { key: "Any", size: "small" as KeyLayoutSize },
-      { key: "Array", size: "medium" as KeyLayoutSize },
-    ];
-    const reportPayload = {
-      layout: [
-        { key: "Any", size: "small" },
-        { key: "Array", size: "medium" },
-      ],
-      items: {
-        Any: { item_type: "json", media_type: null, serialized: { k1: "v1" } },
-        Array: {
-          item_type: "json",
-          media_type: null,
-          serialized: [1, 2, 3],
-        },
-      },
-    };
-    mockedFetch.mockResolvedValue(createFetchResponse(reportPayload, 201));
-    const r = await putLayout(layoutPayload);
-    expect(r).toEqual(reportPayload);
+  it("Can call endpoints", async () => {
+    mockedFetch.mockResolvedValue(createFetchResponse({}));
+    const project = await fetchProject();
+    expect(project).toBeDefined();
+
+    const view = await putView("test", []);
+    expect(view).toBeDefined();
+
+    const del = await deleteView("test");
+    expect(del).toBeUndefined();
+
+    const share = await fetchShareableBlob("test");
+    expect(share).toBeDefined();
   });
 });
diff --git a/frontend/tests/stores/project.spec.ts b/frontend/tests/stores/project.spec.ts
new file mode 100644
index 00000000..42f217d4
--- /dev/null
+++ b/frontend/tests/stores/project.spec.ts
@@ -0,0 +1,74 @@
+import type { ProjectItem } from "@/models";
+import { fetchProject } from "@/services/api";
+import { useProjectStore } from "@/stores/project";
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/services/api", () => {
+  const fetchProject = vi.fn().mockImplementation(() => {});
+  return { fetchProject };
+});
+
+describe("Project store", () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false, createSpy: vi.fn }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("Can poll the backend.", async () => {
+    const projectStore = useProjectStore();
+
+    await projectStore.startBackendPolling();
+    expect(fetchProject).toBeCalled();
+    projectStore.stopBackendPolling();
+  });
+
+  it("Can transform keys to a tree", async () => {
+    const projectStore = useProjectStore();
+
+    const epoch = new Date("1970-01-01T00:00:00Z").toISOString();
+    function makeFakeReportItem() {
+      return {
+        media_type: "text/markdown",
+        value: "",
+        updated_at: epoch,
+        created_at: epoch,
+      } as ProjectItem;
+    }
+    const project = {
+      items: {
+        a: makeFakeReportItem(),
+        "a/b": makeFakeReportItem(),
+        "a/b/d": makeFakeReportItem(),
+        "a/b/e": makeFakeReportItem(),
+        "a/b/f/g": makeFakeReportItem(),
+      },
+      views: {},
+    };
+    await projectStore.setProject(project);
+    expect(projectStore.keysAsTree()).toEqual([
+      {
+        name: "a",
+        children: [
+          { name: "a (self)", children: [] },
+          {
+            name: "a/b",
+            children: [
+              { name: "a/b (self)", children: [] },
+              { name: "a/b/d", children: [] },
+              { name: "a/b/e", children: [] },
+              {
+                name: "a/b/f",
+                children: [{ name: "a/b/f/g", children: [] }],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/frontend/tests/stores/reports.spec.ts b/frontend/tests/stores/reports.spec.ts
deleted file mode 100644
index 59077537..00000000
--- a/frontend/tests/stores/reports.spec.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { ReportItem } from "@/models";
-import { fetchReport } from "@/services/api";
-import { useReportStore } from "@/stores/report";
-import { createTestingPinia } from "@pinia/testing";
-import { setActivePinia } from "pinia";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-vi.mock("@/services/api", () => {
-  const fetchReport = vi.fn().mockImplementation(() => {});
-  return { fetchReport };
-});
-
-function makeFakeReport() {
-  const epoch = new Date("1970-01-01T00:00:00Z").toISOString();
-  const i1 = {
-    media_type: "text/markdown",
-    value: "",
-    updated_at: epoch,
-    created_at: epoch,
-  } as ReportItem;
-  const i2 = {
-    media_type: "text/markdown",
-    value: "",
-    updated_at: epoch,
-    created_at: epoch,
-  } as ReportItem;
-  return {
-    layout: [],
-    items: {
-      Any: i1,
-      Array: i2,
-    },
-  };
-}
-describe("Reports store", () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false, createSpy: vi.fn }));
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("Can create an empty layout when setting a DataStore with no layout.", async () => {
-    const reportStore = useReportStore();
-
-    await reportStore.setReport(makeFakeReport());
-    expect(reportStore.layout).toHaveLength(0);
-  });
-
-  it("Can poll the backend.", async () => {
-    const reportStore = useReportStore();
-
-    await reportStore.startBackendPolling();
-    expect(fetchReport).toBeCalled();
-    reportStore.stopBackendPolling();
-  });
-
-  it("Can move keys in layout.", async () => {
-    const reportStore = useReportStore();
-
-    await reportStore.setReport(makeFakeReport());
-    reportStore.displayKey("Any");
-    reportStore.displayKey("Array");
-    reportStore.setKeyLayoutSize("Any", "large");
-    reportStore.setKeyLayoutSize("Array", "large");
-    expect(reportStore.layout).toEqual([
-      { key: "Any", size: "large" },
-      { key: "Array", size: "large" },
-    ]);
-    reportStore.moveKey("Array", "up");
-    expect(reportStore.layout).toEqual([
-      { key: "Array", size: "large" },
-      { key: "Any", size: "large" },
-    ]);
-    reportStore.moveKey("Array", "down");
-    expect(reportStore.layout).toEqual([
-      { key: "Any", size: "large" },
-      { key: "Array", size: "large" },
-    ]);
-  });
-
-  it("Can transform keys to a tree", async () => {
-    const reportStore = useReportStore();
-
-    const epoch = new Date("1970-01-01T00:00:00Z").toISOString();
-    function makeFakeReportItem() {
-      return {
-        media_type: "text/markdown",
-        value: "",
-        updated_at: epoch,
-        created_at: epoch,
-      } as ReportItem;
-    }
-    const report = {
-      layout: [],
-      items: {
-        a: makeFakeReportItem(),
-        "a/b": makeFakeReportItem(),
-        "a/b/d": makeFakeReportItem(),
-        "a/b/e": makeFakeReportItem(),
-        "a/b/f/g": makeFakeReportItem(),
-      },
-    };
-    await reportStore.setReport(report);
-    expect(reportStore.keysAsTree()).toEqual([
-      {
-        name: "a",
-        children: [
-          { name: "a (self)", children: [] },
-          {
-            name: "a/b",
-            children: [
-              { name: "a/b (self)", children: [] },
-              { name: "a/b/d", children: [] },
-              { name: "a/b/e", children: [] },
-              {
-                name: "a/b/f",
-                children: [
-                  { name: "a/b/f/g", children: [] },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-  });
-});
diff --git a/frontend/tests/views/ReportBuilderView.spec.ts b/frontend/tests/views/ReportBuilderView.spec.ts
index 2205fa1d..0735646c 100644
--- a/frontend/tests/views/ReportBuilderView.spec.ts
+++ b/frontend/tests/views/ReportBuilderView.spec.ts
@@ -5,7 +5,7 @@ import { createApp } from "vue";
 import { useRoute } from "vue-router";
 
 import { ROUTE_NAMES } from "@/router";
-import ReportBuilderView from "@/views/ReportBuilderView.vue";
+import ReportBuilderView from "@/views/ProjectView.vue";
 import { mountSuspense } from "../test.utils";
 
 vi.mock("@/services/api", () => {
diff --git a/src/skore/ui/app.py b/src/skore/ui/app.py
index 995342f8..e0477ebd 100644
--- a/src/skore/ui/app.py
+++ b/src/skore/ui/app.py
@@ -6,7 +6,7 @@
 
 from skore.project import Project, load
 from skore.ui.dependencies import get_static_path
-from skore.ui.report import router as report_router
+from skore.ui.project_routes import router as project_router
 
 
 def create_app(project: Project | None = None) -> FastAPI:
@@ -31,7 +31,7 @@ def create_app(project: Project | None = None) -> FastAPI:
     # Include routers from bottom to top.
     # Include routers always after all routes have been defined/imported.
     router = APIRouter(prefix="/api")
-    router.include_router(report_router)
+    router.include_router(project_router)
 
     # Include all sub routers.
     app.include_router(router)
diff --git a/src/skore/ui/report.py b/src/skore/ui/project_routes.py
similarity index 90%
rename from src/skore/ui/report.py
rename to src/skore/ui/project_routes.py
index bae34b1c..39db4e5e 100644
--- a/src/skore/ui/report.py
+++ b/src/skore/ui/project_routes.py
@@ -20,7 +20,7 @@
 
 from .dependencies import get_static_path, get_templates
 
-router = APIRouter()
+router = APIRouter(prefix="/project")
 
 
 @dataclass
@@ -33,25 +33,18 @@ class SerializedItem:
     created_at: str
 
 
-@dataclass
-class SerializedView:
-    """Serialized view."""
-
-    layout: Layout
-
-
 @dataclass
 class SerializedProject:
     """Serialized project, to be sent to the frontend."""
 
     items: dict[str, SerializedItem]
-    views: dict[str, SerializedView]
+    views: dict[str, Layout]
 
 
 def __serialize_project(project: Project) -> SerializedProject:
     views = {}
     for key in project.list_view_keys():
-        views[key] = project.get_view(key)
+        views[key] = project.get_view(key).layout
 
     items = {}
     for key in project.list_item_keys():
@@ -99,10 +92,10 @@ async def get_items(request: Request):
     return __serialize_project(project)
 
 
-@router.post("/report/share/{view_key:path}")
+@router.post("/views/share/{key:path}")
 async def share_store(
     request: Request,
-    view_key: str,
+    key: str,
     templates: Annotated[Jinja2Templates, Depends(get_templates)],
     static_path: Annotated[Path, Depends(get_static_path)],
 ):
@@ -110,7 +103,7 @@ async def share_store(
     project = request.app.state.project
 
     try:
-        view = project.get_view(view_key)
+        project.get_view(key)
     except KeyError:
         raise HTTPException(
             status_code=status.HTTP_404_NOT_FOUND, detail="View not found"
@@ -127,7 +120,7 @@ def read_asset_content(filename: str):
     # Fill the Jinja context
     context = {
         "project": asdict(__serialize_project(project)),
-        "layout": view.layout,
+        "selected_view": key,
         "script": script_content,
         "styles": styles_content,
     }
@@ -138,7 +131,7 @@ def read_asset_content(filename: str):
     )
 
 
-@router.put("/report/view/{key:path}", status_code=201)
+@router.put("/views/{key:path}", status_code=status.HTTP_201_CREATED)
 async def put_view(request: Request, key: str, layout: Layout):
     """Set the layout of the view corresponding to `key`.
 
@@ -152,7 +145,7 @@ async def put_view(request: Request, key: str, layout: Layout):
     return __serialize_project(project)
 
 
-@router.delete("/report/view/{key:path}", status_code=status.HTTP_200_OK)
+@router.delete("/views/{key:path}", status_code=status.HTTP_202_ACCEPTED)
 async def delete_view(request: Request, key: str):
     """Delete the view corresponding to `key`."""
     project: Project = request.app.state.project
diff --git a/src/skore/ui/templates/share.html.jinja b/src/skore/ui/templates/share.html.jinja
index eebcfa8d..5180f0ec 100644
--- a/src/skore/ui/templates/share.html.jinja
+++ b/src/skore/ui/templates/share.html.jinja
@@ -25,7 +25,7 @@
 <body>
   <div id="app"></div>
   <script>
-    skore({{ layout|tojson }});
+    skore("{{ selected_view }}");
   </script>
 </body>
 
diff --git a/tests/integration/ui/test_ui.py b/tests/integration/ui/test_ui.py
index 8a38ba99..2fdc9076 100644
--- a/tests/integration/ui/test_ui.py
+++ b/tests/integration/ui/test_ui.py
@@ -35,7 +35,7 @@ def test_frontend_index(client):
 
 
 def test_get_items(client, project):
-    response = client.get("/api/items")
+    response = client.get("/api/project/items")
 
     assert response.status_code == 200
     assert response.json() == {"views": {}, "items": {}}
@@ -43,7 +43,7 @@ def test_get_items(client, project):
     project.put("test", "test")
     item = project.get_item("test")
 
-    response = client.get("/api/items")
+    response = client.get("/api/project/items")
     assert response.status_code == 200
     assert response.json() == {
         "views": {},
@@ -61,27 +61,27 @@ def test_get_items(client, project):
 def test_share_view(client, project):
     project.put_view("hello", View(layout=[]))
 
-    response = client.post("/api/report/share/hello")
+    response = client.post("/api/project/views/share/hello")
     assert response.status_code == 200
     assert b"<!DOCTYPE html>" in response.content
 
 
 def test_share_view_not_found(client, project):
-    response = client.post("/api/report/share/hello")
+    response = client.post("/api/project/views/share/hello")
     assert response.status_code == 404
 
 
 def test_put_view_layout(client):
-    response = client.put("/api/report/view/hello", json=["test"])
+    response = client.put("/api/project/views/hello", json=["test"])
     assert response.status_code == 201
 
 
 def test_delete_view(client, project):
     project.put_view("hello", View(layout=[]))
-    response = client.delete("/api/report/view/hello")
-    assert response.status_code == 200
+    response = client.delete("/api/project/views/hello")
+    assert response.status_code == 202
 
 
 def test_delete_view_missing(client):
-    response = client.delete("/api/report/view/hello")
+    response = client.delete("/api/project/views/hello")
     assert response.status_code == 404