webapp/components/testing: testing tutorial

webapp/src/components/testing/Testing.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="validationStore.step === 0">
     <div class="flex flex-col gap-8">
-      <div v-if="!models.infos.isEmpty()">
+      <div v-if="!models.infos.isEmpty()" class="model-library">
         <IconCard title-placement="center">
           <template #title>
             Model Library —
@@ -57,7 +57,7 @@
           </div>
         </IconCard>
       </div>
-      <div v-else>
+      <div v-else class="model-library">
         <IconCard>
           <template #title> Empty Model Library </template>
 
@@ -69,12 +69,13 @@
         </IconCard>
       </div>
 
-      <div>
+      <div id="model-repository">
         <IconCard title-placement="center">
           <template #title>
-            <span><DISCO /> Model Repository — <span class="italic">Download and Test</span></span>
-
-
+            <span
+              ><DISCO /> Model Repository —
+              <span class="italic">Download and Test</span></span
+            >
           </template>
 
           <div
@@ -124,7 +125,6 @@
 
   <div v-if="selection !== undefined">
     <div v-if="validationStore.step !== 0">
-
       <TestSteps
         v-if="selection.mode === 'test'"
         :task="selection.task"
@@ -144,8 +144,8 @@
 <script lang="ts" setup>
 import createDebug from "debug";
 import { List } from "immutable";
-import { computed, ref, onActivated } from "vue";
-import { RouterLink } from "vue-router";
+import { computed, ref, onActivated, watch, nextTick } from "vue";
+import { RouterLink, useRouter } from "vue-router";
 import { VueSpinner } from "vue3-spinners";
 
 import type { DataType, Model, Task } from "@epfml/discojs";
@@ -155,9 +155,9 @@ import Bin2Icon from "@/assets/svg/Bin2Icon.vue";
 import { useToaster } from "@/composables/toaster";
 import { CONFIG } from "@/config";
 import type { ModelID } from "@/store";
-import { useModelsStore } from "@/store";
-import { useTasksStore } from "@/store";
-import { useValidationStore } from "@/store";
+import {
+  useModelsStore, useTasksStore, useValidationStore, useTutorialStore
+} from "@/store";
 
 import ButtonsCard from "@/components/containers/ButtonsCard.vue";
 import IconCard from "@/components/containers/IconCard.vue";
@@ -167,12 +167,19 @@ import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 
 import TestSteps from "./TestSteps.vue";
 import PredictSteps from "./PredictSteps.vue";
+import { driver, type DriveStep } from "driver.js";
+import "driver.js/dist/driver.css";
 
 const debug = createDebug("webapp:Testing");
 const validationStore = useValidationStore();
 const models = useModelsStore();
 const tasksStore = useTasksStore();
 const toaster = useToaster();
+const tutorialStore = useTutorialStore();
+const router = useRouter();
+const driverTesting = driver({
+  showProgress: false,
+});
 
 type Selection<D extends DataType> = {
   mode: "predict" | "test";
@@ -288,4 +295,153 @@ function taskTitle(taskID: string): string | undefined {
 
   return titled.displayInformation.taskTitle;
 }
+//Define the steps for the guide when no user's models are available
+const modelEmptySteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page allows you to test and validate models stored locally or download new models from the DISCO Model Repository for further testing and evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".model-library",
+    popover: {
+      title: "Model Library",
+      description:
+        "Test any locally stored model against a validation dataset to evaluate its performance.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#model-repository",
+    popover: {
+      title: "DISCO Model Repository",
+      description:
+        "Download additional models from the repository for testing or federated training tasks.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide when user's models are available
+const modelSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page allows you to test and validate models stored locally or download new models from the DISCO Model Repository for further testing and evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+
+  {
+    element: ".model-library",
+    popover: {
+      title: "Model Library",
+      description:
+        "Test any locally stored model against a validation dataset to evaluate its performance.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".mb-1:nth-child(1)",
+    popover: {
+      description:
+        "Run the model on a validation dataset to assess its accuracy.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".mb-1:nth-child(2)",
+    popover: {
+      description:
+        "Use the selected model to make predictions on new data inputs.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#model-repository",
+    popover: {
+      title: "DISCO Model Repository",
+      description:
+        "Download additional models from the repository for testing or federated training tasks.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide related to data handling
+const dataSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Expected Data Format",
+      description:
+        "Testing your model on unseen data is crucial. Make sure the dataset you select was not part of the training process to ensure accurate evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#data-link-download",
+    popover: {
+      title: "Test",
+      description:
+        "Click here to download a sample dataset if you don't have your own. Perfect for testing and experimenting!",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#select-data-bttn",
+    popover: {
+      title: "Upload Your Dataset",
+      description:
+        "Click here to upload your dataset for model training. Your data stays secure and never leaves your device.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide related to model evaluation
+const evaluationSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page is intended for testing or validating the selected model. After the testing is complete, the results can be saved in CSV file format for further analysis or use.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+watch(
+  () => tutorialStore.showGuide,
+  async (_) => {
+    if (driverTesting.isActive()) {
+      await driverTesting.destroy();
+    }
+    if (router.currentRoute.value.path === "/evaluate") {
+      const stepsMap: Record<number, DriveStep[]> = {
+        0: models.infos.isEmpty() ? modelEmptySteps : modelSteps,
+        1: dataSteps,
+        2: evaluationSteps,
+      };
+
+      const steps = stepsMap[validationStore.step] || [];
+      if (steps.length) {
+        driverTesting.setSteps(steps);
+        await nextTick();
+        driverTesting.drive();
+      }
+    }
+  },
+);
 </script>