Clarify data not uploaded (#1179)

- Move lock icon around and make it more visible
- Remove as many visual elements as possible to give focus to the padlock
- Add a folder icon for local file selection
- List files when uploaded

Author: hleepfl

docs/CONTRIBUTING.md

@@ -104,10 +104,10 @@ pnpm -F webapp test
 
 The webapp tests rely on `cypress` and the test suite is located in the `webapp/cypress` folder.
 
-Note that you can also run test interactively in the browser of your choice. To do so, run
+Note that you can also run test interactively in the browser of your choice. To do so, run from the `webapp` folder
 
 ```
-VITE_SERVER_URL=http://server npx -w webapp start-server-and-test start http://localhost:8081 'cypress open --e2e'
+pnpm run test:e2e-interactive
 ```
 
 which should open the Cypress UI and let you choose the browser you wand to use and which tests to run. More information on [the Cypress docs](https://docs.cypress.io/app/get-started/open-the-app).

webapp/cypress/e2e/datasetInput.cy.ts

@@ -39,11 +39,14 @@ describe("image dataset input by group", () => {
 
     goToDatasetInputStep();
     cy.get("button").contains("group").click();
-    cy.contains("select images").selectFile([
-      { fileName: "first.png", contents: new Uint8Array() },
-      { fileName: "second.png", contents: new Uint8Array() },
-      { fileName: "third.png", contents: new Uint8Array() },
-    ]);
+    cy.contains("Drop images");
+    cy.get('[data-testid="select-image-button"]')
+      .first()
+      .selectFile([
+        { fileName: "first.png", contents: new Uint8Array() },
+        { fileName: "second.png", contents: new Uint8Array() },
+        { fileName: "third.png", contents: new Uint8Array() },
+      ]);
 
     cy.contains("Number of selected files: 3").should("exist");
   });
@@ -61,21 +64,27 @@ describe("image dataset input by csv", () => {
 
     goToDatasetInputStep();
     cy.get("button").contains("csv").click();
-    cy.contains("select CSV").selectFile({
-      fileName: "csv",
-      contents: new TextEncoder().encode(
-        "filename,label\n" +
-          "first,first\n" +
-          "second,second\n" +
-          "third,third\n",
-      ),
-    });
+    cy.contains("Drop CSV");
+    cy.get('[data-testid="select-tabular-button"]')
+      .first()
+      .selectFile({
+        fileName: "csv",
+        contents: new TextEncoder().encode(
+          "filename,label\n" +
+            "first,first\n" +
+            "second,second\n" +
+            "third,third\n",
+        ),
+      });
 
-    cy.contains("select images").selectFile([
-      { fileName: "first.png", contents: new Uint8Array() },
-      { fileName: "second.png", contents: new Uint8Array() },
-      { fileName: "third.png", contents: new Uint8Array() },
-    ]);
+    cy.contains("Drop images");
+    cy.get('[data-testid="select-image-button"]')
+      .first()
+      .selectFile([
+        { fileName: "first.png", contents: new Uint8Array() },
+        { fileName: "second.png", contents: new Uint8Array() },
+        { fileName: "third.png", contents: new Uint8Array() },
+      ]);
 
     cy.contains("Number of selected files: 3").should("exist");
   });
@@ -91,10 +100,13 @@ describe("tabular dataset input", () => {
     );
 
     goToDatasetInputStep();
-    cy.contains("select CSV").selectFile({
-      fileName: "filename",
-      contents: new TextEncoder().encode("a,b,c\n1,2,3\n"),
-    });
+    cy.contains("Drop CSV");
+    cy.get('[data-testid="select-tabular-button"]')
+      .first()
+      .selectFile({
+        fileName: "filename",
+        contents: new TextEncoder().encode("a,b,c\n1,2,3\n"),
+      });
 
     cy.contains("filename").should("exist");
   });

webapp/cypress/e2e/testing.cy.ts

@@ -9,14 +9,15 @@ it("can test titanic", () => {
   cy.contains("button", "download").click();
   cy.contains("button", "test").click();
 
-  cy.contains("label", "select CSV").selectFile(
-    "../datasets/titanic_train.csv",
-  );
+  cy.contains("Drop CSV");
+  cy.get('[data-testid="select-tabular-button"]')
+    .first()
+    .selectFile("../datasets/titanic_train.csv");
   cy.contains("button", "next").click();
 
   cy.contains("Validate your model")
-    .parent()
-    .parent()
+    .parents()
+    .eq(1)
     .contains("button", "test")
     .click();
 
@@ -31,13 +32,13 @@ it("can test lus_covid", () => {
   cy.contains("button", "test").click();
 
   cy.task<string[]>("readdir", "../datasets/lus_covid/COVID+/").then((files) =>
-    cy.contains("label", "select images").selectFile(files),
+    cy.get('[data-testid="select-image-button"]').first().selectFile(files),
   );
   cy.contains("button", "next").click();
 
   cy.contains("Validate your model")
-    .parent()
-    .parent()
+    .parents()
+    .eq(1)
     .contains("button", "test")
     .click();
 
@@ -51,14 +52,14 @@ it("can start and stop testing of wikitext", () => {
   cy.contains("button", "download").click();
   cy.contains("button", "test").click();
 
-  cy.contains("label", "select text").selectFile(
-    "../datasets/wikitext/wiki.test.tokens",
-  );
+  cy.get('[data-testid="select-text-button"]')
+    .first()
+    .selectFile("../datasets/wikitext/wiki.test.tokens");
   cy.contains("button", "next").click();
 
   cy.contains("Validate your model")
-    .parent()
-    .parent()
+    .parents()
+    .eq(1)
     .contains("button", "test")
     .click();
   cy.contains("button", "stop testing").click();

webapp/cypress/e2e/training.cy.ts

@@ -30,9 +30,10 @@ describe("training page", () => {
     goToTaskOverview();
     cy.contains("button", "next").click();
 
-    cy.contains("label", "select CSV").selectFile(
-      "../datasets/titanic_train.csv",
-    );
+    cy.contains("Drop CSV");
+    cy.get('[data-testid="select-tabular-button"]')
+      .first()
+      .selectFile("../datasets/titanic_train.csv");
     cy.contains("button", "next").click();
 
     cy.contains("button", "locally").click();
@@ -61,15 +62,17 @@ describe("training page", () => {
         cy
           .contains("h4", "COVID-Positive")
           .parents()
-          .contains("select images")
+          .eq(1)
+          .find('[data-testid="select-image-button"]')
           .selectFile(files),
     );
     cy.task<string[]>("readdir", "../datasets/lus_covid/COVID-/").then(
       (files) =>
         cy
           .contains("h4", "COVID-Negative")
           .parents()
-          .contains("select images")
+          .eq(1)
+          .find('[data-testid="select-image-button"]')
           .selectFile(files),
     );
     cy.contains("button", "next").click();

webapp/package.json

@@ -7,7 +7,8 @@
     "build": "vue-tsc --build && vite build",
     "test": "pnpm run test:unit && pnpm run test:e2e",
     "test:unit": "vitest --run",
-    "test:e2e": "VITE_SERVER_URL=http://server start-server-and-test \"pnpm start\" http://localhost:1351 'pnpm exec cypress run --e2e'"
+    "test:e2e": "VITE_SERVER_URL=http://server start-server-and-test \"pnpm start\" http://localhost:1351 'pnpm exec cypress run --e2e'",
+    "test:e2e-interactive": "VITE_SERVER_URL=http://server start-server-and-test \"pnpm start\" http://localhost:1351 'pnpm exec cypress open --e2e'"
   },
   "dependencies": {
     "@epfml/discojs": "workspace:",

webapp/src/components/dataset_input/DatasetInput.vue

@@ -3,17 +3,6 @@
     <template #title> Connect your data </template>
     <template #icon> <PlugIcon /> </template>
 
-    <div class="mb-5 text-left">
-      Disco needs to know where your data is located on your device in order to
-      read it (<b>not</b> upload it!) and train models. Models are trained on
-      your local data and are periodically aggregated with other users' models
-      if any.
-      <br />
-      <br />
-      <b>
-        Your data stays on your device and data is never uploaded anywhere.
-      </b>
-    </div>
     <slot />
   </IconCard>
 </template>

webapp/src/components/dataset_input/FileSelection.vue

@@ -8,6 +8,18 @@
   >
     <section>
       <!-- Hide the file input field when already submitted-->
+      <div v-if="noUpload" class="flex justify-center items-center mb-4">
+        <span
+          v-tippy="{
+            content:
+              'Your files are read locally in your browser, who can only read them if you manually select them first. They are never sent to our servers or anyone else\'s. To convince yourself, you can start a training session (without collaboration) while turning off your machine\'s wifi !',
+          }"
+          class="bg-green-200 text-green-800 dark:text-green-200 dark:bg-green-800 rounded-full hover:cursor-pointer px-2 py-1"
+        >
+          <i class="fa fa-lock mr-1" />
+          <span> Stays on your device </span>
+        </span>
+      </div>
       <div
         v-if="!hideConnectField"
         class="border-dashed rounded-xl border-disco-cyan flex flex-col justify-center items-center min-h-48"
@@ -19,15 +31,16 @@
         @drop="(e: DragEvent) => dragFiles(e)"
       >
         <p
-          class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center"
+          class="p-4 text-lg text-disco-blue dark:text-white flex-wrap justify-center"
         >
-          <span>Drag and drop the {{ fileType }} or</span>
+          <span>Drop {{ fileType }} here or</span>
         </p>
-        <label class="mb-6">
+        <label class="mb-6" :data-testid="`select-${props.type}-button`">
           <span
-            class="px-4 py-2 min-w-32 text-lg uppercase text-white bg-disco-cyan rounded-sm duration-200 hover:bg-white dark:hover:bg-slate-950 hover:outline-solid hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
+            class="px-4 py-2 min-w-32 text-lg capitalize text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
           >
-            select {{ fileType }}
+            <i v-if="noUpload" class="fas fa-folder-open mr-2" />
+            <span>select</span>
           </span>
           <input
             ref="inputFileElement"
@@ -40,20 +53,6 @@
           />
         </label>
       </div>
-      <!-- Display what has been connected -->
-      <div
-        v-if="files === undefined && lockIcon"
-        class="flex justify-end items-center mt-1"
-      >
-        <span
-          v-tippy="{
-            content: 'Data always stays on your device and is never shared.',
-          }"
-          class="hover:cursor-pointer"
-        >
-          <i class="fa fa-lock mr-1" />
-        </span>
-      </div>
 
       <!-- Display some text if specified -->
       <div
@@ -73,13 +72,16 @@
         class="pt-4 flex flex-col items-center pb-5"
       >
         <div
-          class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
+          class="flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-white"
         >
-          <span v-if="multiple"
-            >Number of selected files:
-            <span class="pl-1 text-xl">{{ files.size }}</span></span
-          >
-          <span v-else class="pl-1">{{ files.first()?.name ?? "none" }}</span>
+          <i v-if="noUpload" class="fas fa-folder-open mr-2" />
+          <span v-if="multiple">
+            Number of selected files:
+            <span class="text-xl">{{ files.size }}</span>
+          </span>
+        </div>
+        <div class="flex flex-col py-4">
+          <span v-for="(name, i) in fileNamesDisplay" :key="i">{{ name }}</span>
         </div>
         <div>
           <CustomButton @click="clearFiles">
@@ -101,11 +103,11 @@ const props = withDefaults(
   defineProps<{
     type: "image" | "json" | "tabular" | "text";
     multiple?: boolean; // accept one or multiple files
-    lockIcon?: boolean;
+    noUpload?: boolean;
   }>(),
   {
     multiple: false,
-    lockIcon: false,
+    noUpload: false,
   },
 );
 
@@ -139,6 +141,7 @@ const fileType = computed(() => {
 
   return `${name}${props.multiple ? "s" : ""}`;
 });
+
 const acceptFilter = computed(() => {
   switch (props.type) {
     case "image":
@@ -156,6 +159,16 @@ const acceptFilter = computed(() => {
   throw new TypeError("invalid value");
 });
 
+const fileNamesDisplay = computed(() => {
+  if (!files.value) return "";
+  const arr = files.value.map((f) => f.name);
+  if (arr.size < 5) {
+    return arr;
+  } else {
+    return [...arr.slice(0, 3), "...", arr.last()];
+  }
+});
+
 // we use an event counter to test whether the user is dragging a file over the field
 // because events are triggered multiple times when hovering of children elements (such as button or text)
 const dragEventCount = ref(0);

webapp/src/components/dataset_input/ImageDatasetInput.vue

@@ -1,6 +1,6 @@
 <template>
   <DatasetInput>
-    <FileSelection v-model="files" type="image" lock-icon multiple />
+    <FileSelection v-model="files" type="image" no-upload multiple />
   </DatasetInput>
 </template>
 

webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue

@@ -6,7 +6,7 @@
           Connect the CSV file containing a mapping between images and labels
         </template>
 
-        <FileSelection v-model="csvFiles" type="tabular" private>
+        <FileSelection v-model="csvFiles" type="tabular" no-upload>
           <b>
             The CSV file must contain a header with only two columns (filename,
             label) </b
@@ -39,11 +39,10 @@
       >
         <template #title> Connect the images </template>
 
-        <FileSelection v-model="images" type="image" multiple private>
+        <FileSelection v-model="images" type="image" multiple no-upload>
           Drag and drop or browse for the images referenced in the connected CSV
           file.
           <br />
-          {{ browsingTip }}
         </FileSelection>
       </IconCard>
     </div>
@@ -64,7 +63,6 @@ import { useToaster } from "@/composables/toaster";
 import FileSelection from "../FileSelection.vue";
 
 import type { NamedLabeledImageDataset } from "../types.js";
-import { browsingTip } from "./strings.js";
 
 const toaster = useToaster();
 

webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue

@@ -2,11 +2,9 @@
   <div class="grid grid-cols-1 lg:grid-cols-2 cards-gap">
     <div class="contents">
       <IconCard v-for="[label, files] in labelsAndFiles" :key="label">
-        <template #title> Group label:&nbsp;&nbsp;{{ label }} </template>
+        <template #title> Group label:&nbsp;{{ label }} </template>
 
-        <FileSelection v-model="files.value" type="image" multiple private>
-          {{ browsingTip }}
-        </FileSelection>
+        <FileSelection v-model="files.value" type="image" multiple no-upload />
       </IconCard>
     </div>
   </div>
@@ -25,7 +23,6 @@ import IconCard from "@/components/containers/IconCard.vue";
 import FileSelection from "../FileSelection.vue";
 
 import type { NamedLabeledImageDataset } from "../types.js";
-import { browsingTip } from "./strings.js";
 
 const props = defineProps<{
   labels: Set<string>;