diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index f408ee93d23d003a49e1337c351b81d18f43996c..ae50689cb8a087b99ed43cfddb75531013ebe4a4 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
-import {ConceptMapping, Mappings} from "@/services/api"
+import {ConceptMapping, Mappings, TableIdentifier} from "@/services/api"
 import {useSelectionStore} from "@/services/selectionStore";
-import {computed, reactive, ref, watch} from "vue";
+import {computed, reactive, ref, watch, toValue} from "vue";
 import TableSelector from "@/components/helpers/TableSelector.vue";
 import InlineColumnMapper from "@/components/subcomponents/map/InlineColumnMapper.vue";
 import {storeToRefs} from "pinia";
@@ -27,7 +27,7 @@ const {selectedMitM, selectedMitMDef, selectedTable} = storeToRefs(selection)
 
 const formvalidity = reactive({identityCols: false, inlineCols: false, fkRelationCols: false})
 const loading = ref(false)
-const dialog = reactive({show: false, success: false, content: "", title: "Mapping Validation"})
+const dialog = ref({show: false, success: false, content: "", title: "Mapping Validation"})
 
 const recreatedMapping = ref<ConceptMapping>(null)
 
@@ -106,7 +106,7 @@ function suggestIdColMap(columns?: ExtendedColumnListItem[]) {
 function suggestInlineColMap(columns?: ExtendedColumnListItem[]) {
   if (!!recreatedMapping.value?.inline_relations)
     return colMapFromNames(columns, harmonizeToObj(recreatedMapping.value.inline_relations))
-  else return suggestColMap(columns, currentConceptRelations.value?.inline_relations)
+  else return suggestColMap(columns, currentConceptRelations.value?.inline)
 }
 
 function suggestFKColMaps(columns?: ExtendedColumnListItem[]): {
@@ -185,7 +185,7 @@ async function onSubmit() {
   Object.entries(foreignRelationMappings.value).forEach(([fkRelName, fkMapping]) => {
     foreign_relations[fkRelName] = {
       fk_columns: Object.fromEntries(Object.entries(fkMapping.fk_columns).map(([nameToMap, col]) => [nameToMap, col.name])),
-      referred_table: fkMapping.referred_table
+      referred_table: toValue(fkMapping.referred_table)
     }
   })
 
@@ -220,13 +220,13 @@ async function onSubmit() {
   loading.value = false
 
   if (res?.validation_result.is_valid) {
-    dialog.success = true
-    dialog.content = "Successfully validated mapping."
+    dialog.value.success = true
+    dialog.value.content = "Successfully validated mapping."
   } else {
-    dialog.success = false
-    dialog.content = "Mapping validation failed."
+    dialog.value.success = false
+    dialog.value.content = "Mapping validation failed."
   }
-  dialog.show = true
+  dialog.value.show = true
 }
 
 function recreate(cmEntry: ConceptMappingEntry) {
diff --git a/src/components/subcomponents/transform/CreateVirtualView.vue b/src/components/subcomponents/transform/CreateVirtualView.vue
index 51328bcca2c0e08447fb2590acc738ffc8de9cc4..eadb59fc9b942cf2c1b0aba008f430be1005f5c1 100644
--- a/src/components/subcomponents/transform/CreateVirtualView.vue
+++ b/src/components/subcomponents/transform/CreateVirtualView.vue
@@ -61,7 +61,7 @@ const api = useAPI()
 const {virtualDBSchema} = storeToRefs(store)
 const {selectedTable} = storeToRefs(selection)
 
-const dialog = reactive({content: "", show: false, success: null, title: "Virtual View Creation"})
+const dialog = ref({content: "", show: false, success: null, title: "Virtual View Creation"})
 const loading = ref(false)
 const mode = ref<WidgetKind>("transform")
 const removeBaseTable = ref(false)
@@ -108,21 +108,21 @@ async function attemptCreation(request: VirtualViewCreation, options?: {
   const r = await api.createVirtualView(request, {override_if_exists: permitOverride.value})
 
   const success = !!r?.data
-  dialog.success = success
+  dialog.value.success = success
   if (success) {
-    dialog.content = `"${r.data.table_meta.name}" has been created`
+    dialog.value.content = `"${r.data.table_meta.name}" has been created`
 
     if (options?.dropBase) {
       const t = options.base
       const r2 = await api.dropVirtualView({schema: t.schema, view: t.name})
       if (r2)
-        dialog.content += ` and its base ${t.name} has been dropped`
+        dialog.value.content += ` and its base ${t.name} has been dropped`
 
     }
   } else {
-    dialog.content = `Virtual view creation has failed`
+    dialog.value.content = `Virtual view creation has failed`
   }
-  dialog.show = true
+  dialog.value.show = true
 
   loading.value = false
 
diff --git a/src/components/subcomponents/view/MarkFK.vue b/src/components/subcomponents/view/MarkFK.vue
index 570a1fbb659e653fd797fed766af0c77582c7d10..26670ca7b04877b46c0aa32c7d9a00645c34855b 100644
--- a/src/components/subcomponents/view/MarkFK.vue
+++ b/src/components/subcomponents/view/MarkFK.vue
@@ -22,7 +22,7 @@ const rightFKCols = ref([] as string[])
 const sourceDB = ref<SourceDBType>(props.sourceDB ?? "original")
 const loading = ref(false)
 const form = ref(null)
-const dialog = reactive({success: null, show: false, content: null, title: "Outcome"})
+const dialog = ref({success: null, show: false, content: null, title: "Outcome"})
 
 
 const {columnList: leftColumnList} = useColumnsOfTable(leftTable)
@@ -50,12 +50,12 @@ async function markFK() {
 
   loading.value = false
 
-  dialog.success = r?.data?.status
+  dialog.value.success = r?.data?.status
   if (!r?.data?.status)
-    dialog.content = r?.data?.error ? "Operation failed\n" + r.data.error : "Request failed"
+    dialog.value.content = r?.data?.error ? "Operation failed\n" + r.data.error : "Request failed"
   else
-    dialog.content = "Successfully marked foreign key relationship."
-  dialog.show = true
+    dialog.value.content = "Successfully marked foreign key relationship."
+  dialog.value.show = true
 }
 
 function reset() {
diff --git a/src/services/utils.ts b/src/services/utils.ts
index 76b33521e436b5f57d3c5e650aaa2aaf85cee088..4b69bad45c253f2ebd2dd7e0f32efbc08cd89410 100644
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -16,7 +16,7 @@ export function anyTIDtoTID(arg, source?): TableIdentifier | null {
   else return arg
 }
 
-export function isSameTID(arg1, arg2, source?) : boolean {
+export function isSameTID(arg1, arg2, source?): boolean {
   const tid1 = anyTIDtoTID(arg1, source)
   const tid2 = anyTIDtoTID(arg2, source)
   return !!tid1 && !!tid2 && tid1.source === tid2.source && tid1.schema === tid2.schema && tid1.name === tid2.name
@@ -39,14 +39,14 @@ export function jsonToPrettyStr(obj) {
 }
 
 export function harmonizeToObj(arg: object | any[]) {
-  return Array.isArray(arg) ? Object.fromEntries(arg.map(v => [v,v])) : arg
+  return Array.isArray(arg) ? Object.fromEntries(arg.map(v => [v, v])) : arg
 }
 
 export const rules = {
   required: v => !!v || "required",
   isInt: v => v == null || Number.parseInt(v) == Number.parseFloat(v) || "must be an integer",
   isNonNeg: v => v == null || Number.parseInt(v) >= 0 || "must be non-negative",
-  uniqueWithin<T>(collection: MaybeRef<Array<T>>, accessor: CallableFunction<T, string> = item => item, errMsg = "name already exists") {
+  uniqueWithin<T>(collection: MaybeRef<Array<T>>, accessor: ((arg0: T) => string) = item => item, errMsg = "name already exists") {
     return v => v == null || !toValue(collection).some((item) => accessor(item) === v) || errMsg
   },
   url: v => {