diff --git a/components.d.ts b/components.d.ts
index 1679bf1..a7b50bd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,21 +9,19 @@ declare module 'vue' {
     AboutDialog: typeof import('./src/components/AboutDialog.vue')['default']
     AboutText: typeof import('./src/components/AboutText.vue')['default']
     AExt: typeof import('./src/components/AExt.vue')['default']
+    CreateModifyDialog: typeof import('./src/components/CreateModifyDialog.vue')['default']
     DeleteNetworkDialog: typeof import('./src/components/DeleteNetworkDialog.vue')['default']
     DeleteTableDialog: typeof import('./src/components/DeleteTableDialog.vue')['default']
     DeleteWorkspaceDialog: typeof import('./src/components/DeleteWorkspaceDialog.vue')['default']
     DownloadDialog: typeof import('./src/components/DownloadDialog.vue')['default']
-    NetworkCreateForm: typeof import('./src/components/NetworkCreateForm.vue')['default']
-    NetworkDialog: typeof import('./src/components/NetworkDialog.vue')['default']
-    NetworkMultiCSVUploadForm: typeof import('./src/components/NetworkMultiCSVUploadForm.vue')['default']
+    NetworkCreationTool: typeof import('./src/components/NetworkCreationTool.vue')['default']
     NetworkPanel: typeof import('./src/components/NetworkPanel.vue')['default']
-    NetworkUploadForm: typeof import('./src/components/NetworkUploadForm.vue')['default']
     PermissionsDialog: typeof import('./src/components/PermissionsDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SessionPanel: typeof import('./src/components/SessionPanel.vue')['default']
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']
-    TableDialog: typeof import('./src/components/TableDialog.vue')['default']
+    TableNetworkUploadStepper: typeof import('./src/components/TableNetworkUploadStepper.vue')['default']
     TablePanel: typeof import('./src/components/TablePanel.vue')['default']
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
@@ -69,7 +67,6 @@ declare module 'vue' {
     VRow: typeof import('vuetify/lib')['VRow']
     VScrollXTransition: typeof import('vuetify/lib')['VScrollXTransition']
     VSelect: typeof import('vuetify/lib')['VSelect']
-    VSheet: typeof import('vuetify/lib')['VSheet']
     VSkeletonLoader: typeof import('vuetify/lib')['VSkeletonLoader']
     VSpacer: typeof import('vuetify/lib')['VSpacer']
     VStepper: typeof import('vuetify/lib')['VStepper']
diff --git a/package.json b/package.json
index 055a7e8..ebdf7ad 100644
--- a/package.json
+++ b/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.13",
+    "multinet": "0.21.14",
     "multinet-components": "^0.0.4",
     "papaparse": "^5.3.0",
     "unplugin-vue-components": "^0.23.0",
diff --git a/src/components/CreateModifyDialog.vue b/src/components/CreateModifyDialog.vue
new file mode 100644
index 0000000..d498ae8
--- /dev/null
+++ b/src/components/CreateModifyDialog.vue
@@ -0,0 +1,92 @@
+<template>
+  <v-dialog v-model="dialog">
+    <template #activator="{ on }">
+      <v-btn
+        id="add-csv-network"
+        color="blue darken-2"
+        dark
+        :disabled="!userCanEdit"
+        v-on="on"
+      >
+        Upload or Create
+      </v-btn>
+    </template>
+    <v-card v-if="dialogStep === 0">
+      <div class="d-flex flex-column pa-8" style="align-items: center;">
+        <v-btn-toggle
+          v-model="firstChosen"
+          class="my-4"
+          @change="dialogStep += 1"
+        >
+          <v-btn :color="firstChosen === 0 ? 'blue darken-2 white--text' : ''" width="500" height="400">
+            <div class="pa-4 text-center d-flex flex-column justify-center text-body-2">
+              <span class="text-h6">Create Network</span>
+              <br />
+              from existing tables
+            </div>
+          </v-btn>
+          <v-btn :color="firstChosen === 1 ? 'blue darken-2 white--text' : ''" width="500" height="400">
+            <div class="pa-4 text-center d-flex flex-column justify-center text-body-2">
+              <span class="text-h6">Upload File</span>
+              <br />
+              to create a network or table
+            </div>
+          </v-btn>
+        </v-btn-toggle>
+      </div>
+    </v-card>
+    <v-card v-else-if="dialogStep === 1">
+      <NetworkCreationTool
+        v-if="firstChosen === 0"
+        :workspace="workspace"
+        @success="dialog = false"
+        @back="firstChosen = undefined; dialogStep -= 1"
+      />
+      <TableNetworkUploadStepper
+        v-else-if="firstChosen === 1"
+        :workspace="props.workspace"
+        @success="dialog = false"
+        @back="firstChosen = undefined; dialogStep -= 1"
+      />
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import store from '@/store';
+import { computed, ref, watch } from 'vue';
+import NetworkCreationTool from './NetworkCreationTool.vue';
+import TableNetworkUploadStepper from './TableNetworkUploadStepper.vue';
+
+const props = defineProps<{
+  workspace: string;
+}>();
+
+const userCanEdit = computed(() => store.getters.userCanEdit);
+
+const dialog = ref(false);
+const dialogStep = ref(0);
+
+// First step vars
+const firstChosen = ref<number | undefined>(undefined);
+
+// Handle closing of the dialog
+function resetDialog() {
+  // Delay the reset so that the dialog can close first
+  setTimeout(() => {
+    dialogStep.value = 0;
+    firstChosen.value = undefined;
+  }, 250);
+}
+watch(dialog, (val) => {
+  if (val === false) {
+    resetDialog();
+  }
+});
+</script>
+
+<style>
+.theme--light.v-btn--active::before {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/NetworkCreateForm.vue b/src/components/NetworkCreateForm.vue
deleted file mode 100644
index 59fbbbb..0000000
--- a/src/components/NetworkCreateForm.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <v-card>
-    <v-card-text class="px-4 pt-4 pb-1">
-      <v-row>
-        <v-col>
-          <v-select
-            v-model="networkEdgeTable"
-            dense
-            :items="edgeTables"
-            label="Choose edge table"
-            outlined
-          />
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col>
-          <v-text-field
-            v-model="newNetwork"
-            dense
-            :error-messages="networkCreationErrors"
-            :rules="[() => objectNameIsValid(newNetwork) || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
-            label="Network name"
-            outlined
-          />
-        </v-col>
-      </v-row>
-    </v-card-text>
-
-    <v-divider />
-
-    <v-card-actions class="px-4 py-3">
-      <v-spacer />
-      <v-btn
-        depressed
-        color="primary"
-        :disabled="networkCreateDisabled || loading"
-        :loading="loading"
-        @click="createNetwork"
-      >
-        create network
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts">
-import type { PropType, Ref } from 'vue';
-import {
-  computed, defineComponent, ref,
-} from 'vue';
-
-import api from '@/api';
-import { objectNameIsValid } from '@/utils/validation';
-
-export default defineComponent({
-  name: 'NetworkCreateForm',
-  props: {
-    edgeTables: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-
-    workspace: {
-      type: String as PropType<string>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const networkCreationErrors: Ref<string[]> = ref([]);
-    const networkEdgeTable: Ref<string | null> = ref(null);
-    const newNetwork = ref('');
-    const loading = ref(false);
-
-    const networkCreateDisabled = computed(() => !networkEdgeTable.value || !objectNameIsValid(newNetwork.value));
-
-    function clear() {
-      networkEdgeTable.value = null;
-      newNetwork.value = '';
-      loading.value = false;
-    }
-
-    async function createNetwork() {
-      if (networkEdgeTable.value === null) {
-        throw new Error('this.networkEdgeTable must not be null');
-      }
-
-      try {
-        loading.value = true;
-        await api.createNetwork(props.workspace, newNetwork.value, {
-          edgeTable: networkEdgeTable.value,
-        });
-        networkCreationErrors.value = [];
-        clear();
-        emit('success');
-      } catch (error) {
-        const message = `Network "${newNetwork.value}" already exists.`;
-        networkCreationErrors.value = [message];
-      }
-    }
-
-    return {
-      networkCreationErrors,
-      networkEdgeTable,
-      newNetwork,
-      loading,
-      networkCreateDisabled,
-      createNetwork,
-      objectNameIsValid,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.new-button {
-  margin: 49px 10px 0 0;
-  z-index: 1;
-}
-</style>
diff --git a/src/components/NetworkCreationTool.vue b/src/components/NetworkCreationTool.vue
new file mode 100644
index 0000000..ae0b267
--- /dev/null
+++ b/src/components/NetworkCreationTool.vue
@@ -0,0 +1,943 @@
+<template>
+  <div>
+    <v-card-title>
+      <v-row>
+        <v-spacer />
+        <v-col cols="8">
+          <v-text-field
+            v-model="networkName"
+            :rules="[() => objectNameIsValid(networkName) || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
+            label="Choose a name for your new network"
+          />
+        </v-col>
+        <v-spacer />
+      </v-row>
+    </v-card-title>
+
+    <v-card-text style="height: 70vh; overflow: scroll;">
+      <v-progress-linear
+        v-if="networkCreating"
+        indeterminate
+      />
+
+      <v-divider />
+
+      <!-- Data tables -->
+      <template v-if="tableSamples.length">
+        <v-row no-gutters>
+          <v-col cols="2">
+            <v-list class="px-4">
+              <v-subheader>Visible Tables</v-subheader>
+              <v-list-item class="px-0">
+                <v-list-item-action>
+                  <v-checkbox
+                    :input-value="allTablesVisible"
+                    @change="selectAllTables"
+                  />
+                </v-list-item-action>
+                <v-list-item-title>
+                  All Tables
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-tooltip
+                v-for="sample in tableSamples"
+                :key="sample.table.name"
+                right
+              >
+                <template #activator="{ on, attrs }">
+                  <v-list-item
+                    class="px-0"
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    <v-list-item-action>
+                      <v-checkbox v-model="tablesVisible[sample.table.name]" />
+                    </v-list-item-action>
+                    <v-list-item-title>
+                      {{ sample.table.name }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+                <span>{{ sample.table.name }}</span>
+              </v-tooltip>
+            </v-list>
+          </v-col>
+          <v-divider vertical />
+          <v-col cols="10" class="px-4">
+            <v-row
+              no-gutters
+              justify="start"
+            >
+              <v-card
+                v-for="sample in visibleTableSamples"
+                :key="sample.table.name"
+                raised
+                outlined
+                class="mt-4"
+              >
+                <v-card-title class="primary white--text">
+                  <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>
+                      </template>
+                    </v-switch>
+                  </v-row>
+                </v-card-title>
+                <v-card-text class="pa-0">
+                  <v-data-table
+                    class="upload-preview"
+                    hide-default-footer
+                    hide-default-header
+                    :headers="sample.headers"
+                    :items="sample.rows"
+                    disable-sort
+                  >
+                    <template #header="{ props: { headers } }">
+                      <thead dark>
+                        <tr>
+                          <th
+                            v-for="{ value: col } in headers"
+                            :key="`${sample.table.name}:${col}`"
+                            style="width: 1px; white-space: nowrap;"
+                          >
+                            <!-- 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"
+                            >
+                              mdi-checkbox-blank-outline
+                            </v-icon>
+
+                            <!-- Column name -->
+                            <span>{{ col }}</span>
+
+                            <!-- Link to other table column -->
+                            <v-menu
+                              v-if="mainTables.some((t) => t !== undefined && t.name === sample.table.name)"
+                              :close-on-content-click="false"
+                              @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>
+                              </template>
+                              <v-card max-height="30vh">
+                                <!-- Edge Table -->
+                                <v-card-subtitle
+                                  class="py-1 px-2"
+                                >
+                                  <span v-if="linkExists(sample.table, col, ['source', 'target'])">
+                                    Remove Link
+                                  </span>
+                                  <span v-else>
+                                    Select Source/Target
+                                  </span>
+                                </v-card-subtitle>
+
+                                <template v-if="!(linkExists(sample.table, col, ['source', 'target']) || selectingSource || selectingTarget)">
+                                  <v-list
+                                    class="my-0 py-0"
+                                    dense
+                                  >
+                                    <v-list-item
+                                      :disabled="sourceTable !== undefined"
+                                      @click="selectingSource = true"
+                                    >
+                                      Source
+                                    </v-list-item>
+                                    <v-list-item
+                                      :disabled="targetTable !== undefined"
+                                      @click="selectingTarget = true"
+                                    >
+                                      Target
+                                    </v-list-item>
+                                  </v-list>
+                                </template>
+                                <template v-else>
+                                  <v-list
+                                    class="my-0 py-0"
+                                    dense
+                                  >
+                                    <template v-if="linkExists(sample.table, col, ['source', 'target'])">
+                                      <v-list-item>
+                                        {{ getLinkText(sample.table, col, ['source', 'target']) }}
+                                        <v-spacer />
+                                        <v-btn
+                                          icon
+                                          right
+                                          @click.stop="removeColumnLink(sample.table, col)"
+                                        >
+                                          <v-icon>mdi-close</v-icon>
+                                        </v-btn>
+                                      </v-list-item>
+                                    </template>
+                                    <template v-else>
+                                      <v-list-item
+                                        v-for="otherCol in getOtherTableColumns(sample.table.name)"
+                                        :key="`${sample.table.name}-${otherCol.table.name}-${otherCol.column}`"
+                                        @click="linkSourceOrTargetTable(col, otherCol.table, otherCol.column)"
+                                      >
+                                        {{ `${otherCol.table.name}:${otherCol.column}` }}
+                                      </v-list-item>
+                                    </template>
+                                  </v-list>
+                                </template>
+                              </v-card>
+                            </v-menu>
+
+                            <v-menu
+                              v-if="inNetworkTables.some((t) => t !== undefined && t.name === sample.table.name)"
+                              :close-on-content-click="false"
+                              @input="menuOpen = $event"
+                            >
+                              <template #activator="{ on }">
+                                <v-icon
+                                  :color="linkColor(sample.table, col, true)"
+                                  :class="{ 'disable-events': joinDisabled(sample.table, col) }"
+                                  dark
+                                  v-on="on"
+                                >
+                                  mdi-call-merge
+                                </v-icon>
+                              </template>
+                              <v-card max-height="30vh">
+                                <!-- Node Table -->
+                                <v-card-subtitle class="py-1 px-2">
+                                  <span v-if="linkExists(sample.table, col, ['join'])">
+                                    Remove Link
+                                  </span>
+                                  <span v-else>
+                                    Join From
+                                  </span>
+                                </v-card-subtitle>
+                                <v-list
+                                  class="my-0 py-0"
+                                  dense
+                                >
+                                  <template v-if="linkExists(sample.table, col, ['join'])">
+                                    <v-list-item>
+                                      {{ getLinkText(sample.table, col, ['join']) }}
+                                      <v-spacer />
+                                      <v-btn
+                                        icon
+                                        right
+                                        @click.stop="removeColumnLink(sample.table, col, true)"
+                                      >
+                                        <v-icon>mdi-close</v-icon>
+                                      </v-btn>
+                                    </v-list-item>
+                                  </template>
+                                  <template v-else>
+                                    <v-list-item
+                                      v-for="otherCol in getOtherTableColumns(sample.table.name)"
+                                      :key="`${sample.table.name}-${otherCol.table.name}-${otherCol.column}`"
+                                      @click="joinTable(sample.table, col, otherCol.table, otherCol.column)"
+                                    >
+                                      {{ `${otherCol.table.name}:${otherCol.column}` }}
+                                    </v-list-item>
+                                  </template>
+                                </v-list>
+                              </v-card>
+                            </v-menu>
+                          </th>
+                        </tr>
+                      </thead>
+                    </template>
+                    <template #item="{ item, headers }">
+                      <tr>
+                        <td
+                          v-for="header in headers"
+                          :key="header.value"
+                          :class="getColumnItemClass(sample.table, header.value)"
+                          style="width: 1px; white-space: nowrap;"
+                        >
+                          {{ columnItemText(item, header.value) }}
+                        </td>
+                      </tr>
+                    </template>
+                  </v-data-table>
+                </v-card-text>
+              </v-card>
+            </v-row>
+          </v-col>
+        </v-row>
+      </template>
+    </v-card-text>
+
+    <v-card-actions class="px-4 py-3">
+      <v-spacer />
+      <v-btn
+        color="blue darken-2"
+        text
+        @click="emit('back')"
+      >
+        Back
+      </v-btn>
+      <v-btn
+        id="create-table"
+        color="primary"
+        :disabled="!valid"
+        @click="createNetwork"
+      >
+        Create
+      </v-btn>
+    </v-card-actions>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed, onMounted, reactive, ref, watch, watchEffect,
+} from 'vue';
+import type { DataTableHeader } from 'vuetify';
+
+import api from '@/api';
+import store from '@/store';
+import { objectNameIsValid } from '@/utils/validation';
+
+const emit = defineEmits(['success', 'back']);
+
+const LinkColors = [
+  'amber',
+  'green',
+  'red',
+  'brown',
+  'orange',
+  'lime',
+  'purple',
+  'cyan',
+];
+
+interface BaseTable {
+  name: string;
+  excluded: string[];
+}
+
+interface Link {
+  local: string;
+  foreign: string;
+}
+
+interface FullTable extends BaseTable {
+  joined?: {
+    table: BaseTable;
+    link: Link;
+  };
+}
+
+function isFullTable(table: FullTable | BaseTable): table is FullTable {
+  return 'joined' in table;
+}
+
+interface EdgeTableDef {
+  table: FullTable;
+  source?: Link;
+  target?: Link;
+}
+
+// For fully constructed network
+interface CSVNetwork {
+  name: string;
+  edge: EdgeTableDef;
+  source_table: FullTable;
+  target_table: FullTable;
+}
+
+type CSVRow = {[key: string]: string};
+interface CSVPreview {
+  headers: DataTableHeader[];
+  rows: CSVRow[];
+  table: BaseTable;
+}
+const workspace = computed(() => store.state.currentWorkspace);
+
+const tableSamples = ref<CSVPreview[]>([]);
+const tablesVisible = ref<Record<string, boolean>>({});
+const visibleTableSamples = computed(
+  () => tableSamples.value.filter(
+    (sample) => tablesVisible.value[sample.table.name] === true,
+  ),
+);
+const allTablesVisible = computed(() => visibleTableSamples.value.length === tableSamples.value.length);
+function selectAllTables(on: boolean | null) {
+  // Coerce null to boolean
+  const state = !!on;
+  Object.keys(tablesVisible.value).forEach((key) => {
+    tablesVisible.value[key] = state;
+  });
+}
+
+// Network def
+const networkName = ref('');
+const edgeTable = ref<EdgeTableDef>();
+const sourceTable = ref<FullTable>();
+const targetTable = ref<FullTable>();
+
+const mainTables = computed(() => [edgeTable.value?.table, sourceTable.value, targetTable.value]);
+const inNetworkTables = computed(() => [
+  ...mainTables.value,
+  edgeTable.value?.table.joined?.table,
+  sourceTable.value?.joined?.table,
+  targetTable.value?.joined?.table,
+]);
+
+    interface ExclusionMap {
+      [key: string]: {
+        [innerKey: string]: boolean
+      }
+    }
+
+// Remove any no longer visible links
+watch(tablesVisible, (visible) => {
+  const invisibleTables = tableSamples.value.filter((s) => visible[s.table.name] === false);
+  invisibleTables.forEach((sample) => {
+    const { table } = sample;
+
+    // Edge table + joined
+    if (edgeTable.value?.table.name === table.name) {
+      edgeTable.value = undefined;
+      sourceTable.value = undefined;
+      targetTable.value = undefined;
+      return;
+    }
+    if (edgeTable.value?.table.joined?.table.name === table.name) {
+      edgeTable.value.table.joined = undefined;
+      return;
+    }
+
+    // Source table + joined
+    if (sourceTable.value?.name === table.name) {
+      sourceTable.value = undefined;
+      if (edgeTable.value) {
+        edgeTable.value.source = undefined;
+      }
+      return;
+    }
+    if (sourceTable.value?.joined?.table.name === table.name) {
+      sourceTable.value.joined = undefined;
+      return;
+    }
+
+    // Target table + joined
+    if (targetTable.value?.name === table.name) {
+      targetTable.value = undefined;
+      if (edgeTable.value) {
+        edgeTable.value.target = undefined;
+      }
+      return;
+    }
+    if (targetTable.value?.joined?.table.name === table.name) {
+      targetTable.value.joined = undefined;
+    }
+  });
+}, { deep: true });
+
+// Update excluded map when visible tables change
+const excludedMap = ref(reactive({} as ExclusionMap));
+watch(visibleTableSamples, (samples) => {
+  excludedMap.value = reactive(samples.reduce((acc, cur) => (
+    {
+      ...acc,
+      [cur.table.name]: cur.headers.reduce((hacc, hcur) => (
+        {
+          ...hacc,
+          // Default all tables to not excluded
+          [hcur.value]: false,
+        }
+      ), {}),
+    }
+  ), {}));
+});
+
+    type LinkType = 'source' | 'target' | 'join';
+    interface LinkMapValue {
+      table: BaseTable;
+      column: string;
+    }
+const linkMap = computed(() => {
+  const map = {} as Record<string, Record<string, Partial<Record<LinkType, LinkMapValue>>>>;
+  function set(table: string, col: string, type: LinkType, val: LinkMapValue) {
+    if (map[table] === undefined) {
+      map[table] = {};
+    }
+    if (map[table][col] === undefined) {
+      map[table][col] = {};
+    }
+    map[table][col][type] = val;
+  }
+
+  // Edge table
+  if (edgeTable.value?.source && sourceTable.value) {
+    set(edgeTable.value.table.name, edgeTable.value.source.local, 'source', {
+      table: sourceTable.value,
+      column: edgeTable.value.source.foreign,
+    });
+  }
+  if (edgeTable.value?.target && targetTable.value) {
+    set(edgeTable.value.table.name, edgeTable.value.target.local, 'target', {
+      table: targetTable.value,
+      column: edgeTable.value.target.foreign,
+    });
+  }
+  if (edgeTable.value?.table.joined) {
+    set(edgeTable.value.table.name, edgeTable.value.table.joined.link.local, 'join', {
+      table: edgeTable.value.table.joined.table,
+      column: edgeTable.value.table.joined.link.foreign,
+    });
+  }
+
+  // Source table
+  if (sourceTable.value?.joined) {
+    set(sourceTable.value.name, sourceTable.value.joined.link.local, 'join', {
+      table: sourceTable.value.joined.table,
+      column: sourceTable.value.joined.link.foreign,
+    });
+  }
+
+  // Target table
+  if (targetTable.value?.joined) {
+    set(targetTable.value.name, targetTable.value.joined.link.local, 'join', {
+      table: targetTable.value.joined.table,
+      column: targetTable.value.joined.link.foreign,
+    });
+  }
+
+  return map;
+});
+
+function linkExists(table: BaseTable, col: string, types?: LinkType[]) {
+  const entry = linkMap.value[table.name]?.[col];
+  if (entry === undefined) {
+    return false;
+  }
+  if (types === undefined) {
+    return true;
+  }
+
+  const linkTypes = Object.keys(entry) as LinkType[];
+  const intersection = linkTypes.some((t) => types.includes(t));
+  return entry !== undefined && intersection;
+}
+
+/** Get first link that matches specified type. */
+function getLinkText(table: BaseTable, col: string, types?: LinkType[]) {
+  const format = (val: LinkMapValue) => (`${val.table.name}:${val.column}`);
+  const entry = linkMap.value[table.name]?.[col];
+  const linkTypes = Object.keys(entry || {}) as LinkType[];
+  if (entry === undefined || !linkTypes.length) {
+    return '';
+  }
+
+  if (types === undefined) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return format(entry[linkTypes[0]]!);
+  }
+
+  // Return first matching linkType
+  const match = linkTypes.find((t) => types.includes(t));
+  if (match === undefined) {
+    return '';
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return format(entry[match]!);
+}
+
+// Network data
+function setEdgeTable(table: BaseTable, val: boolean) {
+  const newEdgeTable = {
+    table: {
+      ...table,
+      joined: undefined,
+    },
+    source: undefined,
+    target: undefined,
+  };
+  edgeTable.value = val ? newEdgeTable : undefined;
+  sourceTable.value = undefined;
+  targetTable.value = undefined;
+}
+
+async function init() {
+  if (workspace.value === null) {
+    tableSamples.value = [];
+    tablesVisible.value = {};
+    return;
+  }
+
+  const ws = workspace.value;
+  const tables = [...ws.nodeTables, ...ws.edgeTables];
+  const samples: CSVPreview[] = await Promise.all(tables.map(async (table) => {
+    const res = await api.axios.get(`workspaces/${ws.name}/tables/${table.name}/rows`, {
+      params: {
+        limit: 5,
+      },
+    });
+
+    const rows = res.data.results;
+    const headers: DataTableHeader[] = rows.length > 0 ? Object.keys(rows[0])
+      .filter((header) => !['_id', '_key', '_rev'].includes(header))
+      .map((header) => ({ text: header, value: header }))
+      : [];
+
+    return {
+      table: reactive({ name: table.name, excluded: [] }),
+      headers,
+      rows,
+    };
+  }));
+
+  // Sort samples by number of headers, to provide easier viewing
+  const sortedSamples = samples.sort((a, b) => b.headers.length - a.headers.length);
+
+  // Store value in tableSamples
+  tableSamples.value = sortedSamples;
+  tablesVisible.value = reactive(sortedSamples.reduce((obj, cur) => ({ ...obj, [cur.table.name]: true }), {}));
+}
+
+// Load table from workspace and store in tableSamples
+onMounted(() => {
+  init();
+});
+
+watch(workspace, () => {
+  init();
+});
+
+// Edge source/target
+const selectingSource = ref(false);
+const selectingTarget = ref(false);
+
+// Menu state
+const menuOpen = ref(false);
+watchEffect(() => {
+  if (!menuOpen.value) {
+    selectingSource.value = false;
+    selectingTarget.value = false;
+  }
+});
+
+function getOtherTableColumns(tableName: string) {
+  const otherTables = visibleTableSamples.value.filter(
+    (sample) => sample.table.name !== tableName,
+  );
+
+  return otherTables.reduce((prev, cur) => ([
+    ...prev,
+    ...cur.headers.map((sample) => ({ table: cur.table, column: sample.value })),
+  ]), [] as {table: BaseTable; column: string}[]);
+}
+
+/** Links the source/target table to the edge table. */
+function linkSourceOrTargetTable(edgeCol: string, table: BaseTable, col: string) {
+  if (edgeTable.value?.table === undefined) {
+    throw new Error('Edge table not yet defined!');
+  }
+
+  const type = selectingSource.value ? 'source' : 'target';
+  const newTable = { ...table, joined: undefined };
+  if (type === 'source') {
+    sourceTable.value = newTable;
+  } else {
+    targetTable.value = newTable;
+  }
+
+  // Set reference to link in edge def
+  edgeTable.value[type] = {
+    local: edgeCol,
+    foreign: col,
+  };
+}
+
+function joinTable(mainTable: FullTable, col: string, subTable: BaseTable, subCol: string) {
+  // eslint-disable-next-line no-param-reassign
+  // mainTable.joined = {table: subTable };
+  // TODO
+
+  const joined = { table: subTable, link: { local: col, foreign: subCol } as Link };
+  if (edgeTable.value && edgeTable.value.table.name === mainTable.name) {
+    edgeTable.value.table.joined = joined;
+  } else if (sourceTable.value && sourceTable.value.name === mainTable.name) {
+    sourceTable.value.joined = joined;
+  } else if (targetTable.value && targetTable.value.name === mainTable.name) {
+    targetTable.value.joined = joined;
+  } else {
+    throw new Error('Attempted to join onto invalid table!');
+  }
+}
+
+function checkboxDisabled(table: BaseTable, col: string) {
+  // Disable if source/target column in edge table
+  if (
+    (
+      edgeTable.value?.table.name === table.name && (
+        edgeTable.value.source?.local === col || edgeTable.value?.target?.local === col
+      )
+    )
+        || (sourceTable.value?.name === table.name && edgeTable.value?.source?.foreign === col)
+        || (targetTable.value?.name === table.name && edgeTable.value?.target?.foreign === col)
+  ) {
+    return true;
+  }
+
+  // Disable if column is joined on either side
+  if (mainTables.value.some((t) => (
+    (t?.name === table.name && t.joined?.link.local === col)
+        || (t?.joined?.table.name === table.name && t.joined.link.foreign === col)
+  ))) {
+    return true;
+  }
+
+  // Disable if not one of main tables or a joined table
+  if (!mainTables.value.some(
+    (t) => t?.name === table.name || t?.joined?.table.name === table.name,
+  )) {
+    return true;
+  }
+
+  return false;
+}
+
+function linkDisabled(table: BaseTable): boolean {
+  return edgeTable.value?.table.name !== table.name;
+}
+
+function joinDisabled(table: BaseTable, col: string): boolean {
+  // Disable if not one of main tables, or if another column
+  // in this table is already linked (only one join per table allowed)
+  const entry = linkMap.value[table.name];
+  return !mainTables.value.some((t) => t?.name === table.name) || (
+    entry !== undefined
+        && Object.keys(entry).some((key) => key !== col && entry[key].join !== undefined)
+  );
+}
+
+function removeColumnLink(mainTable: FullTable, col: string, join = false) {
+  const link = linkMap.value[mainTable.name]?.[col];
+  if (link === undefined) {
+    throw new Error('Link not found!');
+  }
+
+  if (
+    (
+      sourceTable.value?.name === mainTable.name
+          || targetTable.value?.name === mainTable.name
+    )
+        && link.join === undefined
+  ) {
+    throw new Error('Cannot have source/target links from source/target table!');
+  }
+
+  // Edge table
+  if (edgeTable.value?.table.name === mainTable.name) {
+    const keys = Object.keys(link) as LinkType[];
+    if (!join) {
+      if (keys.includes('source')) {
+        sourceTable.value = undefined;
+        edgeTable.value.source = undefined;
+      }
+      if (keys.includes('target')) {
+        targetTable.value = undefined;
+        edgeTable.value.target = undefined;
+      }
+    } else if (keys.includes('join')) {
+      edgeTable.value.table.joined = undefined;
+    }
+
+    return;
+  }
+
+  if (sourceTable.value?.name === mainTable.name) {
+    sourceTable.value.joined = undefined;
+    return;
+  }
+
+  if (targetTable.value?.name === mainTable.name) {
+    targetTable.value.joined = undefined;
+    return;
+  }
+
+  throw new Error('Attempted to remove unexpected link!');
+}
+
+function getColumnItemClass(table: BaseTable, col: string) {
+  // "Disable" if table not in full network or column is excluded
+  const tableInNetwork = inNetworkTables.value.some((t) => t?.name === table.name);
+  if (!tableInNetwork || excludedMap.value[table.name]?.[col]) {
+    return 'grey--text lighten-3';
+  }
+
+  return undefined;
+}
+
+const maxItemLength = 20;
+function columnItemText(item: CSVRow, key: string) {
+  let val = item[key];
+  if (typeof val !== 'string') {
+    val = JSON.stringify(val);
+  }
+
+  const truncated = val.substring(0, maxItemLength);
+  if (val === truncated) {
+    return val;
+  }
+
+  return `${truncated}...`;
+}
+
+/* eslint-disable prefer-destructuring */
+function linkColor(table: BaseTable, col: string, join = false) {
+  // There's at most 5 links
+  // Edge -> Source
+  // Edge -> Target
+  // Edge -> Joined Table
+  // Source -> Joined Table
+  // Target -> Joined Table
+  // Since we want to show both sides of link, in reality there are 10 places it can live
+
+  // Source link
+  if (
+    !join && (
+      (edgeTable.value?.table.name === table.name && col === edgeTable.value?.source?.local)
+          || (sourceTable.value?.name === table.name && col === edgeTable.value?.source?.foreign)
+    )
+  ) {
+    return LinkColors[0];
+  }
+
+  // Target link
+  if (
+    !join && (
+      (edgeTable.value?.table.name === table.name && col === edgeTable.value.target?.local)
+          || (targetTable.value?.name === table.name && col === edgeTable.value?.target?.foreign)
+    )
+  ) {
+    return LinkColors[1];
+  }
+
+  // Edge table join
+  if (
+    join && (
+      (edgeTable.value?.table.name === table.name && col === edgeTable.value?.table.joined?.link.local)
+          || (edgeTable.value?.table.joined?.table.name === table.name && col === edgeTable.value?.table.joined.link.foreign)
+    )
+  ) {
+    return LinkColors[2];
+  }
+
+  // Source table join
+  if (
+    join && (
+      (sourceTable.value?.name === table.name && col === sourceTable.value.joined?.link.local)
+          || (sourceTable.value?.joined?.table.name === table.name && col === sourceTable.value.joined.link.foreign)
+    )
+  ) {
+    return LinkColors[3];
+  }
+
+  // Target table join
+  if (
+    join && (
+      (targetTable.value?.name === table.name && col === targetTable.value.joined?.link.local)
+          || (targetTable.value?.joined?.table.name === table.name && col === targetTable.value.joined.link.foreign)
+    )
+  ) {
+    return LinkColors[4];
+  }
+
+  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
+));
+
+const networkCreating = ref(false);
+async function createNetwork() {
+  if (!valid.value || store.state.currentWorkspace === null) {
+    return;
+  }
+  if (!(edgeTable.value && sourceTable.value && targetTable.value)) {
+    throw new Error('Falsey values when trying to create network!');
+  }
+
+  networkCreating.value = true;
+
+  const network: CSVNetwork = {
+    name: networkName.value,
+    edge: edgeTable.value,
+    source_table: sourceTable.value,
+    target_table: targetTable.value,
+  };
+
+  /**
+       * Inject excluded columns into passed table.
+       */
+  function injectExcluded(table: FullTable | BaseTable | undefined) {
+    if (table === undefined) {
+      return;
+    }
+
+    const excluded = excludedMap.value[table.name];
+    // eslint-disable-next-line no-param-reassign
+    table.excluded = Object.keys(excluded).filter((key) => excluded[key] === true);
+
+    if (isFullTable(table)) {
+      injectExcluded(table.joined?.table);
+    }
+  }
+
+  // Inject excluded columns
+  injectExcluded(network.edge.table);
+  injectExcluded(network.source_table);
+  injectExcluded(network.target_table);
+
+  // Create network with post request
+  await api.axios.post(`/workspaces/${store.state.currentWorkspace.name}/networks/from_tables/`, network);
+  networkCreating.value = false;
+  emit('success');
+}
+</script>
+
+<style scoped>
+.upload-preview table th, .table-title {
+  background-color: #1976d2 !important;
+  color: #fff !important;
+}
+
+.disable-events {
+  pointer-events: none
+}
+</style>
diff --git a/src/components/NetworkDialog.vue b/src/components/NetworkDialog.vue
deleted file mode 100644
index 5aecd87..0000000
--- a/src/components/NetworkDialog.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <!-- Multi CSV -->
-    <v-dialog v-model="CSVNetworkDialog">
-      <template #activator="{ on }">
-        <v-btn
-          id="add-csv-network"
-          color="blue darken-2"
-          icon
-          medium
-          :disabled="!userCanEdit"
-          v-on="on"
-        >
-          <v-icon dark>
-            mdi-plus-box-multiple
-          </v-icon>
-        </v-btn>
-      </template>
-      <NetworkMultiCSVUploadForm
-        :workspace="workspace"
-        @success="CSVNetworkDialogSuccess"
-      />
-    </v-dialog>
-
-    <!-- Normal -->
-    <v-dialog
-      v-model="networkDialog"
-      width="700"
-    >
-      <template #activator="{ on }">
-        <v-btn
-          id="add-network"
-          color="blue darken-2"
-          icon
-          medium
-          :disabled="!userCanEdit"
-          v-on="on"
-        >
-          <v-icon dark>
-            mdi-plus-circle
-          </v-icon>
-        </v-btn>
-      </template>
-      <v-card>
-        <v-tabs>
-          <v-tab>
-            Upload
-          </v-tab>
-          <v-tab>
-            Create
-          </v-tab>
-
-          <v-tab-item>
-            <network-upload-form
-              :workspace="workspace"
-              @success="networkDialogSuccess"
-            />
-          </v-tab-item>
-
-          <v-tab-item>
-            <network-create-form
-              :edge-tables="edgeTables"
-              :workspace="workspace"
-              @success="networkDialogSuccess"
-            />
-          </v-tab-item>
-        </v-tabs>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue';
-import {
-  computed, defineComponent, ref,
-} from 'vue';
-
-import NetworkCreateForm from '@/components/NetworkCreateForm.vue';
-import NetworkUploadForm from '@/components/NetworkUploadForm.vue';
-import NetworkMultiCSVUploadForm from '@/components/NetworkMultiCSVUploadForm.vue';
-import store from '@/store';
-
-export default defineComponent({
-  name: 'NetworkDialog',
-  components: {
-    NetworkCreateForm,
-    NetworkUploadForm,
-    NetworkMultiCSVUploadForm,
-  },
-  props: {
-    edgeTables: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-
-    workspace: {
-      type: String as PropType<string>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const networkDialog = ref(false);
-    const CSVNetworkDialog = ref(false);
-
-    const userCanEdit = computed(() => store.getters.userCanEdit);
-
-    function networkDialogSuccess() {
-      networkDialog.value = false;
-      emit('success');
-    }
-    function CSVNetworkDialogSuccess() {
-      CSVNetworkDialog.value = false;
-      emit('success');
-    }
-    return {
-      networkDialog,
-      CSVNetworkDialog,
-      userCanEdit,
-      networkDialogSuccess,
-      CSVNetworkDialogSuccess,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.new-button {
-  margin: 49px 10px 0 0;
-  z-index: 1;
-}
-</style>
diff --git a/src/components/NetworkMultiCSVUploadForm.vue b/src/components/NetworkMultiCSVUploadForm.vue
deleted file mode 100644
index 5883665..0000000
--- a/src/components/NetworkMultiCSVUploadForm.vue
+++ /dev/null
@@ -1,982 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>Create from Existing Tables</v-card-title>
-    <v-card-subtitle>
-      Link edge tables with node tables by clicking the <v-icon>mdi-link</v-icon> icon on
-      the desired edge table, and selecting the node table column that you'd like to link it to.
-    </v-card-subtitle>
-    <v-progress-linear
-      v-if="networkCreating"
-      indeterminate
-    />
-    <v-row
-      no-gutters
-      align="center"
-    >
-      <v-col
-        cols="2"
-        align-self="center"
-        class="ml-3"
-      >
-        <v-text-field
-          v-model="networkName"
-          :rules="[() => objectNameIsValid(networkName) || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
-          label="Network Name"
-          solo
-        />
-      </v-col>
-      <v-col
-        cols="1"
-        align-self="center"
-      >
-        <v-btn
-          color="primary"
-          :disabled="!valid"
-          class="ml-2 mb-6"
-          @click="createNetwork"
-        >
-          Create
-        </v-btn>
-      </v-col>
-    </v-row>
-
-    <!-- Data tables -->
-    <template v-if="tableSamples.length">
-      <v-row
-        no-gutters
-        class="ml-3"
-      >
-        <v-col cols="2">
-          <v-list>
-            <v-list-item class="px-0">
-              <v-list-item-action>
-                <v-checkbox
-                  :value="allTablesVisible"
-                  @change="selectAllTables"
-                />
-              </v-list-item-action>
-              <v-list-item-subtitle>
-                All Tables
-              </v-list-item-subtitle>
-            </v-list-item>
-
-            <v-list-item
-              v-for="sample in tableSamples"
-              :key="sample.table.name"
-              class="px-0"
-            >
-              <v-list-item-action>
-                <v-checkbox v-model="tablesVisible[sample.table.name]" />
-              </v-list-item-action>
-              <v-list-item-title>
-                {{ sample.table.name }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-col>
-        <v-divider vertical />
-        <v-col cols="10">
-          <v-row
-            no-gutters
-            justify="start"
-          >
-            <v-card
-              v-for="sample in visibleTableSamples"
-              :key="sample.table.name"
-              outlined
-              raised
-              class="ma-4"
-            >
-              <v-sheet class="table-title px-2">
-                <v-row no-gutters>
-                  <span>{{ sample.table.name }}</span>
-                  <v-spacer />
-                  <v-switch
-                    label="Edge Table"
-                    dark
-                    hide-details
-                    class="ma-0 pa-0"
-                    :disabled="edgeTable !== undefined && edgeTable.table.name !== sample.table.name"
-                    :value="edgeTable !== undefined && edgeTable.table.name === sample.table.name"
-                    @change="setEdgeTable(sample.table, $event)"
-                  />
-                </v-row>
-              </v-sheet>
-              <v-data-table
-                class="upload-preview"
-                hide-default-footer
-                hide-default-header
-                :headers="sample.headers"
-                :items="sample.rows"
-                disable-sort
-              >
-                <template #header="{ props: { headers } }">
-                  <thead dark>
-                    <tr>
-                      <th
-                        v-for="{ value: col } in headers"
-                        :key="`${sample.table.name}:${col}`"
-                        style="width: 1px; white-space: nowrap;"
-                      >
-                        <!-- 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"
-                        >
-                          mdi-checkbox-blank-outline
-                        </v-icon>
-
-                        <!-- Column name -->
-                        <span>{{ col }}</span>
-
-                        <!-- Link to other table column -->
-                        <v-menu
-                          v-if="mainTables.some((t) => t !== undefined && t.name === sample.table.name)"
-                          :close-on-content-click="false"
-                          @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>
-                          </template>
-                          <v-card max-height="30vh">
-                            <!-- Edge Table -->
-                            <v-card-subtitle
-                              class="py-1 px-2"
-                            >
-                              <span v-if="linkExists(sample.table, col, ['source', 'target'])">
-                                Remove Link
-                              </span>
-                              <span v-else>
-                                Select Source/Target
-                              </span>
-                            </v-card-subtitle>
-
-                            <template v-if="!(linkExists(sample.table, col, ['source', 'target']) || selectingSource || selectingTarget)">
-                              <v-list
-                                class="my-0 py-0"
-                                dense
-                              >
-                                <v-list-item
-                                  :disabled="sourceTable !== undefined"
-                                  @click="selectingSource = true"
-                                >
-                                  Source
-                                </v-list-item>
-                                <v-list-item
-                                  :disabled="targetTable !== undefined"
-                                  @click="selectingTarget = true"
-                                >
-                                  Target
-                                </v-list-item>
-                              </v-list>
-                            </template>
-                            <template v-else>
-                              <v-list
-                                class="my-0 py-0"
-                                dense
-                              >
-                                <template v-if="linkExists(sample.table, col, ['source', 'target'])">
-                                  <v-list-item>
-                                    {{ getLinkText(sample.table, col, ['source', 'target']) }}
-                                    <v-spacer />
-                                    <v-btn
-                                      icon
-                                      right
-                                      @click.stop="removeColumnLink(sample.table, col)"
-                                    >
-                                      <v-icon>mdi-close</v-icon>
-                                    </v-btn>
-                                  </v-list-item>
-                                </template>
-                                <template v-else>
-                                  <v-list-item
-                                    v-for="otherCol in getOtherTableColumns(sample.table.name)"
-                                    :key="`${sample.table.name}-${otherCol.table.name}-${otherCol.column}`"
-                                    @click="linkSourceOrTargetTable(col, otherCol.table, otherCol.column)"
-                                  >
-                                    {{ `${otherCol.table.name}:${otherCol.column}` }}
-                                  </v-list-item>
-                                </template>
-                              </v-list>
-                            </template>
-                          </v-card>
-                        </v-menu>
-
-                        <v-menu
-                          v-if="inNetworkTables.some((t) => t !== undefined && t.name === sample.table.name)"
-                          :close-on-content-click="false"
-                          @input="menuOpen = $event"
-                        >
-                          <template #activator="{ on }">
-                            <v-icon
-                              :color="linkColor(sample.table, col, true)"
-                              :class="{ 'disable-events': joinDisabled(sample.table, col) }"
-                              dark
-                              v-on="on"
-                            >
-                              mdi-call-merge
-                            </v-icon>
-                          </template>
-                          <v-card max-height="30vh">
-                            <!-- Node Table -->
-                            <v-card-subtitle class="py-1 px-2">
-                              <span v-if="linkExists(sample.table, col, ['join'])">
-                                Remove Link
-                              </span>
-                              <span v-else>
-                                Join From
-                              </span>
-                            </v-card-subtitle>
-                            <v-list
-                              class="my-0 py-0"
-                              dense
-                            >
-                              <template v-if="linkExists(sample.table, col, ['join'])">
-                                <v-list-item>
-                                  {{ getLinkText(sample.table, col, ['join']) }}
-                                  <v-spacer />
-                                  <v-btn
-                                    icon
-                                    right
-                                    @click.stop="removeColumnLink(sample.table, col, true)"
-                                  >
-                                    <v-icon>mdi-close</v-icon>
-                                  </v-btn>
-                                </v-list-item>
-                              </template>
-                              <template v-else>
-                                <v-list-item
-                                  v-for="otherCol in getOtherTableColumns(sample.table.name)"
-                                  :key="`${sample.table.name}-${otherCol.table.name}-${otherCol.column}`"
-                                  @click="joinTable(sample.table, col, otherCol.table, otherCol.column)"
-                                >
-                                  {{ `${otherCol.table.name}:${otherCol.column}` }}
-                                </v-list-item>
-                              </template>
-                            </v-list>
-                          </v-card>
-                        </v-menu>
-                      </th>
-                    </tr>
-                  </thead>
-                </template>
-                <template #item="{ item, headers }">
-                  <tr>
-                    <td
-                      v-for="header in headers"
-                      :key="header.value"
-                      :class="getColumnItemClass(sample.table, header.value)"
-                      style="width: 1px; white-space: nowrap;"
-                    >
-                      {{ columnItemText(item, header.value) }}
-                    </td>
-                  </tr>
-                </template>
-              </v-data-table>
-            </v-card>
-          </v-row>
-        </v-col>
-      </v-row>
-    </template>
-  </v-card>
-</template>
-
-<script lang="ts">
-/* eslint-disable lines-between-class-members */
-/* eslint-disable max-classes-per-file */
-/* eslint-disable brace-style */
-
-import {
-  computed, defineComponent, onMounted, reactive, ref, watch, watchEffect,
-} from 'vue';
-import type { DataTableHeader } from 'vuetify';
-
-import api from '@/api';
-import store from '@/store';
-import { objectNameIsValid } from '@/utils/validation';
-
-const LinkColors = [
-  'amber',
-  'green',
-  'red',
-  'brown',
-  'orange',
-  'lime',
-  'purple',
-  'cyan',
-];
-
-interface BaseTable {
-  name: string;
-  excluded: string[];
-}
-
-interface Link {
-  local: string;
-  foreign: string;
-}
-
-interface FullTable extends BaseTable {
-  joined?: {
-    table: BaseTable;
-    link: Link;
-  };
-}
-
-function isFullTable(table: FullTable | BaseTable): table is FullTable {
-  return 'joined' in table;
-}
-
-interface EdgeTableDef {
-  table: FullTable;
-  source?: Link;
-  target?: Link;
-}
-
-// For fully constructed network
-interface CSVNetwork {
-  name: string;
-  edge: EdgeTableDef;
-  source_table: FullTable;
-  target_table: FullTable;
-}
-
-type CSVRow = {[key: string]: string};
-interface CSVPreview {
-  headers: DataTableHeader[];
-  rows: CSVRow[];
-  table: BaseTable;
-}
-
-export default defineComponent({
-  setup(props, { emit }) {
-    const workspace = computed(() => store.state.currentWorkspace);
-
-    const files = ref<File[]>([]);
-    const tableSamples = ref<CSVPreview[]>([]);
-    const tablesVisible = ref<Record<string, boolean>>({});
-    const visibleTableSamples = computed(
-      () => tableSamples.value.filter(
-        (sample) => tablesVisible.value[sample.table.name] === true,
-      ),
-    );
-    const allTablesVisible = computed(
-      () => visibleTableSamples.value.length === tableSamples.value.length,
-    );
-    function selectAllTables(on: boolean | null) {
-      // Coerce null to boolean
-      const state = !!on;
-      Object.keys(tablesVisible.value).forEach((key) => {
-        tablesVisible.value[key] = state;
-      });
-    }
-
-    // Network def
-    const networkName = ref('');
-    const edgeTable = ref<EdgeTableDef>();
-    const sourceTable = ref<FullTable>();
-    const targetTable = ref<FullTable>();
-
-    const mainTables = computed(() => [edgeTable.value?.table, sourceTable.value, targetTable.value]);
-    const inNetworkTables = computed(() => [
-      ...mainTables.value,
-      edgeTable.value?.table.joined?.table,
-      sourceTable.value?.joined?.table,
-      targetTable.value?.joined?.table,
-    ]);
-
-    interface ExclusionMap {
-      [key: string]: {
-        [innerKey: string]: boolean
-      }
-    }
-
-    // Remove any no longer visible links
-    watch(tablesVisible, (visible) => {
-      const invisibleTables = tableSamples.value.filter((s) => visible[s.table.name] === false);
-      invisibleTables.forEach((sample) => {
-        const { table } = sample;
-
-        // Edge table + joined
-        if (edgeTable.value?.table.name === table.name) {
-          edgeTable.value = undefined;
-          sourceTable.value = undefined;
-          targetTable.value = undefined;
-          return;
-        }
-        if (edgeTable.value?.table.joined?.table.name === table.name) {
-          edgeTable.value.table.joined = undefined;
-          return;
-        }
-
-        // Source table + joined
-        if (sourceTable.value?.name === table.name) {
-          sourceTable.value = undefined;
-          if (edgeTable.value) {
-            edgeTable.value.source = undefined;
-          }
-          return;
-        }
-        if (sourceTable.value?.joined?.table.name === table.name) {
-          sourceTable.value.joined = undefined;
-          return;
-        }
-
-        // Target table + joined
-        if (targetTable.value?.name === table.name) {
-          targetTable.value = undefined;
-          if (edgeTable.value) {
-            edgeTable.value.target = undefined;
-          }
-          return;
-        }
-        if (targetTable.value?.joined?.table.name === table.name) {
-          targetTable.value.joined = undefined;
-        }
-      });
-    }, { deep: true });
-
-    // Update excluded map when visible tables change
-    const excludedMap = ref(reactive({} as ExclusionMap));
-    watch(visibleTableSamples, (samples) => {
-      excludedMap.value = reactive(samples.reduce((acc, cur) => (
-        {
-          ...acc,
-          [cur.table.name]: cur.headers.reduce((hacc, hcur) => (
-            {
-              ...hacc,
-              // Default all tables to not excluded
-              [hcur.value]: false,
-            }
-          ), {}),
-        }
-      ), {}));
-    });
-
-    type LinkType = 'source' | 'target' | 'join';
-    interface LinkMapValue {
-      table: BaseTable;
-      column: string;
-    }
-    const linkMap = computed(() => {
-      const map = {} as Record<string, Record<string, Partial<Record<LinkType, LinkMapValue>>>>;
-      function set(table: string, col: string, type: LinkType, val: LinkMapValue) {
-        if (map[table] === undefined) {
-          map[table] = {};
-        }
-        if (map[table][col] === undefined) {
-          map[table][col] = {};
-        }
-        map[table][col][type] = val;
-      }
-
-      // Edge table
-      if (edgeTable.value?.source && sourceTable.value) {
-        set(edgeTable.value.table.name, edgeTable.value.source.local, 'source', {
-          table: sourceTable.value,
-          column: edgeTable.value.source.foreign,
-        });
-      }
-      if (edgeTable.value?.target && targetTable.value) {
-        set(edgeTable.value.table.name, edgeTable.value.target.local, 'target', {
-          table: targetTable.value,
-          column: edgeTable.value.target.foreign,
-        });
-      }
-      if (edgeTable.value?.table.joined) {
-        set(edgeTable.value.table.name, edgeTable.value.table.joined.link.local, 'join', {
-          table: edgeTable.value.table.joined.table,
-          column: edgeTable.value.table.joined.link.foreign,
-        });
-      }
-
-      // Source table
-      if (sourceTable.value?.joined) {
-        set(sourceTable.value.name, sourceTable.value.joined.link.local, 'join', {
-          table: sourceTable.value.joined.table,
-          column: sourceTable.value.joined.link.foreign,
-        });
-      }
-
-      // Target table
-      if (targetTable.value?.joined) {
-        set(targetTable.value.name, targetTable.value.joined.link.local, 'join', {
-          table: targetTable.value.joined.table,
-          column: targetTable.value.joined.link.foreign,
-        });
-      }
-
-      return map;
-    });
-
-    function linkExists(table: BaseTable, col: string, types?: LinkType[]) {
-      const entry = linkMap.value[table.name]?.[col];
-      if (entry === undefined) {
-        return false;
-      }
-      if (types === undefined) {
-        return true;
-      }
-
-      const linkTypes = Object.keys(entry) as LinkType[];
-      const intersection = linkTypes.some((t) => types.includes(t));
-      return entry !== undefined && intersection;
-    }
-
-    /** Get first link that matches specified type. */
-    function getLinkText(table: BaseTable, col: string, types?: LinkType[]) {
-      const format = (val: LinkMapValue) => (`${val.table.name}:${val.column}`);
-      const entry = linkMap.value[table.name]?.[col];
-      const linkTypes = Object.keys(entry || {}) as LinkType[];
-      if (entry === undefined || !linkTypes.length) {
-        return '';
-      }
-
-      if (types === undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return format(entry[linkTypes[0]]!);
-      }
-
-      // Return first matching linkType
-      const match = linkTypes.find((t) => types.includes(t));
-      if (match === undefined) {
-        return '';
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return format(entry[match]!);
-    }
-
-    // Network data
-    function setEdgeTable(table: BaseTable, val: boolean) {
-      const newEdgeTable = {
-        table: {
-          ...table,
-          joined: undefined,
-        },
-        source: undefined,
-        target: undefined,
-      };
-      edgeTable.value = val ? newEdgeTable : undefined;
-      sourceTable.value = undefined;
-      targetTable.value = undefined;
-    }
-
-    async function init() {
-      if (workspace.value === null) {
-        tableSamples.value = [];
-        tablesVisible.value = {};
-        return;
-      }
-
-      const ws = workspace.value;
-      const tables = [...ws.nodeTables, ...ws.edgeTables];
-      const samples: CSVPreview[] = await Promise.all(tables.map(async (table) => {
-        const res = await api.axios.get(`workspaces/${ws.name}/tables/${table.name}/rows`, {
-          params: {
-            limit: 5,
-          },
-        });
-
-        const rows = res.data.results;
-        const headers: DataTableHeader[] = Object.keys(rows[0])
-          .filter((header) => !['_id', '_key', '_rev'].includes(header))
-          .map((header) => ({ text: header, value: header }));
-
-        return {
-          table: reactive({ name: table.name, excluded: [] }),
-          headers,
-          rows,
-        };
-      }));
-
-      // Sort samples by number of headers, to provide easier viewing
-      const sortedSamples = samples.sort((a, b) => {
-        if (a.headers.length < b.headers.length) {
-          return -1;
-        }
-        if (b.headers.length > a.headers.length) {
-          return 1;
-        }
-        return 0;
-      });
-
-      // Store value in tableSamples
-      tableSamples.value = sortedSamples;
-      tablesVisible.value = reactive(sortedSamples.reduce((obj, cur) => ({ ...obj, [cur.table.name]: true }), {}));
-    }
-
-    // Load table from workspace and store in tableSamples
-    onMounted(() => {
-      init();
-    });
-
-    watch(workspace, () => {
-      init();
-    });
-
-    // Edge source/target
-    const selectingSource = ref(false);
-    const selectingTarget = ref(false);
-
-    // Menu state
-    const menuOpen = ref(false);
-    watchEffect(() => {
-      if (!menuOpen.value) {
-        selectingSource.value = false;
-        selectingTarget.value = false;
-      }
-    });
-
-    function getOtherTableColumns(tableName: string) {
-      const otherTables = visibleTableSamples.value.filter(
-        (sample) => sample.table.name !== tableName,
-      );
-
-      return otherTables.reduce((prev, cur) => ([
-        ...prev,
-        ...cur.headers.map((sample) => ({ table: cur.table, column: sample.value })),
-      ]), [] as {table: BaseTable; column: string}[]);
-    }
-
-    /** Links the source/target table to the edge table. */
-    function linkSourceOrTargetTable(edgeCol: string, table: BaseTable, col: string) {
-      if (edgeTable.value?.table === undefined) {
-        throw new Error('Edge table not yet defined!');
-      }
-
-      const type = selectingSource.value ? 'source' : 'target';
-      const newTable = { ...table, joined: undefined };
-      if (type === 'source') {
-        sourceTable.value = newTable;
-      } else {
-        targetTable.value = newTable;
-      }
-
-      // Set reference to link in edge def
-      edgeTable.value[type] = {
-        local: edgeCol,
-        foreign: col,
-      };
-    }
-
-    function joinTable(mainTable: FullTable, col: string, subTable: BaseTable, subCol: string) {
-      // eslint-disable-next-line no-param-reassign
-      // mainTable.joined = {table: subTable };
-      // TODO
-
-      const joined = { table: subTable, link: { local: col, foreign: subCol } as Link };
-      if (edgeTable.value && edgeTable.value.table.name === mainTable.name) {
-        edgeTable.value.table.joined = joined;
-      } else if (sourceTable.value && sourceTable.value.name === mainTable.name) {
-        sourceTable.value.joined = joined;
-      } else if (targetTable.value && targetTable.value.name === mainTable.name) {
-        targetTable.value.joined = joined;
-      } else {
-        throw new Error('Attempted to join onto invalid table!');
-      }
-    }
-
-    function checkboxDisabled(table: BaseTable, col: string) {
-      // Disable if source/target column in edge table
-      if (
-        (
-          edgeTable.value?.table.name === table.name && (
-            edgeTable.value.source?.local === col || edgeTable.value?.target?.local === col
-          )
-        )
-        || (sourceTable.value?.name === table.name && edgeTable.value?.source?.foreign === col)
-        || (targetTable.value?.name === table.name && edgeTable.value?.target?.foreign === col)
-      ) {
-        return true;
-      }
-
-      // Disable if column is joined on either side
-      if (mainTables.value.some((t) => (
-        (t?.name === table.name && t.joined?.link.local === col)
-        || (t?.joined?.table.name === table.name && t.joined.link.foreign === col)
-      ))) {
-        return true;
-      }
-
-      // Disable if not one of main tables or a joined table
-      if (!mainTables.value.some(
-        (t) => t?.name === table.name || t?.joined?.table.name === table.name,
-      )) {
-        return true;
-      }
-
-      return false;
-    }
-
-    function linkDisabled(table: BaseTable): boolean {
-      return edgeTable.value?.table.name !== table.name;
-    }
-
-    function joinDisabled(table: BaseTable, col: string): boolean {
-      // Disable if not one of main tables, or if another column
-      // in this table is already linked (only one join per table allowed)
-      const entry = linkMap.value[table.name];
-      return !mainTables.value.some((t) => t?.name === table.name) || (
-        entry !== undefined
-        && Object.keys(entry).some((key) => key !== col && entry[key].join !== undefined)
-      );
-    }
-
-    function removeColumnLink(mainTable: FullTable, col: string, join = false) {
-      const link = linkMap.value[mainTable.name]?.[col];
-      if (link === undefined) {
-        throw new Error('Link not found!');
-      }
-
-      if (
-        (
-          sourceTable.value?.name === mainTable.name
-          || targetTable.value?.name === mainTable.name
-        )
-        && link.join === undefined
-      ) {
-        throw new Error('Cannot have source/target links from source/target table!');
-      }
-
-      // Edge table
-      if (edgeTable.value?.table.name === mainTable.name) {
-        const keys = Object.keys(link) as LinkType[];
-        if (!join) {
-          if (keys.includes('source')) {
-            sourceTable.value = undefined;
-            edgeTable.value.source = undefined;
-          }
-          if (keys.includes('target')) {
-            targetTable.value = undefined;
-            edgeTable.value.target = undefined;
-          }
-        } else if (keys.includes('join')) {
-          edgeTable.value.table.joined = undefined;
-        }
-
-        return;
-      }
-
-      if (sourceTable.value?.name === mainTable.name) {
-        sourceTable.value.joined = undefined;
-        return;
-      }
-
-      if (targetTable.value?.name === mainTable.name) {
-        targetTable.value.joined = undefined;
-        return;
-      }
-
-      throw new Error('Attempted to remove unexpected link!');
-    }
-
-    function getColumnItemClass(table: BaseTable, col: string) {
-      // "Disable" if table not in full network or column is excluded
-      const tableInNetwork = inNetworkTables.value.some((t) => t?.name === table.name);
-      if (!tableInNetwork || excludedMap.value[table.name]?.[col]) {
-        return 'grey--text lighten-3';
-      }
-
-      return undefined;
-    }
-
-    const maxItemLength = 20;
-    function columnItemText(item: CSVRow, key: string) {
-      let val = item[key];
-      if (typeof val !== 'string') {
-        val = JSON.stringify(val);
-      }
-
-      const truncated = val.substring(0, maxItemLength);
-      if (val === truncated) {
-        return val;
-      }
-
-      return `${truncated}...`;
-    }
-
-    /* eslint-disable prefer-destructuring */
-    function linkColor(table: BaseTable, col: string, join = false) {
-      // There's at most 5 links
-      // Edge -> Source
-      // Edge -> Target
-      // Edge -> Joined Table
-      // Source -> Joined Table
-      // Target -> Joined Table
-      // Since we want to show both sides of link, in reality there are 10 places it can live
-
-      // Source link
-      if (
-        !join && (
-          (edgeTable.value?.table.name === table.name && col === edgeTable.value?.source?.local)
-          || (sourceTable.value?.name === table.name && col === edgeTable.value?.source?.foreign)
-        )
-      ) {
-        return LinkColors[0];
-      }
-
-      // Target link
-      if (
-        !join && (
-          (edgeTable.value?.table.name === table.name && col === edgeTable.value.target?.local)
-          || (targetTable.value?.name === table.name && col === edgeTable.value?.target?.foreign)
-        )
-      ) {
-        return LinkColors[1];
-      }
-
-      // Edge table join
-      if (
-        join && (
-          (edgeTable.value?.table.name === table.name && col === edgeTable.value?.table.joined?.link.local)
-          || (edgeTable.value?.table.joined?.table.name === table.name && col === edgeTable.value?.table.joined.link.foreign)
-        )
-      ) {
-        return LinkColors[2];
-      }
-
-      // Source table join
-      if (
-        join && (
-          (sourceTable.value?.name === table.name && col === sourceTable.value.joined?.link.local)
-          || (sourceTable.value?.joined?.table.name === table.name && col === sourceTable.value.joined.link.foreign)
-        )
-      ) {
-        return LinkColors[3];
-      }
-
-      // Target table join
-      if (
-        join && (
-          (targetTable.value?.name === table.name && col === targetTable.value.joined?.link.local)
-          || (targetTable.value?.joined?.table.name === table.name && col === targetTable.value.joined.link.foreign)
-        )
-      ) {
-        return LinkColors[4];
-      }
-
-      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
-    ));
-
-    const networkCreating = ref(false);
-    async function createNetwork() {
-      if (!valid.value || store.state.currentWorkspace === null) {
-        return;
-      }
-      if (!(edgeTable.value && sourceTable.value && targetTable.value)) {
-        throw new Error('Falsey values when trying to create network!');
-      }
-
-      networkCreating.value = true;
-
-      const network: CSVNetwork = {
-        name: networkName.value,
-        edge: edgeTable.value,
-        source_table: sourceTable.value,
-        target_table: targetTable.value,
-      };
-
-      /**
-       * Inject excluded columns into passed table.
-       */
-      function injectExcluded(table: FullTable | BaseTable | undefined) {
-        if (table === undefined) {
-          return;
-        }
-
-        const excluded = excludedMap.value[table.name];
-        // eslint-disable-next-line no-param-reassign
-        table.excluded = Object.keys(excluded).filter((key) => excluded[key] === true);
-
-        if (isFullTable(table)) {
-          injectExcluded(table.joined?.table);
-        }
-      }
-
-      // Inject excluded columns
-      injectExcluded(network.edge.table);
-      injectExcluded(network.source_table);
-      injectExcluded(network.target_table);
-
-      // Create network with post request
-      await api.axios.post(`/workspaces/${store.state.currentWorkspace.name}/networks/from_tables/`, network);
-      networkCreating.value = false;
-      emit('success');
-    }
-
-    return {
-      excludedMap,
-      networkName,
-      edgeTable,
-      sourceTable,
-      targetTable,
-      files,
-      tableSamples,
-      tablesVisible,
-      visibleTableSamples,
-      allTablesVisible,
-      selectAllTables,
-      mainTables,
-      inNetworkTables,
-      menuOpen,
-      selectingSource,
-      selectingTarget,
-      getOtherTableColumns,
-      checkboxDisabled,
-      linkSourceOrTargetTable,
-      joinTable,
-      removeColumnLink,
-      linkMap,
-      linkExists,
-      getColumnItemClass,
-      columnItemText,
-      linkColor,
-      linkDisabled,
-      getLinkText,
-      joinDisabled,
-      setEdgeTable,
-      valid,
-      createNetwork,
-      networkCreating,
-      objectNameIsValid,
-    };
-  },
-});
-</script>
-<style scoped>
-.upload-preview table th, .table-title {
-  background-color: #1976d2 !important;
-  color: #fff !important;
-}
-
-.disable-events {
-  pointer-events: none
-}
-</style>
diff --git a/src/components/NetworkPanel.vue b/src/components/NetworkPanel.vue
index 55249ca..cf0070d 100644
--- a/src/components/NetworkPanel.vue
+++ b/src/components/NetworkPanel.vue
@@ -27,13 +27,6 @@
           @closed="cleanup"
         />
       </div>
-
-      <network-dialog
-        :workspace="workspace"
-        :node-tables="nodeTables"
-        :edge-tables="edgeTables"
-        @success="cleanup"
-      />
     </v-subheader>
 
     <v-divider />
@@ -107,93 +100,44 @@
   </v-list>
 </template>
 
-<script lang="ts">
-import type { PropType, Ref } from 'vue';
+<script setup lang="ts">
 import {
-  computed, defineComponent, ref, watch,
+  computed, ref, watch,
 } from 'vue';
 import type { Network } from 'multinet';
 import DeleteNetworkDialog from '@/components/DeleteNetworkDialog.vue';
-import NetworkDialog from '@/components/NetworkDialog.vue';
 import DownloadDialog from '@/components/DownloadDialog.vue';
 
 import store from '@/store';
 import type { App, CheckboxTable } from '@/types';
 import { visualizeWithNewSession } from '@/utils/sessionHelpers';
 
-export default defineComponent({
-  name: 'NetworkPanel',
-
-  components: {
-    DeleteNetworkDialog,
-    NetworkDialog,
-    DownloadDialog,
-  },
-
-  props: {
-    workspace: {
-      type: String as PropType<string>,
-      required: true,
-    },
-
-    items: {
-      type: Array as PropType<Network[]>,
-      required: true,
-    },
-
-    nodeTables: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-
-    edgeTables: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-
-    loading: {
-      type: Boolean as PropType<boolean>,
-      required: true,
-    },
-
-    apps: {
-      type: Object as PropType<{ network_visualizations: App[]; table_visualizations: App[] }>,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const checkbox: Ref<CheckboxTable> = ref({});
-    const singleSelected: Ref<string | null> = ref(null);
-    const selectedVisApps = ref(new Array(props.items.length));
-
-    const checked = computed(() => Object.keys(checkbox.value).filter((d) => !!checkbox.value[d]));
-    const selection = computed(() => (singleSelected.value !== null ? [singleSelected.value] : [...checked.value]));
-
-    function clearCheckboxes() {
-      Object.keys(checkbox.value).forEach((key) => {
-        checkbox.value[key] = false;
-      });
-    }
-
-    async function cleanup() {
-      singleSelected.value = null;
-      await store.dispatch.fetchWorkspace(props.workspace);
-      clearCheckboxes();
-    }
-
-    watch(() => props.workspace, () => clearCheckboxes());
-
-    return {
-      checkbox,
-      singleSelected,
-      selectedVisApps,
-      selection,
-      cleanup,
-      visualizeWithNewSession,
-    };
-  },
-});
+const props = defineProps<{
+  workspace: string,
+  items: Network[],
+  loading: boolean,
+  apps: { network_visualizations: App[]; table_visualizations: App[] },
+}>();
+
+const checkbox = ref<CheckboxTable>({});
+const singleSelected = ref<string | null>(null);
+
+const checked = computed(() => Object.keys(checkbox.value).filter((d) => !!checkbox.value[d]));
+const selection = computed(() => (singleSelected.value !== null ? [singleSelected.value] : [...checked.value]));
+
+function clearCheckboxes() {
+  Object.keys(checkbox.value).forEach((key) => {
+    checkbox.value[key] = false;
+  });
+}
+
+async function cleanup() {
+  singleSelected.value = null;
+  await store.dispatch.fetchWorkspace(props.workspace);
+  clearCheckboxes();
+}
+
+watch(() => props.workspace, () => clearCheckboxes());
 </script>
 
 <style scoped>
diff --git a/src/components/NetworkUploadForm.vue b/src/components/NetworkUploadForm.vue
deleted file mode 100644
index 23cca03..0000000
--- a/src/components/NetworkUploadForm.vue
+++ /dev/null
@@ -1,239 +0,0 @@
-<template>
-  <v-card>
-    <v-card-text class="px-4 pt-4 pb-1">
-      <v-row>
-        <v-col>
-          <v-file-input
-            id="file-selector"
-            clearable
-            dense
-            :error-messages="fileUploadError"
-            label="Select network file"
-            outlined
-            prepend-icon=""
-            prepend-inner-icon="mdi-paperclip"
-            single-line
-            @change="handleFileInput"
-          />
-        </v-col>
-        <v-col
-          cols="6"
-          class="pl-2"
-        >
-          <v-select
-            v-if="fileTypes.length"
-            id="file-type"
-            v-model="selectedType"
-            class="file-type"
-            dense
-            :hint="selectedType ? selectedType.hint : null"
-            :items="fileTypes"
-            item-text="displayName"
-            item-value="displayName"
-            label="File type"
-            outlined
-            persistent-hint
-            return-object
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col>
-          <v-text-field
-            id="table-name"
-            v-model="fileName"
-            dense
-            :rules="[() => objectNameIsValid(fileName) || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
-            :error-messages="tableCreationError"
-            label="Network name"
-            outlined
-          />
-        </v-col>
-      </v-row>
-    </v-card-text>
-
-    <v-divider />
-
-    <v-card-actions class="px-4 py-3">
-      <v-spacer />
-      <v-btn
-        id="create-table"
-        color="primary"
-        :disabled="createDisabled"
-        @click="createNetwork"
-      >
-        Upload
-      </v-btn>
-    </v-card-actions>
-    <v-progress-linear
-      v-if="uploading"
-      :value="uploadProgress"
-    />
-  </v-card>
-</template>
-
-<script lang="ts">
-import type { NetworkUploadType } from 'multinet';
-import { validNetworkUploadType } from 'multinet';
-import type { Ref } from 'vue';
-import {
-  computed, defineComponent, ref,
-} from 'vue';
-
-import api from '@/api';
-import type { NetworkFileType } from '@/types';
-import { objectNameIsValid } from '@/utils/validation';
-
-const fileTypes: NetworkFileType[] = [
-  {
-    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'],
-  },
-];
-
-export default defineComponent({
-  name: 'NetworkUploadForm',
-
-  props: {
-    workspace: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup(props, { emit }) {
-    const tableCreationError: Ref<string | null> = ref(null);
-    const fileUploadError : Ref<string | null> = ref(null);
-    const fileName: Ref<string | null> = ref(null);
-    const selectedType: Ref<NetworkFileType | null> = ref(null);
-    const file: Ref<File | null> = ref(null);
-    const uploading = ref(false);
-    const uploadProgress: Ref<number | null> = ref(null);
-
-    const createDisabled = computed(() => (
-      !file.value
-      || !objectNameIsValid(fileName.value)
-      || !selectedType.value
-      || !!fileUploadError.value
-    ));
-
-    function handleUploadProgress(event: { loaded: number; total: number; [key: string]: unknown }) {
-      uploadProgress.value = (event.loaded / event.total) * 100;
-    }
-
-    function fileInfo(fileInput: File): [string, NetworkFileType] | null {
-      if (!fileInput) {
-        return null;
-      }
-
-      const [fileNameSplit, ...extensions] = fileInput.name.split('.');
-      const extension = extensions[extensions.length - 1];
-
-      const found = fileTypes.find((type) => type.extension.includes(extension) && validNetworkUploadType(type.queryCall));
-
-      return found === undefined ? null : [fileNameSplit, found];
-    }
-
-    function handleFileInput(fileInput: File) {
-      file.value = fileInput;
-
-      if (!file.value) {
-        selectedType.value = null;
-        fileUploadError.value = null;
-        return;
-      }
-
-      const fileInfoResult = fileInfo(file.value);
-      if (fileInfoResult !== null) {
-        const [fileNameResult, selectedTypeResult] = fileInfoResult;
-        fileName.value = fileName.value || fileNameResult;
-        selectedType.value = selectedTypeResult;
-        fileUploadError.value = null;
-      } else {
-        fileUploadError.value = 'Invalid file type';
-        selectedType.value = null;
-      }
-    }
-
-    async function createNetwork() {
-      if (file.value === null || fileName.value === null) {
-        throw new Error('Valid file must be selected.');
-      }
-
-      if (selectedType.value === null) {
-        throw new Error('`selectedType` is null, which is impossible');
-      }
-
-      uploading.value = true;
-
-      try {
-        await api.uploadNetwork(props.workspace, fileName.value, {
-          type: selectedType.value.queryCall as NetworkUploadType,
-          data: file.value,
-        });
-
-        tableCreationError.value = null;
-        emit('success');
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (err: any) {
-        if (err.status === 409) {
-          tableCreationError.value = `Table "${fileName}" already exists`;
-        } else if (err.status === 415) {
-          tableCreationError.value = 'Data could not be read as CSV';
-        } else {
-          tableCreationError.value = 'Unknown error; please see developer console for details';
-          throw err;
-        }
-      } finally {
-        uploading.value = false;
-        uploadProgress.value = null;
-      }
-    }
-
-    return {
-      fileTypes,
-      tableCreationError,
-      fileUploadError,
-      fileName,
-      selectedType,
-      file,
-      uploading,
-      uploadProgress,
-      createDisabled,
-      handleUploadProgress,
-      handleFileInput,
-      createNetwork,
-      objectNameIsValid,
-    };
-  },
-});
-</script>
-
-<style>
-/* These styles make it so that the text-field details for file type
-   don't nudge the network name field down if it goes to multiple lines. */
-.file-type .v-text-field__details {
-  min-height: 36px;
-}
-</style>
-
-<style scoped>
-.new-button {
-  margin: 49px 10px 0 0;
-  z-index: 1;
-}
-</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 6c008ea..f09b74f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -18,11 +18,11 @@
           tag="button"
         >
           <v-row class="mx-0 align-center">
-            <v-col class="app-logo pb-0 pt-2 px-0">
+            <v-col class="pb-1 px-0 ">
               <img
+                id="multinet-logo"
                 src="../assets/logo/app_logo.svg"
-                alt="Multinet"
-                width="100%"
+                alt="Multinet Logo"
               >
             </v-col>
             <v-col class="text-left">
@@ -219,8 +219,9 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.app-logo {
-  width: 48px;
+#multinet-logo {
+  height: 32px;
+  width: 32px;
 }
 
 .workspace-icon {
diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
deleted file mode 100644
index 5935ccd..0000000
--- a/src/components/TableDialog.vue
+++ /dev/null
@@ -1,420 +0,0 @@
-<template>
-  <v-dialog
-    v-model="tableDialog"
-    :width="dialogWidth"
-  >
-    <template #activator="{ on }">
-      <v-btn
-        id="add-table"
-        color="blue darken-2"
-        icon
-        medium
-        :disabled="!userCanEdit"
-        v-on="on"
-      >
-        <v-icon dark>
-          mdi-plus-circle
-        </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"
-          :rules="[() => tableCreationError === null]"
-        >
-          Set Column Types
-          <small>{{ tableCreationError }}</small>
-        </v-stepper-step>
-      </v-stepper-header>
-
-      <v-stepper-items>
-        <v-stepper-content step="1">
-          <v-card>
-            <v-card>
-              <v-card-text class="px-4 pt-4 pb-1">
-                <v-row>
-                  <v-col>
-                    <v-file-input
-                      v-model="selectedFile"
-                      label="Upload File"
-                      prepend-inner-icon="mdi-paperclip"
-                      prepend-icon=""
-                      single-line
-                      clearable
-                      dense
-                      outlined
-                      show-size
-                      accept=".csv,.json"
-                    />
-                  </v-col>
-                </v-row>
-                <v-row>
-                  <v-col>
-                    <v-text-field
-                      v-model="fileName"
-                      label="Table Name"
-                      :rules="[() => objectNameIsValid(fileName) || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
-                      outlined
-                      dense
-                    />
-                  </v-col>
-                </v-row>
-                <!-- TODO: Fix after https://github.com/multinet-app/multinetjs/issues/46 -->
-                <!-- <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-card-text>
-
-              <v-divider />
-
-              <v-card-actions class="px-4 py-3">
-                <v-spacer />
-                <v-btn
-                  class="mt-3"
-                  :disabled="createDisabled"
-                  color="primary"
-                  @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
-          class="pa-0"
-          step="2"
-        >
-          <v-data-table
-            class="upload-preview"
-            fixed-header
-            :headers="headers"
-            hide-default-header
-            :items="sampleRows"
-            height="65vh"
-          >
-            <template #header="{ props: { headers: innerHeaders } }">
-              <thead dark>
-                <tr>
-                  <th
-                    v-for="(header, i) in innerHeaders"
-                    :key="i"
-                    class="pt-2 pb-4"
-                  >
-                    {{ header.text }}
-                    <v-select
-                      v-model="columnType[header.text]"
-                      outlined
-                      dark
-                      dense
-                      hide-details
-                      :items="multinetTypes"
-                    />
-                  </th>
-                </tr>
-              </thead>
-            </template>
-          </v-data-table>
-
-          <v-footer class="py-3">
-            <v-select
-              v-model="delimiter"
-              :items="delimiterOptions"
-              persistent-hint
-              hint="Delimiter"
-              style="max-width: 100px"
-              class="mr-2"
-              :disabled="!fileIsCSV"
-              @change="delimiterQuoteChanged"
-            />
-
-            <v-select
-              v-model="quoteChar"
-              :items="quoteCharOptions"
-              persistent-hint
-              hint="Quote Character"
-              style="max-width: 100px"
-              :disabled="!fileIsCSV"
-              @change="delimiterQuoteChanged"
-            />
-
-            <v-spacer />
-            <v-btn
-              color="primary"
-              text
-              @click="step = 1"
-            >
-              Back
-            </v-btn>
-
-            <v-btn
-              color="primary"
-              depressed
-              :loading="loading"
-              :disabled="loading"
-              @click="createTable"
-            >
-              Create Table
-            </v-btn>
-          </v-footer>
-        </v-stepper-content>
-      </v-stepper-items>
-    </v-stepper>
-  </v-dialog>
-</template>
-
-<script lang="ts">
-import type { Ref } from 'vue';
-import {
-  defineComponent, ref, computed, watch,
-} from 'vue';
-
-import api from '@/api';
-import type { CSVColumnType } from '@/types';
-import { analyzeCSV, guessJSONColumnTypes } from '@/utils/files';
-import store from '@/store';
-import { objectNameIsValid } from '@/utils/validation';
-
-const defaultKeyField = '_key';
-const multinetTypes: readonly CSVColumnType[] = ['label', 'boolean', 'category', 'number', 'date'];
-
-export default defineComponent({
-  name: 'TableDialog',
-  props: {
-    workspace: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    // Stepper control
-    const step: Ref<number> = ref(1);
-    const dialogWidth = computed(() => {
-      if (step.value === 2) {
-        return 'unset';
-      }
-      return '35vw';
-    });
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const sampleRows: Ref<Array<Record<string, any>>> = ref([]);
-    const headers = computed(() => {
-      const keys = Object.keys(sampleRows.value[0] || {});
-      return keys.map((key) => ({
-        text: key,
-        value: key,
-      }));
-    });
-
-    const delimiter = ref('');
-    const delimiterOptions = [{ text: ',', value: ',' }, { text: ';', value: ';' }, { text: '|', value: '|' }, { text: 'tab', value: '\t' }];
-
-    const quoteChar = ref('"');
-    const quoteCharOptions = ['"', '\''];
-
-    const edgeTable = computed(() => {
-      const sample = sampleRows.value[0] || {};
-      const hasFrom = Object.prototype.hasOwnProperty.call(sample, '_from');
-      const hasTo = Object.prototype.hasOwnProperty.call(sample, '_to');
-      return hasFrom && hasTo;
-    });
-
-    // Type recommendation
-    const columnType: Ref<{[key: string]: CSVColumnType}> = ref({});
-
-    async function runCSVAnalysis(newFile: File, userDelim?: string, userQuote?: string) {
-      const analysis = await analyzeCSV(newFile, userDelim, userQuote);
-      columnType.value = Array.from(analysis.typeRecs.keys()).reduce((acc, key) => ({ ...acc, [key]: analysis.typeRecs.get(key) }), {});
-
-      sampleRows.value = [...analysis.sampleRows];
-      delimiter.value = analysis.delimiter;
-    }
-
-    async function runJSONAnalysis(newFile: File) {
-      // Get the sample rows
-      sampleRows.value = (JSON.parse(await newFile.text()) as object[]).slice(0, 30);
-      columnType.value = guessJSONColumnTypes(sampleRows.value);
-    }
-
-    const tableCreationError = ref<string | null>(null);
-
-    // File selection
-    const selectedFile = ref<File | null>(null);
-    const fileIsCSV = computed(() => selectedFile.value !== null && selectedFile.value.name.substring(selectedFile.value.name.length - 4, selectedFile.value.name.length) === '.csv');
-    const fileName = ref<string | null>(null);
-    watch(selectedFile, async (newFile) => {
-      tableCreationError.value = null;
-
-      if (newFile === null) {
-        fileName.value = null;
-        columnType.value = {};
-
-        return;
-      }
-
-      const newName = newFile.name;
-
-      if (fileIsCSV.value) {
-        fileName.value = newName.replace('.csv', '');
-        await runCSVAnalysis(newFile);
-      }
-
-      if (newName.substring(newName.length - 5, newName.length) === '.json') {
-        fileName.value = newName.replace('.json', '');
-        await runJSONAnalysis(newFile);
-      }
-    });
-
-    async function delimiterQuoteChanged() {
-      // Re-run the analysis with the user-specified delimiter and quote character
-      if (selectedFile.value !== null) {
-        await runCSVAnalysis(selectedFile.value, delimiter.value, quoteChar.value);
-      }
-    }
-
-    // Upload options
-    const overwrite = ref(false);
-    const keyField = ref<string>(defaultKeyField);
-    const restoreKeyField = () => { keyField.value = defaultKeyField; };
-
-    // Upload state
-    const uploading = ref(false);
-    const uploadProgress = ref<number | null>(null);
-    // function handleUploadProgress(evt: { loaded: number; total: number; [key: string]: unknown }) {
-    //   uploadProgress.value = (evt.loaded / evt.total) * 100;
-    // }
-
-    // Reset component
-    function resetAllFields() {
-      step.value = 1;
-      columnType.value = {};
-
-      selectedFile.value = null;
-      fileName.value = null;
-
-      overwrite.value = false;
-      restoreKeyField();
-
-      uploading.value = false;
-      uploadProgress.value = null;
-    }
-
-    const createDisabled = computed(() => selectedFile.value === null || !objectNameIsValid(fileName.value));
-
-    // Table creation state
-    const tableDialog = ref(false);
-    const loading = ref(false);
-    async function createTable() {
-      if (selectedFile.value === null || fileName.value === null) {
-        return;
-      }
-
-      const { workspace } = props;
-      uploading.value = true;
-
-      try {
-        loading.value = true;
-        await api.uploadTable(workspace, fileName.value, {
-          data: selectedFile.value,
-          edgeTable: edgeTable.value,
-          columnTypes: columnType.value,
-          fileType: fileIsCSV.value ? 'csv' : 'json',
-          delimiter: delimiter.value,
-          quoteChar: quoteChar.value,
-        });
-
-        tableCreationError.value = null;
-        tableDialog.value = false;
-        loading.value = false;
-
-        emit('success');
-        resetAllFields();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (err: any) {
-        tableCreationError.value = `${Object.values(err.response.data).flat()[0]}`;
-      } finally {
-        uploading.value = false;
-        uploadProgress.value = null;
-      }
-    }
-
-    const userCanEdit = computed(() => store.getters.userCanEdit);
-
-    return {
-      step,
-      dialogWidth,
-      headers,
-      sampleRows,
-      delimiter,
-      delimiterOptions,
-      quoteChar,
-      quoteCharOptions,
-      delimiterQuoteChanged,
-      columnType,
-      multinetTypes,
-      selectedFile,
-      fileName,
-      tableDialog,
-      tableCreationError,
-      uploading,
-      uploadProgress,
-      createDisabled,
-      loading,
-      createTable,
-      restoreKeyField,
-      keyField,
-      overwrite,
-      userCanEdit,
-      fileIsCSV,
-      objectNameIsValid,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.new-button {
-  margin: 49px 10px 0 0;
-  z-index: 1;
-}
-.upload-preview table th {
-  background-color: #1976d2 !important;
-  color: #fff !important;
-}
-</style>
diff --git a/src/components/TableNetworkUploadStepper.vue b/src/components/TableNetworkUploadStepper.vue
new file mode 100644
index 0000000..4255905
--- /dev/null
+++ b/src/components/TableNetworkUploadStepper.vue
@@ -0,0 +1,438 @@
+<template>
+  <div>
+    <v-stepper v-model="step">
+      <v-stepper-header>
+        <v-stepper-step
+          :complete="step > 1"
+          step="1"
+        >
+          Select Data to Upload
+        </v-stepper-step>
+
+        <v-divider />
+
+        <v-stepper-step
+          step="2"
+          :complete="step > 2"
+          :rules="[() => (!isNetwork && (tableCreationError === null || tableCreationError.length === 0)) || isNetwork]"
+        >
+          {{ isNetwork ? 'Set Column Types (Nodes)' : 'Set Column Types' }}
+          <small>{{ !isNetwork ? tableCreationError : '' }}</small>
+        </v-stepper-step>
+
+        <v-divider v-if="isNetwork" />
+
+        <v-stepper-step
+          v-if="isNetwork"
+          step="3"
+          :rules="[() => (tableCreationError === null || tableCreationError.length === 0)]"
+        >
+          Set Column Types (Edges)
+          <small>{{ tableCreationError }}</small>
+        </v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-items>
+        <v-stepper-content step="1">
+          <v-card-text>
+            <div class="d-flex flex-column mb-8" style="align-items: center;">
+              <span class="text-h6 mb-2">Upload Type</span>
+              <v-btn-toggle v-model="uploadType">
+                <v-btn
+                  :color="uploadType === 0 ? 'blue darken-2 white--text' : ''"
+                  width="150"
+                >
+                  Network
+                </v-btn>
+                <v-btn
+                  :color="uploadType === 1 ? 'blue darken-2 white--text' : ''"
+                  width="150"
+                >
+                  Table
+                </v-btn>
+              </v-btn-toggle>
+            </div>
+            <v-row>
+              <v-col>
+                <v-file-input
+                  v-model="file"
+                  clearable
+                  :error-messages="fileUploadError"
+                  label="Select a file"
+                  outlined
+                  prepend-icon=""
+                  prepend-inner-icon="mdi-paperclip"
+                  :accept="uploadType === 0 ? '.json' : '.json,.csv'"
+                  :disabled="uploadType === undefined"
+                  :hint="uploadType === undefined ? 'Select an upload type first' : undefined"
+                  :persistent-hint="uploadType === undefined"
+                  @change="handleFileInput"
+                />
+              </v-col>
+              <v-col
+                cols="6"
+                class="pl-2"
+              >
+                <v-select
+                  v-if="fileTypes.length"
+                  v-model="selectedFileType"
+                  :hint="selectedFileType ? selectedFileType.hint : null"
+                  :items="fileTypes"
+                  item-text="displayName"
+                  item-value="displayName"
+                  label="File type"
+                  outlined
+                  persistent-hint
+                  return-object
+                  readonly
+                  append-icon=""
+                  style="pointer-events: none;"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="uploadName"
+                  :rules="[() => objectNameIsValid(uploadName) || uploadName === null || 'File name must contain only alphanumeric characters or \'-\' or \'_\'. First character must be a letter. Max length 250 characters.']"
+                  :label="uploadType === undefined ? 'Name' : (uploadType === 0 ? 'Network name' : 'Table name')"
+                  :disabled="uploadType === undefined"
+                  outlined
+                  @input="tableCreationError = null"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-stepper-content>
+
+        <v-stepper-content v-for="val, idx in Array(isNetwork ? 2 : 1).fill(0)" :key="idx" :step="idx + 2" class="pa-0">
+          <v-data-table
+            class="upload-preview"
+            fixed-header
+            :headers="headers[idx]"
+            hide-default-header
+            :items="sampleRows[idx]"
+            height="60vh"
+          >
+            <template #header="{ props: { headers: innerHeaders } }">
+              <thead dark>
+                <tr>
+                  <th
+                    v-for="(header, i) in innerHeaders"
+                    :key="i"
+                    class="pt-2 pb-4 grey lighten-3"
+                  >
+                    {{ header.text }}
+                    <v-select
+                      v-model="columnTypes[idx][header.text]"
+                      outlined
+                      dense
+                      hide-details
+                      class="mt-1"
+                      :items="multinetTypes"
+                    />
+                  </th>
+                </tr>
+              </thead>
+            </template>
+
+            <template v-if="fileIsCSV" #footer.prepend>
+              <v-row class="mx-0">
+                <v-select
+                  v-model="delimiter"
+                  :items="delimiterOptions"
+                  persistent-hint
+                  hint="Delimiter"
+                  style="max-width: 100px"
+                  class="mr-2 pt-1"
+                  @change="delimiterQuoteChanged"
+                />
+
+                <v-select
+                  v-model="quoteChar"
+                  :items="quoteCharOptions"
+                  persistent-hint
+                  hint="Quote Character"
+                  style="max-width: 100px"
+                  class="pt-1"
+                  @change="delimiterQuoteChanged"
+                />
+              </v-row>
+            </template>
+          </v-data-table>
+        </v-stepper-content>
+      </v-stepper-items>
+
+      <v-divider />
+
+      <v-card-actions class="px-4 py-3">
+        <v-btn
+          color="grey lighten-3"
+          depressed
+          @click="openHelpDocs"
+        >
+          Help
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          color="blue darken-2"
+          text
+          @click="step === 1 ? emit('back') : step -= 1"
+        >
+          Back
+        </v-btn>
+        <v-btn
+          id="create-table"
+          color="primary"
+          :disabled="buttonDisabled"
+          :loading="uploading"
+          @click="(isNetwork && step === 3) || (!isNetwork && step === 2) ? upload() : step += 1"
+        >
+          {{ (isNetwork && step === 3) || (!isNetwork && step === 2) ? 'Upload' : 'Next' }}
+        </v-btn>
+      </v-card-actions>
+
+      <v-progress-linear v-if="uploading" indeterminate />
+    </v-stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { analyzeCSV, guessJSONColumnTypes } from '@/utils/files';
+
+import { objectNameIsValid } from '@/utils/validation';
+import api from '@/api';
+import type { ColumnType } from 'multinet';
+import type { FileType } from '@/types';
+
+const props = defineProps<{
+  workspace: string;
+}>();
+
+const emit = defineEmits(['success', 'back']);
+
+const fileTypes: FileType[] = [
+  {
+    displayName: 'Network JSON (ext: .json)',
+    hint: 'A JSON format compatible with Multinet Networks',
+    extension: 'json',
+    type: 'network',
+  },
+  {
+    displayName: 'Table CSV (ext: .csv)',
+    hint: 'A CSV table compatible with Multinet',
+    extension: 'csv',
+    type: 'table',
+  },
+  {
+    displayName: 'Table JSON (ext: .json)',
+    hint: 'A JSON table compatible with Multinet Tables',
+    extension: 'json',
+    type: 'table',
+  },
+];
+
+const step = ref(1);
+
+const tableCreationError = ref<string | null>(null);
+const fileUploadError = ref<string | null>(null);
+const uploadName = ref<string | null>(null);
+const selectedFileType = ref<FileType | null>(null);
+const file = ref<File | null>(null);
+const uploading = ref(false);
+
+const uploadType = ref<number | undefined>(undefined);
+function resetForm() {
+  file.value = null;
+  uploadName.value = null;
+  selectedFileType.value = null;
+  fileUploadError.value = null;
+}
+const isNetwork = computed(() => uploadType.value === 0);
+watch(uploadType, resetForm);
+
+function fileInfo(fileInput: File): [string, FileType] | null {
+  if (!fileInput) {
+    return null;
+  }
+
+  const [fileNameSplit, ...extensions] = fileInput.name.split('.');
+  const cleanedFileName = fileNameSplit.trim().replaceAll(' ', '-');
+  const extension = extensions[extensions.length - 1];
+
+  const found = fileTypes.find((type) => type.extension.includes(extension) && (isNetwork.value ? type.type === 'network' : type.type === 'table'));
+
+  return found === undefined ? null : [cleanedFileName, found];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const sampleRows = ref<Record<string, any>[][]>([]);
+const headers = computed(() => sampleRows.value.map((sample) => {
+  const keys = Object.keys(sample[0] || {});
+  return keys.map((key) => ({
+    text: key,
+    value: key,
+  }));
+}));
+
+const delimiter = ref(',');
+const delimiterOptions = [{ text: ',', value: ',' }, { text: ';', value: ';' }, { text: '|', value: '|' }, { text: 'tab', value: '\t' }];
+
+const quoteChar = ref('"');
+const quoteCharOptions = ['"', '\''];
+
+// Type recommendation
+const columnTypes = ref<Record<string, ColumnType>[]>([]);
+const multinetTypes: readonly ColumnType[] = ['primary key', 'edge source', 'edge target', 'label', 'string', 'boolean', 'category', 'number', 'date', 'ignored'];
+const fileIsCSV = computed(() => file.value !== null && file.value.name.substring(file.value.name.length - 4, file.value.name.length) === '.csv');
+
+async function runCSVAnalysis(newFile: File, userDelim?: string, userQuote?: string) {
+  const analysis = await analyzeCSV(newFile, userDelim, userQuote);
+  columnTypes.value[0] = analysis.columnTypes;
+
+  sampleRows.value = [[...analysis.sampleRows]];
+  delimiter.value = analysis.delimiter;
+}
+
+async function runJSONAnalysis(newFile: File) {
+  // Get the sample rows
+  if (isNetwork.value) {
+    const jsonData = JSON.parse(await newFile.text());
+
+    // Throw an error if the JSON is not a network
+    if (!jsonData.nodes || !(jsonData.edges || jsonData.links)) {
+      // TODO: show this error to the user
+      throw new Error('Invalid network JSON');
+    }
+
+    const nodes = jsonData.nodes.slice(0, 30);
+    const edges = (jsonData.edges || jsonData.links).slice(0.30);
+
+    sampleRows.value = [nodes, edges];
+    columnTypes.value = [guessJSONColumnTypes(sampleRows.value[0]), guessJSONColumnTypes(sampleRows.value[1])];
+  } else {
+    sampleRows.value = [(JSON.parse(await newFile.text()) as object[]).slice(0, 30)];
+    columnTypes.value = [guessJSONColumnTypes(sampleRows.value[0])];
+  }
+}
+
+async function handleFileInput() {
+  // Handles clearing the file input
+  if (!file.value) {
+    resetForm();
+    return;
+  }
+
+  // Reset the table creation issue
+  tableCreationError.value = null;
+
+  const fileInfoResult = fileInfo(file.value);
+  if (fileInfoResult !== null) {
+    const [fileNameResult, selectedTypeResult] = fileInfoResult;
+    uploadName.value = fileNameResult;
+    selectedFileType.value = selectedTypeResult;
+    fileUploadError.value = null;
+  } else {
+    fileUploadError.value = 'Invalid file type';
+    selectedFileType.value = null;
+  }
+
+  if (fileIsCSV.value) {
+    await runCSVAnalysis(file.value);
+  } else {
+    await runJSONAnalysis(file.value);
+  }
+}
+
+const buttonDisabled = computed(() => (
+  (step.value === 1
+    && (!file.value
+      || !objectNameIsValid(uploadName.value)
+      || !selectedFileType.value
+      || !!fileUploadError.value
+    )
+  )
+  || (step.value === 2
+    && (!(Object.entries(columnTypes.value[0]).length > 0)
+      || (
+        // If we have a network, first table must have a primary key
+        !(isNetwork.value && Object.values(columnTypes.value[0]).includes('primary key'))
+        && !(
+          // If we don't have a network, table may or may not have a primary key.
+          // If it's an edge table, must have source and target
+          !isNetwork.value
+          && (
+            Object.values(columnTypes.value[0]).find((type) => type.includes('edge'))
+              ? (Object.values(columnTypes.value[0]).includes('edge source')
+              && Object.values(columnTypes.value[0]).includes('edge target'))
+              : true
+          )
+        )
+      )
+    )
+  )
+  || (step.value === 3
+    && (!(Object.entries(columnTypes.value[1]).length > 0)
+      || !Object.values(columnTypes.value[1]).includes('edge source')
+      || !Object.values(columnTypes.value[1]).includes('edge target')
+    )
+  )
+));
+
+async function delimiterQuoteChanged() {
+  // Re-run the analysis with the user-specified delimiter and quote character
+  if (file.value !== null) {
+    await runCSVAnalysis(file.value, delimiter.value, quoteChar.value);
+  }
+}
+
+async function upload() {
+  tableCreationError.value = null;
+
+  try {
+    if (file.value === null || uploadName.value === null || selectedFileType.value === null) {
+      return;
+    }
+
+    uploading.value = true;
+
+    if (isNetwork.value) {
+      api.uploadNetwork(
+        props.workspace,
+        uploadName.value,
+        file.value,
+        columnTypes.value[0],
+        columnTypes.value[1],
+      );
+    } else {
+      const isEdgeTable = Object.values(columnTypes.value[0]).includes('edge source') && Object.values(columnTypes.value[0]).includes('edge target');
+      api.uploadTable(props.workspace, uploadName.value, {
+        data: file.value,
+        edgeTable: isEdgeTable,
+        columnTypes: columnTypes.value[0],
+        fileType: fileIsCSV.value ? 'csv' : 'json',
+        delimiter: delimiter.value,
+        quoteChar: quoteChar.value,
+      });
+    }
+
+    emit('success');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (err: any) {
+    tableCreationError.value = `${[Object.values(err.response.data).flat()][0]}`;
+  } finally {
+    uploading.value = false;
+  }
+}
+
+function openHelpDocs() {
+  if (uploadType.value === undefined) {
+    window.open('https://docs.multinet.app/en/latest/user_documentation.html#upload-data');
+  } else if (isNetwork.value) {
+    window.open('https://docs.multinet.app/en/latest/user_documentation.html#upload-network');
+  } else {
+    window.open('https://docs.multinet.app/en/latest/user_documentation.html#upload-table');
+  }
+}
+</script>
diff --git a/src/components/TablePanel.vue b/src/components/TablePanel.vue
index 9986784..c4027e1 100644
--- a/src/components/TablePanel.vue
+++ b/src/components/TablePanel.vue
@@ -27,11 +27,6 @@
           @closed="cleanup"
         />
       </div>
-
-      <table-dialog
-        :workspace="workspace"
-        @success="cleanup"
-      />
     </v-subheader>
 
     <v-divider />
@@ -107,13 +102,11 @@
   </v-list>
 </template>
 
-<script lang="ts">
-import type { PropType, Ref } from 'vue';
+<script setup lang="ts">
 import {
-  computed, defineComponent, ref, watch,
+  computed, ref, watch,
 } from 'vue';
 import DeleteTableDialog from '@/components/DeleteTableDialog.vue';
-import TableDialog from '@/components/TableDialog.vue';
 import DownloadDialog from '@/components/DownloadDialog.vue';
 
 import store from '@/store';
@@ -121,73 +114,38 @@ import type { App, CheckboxTable } from '@/types';
 import type { Table } from 'multinet';
 import { visualizeWithNewSession } from '@/utils/sessionHelpers';
 
-export default defineComponent({
-  name: 'TablePanel',
-
-  components: {
-    DeleteTableDialog,
-    TableDialog,
-    DownloadDialog,
-  },
-
-  props: {
-    workspace: {
-      type: String as PropType<string>,
-      required: true,
-    },
-
-    items: {
-      type: Array as PropType<Table[]>,
-      required: true,
-    },
-
-    loading: {
-      type: Boolean as PropType<boolean>,
-      required: true,
-    },
-
-    apps: {
-      type: Object as PropType<{ network_visualizations: App[]; table_visualizations: App[] }>,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const checkbox: Ref<CheckboxTable> = ref({});
-    const singleSelected: Ref<string | null> = ref(null);
-
-    const checked = computed(() => Object.keys(checkbox.value).filter((d) => !!checkbox.value[d]));
-    const selection = computed(() => (singleSelected.value !== null ? [singleSelected.value] : [...checked.value]));
-    const upsetUrl = computed(() => {
-      const foundApp = props.apps.table_visualizations.find((vis: App) => vis.name === 'Upset');
-
-      return foundApp !== undefined ? foundApp.url : '';
-    });
-
-    function clearCheckboxes() {
-      Object.keys(checkbox.value).forEach((key) => {
-        checkbox.value[key] = false;
-      });
-    }
-
-    async function cleanup() {
-      singleSelected.value = null;
-      await store.dispatch.fetchWorkspace(props.workspace);
-      clearCheckboxes();
-    }
-
-    watch(() => props.workspace, () => clearCheckboxes());
-
-    return {
-      checkbox,
-      singleSelected,
-      selection,
-      upsetUrl,
-      cleanup,
-      visualizeWithNewSession,
-    };
-  },
+const props = defineProps<{
+  workspace: string
+  items: Table[]
+  loading: boolean
+  apps: { network_visualizations: App[]; table_visualizations: App[] }
+}>();
+
+const checkbox = ref<CheckboxTable>({});
+const singleSelected = ref<string | null>(null);
+
+const checked = computed(() => Object.keys(checkbox.value).filter((d) => !!checkbox.value[d]));
+const selection = computed(() => (singleSelected.value !== null ? [singleSelected.value] : [...checked.value]));
+const upsetUrl = computed(() => {
+  const foundApp = props.apps.table_visualizations.find((vis: App) => vis.name === 'Upset');
+
+  return foundApp !== undefined ? foundApp.url : '';
 });
+
+function clearCheckboxes() {
+  Object.keys(checkbox.value).forEach((key) => {
+    checkbox.value[key] = false;
+  });
+}
+
+async function cleanup() {
+  singleSelected.value = null;
+  await store.dispatch.fetchWorkspace(props.workspace);
+  clearCheckboxes();
+}
+
+watch(() => props.workspace, () => clearCheckboxes());
+
 </script>
 
 <style scoped>
diff --git a/src/types.ts b/src/types.ts
index e3f17aa..4ac9fd7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,3 @@
-import type { UploadType, TableUploadType, NetworkUploadType } from 'multinet';
-
-export type CSVColumnType = 'label' | 'boolean' | 'category' | 'number' | 'date';
-
 export interface App {
   name: string;
   url: string;
@@ -22,23 +18,11 @@ export interface TableRow {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
 }
-
 export interface FileType {
   displayName: string;
   hint: string;
-  extension: string[];
-  queryCall: UploadType;
-}
-
-export interface TableFileType extends FileType{
-  queryCall: TableUploadType;
-}
-export interface NetworkFileType extends FileType{
-  queryCall: NetworkUploadType;
-}
-
-export interface FileTypeTable {
-  [key: string]: FileType;
+  extension: string;
+  type: 'network' | 'table';
 }
 
 export interface CheckboxTable {
diff --git a/src/utils/files.ts b/src/utils/files.ts
index a5c3e8f..491d9bf 100644
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@@ -1,7 +1,6 @@
-import type { ParseResult } from 'papaparse';
 import Papa from 'papaparse';
 import dayjs from 'dayjs';
-import type { CSVColumnType } from '@/types';
+import type { ColumnType } from 'multinet';
 
 function isBoolean(strings: Set<string>) {
   // This function tests whether both elements of an array belong to the string
@@ -31,114 +30,101 @@ function isBoolean(strings: Set<string>) {
   return strings.size === 2 && candidates.some(hasPair);
 }
 
-interface TypeScore {
-  strings: Set<string>;
-  number: number;
-  date: number;
-  total: number;
+function generateColumnTypes(sampleRows: Record<string, unknown>[]) {
+  /*
+  recommendations are in the following order:
+  keys
+  boolean
+  category
+  date
+  number
+
+  label is fallback
+  */
+
+  const columnTypes: Record<string, ColumnType> = {};
+
+  // Using the sample rows, guess a column type
+  const columnNames = new Set(Object.keys(sampleRows[0]));
+  sampleRows.forEach((row) => {
+    Object.keys(row).forEach((field) => columnNames.add(field));
+  });
+
+  columnNames.forEach((field) => {
+    const valuesInSample = sampleRows.map((row) => `${row[field]}`);
+    const uniqueValuesInSample = new Set(valuesInSample);
+
+    const isKey = field === '_key' || field === 'id';
+    const isSource = field === '_from' || field === 'source';
+    const isTarget = field === '_to' || field === 'target';
+    const isLabel = field.toLocaleLowerCase().includes('name') || field === 'label';
+    const boolean = isBoolean(uniqueValuesInSample);
+    const category = uniqueValuesInSample.size <= 10 && !(uniqueValuesInSample.size === sampleRows.length);
+    const number = valuesInSample.every((value) => !Number.isNaN(Number(value)));
+    const date = valuesInSample.every((value) => dayjs(value).isValid());
+
+    let rec: ColumnType = 'string';
+    if (isKey) {
+      rec = 'primary key';
+    } else if (isSource) {
+      rec = 'edge source';
+    } else if (isTarget) {
+      rec = 'edge target';
+    } else if (boolean) {
+      rec = 'boolean';
+    } else if (category && !number && !date) {
+      rec = 'category';
+    } else if (date) {
+      rec = 'date';
+    } else if (number) {
+      rec = 'number';
+    } else if (isLabel) {
+      rec = 'label';
+    }
+
+    columnTypes[field] = rec;
+  });
+
+  return columnTypes;
 }
 
-interface CSVAnalysis {
-  typeRecs: Map<string, CSVColumnType>;
+interface Analysis {
+  columnTypes: Record<string, ColumnType>;
   sampleRows: Array<Record<string, unknown>>;
+}
+
+interface CSVAnalysis extends Analysis {
   delimiter: string;
 }
 
-export async function analyzeCSV(file: File, userDelim?: string, userQuote?: string): Promise<CSVAnalysis> {
+export async function analyzeCSV(file: File, userDelim?: string, userQuote?: string) {
   const parsePromise: Promise<CSVAnalysis> = new Promise((resolve) => {
-    const columnTypes = new Map<string, TypeScore>();
-    const typeRecs = new Map<string, CSVColumnType>();
     const sampleRows = [] as Array<Record<string, unknown>>;
     let delimiter = '';
-    let rowsParsed = 0;
 
-    Papa.parse(file, {
+    Papa.parse<Record<string, unknown>>(file, {
       header: true,
       skipEmptyLines: true,
       delimiter: userDelim === undefined ? '' : userDelim,
       quoteChar: userQuote === undefined ? '"' : userQuote,
-      step(row: ParseResult<Record<string, unknown>>, parser) {
+
+      step(row, parser) {
         // Set the delimiter
         delimiter = row.meta.delimiter;
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const data = row.data as { [key: string]: any };
-
-        if (sampleRows.length !== 30) {
-          sampleRows.push({ ...data });
-        }
+        sampleRows.push(row.data as unknown as Record<string, unknown>);
 
-        // Increment number of rows parsed and return if we've done 1000
-        rowsParsed += 1;
-        if (rowsParsed === 1000) {
+        if (sampleRows.length === 30) {
           parser.abort();
         }
-
-        Object.keys(data).forEach((key: string) => {
-          if (!columnTypes.has(key)) {
-            columnTypes.set(key, {
-              strings: new Set<string>(),
-              number: 0,
-              date: 0,
-              total: 0,
-            });
-          }
-
-          const entry = columnTypes.get(key);
-          if (entry === undefined) {
-            throw new Error('impossible');
-          }
-
-          // Pass the value through a gauntlet of heuristics to see what types
-          // it can convert to.
-          const value = data[key];
-          entry.total += 1;
-
-          // Test for categoriness by counting up all the unique strings in
-          // the column.
-          entry.strings.add(value);
-
-          // See if the value can be converted to a number. Empty strings
-          // convert to 0, so those are excluded specifically. Trim the string
-          // here and not above to preserve its literal string value in case
-          // it's not a number.
-          if (typeof value === 'string' && value.trim() !== '' && !Number.isNaN(Number(value.trim()))) {
-            entry.number += 1;
-          }
-
-          // See if the value looks like a date.
-          if (dayjs(value).isValid()) {
-            entry.date += 1;
-          }
-        });
       },
 
       complete: () => {
-        columnTypes.forEach((entry, field) => {
-          const isKey = field === '_key' || field === '_from' || field === '_to';
-          const boolean = isBoolean(entry.strings);
-          const category = entry.strings.size <= 10;
-          const number = entry.number === entry.total;
-          const date = entry.date === entry.total;
-
-          let rec: CSVColumnType = 'label';
-          if (isKey) {
-            rec = 'label';
-          } else if (boolean) {
-            rec = 'boolean';
-          } else if (category && !number && !date) {
-            rec = 'category';
-          } else if (number) {
-            rec = 'number';
-          } else if (date) {
-            rec = 'date';
-          }
-
-          typeRecs.set(field, rec);
-        });
+        // Generate the column types
+        const columnTypes = generateColumnTypes(sampleRows);
 
         resolve({
-          typeRecs,
+          columnTypes,
           sampleRows,
           delimiter,
         });
@@ -150,42 +136,5 @@ export async function analyzeCSV(file: File, userDelim?: string, userQuote?: str
 }
 
 export function guessJSONColumnTypes(sampleRows: { [key:string]: string }[]) {
-  // Using the sample rows, guess a column type
-  let numNumbers = 0;
-  let numDates = 0;
-
-  return Object.keys(sampleRows[0]).map((field) => {
-    const valuesInSample = sampleRows.map((row) => {
-      if (typeof field === 'string' && field.trim() !== '' && !Number.isNaN(Number(field.trim()))) {
-        numNumbers += 1;
-      }
-
-      // See if the value looks like a date.
-      if (dayjs(field).isValid()) {
-        numDates += 1;
-      }
-      return row[field];
-    });
-    const uniqueValuesInSample = new Set(valuesInSample);
-
-    const isKey = field === '_key' || field === '_from' || field === '_to';
-    const boolean = isBoolean(uniqueValuesInSample);
-    const category = uniqueValuesInSample.size <= 10;
-    const number = numNumbers === valuesInSample.length;
-    const date = numDates === valuesInSample.length;
-
-    let rec: CSVColumnType = 'label';
-    if (isKey) {
-      rec = 'label';
-    } else if (boolean) {
-      rec = 'boolean';
-    } else if (category && !number && !date) {
-      rec = 'category';
-    } else if (number) {
-      rec = 'number';
-    } else if (date) {
-      rec = 'date';
-    }
-    return { [field]: rec };
-  }).reduce((accumulator, currentVal) => ({ ...accumulator, ...currentVal }), {});
+  return generateColumnTypes(sampleRows);
 }
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 8c2b69d..e31a002 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -80,6 +80,7 @@
         />
         <v-spacer />
 
+        <create-modify-dialog :workspace="workspace" />
         <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
@@ -138,8 +139,6 @@
             <network-panel
               :workspace="workspace"
               :items="networks"
-              :node-tables="nodeTables.map((table) => table.name)"
-              :edge-tables="edgeTables.map((table) => table.name)"
               :loading="loading"
               :apps="apps"
             />
@@ -168,10 +167,9 @@
   </v-container>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
+<script setup lang="ts">
 import {
-  defineComponent, ref, computed, watch,
+  ref, computed, watch,
 } from 'vue';
 
 import api from '@/api';
@@ -189,118 +187,82 @@ const workspaceNameRules: Array<(x: string) => string|boolean> = [
   (x: string) => !surroundingWhitespace.test(x) || 'Workspace name cannot begin or end with whitespace',
 ];
 
-export default defineComponent({
-  name: 'WorkspaceDetail',
-
-  components: {
-    TablePanel,
-    NetworkPanel,
-    WorkspaceOptionMenu,
-    SessionPanel,
-  },
-
-  props: {
-    workspace: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    apps: {
-      type: Object as PropType<{ network_visualizations: App[]; table_visualizations: App[] }>,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const router = useRouter();
-
-    const localWorkspace = ref<string | null>(null);
-    const editing = ref(false);
-    const requestError = ref<string | null>(null);
-    const loading = ref(false);
-
-    const nodeTables = computed(() => store.getters.nodeTables);
-    const edgeTables = computed(() => store.getters.edgeTables);
-    const tables = computed(() => store.getters.tables);
-    const networks = computed(() => store.getters.networks);
-    const uploads = computed(() => store.state.uploads.filter(
-      // Find uploads with PENDING, STARTED, or FAILED status and that are less than 15 minutes old
-      (upload) => (upload.status === 'PENDING' || upload.status === 'STARTED' || upload.status === 'FAILED') && (new Date().getTime() - new Date(upload.created).getTime() < 15 * 60 * 1000),
-    ));
-    const nameErrorMessages = computed(() => {
-      const errors = [
-        ...workspaceNameRules.map((rule) => rule(localWorkspace.value as string)),
-        requestError,
-      ];
-
-      return errors.filter((res): res is string => typeof res === 'string');
-    });
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function cancelRename() {
-      requestError.value = null;
-      localWorkspace.value = props.workspace;
-      editing.value = false;
-    }
+const props = defineProps<{
+    workspace: string
+    apps: { network_visualizations: App[]; table_visualizations: App[] }
+  }>();
+
+const router = useRouter();
+
+const localWorkspace = ref<string | null>(null);
+const editing = ref(false);
+const requestError = ref<string | null>(null);
+const loading = ref(false);
+const tables = computed(() => store.getters.tables);
+const networks = computed(() => store.getters.networks);
+const uploads = computed(() => store.state.uploads.filter(
+  // Find uploads with PENDING, STARTED, or FAILED status and that are less than 15 minutes old
+  (upload) => (upload.status === 'PENDING' || upload.status === 'STARTED' || upload.status === 'FAILED') && (new Date().getTime() - new Date(upload.created).getTime() < 15 * 60 * 1000),
+));
+const nameErrorMessages = computed(() => {
+  const errors = [
+    ...workspaceNameRules.map((rule) => rule(localWorkspace.value as string)),
+    requestError,
+  ];
+
+  return errors.filter((res): res is string => typeof res === 'string');
+});
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async function renameWorkspace() {
-      if (nameErrorMessages.value.length) {
-        return;
-      }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function cancelRename() {
+  requestError.value = null;
+  localWorkspace.value = props.workspace;
+  editing.value = false;
+}
 
-      if (localWorkspace.value === props.workspace) {
-        editing.value = false;
-        return;
-      }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function renameWorkspace() {
+  if (nameErrorMessages.value.length) {
+    return;
+  }
+
+  if (localWorkspace.value === props.workspace) {
+    editing.value = false;
+    return;
+  }
+
+  if (localWorkspace.value !== null) {
+    try {
+      const { name } = await api.renameWorkspace(props.workspace, localWorkspace.value);
+      router.push(`/workspaces/${name}`);
+      editing.value = false;
+      requestError.value = null;
 
-      if (localWorkspace.value !== null) {
-        try {
-          const { name } = await api.renameWorkspace(props.workspace, localWorkspace.value);
-          router.push(`/workspaces/${name}`);
-          editing.value = false;
-          requestError.value = null;
-
-          store.dispatch.fetchWorkspaces();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } catch (err: any) {
-          if (err.response.status === 409) {
-            requestError.value = 'A workspace by that name already exists';
-          } else {
-            requestError.value = `${Object.values(err.response.data).flat()[0]}`;
-          }
-        }
+      store.dispatch.fetchWorkspaces();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      if (err.response.status === 409) {
+        requestError.value = 'A workspace by that name already exists';
+      } else {
+        requestError.value = `${Object.values(err.response.data).flat()[0]}`;
       }
     }
+  }
+}
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async function update(this: any) {
-      loading.value = true;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function update(this: any) {
+  loading.value = true;
 
-      localWorkspace.value = props.workspace;
-      await store.dispatch.fetchWorkspace(props.workspace);
-      loading.value = false;
-    }
+  localWorkspace.value = props.workspace;
+  await store.dispatch.fetchWorkspace(props.workspace);
+  loading.value = false;
+}
 
-    watch(() => props.workspace, () => update());
-    watch(localWorkspace, () => { requestError.value = null; });
-
-    update();
-
-    return {
-      editing,
-      loading,
-      networks,
-      nodeTables,
-      edgeTables,
-      tables,
-      cancelRename,
-      renameWorkspace,
-      nameErrorMessages,
-      localWorkspace,
-      uploads,
-    };
-  },
-});
+watch(() => props.workspace, () => update());
+watch(localWorkspace, () => { requestError.value = null; });
+
+update();
 </script>
 
 <style scoped>
diff --git a/yarn.lock b/yarn.lock
index d1c5da1..083a219 100644
--- a/yarn.lock
+++ b/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.13:
-  version "0.21.13"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.21.13.tgz#a4c440b05369bcb2001a728c9ecf9cc2b86a298c"
-  integrity sha512-UI++fPe3nr1ueEO5VSqGtL1rb6iV8Qt7ACE2Srw2HqcHt+jdhXmaf439XZtrRHl/TqcBE6xlnsObDSnbyiHbgQ==
+multinet@0.21.14:
+  version "0.21.14"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.21.14.tgz#abb575c6c1be1471cb64ec2ab14ecb93de44fdb4"
+  integrity sha512-LO6wkrSTR0hlVGQOKpDcqJhDASm6ybJtpEAgwub8xlgJRLsKA9XQK56t34coQ/JcR81+2wqWXKaFVYY4i1tLLQ==
   dependencies:
     axios "^0.21.1"
     django-s3-file-field "^0.1.2"