chore(UI): Remove view builder (#1267)

Closes #1266. This PR removes all view builder related code. Activity feed item now have a version number in backend aswell as in frontend. User can now annotate there items in the activity feed. ## UI preview: https://github.com/user-attachments/assets/7f283b74-17a4-4f4b-a6cc-a043a2415b24
probabl-ai · Feb 3, 2025 · b85b797 · b85b797
1 parent c2c0862
commit b85b797
Show file tree

Hide file tree

Showing 34 changed files with 626 additions and 1,997 deletions.
diff --git a/skore-ui/src/SkoreUi.vue b/skore-ui/src/SkoreUi.vue
@@ -17,13 +17,15 @@ const themesStore = useThemesStore();
   <div class="skore" :class="themesStore.currentThemeClass">
     <div class="app-shell">
       <AppToolbar>
-        <NavigationButton
-          v-for="(r, i) in router.getRoutes()"
-          :key="i"
-          :icon="`${r.meta['icon']}`"
-          :is-selected="r.name == route.name"
-          :to="r.path"
-        />
+        <template v-if="router.getRoutes().length > 1">
+          <NavigationButton
+            v-for="(r, i) in router.getRoutes()"
+            :key="i"
+            :icon="`${r.meta['icon']}`"
+            :is-selected="r.name == route.name"
+            :to="r.path"
+          />
+        </template>
       </AppToolbar>
       <RouterView v-slot="{ Component, route }">
         <template v-if="Component">
@@ -49,20 +51,21 @@ const themesStore = useThemesStore();
 
 <style scoped>
 .skore {
+  color: var(--color-text-primary);
+
   & .app-shell {
     display: flex;
-    flex-direction: row;
+    height: 100dvh;
+    flex-direction: column;
     background-color: var(--color-background-primary);
 
-    main {
-      width: calc(100dvw - var(--width-toolbar));
-      height: 100vh;
+    main,
+    .loader {
+      flex: 1;
     }
 
     .loader {
       display: flex;
-      height: 100dvh;
-      flex: 1;
       align-items: center;
       justify-content: center;
     }

diff --git a/skore-ui/src/StandaloneWidget.vue b/skore-ui/src/StandaloneWidget.vue
@@ -25,5 +25,6 @@ onBeforeUnmount(() => {
 .widget {
   width: 100%;
   background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
 }
 </style>
diff --git a/skore-ui/src/assets/styles/_typography.css b/skore-ui/src/assets/styles/_typography.css
@@ -9,7 +9,6 @@
 }
 
 .skore-ui {
-  color: var(--color-text-primary);
   font-family: Geist, sans-serif;
   font-size: var(--root-font-size);
   font-weight: var(--font-weight-regular);

diff --git a/skore-ui/src/components/FloatingTooltip.vue b/skore-ui/src/components/FloatingTooltip.vue
@@ -56,7 +56,7 @@ const { floatingStyles } = useFloating(reference, floating, {
   .floating-tooltip-content {
     position: absolute;
     z-index: 9999;
-    width: max-content;
+    max-width: 50dvw;
     padding: var(--spacing-6);
     border: solid var(--stroke-width-md) var(--color-stroke-background-primary);
     border-radius: var(--radius-xs);

diff --git a/skore-ui/src/components/RichTextEditor.vue b/skore-ui/src/components/RichTextEditor.vue
@@ -96,16 +96,13 @@ defineExpose({ markBold, markItalic, markList, focus });
   & textarea {
     width: 100%;
     height: 100%;
-    border: var(--stroke-width-md) solid var(--color-stroke-background-primary);
-    border-radius: var(--radius-xs);
+    border: none;
     background-color: var(--color-background-primary);
     color: var(--color-text-secondary);
     font-family: GeistMono, monospace;
     resize: none;
-    transition: border-color var(--animation-duration) var(--animation-easing);
 
     &:focus {
-      border-color: var(--color-stroke-background-branding);
       outline: none;
     }
   }

diff --git a/skore-ui/src/dto.ts b/skore-ui/src/dto.ts
@@ -10,19 +10,7 @@ export interface ProjectItemDto {
   updated_at: string;
   created_at: string;
   note?: string;
-}
-
-/**
- * A layout is a list of keys that are visible in a view
- */
-export type LayoutDto = string[];
-
-/**
- * A project is a collection of items and views
- */
-export interface ProjectDto {
-  items: { [key: string]: ProjectItemDto[] };
-  views: { [key: string]: LayoutDto };
+  version: number;
 }
 
 /**
@@ -31,3 +19,11 @@ export interface ProjectDto {
  * Sorted from newest to oldest.
  */
 export type ActivityFeedDto = ProjectItemDto[];
+
+/**
+ * Project info
+ */
+export interface ProjectInfoDto {
+  name: string;
+  path: string;
+}
diff --git a/skore-ui/src/models.ts b/skore-ui/src/models.ts
@@ -11,6 +11,7 @@ export interface PresentableItem {
   createdAt: Date;
   updatedAt: Date;
   note?: string;
+  version: number;
 }
 
 /**
@@ -45,5 +46,6 @@ export function deserializeProjectItemDto(dto: ProjectItemDto): PresentableItem
     createdAt,
     updatedAt,
     note: dto.note,
+    version: dto.version,
   };
 }
diff --git a/skore-ui/src/router.ts b/skore-ui/src/router.ts
@@ -1,10 +1,8 @@
 import { createRouter as cr, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
 import ActivityFeedView from "@/views/activity/ActivityFeedView.vue";
-import ProjectView from "@/views/project/ProjectView.vue";
 
 export enum ROUTE_NAMES {
-  VIEW_BUILDER = "view-builder",
   ACTIVITY_FEED = "activity-feed",
   COMPONENTS = "components",
 }
@@ -18,14 +16,6 @@ const routes: RouteRecordRaw[] = [
       icon: "icon-list-sparkle",
     },
   },
-  {
-    path: "/views",
-    name: ROUTE_NAMES.VIEW_BUILDER,
-    component: ProjectView,
-    meta: {
-      icon: "icon-pie-chart",
-    },
-  },
 ];
 
 if (import.meta.env.DEV) {

diff --git a/skore-ui/src/services/api.ts b/skore-ui/src/services/api.ts
@@ -1,4 +1,4 @@
-import type { ActivityFeedDto, LayoutDto, ProjectDto } from "@/dto";
+import type { ActivityFeedDto, ProjectInfoDto } from "@/dto";
 import { getErrorMessage } from "@/services/utils";
 import { useToastsStore } from "@/stores/toasts";
 
@@ -19,45 +19,6 @@ function checkResponseStatus(r: Response, attendedStatusCode: number) {
   }
 }
 
-export async function fetchProject(): Promise<ProjectDto | null> {
-  try {
-    const r = await fetch(`${BASE_URL}/project/items`);
-    checkResponseStatus(r, 200);
-    return await r.json();
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-  return null;
-}
-
-export async function putView(view: string, layout: LayoutDto): Promise<ProjectDto | null> {
-  try {
-    const r = await fetch(`${BASE_URL}/project/views?key=${view}`, {
-      method: "PUT",
-      body: JSON.stringify(layout),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    checkResponseStatus(r, 201);
-    return await r.json();
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-  return null;
-}
-
-export async function deleteView(view: string) {
-  try {
-    const r = await fetch(`${BASE_URL}/project/views?key=${view}`, {
-      method: "DELETE",
-    });
-    checkResponseStatus(r, 202);
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-}
-
 export async function fetchActivityFeed(after?: string): Promise<ActivityFeedDto | null> {
   try {
     let url = `${BASE_URL}/project/activity`;
@@ -77,7 +38,7 @@ export async function setNote(
   key: string,
   message: string,
   version: number = -1
-): Promise<ProjectDto | null> {
+): Promise<object | null> {
   try {
     const r = await fetch(`${BASE_URL}/project/note`, {
       method: "PUT",
@@ -93,3 +54,14 @@ export async function setNote(
   }
   return null;
 }
+
+export async function getInfo(): Promise<ProjectInfoDto | null> {
+  try {
+    const r = await fetch(`${BASE_URL}/project/info`);
+    checkResponseStatus(r, 200);
+    return await r.json();
+  } catch (error) {
+    reportError(getErrorMessage(error));
+  }
+  return null;
+}