Merge pull request #297 from multinet-app/auto_create_graphs

Automatically create graph on relevant filetype uploaders

client/package.json

@@ -21,7 +21,7 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.5",
     "material-design-icons-iconfont": "^5.0.1",
-    "multinet": "0.7.0",
+    "multinet": "0.8.0",
     "vue": "^2.6.10",
     "vue-gtag": "^1.2.1",
     "vue-router": "^3.0.2",

client/src/components/FileUploadForm.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-card>
+    <v-card-text class="px-4 pt-4 pb-1">
+      <v-layout wrap>
+        <v-flex class="pr-2">
+          <v-file-input
+            id="file-selector"
+            clearable
+            filled
+            :label="fileInputPlaceholder"
+            prepend-icon=""
+            prepend-inner-icon="attach_file"
+            single-line
+            @change="handleFileInput"
+            :error-messages="fileUploadError"
+          />
+        </v-flex>
+        <v-flex xs6 class="pl-2" v-if="fileTypeSelector">
+          <v-select
+            id="file-type"
+            filled
+            label="File type"
+            v-if="typeList.length"
+            v-model="selectedType"
+            :items="typeList"
+          />
+        </v-flex>
+      </v-layout>
+      <v-layout wrap>
+        <v-flex>
+          <v-text-field
+            id="table-name"
+            filled
+            v-model="newTable"
+            :label="namePlaceholder"
+            :error-messages="tableCreationError"
+          />
+        </v-flex>
+      </v-layout>
+    </v-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions class="px-4 py-3">
+      <v-spacer></v-spacer>
+      <v-btn id="create-table" :disabled="createDisabled" @click="createTable">
+        {{createButtonText}}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { UploadType, validUploadType } from 'multinet';
+import Vue, { PropType } from 'vue';
+
+import api from '@/api';
+import { FileTypeTable } from '@/types';
+
+
+export default Vue.extend({
+  name: 'FileUploadForm',
+
+  props: {
+    fileTypeSelector: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    namePlaceholder: {
+      type: String,
+      default: 'Table name',
+      required: false,
+    },
+    fileInputPlaceholder: {
+      type: String,
+      default: 'Upload file',
+      required: false,
+    },
+    createButtonText: {
+      type: String,
+      default: 'Create',
+      required: false,
+    },
+    workspace: {
+      type: String,
+      required: true,
+    },
+    types: {
+      type: Object as PropType<FileTypeTable>,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      tableCreationError: null as string | null,
+      fileUploadError: null as string | null,
+      selectedType: null as string | 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;
+    },
+  },
+
+  methods: {
+    handleFileInput(file: File) {
+      this.file = file;
+      const fileType = this.fileType(file);
+
+      if (fileType) {
+        this.selectedType = fileType;
+        this.fileUploadError = null;
+      } else {
+        this.fileUploadError = 'Invalid file type';
+      }
+    },
+
+    async createTable() {
+      try {
+        if (this.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,
+        });
+
+        this.tableCreationError = null;
+        this.$emit('success');
+      } catch (err) {
+        this.tableCreationError = err.response.data.message;
+      }
+    },
+
+    fileType(file: File): string | 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)) {
+          return type;
+        }
+      }
+      return null;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.new-button {
+  margin: 49px 10px 0 0;
+  z-index: 1;
+}
+</style>

client/src/components/GraphCreateForm.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-card>
+    <v-card-text class="px-4 pt-4 pb-1">
+      <v-layout wrap>
+        <v-flex>
+          <v-select
+            filled
+            label="Choose edge table"
+            v-model="graphEdgeTable"
+            :items="edgeTables"
+          />
+        </v-flex>
+      </v-layout>
+
+      <v-layout wrap>
+        <v-flex>
+          <v-text-field
+            filled
+            label="Network name"
+            v-model="newGraph"
+            :error-messages="graphCreationErrors"
+          />
+        </v-flex>
+      </v-layout>
+    </v-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions class="px-4 py-3">
+      <v-spacer></v-spacer>
+      <v-btn
+        depressed
+        :disabled="graphCreateDisabled"
+        @click="createGraph"
+      >create network</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import api from '@/api';
+
+export default Vue.extend({
+  name: 'GraphCreateForm',
+  props: {
+    edgeTables: Array,
+    workspace: String,
+  },
+  data() {
+    return {
+      graphCreationErrors: [] as string[],
+      graphEdgeTable: null as string | null,
+      newGraph: '',
+    };
+  },
+  computed: {
+    graphCreateDisabled(): boolean {
+      return !this.graphEdgeTable || !this.newGraph;
+    },
+  },
+  methods: {
+    async createGraph() {
+      const { workspace, newGraph } = this;
+
+      if (this.graphEdgeTable === null) {
+        throw new Error('this.graphEdgeTable must not be null');
+      }
+
+      try {
+        await api.createGraph(workspace, newGraph, {
+          edgeTable: this.graphEdgeTable,
+        });
+        this.graphCreationErrors = [];
+        this.$emit('success');
+      } catch (error) {
+        const message = `Network "${this.newGraph}" already exists.`;
+        this.graphCreationErrors = [message];
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.new-button {
+  margin: 49px 10px 0 0;
+  z-index: 1;
+}
+</style>