mob next [ci-skip] [ci skip] [skip ci]

lastFile:src/skore/api/routes/stores.py

frontend/src/components/DataStoreCanvas.vue

@@ -7,31 +7,29 @@ import DataStoreCard from "@/components/DataStoreCard.vue";
 import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
 import ImageWidget from "@/components/ImageWidget.vue";
 import MarkdownWidget from "@/components/MarkdownWidget.vue";
-import VegaWidget from "@/components/VegaWidget.vue";
-import type { KeyLayoutSize, KeyMoveDirection, ReportItem } from "@/models";
-import { useReportsStore } from "@/stores/reports";
-import { formatDistance } from "date-fns";
+import type { KeyLayoutSize, KeyMoveDirection } from "@/models";
+import { useReportStore } from "@/stores/reports";
 
-const reportsStore = useReportsStore();
-const items = computed(() => {
-  const report = reportsStore.report;
-  const layout = reportsStore.layout;
+const reportStore = useReportStore();
+// const items = computed(() => {
+//   const report = reportsStore.report;
+//   const layout = reportsStore.layout;
 
-  return layout.map(({ key, size }) => {
-    const now = new Date();
-    const item: ReportItem = report?.[key];
-    const r: any = {
-      key,
-      size,
-      data: item?.serialized,
-      type: item?.item_type,
-    };
-    if (item?.metadata?.created_at) {
-      r.updatedAt = formatDistance(item?.metadata?.updated_at, now, { addSuffix: true });
-    }
-    return r;
-  });
-});
+//   return layout.map(({ key, size }) => {
+//     const now = new Date();
+//     const item: ReportItem = report?.[key];
+//     const r: any = {
+//       key,
+//       size,
+//       data: item?.serialized,
+//       type: item?.item_type,
+//     };
+//     if (item?.metadata?.created_at) {
+//       r.updatedAt = formatDistance(item?.metadata?.updated_at, now, { addSuffix: true });
+//     }
+//     return r;
+//   });
+// });
 
 function onLayoutChange(key: string, size: KeyLayoutSize) {
   reportsStore.setKeyLayoutSize(key, size);
@@ -56,23 +54,29 @@ const props = defineProps({
 <template>
   <div class="canvas">
     <DataStoreCard
-      v-for="({ key, size, data, type, updatedAt }, index) in items"
+      v-for="({ item_type, media_type, serialized }, key) in reportStore.report"
       :key="key"
       :title="key"
-      :subtitle="`Updated ${updatedAt}`"
-      :class="size"
+      subtitle="FIXME"
+      :class="'FIXME'"
       :showButtons="props.showCardButtons"
-      :can-move-up="index > 0"
-      :can-move-down="index < items.length - 1"
+      :can-move-up="true"
+      :can-move-down="true"
       class="canvas-element"
       @layout-changed="onLayoutChange(key, $event)"
       @position-changed="onPositionChanged(key, $event)"
       @card-removed="onCardRemoved(key)"
     >
-      <VegaWidget v-if="type === 'vega'" :spec="data" />
-      <DataFrameWidget v-if="type === 'dataframe'" :columns="data.columns" :data="data.data" />
+      <DataFrameWidget
+        v-if="item_type === 'pandas_dataframe'"
+        :columns="serialized.columns"
+        :data="serialized.data"
+      />
       <ImageWidget
-        v-if="type === 'image'"
+        v-if="
+          item_type === 'media' &&
+          ['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(media_type)
+        "
         :mime-type="data['mime-type']"
         :base64-src="data.data"
         :alt="key"

frontend/src/components/DataStoreKey.vue

@@ -2,11 +2,11 @@
 import { computed, ref } from "vue";
 
 import type { IPayloadItemMetadata } from "@/models";
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 import { formatDistance } from "date-fns";
 
 const props = defineProps<{ itemKey: string; metadata?: IPayloadItemMetadata }>();
-const reportsStore = useReportsStore();
+const reportsStore = useReportStore();
 const isDraggable = ref(false);
 
 function addKey() {

frontend/src/components/DataStoreKeyList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import DataStoreKey from "@/components/DataStoreKey.vue";
 
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 
-const reportsStore = useReportsStore();
+const reportsStore = useReportStore();
 const props = defineProps<{ icon: string; title: string; keys: string[] }>();
 </script>
 

frontend/src/components/FileTreeItem.vue

@@ -5,11 +5,11 @@ import { useRouter } from "vue-router";
 import { type FileTreeNode } from "@/components/FileTree.vue";
 import { ROUTE_NAMES } from "@/router";
 import { remap, sha1 } from "@/services/utils";
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 
 const router = useRouter();
 const props = defineProps<FileTreeNode>();
-const reportsStore = useReportsStore();
+const reportsStore = useReportStore();
 
 const randomColor = ref("");
 const hasChildren = computed(() => props.children?.length);

frontend/src/share.ts

@@ -5,14 +5,14 @@ import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "@/ShareApp.vue";
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 
 export default function share() {
   const app = createApp(App);
   app.use(createPinia());
   app.mount("#app");
 
   const m = JSON.parse(document.getElementById("skore-data")?.innerText || "{}");
-  const reportsStore = useReportsStore();
+  const reportsStore = useReportStore();
   reportsStore.setReport(m);
 }

frontend/src/stores/reports.ts

@@ -5,7 +5,7 @@ import { type KeyLayoutSize, type KeyMoveDirection, type Layout, type Report } f
 import { fetchReport } from "@/services/api";
 import { poll, swapItemsInArray } from "@/services/utils";
 
-export const useReportsStore = defineStore("reports", () => {
+export const useReportStore = defineStore("reports", () => {
   // this object is not deeply reactive as it may be very large
   const report = shallowRef<Report | null>(null);
   const layout = ref<Layout>([]);

frontend/src/views/ReportBuilderView.vue

@@ -6,9 +6,9 @@ import DataStoreCanvas from "@/components/DataStoreCanvas.vue";
 import DataStoreKeyList from "@/components/DataStoreKeyList.vue";
 import SectionHeader from "@/components/SectionHeader.vue";
 import SimpleButton from "@/components/SimpleButton.vue";
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 
-const reportStore = useReportsStore();
+const reportStore = useReportStore();
 const isDropIndicatorVisible = ref(false);
 const editor = ref<HTMLDivElement>();
 const isInFocusMode = ref(false);

frontend/tests/stores/reports.spec.ts

@@ -1,6 +1,6 @@
 import { type ItemType, type KeyLayoutSize } from "@/models";
 import { fetchAllManderUris, fetchMander, putLayout } from "@/services/api";
-import { useReportsStore } from "@/stores/reports";
+import { useReportStore } from "@/stores/reports";
 import { createTestingPinia } from "@pinia/testing";
 import { setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -50,7 +50,7 @@ describe("Reports store", () => {
 
   it("Can create an empty layout when setting a DataStore with no layout.", () => {
     const ds = makeDataStore(uri, [...infoKeys, ...plotKeys]);
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     reportsStore.setSelectedReportIfDifferent(ds);
     expect(reportsStore.selectedReport?.uri).toEqual(uri);
@@ -60,15 +60,15 @@ describe("Reports store", () => {
   it("Can create layout item for existing key.", () => {
     const layoutItem = { key: "boolean", size: "large" as KeyLayoutSize };
     const ds = makeDataStore(uri, [...infoKeys, ...plotKeys], [layoutItem]);
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     reportsStore.setSelectedReportIfDifferent(ds);
     expect(reportsStore.layout).toContainEqual(layoutItem);
   });
 
   it("Can add some layout to an existing key.", () => {
     const ds = makeDataStore(uri, [...infoKeys, ...plotKeys]);
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     reportsStore.setSelectedReportIfDifferent(ds);
     reportsStore.displayKey("boolean");
@@ -82,7 +82,7 @@ describe("Reports store", () => {
   });
 
   it("Can poll the backend.", async () => {
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     reportsStore.selectedReportUri = uri;
     await reportsStore.startBackendPolling();
@@ -93,7 +93,7 @@ describe("Reports store", () => {
 
   it("Can move keys in layout.", () => {
     const ds = makeDataStore(uri, [...infoKeys, ...plotKeys]);
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     reportsStore.setSelectedReportIfDifferent(ds);
     reportsStore.displayKey("boolean");
@@ -117,7 +117,7 @@ describe("Reports store", () => {
   });
 
   it("Can persist layout.", () => {
-    const reportsStore = useReportsStore();
+    const reportsStore = useReportStore();
 
     const ds = makeDataStore(
       uri,

src/skore/api/routes/stores.py

@@ -4,8 +4,6 @@
 
 from fastapi import APIRouter, Request
 
-from skore.project import load
-
 SKORES_ROUTER = APIRouter(prefix="/skores", deprecated=True)
 STORES_ROUTER = APIRouter(prefix="/stores")
 

src/skore/dashboard/app.py

@@ -16,7 +16,7 @@ def create_dashboard_app(project: Project | None = None) -> FastAPI:
         directory.mkdir(exist_ok=True)
 
         filesystem = FileSystem(directory=directory)
-        project = Project(FileSystem(directory=()))
+        project = Project(filesystem)
 
     app = create_api_app(project=project)
 

src/skore/project.py

@@ -20,6 +20,16 @@ class ItemType(StrEnum):
     MEDIA = auto()
 
 
+# attensssion parlezen à thomas experience déguelasse
+# s.put_item(
+#     "HTML",
+#     Item(
+#         serialized=markup,
+#         raw=markup,
+#         media_type="text/html",
+#         item_type=ItemType.MEDIA,
+#     ),
+# )
 @dataclass(frozen=True)
 class Item:
     """An item is a value that is stored in the project."""