Clarify data not uploaded

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,17 @@
   >
     <section>
       <!-- Hide the file input field when already submitted-->
+      <div v-if="noUpload" class="flex justify-center items-center my-1">
+        <span
+          v-tippy="{
+            content: 'Data always stays on your device and is never shared.',
+          }"
+          class="bg-green-200 text-green-500 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"
@@ -21,13 +32,14 @@
         <p
           class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center"
         >
-          <span>Drag and drop the {{ fileType }} or</span>
+          <span>Drop {{ fileType }} here or</span>
         </p>
         <label class="mb-6">
           <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 +52,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 +71,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-disco-light-cyan"
         >
-          <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 +102,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,
   },
 );
 
@@ -156,6 +157,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>;

webapp/src/components/dataset_input/TabularDatasetInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-1">
     <DatasetInput>
-      <FileSelection v-model="files" type="tabular" private />
+      <FileSelection v-model="files" type="tabular" no-upload />
     </DatasetInput>
   </div>
 </template>

webapp/src/components/dataset_input/TextDatasetInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-1">
     <DatasetInput>
-      <FileSelection v-model="files" type="text" private />
+      <FileSelection v-model="files" type="text" no-upload />
     </DatasetInput>
   </div>
 </template>