Merge pull request #303 from multinet-app/file_format_info

Add file format descriptions

client/src/components/FileUploadForm.vue

@@ -17,12 +17,17 @@
         </v-flex>
         <v-flex xs6 class="pl-2" v-if="fileTypeSelector">
           <v-select
+            v-if="types.length"
             id="file-type"
             filled
             label="File type"
-            v-if="typeList.length"
+            persistent-hint
+            :hint="selectedType ? selectedType.hint : null"
             v-model="selectedType"
-            :items="typeList"
+            :items="types"
+            item-text="displayName"
+            item-value="displayName"
+            return-object
           />
         </v-flex>
       </v-layout>
@@ -55,7 +60,7 @@ import { UploadType, validUploadType } from 'multinet';
 import Vue, { PropType } from 'vue';
 
 import api from '@/api';
-import { FileTypeTable } from '@/types';
+import { FileType } from '@/types';
 
 
 export default Vue.extend({
@@ -87,7 +92,7 @@ export default Vue.extend({
       required: true,
     },
     types: {
-      type: Object as PropType<FileTypeTable>,
+      type: Array as PropType<FileType[]>,
       required: true,
     },
   },
@@ -96,16 +101,13 @@ export default Vue.extend({
     return {
       tableCreationError: null as string | null,
       fileUploadError: null as string | null,
-      selectedType: null as string | null,
+      selectedType: null as FileType | null,
       file: null as File | null,
       newTable: '',
     };
   },
 
   computed: {
-    typeList(): string[] {
-      return Object.keys(this.types);
-    },
     createDisabled(): boolean {
       return !this.file || !this.selectedType || !this.newTable || !!this.fileUploadError;
     },
@@ -125,14 +127,21 @@ export default Vue.extend({
     },
 
     async createTable() {
+      const {
+        file,
+        workspace,
+        newTable,
+        selectedType,
+      } = this;
+
       try {
-        if (this.file === null) {
+        if (file === null) {
           throw new Error('this.file must not be null');
         }
 
-        await api.uploadTable(this.workspace, this.newTable, {
-          type: this.selectedType as UploadType,
-          data: this.file,
+        await api.uploadTable(workspace, newTable, {
+          type: selectedType!.queryCall as UploadType,
+          data: file,
         });
 
         this.tableCreationError = null;
@@ -142,16 +151,16 @@ export default Vue.extend({
       }
     },
 
-    fileType(file: File): string | null {
+    fileType(file: File): FileType | null {
       if (!file) {
         return null;
       }
 
       const fileName = file.name.split('.');
       const extension = fileName[fileName.length - 1];
 
-      for (const type in this.types) {
-        if (this.types[type].extension.includes(extension) && validUploadType(type)) {
+      for (const type of this.types) {
+        if (type.extension.includes(extension) && validUploadType(type.queryCall)) {
           return type;
         }
       }

client/src/components/GraphDialog.vue

@@ -67,11 +67,26 @@ export default Vue.extend({
   data() {
     return {
       graphDialog: false,
-      uploadFiletypes: {
-        d3_json: {extension: ['json'], queryCall: 'd3_json'},
-        nested_json: {extension: ['json'], queryCall: 'nested_json'},
-        newick: {extension: ['phy', 'tree'], queryCall: 'newick'},
-      },
+      uploadFiletypes: [
+        {
+          displayName: 'D3 JSON (ext: .json)',
+          hint: 'JSON format compatible with d3-force',
+          queryCall: 'd3_json',
+          extension: ['json'],
+        },
+        {
+          displayName: 'Arbor Nested Tree (ext: .json)',
+          hint: 'JSON-encoded tree format used by the Arbor project',
+          queryCall: 'nested_json',
+          extension: ['json'],
+        },
+        {
+          displayName: 'Newick Tree (ext: .phy, .tree)',
+          hint: 'The Newick Standard for representing trees in computer-readable form',
+          queryCall: 'newick',
+          extension: ['phy', 'tree'],
+        },
+      ],
     };
   },
   computed: {},

client/src/components/TableDialog.vue

@@ -23,7 +23,11 @@
       >
         Create Table
       </v-card-title>
-      <file-upload-form :types="types" :workspace="workspace" @success="uploadSuccess" />
+      <file-upload-form
+        :types="types"
+        :workspace="workspace"
+        @success="uploadSuccess"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -32,7 +36,7 @@
 import Vue from 'vue';
 
 import api from '@/api';
-import { FileTypeTable } from '@/types';
+import { FileType } from '@/types';
 import FileUploadForm from '@/components/FileUploadForm.vue';
 
 
@@ -48,9 +52,14 @@ export default Vue.extend({
   data() {
     return {
       tableDialog: false,
-      types: {
-        csv: {extension: ['csv'], queryCall: 'csv'},
-      } as FileTypeTable,
+      types: [
+        {
+          extension: ['csv'],
+          queryCall: 'csv',
+          hint: 'Comma Separated Value file',
+          displayName: 'CSV',
+        },
+      ] as FileType[],
     };
   },
   methods: {

client/src/types.ts

@@ -13,6 +13,8 @@ export interface TableRow {
 }
 
 export interface FileType {
+  displayName: string;
+  hint: string;
   extension: string[];
   queryCall: UploadType;
 }