Improve the network builder UI, check on the status of networks that are building

components.d.ts

@@ -14,7 +14,7 @@ declare module 'vue' {
     DeleteTableDialog: typeof import('./src/components/DeleteTableDialog.vue')['default']
     DeleteWorkspaceDialog: typeof import('./src/components/DeleteWorkspaceDialog.vue')['default']
     DownloadDialog: typeof import('./src/components/DownloadDialog.vue')['default']
-    NetworkCreationTool: typeof import('./src/components/NetworkCreationTool.vue')['default']
+    NetworkBuilder: typeof import('./src/components/NetworkBuilder.vue')['default']
     NetworkPanel: typeof import('./src/components/NetworkPanel.vue')['default']
     PermissionsDialog: typeof import('./src/components/PermissionsDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -61,7 +61,6 @@ declare module 'vue' {
     VOverlay: typeof import('vuetify/lib')['VOverlay']
     VProgressCircular: typeof import('vuetify/lib')['VProgressCircular']
     VProgressLinear: typeof import('vuetify/lib')['VProgressLinear']
-    VResponsive: typeof import('vuetify/lib')['VResponsive']
     VRow: typeof import('vuetify/lib')['VRow']
     VScrollXTransition: typeof import('vuetify/lib')['VScrollXTransition']
     VSelect: typeof import('vuetify/lib')['VSelect']

package.json

@@ -29,7 +29,7 @@
     "direct-vuex": "^0.10.4",
     "eslint-import-resolver-alias": "^1.1.2",
     "lodash": "^4.17.21",
-    "multinet": "0.21.15",
+    "multinet": "0.23.1",
     "multinet-components": "^0.0.4",
     "papaparse": "^5.3.0",
     "unplugin-vue-components": "^0.23.0",

src/components/CreateModifyDialog.vue

@@ -36,10 +36,10 @@
       </div>
     </v-card>
     <v-card v-else-if="dialogStep === 1">
-      <NetworkCreationTool
+      <NetworkBuilder
         v-if="firstChosen === 0"
         :workspace="workspace"
-        @success="dialog = false"
+        @success="() => { dialog = false; emit('success') }"
         @back="firstChosen = undefined; dialogStep -= 1"
       />
       <TableNetworkUploadStepper
@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import store from '@/store';
 import { computed, ref, watch } from 'vue';
-import NetworkCreationTool from './NetworkCreationTool.vue';
+import NetworkBuilder from './NetworkBuilder.vue';
 import TableNetworkUploadStepper from './TableNetworkUploadStepper.vue';
 
 const props = defineProps<{

src/components/NetworkCreationTool.vue → src/components/NetworkBuilder.vue

@@ -23,7 +23,7 @@
       <v-divider />
 
       <!-- Data tables -->
-      <template v-if="tableSamples.length">
+      <div>
         <v-row no-gutters>
           <v-col cols="2">
             <v-list class="px-4">
@@ -64,32 +64,34 @@
             </v-list>
           </v-col>
           <v-divider vertical />
-          <v-col cols="10" class="px-4">
-            <v-row
-              no-gutters
-              justify="start"
-            >
+          <v-col cols="10" class="px-4 mt-2">
+            <v-row justify="start">
+              <p v-if="visibleTableSamples.length === 0" class="pa-4 mt-2">
+                {{ tableSamples.length > 0
+                  ? 'Please select some tables on the left that you\'d like to include in your network.'
+                  : "You haven't uploaded any tables. This view only works when you have some tables uploaded. Return to the previous step to upload data tables."
+                }}
+              </p>
               <v-card
                 v-for="sample in visibleTableSamples"
                 :key="sample.table.name"
                 raised
                 outlined
-                class="mt-4"
+                class="mt-4 ma-2"
               >
-                <v-card-title class="primary white--text">
+                <v-card-title class="grey lighten-3">
                   <v-row class="ma-0">
                     {{ sample.table.name }}
                     <v-spacer />
                     <v-switch
-                      dark
                       hide-details
                       class="ma-0"
                       :disabled="edgeTable !== undefined && edgeTable.table.name !== sample.table.name"
                       :value="edgeTable !== undefined && edgeTable.table.name === sample.table.name"
                       @change="setEdgeTable(sample.table, $event)"
                     >
                       <template #label>
-                        <span class="white--text">Edge Table</span>
+                        Edge Table
                       </template>
                     </v-switch>
                   </v-row>
@@ -104,25 +106,24 @@
                     disable-sort
                   >
                     <template #header="{ props: { headers } }">
-                      <thead dark>
+                      <thead>
                         <tr>
                           <th
                             v-for="{ value: col } in headers"
                             :key="`${sample.table.name}:${col}`"
                             style="width: 1px; white-space: nowrap;"
+                            class="pt-2 pb-4 grey lighten-3"
                           >
                             <!-- Include/Exclude Column -->
                             <v-icon
                               v-if="!excludedMap[sample.table.name][col]"
                               :disabled="checkboxDisabled(sample.table, col)"
-                              dark
                               @click="excludedMap[sample.table.name][col] = true"
                             >
                               mdi-checkbox-marked
                             </v-icon>
                             <v-icon
                               v-else
-                              dark
                               :disabled="checkboxDisabled(sample.table, col)"
                               @click="excludedMap[sample.table.name][col] = false"
                             >
@@ -139,14 +140,15 @@
                               @input="menuOpen = $event"
                             >
                               <template #activator="{ on }">
-                                <v-icon
-                                  :color="linkColor(sample.table, col)"
-                                  dark
-                                  :class="{ 'disable-events': linkDisabled(sample.table) }"
-                                  v-on="on"
-                                >
-                                  mdi-link
-                                </v-icon>
+                                <v-btn icon>
+                                  <v-icon
+                                    :color="linkColor(sample.table, col)"
+                                    :class="{ 'disable-events': linkDisabled(sample.table) }"
+                                    v-on="on"
+                                  >
+                                    mdi-link
+                                  </v-icon>
+                                </v-btn>
                               </template>
                               <v-card max-height="30vh">
                                 <!-- Edge Table -->
@@ -221,7 +223,6 @@
                                 <v-icon
                                   :color="linkColor(sample.table, col, true)"
                                   :class="{ 'disable-events': joinDisabled(sample.table, col) }"
-                                  dark
                                   v-on="on"
                                 >
                                   mdi-call-merge
@@ -288,7 +289,7 @@
             </v-row>
           </v-col>
         </v-row>
-      </template>
+      </div>
     </v-card-text>
 
     <v-card-actions class="px-4 py-3">
@@ -304,6 +305,7 @@
         id="create-table"
         color="primary"
         :disabled="!valid"
+        :loading="networkCreating"
         @click="createNetwork"
       >
         Create
@@ -408,11 +410,11 @@ const inNetworkTables = computed(() => [
   targetTable.value?.joined?.table,
 ]);
 
-    interface ExclusionMap {
-      [key: string]: {
-        [innerKey: string]: boolean
-      }
-    }
+interface ExclusionMap {
+  [key: string]: {
+    [innerKey: string]: boolean
+  }
+}
 
 // Remove any no longer visible links
 watch(tablesVisible, (visible) => {
@@ -603,7 +605,7 @@ async function init() {
 
     const rows = res.data.results;
     const headers: DataTableHeader[] = rows.length > 0 ? Object.keys(rows[0])
-      .filter((header) => !['_id', '_key', '_rev'].includes(header))
+      .filter((header) => !['_id', '_rev'].includes(header))
       .map((header) => ({ text: header, value: header }))
       : [];
 
@@ -619,7 +621,7 @@ async function init() {
 
   // Store value in tableSamples
   tableSamples.value = sortedSamples;
-  tablesVisible.value = reactive(sortedSamples.reduce((obj, cur) => ({ ...obj, [cur.table.name]: true }), {}));
+  tablesVisible.value = reactive(sortedSamples.reduce((obj, cur) => ({ ...obj, [cur.table.name]: false }), {}));
 }
 
 // Load table from workspace and store in tableSamples
@@ -812,7 +814,6 @@ function columnItemText(item: CSVRow, key: string) {
   return `${truncated}...`;
 }
 
-/* eslint-disable prefer-destructuring */
 function linkColor(table: BaseTable, col: string, join = false) {
   // There's at most 5 links
   // Edge -> Source
@@ -874,14 +875,14 @@ function linkColor(table: BaseTable, col: string, join = false) {
 
   return undefined;
 }
-/* eslint-enable prefer-destructuring */
 
 // Denotes whether the dialog is in a submittable state
 const valid = computed(() => !!(
   objectNameIsValid(networkName.value)
       && edgeTable.value?.table
       && sourceTable.value
       && targetTable.value
+      && !tableSamples.value.map((sample) => sample.table.name).includes(networkName.value)
 ));
 
 const networkCreating = ref(false);
@@ -932,11 +933,6 @@ async function createNetwork() {
 </script>
 
 <style scoped>
-.upload-preview table th, .table-title {
-  background-color: #1976d2 !important;
-  color: #fff !important;
-}
-
 .disable-events {
   pointer-events: none
 }

src/utils/files.ts

@@ -55,8 +55,8 @@ function generateColumnTypes(sampleRows: Record<string, unknown>[]) {
     const uniqueValuesInSample = new Set(valuesInSample);
 
     const isKey = field === '_key' || field === 'id';
-    const isSource = field === '_from' || field === 'source';
-    const isTarget = field === '_to' || field === 'target';
+    const isSource = (field === '_from' || field === 'source') && valuesInSample.every((value) => value.split('/').length === 2);
+    const isTarget = (field === '_to' || field === 'target') && valuesInSample.every((value) => value.split('/').length === 2);
     const isLabel = field.toLocaleLowerCase().includes('name') || field === 'label';
     const boolean = isBoolean(uniqueValuesInSample);
     const category = uniqueValuesInSample.size <= 10 && !(uniqueValuesInSample.size === sampleRows.length);

src/views/WorkspaceDetail.vue

@@ -80,10 +80,11 @@
         />
         <v-spacer />
 
-        <create-modify-dialog :workspace="workspace" @success="startCheckingUpload" />
+        <create-modify-dialog :workspace="workspace" @success="startChecking" />
         <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
+      <!-- Display upload status -->
       <v-row
         v-for="upload in uploads"
         :key="upload.id"
@@ -124,6 +125,28 @@
         </v-col>
       </v-row>
 
+      <!-- Display network building status -->
+      <v-alert
+        v-if="networkBuildRequests.length > 0"
+        border="left"
+        color="blue"
+        type="info"
+        class="mb-0"
+      >
+        <v-row align="center">
+          <v-col class="grow">
+            Your network is being built
+          </v-col>
+          <v-col class="shrink">
+            <v-progress-circular
+              indeterminate
+              color="white"
+              size="26"
+            />
+          </v-col>
+        </v-row>
+      </v-alert>
+
       <session-panel :apps="apps" :workspace="workspace" :loading="loading" />
 
       <v-row class="ma-0">
@@ -262,6 +285,30 @@ async function update(this: any) {
 watch(() => props.workspace, () => update());
 watch(localWorkspace, () => { requestError.value = null; });
 
+const networkBuildRequests = ref<number[]>([]);
+async function checkNetworkBuilds() {
+  networkBuildRequests.value = await api.networkBuildRequests(props.workspace);
+
+  if (networkBuildRequests.value.length === 0) {
+    update();
+    return true;
+  }
+  return false;
+}
+
+async function startCheckingNetworkBuilds() {
+  let timeout = 30 * 1000;
+  const interval = 3 * 1000;
+
+  const checkUploadInterval = setInterval(async () => {
+    if ((await checkNetworkBuilds()) || timeout <= 0) {
+      clearInterval(checkUploadInterval);
+    }
+
+    timeout -= interval;
+  }, interval);
+}
+
 async function checkUpload(upload: { id: number }) {
   const newUploadStatus = await api.uploads(props.workspace);
   store.commit.setUploads(newUploadStatus.results);
@@ -291,6 +338,13 @@ async function startCheckingUpload(upload: { id: number }) {
   }, interval);
 }
 
+function startChecking(upload: { id: number } | undefined) {
+  if (upload !== undefined) {
+    startCheckingUpload(upload);
+  }
+  startCheckingNetworkBuilds();
+}
+
 update();
 </script>
 

yarn.lock

@@ -4196,10 +4196,10 @@ multinet-components@^0.0.4:
   resolved "https://registry.yarnpkg.com/multinet-components/-/multinet-components-0.0.4.tgz#26c519733ce72145f5ebf81de1333b294903ee4b"
   integrity sha512-T3r/UsB4r4OLZXFx8uIbgYKls1CQ2q8yerySCWQHEbJ0Jga57g2sIyHEpdecXo4Rf3yH/9ZcvhAqBIrV1hnF6A==
 
-multinet@0.21.15:
-  version "0.21.15"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.21.15.tgz#90d10eda63a646a9af972ce24c5b67d5f23278dd"
-  integrity sha512-UW+m3I61JvGTQf3YrmJRWXARcLMWInKXpjmXfhqeRwmqu8fwFIy+duLkF/jJb3qGxMKUWshEb72EP8JBAxX4uw==
+multinet@0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.23.1.tgz#6ee659f996bf1c1ad32d2a6ed63937c6f9e123dc"
+  integrity sha512-iyDGqKGMK5ZK1QiQPzku14mPkI7JQfHtytMlfwxs3tU0RnDaH+5GH+698Q5Hcnl7ONAF8ognLey1W3aTxseiHQ==
   dependencies:
     axios "^0.21.1"
     django-s3-file-field "^0.1.2"