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

lastFile:frontend/src/components/DataStoreKeyList.vue

frontend/src/components/DataStoreCanvas.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
-import CrossValidationResultsWidget from "@/components/CrossValidationResultsWidget.vue";
 import DataFrameWidget from "@/components/DataFrameWidget.vue";
 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 type { KeyLayoutSize, KeyMoveDirection } from "@/models";
-import { useReportStore } from "@/stores/useReportStore";
+import { useReportStore } from "@/stores/report";
 
 const reportStore = useReportStore();
 // const items = computed(() => {
@@ -58,11 +55,10 @@ const props = defineProps({
       :key="key"
       :title="key.toString()"
       subtitle="FIXME"
-      :class="'FIXME'"
       :showButtons="props.showCardButtons"
       :can-move-up="true"
       :can-move-down="true"
-      class="canvas-element"
+      class="canvas-element large"
       @layout-changed="onLayoutChange(key.toString(), $event)"
       @position-changed="onPositionChanged(key.toString(), $event)"
       @card-removed="onCardRemoved(key.toString())"
@@ -74,41 +70,22 @@ const props = defineProps({
       />
       <ImageWidget
         v-if="
-          item_type === 'media' && media_type &&
+          item_type === 'media' &&
+          media_type &&
           ['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(media_type)
         "
         :mime-type="media_type"
         :base64-src="serialized"
         :alt="key.toString()"
       />
-      <ImageWidget
-        v-if="type === 'matplotlib_figure'"
-        mime-type="image/svg+xml"
-        :base64-src="data"
-        :alt="key.toString()"
-      />
-      <MarkdownWidget
-        v-if="
-          [
-            'boolean',
-            'integer',
-            'number',
-            'string',
-            'any',
-            'array',
-            'date',
-            'datetime',
-            'markdown',
-            'numpy_array',
-          ].includes(type!)
-        "
-        :source="data"
+      <MarkdownWidget v-if="['json', 'numpy_array'].includes(item_type)" :source="serialized" />
+      <HtmlSnippetWidget
+        v-if="'media' === item_type && media_type === 'text/html'"
+        :src="serialized"
       />
-      <HtmlSnippetWidget v-if="['html', 'sklearn_model'].includes(type!)" :src="data" />
-      <CrossValidationResultsWidget
-        v-if="type === 'cv_results'"
-        :roc_curve_spec="data.roc_curve_spec"
-        :cv_results_table="data.cv_results_table"
+      <HtmlSnippetWidget
+        v-if="'sklearn_base_estimator' === item_type && media_type === 'text/html'"
+        :src="serialized.html"
       />
     </DataStoreCard>
   </div>

frontend/src/components/DataStoreKey.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import type { IPayloadItemMetadata } from "@/models";
-import { useReportStore } from "@/stores/useReportStore";
+import { type ReportItemMetadata } from "@/models";
+import { useReportStore } from "@/stores/report";
 import { formatDistance } from "date-fns";
 
-const props = defineProps<{ itemKey: string; metadata?: IPayloadItemMetadata }>();
-const reportsStore = useReportStore();
+const props = defineProps<{ itemKey: string; metadata?: ReportItemMetadata }>();
+const reportStore = useReportStore();
 const isDraggable = ref(false);
 
 function addKey() {
-  reportsStore.displayKey(props.itemKey);
+  reportStore.displayKey(props.itemKey);
 }
 
 function onDragStart(event: DragEvent) {

frontend/src/components/DataStoreKeyList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DataStoreKey from "@/components/DataStoreKey.vue";
 
-import { useReportStore } from "@/stores/useReportStore";
+import { useReportStore } from "@/stores/report";
 
 const reportsStore = useReportStore();
 const props = defineProps<{ icon: string; title: string; keys: string[] }>();
@@ -11,12 +11,7 @@ const props = defineProps<{ icon: string; title: string; keys: string[] }>();
   <div class="data-store-list-item">
     <h2><span :class="props.icon"></span>{{ props.title }}</h2>
     <div class="keys">
-      <DataStoreKey
-        v-for="key in props.keys"
-        :key="key"
-        :item-key="key"
-        metadata="FIXME"
-      />
+      <DataStoreKey v-for="key in props.keys" :key="key" :item-key="key" />
     </div>
   </div>
 </template>

frontend/src/models.ts

@@ -9,4 +9,7 @@ export interface ReportItem {
   serialized: any;
 }
 
-export type Report = { [key: string]: ReportItem };
+export interface ReportItemMetadata {
+  created_at: Date;
+  updated_at: Date;
+}

frontend/src/services/api.ts

@@ -1,4 +1,4 @@
-import { type Report } from "@/models";
+import type { ReportItem } from "@/models";
 
 const { protocol, hostname, port: windowPort } = window.location;
 // In the general case we expect the webapp to run at the same port as the API
@@ -14,7 +14,7 @@ function reportError(message: string) {
   console.error(message);
 }
 
-export async function fetchReport(): Promise<Report | null> {
+export async function fetchReport(): Promise<{ [key: string]: ReportItem } | null> {
   try {
     const r = await fetch(`${BASE_URL}/skores/`);
     if (r.status == 200) {

frontend/src/share.ts

@@ -5,7 +5,7 @@ import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "@/ShareApp.vue";
-import { useReportStore } from "./stores/useReportStore";
+import { useReportStore } from "@/stores/report";
 
 export default function share() {
   const app = createApp(App);

frontend/src/stores/reports.ts → frontend/src/stores/report.ts

@@ -1,13 +1,13 @@
 import { defineStore } from "pinia";
 import { ref, shallowRef } from "vue";
 
-import { type KeyLayoutSize, type KeyMoveDirection, type Layout, type Report } from "@/models";
+import { type KeyLayoutSize, type KeyMoveDirection, type Layout, type ReportItem } from "@/models";
 import { fetchReport } from "@/services/api";
 import { poll, swapItemsInArray } from "@/services/utils";
 
 export const useReportStore = defineStore("reports", () => {
   // this object is not deeply reactive as it may be very large
-  const report = shallowRef<Report | null>(null);
+  const report = shallowRef<{ [key: string]: ReportItem } | null>(null);
   const layout = ref<Layout>([]);
 
   /**
@@ -113,7 +113,7 @@ export const useReportStore = defineStore("reports", () => {
     }
   }
 
-  function setReport(r: Report) {
+  function setReport(r: { [key: string]: ReportItem }) {
     report.value = r;
     // FIXME setup layout
   }