From d50f8d58c1b1ef0ddef1f2fdbce4b18d009e56cc Mon Sep 17 00:00:00 2001
From: Roni Choudhury <roni.choudhury@kitware.com>
Date: Fri, 13 Nov 2020 11:05:19 -0500
Subject: [PATCH 1/5] Add rudimentary stepper plus stand-in content

---
 src/components/TableDialog.vue | 82 ++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 8a6a8cfd..fbfb40dd 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -16,6 +16,84 @@
         </v-icon>
       </v-btn>
     </template>
+
+    <v-stepper v-model="step">
+      <v-stepper-header>
+        <v-stepper-step
+          :complete="step > 1"
+          step="1"
+        >
+          Select Dataset
+        </v-stepper-step>
+
+        <v-divider />
+
+        <v-stepper-step
+          :complete="step > 2"
+          step="2"
+        >
+          Set Column Types
+        </v-stepper-step>
+
+        <v-divider />
+
+        <v-stepper-step
+          :complete="step > 3"
+          step="3"
+        >
+          Finish
+        </v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-items>
+        <v-stepper-content step="1">
+          <h1>hi</h1>
+
+          <v-btn
+            color="primary"
+            @click="step = 2"
+          >
+            Next
+          </v-btn>
+        </v-stepper-content>
+
+        <v-stepper-content step="2">
+          <h1>hii</h1>
+
+          <v-btn
+            color="primary"
+            @click="step = 1"
+          >
+            Back
+          </v-btn>
+
+          <v-btn
+            color="primary"
+            @click="step = 3"
+          >
+            Next
+          </v-btn>
+        </v-stepper-content>
+
+        <v-stepper-content step="3">
+          <h1>hiii</h1>
+
+          <v-btn
+            color="primary"
+            @click="step = 2"
+          >
+            Back
+          </v-btn>
+
+          <v-btn
+            color="primary"
+          >
+            Finish
+          </v-btn>
+        </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+
     <v-card>
       <v-card-title
         class="headline pb-0 pt-3"
@@ -139,6 +217,9 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
+    // Stepper control
+    const step: Ref<number> = ref(1);
+
     // Type recommendation
     const columnType: Ref<{[key: string]: CSVColumnType}> = ref({});
 
@@ -217,6 +298,7 @@ export default defineComponent({
     }
 
     return {
+      step,
       columnType,
       multinetTypes,
       fileName,

From 60299ca6845a33ce45e07a791e5864a3c310b61f Mon Sep 17 00:00:00 2001
From: Roni Choudhury <roni.choudhury@kitware.com>
Date: Fri, 13 Nov 2020 13:32:53 -0500
Subject: [PATCH 2/5] Move "create table" dialog content to inside stepper

---
 src/components/TableDialog.vue | 186 +++++++++++++++------------------
 1 file changed, 86 insertions(+), 100 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index fbfb40dd..8ed8579d 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -47,14 +47,92 @@
 
       <v-stepper-items>
         <v-stepper-content step="1">
-          <h1>hi</h1>
-
-          <v-btn
-            color="primary"
-            @click="step = 2"
-          >
-            Next
-          </v-btn>
+          <v-card>
+            <v-card>
+              <v-card-text class="px-4 pt-4 pb-1">
+                <v-layout wrap>
+                  <v-flex>
+                    <v-file-input
+                      :error-messages="fileUploadError"
+                      label="Upload File"
+                      prepend-inner-icon="attach_file"
+                      prepend-icon=""
+                      single-line
+                      clearable
+                      dense
+                      outlined
+                      @change="handleFileInput"
+                    />
+                  </v-flex>
+                </v-layout>
+                <v-layout wrap>
+                  <v-flex>
+                    <v-text-field
+                      v-model="fileName"
+                      :error-messages="tableCreationError"
+                      label="Table Name"
+                      outlined
+                      dense
+                    />
+                  </v-flex>
+                </v-layout>
+                <v-row no-gutters>
+                  <v-col cols="4">
+                    <v-text-field
+                      v-model="keyField"
+                      label="Key Column"
+                      append-icon="restore"
+                      outlined
+                      dense
+                      @click:append="restoreKeyField"
+                    />
+                  </v-col>
+                  <v-col cols="4">
+                    <v-checkbox
+                      v-model="overwrite"
+                      class="mt-1 ml-2"
+                      dense
+                      label="Overwrite Default Key"
+                      outlined
+                    />
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col
+                    v-for="(type, field) in columnType"
+                    :key="field"
+                    cols="3"
+                  >
+                    <v-select
+                      v-model="columnType[field]"
+                      outlined
+                      dense
+                      :label="field"
+                      :items="multinetTypes"
+                    />
+                  </v-col>
+                </v-row>
+              </v-card-text>
+
+              <v-divider />
+
+              <v-card-actions class="px-4 py-3">
+                <v-spacer />
+                <v-btn
+                  :disabled="createDisabled"
+                  @click="step = 2"
+                >
+                  Next
+                </v-btn>
+              </v-card-actions>
+
+              <v-progress-linear
+                v-if="uploading"
+                :value="uploadProgress"
+              />
+            </v-card>
+          </v-card>
         </v-stepper-content>
 
         <v-stepper-content step="2">
@@ -93,98 +171,6 @@
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
-
-    <v-card>
-      <v-card-title
-        class="headline pb-0 pt-3"
-        primary-title
-      >
-        Create Table
-      </v-card-title>
-      <v-card>
-        <v-card-text class="px-4 pt-4 pb-1">
-          <v-layout wrap>
-            <v-flex>
-              <v-file-input
-                :error-messages="fileUploadError"
-                label="Upload File"
-                prepend-inner-icon="attach_file"
-                prepend-icon=""
-                single-line
-                clearable
-                dense
-                outlined
-                @change="handleFileInput"
-              />
-            </v-flex>
-          </v-layout>
-          <v-layout wrap>
-            <v-flex>
-              <v-text-field
-                v-model="fileName"
-                :error-messages="tableCreationError"
-                label="Table Name"
-                outlined
-                dense
-              />
-            </v-flex>
-          </v-layout>
-          <v-row no-gutters>
-            <v-col cols="4">
-              <v-text-field
-                v-model="keyField"
-                label="Key Column"
-                append-icon="restore"
-                outlined
-                dense
-                @click:append="restoreKeyField"
-              />
-            </v-col>
-            <v-col cols="4">
-              <v-checkbox
-                v-model="overwrite"
-                class="mt-1 ml-2"
-                dense
-                label="Overwrite Default Key"
-                outlined
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col
-              v-for="(type, field) in columnType"
-              :key="field"
-              cols="3"
-            >
-              <v-select
-                v-model="columnType[field]"
-                outlined
-                dense
-                :label="field"
-                :items="multinetTypes"
-              />
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-divider />
-
-        <v-card-actions class="px-4 py-3">
-          <v-spacer />
-          <v-btn
-            :disabled="createDisabled"
-            @click="createTable"
-          >
-            Create
-          </v-btn>
-        </v-card-actions>
-        <v-progress-linear
-          v-if="uploading"
-          :value="uploadProgress"
-        />
-      </v-card>
-    </v-card>
   </v-dialog>
 </template>
 

From 45c365a9ecd6a5f87aaf4c4129e56e974337040a Mon Sep 17 00:00:00 2001
From: Roni Choudhury <roni.choudhury@kitware.com>
Date: Fri, 13 Nov 2020 15:39:46 -0500
Subject: [PATCH 3/5] Show a data preview table with datatype selectors

---
 src/components/TableDialog.vue | 63 ++++++++++++++++++++++++----------
 src/utils/files.ts             | 19 ++++++++--
 2 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 8ed8579d..94f92c59 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -97,22 +97,6 @@
                     />
                   </v-col>
                 </v-row>
-
-                <v-row>
-                  <v-col
-                    v-for="(type, field) in columnType"
-                    :key="field"
-                    cols="3"
-                  >
-                    <v-select
-                      v-model="columnType[field]"
-                      outlined
-                      dense
-                      :label="field"
-                      :items="multinetTypes"
-                    />
-                  </v-col>
-                </v-row>
               </v-card-text>
 
               <v-divider />
@@ -136,7 +120,31 @@
         </v-stepper-content>
 
         <v-stepper-content step="2">
-          <h1>hii</h1>
+          <v-data-table
+            fixed-header
+            :headers="headers"
+            hide-default-header
+            :items="rowSample"
+          >
+            <template v-slot:header="{ props: { headers } }">
+              <thead>
+                <tr>
+                  <th
+                    v-for="(header, i) in headers"
+                    :key="i"
+                  >
+                    {{ header.text }}
+                    <v-select
+                      v-model="columnType[header.text]"
+                      outlined
+                      dense
+                      :items="multinetTypes"
+                    />
+                  </th>
+                </tr>
+              </thead>
+            </template>
+          </v-data-table>
 
           <v-btn
             color="primary"
@@ -205,6 +213,19 @@ export default defineComponent({
   setup(props, { emit }) {
     // Stepper control
     const step: Ref<number> = ref(1);
+    const rowSample: Ref<Array<{}>> = ref([]);
+    const headers = computed(() => {
+      if (rowSample.value.length === 0) {
+        return [];
+      }
+
+      const keys = Object.keys(rowSample.value[0]);
+
+      return keys.map((key) => ({
+        text: key,
+        value: key,
+      }));
+    });
 
     // Type recommendation
     const columnType: Ref<{[key: string]: CSVColumnType}> = ref({});
@@ -232,9 +253,11 @@ export default defineComponent({
       }
 
       const typeRecs = await csvFileTypeRecommendations(file);
-      columnType.value = Array.from(typeRecs.keys()).reduce(
-        (acc, key) => ({ ...acc, [key]: typeRecs.get(key) }), {},
+      columnType.value = Array.from(typeRecs.typeRecs.keys()).reduce(
+        (acc, key) => ({ ...acc, [key]: typeRecs.typeRecs.get(key) }), {},
       );
+
+      rowSample.value = [...typeRecs.rowSample];
     }
 
     // Upload options
@@ -285,6 +308,8 @@ export default defineComponent({
 
     return {
       step,
+      headers,
+      rowSample,
       columnType,
       multinetTypes,
       fileName,
diff --git a/src/utils/files.ts b/src/utils/files.ts
index 6e5986ca..78795e0c 100644
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@@ -46,10 +46,16 @@ interface TypeScore {
   total: number;
 }
 
-async function csvFileTypeRecommendations(file: File): Promise<Map<string, CSVColumnType>> {
-  const parsePromise: Promise<Map<string, CSVColumnType>> = new Promise((resolve) => {
+interface Recommendation {
+  typeRecs: Map<string, CSVColumnType>;
+  rowSample: Array<{}>;
+}
+
+async function csvFileTypeRecommendations(file: File): Promise<Recommendation> {
+  const parsePromise: Promise<Recommendation> = new Promise((resolve) => {
     const columnTypes = new Map<string, TypeScore>();
     const typeRecs = new Map<string, CSVColumnType>();
+    const rowSample = [] as Array<{}>;
 
     Papa.parse(file, {
       header: true,
@@ -58,6 +64,10 @@ async function csvFileTypeRecommendations(file: File): Promise<Map<string, CSVCo
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const data = row.data as { [key: string]: any };
 
+        if (rowSample.length !== 30) {
+          rowSample.push({ ...data });
+        }
+
         Object.keys(data).forEach((key: string) => {
           if (!columnTypes.has(key)) {
             columnTypes.set(key, {
@@ -121,7 +131,10 @@ async function csvFileTypeRecommendations(file: File): Promise<Map<string, CSVCo
           typeRecs.set(field, rec);
         });
 
-        resolve(typeRecs);
+        resolve({
+          typeRecs,
+          rowSample,
+        });
       },
     });
   });

From e032c07c7068be3da9048a3f6cebfc5c8b130faa Mon Sep 17 00:00:00 2001
From: Roni Choudhury <roni.choudhury@kitware.com>
Date: Fri, 13 Nov 2020 15:43:44 -0500
Subject: [PATCH 4/5] Enable old "create table" behavior at end of stepper

---
 src/components/TableDialog.vue | 30 ++----------------------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 94f92c59..71035f0c 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -34,15 +34,6 @@
         >
           Set Column Types
         </v-stepper-step>
-
-        <v-divider />
-
-        <v-stepper-step
-          :complete="step > 3"
-          step="3"
-        >
-          Finish
-        </v-stepper-step>
       </v-stepper-header>
 
       <v-stepper-items>
@@ -155,26 +146,9 @@
 
           <v-btn
             color="primary"
-            @click="step = 3"
-          >
-            Next
-          </v-btn>
-        </v-stepper-content>
-
-        <v-stepper-content step="3">
-          <h1>hiii</h1>
-
-          <v-btn
-            color="primary"
-            @click="step = 2"
-          >
-            Back
-          </v-btn>
-
-          <v-btn
-            color="primary"
+            @click="createTable"
           >
-            Finish
+            Create Table
           </v-btn>
         </v-stepper-content>
       </v-stepper-items>

From 38cf495ae4083aff28624430eb8cd268ef900b53 Mon Sep 17 00:00:00 2001
From: Jared Tomeck <jared.tomeck@kitware.com>
Date: Thu, 19 Nov 2020 13:14:06 -0500
Subject: [PATCH 5/5] Improve upload preview table styling

---
 src/components/TableDialog.vue | 48 ++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 71035f0c..60f923cb 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog
     v-model="tableDialog"
-    width="700"
+    width="800"
   >
     <template v-slot:activator="{ on }">
       <v-btn
@@ -110,25 +110,32 @@
           </v-card>
         </v-stepper-content>
 
-        <v-stepper-content step="2">
+        <v-stepper-content
+          class="pa-0"
+          step="2"
+        >
           <v-data-table
+            class="upload-preview"
             fixed-header
             :headers="headers"
             hide-default-header
             :items="rowSample"
           >
             <template v-slot:header="{ props: { headers } }">
-              <thead>
+              <thead dark>
                 <tr>
                   <th
                     v-for="(header, i) in headers"
                     :key="i"
+                    class="pt-2 pb-4"
                   >
                     {{ header.text }}
                     <v-select
                       v-model="columnType[header.text]"
                       outlined
+                      dark
                       dense
+                      hide-details
                       :items="multinetTypes"
                     />
                   </th>
@@ -137,19 +144,24 @@
             </template>
           </v-data-table>
 
-          <v-btn
-            color="primary"
-            @click="step = 1"
-          >
-            Back
-          </v-btn>
-
-          <v-btn
-            color="primary"
-            @click="createTable"
-          >
-            Create Table
-          </v-btn>
+          <v-footer class="py-3">
+            <v-spacer />
+            <v-btn
+              color="primary"
+              text
+              @click="step = 1"
+            >
+              Back
+            </v-btn>
+
+            <v-btn
+              color="primary"
+              depressed
+              @click="createTable"
+            >
+              Create Table
+            </v-btn>
+          </v-footer>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
@@ -308,4 +320,8 @@ export default defineComponent({
   margin: 49px 10px 0 0;
   z-index: 1;
 }
+.upload-preview table th {
+  background-color: #1976d2 !important;
+  color: #fff !important;
+}
 </style>