From 04d20fd1b13d1c0f29e144adbea2d6f1c3a3716c Mon Sep 17 00:00:00 2001
From: shelcrow <sheldon.b.crow@gmail.com>
Date: Tue, 20 Apr 2021 10:34:15 -0700
Subject: [PATCH] Added Load In functionality to merge from other files

---
 .../EditDefinition/LoadInDefinition.vue       |  614 ++--
 .../EditDefinition/RemoveInheritance.vue      |  579 ++--
 src/components/UploadOBTree.vue               | 1518 ++++-----
 src/components/forms/CreateDefinitionForm.vue | 1193 ++++---
 src/store/index.js                            | 1510 ++++-----
 src/utils/JSONEditor.js                       |  727 +++--
 src/views/OBEditor.vue                        | 2733 +++++++++--------
 7 files changed, 4504 insertions(+), 4370 deletions(-)

diff --git a/src/components/EditDefinition/LoadInDefinition.vue b/src/components/EditDefinition/LoadInDefinition.vue
index 0ebc4ae..7570fe6 100644
--- a/src/components/EditDefinition/LoadInDefinition.vue
+++ b/src/components/EditDefinition/LoadInDefinition.vue
@@ -1,288 +1,326 @@
-<template>
-  <div id="load-in-defn-edit-view-container">
-    <div id="load-in-defn-container">
-      <div>Select document:</div>
-      <b-form-select
-        v-model="selectedFile"
-        :options="getLoadedFiles"
-        :select-size="4"
-        id="select-form-files"
-      ></b-form-select>
-      <b-form-group
-        id="node-selector-input-label"
-        label="Search for definition:"
-        label-for="node-selector-input"
-      >
-        <b-form-input
-          v-model="searchTerm"
-          placeholder="Search for definition... (wildcard: *)"
-        ></b-form-input>
-      </b-form-group>
-      <div>Select definition to load in:</div>
-      <div id="load-in-defn-file-defns-container">
-        <span v-if="selectedFile">
-          <li
-            v-for="(name, index) in fileElements"
-            id="defn-from-file"
-            @click="selectDefn(index, name)"
-            :class="{ 'selected-node': index == selectedDefnIndex }"
-          >
-            {{ name }}
-          </li>
-        </span>
-      </div>
-      <b-table
-        :items="defnDetails"
-        id="loadInDefnDetailsTable"
-        ref="loadInDefnDetailTable"
-        v-if="selectedDefnName"
-      ></b-table>
-    </div>
-    <div id="load-in-defn-footer">
-      <span id="edit-form-buttons">
-        <b-button
-          @click="loadInDefinition"
-          :disabled="!selectedDefnName"
-          size="sm"
-          variant="primary"
-          >Load In</b-button
-        >
-        <b-button @click="exitView" size="sm">Back</b-button>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as miscUtilities from "../../utils/miscUtilities";
-
-export default {
-  data() {
-    return {
-      selectedFile: null,
-      selectedDefnIndex: null,
-      selectedDefnName: null,
-      searchTerm: ""
-    };
-  },
-  created() {},
-  methods: {
-    exitView() {
-      this.$store.commit("showNoView");
-    },
-    selectDefn(index, name) {
-      this.selectedDefnIndex = index;
-      this.selectedDefnName = name;
-    },
-    loadInDefinition() {
-      this.$store.commit({
-        type: "loadInDefinition",
-        defnFile: this.selectedFile,
-        defnName: this.selectedDefnName
-      });
-    }
-  },
-  computed: {
-    getLoadedFiles() {
-      let optionsArr = [];
-      for (let i in this.$store.state.loadedFiles) {
-        optionsArr.push({
-          value: i,
-          text: i
-        });
-      }
-      return optionsArr;
-    },
-    fileElements() {
-      let fileElements = Object.keys(
-        this.$store.state.loadedFiles[this.selectedFile]["file"]
-      );
-
-      return fileElements
-        .filter(node => {
-          return miscUtilities.wildcardSearch(node.toLowerCase(), this.searchTerm.toLowerCase());
-        })
-        .sort();
-    },
-    defnDetails() {
-      let temp_ret_obj = null;
-
-      let defnName = this.selectedDefnName;
-      let defnType = "";
-      let defnDescrip = "Documentation not available";
-      let defnEnum = "";
-      let temp_superClassList = [];
-      let temp_superClassListStr = "";
-      let defnObjChildren = "";
-      let typeOfDefn = null;
-
-      let defnFile = this.$store.state.loadedFiles[this.selectedFile]["file"];
-
-      if (defnFile[defnName]["allOf"]) {
-        if (miscUtilities.isTaxonomyElement(defnFile, defnName)) {
-          typeOfDefn = "TaxonomyElement";
-        } else {
-          typeOfDefn = "ObjWithInherit";
-        }
-        for (let i in defnFile[defnName]["allOf"]) {
-          if (defnFile[defnName]["allOf"][i]["$ref"]) {
-            temp_superClassList.push(
-              defnFile[defnName]["allOf"][i]["$ref"].slice(
-                defnFile[defnName]["allOf"][i]["$ref"].lastIndexOf("/") + 1
-              )
-            );
-          } else {
-            if (defnFile[defnName]["allOf"][i]["description"]) {
-              defnDescrip = defnFile[defnName]["allOf"][i]["description"];
-            }
-            if (defnFile[defnName]["allOf"][i]["type"]) {
-              defnType = defnFile[defnName]["allOf"][i]["type"];
-            }
-            if (defnFile[defnName]["allOf"][i]["enum"]) {
-              defnEnum = defnFile[defnName]["allOf"][i]["enum"];
-            }
-
-            if (typeOfDefn == "ObjWithInherit") {
-              if (defnFile[defnName]["allOf"][i]["properties"]) {
-                defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
-              }
-            }
-          }
-        }
-      } else if (defnFile[defnName]["properties"]) {
-        typeOfDefn = "Obj";
-        if (defnFile[defnName]["type"]) {
-          defnType = defnFile[defnName]["type"];
-        }
-
-        if (defnFile[defnName]["properties"]["description"]) {
-          defnDescrip = defnFile[defnName]["properties"]["description"];
-        }
-
-        defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
-      } else {
-        typeOfDefn = "Elem";
-        if (defnFile[defnName]["description"]) {
-          defnDescrip = defnFile[defnName]["description"];
-        }
-
-        if (defnFile[defnName]["type"]) {
-          defnType = defnFile[defnName]["type"];
-        }
-
-        if (defnFile[defnName]["enum"]) {
-          defnEnum = defnFile[defnName]["enum"];
-        }
-      }
-
-      if (temp_superClassList.length == 0) {
-        temp_superClassListStr = "None";
-      } else {
-        temp_superClassListStr = temp_superClassList.join(", ");
-      }
-
-      if (!defnEnum) {
-        defnEnum = "None";
-      } else {
-        defnEnum = defnEnum.join(", ");
-      }
-
-      if (defnObjChildren) {
-        defnObjChildren = defnObjChildren.join(", ");
-      } else {
-        defnObjChildren = "None";
-      }
-
-      if (typeOfDefn == "ObjWithInherit") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "TaxonomyElement") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr }
-        ];
-      } else if (typeOfDefn == "Obj") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "Elem") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Enumeration", Values: defnEnum },
-          { Attributes: "Documentation", Values: defnDescrip }
-        ];
-      }
-
-      let arr = temp_ret_obj;
-
-      return arr;
-    }
-  },
-  watch: {
-    "$store.state.showLoadInDefinitionForm"() {
-      this.selectedFile = null;
-      this.selectedDefnIndex = null;
-      this.selectedDefnName = null;
-    },
-    selectedFile() {
-      this.searchTerm = "";
-      this.selectedDefnIndex = null;
-      this.selectedDefnName = null;
-    }
-  }
-};
-</script>
-
-<style>
-#load-in-defn-edit-view-container {
-  display: grid;
-  height: 100%;
-  grid-template-rows: 1fr 50px;
-}
-
-#load-in-defn-container {
-  padding-top: 9px;
-  overflow-y: auto;
-  grid-row: 1 / 2;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-#load-in-defn-file-defns-container {
-  height: 250px;
-  overflow-y: auto;
-  background-color: white;
-  border-top: 1px solid black;
-  border-left: 1px solid black;
-  border-right: 1px solid black;
-  margin-bottom: 4px;
-}
-
-#defn-from-file {
-  list-style: none;
-  border-bottom: 1px solid black;
-}
-
-#select-form-files {
-  margin-bottom: 10px;
-}
-
-#load-in-defn-footer {
-  grid-row: 2 / 3;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: #d3d3d3 solid 1px;
-}
-</style>
+<template>
+  <div id="load-in-defn-edit-view-container">
+    <div id="load-in-defn-container">
+      <div>Select document:</div>
+      <b-form-select
+        v-model="selectedFile"
+        :options="getLoadedFiles"
+        :select-size="4"
+        id="select-form-files"
+      ></b-form-select>
+      <b-form-group
+        id="node-selector-input-label"
+        label="Search for definition:"
+        label-for="node-selector-input"
+      >
+        <b-form-input
+          v-model="searchTerm"
+          placeholder="Search for definition... (wildcard: *)"
+        ></b-form-input>
+      </b-form-group>
+      <div>Select definition to load in:</div>
+      <div id="load-in-defn-file-defns-container">
+        <span v-if="selectedFile">
+          <li
+            v-for="(name, index) in fileElements"
+            id="defn-from-file"
+            @click="selectDefn(index, name)"
+            :class="{ 'selected-node': index == selectedDefnIndex }"
+          >
+            {{ name }}
+          </li>
+        </span>
+      </div>
+      <b-table
+        :items="defnDetails"
+        id="loadInDefnDetailsTable"
+        ref="loadInDefnDetailTable"
+        v-if="selectedDefnName"
+      ></b-table>
+    </div>
+    <div id="load-in-defn-footer">
+      <span id="edit-form-buttons">
+        <b-button
+          @click="loadInDefinition"
+          :disabled="!selectedDefnName"
+          size="sm"
+          variant="primary"
+          >{{ loadInText }}</b-button
+        >
+        <b-button @click="exitView" size="sm">Back</b-button>
+      </span>
+      <span id="load-in-alert-container">
+        <b-alert
+          id="load-in-success-alert"
+          v-model="dismissCountDown"
+          dismissible
+          fade
+          variant="success"
+        >
+          Success
+        </b-alert>
+      </span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as miscUtilities from "../../utils/miscUtilities";
+
+export default {
+  data() {
+    return {
+      selectedFile: null,
+      selectedDefnIndex: null,
+      selectedDefnName: null,
+      searchTerm: "",
+      dismissCountDown: 0,
+      dismissSecs: 2,
+      loadInText: "Load In"
+    };
+  },
+  methods: {
+    exitView() {
+      this.$store.commit("showNoView");
+    },
+    selectDefn(index, name) {
+      this.selectedDefnIndex = index;
+      this.selectedDefnName = name;
+    },
+    loadInDefinition() {
+      this.$store.commit({
+        type: "loadInDefinition",
+        defnFile: this.selectedFile,
+        defnName: this.selectedDefnName
+      })
+      this.loadInText = 'Load in another'
+      this.showAlert()
+    },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown
+    },
+    showAlert() {
+      this.dismissCountDown = this.dismissSecs
+    }    
+  },
+  computed: {
+    getLoadedFiles() {
+      let optionsArr = [];
+      for (let i in this.$store.state.loadedFiles) {
+        optionsArr.push({
+          value: i,
+          text: i
+        });
+      }
+      return optionsArr;
+    },
+    fileElements() {
+      let fileElements = Object.keys(
+        this.$store.state.loadedFiles[this.selectedFile]["file"]
+      );
+
+      return fileElements
+        .filter(node => {
+          return miscUtilities.wildcardSearch(node.toLowerCase(), this.searchTerm.toLowerCase());
+        })
+        .sort();
+    },
+    defnDetails() {
+      let temp_ret_obj = null;
+
+      let defnName = this.selectedDefnName;
+      let defnType = "";
+      let defnDescrip = "Documentation not available";
+      let defnEnum = "";
+      let temp_superClassList = [];
+      let temp_superClassListStr = "";
+      let defnObjChildren = "";
+      let typeOfDefn = null;
+
+      let defnFile = this.$store.state.loadedFiles[this.selectedFile]["file"];
+
+      if (defnFile[defnName]["allOf"]) {
+        if (miscUtilities.isTaxonomyElement(defnFile, defnName)) {
+          typeOfDefn = "TaxonomyElement";
+        } else {
+          typeOfDefn = "ObjWithInherit";
+        }
+        for (let i in defnFile[defnName]["allOf"]) {
+          if (defnFile[defnName]["allOf"][i]["$ref"]) {
+            temp_superClassList.push(
+              defnFile[defnName]["allOf"][i]["$ref"].slice(
+                defnFile[defnName]["allOf"][i]["$ref"].lastIndexOf("/") + 1
+              )
+            );
+          } else {
+            if (defnFile[defnName]["allOf"][i]["description"]) {
+              defnDescrip = defnFile[defnName]["allOf"][i]["description"];
+            }
+            if (defnFile[defnName]["allOf"][i]["type"]) {
+              defnType = defnFile[defnName]["allOf"][i]["type"];
+            }
+            if (defnFile[defnName]["allOf"][i]["enum"]) {
+              defnEnum = defnFile[defnName]["allOf"][i]["enum"];
+            }
+
+            if (typeOfDefn == "ObjWithInherit") {
+              if (defnFile[defnName]["allOf"][i]["properties"]) {
+                defnObjChildren = Object.keys(defnFile[defnName]["allOf"][i]["properties"]);
+              }
+            }
+          }
+        }
+      } else if (defnFile[defnName]["properties"]) {
+        typeOfDefn = "Obj";
+        if (defnFile[defnName]["type"]) {
+          defnType = defnFile[defnName]["type"];
+        }
+
+        if (defnFile[defnName]["properties"]["description"]) {
+          defnDescrip = defnFile[defnName]["properties"]["description"];
+        }
+
+        defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
+      } else {
+        typeOfDefn = "Elem";
+        if (defnFile[defnName]["description"]) {
+          defnDescrip = defnFile[defnName]["description"];
+        }
+
+        if (defnFile[defnName]["type"]) {
+          defnType = defnFile[defnName]["type"];
+        }
+
+        if (defnFile[defnName]["enum"]) {
+          defnEnum = defnFile[defnName]["enum"];
+        }
+      }
+
+      if (temp_superClassList.length == 0) {
+        temp_superClassListStr = "None";
+      } else {
+        temp_superClassListStr = temp_superClassList.join(", ");
+      }
+
+      if (!defnEnum) {
+        defnEnum = "None";
+      } else {
+        defnEnum = defnEnum.join(", ");
+      }
+
+      if (defnObjChildren) {
+        defnObjChildren = defnObjChildren.join(", ");
+      } else {
+        defnObjChildren = "None";
+      }
+
+      if (typeOfDefn == "ObjWithInherit") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "TaxonomyElement") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr }
+        ];
+      } else if (typeOfDefn == "Obj") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "Elem") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Enumeration", Values: defnEnum },
+          { Attributes: "Documentation", Values: defnDescrip }
+        ];
+      }
+
+      let arr = temp_ret_obj;
+
+      return arr;
+    }
+  },
+  watch: {
+    "$store.state.showLoadInDefinitionForm"() {
+      this.selectedFile = null;
+      this.selectedDefnIndex = null;
+      this.selectedDefnName = null;
+    },
+    selectedFile() {
+      this.searchTerm = "";
+      this.selectedDefnIndex = null;
+      this.selectedDefnName = null;
+    }
+  }
+};
+</script>
+
+<style>
+#load-in-defn-edit-view-container {
+  display: grid;
+  height: 100%;
+  grid-template-rows: 1fr 50px;
+}
+
+#load-in-defn-container {
+  padding-top: 9px;
+  overflow-y: auto;
+  grid-row: 1 / 2;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+#load-in-defn-file-defns-container {
+  height: 250px;
+  overflow-y: auto;
+  background-color: white;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  margin-bottom: 4px;
+}
+
+#defn-from-file {
+  list-style: none;
+  border-bottom: 1px solid black;
+}
+
+#select-form-files {
+  margin-bottom: 10px;
+}
+
+#load-in-defn-footer {
+  grid-row: 2 / 3;
+  display: grid;
+  grid-template-columns: 1fr 1.3fr 1fr;
+  border: #d3d3d3 solid 1px;
+}
+
+#edit-form-buttons {
+  grid-column: 2 / 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#load-in-alert-container {
+  grid-column: 3 / 4;
+  display: flex;
+  justify-content: center
+}
+
+#load-in-success-alert {
+  max-height: 40px;
+}
+</style>
diff --git a/src/components/EditDefinition/RemoveInheritance.vue b/src/components/EditDefinition/RemoveInheritance.vue
index 079686a..db0fc84 100644
--- a/src/components/EditDefinition/RemoveInheritance.vue
+++ b/src/components/EditDefinition/RemoveInheritance.vue
@@ -1,289 +1,290 @@
-<!-- 
-Component for removing inheritance from objects
--->
-
-<template>
-  <div class="editor-function-container">
-    <div class="editor-function-body-container">
-      <p>Choose superclass to remove from object:</p>
-      <div class="superclass-list">
-        <li
-          v-for="(superClassName, index) in superClassList"
-          class="superclass-in-list"
-          @click="superClassToRemove(index, superClassName)"
-          :class="{ 'selected-superclass': index == selectedIndex }"
-        >
-          {{ superClassName }}
-        </li>
-      </div>
-      <br />
-      <b-table
-        :items="defnDetails"
-        id="add-member-detail-table"
-        ref="add-member-detail-table"
-        v-if="selectedSuperClass"
-      ></b-table>
-    </div>
-    <div class="editor-function-footer-container">
-      <b-button
-        variant="primary"
-        @click="removeSuperClass"
-        :disabled="emptySuperClassList"
-        size="sm"
-      >
-        Remove
-      </b-button>
-      <b-button @click="goPreviousView" size="sm">Back</b-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as miscUtilities from "../../utils/miscUtilities";
-
-export default {
-  data() {
-    return {
-      searchTerm: "",
-      selectedIndex: null,
-      selectedSuperClass: "",
-      definitionsInSuperClass: [],
-      selectedElementDetails: [],
-      emptySuperClassList: true,
-      selectedSuperClassRefFile: ""
-    };
-  },
-  methods: {
-    superClassToRemove(index, superClassName) {
-      this.selectedIndex = index;
-      this.selectedSuperClass = superClassName;
-
-      for (let i in this.$store.state.currentFile.file[
-        this.$store.state.isSelected
-      ]["allOf"]) {
-        if (
-          this.$store.state.currentFile.file[this.$store.state.isSelected][
-            "allOf"
-          ][i]["$ref"]
-        ) {
-          if (
-            this.$store.state.currentFile.file[this.$store.state.isSelected][
-              "allOf"
-            ][i]["$ref"].includes(this.selectedSuperClass)
-          ) {
-            this.selectedSuperClassRefFile = miscUtilities.getRefFileContext(
-              this.$store.state.currentFile.file[this.$store.state.isSelected][
-                "allOf"
-              ][i]["$ref"]
-            );
-          }
-        }
-      }
-    },
-    removeSuperClass() {
-      this.$store.commit("removeSuperClass", this.selectedSuperClass);
-      this.selectedSuperClass = "";
-    },
-    goPreviousView() {
-      this.$store.state.activeEditingView = "EditDefinitionFormDisabled";
-    }
-  },
-  computed: {
-    superClassList() {
-      let superClassList = [];
-      if (this.$store.state.isSelected) {
-        for (let i in this.$store.state.currentFile.file[
-          this.$store.state.isSelected
-        ]["allOf"]) {
-          if (
-            this.$store.state.currentFile.file[this.$store.state.isSelected][
-              "allOf"
-            ][i]["$ref"]
-          ) {
-            superClassList.push(
-              this.$store.state.currentFile.file[this.$store.state.isSelected][
-                "allOf"
-              ][i]["$ref"].slice(
-                this.$store.state.currentFile.file[
-                  this.$store.state.isSelected
-                ]["allOf"][i]["$ref"].lastIndexOf("/") + 1
-              )
-            );
-          }
-        }
-
-        if (superClassList.length == 0) {
-          this.emptySuperClassList = true;
-        } else {
-          this.emptySuperClassList = false;
-        }
-
-        return superClassList.sort();
-      }
-    },
-    defnDetails() {
-      let temp_ret_obj = null;
-
-      let defnName = this.$store.state.isSelected;
-      let superClass = this.selectedSuperClass;
-      let defnType = "";
-      let defnDescrip = "Documentation not available";
-      let defnEnum = "";
-      let temp_superClassList = [];
-      let temp_superClassListStr = "";
-      let defnObjChildren = "";
-      let typeOfDefn = null;
-
-      let defnFile = this.$store.state.loadedFiles[
-        this.selectedSuperClassRefFile
-      ]["file"];
-
-      if (defnFile[superClass]["allOf"]) {
-        if (miscUtilities.isTaxonomyElement(defnFile, superClass)) {
-          typeOfDefn = "TaxonomyElement";
-        } else {
-          typeOfDefn = "ObjWithInherit";
-        }
-        for (let i in defnFile[superClass]["allOf"]) {
-          if (defnFile[superClass]["allOf"][i]["$ref"]) {
-            temp_superClassList.push(
-              defnFile[superClass]["allOf"][i]["$ref"].slice(
-                defnFile[superClass]["allOf"][i]["$ref"].lastIndexOf("/") + 1
-              )
-            );
-          } else {
-            if (defnFile[superClass]["allOf"][i]["description"]) {
-              defnDescrip = defnFile[superClass]["allOf"][i]["description"];
-            }
-
-            if (defnFile[superClass]["allOf"][i]["type"]) {
-              defnType = defnFile[superClass]["allOf"][i]["type"];
-            }
-
-            if (defnFile[superClass]["allOf"][i]["enum"]) {
-              defnEnum = defnFile[superClass]["allOf"][i]["enum"];
-            }
-
-            if (typeOfDefn == "ObjWithInherit") {
-              if (defnFile[superClass]["allOf"][i]["properties"]) {
-                if (defnFile[superClass]["properties"]) {
-                  defnObjChildren = Object.keys(
-                    defnFile[superClass]["properties"]
-                  );
-                }
-              }
-            }
-          }
-        }
-      } else if (defnFile[superClass]["properties"]) {
-        typeOfDefn = "Obj";
-        if (defnFile[superClass]["type"]) {
-          defnType = defnFile[superClass]["type"];
-        }
-
-        if (defnFile[superClass]["properties"]["description"]) {
-          defnDescrip = defnFile[superClass]["properties"]["description"];
-        }
-
-        defnObjChildren = Object.keys(defnFile[superClass]["properties"]);
-      } else {
-        typeOfDefn = "Elem";
-        if (defnFile[superClass]["description"]) {
-          defnDescrip = defnFile[superClass]["description"];
-        }
-
-        if (defnFile[superClass]["type"]) {
-          defnType = defnFile[superClass]["type"];
-        }
-
-        if (defnFile[superClass]["enum"]) {
-          defnEnum = defnFile[superClass]["enum"];
-        }
-      }
-
-      if (temp_superClassList.length == 0) {
-        temp_superClassListStr = "None";
-      } else {
-        temp_superClassListStr = temp_superClassList.join(", ");
-      }
-
-      if (!defnEnum) {
-        defnEnum = "None";
-      } else {
-        defnEnum = defnEnum.join(", ");
-      }
-
-      if (defnObjChildren) {
-        defnObjChildren = defnObjChildren.join(", ");
-      } else {
-        defnObjChildren = "None";
-      }
-
-      if (typeOfDefn == "ObjWithInherit") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: superClass },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "TaxonomyElement") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: superClass },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr }
-        ];
-      } else if (typeOfDefn == "Obj") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: superClass },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "Elem") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: superClass },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Enumeration", Values: defnEnum },
-          { Attributes: "Documentation", Values: defnDescrip }
-        ];
-      }
-
-      let arr = temp_ret_obj;
-
-      return arr;
-    }
-  }
-};
-</script>
-
-<style>
-.superclass-list {
-  height: 250px;
-  overflow-y: auto;
-  background-color: white;
-  border: 1px solid black;
-  margin-bottom: 4px;
-}
-
-.superclass-in-list {
-  list-style: none;
-  border-bottom: 1px solid black;
-}
-
-.selected-superclass {
-  background-color: #89cff0;
-}
-
-.submit-button-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-superclass-container {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-</style>
+<!-- 
+Component for removing inheritance from objects
+-->
+
+<template>
+  <div class="editor-function-container">
+    <div class="editor-function-body-container">
+      <p>Choose superclass to remove from object:</p>
+      <div class="superclass-list">
+        <li
+          v-for="(superClassName, index) in superClassList"
+          class="superclass-in-list"
+          @click="superClassToRemove(index, superClassName)"
+          :class="{ 'selected-superclass': index == selectedIndex }"
+        >
+          {{ superClassName }}
+        </li>
+      </div>
+      <br />
+      <b-table
+        :items="defnDetails"
+        id="add-member-detail-table"
+        ref="add-member-detail-table"
+        v-if="selectedSuperClass"
+      ></b-table>
+    </div>
+    <div class="editor-function-footer-container">
+      <b-button
+        variant="primary"
+        @click="removeSuperClass"
+        :disabled="emptySuperClassList"
+        size="sm"
+      >
+        Remove
+      </b-button>
+      <b-button @click="goPreviousView" size="sm">Back</b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as miscUtilities from "../../utils/miscUtilities";
+
+export default {
+  data() {
+    return {
+      searchTerm: "",
+      selectedIndex: null,
+      selectedSuperClass: "",
+      definitionsInSuperClass: [],
+      selectedElementDetails: [],
+      emptySuperClassList: true,
+      selectedSuperClassRefFile: ""
+    };
+  },
+  methods: {
+    superClassToRemove(index, superClassName) {
+      this.selectedIndex = index;
+      this.selectedSuperClass = superClassName;
+
+      for (let i in this.$store.state.currentFile.file[
+        this.$store.state.isSelected
+      ]["allOf"]) {
+        if (
+          this.$store.state.currentFile.file[this.$store.state.isSelected][
+            "allOf"
+          ][i]["$ref"]
+        ) {
+          if (
+            this.$store.state.currentFile.file[this.$store.state.isSelected][
+              "allOf"
+            ][i]["$ref"].includes(this.selectedSuperClass)
+          ) {
+            this.selectedSuperClassRefFile = this.$store.state.currentFile.fileName
+            // this.selectedSuperClassRefFile = miscUtilities.getRefFileContext(
+            //   this.$store.state.currentFile.file[this.$store.state.isSelected][
+            //     "allOf"
+            //   ][i]["$ref"]
+            // );
+          }
+        }
+      }
+    },
+    removeSuperClass() {
+      this.$store.commit("removeSuperClass", this.selectedSuperClass);
+      this.selectedSuperClass = "";
+    },
+    goPreviousView() {
+      this.$store.state.activeEditingView = "EditDefinitionFormDisabled";
+    }
+  },
+  computed: {
+    superClassList() {
+      let superClassList = [];
+      if (this.$store.state.isSelected) {
+        for (let i in this.$store.state.currentFile.file[
+          this.$store.state.isSelected
+        ]["allOf"]) {
+          if (
+            this.$store.state.currentFile.file[this.$store.state.isSelected][
+              "allOf"
+            ][i]["$ref"]
+          ) {
+            superClassList.push(
+              this.$store.state.currentFile.file[this.$store.state.isSelected][
+                "allOf"
+              ][i]["$ref"].slice(
+                this.$store.state.currentFile.file[
+                  this.$store.state.isSelected
+                ]["allOf"][i]["$ref"].lastIndexOf("/") + 1
+              )
+            );
+          }
+        }
+
+        if (superClassList.length == 0) {
+          this.emptySuperClassList = true;
+        } else {
+          this.emptySuperClassList = false;
+        }
+
+        return superClassList.sort();
+      }
+    },
+    defnDetails() {
+      let temp_ret_obj = null;
+
+      let defnName = this.$store.state.isSelected;
+      let superClass = this.selectedSuperClass;
+      let defnType = "";
+      let defnDescrip = "Documentation not available";
+      let defnEnum = "";
+      let temp_superClassList = [];
+      let temp_superClassListStr = "";
+      let defnObjChildren = "";
+      let typeOfDefn = null;
+
+      let defnFile = this.$store.state.loadedFiles[
+        this.selectedSuperClassRefFile
+      ]["file"];
+
+      if (defnFile[superClass]["allOf"]) {
+        if (miscUtilities.isTaxonomyElement(defnFile, superClass)) {
+          typeOfDefn = "TaxonomyElement";
+        } else {
+          typeOfDefn = "ObjWithInherit";
+        }
+        for (let i in defnFile[superClass]["allOf"]) {
+          if (defnFile[superClass]["allOf"][i]["$ref"]) {
+            temp_superClassList.push(
+              defnFile[superClass]["allOf"][i]["$ref"].slice(
+                defnFile[superClass]["allOf"][i]["$ref"].lastIndexOf("/") + 1
+              )
+            );
+          } else {
+            if (defnFile[superClass]["allOf"][i]["description"]) {
+              defnDescrip = defnFile[superClass]["allOf"][i]["description"];
+            }
+
+            if (defnFile[superClass]["allOf"][i]["type"]) {
+              defnType = defnFile[superClass]["allOf"][i]["type"];
+            }
+
+            if (defnFile[superClass]["allOf"][i]["enum"]) {
+              defnEnum = defnFile[superClass]["allOf"][i]["enum"];
+            }
+
+            if (typeOfDefn == "ObjWithInherit") {
+              if (defnFile[superClass]["allOf"][i]["properties"]) {
+                if (defnFile[superClass]["properties"]) {
+                  defnObjChildren = Object.keys(
+                    defnFile[superClass]["properties"]
+                  );
+                }
+              }
+            }
+          }
+        }
+      } else if (defnFile[superClass]["properties"]) {
+        typeOfDefn = "Obj";
+        if (defnFile[superClass]["type"]) {
+          defnType = defnFile[superClass]["type"];
+        }
+
+        if (defnFile[superClass]["properties"]["description"]) {
+          defnDescrip = defnFile[superClass]["properties"]["description"];
+        }
+
+        defnObjChildren = Object.keys(defnFile[superClass]["properties"]);
+      } else {
+        typeOfDefn = "Elem";
+        if (defnFile[superClass]["description"]) {
+          defnDescrip = defnFile[superClass]["description"];
+        }
+
+        if (defnFile[superClass]["type"]) {
+          defnType = defnFile[superClass]["type"];
+        }
+
+        if (defnFile[superClass]["enum"]) {
+          defnEnum = defnFile[superClass]["enum"];
+        }
+      }
+
+      if (temp_superClassList.length == 0) {
+        temp_superClassListStr = "None";
+      } else {
+        temp_superClassListStr = temp_superClassList.join(", ");
+      }
+
+      if (!defnEnum) {
+        defnEnum = "None";
+      } else {
+        defnEnum = defnEnum.join(", ");
+      }
+
+      if (defnObjChildren) {
+        defnObjChildren = defnObjChildren.join(", ");
+      } else {
+        defnObjChildren = "None";
+      }
+
+      if (typeOfDefn == "ObjWithInherit") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: superClass },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "TaxonomyElement") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: superClass },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr }
+        ];
+      } else if (typeOfDefn == "Obj") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: superClass },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "Elem") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: superClass },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Enumeration", Values: defnEnum },
+          { Attributes: "Documentation", Values: defnDescrip }
+        ];
+      }
+
+      let arr = temp_ret_obj;
+
+      return arr;
+    }
+  }
+};
+</script>
+
+<style>
+.superclass-list {
+  height: 250px;
+  overflow-y: auto;
+  background-color: white;
+  border: 1px solid black;
+  margin-bottom: 4px;
+}
+
+.superclass-in-list {
+  list-style: none;
+  border-bottom: 1px solid black;
+}
+
+.selected-superclass {
+  background-color: #89cff0;
+}
+
+.submit-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.remove-superclass-container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>
diff --git a/src/components/UploadOBTree.vue b/src/components/UploadOBTree.vue
index 00fdcb7..eeb0070 100644
--- a/src/components/UploadOBTree.vue
+++ b/src/components/UploadOBTree.vue
@@ -1,759 +1,759 @@
-<template>
-  <div class="ob-tree-container">
-    <div
-      class="node-wrapper"
-      @click="toggleSelect"
-      :style="isSelected ? 'background-color: #89CFF0;' : ''"
-    >
-      <div class="element-div" :style="indent">
-        <span @click="toggleExpandDefn">
-          <span v-if="isObj">
-            <v-icon
-              v-if="expandDefn"
-              name="minus-square"
-              class="icon-expandable clickable"
-            />
-            <v-icon
-              v-if="!expandDefn"
-              name="plus-square"
-              class="icon-expandable clickable"
-              style="cursor: pointer"
-            />
-          </span>
-
-          <span v-if="isTaxonomyElement">
-            <v-icon
-              name="circle"
-              class="taxonomy-element-icon-expandable clickable"
-              style="cursor: pointer"
-            />
-          </span>
-
-          <span v-if="isArray && arrayItemType == 'Object'">
-            <v-icon
-              v-if="expandDefn"
-              name="minus-square"
-              class="icon-expandable clickable"
-            />
-            <v-icon
-              v-if="!expandDefn"
-              name="plus-square"
-              class="icon-expandable clickable"
-              style="cursor: pointer"
-            />
-          </span>
-
-          <span v-if="isArray && arrayItemType == 'Taxonomy Element'">
-            <v-icon
-              name="circle"
-              class="taxonomy-element-icon-expandable clickable"
-              style="cursor: pointer"
-            />
-          </span>
-        </span>
-
-        <span
-          :class="{
-            subClassSignifier: subClassedNode,
-            importedNodeSignifier: importedNode
-          }"
-        >
-          <span v-if="isArray">
-            {{ shortenName + " " }}[ {{ arrayItemNameFromRef }} ]
-          </span>
-          <span v-else>
-            {{ shortenName }}
-          </span>
-        </span>
-        <span class="primary-view-icon" v-if="(isObj || isArray) && $store.state.viewerMode == 'Edit Mode' && isTopLevel && isSelected">
-            <span @click=addViewObj(name)>
-              <v-icon
-                name="plus"
-                style="cursor: pointer"
-                v-if="!viewObjFinal"
-              />
-            </span>
-            <v-icon
-              name="regular/eye"
-              style="cursor: pointer"
-              v-if="viewObjFinal"
-            />             
-        </span>
-        <span class="primary-view-icon" v-if="$store.state.viewerMode == 'View Mode' && viewObjFinal && isTopLevel && isSelected" @click=removeViewObj(name)>
-            <v-icon
-              name="times"
-              style="cursor: pointer; color:red"
-            />        
-        </span>
-      </div>
-    </div>
-
-    <span v-if="children">
-      <span v-for="(arr, index) in sortedObjects">
-        <!-- object -->
-        <UploadOBTree
-          v-if="expandDefn && arr[3] == 'Object'"
-          :name="arr[0]"
-          :children="arr[1].properties"
-          :depth="depth + 1"
-          :nodeDescription="arr[1].description"
-          :isObj="true"
-          :parent="name"
-          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
-          type="object"
-          :ref="defnRef(arr[0], file.fileName)"
-          :nameRef="defnRef(arr[0], file.fileName)"
-          :file="file"
-          :isTaxonomyElement="false"
-          :subClassedNode="arr[2]"
-          :referenceFile="arr[4]"
-          :isLocal="arr[5]"
-          :viewObj="false"
-          :isTopLevel="false"
-        ></UploadOBTree>
-
-        <!-- array -->
-
-        <UploadOBTree
-          v-else-if="expandDefn && arr[2] == 'Array'"
-          :name="arr[0]"
-          :children="getArrayItemAsChildren(arr[3], arr[5], arr[0])"
-          :depth="depth + 1"
-          :expandAllObjects="expandAllObjects"
-          :nodeDescription="arr[1].description"
-          :isObj="false"
-          parent="root"
-          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
-          type="array"
-          :ref="defnRef(arr[0], file.fileName)"
-          :nameRef="defnRef(arr[0], file.fileName)"
-          :file="file"
-          :isArray="true"
-          :arrayItemRef="arr[5]"
-          :arrayItemType="getArrItemType(arr[5])"
-          :referenceFile="arr[3]"
-          :isLocal="arr[4]"
-          :viewObj="false"
-          :isTopLevel="false"
-        ></UploadOBTree>
-
-        <!-- taxonomy element -->
-        <UploadOBTree
-          v-else-if="expandDefn && arr[3] == 'TaxonomyElement'"
-          :isObj="false"
-          :name="arr[0]"
-          :children="subClassChildren(file.file, arr[4], arr[1], arr[5])"
-          :depth="depth + 1"
-          :nodeDescription="getNodeDescription(arr[1])"
-          :parent="name"
-          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
-          type="object"
-          :ref="defnRef(arr[0], file.fileName)"
-          :nameRef="defnRef(arr[0], file.fileName)"
-          :file="file"
-          :isTaxonomyElement="true"
-          :subClassedNode="arr[2]"
-          :referenceFile="arr[5]"
-          :isLocal="arr[6]"
-          :isArrayItem="isArray"
-          :viewObj="false"
-          :isTopLevel="false"
-        >
-        </UploadOBTree>
-
-        <!-- allOf Obj -->
-        <UploadOBTree
-          v-else-if="expandDefn && arr[3] == 'ObjWithInherit'"
-          :name="arr[0]"
-          :children="subClassChildren(file.file, arr[4], arr[1], arr[5])"
-          :depth="depth + 1"
-          :nodeDescription="getNodeDescription(arr[1])"
-          :isObj="true"
-          :parent="name"
-          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
-          type="object"
-          :ref="defnRef(arr[0], file.fileName)"
-          :nameRef="defnRef(arr[0], file.fileName)"
-          :file="file"
-          :isTaxonomyElement="false"
-          :subClassedNode="arr[2]"
-          :referenceFile="arr[5]"
-          :isLocal="arr[6]"
-          :isArrayItem="isArray"
-          :viewObj="false"
-          :isTopLevel="false"
-        ></UploadOBTree>
-
-        <!-- for primitives -->
-        <UploadOBTree
-          v-else-if="
-            expandDefn &&
-              !(
-                arr[3] == 'ObjWithInherit' ||
-                arr[3] == 'TaxonomyElement' ||
-                arr[3] == 'Object'
-              )
-          "
-          :isObj="false"
-          :name="arr[0]"
-          :depth="depth + 1"
-          :nodeDescription="getNodeDescription(arr[1])"
-          :parent="name"
-          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
-          type="element"
-          :ref="defnRef(arr[0], file.fileName)"
-          :nameRef="defnRef(arr[0], file.fileName)"
-          :file="file"
-          :isTaxonomyElement="false"
-          :subClassedNode="arr[2]"
-          :referenceFile="arr[3]"
-          :isLocal="arr[4]"
-          :isArrayItem="isArray"
-          :viewObj="false"
-          :isTopLevel="false"
-        >
-        </UploadOBTree>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script>
-import * as miscUtilities from "../utils/miscUtilities";
-
-export default {
-  props: [
-    "name",
-    "children",
-    "depth",
-    "expandAllObjects",
-    "parent_name",
-    "nodeDescription",
-    "isObj",
-    "parent",
-    "parent_trail",
-    "type",
-    "nameRef",
-    "subClassedNode",
-    "importedNode",
-    "file",
-    "isTaxonomyElement",
-    "referenceFile",
-    "isLocal",
-    "isArray",
-    "arrayItemRef",
-    "arrayItemType",
-    "viewObj",
-    "isTopLevel",
-    "topLevelExpand"
-  ],
-  name: "UploadOBTree",
-  data() {
-    return {
-      expandObject: true,
-      expandArray: true,
-      expandElement: false,
-      isObject: Boolean(this.children),
-      parents: this.parent,
-      sortedObjLen: null,
-      expandDefn: false,
-      viewObjFinal: false
-    };
-  },
-  created() {
-    if (this.topLevelExpand) {
-      this.expandDefn = true;
-    }
-    if (this.isTaxonomyElement || (this.isArray && !this.topLevelExpand)) {
-      this.expandDefn = false;
-    }
-    // needed because we cannot mutate prop viewObj
-    if (this.viewObj) {
-      this.viewObjFinal = true
-    }
-
-  },
-  computed: {
-    arrayItemNameFromRef() {
-      return this.arrayItemRef.slice(this.arrayItemRef.lastIndexOf("/") + 1);
-    },
-    shortenName() {
-      if (this.name.length > 54) {
-        return this.name.slice(0, 54).concat("...");
-      } else {
-        return this.name;
-      }
-    },
-    indent() {
-      return { "padding-left": `${this.depth * 50}px` };
-    },
-    modalNodeID() {
-      return "modal-add-child-" + this.$store.state.nodeCount;
-    },
-    isSelected() {
-      return this.$store.state.nameRef == this.nameRef;
-    },
-    toolTipID() {
-      return "tooltip-id-" + this.name + "-" + this.parent_name;
-    },
-    sortedObjects() {
-      let obj_lst = [];
-      let obj_lst_SC = [];
-      let el_lst = [];
-      let el_lst_SC = [];
-      let superClass_lst = [];
-      let subClass_obj = {};
-      let immutable_OB = [
-        "Value",
-        "Unit",
-        "Decimals",
-        "Precision",
-        "TaxonomyElement"
-      ];
-      let nodeType = "";
-      let immutable_lst = [];
-      let immutable_lst_SC = [];
-      let fromSuperClass = false;
-      let defnRef = "";
-      let defnRefTrail = "";
-      let isLocal = true;
-      let refFileContext = "LOCAL";
-      let isTaxonomyElement = false;
-
-      let arr_lst = [];
-      let arr_item = "";
-
-      let fileReference = this.file;
-
-      if (this.children) {
-        Object.keys(this.children).forEach(key => {
-          isLocal = true;
-          fileReference = this.referenceFile;
-          refFileContext = "LOCAL";
-          isTaxonomyElement = false;
-
-          if (!this.children[key]["referenceFile"]) {
-            defnRef = miscUtilities.getDefnRef(
-              fileReference,
-              key,
-              this.name,
-              this.$store.state.loadedFiles,
-              this.children
-            );
-            refFileContext = miscUtilities.getRefFileContext(defnRef);
-            if (refFileContext != "LOCAL") {
-              fileReference = this.$store.state.loadedFiles[refFileContext][
-                "file"
-              ];
-              isLocal = false;
-            }
-          } else {
-            fileReference = this.children[key]["referenceFile"];
-            refFileContext = miscUtilities.getRefFileContext(
-              this.children[key]["$ref"]
-            );
-
-            if (!fileReference[key] || refFileContext != "LOCAL") {
-              fileReference = this.$store.state.loadedFiles[refFileContext][
-                "file"
-              ];
-              isLocal = false;
-            }
-
-          }
-
-          fromSuperClass = false;
-          superClass_lst = [];
-          if ("fromSuperClass" in this.children[key]) {
-            fromSuperClass = true;
-          }
-
-          if (fileReference[key]["type"] == "object") {
-            nodeType = "Object";
-
-            if (fromSuperClass) {
-              if (isLocal) {
-                obj_lst_SC.push([
-                  key,
-                  fileReference[key],
-                  fromSuperClass,
-                  nodeType,
-                  fileReference,
-                  isLocal
-                ]);
-              } else {
-                obj_lst_SC.push([
-                  key,
-                  fileReference[key],
-                  fromSuperClass,
-                  nodeType,
-                  fileReference,
-                  isLocal
-                ]);
-              }
-            } else {
-              if (isLocal) {
-                obj_lst.push([
-                  key,
-                  fileReference[key],
-                  fromSuperClass,
-                  nodeType,
-                  fileReference,
-                  isLocal
-                ]);
-              } else {
-                obj_lst.push([
-                  key,
-                  fileReference[key],
-                  fromSuperClass,
-                  nodeType,
-                  fileReference,
-                  isLocal
-                ]);
-              }
-            }
-          } else if (fileReference[key]["allOf"]) {
-            for (let i in fileReference[key]["allOf"]) {
-              if (fileReference[key]["allOf"][i]["$ref"]) {
-                superClass_lst.push(fileReference[key]["allOf"][i]["$ref"]);
-              } else {
-                subClass_obj = fileReference[key]["allOf"][i];
-              }
-            }
-
-            nodeType = false;
-
-            for (let i in superClass_lst) {
-              if (
-                superClass_lst[i].includes(
-                  "#/components/schemas/TaxonomyElement"
-                )
-              ) {
-                isTaxonomyElement = true;
-              }
-            }
-
-            if (isTaxonomyElement) {
-              nodeType = "TaxonomyElement";
-              if (fromSuperClass) {
-                el_lst_SC.push([
-                  key,
-                  subClass_obj,
-                  fromSuperClass,
-                  nodeType,
-                  superClass_lst,
-                  fileReference,
-                  isLocal
-                ]);
-              } else {
-                el_lst.push([
-                  key,
-                  subClass_obj,
-                  fromSuperClass,
-                  nodeType,
-                  superClass_lst,
-                  fileReference,
-                  isLocal
-                ]);
-              }
-            } else {
-              nodeType = "ObjWithInherit";
-              if (fromSuperClass) {
-                obj_lst_SC.push([
-                  key,
-                  subClass_obj,
-                  fromSuperClass,
-                  nodeType,
-                  superClass_lst,
-                  fileReference,
-                  isLocal
-                ]);
-              } else {
-                obj_lst.push([
-                  key,
-                  subClass_obj,
-                  fromSuperClass,
-                  nodeType,
-                  superClass_lst,
-                  fileReference,
-                  isLocal
-                ]);
-              }
-            }
-          } else if (fileReference[key]["type"] == "array") {
-            nodeType = "Array";
-            arr_item = fileReference[key]["items"]["$ref"];
-            arr_lst.push([
-              key,
-              fileReference[key],
-              nodeType,
-              fileReference,
-              isLocal,
-              arr_item
-            ]);
-          } else {
-            immutable_lst.push([
-              key,
-              fileReference[key],
-              fromSuperClass,
-              fileReference,
-              isLocal
-            ]);
-          }
-        });
-
-        obj_lst.sort();
-        obj_lst_SC.sort();
-
-        el_lst.sort();
-        el_lst_SC.sort();
-
-        immutable_lst.sort();
-
-        let retArr = el_lst
-          .concat(el_lst_SC)
-          .concat(obj_lst)
-          .concat(obj_lst_SC)
-          .concat(arr_lst)
-          .concat(immutable_lst);
-        this.sortedObjLen = retArr.length;
-        
-        return retArr;
-      }
-    }
-  },
-  methods: {
-    toggleExpandDefn() {
-      this.expandDefn = !this.expandDefn;
-    },
-    getArrayItemAsChildren(file, arrayItemRef, key) {
-      return miscUtilities.getArrayItemAsChildren(
-        file,
-        arrayItemRef,
-        key,
-        this.$store.state.loadedFiles
-      );
-    },
-    getArrItemType(arrItemRef) {
-      return miscUtilities.getArrayItemType(
-        arrItemRef,
-        this.$store.state.loadedFiles,
-        this.$store.state.currentFile
-      );
-    },
-    toggleSelect() {
-      this.$store.commit("toggleSelectDefinitionNode");
-      this.$store.commit("showDetailedView");
-
-      this.$store.commit({
-        type: "selectNode",
-        nodeName: this.name,
-        nodeParent: this.parent,
-        nodeParentTrail: this.parent_trail,
-        nodeType: this.type,
-        nameRef: this.nameRef,
-        nodeDescription: this.nodeDescription,
-        isSubClassedNode: this.subClassedNode,
-        isTaxonomyElement: this.isTaxonomyElement,
-        selectedFileName: this.file.fileName,
-        referenceFile: this.referenceFile,
-        isLocal: this.isLocal
-      });
-    },
-    objectRef(nodeName, fileName) {
-      return fileName + "-" + nodeName;
-    },
-
-    isNodeObject(child_name) {
-      if (this.file.file[child_name]) {
-        if (
-          (this.file.file[child_name]["type"] == "object" ||
-            this.file.file[child_name]["allOf"]) &&
-          !miscUtilities.isTaxonomyElement(file.file, child_name)
-        ) {
-          return true;
-        } else {
-          return false;
-        }
-      }
-    },
-
-    //returns children object from referenced (no unreferenced objects will be found, because this is below top level)
-    returnNodeChildren(child_name, child_obj) {
-      let temp_child_obj = {};
-
-      let superClass_lst = [];
-      if (this.file.file[child_name]["properties"]) {
-        temp_child_obj = JSON.parse(
-          JSON.stringify(this.file.file[child_name]["properties"])
-        );
-        if (child_obj["fromSuperClass"]) {
-          Object.keys(temp_child_obj).forEach(key => {
-            temp_child_obj[key].fromSuperClass = true;
-          });
-        }
-
-        return temp_child_obj;
-      } else {
-        // return children merging superClassed objects / elements with obj's children
-        // child_name is the name of the object, just need to return merge of children + superclass children
-        for (let i in this.file.file[child_name]["allOf"]) {
-          if (this.file.file[child_name]["allOf"][i]["properties"]) {
-            temp_child_obj = JSON.parse(
-              JSON.stringify(
-                this.file.file[child_name]["allOf"][i]["properties"]
-              )
-            );
-            if (child_obj["fromSuperClass"]) {
-              Object.keys(temp_child_obj).forEach(key => {
-                temp_child_obj[key].fromSuperClass = true;
-              });
-            }
-          } else {
-            superClass_lst.push(this.file.file[child_name]["allOf"][i]["$ref"]);
-          }
-        }
-        return {
-          ...temp_child_obj,
-          ...miscUtilities.getSuperClassChildren(
-            this.file.file,
-            superClass_lst,
-            temp_child_obj
-          )
-        };
-      }
-    },
-    fromSuperClass(childNode) {
-      if (childNode["fromSuperClass"]) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    getNodeDescription(nodeObj) {
-      return nodeObj["description"];
-    },
-    subClassChildren(file, superClassRef, subClassObj, referenceFile) {
-      if (referenceFile) {
-        return miscUtilities.getSuperClassChildren(
-          referenceFile,
-          superClassRef,
-          subClassObj,
-          referenceFile,
-          null,
-          this.$store.state.loadedFiles
-        );
-      } else {
-        return miscUtilities.getSuperClassChildren(
-          file,
-          superClassRef,
-          subClassObj,
-          referenceFile,
-          null,
-          this.$store.state.loadedFiles
-        );
-      }
-    },
-    defnRef(nodeName, fileName) {
-      let defnRef = miscUtilities.generateUniqueRef(
-        nodeName,
-        fileName,
-        this.name
-      );
-      return defnRef;
-    },
-    defnRefParentTrail(nodeName, parent_trail) {
-      return nodeName + "-" + parent_trail;
-    },
-    addViewObj(el) {
-      this.viewObjFinal = true
-      this.$store.commit("addViewObj", {
-        'el': el,
-        'mode': 'create_cookie'
-      });
-    },
-    removeViewObj(el) {
-      this.viewObjFinal = false
-      this.$store.commit("removeViewObj", {
-        'el': el,
-        'mode': 'create_cookie'
-      });
-      this.$store.commit("reRenderList")
-    }
-  },
-  watch: {
-    expandAllObjects() {
-      if (this.expandAllObjects == true) {
-        this.expandDefn = true;
-      } else {
-        this.expandDefn = false;
-      }
-    }
-  }
-};
-</script>
-
-<style>
-.checkbox-s {
-  margin-left: 8px;
-}
-
-.icon-expandable {
-  margin-bottom: 3px;
-}
-
-.taxonomy-element-icon-expandable {
-  margin-bottom: 3px;
-  padding: 6px;
-}
-
-.options {
-  display: inline-flex;
-  justify-content: space-between;
-  width: 46px;
-  padding-left: 9px;
-  bottom: -6px;
-  visibility: hidden;
-}
-
-.element-div:hover .options {
-  visibility: visible;
-}
-
-.element-div {
-  margin-bottom: -8px;
-  margin-left: 15px;
-}
-
-.element-div:focus {
-  color: red;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.node-wrapper {
-  border-bottom: #d3d3d3 solid 1px;
-  height: 25px;
-}
-
-.subClassSignifier {
-  font-style: italic;
-}
-
-.importedNodeSignifier {
-  font-style: italic;
-  font-weight: bold;
-}
-
-.primary-view-icon {
-  display:block;
-  padding-right: 125px;
-  float: right;
-}
-
-/* .node-wrapper:hover .primary-view-icon { 
-  display: block;
-} */
-</style>
+<template>
+  <div class="ob-tree-container">
+    <div
+      class="node-wrapper"
+      @click="toggleSelect"
+      :style="isSelected ? 'background-color: #89CFF0;' : ''"
+    >
+      <div class="element-div" :style="indent">
+        <span @click="toggleExpandDefn">
+          <span v-if="isObj">
+            <v-icon
+              v-if="expandDefn"
+              name="minus-square"
+              class="icon-expandable clickable"
+            />
+            <v-icon
+              v-if="!expandDefn"
+              name="plus-square"
+              class="icon-expandable clickable"
+              style="cursor: pointer"
+            />
+          </span>
+
+          <span v-if="isTaxonomyElement">
+            <v-icon
+              name="circle"
+              class="taxonomy-element-icon-expandable clickable"
+              style="cursor: pointer"
+            />
+          </span>
+
+          <span v-if="isArray && arrayItemType == 'Object'">
+            <v-icon
+              v-if="expandDefn"
+              name="minus-square"
+              class="icon-expandable clickable"
+            />
+            <v-icon
+              v-if="!expandDefn"
+              name="plus-square"
+              class="icon-expandable clickable"
+              style="cursor: pointer"
+            />
+          </span>
+
+          <span v-if="isArray && arrayItemType == 'Taxonomy Element'">
+            <v-icon
+              name="circle"
+              class="taxonomy-element-icon-expandable clickable"
+              style="cursor: pointer"
+            />
+          </span>
+        </span>
+
+        <span
+          :class="{
+            subClassSignifier: subClassedNode,
+            importedNodeSignifier: importedNode
+          }"
+        >
+          <span v-if="isArray">
+            {{ shortenName + " " }}[ {{ arrayItemNameFromRef }} ]
+          </span>
+          <span v-else>
+            {{ shortenName }}
+          </span>
+        </span>
+        <span class="primary-view-icon" v-if="(isObj || isArray) && $store.state.viewerMode == 'Edit Mode' && isTopLevel && isSelected">
+            <span @click=addViewObj(name)>
+              <v-icon
+                name="plus"
+                style="cursor: pointer"
+                v-if="!viewObjFinal"
+              />
+            </span>
+            <v-icon
+              name="regular/eye"
+              style="cursor: pointer"
+              v-if="viewObjFinal"
+            />             
+        </span>
+        <span class="primary-view-icon" v-if="$store.state.viewerMode == 'View Mode' && viewObjFinal && isTopLevel && isSelected" @click=removeViewObj(name)>
+            <v-icon
+              name="times"
+              style="cursor: pointer; color:red"
+            />        
+        </span>
+      </div>
+    </div>
+
+    <span v-if="children">
+      <span v-for="(arr, index) in sortedObjects">
+        <!-- object -->
+        <UploadOBTree
+          v-if="expandDefn && arr[3] == 'Object'"
+          :name="arr[0]"
+          :children="arr[1].properties"
+          :depth="depth + 1"
+          :nodeDescription="arr[1].description"
+          :isObj="true"
+          :parent="name"
+          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
+          type="object"
+          :ref="defnRef(arr[0], file.fileName)"
+          :nameRef="defnRef(arr[0], file.fileName)"
+          :file="file"
+          :isTaxonomyElement="false"
+          :subClassedNode="arr[2]"
+          :referenceFile="arr[4]"
+          :isLocal="arr[5]"
+          :viewObj="false"
+          :isTopLevel="false"
+        ></UploadOBTree>
+
+        <!-- array -->
+
+        <UploadOBTree
+          v-else-if="expandDefn && arr[2] == 'Array'"
+          :name="arr[0]"
+          :children="getArrayItemAsChildren(arr[3], arr[5], arr[0])"
+          :depth="depth + 1"
+          :expandAllObjects="expandAllObjects"
+          :nodeDescription="arr[1].description"
+          :isObj="false"
+          parent="root"
+          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
+          type="array"
+          :ref="defnRef(arr[0], file.fileName)"
+          :nameRef="defnRef(arr[0], file.fileName)"
+          :file="file"
+          :isArray="true"
+          :arrayItemRef="arr[5]"
+          :arrayItemType="getArrItemType(arr[5])"
+          :referenceFile="arr[3]"
+          :isLocal="arr[4]"
+          :viewObj="false"
+          :isTopLevel="false"
+        ></UploadOBTree>
+
+        <!-- taxonomy element -->
+        <UploadOBTree
+          v-else-if="expandDefn && arr[3] == 'TaxonomyElement'"
+          :isObj="false"
+          :name="arr[0]"
+          :children="subClassChildren(file.file, arr[4], arr[1], arr[5])"
+          :depth="depth + 1"
+          :nodeDescription="getNodeDescription(arr[1])"
+          :parent="name"
+          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
+          type="object"
+          :ref="defnRef(arr[0], file.fileName)"
+          :nameRef="defnRef(arr[0], file.fileName)"
+          :file="file"
+          :isTaxonomyElement="true"
+          :subClassedNode="arr[2]"
+          :referenceFile="arr[5]"
+          :isLocal="arr[6]"
+          :isArrayItem="isArray"
+          :viewObj="false"
+          :isTopLevel="false"
+        >
+        </UploadOBTree>
+
+        <!-- allOf Obj -->
+        <UploadOBTree
+          v-else-if="expandDefn && arr[3] == 'ObjWithInherit'"
+          :name="arr[0]"
+          :children="subClassChildren(file.file, arr[4], arr[1], arr[5])"
+          :depth="depth + 1"
+          :nodeDescription="getNodeDescription(arr[1])"
+          :isObj="true"
+          :parent="name"
+          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
+          type="object"
+          :ref="defnRef(arr[0], file.fileName)"
+          :nameRef="defnRef(arr[0], file.fileName)"
+          :file="file"
+          :isTaxonomyElement="false"
+          :subClassedNode="arr[2]"
+          :referenceFile="arr[5]"
+          :isLocal="arr[6]"
+          :isArrayItem="isArray"
+          :viewObj="false"
+          :isTopLevel="false"
+        ></UploadOBTree>
+
+        <!-- for primitives -->
+        <UploadOBTree
+          v-else-if="
+            expandDefn &&
+              !(
+                arr[3] == 'ObjWithInherit' ||
+                arr[3] == 'TaxonomyElement' ||
+                arr[3] == 'Object'
+              )
+          "
+          :isObj="false"
+          :name="arr[0]"
+          :depth="depth + 1"
+          :nodeDescription="getNodeDescription(arr[1])"
+          :parent="name"
+          :parent_trail="defnRefParentTrail(arr[0], parent_trail)"
+          type="element"
+          :ref="defnRef(arr[0], file.fileName)"
+          :nameRef="defnRef(arr[0], file.fileName)"
+          :file="file"
+          :isTaxonomyElement="false"
+          :subClassedNode="arr[2]"
+          :referenceFile="arr[3]"
+          :isLocal="arr[4]"
+          :isArrayItem="isArray"
+          :viewObj="false"
+          :isTopLevel="false"
+        >
+        </UploadOBTree>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import * as miscUtilities from "../utils/miscUtilities";
+
+export default {
+  props: [
+    "name",
+    "children",
+    "depth",
+    "expandAllObjects",
+    "parent_name",
+    "nodeDescription",
+    "isObj",
+    "parent",
+    "parent_trail",
+    "type",
+    "nameRef",
+    "subClassedNode",
+    "importedNode",
+    "file",
+    "isTaxonomyElement",
+    "referenceFile",
+    "isLocal",
+    "isArray",
+    "arrayItemRef",
+    "arrayItemType",
+    "viewObj",
+    "isTopLevel",
+    "topLevelExpand"
+  ],
+  name: "UploadOBTree",
+  data() {
+    return {
+      expandObject: true,
+      expandArray: true,
+      expandElement: false,
+      isObject: Boolean(this.children),
+      parents: this.parent,
+      sortedObjLen: null,
+      expandDefn: false,
+      viewObjFinal: false
+    };
+  },
+  created() {
+    if (this.topLevelExpand) {
+      this.expandDefn = true;
+    }
+    if (this.isTaxonomyElement || (this.isArray && !this.topLevelExpand)) {
+      this.expandDefn = false;
+    }
+    // needed because we cannot mutate prop viewObj
+    if (this.viewObj) {
+      this.viewObjFinal = true
+    }
+
+  },
+  computed: {
+    arrayItemNameFromRef() {
+      return this.arrayItemRef.slice(this.arrayItemRef.lastIndexOf("/") + 1);
+    },
+    shortenName() {
+      if (this.name.length > 54) {
+        return this.name.slice(0, 54).concat("...");
+      } else {
+        return this.name;
+      }
+    },
+    indent() {
+      return { "padding-left": `${this.depth * 50}px` };
+    },
+    modalNodeID() {
+      return "modal-add-child-" + this.$store.state.nodeCount;
+    },
+    isSelected() {
+      return this.$store.state.nameRef == this.nameRef;
+    },
+    toolTipID() {
+      return "tooltip-id-" + this.name + "-" + this.parent_name;
+    },
+    sortedObjects() {
+      let obj_lst = [];
+      let obj_lst_SC = [];
+      let el_lst = [];
+      let el_lst_SC = [];
+      let superClass_lst = [];
+      let subClass_obj = {};
+      let immutable_OB = [
+        "Value",
+        "Unit",
+        "Decimals",
+        "Precision",
+        "TaxonomyElement"
+      ];
+      let nodeType = "";
+      let immutable_lst = [];
+      let immutable_lst_SC = [];
+      let fromSuperClass = false;
+      let defnRef = "";
+      let defnRefTrail = "";
+      let isLocal = true;
+      let refFileContext = "LOCAL";
+      let isTaxonomyElement = false;
+
+      let arr_lst = [];
+      let arr_item = "";
+
+      let fileReference = this.file;
+
+      if (this.children) {
+        Object.keys(this.children).forEach(key => {
+          isLocal = true;
+          fileReference = this.referenceFile;
+          refFileContext = "LOCAL";
+          isTaxonomyElement = false;
+
+          if (!this.children[key]["referenceFile"]) {
+            defnRef = miscUtilities.getDefnRef(
+              fileReference,
+              key,
+              this.name,
+              this.$store.state.loadedFiles,
+              this.children
+            );
+            refFileContext = miscUtilities.getRefFileContext(defnRef);
+            if (refFileContext != "LOCAL") {
+              fileReference = this.$store.state.loadedFiles[refFileContext][
+                "file"
+              ];
+              isLocal = false;
+            }
+          } else {
+            fileReference = this.children[key]["referenceFile"];
+            refFileContext = miscUtilities.getRefFileContext(
+              this.children[key]["$ref"]
+            );
+
+            if (!fileReference[key] || refFileContext != "LOCAL") {
+              fileReference = this.$store.state.loadedFiles[refFileContext][
+                "file"
+              ];
+              isLocal = false;
+            }
+
+          }
+
+          fromSuperClass = false;
+          superClass_lst = [];
+          if ("fromSuperClass" in this.children[key]) {
+            fromSuperClass = true;
+          }
+
+          if ("type" in fileReference[key] && fileReference[key]["type"] == "object") {
+            nodeType = "Object";
+
+            if (fromSuperClass) {
+              if (isLocal) {
+                obj_lst_SC.push([
+                  key,
+                  fileReference[key],
+                  fromSuperClass,
+                  nodeType,
+                  fileReference,
+                  isLocal
+                ]);
+              } else {
+                obj_lst_SC.push([
+                  key,
+                  fileReference[key],
+                  fromSuperClass,
+                  nodeType,
+                  fileReference,
+                  isLocal
+                ]);
+              }
+            } else {
+              if (isLocal) {
+                obj_lst.push([
+                  key,
+                  fileReference[key],
+                  fromSuperClass,
+                  nodeType,
+                  fileReference,
+                  isLocal
+                ]);
+              } else {
+                obj_lst.push([
+                  key,
+                  fileReference[key],
+                  fromSuperClass,
+                  nodeType,
+                  fileReference,
+                  isLocal
+                ]);
+              }
+            }
+          } else if ("allOf" in fileReference[key]) {
+            for (let i in fileReference[key]["allOf"]) {
+              if (fileReference[key]["allOf"][i]["$ref"]) {
+                superClass_lst.push(fileReference[key]["allOf"][i]["$ref"]);
+              } else {
+                subClass_obj = fileReference[key]["allOf"][i];
+              }
+            }
+
+            nodeType = false;
+
+            for (let i in superClass_lst) {
+              if (
+                superClass_lst[i].includes(
+                  "#/components/schemas/TaxonomyElement"
+                )
+              ) {
+                isTaxonomyElement = true;
+              }
+            }
+
+            if (isTaxonomyElement) {
+              nodeType = "TaxonomyElement";
+              if (fromSuperClass) {
+                el_lst_SC.push([
+                  key,
+                  subClass_obj,
+                  fromSuperClass,
+                  nodeType,
+                  superClass_lst,
+                  fileReference,
+                  isLocal
+                ]);
+              } else {
+                el_lst.push([
+                  key,
+                  subClass_obj,
+                  fromSuperClass,
+                  nodeType,
+                  superClass_lst,
+                  fileReference,
+                  isLocal
+                ]);
+              }
+            } else {
+              nodeType = "ObjWithInherit";
+              if (fromSuperClass) {
+                obj_lst_SC.push([
+                  key,
+                  subClass_obj,
+                  fromSuperClass,
+                  nodeType,
+                  superClass_lst,
+                  fileReference,
+                  isLocal
+                ]);
+              } else {
+                obj_lst.push([
+                  key,
+                  subClass_obj,
+                  fromSuperClass,
+                  nodeType,
+                  superClass_lst,
+                  fileReference,
+                  isLocal
+                ]);
+              }
+            }
+          } else if ("type" in fileReference[key] && fileReference[key]["type"] == "array") {
+            nodeType = "Array";
+            arr_item = fileReference[key]["items"]["$ref"];
+            arr_lst.push([
+              key,
+              fileReference[key],
+              nodeType,
+              fileReference,
+              isLocal,
+              arr_item
+            ]);
+          } else {
+            immutable_lst.push([
+              key,
+              fileReference[key],
+              fromSuperClass,
+              fileReference,
+              isLocal
+            ]);
+          }
+        });
+
+        obj_lst.sort();
+        obj_lst_SC.sort();
+
+        el_lst.sort();
+        el_lst_SC.sort();
+
+        immutable_lst.sort();
+
+        let retArr = el_lst
+          .concat(el_lst_SC)
+          .concat(obj_lst)
+          .concat(obj_lst_SC)
+          .concat(arr_lst)
+          .concat(immutable_lst);
+        this.sortedObjLen = retArr.length;
+        
+        return retArr;
+      }
+    }
+  },
+  methods: {
+    toggleExpandDefn() {
+      this.expandDefn = !this.expandDefn;
+    },
+    getArrayItemAsChildren(file, arrayItemRef, key) {
+      return miscUtilities.getArrayItemAsChildren(
+        file,
+        arrayItemRef,
+        key,
+        this.$store.state.loadedFiles
+      );
+    },
+    getArrItemType(arrItemRef) {
+      return miscUtilities.getArrayItemType(
+        arrItemRef,
+        this.$store.state.loadedFiles,
+        this.$store.state.currentFile
+      );
+    },
+    toggleSelect() {
+      this.$store.commit("toggleSelectDefinitionNode");
+      this.$store.commit("showDetailedView");
+
+      this.$store.commit({
+        type: "selectNode",
+        nodeName: this.name,
+        nodeParent: this.parent,
+        nodeParentTrail: this.parent_trail,
+        nodeType: this.type,
+        nameRef: this.nameRef,
+        nodeDescription: this.nodeDescription,
+        isSubClassedNode: this.subClassedNode,
+        isTaxonomyElement: this.isTaxonomyElement,
+        selectedFileName: this.file.fileName,
+        referenceFile: this.referenceFile,
+        isLocal: this.isLocal
+      });
+    },
+    objectRef(nodeName, fileName) {
+      return fileName + "-" + nodeName;
+    },
+
+    isNodeObject(child_name) {
+      if (this.file.file[child_name]) {
+        if (
+          (this.file.file[child_name]["type"] == "object" ||
+            this.file.file[child_name]["allOf"]) &&
+          !miscUtilities.isTaxonomyElement(file.file, child_name)
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+
+    //returns children object from referenced (no unreferenced objects will be found, because this is below top level)
+    returnNodeChildren(child_name, child_obj) {
+      let temp_child_obj = {};
+
+      let superClass_lst = [];
+      if (this.file.file[child_name]["properties"]) {
+        temp_child_obj = JSON.parse(
+          JSON.stringify(this.file.file[child_name]["properties"])
+        );
+        if (child_obj["fromSuperClass"]) {
+          Object.keys(temp_child_obj).forEach(key => {
+            temp_child_obj[key].fromSuperClass = true;
+          });
+        }
+
+        return temp_child_obj;
+      } else {
+        // return children merging superClassed objects / elements with obj's children
+        // child_name is the name of the object, just need to return merge of children + superclass children
+        for (let i in this.file.file[child_name]["allOf"]) {
+          if (this.file.file[child_name]["allOf"][i]["properties"]) {
+            temp_child_obj = JSON.parse(
+              JSON.stringify(
+                this.file.file[child_name]["allOf"][i]["properties"]
+              )
+            );
+            if (child_obj["fromSuperClass"]) {
+              Object.keys(temp_child_obj).forEach(key => {
+                temp_child_obj[key].fromSuperClass = true;
+              });
+            }
+          } else {
+            superClass_lst.push(this.file.file[child_name]["allOf"][i]["$ref"]);
+          }
+        }
+        return {
+          ...temp_child_obj,
+          ...miscUtilities.getSuperClassChildren(
+            this.file.file,
+            superClass_lst,
+            temp_child_obj
+          )
+        };
+      }
+    },
+    fromSuperClass(childNode) {
+      if (childNode["fromSuperClass"]) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    getNodeDescription(nodeObj) {
+      return nodeObj["description"];
+    },
+    subClassChildren(file, superClassRef, subClassObj, referenceFile) {
+      if (referenceFile) {
+        return miscUtilities.getSuperClassChildren(
+          referenceFile,
+          superClassRef,
+          subClassObj,
+          referenceFile,
+          null,
+          this.$store.state.loadedFiles
+        );
+      } else {
+        return miscUtilities.getSuperClassChildren(
+          file,
+          superClassRef,
+          subClassObj,
+          referenceFile,
+          null,
+          this.$store.state.loadedFiles
+        );
+      }
+    },
+    defnRef(nodeName, fileName) {
+      let defnRef = miscUtilities.generateUniqueRef(
+        nodeName,
+        fileName,
+        this.name
+      );
+      return defnRef;
+    },
+    defnRefParentTrail(nodeName, parent_trail) {
+      return nodeName + "-" + parent_trail;
+    },
+    addViewObj(el) {
+      this.viewObjFinal = true
+      this.$store.commit("addViewObj", {
+        'el': el,
+        'mode': 'create_cookie'
+      });
+    },
+    removeViewObj(el) {
+      this.viewObjFinal = false
+      this.$store.commit("removeViewObj", {
+        'el': el,
+        'mode': 'create_cookie'
+      });
+      this.$store.commit("reRenderList")
+    }
+  },
+  watch: {
+    expandAllObjects() {
+      if (this.expandAllObjects == true) {
+        this.expandDefn = true;
+      } else {
+        this.expandDefn = false;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.checkbox-s {
+  margin-left: 8px;
+}
+
+.icon-expandable {
+  margin-bottom: 3px;
+}
+
+.taxonomy-element-icon-expandable {
+  margin-bottom: 3px;
+  padding: 6px;
+}
+
+.options {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 46px;
+  padding-left: 9px;
+  bottom: -6px;
+  visibility: hidden;
+}
+
+.element-div:hover .options {
+  visibility: visible;
+}
+
+.element-div {
+  margin-bottom: -8px;
+  margin-left: 15px;
+}
+
+.element-div:focus {
+  color: red;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.node-wrapper {
+  border-bottom: #d3d3d3 solid 1px;
+  height: 25px;
+}
+
+.subClassSignifier {
+  font-style: italic;
+}
+
+.importedNodeSignifier {
+  font-style: italic;
+  font-weight: bold;
+}
+
+.primary-view-icon {
+  display:block;
+  padding-right: 125px;
+  float: right;
+}
+
+/* .node-wrapper:hover .primary-view-icon { 
+  display: block;
+} */
+</style>
diff --git a/src/components/forms/CreateDefinitionForm.vue b/src/components/forms/CreateDefinitionForm.vue
index ee056ca..22fc183 100644
--- a/src/components/forms/CreateDefinitionForm.vue
+++ b/src/components/forms/CreateDefinitionForm.vue
@@ -1,597 +1,596 @@
-<template>
-  <div class="create-element-container">
-    <b-form>
-      <b-form-group
-        id="node-type-input-group"
-        label="OB Definition type:"
-        label-for="node-type-input"
-      >
-        <b-form-select
-          id="node-type-input"
-          v-model="definitionType"
-          :options="OBDataTypes"
-          :disabled="!preSubmit"
-          :state="Boolean(definitionType)"
-        ></b-form-select>
-      </b-form-group>
-      <b-form-group
-        id="node-name-input-group"
-        label="Definition name:"
-        label-for="node-name-input"
-      >
-        <b-form-input
-          id="node-name-input"
-          v-model="definitionName"
-          :disabled="!preSubmit"
-          :state="Boolean(definitionName)"
-        ></b-form-input>
-      </b-form-group>
-      <b-form-group
-        id="node-description-input-group"
-        label="Definition description:"
-        label-for="node-description-input"
-      >
-        <b-form-input
-          id="node-description-input"
-          v-model="definitionDescription"
-          :disabled="!preSubmit"
-          :state="Boolean(definitionDescription)"
-        ></b-form-input>
-      </b-form-group>
-
-      <b-form-group
-        id="node-usage-tips-input-group"
-        label="Usage tips:"
-        label-for="node-usage-tips-input"
-      >
-        <b-form-input
-          id="node-usage-tips-input"
-          v-model="selectedOBUsageTips"
-          :disabled="!preSubmit"
-        ></b-form-input>
-      </b-form-group>
-
-      <b-form-group
-        id="node-sample-value-input-group"
-        label="Sample:"
-        label-for="node-sample-value-input"
-      >
-        <b-form-textarea
-          id="node-sample-value-input"
-          v-model="selectedOBSampleValue"
-          :state="Boolean(selectedOBSampleValue) ? validateSampleValueJSON(selectedOBSampleValue) : false"
-          :disabled="!preSubmit"
-        ></b-form-textarea>
-      </b-form-group>
-
-      <b-form-group
-        id="node-item-type-input-group"
-        label="OB Item Type:"
-        label-for="node-item-type-input"
-        v-if="
-          definitionType == 'OB Taxonomy Element String' ||
-            definitionType == 'OB Taxonomy Element Number' ||
-            definitionType == 'OB Taxonomy Element Integer' ||
-            definitionType == 'OB Taxonomy Element Boolean'
-        "
-      >
-        <b-form-select
-          id="node-item-type-input"
-          v-model="selectedOBItemType"
-          :options="allItemTypesComputed"
-          :disabled="!preSubmit"
-          :state="Boolean(selectedOBItemType)"
-        ></b-form-select>
-      </b-form-group>
-
-      <b-form-group
-        label="Item Type Group:"
-        label-for="create-def-item-type-group-input"
-        v-if="selectedOBItemType"
-      >
-        <b-form-select
-          id="create-def-item-type-group-input"
-          v-model="selectedItemTypeGroup"
-          :options="allPossibleItemTypeGroups"
-        ></b-form-select>
-      </b-form-group>
-
-      <!-- <div class="enum-or-unit-table-container" v-if="selectedOBItemTypeType">              
-        <b-table 
-            @row-selected="onRowSelected" 
-            selectable 
-            select-mode="single"
-            :fields="returnEnumOrUnitFields(selectedOBItemTypeType)" 
-            :items="itemTypeEnumsOrUnitsComputed" 
-            class="item-type-table"
-        >
-        </b-table>
-      </div> -->
-
-      <span v-if="definitionType == 'OB Array'">
-        <div>Choose array item:</div>
-        <div>Select document to choose array item from:</div>
-        <b-form-select
-          v-model="selectedFileName"
-          :options="getLoadedFiles"
-          :select-size="4"
-          id="select-form-files"
-        ></b-form-select>
-        <br />
-        <div>Select definition to use as array item:</div>
-        <b-form-input
-            class="array-item-search-bar"
-            v-model="arrayItemSearchTerm"
-            placeholder="Search item names... (wildcard: * )"
-          >
-          </b-form-input>
-        <div class="file-elements-list">
-          <span v-if="selectedFileName">
-            <li
-              v-for="(name, index) in fileElements"
-              id="defn-from-file"
-              @click="selectDefn(index, name)"
-              :class="{ 'selected-node': index == selectedDefnIndex }"
-            >
-              {{ name }}
-            </li>
-          </span>
-        </div>
-        <b-table
-          :items="defnDetails"
-          id="add-member-detail-table"
-          ref="add-member-detail-table"
-          v-if="selectedDefnName"
-        ></b-table>
-      </span>
-
-      <span id="edit-form-buttons">
-        <b-button v-if="preSubmit" type="submit" @click.prevent="createElement"
-          >Create</b-button
-        >
-        <b-button v-if="preSubmit" @click="exitView">Cancel</b-button>
-      </span>
-    </b-form>
-    <b-modal
-      id="modal-create-node"
-      title="Attention"
-      ref="create-modal-warning"
-      centered
-      no-stacking
-      v-model="submissionError"
-    >
-      <p>
-        {{ submissionErrorMsg }}
-      </p>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import * as miscUtilities from "../../utils/miscUtilities";
-
-export default {
-  created() {
-    this.allItemTypes = this.$store.state.loadedFiles[this.$store.state.selectedFileName]["item_types"]
-    this.allItemTypeGroups = this.$store.state.loadedFiles[this.$store.state.selectedFileName]["item_type_groups"]
-  },
-  data() {
-    return {
-      allItemTypes: null,
-      selectedOBItemTypeType: null,
-      selectedOBItemTypeDescription: null,
-      selectedOBItemTypeEnumsOrUnits: [],
-      selectedItemTypeGroup: '',
-      possibleItemTypeGroups: [],
-      definitionName: null,
-      definitionType: null,
-      definitionDescription: null,
-      preSubmit: true,
-      submissionError: false,
-      submissionErrorMsg: "",
-      OBDataTypes: [
-        "OB Object",
-        "OB Array",
-        "OB Taxonomy Element String",
-        "OB Taxonomy Element Number",
-        "OB Taxonomy Element Integer",
-        "OB Taxonomy Element Boolean"
-      ],
-      arrayItemSearchTerm: "",
-      selectedFileName: null,
-      selectedDefnIndex: null,
-      selectedDefnName: null,
-
-      selectedOBItemType: null,
-      selectedOBUsageTips: "",
-      selectedOBSampleValue: null,
-      unitFields: [
-          { key: "enumOrUnitID", label: "Unit ID", thStyle: { width: "150px" } }, 
-          { key: "enumOrUnitLabel", label: "Unit Label", thStyle: { width: "150px" } },
-          { key: "enumOrUnitDescription", label: "Unit Description"}
-      ],
-      enumFields: [
-          { key: "enumOrUnitID", label: "Enum ID", thStyle: { width: "150px" } }, 
-          { key: "enumOrUnitLabel", label: "Enum Label", thStyle: { width: "150px" } },
-          { key: "enumOrUnitDescription", label: "Enum Description"}
-      ],         
-    };
-  },
-  methods: {
-    validateSampleValueJSON() {
-      try {
-        JSON.parse(this.selectedOBSampleValue);
-        return true;
-      } catch(error) {
-        return false;
-      }
-    },
-    onRowSelected(items) {
-        this.selectedEnumOrUnit = items
-    },    
-    exitView() {
-      this.definitionName = null;
-      this.definitionType = null;
-      this.definitionDescription = null;
-      this.selectedOBItemType = null;
-      this.preSubmit = true;
-      this.$store.commit("showNoView");
-    },
-    createElement() {
-      if(!this.definitionType) {
-        this.submissionErrorMsg = "Please select a definition type.";
-        this.submissionError = true;
-        return;
-      } else if(!this.definitionName) {
-        this.submissionErrorMsg = "Please enter a definition name.";
-        this.submissionError = true;
-        return;
-      } else if(!this.definitionDescription) {
-        this.submissionErrorMsg = "Please enter a definition description.";
-        this.submissionError = true;
-        return;
-      } else if(this.definitionType === "OB Array" && (!this.selectedFileName || !this.selectedDefnName)) {
-        this.submissionErrorMsg = "Please select a file and an array item.";
-        this.submissionError = true;
-        return;
-      } else if(this.definitionType.substring(0,19) === "OB Taxonomy Element" && !this.selectedOBItemType) {
-        this.submissionErrorMsg = "Please select an OB Item Type."
-        this.submissionError = true;
-        return;
-      } else if(!this.selectedOBSampleValue || !this.validateSampleValueJSON()) {
-        this.submissionErrorMsg = "Invalid SampleValue JSON."
-        this.submissionError = true;
-        return;
-      }
-      
-      let payload = {
-        definitionName: this.definitionName,
-        definitionType: this.definitionType,
-        definitionDescription: this.definitionDescription,
-        arrayItemDefnName: this.selectedDefnName,
-        arrayItemFileName: this.selectedFileName,
-        OBItemType: this.selectedOBItemType,
-        OBItemTypeGroup: this.selectedItemTypeGroup,
-        OBUsageTips: this.selectedOBUsageTips,
-        OBSampleValue: JSON.parse(this.selectedOBSampleValue)
-      };
-      this.preSubmit = false;
-
-      this.$store.commit("createDefinition", payload);
-    },
-    selectDefn(index, definitionName) {
-      this.selectedDefnIndex = index;
-      this.selectedDefnName = definitionName;
-      this.showErrorInfinite = false;
-      this.showErrorConflict = false;
-    },
-    returnEnumOrUnitFields(itemTypeType) {
-      if (itemTypeType == 'units') {
-          return this.unitFields
-      } else if (itemTypeType == 'enums') {
-          return this.enumFields
-      }
-    },
-    findPossibleItemTypeGroups() {
-      for (let i in this.allItemTypeGroups) {
-        if (this.allItemTypeGroups[i]['type'].includes(this.selectedOBItemType)) {
-          this.possibleItemTypeGroups.push(i)
-        }
-      }
-      this.possibleItemTypeGroups.push({value: '', text: 'None'})
-    }
-  },
-  computed: {
-    allItemTypesComputed() {
-      let ret_arr = []
-      let itemTypeName = ''
-      for (let i in this.allItemTypes) {
-          itemTypeName = i
-          ret_arr.push(itemTypeName)
-      }
-
-      return ret_arr.sort()
-    },
-    fileElements() {
-      if (this.selectedFileName) {
-        let fileElements = Object.keys(
-          this.$store.state.loadedFiles[this.selectedFileName]["file"]
-        ).sort();
-
-        return fileElements
-          .filter(node => {
-            return miscUtilities.wildcardSearch(node.toLowerCase(), this.arrayItemSearchTerm.toLowerCase());
-          });
-      }
-    },
-    getLoadedFiles() {
-      let optionsArr = [];
-      for (let i in this.$store.state.loadedFiles) {
-        optionsArr.push({
-          value: i,
-          text: i
-        });
-      }
-      return optionsArr;
-    },
-    defnDetails() {
-      let temp_ret_obj = null;
-
-      let defnName = this.selectedDefnName;
-      let defnType = "";
-      let defnDescrip = "Documentation not available";
-      let defnEnum = "";
-      let temp_superClassList = [];
-      let temp_superClassListStr = "";
-      let defnObjChildren = "";
-      let typeOfDefn = null;
-
-      let defnFile = this.$store.state.loadedFiles[this.selectedFileName][
-        "file"
-      ];
-
-      if (defnFile[defnName]["allOf"]) {
-        if (miscUtilities.isTaxonomyElement(defnFile, defnName)) {
-          typeOfDefn = "TaxonomyElement";
-        } else {
-          typeOfDefn = "ObjWithInherit";
-        }
-        for (let i in defnFile[defnName]["allOf"]) {
-          if (defnFile[defnName]["allOf"][i]["$ref"]) {
-            temp_superClassList.push(
-              defnFile[defnName]["allOf"][i]["$ref"].slice(
-                defnFile[defnName]["allOf"][i]["$ref"].lastIndexOf("/") + 1
-              )
-            );
-          } else {
-            if (defnFile[defnName]["allOf"][i]["description"]) {
-              defnDescrip = defnFile[defnName]["allOf"][i]["description"];
-            }
-            if (defnFile[defnName]["allOf"][i]["type"]) {
-              defnType = defnFile[defnName]["allOf"][i]["type"];
-            }
-            if (defnFile[defnName]["allOf"][i]["enum"]) {
-              defnEnum = defnFile[defnName]["allOf"][i]["enum"];
-            }
-
-            if (typeOfDefn == "ObjWithInherit") {
-              if (defnFile[defnName]["allOf"][i]["properties"]) {
-                defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
-              }
-            }
-          }
-        }
-      } else if (defnFile[defnName]["properties"]) {
-        typeOfDefn = "Obj";
-        if (defnFile[defnName]["type"]) {
-          defnType = defnFile[defnName]["type"];
-        }
-
-        if (defnFile[defnName]["properties"]["description"]) {
-          defnDescrip = defnFile[defnName]["properties"]["description"];
-        }
-
-        defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
-      } else {
-        typeOfDefn = "Elem";
-        if (defnFile[defnName]["description"]) {
-          defnDescrip = defnFile[defnName]["description"];
-        }
-
-        if (defnFile[defnName]["type"]) {
-          defnType = defnFile[defnName]["type"];
-        }
-
-        if (defnFile[defnName]["enum"]) {
-          defnEnum = defnFile[defnName]["enum"];
-        }
-      }
-      if (temp_superClassList.length == 0) {
-        temp_superClassListStr = "None";
-      } else {
-        temp_superClassListStr = temp_superClassList.join(", ");
-      }
-
-      if (!defnEnum) {
-        defnEnum = "None";
-      } else {
-        defnEnum = defnEnum.join(", ");
-      }
-
-      if (defnObjChildren) {
-        defnObjChildren = defnObjChildren.join(", ");
-      } else {
-        defnObjChildren = "None";
-      }
-
-      if (typeOfDefn == "ObjWithInherit") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "TaxonomyElement") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Superclasses", Values: temp_superClassListStr }
-        ];
-      } else if (typeOfDefn == "Obj") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Documentation", Values: defnDescrip },
-          { Attributes: "Children", Values: defnObjChildren }
-        ];
-      } else if (typeOfDefn == "Elem") {
-        temp_ret_obj = [
-          { Attributes: "Name", Values: defnName },
-          { Attributes: "Type", Values: defnType },
-          { Attributes: "Enumeration", Values: defnEnum },
-          { Attributes: "Documentation", Values: defnDescrip }
-        ];
-      }
-
-      let arr = temp_ret_obj;
-
-      return arr;
-    },
-    itemTypeEnumsOrUnitsComputed() {
-      return this.selectedOBItemTypeEnumsOrUnits
-    },
-    allPossibleItemTypeGroups() {
-      return this.possibleItemTypeGroups
-    }
-  },
-  watch: {
-    "$store.state.showCreateDefinitionForm"() {
-      this.definitionName = null;
-      this.definitionType = null;
-      this.definitionDescription = null;
-      this.selectedOBItemType = null;
-      this.selectedFileName = null;
-      this.selectedDefnIndex = null;
-      this.selectedDefnName = null;
-      this.selectedOBUsageTips = "";
-      this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
-    },
-    "$store.state.isSelected"() {
-      this.definitionType = null;
-      this.definitionName = null;
-      this.definitionDescription = null;
-      this.selectedOBUsageTips = "";
-      this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
-      if (!this.preSubmit) {
-        this.preSubmit = true;
-      }
-    },
-    "$store.state.refreshCreateDefn"() {
-      if (this.$store.state.refreshCreateDefn == true) {
-        this.definitionType = null;
-        this.definitionName = null;
-        this.definitionDescription = null;
-        this.selectedOBItemType = null;
-        this.selectedFileName = null;
-        this.selectedDefnIndex = null;
-        this.selectedDefnName = null;
-        this.selectedOBUsageTips = "";
-        this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
-        if (!this.preSubmit) {
-          this.preSubmit = true;
-        }
-        this.$store.commit("refreshCreateDefnInputs", false);
-      }
-    },
-    selectedFileName() {
-      this.selectedDefnIndex = null;
-      this.selectedDefnName = null;
-      this.searchTerm = "";
-    },
-    selectedOBItemType() {
-      if (this.selectedOBItemType) {
-        this.selectedOBItemTypeType = ''
-        this.selectedOBItemTypeDescription = ''
-        this.selectedOBItemTypeEnumsOrUnits = []
-
-        let enumOrUnitID = ''
-        let enumOrUnitLabel = ''
-        let enumOrUnitDescription = ''
-
-        let currentItemTypeObj = this.allItemTypes[this.selectedOBItemType]
-        this.findPossibleItemTypeGroups()
-        if ("description" in currentItemTypeObj)
-            this.selectedOBItemTypeDescription = currentItemTypeObj["description"]
-
-          // refactor: repeated code
-        if ("enums" in currentItemTypeObj) {
-          this.selectedOBItemTypeType = 'enums'
-          for (let i in currentItemTypeObj['enums']) {
-            enumOrUnitID = i
-            if ('label' in currentItemTypeObj['enums'][i]) {
-                enumOrUnitLabel = currentItemTypeObj['enums'][i]['label']
-            } else {
-                enumOrUnitLabel = ''
-            }
-
-            if ('description' in currentItemTypeObj['enums'][i]) {
-                enumOrUnitDescription = currentItemTypeObj['enums'][i]['description']
-            } else {
-                enumOrUnitDescription = ''
-            }                        
-
-            this.selectedOBItemTypeEnumsOrUnits.push({
-                'enumOrUnitID': enumOrUnitID,
-                'enumOrUnitLabel': enumOrUnitLabel,
-                'enumOrUnitDescription': enumOrUnitDescription
-            })
-          }
-        } else if ("units" in currentItemTypeObj) {
-          this.selectedOBItemTypeType = 'units' 
-          for (let i in currentItemTypeObj['units']) {
-            enumOrUnitID = i
-            if ('label' in currentItemTypeObj['units'][i]) {
-                enumOrUnitLabel = currentItemTypeObj['units'][i]['label']
-            } else {
-                enumOrUnitLabel = ''
-            }
-
-            if ('description' in currentItemTypeObj['units'][i]) {
-                enumOrUnitDescription = currentItemTypeObj['units'][i]['description']
-            } else {
-                enumOrUnitDescription = ''
-            }     
-
-            this.selectedOBItemTypeEnumsOrUnits.push({
-                'enumOrUnitID': enumOrUnitID,
-                'enumOrUnitLabel': enumOrUnitLabel,
-                'enumOrUnitDescription': enumOrUnitDescription
-            })
-          }
-        }
-        console.log(this.possibleItemTypeGroups)
-      }
-    }
-  }
-};
-</script>
-
-<style>
-#edit-form-buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.create-element-container {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.array-item-search-bar {
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-</style>
+<template>
+  <div class="create-element-container">
+    <b-form>
+      <b-form-group
+        id="node-type-input-group"
+        label="OB Definition type:"
+        label-for="node-type-input"
+      >
+        <b-form-select
+          id="node-type-input"
+          v-model="definitionType"
+          :options="OBDataTypes"
+          :disabled="!preSubmit"
+          :state="Boolean(definitionType)"
+        ></b-form-select>
+      </b-form-group>
+      <b-form-group
+        id="node-name-input-group"
+        label="Definition name:"
+        label-for="node-name-input"
+      >
+        <b-form-input
+          id="node-name-input"
+          v-model="definitionName"
+          :disabled="!preSubmit"
+          :state="Boolean(definitionName)"
+        ></b-form-input>
+      </b-form-group>
+      <b-form-group
+        id="node-description-input-group"
+        label="Definition description:"
+        label-for="node-description-input"
+      >
+        <b-form-input
+          id="node-description-input"
+          v-model="definitionDescription"
+          :disabled="!preSubmit"
+          :state="Boolean(definitionDescription)"
+        ></b-form-input>
+      </b-form-group>
+
+      <b-form-group
+        id="node-usage-tips-input-group"
+        label="Usage tips:"
+        label-for="node-usage-tips-input"
+      >
+        <b-form-input
+          id="node-usage-tips-input"
+          v-model="selectedOBUsageTips"
+          :disabled="!preSubmit"
+        ></b-form-input>
+      </b-form-group>
+
+      <b-form-group
+        id="node-sample-value-input-group"
+        label="Sample:"
+        label-for="node-sample-value-input"
+      >
+        <b-form-textarea
+          id="node-sample-value-input"
+          v-model="selectedOBSampleValue"
+          :state="Boolean(selectedOBSampleValue) ? validateSampleValueJSON(selectedOBSampleValue) : false"
+          :disabled="!preSubmit"
+        ></b-form-textarea>
+      </b-form-group>
+
+      <b-form-group
+        id="node-item-type-input-group"
+        label="OB Item Type:"
+        label-for="node-item-type-input"
+        v-if="
+          definitionType == 'OB Taxonomy Element String' ||
+            definitionType == 'OB Taxonomy Element Number' ||
+            definitionType == 'OB Taxonomy Element Integer' ||
+            definitionType == 'OB Taxonomy Element Boolean'
+        "
+      >
+        <b-form-select
+          id="node-item-type-input"
+          v-model="selectedOBItemType"
+          :options="allItemTypesComputed"
+          :disabled="!preSubmit"
+          :state="Boolean(selectedOBItemType)"
+        ></b-form-select>
+      </b-form-group>
+
+      <b-form-group
+        label="Item Type Group:"
+        label-for="create-def-item-type-group-input"
+        v-if="selectedOBItemType"
+      >
+        <b-form-select
+          id="create-def-item-type-group-input"
+          v-model="selectedItemTypeGroup"
+          :options="allPossibleItemTypeGroups"
+        ></b-form-select>
+      </b-form-group>
+
+      <!-- <div class="enum-or-unit-table-container" v-if="selectedOBItemTypeType">              
+        <b-table 
+            @row-selected="onRowSelected" 
+            selectable 
+            select-mode="single"
+            :fields="returnEnumOrUnitFields(selectedOBItemTypeType)" 
+            :items="itemTypeEnumsOrUnitsComputed" 
+            class="item-type-table"
+        >
+        </b-table>
+      </div> -->
+
+      <span v-if="definitionType == 'OB Array'">
+        <div>Choose array item:</div>
+        <div>Select document to choose array item from:</div>
+        <b-form-select
+          v-model="selectedFileName"
+          :options="getLoadedFiles"
+          :select-size="4"
+          id="select-form-files"
+        ></b-form-select>
+        <br />
+        <div>Select definition to use as array item:</div>
+        <b-form-input
+            class="array-item-search-bar"
+            v-model="arrayItemSearchTerm"
+            placeholder="Search item names... (wildcard: * )"
+          >
+          </b-form-input>
+        <div class="file-elements-list">
+          <span v-if="selectedFileName">
+            <li
+              v-for="(name, index) in fileElements"
+              id="defn-from-file"
+              @click="selectDefn(index, name)"
+              :class="{ 'selected-node': index == selectedDefnIndex }"
+            >
+              {{ name }}
+            </li>
+          </span>
+        </div>
+        <b-table
+          :items="defnDetails"
+          id="add-member-detail-table"
+          ref="add-member-detail-table"
+          v-if="selectedDefnName"
+        ></b-table>
+      </span>
+
+      <span id="edit-form-buttons">
+        <b-button v-if="preSubmit" type="submit" @click.prevent="createElement"
+          >Create</b-button
+        >
+        <b-button v-if="preSubmit" @click="exitView">Cancel</b-button>
+      </span>
+    </b-form>
+    <b-modal
+      id="modal-create-node"
+      title="Attention"
+      ref="create-modal-warning"
+      centered
+      no-stacking
+      v-model="submissionError"
+    >
+      <p>
+        {{ submissionErrorMsg }}
+      </p>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import * as miscUtilities from "../../utils/miscUtilities";
+
+export default {
+  created() {
+    this.allItemTypes = this.$store.state.loadedFiles[this.$store.state.selectedFileName]["item_types"]
+    this.allItemTypeGroups = this.$store.state.loadedFiles[this.$store.state.selectedFileName]["item_type_groups"]
+  },
+  data() {
+    return {
+      allItemTypes: null,
+      selectedOBItemTypeType: null,
+      selectedOBItemTypeDescription: null,
+      selectedOBItemTypeEnumsOrUnits: [],
+      selectedItemTypeGroup: '',
+      possibleItemTypeGroups: [],
+      definitionName: null,
+      definitionType: null,
+      definitionDescription: null,
+      preSubmit: true,
+      submissionError: false,
+      submissionErrorMsg: "",
+      OBDataTypes: [
+        "OB Object",
+        "OB Array",
+        "OB Taxonomy Element String",
+        "OB Taxonomy Element Number",
+        "OB Taxonomy Element Integer",
+        "OB Taxonomy Element Boolean"
+      ],
+      arrayItemSearchTerm: "",
+      selectedFileName: null,
+      selectedDefnIndex: null,
+      selectedDefnName: null,
+
+      selectedOBItemType: null,
+      selectedOBUsageTips: "",
+      selectedOBSampleValue: null,
+      unitFields: [
+          { key: "enumOrUnitID", label: "Unit ID", thStyle: { width: "150px" } }, 
+          { key: "enumOrUnitLabel", label: "Unit Label", thStyle: { width: "150px" } },
+          { key: "enumOrUnitDescription", label: "Unit Description"}
+      ],
+      enumFields: [
+          { key: "enumOrUnitID", label: "Enum ID", thStyle: { width: "150px" } }, 
+          { key: "enumOrUnitLabel", label: "Enum Label", thStyle: { width: "150px" } },
+          { key: "enumOrUnitDescription", label: "Enum Description"}
+      ],         
+    };
+  },
+  methods: {
+    validateSampleValueJSON() {
+      try {
+        JSON.parse(this.selectedOBSampleValue);
+        return true;
+      } catch(error) {
+        return false;
+      }
+    },
+    onRowSelected(items) {
+        this.selectedEnumOrUnit = items
+    },    
+    exitView() {
+      this.definitionName = null;
+      this.definitionType = null;
+      this.definitionDescription = null;
+      this.selectedOBItemType = null;
+      this.preSubmit = true;
+      this.$store.commit("showNoView");
+    },
+    createElement() {
+      if(!this.definitionType) {
+        this.submissionErrorMsg = "Please select a definition type.";
+        this.submissionError = true;
+        return;
+      } else if(!this.definitionName) {
+        this.submissionErrorMsg = "Please enter a definition name.";
+        this.submissionError = true;
+        return;
+      } else if(!this.definitionDescription) {
+        this.submissionErrorMsg = "Please enter a definition description.";
+        this.submissionError = true;
+        return;
+      } else if(this.definitionType === "OB Array" && (!this.selectedFileName || !this.selectedDefnName)) {
+        this.submissionErrorMsg = "Please select a file and an array item.";
+        this.submissionError = true;
+        return;
+      } else if(this.definitionType.substring(0,19) === "OB Taxonomy Element" && !this.selectedOBItemType) {
+        this.submissionErrorMsg = "Please select an OB Item Type."
+        this.submissionError = true;
+        return;
+      } else if(!this.selectedOBSampleValue || !this.validateSampleValueJSON()) {
+        this.submissionErrorMsg = "Invalid SampleValue JSON."
+        this.submissionError = true;
+        return;
+      }
+      
+      let payload = {
+        definitionName: this.definitionName,
+        definitionType: this.definitionType,
+        definitionDescription: this.definitionDescription,
+        arrayItemDefnName: this.selectedDefnName,
+        arrayItemFileName: this.selectedFileName,
+        OBItemType: this.selectedOBItemType,
+        OBItemTypeGroup: this.selectedItemTypeGroup,
+        OBUsageTips: this.selectedOBUsageTips,
+        OBSampleValue: JSON.parse(this.selectedOBSampleValue)
+      };
+      this.preSubmit = false;
+
+      this.$store.commit("createDefinition", payload);
+    },
+    selectDefn(index, definitionName) {
+      this.selectedDefnIndex = index;
+      this.selectedDefnName = definitionName;
+      this.showErrorInfinite = false;
+      this.showErrorConflict = false;
+    },
+    returnEnumOrUnitFields(itemTypeType) {
+      if (itemTypeType == 'units') {
+          return this.unitFields
+      } else if (itemTypeType == 'enums') {
+          return this.enumFields
+      }
+    },
+    findPossibleItemTypeGroups() {
+      for (let i in this.allItemTypeGroups) {
+        if (this.allItemTypeGroups[i]['type'].includes(this.selectedOBItemType)) {
+          this.possibleItemTypeGroups.push(i)
+        }
+      }
+      this.possibleItemTypeGroups.push({value: '', text: 'None'})
+    }
+  },
+  computed: {
+    allItemTypesComputed() {
+      let ret_arr = []
+      let itemTypeName = ''
+      for (let i in this.allItemTypes) {
+          itemTypeName = i
+          ret_arr.push(itemTypeName)
+      }
+
+      return ret_arr.sort()
+    },
+    fileElements() {
+      if (this.selectedFileName) {
+        let fileElements = Object.keys(
+          this.$store.state.loadedFiles[this.selectedFileName]["file"]
+        ).sort();
+
+        return fileElements
+          .filter(node => {
+            return miscUtilities.wildcardSearch(node.toLowerCase(), this.arrayItemSearchTerm.toLowerCase());
+          });
+      }
+    },
+    getLoadedFiles() {
+      let optionsArr = [];
+      for (let i in this.$store.state.loadedFiles) {
+        optionsArr.push({
+          value: i,
+          text: i
+        });
+      }
+      return optionsArr;
+    },
+    defnDetails() {
+      let temp_ret_obj = null;
+
+      let defnName = this.selectedDefnName;
+      let defnType = "";
+      let defnDescrip = "Documentation not available";
+      let defnEnum = "";
+      let temp_superClassList = [];
+      let temp_superClassListStr = "";
+      let defnObjChildren = "";
+      let typeOfDefn = null;
+
+      let defnFile = this.$store.state.loadedFiles[this.selectedFileName][
+        "file"
+      ];
+
+      if (defnFile[defnName]["allOf"]) {
+        if (miscUtilities.isTaxonomyElement(defnFile, defnName)) {
+          typeOfDefn = "TaxonomyElement";
+        } else {
+          typeOfDefn = "ObjWithInherit";
+        }
+        for (let i in defnFile[defnName]["allOf"]) {
+          if (defnFile[defnName]["allOf"][i]["$ref"]) {
+            temp_superClassList.push(
+              defnFile[defnName]["allOf"][i]["$ref"].slice(
+                defnFile[defnName]["allOf"][i]["$ref"].lastIndexOf("/") + 1
+              )
+            );
+          } else {
+            if (defnFile[defnName]["allOf"][i]["description"]) {
+              defnDescrip = defnFile[defnName]["allOf"][i]["description"];
+            }
+            if (defnFile[defnName]["allOf"][i]["type"]) {
+              defnType = defnFile[defnName]["allOf"][i]["type"];
+            }
+            if (defnFile[defnName]["allOf"][i]["enum"]) {
+              defnEnum = defnFile[defnName]["allOf"][i]["enum"];
+            }
+
+            if (typeOfDefn == "ObjWithInherit") {
+              if (defnFile[defnName]["allOf"][i]["properties"]) {
+                defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
+              }
+            }
+          }
+        }
+      } else if (defnFile[defnName]["properties"]) {
+        typeOfDefn = "Obj";
+        if (defnFile[defnName]["type"]) {
+          defnType = defnFile[defnName]["type"];
+        }
+
+        if (defnFile[defnName]["properties"]["description"]) {
+          defnDescrip = defnFile[defnName]["properties"]["description"];
+        }
+
+        defnObjChildren = Object.keys(defnFile[defnName]["properties"]);
+      } else {
+        typeOfDefn = "Elem";
+        if (defnFile[defnName]["description"]) {
+          defnDescrip = defnFile[defnName]["description"];
+        }
+
+        if (defnFile[defnName]["type"]) {
+          defnType = defnFile[defnName]["type"];
+        }
+
+        if (defnFile[defnName]["enum"]) {
+          defnEnum = defnFile[defnName]["enum"];
+        }
+      }
+      if (temp_superClassList.length == 0) {
+        temp_superClassListStr = "None";
+      } else {
+        temp_superClassListStr = temp_superClassList.join(", ");
+      }
+
+      if (!defnEnum) {
+        defnEnum = "None";
+      } else {
+        defnEnum = defnEnum.join(", ");
+      }
+
+      if (defnObjChildren) {
+        defnObjChildren = defnObjChildren.join(", ");
+      } else {
+        defnObjChildren = "None";
+      }
+
+      if (typeOfDefn == "ObjWithInherit") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "TaxonomyElement") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Superclasses", Values: temp_superClassListStr }
+        ];
+      } else if (typeOfDefn == "Obj") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Documentation", Values: defnDescrip },
+          { Attributes: "Children", Values: defnObjChildren }
+        ];
+      } else if (typeOfDefn == "Elem") {
+        temp_ret_obj = [
+          { Attributes: "Name", Values: defnName },
+          { Attributes: "Type", Values: defnType },
+          { Attributes: "Enumeration", Values: defnEnum },
+          { Attributes: "Documentation", Values: defnDescrip }
+        ];
+      }
+
+      let arr = temp_ret_obj;
+
+      return arr;
+    },
+    itemTypeEnumsOrUnitsComputed() {
+      return this.selectedOBItemTypeEnumsOrUnits
+    },
+    allPossibleItemTypeGroups() {
+      return this.possibleItemTypeGroups
+    }
+  },
+  watch: {
+    "$store.state.showCreateDefinitionForm"() {
+      this.definitionName = null;
+      this.definitionType = null;
+      this.definitionDescription = null;
+      this.selectedOBItemType = null;
+      this.selectedFileName = null;
+      this.selectedDefnIndex = null;
+      this.selectedDefnName = null;
+      this.selectedOBUsageTips = "";
+      this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
+    },
+    "$store.state.isSelected"() {
+      this.definitionType = null;
+      this.definitionName = null;
+      this.definitionDescription = null;
+      this.selectedOBUsageTips = "";
+      this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
+      if (!this.preSubmit) {
+        this.preSubmit = true;
+      }
+    },
+    "$store.state.refreshCreateDefn"() {
+      if (this.$store.state.refreshCreateDefn == true) {
+        this.definitionType = null;
+        this.definitionName = null;
+        this.definitionDescription = null;
+        this.selectedOBItemType = null;
+        this.selectedFileName = null;
+        this.selectedDefnIndex = null;
+        this.selectedDefnName = null;
+        this.selectedOBUsageTips = "";
+        this.selectedOBSampleValue = JSON.stringify({"Decimals":"","EndTime":"","Precision":"","StartTime":"","Unit":"","Value":""}, null, 2);
+        if (!this.preSubmit) {
+          this.preSubmit = true;
+        }
+        this.$store.commit("refreshCreateDefnInputs", false);
+      }
+    },
+    selectedFileName() {
+      this.selectedDefnIndex = null;
+      this.selectedDefnName = null;
+      this.searchTerm = "";
+    },
+    selectedOBItemType() {
+      if (this.selectedOBItemType) {
+        this.selectedOBItemTypeType = ''
+        this.selectedOBItemTypeDescription = ''
+        this.selectedOBItemTypeEnumsOrUnits = []
+
+        let enumOrUnitID = ''
+        let enumOrUnitLabel = ''
+        let enumOrUnitDescription = ''
+
+        let currentItemTypeObj = this.allItemTypes[this.selectedOBItemType]
+        this.findPossibleItemTypeGroups()
+        if ("description" in currentItemTypeObj)
+            this.selectedOBItemTypeDescription = currentItemTypeObj["description"]
+
+          // refactor: repeated code
+        if ("enums" in currentItemTypeObj) {
+          this.selectedOBItemTypeType = 'enums'
+          for (let i in currentItemTypeObj['enums']) {
+            enumOrUnitID = i
+            if ('label' in currentItemTypeObj['enums'][i]) {
+                enumOrUnitLabel = currentItemTypeObj['enums'][i]['label']
+            } else {
+                enumOrUnitLabel = ''
+            }
+
+            if ('description' in currentItemTypeObj['enums'][i]) {
+                enumOrUnitDescription = currentItemTypeObj['enums'][i]['description']
+            } else {
+                enumOrUnitDescription = ''
+            }                        
+
+            this.selectedOBItemTypeEnumsOrUnits.push({
+                'enumOrUnitID': enumOrUnitID,
+                'enumOrUnitLabel': enumOrUnitLabel,
+                'enumOrUnitDescription': enumOrUnitDescription
+            })
+          }
+        } else if ("units" in currentItemTypeObj) {
+          this.selectedOBItemTypeType = 'units' 
+          for (let i in currentItemTypeObj['units']) {
+            enumOrUnitID = i
+            if ('label' in currentItemTypeObj['units'][i]) {
+                enumOrUnitLabel = currentItemTypeObj['units'][i]['label']
+            } else {
+                enumOrUnitLabel = ''
+            }
+
+            if ('description' in currentItemTypeObj['units'][i]) {
+                enumOrUnitDescription = currentItemTypeObj['units'][i]['description']
+            } else {
+                enumOrUnitDescription = ''
+            }     
+
+            this.selectedOBItemTypeEnumsOrUnits.push({
+                'enumOrUnitID': enumOrUnitID,
+                'enumOrUnitLabel': enumOrUnitLabel,
+                'enumOrUnitDescription': enumOrUnitDescription
+            })
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style>
+#edit-form-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.create-element-container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.array-item-search-bar {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index 5992c1d..7595537 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,755 +1,755 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import * as JSONEditor from "../utils/JSONEditor.js";
-import * as miscUtilities from "../utils/miscUtilities";
-import FileSaver from "file-saver";
-import { version } from "../../package.json";
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  state: {
-    appVersion: version || 0,
-    uploadedOASFileOriginal: null,
-    schemaFile: null,
-    allNodesFlat: [],
-    allObjNodesFlat: [],
-    selectorFile: null,
-    isSelected: null,
-    nodeName: null,
-    nodeType: null,
-    nodeParent: null,
-    nodeParentTrail: null,
-    nodeDescription: null,
-    nodeEnum: null,
-    nameRef: null,
-    listOfDefinitionElements: [],
-    selectDefinitionNode: false,
-    showCreateDefinitionForm: false,
-    showLoadInDefinitionForm: false,
-    nodeToAddToObject: "",
-    nodeToAddListType: "",
-    superClassToRemoveFromObject: "",
-    refreshCreateDefn: false,
-    isSubClassedNode: false,
-
-    // controls if the ExportFormModal is showing or not
-    exportModalOpened: false,
-    xbrlFlat: [],
-
-    //tracks whether you are in the OAS tab or the XBRL tab
-    inOASTab: true,
-    inXBRLTab: false,
-
-    treeSearchTerm: "",
-
-    //tabs update
-    fileTabs: [],
-    currentTabIndexFileEditor: null,
-    currentFile: null,
-
-    //taxonomy element update
-    isTaxonomyElement: false,
-
-    // get rid of master Files. just have loadedFiles, which will include master files you can't delete
-
-    masterFiles: {},
-    loadedFiles: {},
-    selectedFileName: "",
-    selectedDefnRefFile: null,
-
-    fileToExport: null,
-    fileToExportName: "",
-    exportModalHeader: "",
-
-    defnIsLocal: null,
-
-    // right pane state while in editing mode
-    activeEditingView: "EditDefinitionFormDisabled",
-    // right pane state for views
-    activeEditorView: null,
-    // view state for Item Types Editor
-    activeItemTypesView: null,
-
-    // after abbrev update
-
-    nodeOBType: "",
-    nodeOBUsageTips: "",
-    nodeOBSampleValue: {},
-
-    // viewer mode option, can either be 'View Mode' or 'Edit Mode'
-    viewerMode: 'View Mode',
-    viewObjs: [],
-
-    // refresh key is needed to re-render element list when switching between edit and view modes
-    refreshKey: null,
-
-    // units added to obtaxonomy update
-    nodeEnumsOrUnitsObj: null,
-    nodeOBItemTypeGroupName: null,
-    nodeOBItemTypeGroupObj: {}
-  },
-  mutations: {
-    /*
-      Add sample value to object
-    */
-    addSampleValue(state, sampleValue) {
-      state.nodeOBSampleValue = sampleValue
-      // check if it is an allOf obj or a regular obj
-      // should move function to JSONEditor
-      // should use type to check if allOf, Obj or TaxElem
-      if (state.currentFile.file[state.isSelected]["allOf"]) {
-        for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-          if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-            state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-sample-value"] = sampleValue;
-          }
-        }
-      } else {
-        state.currentFile.file[state.isSelected]["x-ob-sample-value"] = sampleValue;
-      }
-    },
-    /*
-      Add usage tips to object
-    */
-    addUsageTips(state, usageTips) {
-      state.nodeOBUsageTips = usageTips
-      // check if it is an allOf obj or a regular obj
-      // should move function to JSONEditor
-      // should use type to check if allOf, Obj or TaxElem
-      if (state.currentFile.file[state.isSelected]["allOf"]) {
-        for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-          if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-            state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-usage-tips"] = usageTips;
-          }
-        }
-      } else {
-        state.currentFile.file[state.isSelected]["x-ob-usage-tips"] = usageTips;
-      }
-    },
-
-    /* 
-      Add enumeration to object
-    */
-    addEnumToObject(state, _enum) {
-      JSONEditor.addEnum(state.currentFile.file, state.isSelected, _enum);
-      state.nodeEnum = state.currentFile.file[state.isSelected]["enum"];
-      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-          if (state.currentFile.file[state.isSelected]["allOf"][i]["enum"]) {
-            state.nodeEnum =
-              state.currentFile.file[state.isSelected]["allOf"][i]["enum"];
-          }
-        }
-      }
-    },
-
-    /*
-      Remove enumeration from object
-    */
-    removeEnumFromObject(state, _enum) {
-      JSONEditor.removeEnum(state.currentFile.file, state.isSelected, _enum);
-
-      //check if empty enum array to set nodeEnum to null, will not react automatically for some reason
-      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-          if (!state.currentFile.file[state.isSelected]["allOf"][i]["enum"]) {
-            state.nodeEnum = null;
-          }
-        }
-      }
-    },
-
-    /*
-      Add member to object
-    */
-    addNodeToObject(state, payload) {
-      let parentDefnName = payload.parentName;
-      let childDefnName = payload.defnToAddName;
-      let childRefFile = state.loadedFiles[payload.referenceFileName];
-      let workingFile = state.currentFile;
-
-      JSONEditor.addChildToObject(
-        workingFile,
-        parentDefnName,
-        childDefnName,
-        childRefFile
-      );
-    },
-
-    /*
-      Edit definition 
-    */
-    editNode(state, payload) {
-      JSONEditor.editNode(
-        state.currentFile.file,
-        payload.nodeName,
-        payload.nodeDescription
-      );
-      state.nodeDescription = payload.nodeDescription;
-    },
-
-    /*
-      Add Inheritance
-    */
-    addSuperClass(state, payload) {
-      let workingFile = state.currentFile.file;
-      let subClassName = state.isSelected;
-      let superClassName = payload.superClassName;
-      let superClassRefFileName = payload.superClassRefFileName;
-
-      JSONEditor.addSuperClass(
-        workingFile,
-        subClassName,
-        superClassName,
-        superClassRefFileName,
-        state.loadedFiles
-      );
-    },
-
-    /*
-      Remove Inheritance
-    */
-    removeSuperClass(state, superClassName) {
-      JSONEditor.removeSuperClass(
-        state.currentFile.file,
-        state.isSelected,
-        superClassName
-      );
-    },
-
-    /*
-      Tree view handling
-    */
-    toggleSelectDefinitionNode(state) {
-      state.selectDefinitionNode = false;
-    },
-    selectNode(state, payload) {
-      state.isSelected = payload.nodeName;
-      state.nodeName = payload.nodeName;
-      state.nodeParent = payload.nodeParent;
-      state.nodeParentTrail = payload.nodeParentTrail;
-
-      state.nodeType = payload.nodeType;
-      state.nodeDescription = payload.nodeDescription;
-      state.nameRef = payload.nameRef;
-      state.isSubClassedNode = payload.isSubClassedNode;
-      state.isTaxonomyElement = payload.isTaxonomyElement;
-      state.selectedFileName = payload.selectedFileName;
-      state.defnIsLocal = payload.isLocal;
-
-      state.selectedDefnRefFile = payload.referenceFile;
-      state.activeEditingView = "EditDefinitionFormDisabled";
-
-      state.nodeEnumsOrUnitsObj = null
-      state.nodeOBType = ''
-      state.nodeOBItemTypeGroupName = ''
-      state.nodeOBItemTypeGroupObj = {}
-
-      if (state.selectedDefnRefFile[state.isSelected]["allOf"]) {
-        for (let i in state.selectedDefnRefFile[state.isSelected]["allOf"]) {
-          if (state.selectedDefnRefFile[state.isSelected]["allOf"][i]["type"]) {
-            if (
-              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-              "x-ob-item-type"
-              ]
-            ) {
-              state.nodeOBType =
-                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-                "x-ob-item-type"
-                ];
-            } else {
-              state.nodeOBType = "";
-            }
-
-            if ("x-ob-item-type-group" in state.selectedDefnRefFile[state.isSelected]["allOf"][i]
-              && state.selectedDefnRefFile[state.isSelected]["allOf"][i]["x-ob-item-type-group"]) {
-                state.nodeOBItemTypeGroupName = state.selectedDefnRefFile[state.isSelected]["allOf"][i]["x-ob-item-type-group"]
-              } else {
-                state.nodeOBItemTypeGroupName = ''
-              }
-
-            if (
-              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-              "x-ob-usage-tips"
-              ]
-            ) {
-              state.nodeOBUsageTips =
-                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-                "x-ob-usage-tips"
-                ];
-            } else {
-              state.nodeOBUsageTips = "";
-            }
-
-            if (
-              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-              "x-ob-sample-value"
-              ]
-            ) {
-              state.nodeOBSampleValue =
-                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
-                "x-ob-sample-value"
-                ];
-            } else {
-              state.nodeOBSampleValue = {};
-            }
-          }
-        }
-      } else if (state.selectedDefnRefFile[state.isSelected]["type"] == "object") {
-        if (
-          state.selectedDefnRefFile[state.isSelected][
-          "x-ob-usage-tips"
-          ]
-        ) {
-          state.nodeOBUsageTips =
-            state.selectedDefnRefFile[state.isSelected][
-            "x-ob-usage-tips"
-            ];
-        } else {
-          state.nodeOBUsageTips = "";
-        }
-        state.nodeOBType = "";
-      } else if (state.selectedDefnRefFile[state.isSelected]["type"] == "array") {
-        if (
-          state.selectedDefnRefFile[state.isSelected][
-          "x-ob-usage-tips"
-          ]
-        ) {
-          state.nodeOBUsageTips =
-            state.selectedDefnRefFile[state.isSelected][
-            "x-ob-usage-tips"
-            ];
-        } else {
-          state.nodeOBUsageTips = "";
-        }
-        state.nodeOBType = "";
-      } else {
-        state.nodeOBType = "";
-        state.nodeOBUsageTips = "";
-      }
-
-      // set nodeEnumsOrUnitsObj
-      if (state.nodeOBType && state.loadedFiles[state.selectedFileName]["item_types"]) {
-        state.nodeEnumsOrUnitsObj = state.loadedFiles[state.selectedFileName]["item_types"][state.nodeOBType]
-      }
-
-      // set node item type group obj
-      if (state.nodeOBItemTypeGroupName && state.loadedFiles[state.selectedFileName]["item_type_groups"]) {
-        state.nodeOBItemTypeGroupObj = state.loadedFiles[state.selectedFileName]["item_type_groups"][state.nodeOBItemTypeGroupName]
-      }
-    },
-
-    /*
-      Editor view handling
-    */
-    showDetailedView(state) {
-      state.activeEditorView = "DetailedNodeView"
-    },
-    showEditNodeView(state) {
-      state.activeEditorView = "EditDefinition"
-      state.selectDefinitionNode = true;
-    },
-    showCreateDefinitionForm(state) {
-      state.activeEditorView = "CreateDefinitionForm"
-    },
-    showLoadInDefinitionForm(state) {
-      state.activeEditorView = "LoadInDefinition"
-    },
-    showEditItemTypesMain(state) {
-      state.activeEditorView = "EditItemTypesMain"
-    },
-    showNoView(state) {
-      state.activeEditorView = null
-    },
-
-    // show state for Item Types Editor
-    // todo: consolidate into one function you pass the string to
-    showCreateItemType(state) {
-      state.activeItemTypesView = "CreateItemType"
-    },
-    showCreateItemTypeGroup(state) {
-      state.activeItemTypesView = "CreateItemTypeGroup"
-    },
-    showEditItemType(state) {
-      state.activeItemTypesView = "EditItemType"
-    },
-    showEditItemTypeGroup(state) {
-      state.activeItemTypesView = "EditItemTypeGroup"
-    },
-    showViewAllItemTypes(state) {
-      state.activeItemTypesView = "ViewAllItemTypes"
-    },
-    showViewAllItemTypeGroups(state) {
-      state.activeItemTypesView = "ViewAllItemTypeGroups"
-    },
-    showNoItemTypesViews(state) {
-      state.activeItemTypesView = null
-    },
-    showDeleteItemType(state) {
-      state.activeItemTypesView = "DeleteItemType"
-    },
-    showDeleteItemTypeGroup(state) {
-      state.activeItemTypesView = "DeleteItemTypeGroup"
-    },
-    /* 
-      JSON file handling
-    */
-    updateOriginalJSONFile(state, json_str) {
-      // uploadedOASFileOriginal is used for exporting
-      // schemaFile is used for referencing the schema object in uploadedOASFileOriginal
-      // schemaFile is used for referencing the definition object in schema in uploadedOASFileOriginal
-
-      state.uploadedOASFileOriginal = JSON.parse(json_str);
-      state.schemaFile = state.uploadedOASFileOriginal.components.schemas;
-
-      // replace all instances of schemaFile with schemaFile. schemaFile is no longer needed as we took out the definition obj.
-      // state.schemaFile = state.schemaFile
-      JSONEditor.createArrayOfAllElementDefinitions(
-        state.schemaFile,
-        state.listOfDefinitionElements
-      );
-    },
-    deleteNode(state, payload) {
-      if (state.nodeParent == "root") {
-        JSONEditor.deleteAllNodes(payload.currentFile, state.nodeName);
-      } else {
-        JSONEditor.deleteNode(
-          payload.currentFile,
-          payload.nodeName,
-          payload.parent
-        );
-      }
-    },
-    toggleSelectNode(state) {
-      state.isSelected = false;
-    },
-    createNodeElement(state, payload) {
-      let node_attr = {
-        type: payload.nodeType,
-        description: payload.nodeElementDescription
-      };
-      Vue.set(
-        state.schemaFile.definitions.properties,
-        payload.nodeName,
-        node_attr
-      );
-    },
-    exportFile(state, payload) {
-      let jsonFileToExport = new Blob(
-        [JSON.stringify(payload.file, null, 2)],
-        { type: "application/json" }
-      );
-      FileSaver.saveAs(jsonFileToExport, payload.filename + ".json");
-    },
-    selectNone(state) {
-      state.isSelected = null;
-      state.nodeName = null;
-      state.nodeType = null;
-      state.nodeDescription = null;
-      state.nameRef = null;
-    },
-    createNodeObject(state, payload) {
-      JSONEditor.createNodeObject(
-        state.schemaFile,
-        payload.objectName,
-        payload.objectDescription,
-        payload.elementForms
-      );
-    },
-    // todo: refactor createDefinition, remove repeated code around definition type
-    createDefinition(state, payload) {
-      let defn_attr = {};
-
-      if (payload.definitionType == "OB Object") {
-        defn_attr = {
-          type: "object",
-          description: payload.definitionDescription,
-          properties: {}
-        };
-      } else if (payload.definitionType == "OB Taxonomy Element String") {
-        defn_attr = {
-          allOf: [
-            {
-              $ref:
-                "Master-Solar-Taxonomy.json#/components/schemas/TaxonomyElementString"
-            },
-            {
-              type: "object",
-              description: payload.definitionDescription,
-              "x-ob-item-type": payload.OBItemType,
-              "x-ob-item-type-group": payload.OBItemTypeGroup,
-              "x-ob-usage-tips": payload.OBUsageTips,
-              "x-ob-sample-value": payload.OBSampleValue
-            }
-          ]
-        };
-      } else if (payload.definitionType == "OB Taxonomy Element Number") {
-        defn_attr = {
-          allOf: [
-            {
-              $ref:
-                "Master-Solar-Taxonomy.json#/components/schemas/TaxonomyElementNumber"
-            },
-            {
-              type: "object",
-              description: payload.definitionDescription,
-              "x-ob-item-type": payload.OBItemType,
-              "x-ob-item-type-group": payload.OBItemTypeGroup,
-              "x-ob-usage-tips": payload.OBUsageTips,
-              "x-ob-sample-value": payload.OBSampleValue
-            }
-          ]
-        };
-      } else if (payload.definitionType == "OB Taxonomy Element Integer") {
-        defn_attr = {
-          allOf: [
-            {
-              $ref:
-                "Master-Solar-Taxonomy.json#/components/schemas/TaxonomyElementInteger"
-            },
-            {
-              type: "object",
-              description: payload.definitionDescription,
-              "x-ob-item-type": payload.OBItemType,
-              "x-ob-item-type-group": payload.OBItemTypeGroup,
-              "x-ob-usage-tips": payload.OBUsageTips,
-              "x-ob-sample-value": payload.OBSampleValue
-            }
-          ]
-        };
-      } else if (payload.definitionType == "OB Taxonomy Element Boolean") {
-        defn_attr = {
-          allOf: [
-            {
-              $ref:
-                "Master-Solar-Taxonomy.json#/components/schemas/TaxonomyElementBoolean"
-            },
-            {
-              type: "object",
-              description: payload.definitionDescription,
-              "x-ob-item-type": payload.OBItemType,
-              "x-ob-item-type-group": payload.OBItemTypeGroup,
-              "x-ob-usage-tips": payload.OBUsageTips,
-              "x-ob-sample-value": payload.OBSampleValue
-            }
-          ]
-        };
-      } else if (payload.definitionType == "OB Array") {
-        let ref = ''
-        if (state.currentFile.fileName == payload.arrayItemFileName) {
-          ref = "#/components/schemas/" + payload.arrayItemDefnName
-        } else {
-          ref = payload.arrayItemFileName + "#/components/schemas/" + payload.arrayItemDefnName
-        }
-
-        defn_attr = {
-          type: "array",
-          items: {
-            $ref: ref
-          }
-        };
-      }
-
-      Vue.set(state.currentFile.file, payload.definitionName, defn_attr);
-    },
-    createItemType(state, payload) {
-      let finalItemTypeObj = {}
-      let finalEnumsOrUnits = {}
-      finalItemTypeObj['description'] = payload.itemTypeDescription
-
-      payload.itemTypeEnumsOrUnits.forEach( enumOrUnitObj => {
-        finalEnumsOrUnits[enumOrUnitObj['enumOrUnitID']] = {
-          "label": enumOrUnitObj['enumOrUnitLabel'],
-          "description": enumOrUnitObj['enumOrUnitDescription']
-        }
-      })
-
-      if (payload.itemTypeType == 'units') {
-        finalItemTypeObj['units'] = finalEnumsOrUnits
-      } else if (payload.itemTypeType == 'enums') {
-        finalItemTypeObj['enums'] = finalEnumsOrUnits
-      }
-
-      Vue.set(state.currentFile.item_types, payload.itemTypeName, finalItemTypeObj)
-
-    },
-    // edits the item type in the definiton file under obj 'x-ob-item-type'
-    editItemTypeDefn(state, payload) {
-      let finalEdittedItemTypeObj = {}
-      let finalEnumsOrUnits = {}
-
-      finalEdittedItemTypeObj['description'] = payload.itemTypeDescription
-      payload.itemTypeEnumsOrUnits.forEach( enumOrUnitObj => {
-        finalEnumsOrUnits[enumOrUnitObj['enumOrUnitID']] = {
-          "label": enumOrUnitObj['enumOrUnitLabel'],
-          "description": enumOrUnitObj['enumOrUnitDescription']
-        }
-      })
-
-      if (payload.itemTypeType == 'units') {
-        finalEdittedItemTypeObj['units'] = finalEnumsOrUnits
-      } else if (payload.itemTypeType == 'enums') {
-        finalEdittedItemTypeObj['enums'] = finalEnumsOrUnits
-      }
-      Vue.set(state.currentFile.item_types, payload.itemTypeName, finalEdittedItemTypeObj)
-
-    },
-    createItemTypeGroup(state, payload) {
-      let finalItemTypeGroupObj = {}
-      let finalEnumsOrUnits = []
-
-      if (payload.itemTypeGroupGroup.length) {
-        payload.itemTypeGroupGroup.forEach( enumOrUnitObj => {
-          finalEnumsOrUnits.push(enumOrUnitObj['enumOrUnitID'])
-        })
-      }
-
-      finalItemTypeGroupObj = {
-        "type": payload.baseItemTypeRef,
-        "description": payload.itemTypeGroupDescription,
-        "group" : finalEnumsOrUnits
-      }
-
-      Vue.set(state.currentFile.item_type_groups, payload.itemTypeGroupName, finalItemTypeGroupObj)
-    },
-    editItemTypeGroup(state, payload) {
-      let finalEdittedItemTypeGroupObj = {}
-      let finalEnumsOrUnits = []
-
-      if (payload.itemTypeGroupGroup.length) {
-        payload.itemTypeGroupGroup.forEach( enumOrUnitObj => {
-          finalEnumsOrUnits.push(enumOrUnitObj['enumOrUnitID'])
-        })
-      }
-
-      finalEdittedItemTypeGroupObj = {
-        "type": payload.baseItemTypeRef,
-        "description": payload.itemTypeGroupDescription,
-        "group" : finalEnumsOrUnits
-      }
-
-      Vue.set(state.currentFile.item_type_groups, payload.itemTypeGroupName, finalEdittedItemTypeGroupObj)
-    },
-    deleteItemType(state, payload) {
-      Vue.delete(state.currentFile.item_types, payload.itemTypeToDelete[0]["itemType"])
-
-
-    },
-    deleteItemTypeGroup(state, payload) {
-      Vue.delete(state.currentFile.item_type_groups, payload.itemTypeGroupToDelete[0]["itemTypeGroupName"])
-
-
-    },
-    // Refreshes form inputs when trying to hit add definition after already adding a defn
-    refreshCreateDefnInputs(state, refreshBool) {
-      state.refreshCreateDefn = refreshBool;
-    },
-    setFileToExport(state, payload) {
-      state.fileToExport = payload.fileToExport;
-      state.fileToExportName = payload.fileToExportName;
-      state.exportModalHeader = payload.exportModalHeader;
-    },
-    setShowExportModal(state, payload) {
-      state.exportModalOpened = payload;
-    },
-    clearEditorView(state) {
-      state.activeEditorView = null
-      state.isSelected = null;
-      state.nameRef = null;
-    },
-
-    // when user loads in a file, it is put into the loadedFile object
-    // problem: what if someone loads in a file, references it in a new fiile, then unloads the old file. now the new file cant reference the old
-    loadFile(state, file) {
-      state.loadedFiles[file.fileName] = file;
-    },
-    removeFile(state, fileName) {
-      if (
-        !(
-          fileName == "Master-Solar-Taxonomy.json" ||
-          fileName == "Master-OB-OpenAPI.json"
-        )
-      ) {
-        delete state.loadedFiles[fileName];
-      }
-    },
-    loadInDefinition(state, payload) {
-      let defnName = payload.defnName;
-      let defnFile = payload.defnFile;
-      let currentFile = state.currentFile.file;
-
-      JSONEditor.loadInDefinition(currentFile, defnName, defnFile);
-    },
-    changeItemType(state, payload) {
-
-      state.nodeOBType = payload.OBItemType;
-
-      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-          Vue.set(
-            state.currentFile.file[state.isSelected]["allOf"][i],
-            "x-ob-item-type",
-            payload.OBItemType
-          )
-          state.nodeEnumsOrUnitsObj = state.loadedFiles[state.selectedFileName]["item_types"][state.nodeOBType]
-
-          // if item group for element does not match
-          if ("x-ob-item-type-group" in state.currentFile.file[state.isSelected]["allOf"][i]
-            && state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-item-type-group"]) {
-              let currentItemTypeGroup = state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-item-type-group"]
-              if (!state.loadedFiles[state.selectedFileName]["item_type_groups"][currentItemTypeGroup]['type'].includes(payload.OBItemType)) {
-                Vue.set(
-                  state.currentFile.file[state.isSelected]["allOf"][i],
-                  "x-ob-item-type-group",
-                  ''
-                )
-                state.nodeOBItemTypeGroupName = ''
-                state.nodeOBItemTypeGroupObj = {}
-              }
-            }
-        }
-      }
-    },
-    changeItemTypeGroup(state, payload) {
-      state.nodeOBItemTypeGroupName = payload.OBItemTypeGroupName
-      state.nodeOBItemTypeGroupObj = {}
-      if (payload.OBItemTypeGroupName) {
-        state.nodeOBItemTypeGroupObj = state.loadedFiles[state.selectedFileName]["item_type_groups"][state.nodeOBItemTypeGroupName]
-      }
-
-      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
-        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
-          Vue.set(
-            state.currentFile.file[state.isSelected]["allOf"][i],
-            "x-ob-item-type-group",
-            payload.OBItemTypeGroupName
-          )          
-        }
-      }
-    },
-    changeViewerMode(state, mode) {
-      state.viewerMode = mode
-    },
-    // params:
-    // el: name of element to add or remove
-    // mode: 'init' or 'create_cookie'; init is for reading cookies when the app inits
-    addViewObj(state, params) {
-      state.viewObjs.push(params['el'])
-      if (params['mode'] == 'create_cookie') 
-        miscUtilities.createCookie('viewObjs', JSON.stringify(state.viewObjs), 500)
-    },
-    removeViewObj(state, params) {
-      for (let i = 0; i < state.viewObjs.length; i++) {
-        if (params['el'] == state.viewObjs[i]) {
-          state.viewObjs.splice(i, 1)
-          break;
-        }
-      }
-      miscUtilities.createCookie('viewObjs', JSON.stringify(state.viewObjs), 500)
-    },
-
-    // rerenders node list
-    reRenderList(state) {
-      state.refreshKey = Math.floor((Math.random() * 100) + 1).toString()
-    },
-  }
-});
+import Vue from "vue";
+import Vuex from "vuex";
+import * as JSONEditor from "../utils/JSONEditor.js";
+import * as miscUtilities from "../utils/miscUtilities";
+import FileSaver from "file-saver";
+import { version } from "../../package.json";
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    appVersion: version || 0,
+    uploadedOASFileOriginal: null,
+    schemaFile: null,
+    allNodesFlat: [],
+    allObjNodesFlat: [],
+    selectorFile: null,
+    isSelected: null,
+    nodeName: null,
+    nodeType: null,
+    nodeParent: null,
+    nodeParentTrail: null,
+    nodeDescription: null,
+    nodeEnum: null,
+    nameRef: null,
+    listOfDefinitionElements: [],
+    selectDefinitionNode: false,
+    showCreateDefinitionForm: false,
+    showLoadInDefinitionForm: false,
+    nodeToAddToObject: "",
+    nodeToAddListType: "",
+    superClassToRemoveFromObject: "",
+    refreshCreateDefn: false,
+    isSubClassedNode: false,
+
+    // controls if the ExportFormModal is showing or not
+    exportModalOpened: false,
+    xbrlFlat: [],
+
+    //tracks whether you are in the OAS tab or the XBRL tab
+    inOASTab: true,
+    inXBRLTab: false,
+
+    treeSearchTerm: "",
+
+    //tabs update
+    fileTabs: [],
+    currentTabIndexFileEditor: null,
+    currentFile: null,
+
+    //taxonomy element update
+    isTaxonomyElement: false,
+
+    // get rid of master Files. just have loadedFiles, which will include master files you can't delete
+
+    masterFiles: {},
+    loadedFiles: {},
+    selectedFileName: "",
+    selectedDefnRefFile: null,
+
+    fileToExport: null,
+    fileToExportName: "",
+    exportModalHeader: "",
+
+    defnIsLocal: null,
+
+    // right pane state while in editing mode
+    activeEditingView: "EditDefinitionFormDisabled",
+    // right pane state for views
+    activeEditorView: null,
+    // view state for Item Types Editor
+    activeItemTypesView: null,
+
+    // after abbrev update
+
+    nodeOBType: "",
+    nodeOBUsageTips: "",
+    nodeOBSampleValue: {},
+
+    // viewer mode option, can either be 'View Mode' or 'Edit Mode'
+    viewerMode: 'View Mode',
+    viewObjs: [],
+
+    // refresh key is needed to re-render element list when switching between edit and view modes
+    refreshKey: null,
+
+    // units added to obtaxonomy update
+    nodeEnumsOrUnitsObj: null,
+    nodeOBItemTypeGroupName: null,
+    nodeOBItemTypeGroupObj: {}
+  },
+  mutations: {
+    /*
+      Add sample value to object
+    */
+    addSampleValue(state, sampleValue) {
+      state.nodeOBSampleValue = sampleValue
+      // check if it is an allOf obj or a regular obj
+      // should move function to JSONEditor
+      // should use type to check if allOf, Obj or TaxElem
+      if (state.currentFile.file[state.isSelected]["allOf"]) {
+        for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+          if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+            state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-sample-value"] = sampleValue;
+          }
+        }
+      } else {
+        state.currentFile.file[state.isSelected]["x-ob-sample-value"] = sampleValue;
+      }
+    },
+    /*
+      Add usage tips to object
+    */
+    addUsageTips(state, usageTips) {
+      state.nodeOBUsageTips = usageTips
+      // check if it is an allOf obj or a regular obj
+      // should move function to JSONEditor
+      // should use type to check if allOf, Obj or TaxElem
+      if (state.currentFile.file[state.isSelected]["allOf"]) {
+        for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+          if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+            state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-usage-tips"] = usageTips;
+          }
+        }
+      } else {
+        state.currentFile.file[state.isSelected]["x-ob-usage-tips"] = usageTips;
+      }
+    },
+
+    /* 
+      Add enumeration to object
+    */
+    addEnumToObject(state, _enum) {
+      JSONEditor.addEnum(state.currentFile.file, state.isSelected, _enum);
+      state.nodeEnum = state.currentFile.file[state.isSelected]["enum"];
+      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+          if (state.currentFile.file[state.isSelected]["allOf"][i]["enum"]) {
+            state.nodeEnum =
+              state.currentFile.file[state.isSelected]["allOf"][i]["enum"];
+          }
+        }
+      }
+    },
+
+    /*
+      Remove enumeration from object
+    */
+    removeEnumFromObject(state, _enum) {
+      JSONEditor.removeEnum(state.currentFile.file, state.isSelected, _enum);
+
+      //check if empty enum array to set nodeEnum to null, will not react automatically for some reason
+      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+          if (!state.currentFile.file[state.isSelected]["allOf"][i]["enum"]) {
+            state.nodeEnum = null;
+          }
+        }
+      }
+    },
+
+    /*
+      Add member to object
+    */
+    addNodeToObject(state, payload) {
+      let parentDefnName = payload.parentName;
+      let childDefnName = payload.defnToAddName;
+      let childRefFile = state.loadedFiles[payload.referenceFileName];
+      let workingFile = state.currentFile;
+
+      JSONEditor.addChildToObject(
+        workingFile,
+        parentDefnName,
+        childDefnName,
+        childRefFile
+      );
+    },
+
+    /*
+      Edit definition 
+    */
+    editNode(state, payload) {
+      JSONEditor.editNode(
+        state.currentFile.file,
+        payload.nodeName,
+        payload.nodeDescription
+      );
+      state.nodeDescription = payload.nodeDescription;
+    },
+
+    /*
+      Add Inheritance
+    */
+    addSuperClass(state, payload) {
+      let workingFile = state.currentFile.file;
+      let subClassName = state.isSelected;
+      let superClassName = payload.superClassName;
+      let superClassRefFileName = payload.superClassRefFileName;
+
+      JSONEditor.addSuperClass(
+        workingFile,
+        subClassName,
+        superClassName,
+        superClassRefFileName,
+        state.loadedFiles
+      );
+    },
+
+    /*
+      Remove Inheritance
+    */
+    removeSuperClass(state, superClassName) {
+      JSONEditor.removeSuperClass(
+        state.currentFile.file,
+        state.isSelected,
+        superClassName
+      );
+    },
+
+    /*
+      Tree view handling
+    */
+    toggleSelectDefinitionNode(state) {
+      state.selectDefinitionNode = false;
+    },
+    selectNode(state, payload) {
+      state.isSelected = payload.nodeName;
+      state.nodeName = payload.nodeName;
+      state.nodeParent = payload.nodeParent;
+      state.nodeParentTrail = payload.nodeParentTrail;
+
+      state.nodeType = payload.nodeType;
+      state.nodeDescription = payload.nodeDescription;
+      state.nameRef = payload.nameRef;
+      state.isSubClassedNode = payload.isSubClassedNode;
+      state.isTaxonomyElement = payload.isTaxonomyElement;
+      state.selectedFileName = payload.selectedFileName;
+      state.defnIsLocal = payload.isLocal;
+
+      state.selectedDefnRefFile = payload.referenceFile;
+      state.activeEditingView = "EditDefinitionFormDisabled";
+
+      state.nodeEnumsOrUnitsObj = null
+      state.nodeOBType = ''
+      state.nodeOBItemTypeGroupName = ''
+      state.nodeOBItemTypeGroupObj = {}
+
+      if (state.selectedDefnRefFile[state.isSelected]["allOf"]) {
+        for (let i in state.selectedDefnRefFile[state.isSelected]["allOf"]) {
+          if (state.selectedDefnRefFile[state.isSelected]["allOf"][i]["type"]) {
+            if (
+              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+              "x-ob-item-type"
+              ]
+            ) {
+              state.nodeOBType =
+                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+                "x-ob-item-type"
+                ];
+            } else {
+              state.nodeOBType = "";
+            }
+
+            if ("x-ob-item-type-group" in state.selectedDefnRefFile[state.isSelected]["allOf"][i]
+              && state.selectedDefnRefFile[state.isSelected]["allOf"][i]["x-ob-item-type-group"]) {
+                state.nodeOBItemTypeGroupName = state.selectedDefnRefFile[state.isSelected]["allOf"][i]["x-ob-item-type-group"]
+              } else {
+                state.nodeOBItemTypeGroupName = ''
+              }
+
+            if (
+              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+              "x-ob-usage-tips"
+              ]
+            ) {
+              state.nodeOBUsageTips =
+                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+                "x-ob-usage-tips"
+                ];
+            } else {
+              state.nodeOBUsageTips = "";
+            }
+
+            if (
+              state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+              "x-ob-sample-value"
+              ]
+            ) {
+              state.nodeOBSampleValue =
+                state.selectedDefnRefFile[state.isSelected]["allOf"][i][
+                "x-ob-sample-value"
+                ];
+            } else {
+              state.nodeOBSampleValue = {};
+            }
+          }
+        }
+      } else if (state.selectedDefnRefFile[state.isSelected]["type"] == "object") {
+        if (
+          state.selectedDefnRefFile[state.isSelected][
+          "x-ob-usage-tips"
+          ]
+        ) {
+          state.nodeOBUsageTips =
+            state.selectedDefnRefFile[state.isSelected][
+            "x-ob-usage-tips"
+            ];
+        } else {
+          state.nodeOBUsageTips = "";
+        }
+        state.nodeOBType = "";
+      } else if (state.selectedDefnRefFile[state.isSelected]["type"] == "array") {
+        if (
+          state.selectedDefnRefFile[state.isSelected][
+          "x-ob-usage-tips"
+          ]
+        ) {
+          state.nodeOBUsageTips =
+            state.selectedDefnRefFile[state.isSelected][
+            "x-ob-usage-tips"
+            ];
+        } else {
+          state.nodeOBUsageTips = "";
+        }
+        state.nodeOBType = "";
+      } else {
+        state.nodeOBType = "";
+        state.nodeOBUsageTips = "";
+      }
+
+      // set nodeEnumsOrUnitsObj
+      if (state.nodeOBType && state.loadedFiles[state.selectedFileName]["item_types"]) {
+        state.nodeEnumsOrUnitsObj = state.loadedFiles[state.selectedFileName]["item_types"][state.nodeOBType]
+      }
+
+      // set node item type group obj
+      if (state.nodeOBItemTypeGroupName && state.loadedFiles[state.selectedFileName]["item_type_groups"]) {
+        state.nodeOBItemTypeGroupObj = state.loadedFiles[state.selectedFileName]["item_type_groups"][state.nodeOBItemTypeGroupName]
+      }
+    },
+
+    /*
+      Editor view handling
+    */
+    showDetailedView(state) {
+      state.activeEditorView = "DetailedNodeView"
+    },
+    showEditNodeView(state) {
+      state.activeEditorView = "EditDefinition"
+      state.selectDefinitionNode = true;
+    },
+    showCreateDefinitionForm(state) {
+      state.activeEditorView = "CreateDefinitionForm"
+    },
+    showLoadInDefinitionForm(state) {
+      state.activeEditorView = "LoadInDefinition"
+    },
+    showEditItemTypesMain(state) {
+      state.activeEditorView = "EditItemTypesMain"
+    },
+    showNoView(state) {
+      state.activeEditorView = null
+    },
+
+    // show state for Item Types Editor
+    // todo: consolidate into one function you pass the string to
+    showCreateItemType(state) {
+      state.activeItemTypesView = "CreateItemType"
+    },
+    showCreateItemTypeGroup(state) {
+      state.activeItemTypesView = "CreateItemTypeGroup"
+    },
+    showEditItemType(state) {
+      state.activeItemTypesView = "EditItemType"
+    },
+    showEditItemTypeGroup(state) {
+      state.activeItemTypesView = "EditItemTypeGroup"
+    },
+    showViewAllItemTypes(state) {
+      state.activeItemTypesView = "ViewAllItemTypes"
+    },
+    showViewAllItemTypeGroups(state) {
+      state.activeItemTypesView = "ViewAllItemTypeGroups"
+    },
+    showNoItemTypesViews(state) {
+      state.activeItemTypesView = null
+    },
+    showDeleteItemType(state) {
+      state.activeItemTypesView = "DeleteItemType"
+    },
+    showDeleteItemTypeGroup(state) {
+      state.activeItemTypesView = "DeleteItemTypeGroup"
+    },
+    /* 
+      JSON file handling
+    */
+    updateOriginalJSONFile(state, json_str) {
+      // uploadedOASFileOriginal is used for exporting
+      // schemaFile is used for referencing the schema object in uploadedOASFileOriginal
+      // schemaFile is used for referencing the definition object in schema in uploadedOASFileOriginal
+
+      state.uploadedOASFileOriginal = JSON.parse(json_str);
+      state.schemaFile = state.uploadedOASFileOriginal.components.schemas;
+
+      // replace all instances of schemaFile with schemaFile. schemaFile is no longer needed as we took out the definition obj.
+      // state.schemaFile = state.schemaFile
+      JSONEditor.createArrayOfAllElementDefinitions(
+        state.schemaFile,
+        state.listOfDefinitionElements
+      );
+    },
+    deleteNode(state, payload) {
+      if (state.nodeParent == "root") {
+        JSONEditor.deleteAllNodes(payload.currentFile, state.nodeName);
+      } else {
+        JSONEditor.deleteNode(
+          payload.currentFile,
+          payload.nodeName,
+          payload.parent
+        );
+      }
+    },
+    toggleSelectNode(state) {
+      state.isSelected = false;
+    },
+    createNodeElement(state, payload) {
+      let node_attr = {
+        type: payload.nodeType,
+        description: payload.nodeElementDescription
+      };
+      Vue.set(
+        state.schemaFile.definitions.properties,
+        payload.nodeName,
+        node_attr
+      );
+    },
+    exportFile(state, payload) {
+      let jsonFileToExport = new Blob(
+        [JSON.stringify(payload.file, null, 2)],
+        { type: "application/json" }
+      );
+      FileSaver.saveAs(jsonFileToExport, payload.filename + ".json");
+    },
+    selectNone(state) {
+      state.isSelected = null;
+      state.nodeName = null;
+      state.nodeType = null;
+      state.nodeDescription = null;
+      state.nameRef = null;
+    },
+    createNodeObject(state, payload) {
+      JSONEditor.createNodeObject(
+        state.schemaFile,
+        payload.objectName,
+        payload.objectDescription,
+        payload.elementForms
+      );
+    },
+    // todo: refactor createDefinition, remove repeated code around definition type
+    createDefinition(state, payload) {
+      let defn_attr = {};
+
+      if (payload.definitionType == "OB Object") {
+        defn_attr = {
+          type: "object",
+          description: payload.definitionDescription,
+          properties: {}
+        };
+      } else if (payload.definitionType == "OB Taxonomy Element String") {
+        defn_attr = {
+          allOf: [
+            {
+              $ref:
+                "#/components/schemas/TaxonomyElementString"
+            },
+            {
+              type: "object",
+              description: payload.definitionDescription,
+              "x-ob-item-type": payload.OBItemType,
+              "x-ob-item-type-group": payload.OBItemTypeGroup,
+              "x-ob-usage-tips": payload.OBUsageTips,
+              "x-ob-sample-value": payload.OBSampleValue
+            }
+          ]
+        };
+      } else if (payload.definitionType == "OB Taxonomy Element Number") {
+        defn_attr = {
+          allOf: [
+            {
+              $ref:
+                "#/components/schemas/TaxonomyElementNumber"
+            },
+            {
+              type: "object",
+              description: payload.definitionDescription,
+              "x-ob-item-type": payload.OBItemType,
+              "x-ob-item-type-group": payload.OBItemTypeGroup,
+              "x-ob-usage-tips": payload.OBUsageTips,
+              "x-ob-sample-value": payload.OBSampleValue
+            }
+          ]
+        };
+      } else if (payload.definitionType == "OB Taxonomy Element Integer") {
+        defn_attr = {
+          allOf: [
+            {
+              $ref:
+                "#/components/schemas/TaxonomyElementInteger"
+            },
+            {
+              type: "object",
+              description: payload.definitionDescription,
+              "x-ob-item-type": payload.OBItemType,
+              "x-ob-item-type-group": payload.OBItemTypeGroup,
+              "x-ob-usage-tips": payload.OBUsageTips,
+              "x-ob-sample-value": payload.OBSampleValue
+            }
+          ]
+        };
+      } else if (payload.definitionType == "OB Taxonomy Element Boolean") {
+        defn_attr = {
+          allOf: [
+            {
+              $ref:
+                "#/components/schemas/TaxonomyElementBoolean"
+            },
+            {
+              type: "object",
+              description: payload.definitionDescription,
+              "x-ob-item-type": payload.OBItemType,
+              "x-ob-item-type-group": payload.OBItemTypeGroup,
+              "x-ob-usage-tips": payload.OBUsageTips,
+              "x-ob-sample-value": payload.OBSampleValue
+            }
+          ]
+        };
+      } else if (payload.definitionType == "OB Array") {
+        let ref = ''
+        if (state.currentFile.fileName == payload.arrayItemFileName) {
+          ref = "#/components/schemas/" + payload.arrayItemDefnName
+        } else {
+          ref = payload.arrayItemFileName + "#/components/schemas/" + payload.arrayItemDefnName
+        }
+
+        defn_attr = {
+          type: "array",
+          items: {
+            $ref: ref
+          }
+        };
+      }
+
+      Vue.set(state.currentFile.file, payload.definitionName, defn_attr);
+    },
+    createItemType(state, payload) {
+      let finalItemTypeObj = {}
+      let finalEnumsOrUnits = {}
+      finalItemTypeObj['description'] = payload.itemTypeDescription
+
+      payload.itemTypeEnumsOrUnits.forEach( enumOrUnitObj => {
+        finalEnumsOrUnits[enumOrUnitObj['enumOrUnitID']] = {
+          "label": enumOrUnitObj['enumOrUnitLabel'],
+          "description": enumOrUnitObj['enumOrUnitDescription']
+        }
+      })
+
+      if (payload.itemTypeType == 'units') {
+        finalItemTypeObj['units'] = finalEnumsOrUnits
+      } else if (payload.itemTypeType == 'enums') {
+        finalItemTypeObj['enums'] = finalEnumsOrUnits
+      }
+
+      Vue.set(state.currentFile.item_types, payload.itemTypeName, finalItemTypeObj)
+
+    },
+    // edits the item type in the definiton file under obj 'x-ob-item-type'
+    editItemTypeDefn(state, payload) {
+      let finalEdittedItemTypeObj = {}
+      let finalEnumsOrUnits = {}
+
+      finalEdittedItemTypeObj['description'] = payload.itemTypeDescription
+      payload.itemTypeEnumsOrUnits.forEach( enumOrUnitObj => {
+        finalEnumsOrUnits[enumOrUnitObj['enumOrUnitID']] = {
+          "label": enumOrUnitObj['enumOrUnitLabel'],
+          "description": enumOrUnitObj['enumOrUnitDescription']
+        }
+      })
+
+      if (payload.itemTypeType == 'units') {
+        finalEdittedItemTypeObj['units'] = finalEnumsOrUnits
+      } else if (payload.itemTypeType == 'enums') {
+        finalEdittedItemTypeObj['enums'] = finalEnumsOrUnits
+      }
+      Vue.set(state.currentFile.item_types, payload.itemTypeName, finalEdittedItemTypeObj)
+
+    },
+    createItemTypeGroup(state, payload) {
+      let finalItemTypeGroupObj = {}
+      let finalEnumsOrUnits = []
+
+      if (payload.itemTypeGroupGroup.length) {
+        payload.itemTypeGroupGroup.forEach( enumOrUnitObj => {
+          finalEnumsOrUnits.push(enumOrUnitObj['enumOrUnitID'])
+        })
+      }
+
+      finalItemTypeGroupObj = {
+        "type": payload.baseItemTypeRef,
+        "description": payload.itemTypeGroupDescription,
+        "group" : finalEnumsOrUnits
+      }
+
+      Vue.set(state.currentFile.item_type_groups, payload.itemTypeGroupName, finalItemTypeGroupObj)
+    },
+    editItemTypeGroup(state, payload) {
+      let finalEdittedItemTypeGroupObj = {}
+      let finalEnumsOrUnits = []
+
+      if (payload.itemTypeGroupGroup.length) {
+        payload.itemTypeGroupGroup.forEach( enumOrUnitObj => {
+          finalEnumsOrUnits.push(enumOrUnitObj['enumOrUnitID'])
+        })
+      }
+
+      finalEdittedItemTypeGroupObj = {
+        "type": payload.baseItemTypeRef,
+        "description": payload.itemTypeGroupDescription,
+        "group" : finalEnumsOrUnits
+      }
+
+      Vue.set(state.currentFile.item_type_groups, payload.itemTypeGroupName, finalEdittedItemTypeGroupObj)
+    },
+    deleteItemType(state, payload) {
+      Vue.delete(state.currentFile.item_types, payload.itemTypeToDelete[0]["itemType"])
+
+
+    },
+    deleteItemTypeGroup(state, payload) {
+      Vue.delete(state.currentFile.item_type_groups, payload.itemTypeGroupToDelete[0]["itemTypeGroupName"])
+
+
+    },
+    // Refreshes form inputs when trying to hit add definition after already adding a defn
+    refreshCreateDefnInputs(state, refreshBool) {
+      state.refreshCreateDefn = refreshBool;
+    },
+    setFileToExport(state, payload) {
+      state.fileToExport = payload.fileToExport;
+      state.fileToExportName = payload.fileToExportName;
+      state.exportModalHeader = payload.exportModalHeader;
+    },
+    setShowExportModal(state, payload) {
+      state.exportModalOpened = payload;
+    },
+    clearEditorView(state) {
+      state.activeEditorView = null
+      state.isSelected = null;
+      state.nameRef = null;
+    },
+
+    // when user loads in a file, it is put into the loadedFile object
+    // problem: what if someone loads in a file, references it in a new fiile, then unloads the old file. now the new file cant reference the old
+    loadFile(state, file) {
+      state.loadedFiles[file.fileName] = file;
+    },
+    removeFile(state, fileName) {
+      if (
+        !(
+          fileName == "Master-Solar-Taxonomy.json" ||
+          fileName == "Master-OB-OpenAPI.json"
+        )
+      ) {
+        delete state.loadedFiles[fileName];
+      }
+    },
+    loadInDefinition(state, payload) {
+      let defnNameToLoad = payload.defnName;
+      let defnFileToLoadFrom = state.loadedFiles[payload.defnFile]["file"]
+      let currentFile = state.currentFile.file;
+
+      JSONEditor.loadInDefinition(currentFile, defnNameToLoad, defnFileToLoadFrom);
+    },
+    changeItemType(state, payload) {
+
+      state.nodeOBType = payload.OBItemType;
+
+      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+          Vue.set(
+            state.currentFile.file[state.isSelected]["allOf"][i],
+            "x-ob-item-type",
+            payload.OBItemType
+          )
+          state.nodeEnumsOrUnitsObj = state.loadedFiles[state.selectedFileName]["item_types"][state.nodeOBType]
+
+          // if item group for element does not match
+          if ("x-ob-item-type-group" in state.currentFile.file[state.isSelected]["allOf"][i]
+            && state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-item-type-group"]) {
+              let currentItemTypeGroup = state.currentFile.file[state.isSelected]["allOf"][i]["x-ob-item-type-group"]
+              if (!state.loadedFiles[state.selectedFileName]["item_type_groups"][currentItemTypeGroup]['type'].includes(payload.OBItemType)) {
+                Vue.set(
+                  state.currentFile.file[state.isSelected]["allOf"][i],
+                  "x-ob-item-type-group",
+                  ''
+                )
+                state.nodeOBItemTypeGroupName = ''
+                state.nodeOBItemTypeGroupObj = {}
+              }
+            }
+        }
+      }
+    },
+    changeItemTypeGroup(state, payload) {
+      state.nodeOBItemTypeGroupName = payload.OBItemTypeGroupName
+      state.nodeOBItemTypeGroupObj = {}
+      if (payload.OBItemTypeGroupName) {
+        state.nodeOBItemTypeGroupObj = state.loadedFiles[state.selectedFileName]["item_type_groups"][state.nodeOBItemTypeGroupName]
+      }
+
+      for (let i in state.currentFile.file[state.isSelected]["allOf"]) {
+        if (state.currentFile.file[state.isSelected]["allOf"][i]["type"]) {
+          Vue.set(
+            state.currentFile.file[state.isSelected]["allOf"][i],
+            "x-ob-item-type-group",
+            payload.OBItemTypeGroupName
+          )          
+        }
+      }
+    },
+    changeViewerMode(state, mode) {
+      state.viewerMode = mode
+    },
+    // params:
+    // el: name of element to add or remove
+    // mode: 'init' or 'create_cookie'; init is for reading cookies when the app inits
+    addViewObj(state, params) {
+      state.viewObjs.push(params['el'])
+      if (params['mode'] == 'create_cookie') 
+        miscUtilities.createCookie('viewObjs', JSON.stringify(state.viewObjs), 500)
+    },
+    removeViewObj(state, params) {
+      for (let i = 0; i < state.viewObjs.length; i++) {
+        if (params['el'] == state.viewObjs[i]) {
+          state.viewObjs.splice(i, 1)
+          break;
+        }
+      }
+      miscUtilities.createCookie('viewObjs', JSON.stringify(state.viewObjs), 500)
+    },
+
+    // rerenders node list
+    reRenderList(state) {
+      state.refreshKey = Math.floor((Math.random() * 100) + 1).toString()
+    },
+  }
+});
diff --git a/src/utils/JSONEditor.js b/src/utils/JSONEditor.js
index b699713..df302d8 100644
--- a/src/utils/JSONEditor.js
+++ b/src/utils/JSONEditor.js
@@ -1,316 +1,411 @@
-/*
-
-JSONEditor.js contains functions related to manipulating OAS JSON files
-
-*/
-
-import Vue from "vue";
-import Vuex from "vuex";
-import * as miscUtilities from "./miscUtilities.js";
-import newFileTemplate from "../assets/OB-OpenAPI-New-File-Template.json";
-
-// Deletes all nodes recursively of the same node name
-// used for deleting definition elements
-export function deleteAllNodes(JSONFile, nodeName) {
-  Object.keys(JSONFile).forEach(key => {
-    if (key == nodeName) {
-      Vue.delete(JSONFile, key);
-    } else if (JSONFile[key].properties) {
-      if (JSONFile[key]["properties"][nodeName]) {
-        Vue.delete(JSONFile[key].properties, nodeName);
-      }
-    } else if (JSONFile[key]["allOf"]) {
-      for (let i in JSONFile[key]["allOf"]) {
-        if (JSONFile[key]["allOf"][i]["properties"]) {
-          if (JSONFile[key]["allOf"][i]["properties"][nodeName]) {
-            Vue.delete(JSONFile[key]["allOf"][i]["properties"], nodeName);
-          }
-        }
-        if (JSONFile[key]["allOf"][i]["$ref"]) {
-          let superClassName = JSONFile[key]["allOf"][i]["$ref"].slice(
-            JSONFile[key]["allOf"][i]["$ref"].lastIndexOf("/") + 1,
-            JSONFile[key]["allOf"][i]["$ref"].length
-          );
-          if (superClassName == nodeName) {
-            Vue.delete(JSONFile[key]["allOf"], i);
-          }
-        }
-      }
-    }
-  });
-}
-
-//Remove single node from object. Removes every instance of the node which is in the object
-export function deleteNode(JSONFile, nodeName, parentName) {
-  if (parentName == "root") {
-    Vue.delete(JSONFile, nodeName);
-    for (let i in JSONFile) {
-      if (JSONFile[i]["properties"]) {
-        if (JSONFile[i]["properties"][nodeName]) {
-          Vue.delete(JSONFile[i]["properties"], nodeName);
-        }
-      } else if (JSONFile[i]["allOf"]) {
-        for (let j in JSONFile[i]["allOf"]) {
-          if (JSONFile[i]["allOf"][j]["$ref"]) {
-            for (let k in JSONFile[i]["allOf"][j]["$ref"]) {
-              let superClassSubStringIndex =
-                JSONFile[i]["allOf"][j]["$ref"][k].lastIndexOf("/") + 1;
-              let superClassSubString = JSONFile[i]["allOf"][j]["$ref"][
-                k
-              ].slice(superClassSubStringIndex);
-              if (superClassSubString == nodeName) {
-                Vue.delete(JSONFile[i]["allOf"][j]["$ref"], k);
-              }
-            }
-          } else if (JSONFile[i]["allOf"][j]["properties"]) {
-            if (JSONFile[i]["allOf"][j]["properties"][nodeName]) {
-              Vue.delete(JSONFile[i]["allOf"][j]["properties"], nodeName);
-            }
-          }
-        }
-      }
-    }
-  } else {
-    if (JSONFile[parentName]["properties"]) {
-      Vue.delete(JSONFile[parentName]["properties"], nodeName);
-    } else {
-      for (let i in JSONFile[parentName]["allOf"]) {
-        if (JSONFile[parentName]["allOf"][i]["properties"]) {
-          Vue.delete(JSONFile[parentName]["allOf"][i]["properties"], nodeName);
-        }
-      }
-    }
-  }
-}
-
-//Edit node
-export function editNode(JSONFile, nodeName, newDescription) {
-  let nodeEdit = {
-    description: newDescription
-  };
-  if (miscUtilities.hasInheritance(JSONFile[nodeName])) {
-    for (let i in JSONFile[nodeName]["allOf"]) {
-      if (JSONFile[nodeName]["allOf"][i]["type"]) {
-        JSONFile[nodeName]["allOf"][i]["description"] = newDescription;
-      }
-    }
-  } else if (JSONFile[nodeName]["type"] == "object") {
-    nodeEdit.properties = JSONFile[nodeName]["properties"];
-    nodeEdit.type = "object";
-    Vue.set(JSONFile, nodeName, nodeEdit);
-  } else {
-    Vue.set(JSONFile, nodeName, nodeEdit);
-  }
-}
-
-//Create node
-export function createNodeElement(
-  JSONFile,
-  nodeName,
-  nodeType,
-  nodeDescription
-) {
-  let node_attr = {
-    type: nodeType,
-    description: nodeDescription
-  };
-  Vue.set(JSONFile, nodeName, node_attr);
-}
-
-//Create object
-export function createNodeObject(
-  JSONFile,
-  objectName,
-  objectDescription,
-  elementForms
-) {
-  let properties = {};
-  for (let i in elementForms) {
-    properties[elementForms[i].nodeName] = {
-      type: elementForms[i].nodeType,
-      description: elementForms[i].nodeDescription
-    };
-  }
-  let obj_attr = {
-    type: "object",
-    description: objectDescription,
-    properties: properties
-  };
-  Vue.set(JSONFile, objectName, obj_attr);
-}
-
-//create list of all element definitions into array for use in selecting elements in object creation.
-export function createArrayOfAllElementDefinitions(JSONFile, array) {
-  Object.keys(JSONFile).forEach(key => {
-    if (!JSONFile[key].properties) {
-      array.push(key);
-    }
-  });
-}
-
-//add child to object whether element or object
-//adding children to the top level object does not propagate throughout the reference objects
-// if all non-top level elements/objects are references, do we need to add the child to anything other than the top level defn? probably not
-export function addChildToObject(
-  JSONFile,
-  parentName,
-  childName,
-  childRefFile
-) {
-  let childObj = null;
-  let parentFile = JSONFile.file;
-  let parentFileName = JSONFile.fileName;
-
-  let childFile = childRefFile.file;
-  let childFileName = childRefFile.fileName;
-
-  if (JSONFile.fileName == childFileName) {
-    childObj = {
-      $ref: "#/components/schemas/" + childName
-    };
-
-    if (JSONFile["file"][parentName]["allOf"]) {
-      for (let i in JSONFile["file"][parentName]["allOf"]) {
-        if (JSONFile["file"][parentName]["allOf"][i]["properties"]) {
-          Vue.set(
-            JSONFile["file"][parentName]["allOf"][i]["properties"],
-            childName,
-            childObj
-          );
-        }
-      }
-    } else {
-      Vue.set(JSONFile["file"][parentName].properties, childName, childObj);
-    }
-  } else {
-    childObj = {
-      $ref: childFileName + "#/components/schemas/" + childName
-    };
-
-    if (JSONFile["file"][parentName]["allOf"]) {
-      for (let i in JSONFile["file"][parentName]["allOf"]) {
-        if (JSONFile["file"][parentName]["allOf"][i]["properties"]) {
-          Vue.set(
-            JSONFile["file"][parentName]["allOf"][i]["properties"],
-            childName,
-            childObj
-          );
-        }
-      }
-    } else {
-      Vue.set(JSONFile["file"][parentName].properties, childName, childObj);
-    }
-  }
-}
-
-// add superClass to object, making that object a subclass
-export function addSuperClass(
-  workingFile,
-  subClassName,
-  superClassName,
-  superClassRefFileName,
-  loadedFiles
-) {
-  let refExists = false;
-  let allOfArr = [];
-  let allOfObj = {};
-
-  if (workingFile[subClassName]["allOf"] !== undefined) {
-    for (let i of JSONFile[workingFile].allOf) {
-      if (
-        i["ref"] ==
-        superClassRefFileName + "#/components/schemas/" + superClassName
-      ) {
-        refExists = true;
-      }
-    }
-    if (!refExists) {
-      JSONFile[subClassName].allOf.push({
-        $ref: superClassRefFileName + "#/components/schemas/" + superClassName
-      });
-    }
-  } else {
-    allOfArr.push({
-      $ref: superClassRefFileName + "#/components/schemas/" + superClassName
-    });
-    allOfArr.push(JSON.parse(JSON.stringify(workingFile[subClassName])));
-    allOfObj = {
-      allOf: allOfArr
-    };
-    Vue.delete(workingFile, subClassName);
-    Vue.set(workingFile, subClassName, allOfObj);
-  }
-}
-
-export function removeSuperClass(JSONFile, subClassName, superClassName) {
-  if (JSONFile[subClassName]["allOf"].length > 2) {
-    for (let i in JSONFile[subClassName]["allOf"]) {
-      if (JSONFile[subClassName]["allOf"][i]["$ref"]) {
-        if (
-          JSONFile[subClassName]["allOf"][i]["$ref"].includes(superClassName)
-        ) {
-          Vue.delete(JSONFile[subClassName]["allOf"], i);
-        }
-      }
-    }
-  } else {
-    let temp_subClass_obj = {};
-    for (let i in JSONFile[subClassName]["allOf"]) {
-      if (JSONFile[subClassName]["allOf"][i]["type"]) {
-        temp_subClass_obj = JSONFile[subClassName]["allOf"][i];
-      }
-    }
-    Vue.set(JSONFile, subClassName, temp_subClass_obj);
-  }
-}
-
-// add enumeration to definition element
-export function addEnum(JSONFile, defnName, enumName) {
-  let temp_enum = {};
-
-  for (let i in JSONFile[defnName]["allOf"]) {
-    if (JSONFile[defnName]["allOf"][i]["type"]) {
-      if (JSONFile[defnName]["allOf"][i]["enum"]) {
-        JSONFile[defnName]["allOf"][i]["enum"].push(enumName);
-      } else {
-        temp_enum = [enumName];
-        Vue.set(JSONFile[defnName]["allOf"][i], "enum", temp_enum);
-      }
-    }
-  }
-}
-
-// remove enumeration from definition element
-export function removeEnum(JSONFile, defnName, enumName) {
-  for (let i in JSONFile[defnName]["allOf"]) {
-    if (JSONFile[defnName]["allOf"][i]["enum"]) {
-      let enum_index = JSONFile[defnName]["allOf"][i]["enum"].indexOf(enumName);
-      if (JSONFile[defnName]["allOf"][i]["enum"].length == 1) {
-        Vue.delete(JSONFile[defnName]["allOf"][i], "enum");
-      } else {
-        Vue.delete(JSONFile[defnName]["allOf"][i]["enum"], enum_index);
-      }
-    }
-  }
-}
-
-export function createNewDefnFile(title, description, fileName) {
-  let returnNewFileObj = {};
-  returnNewFileObj["fullFileForExport"] = newFileTemplate;
-  returnNewFileObj["file"] =
-    returnNewFileObj["fullFileForExport"].components.schemas;
-  returnNewFileObj["fileName"] = fileName;
-
-  returnNewFileObj["fullFileForExport"]["info"]["title"] = title;
-  returnNewFileObj["fullFileForExport"]["info"]["description"] = description;
-
-  return returnNewFileObj;
-}
-
-export function loadInDefinition(workingFile, defnName, refFile) {
-  let defnObj = {
-    $ref: refFile + "#/components/schemas/" + defnName
-  };
-
-  Vue.set(workingFile, defnName, defnObj);
-}
+/*
+
+JSONEditor.js contains functions related to manipulating OAS JSON files
+
+*/
+
+import Vue from "vue";
+import Vuex from "vuex";
+import * as miscUtilities from "./miscUtilities.js";
+import newFileTemplate from "../assets/OB-OpenAPI-New-File-Template.json";
+
+// Deletes all nodes recursively of the same node name
+// used for deleting definition elements
+export function deleteAllNodes(JSONFile, nodeName) {
+  Object.keys(JSONFile).forEach(key => {
+    if (key == nodeName) {
+      Vue.delete(JSONFile, key);
+    } else if (JSONFile[key].properties) {
+      if (JSONFile[key]["properties"][nodeName]) {
+        Vue.delete(JSONFile[key].properties, nodeName);
+      }
+    } else if (JSONFile[key]["allOf"]) {
+      for (let i in JSONFile[key]["allOf"]) {
+        if (JSONFile[key]["allOf"][i]["properties"]) {
+          if (JSONFile[key]["allOf"][i]["properties"][nodeName]) {
+            Vue.delete(JSONFile[key]["allOf"][i]["properties"], nodeName);
+          }
+        }
+        if (JSONFile[key]["allOf"][i]["$ref"]) {
+          let superClassName = JSONFile[key]["allOf"][i]["$ref"].slice(
+            JSONFile[key]["allOf"][i]["$ref"].lastIndexOf("/") + 1,
+            JSONFile[key]["allOf"][i]["$ref"].length
+          );
+          if (superClassName == nodeName) {
+            Vue.delete(JSONFile[key]["allOf"], i);
+          }
+        }
+      }
+    }
+  });
+}
+
+//Remove single node from object. Removes every instance of the node which is in the object
+export function deleteNode(JSONFile, nodeName, parentName) {
+  if (parentName == "root") {
+    Vue.delete(JSONFile, nodeName);
+    for (let i in JSONFile) {
+      if (JSONFile[i]["properties"]) {
+        if (JSONFile[i]["properties"][nodeName]) {
+          Vue.delete(JSONFile[i]["properties"], nodeName);
+        }
+      } else if (JSONFile[i]["allOf"]) {
+        for (let j in JSONFile[i]["allOf"]) {
+          if (JSONFile[i]["allOf"][j]["$ref"]) {
+            for (let k in JSONFile[i]["allOf"][j]["$ref"]) {
+              let superClassSubStringIndex =
+                JSONFile[i]["allOf"][j]["$ref"][k].lastIndexOf("/") + 1;
+              let superClassSubString = JSONFile[i]["allOf"][j]["$ref"][
+                k
+              ].slice(superClassSubStringIndex);
+              if (superClassSubString == nodeName) {
+                Vue.delete(JSONFile[i]["allOf"][j]["$ref"], k);
+              }
+            }
+          } else if (JSONFile[i]["allOf"][j]["properties"]) {
+            if (JSONFile[i]["allOf"][j]["properties"][nodeName]) {
+              Vue.delete(JSONFile[i]["allOf"][j]["properties"], nodeName);
+            }
+          }
+        }
+      }
+    }
+  } else {
+    if (JSONFile[parentName]["properties"]) {
+      Vue.delete(JSONFile[parentName]["properties"], nodeName);
+    } else {
+      for (let i in JSONFile[parentName]["allOf"]) {
+        if (JSONFile[parentName]["allOf"][i]["properties"]) {
+          Vue.delete(JSONFile[parentName]["allOf"][i]["properties"], nodeName);
+        }
+      }
+    }
+  }
+}
+
+//Edit node
+export function editNode(JSONFile, nodeName, newDescription) {
+  let nodeEdit = {
+    description: newDescription
+  };
+  if (miscUtilities.hasInheritance(JSONFile[nodeName])) {
+    for (let i in JSONFile[nodeName]["allOf"]) {
+      if (JSONFile[nodeName]["allOf"][i]["type"]) {
+        JSONFile[nodeName]["allOf"][i]["description"] = newDescription;
+      }
+    }
+  } else if (JSONFile[nodeName]["type"] == "object") {
+    nodeEdit.properties = JSONFile[nodeName]["properties"];
+    nodeEdit.type = "object";
+    Vue.set(JSONFile, nodeName, nodeEdit);
+  } else {
+    Vue.set(JSONFile, nodeName, nodeEdit);
+  }
+}
+
+//Create node
+export function createNodeElement(
+  JSONFile,
+  nodeName,
+  nodeType,
+  nodeDescription
+) {
+  let node_attr = {
+    type: nodeType,
+    description: nodeDescription
+  };
+  Vue.set(JSONFile, nodeName, node_attr);
+}
+
+//Create object
+export function createNodeObject(
+  JSONFile,
+  objectName,
+  objectDescription,
+  elementForms
+) {
+  let properties = {};
+  for (let i in elementForms) {
+    properties[elementForms[i].nodeName] = {
+      type: elementForms[i].nodeType,
+      description: elementForms[i].nodeDescription
+    };
+  }
+  let obj_attr = {
+    type: "object",
+    description: objectDescription,
+    properties: properties
+  };
+  Vue.set(JSONFile, objectName, obj_attr);
+}
+
+//create list of all element definitions into array for use in selecting elements in object creation.
+export function createArrayOfAllElementDefinitions(JSONFile, array) {
+  Object.keys(JSONFile).forEach(key => {
+    if (!JSONFile[key].properties) {
+      array.push(key);
+    }
+  });
+}
+
+//add child to object whether element or object
+//adding children to the top level object does not propagate throughout the reference objects
+// if all non-top level elements/objects are references, do we need to add the child to anything other than the top level defn? probably not
+export function addChildToObject(
+  JSONFile,
+  parentName,
+  childName,
+  childRefFile
+) {
+  let childObj = null;
+  let parentFile = JSONFile.file;
+  let parentFileName = JSONFile.fileName;
+
+  let childFile = childRefFile.file;
+  let childFileName = childRefFile.fileName;
+
+  if (JSONFile.fileName == childFileName) {
+    childObj = {
+      $ref: "#/components/schemas/" + childName
+    };
+
+    if (JSONFile["file"][parentName]["allOf"]) {
+      for (let i in JSONFile["file"][parentName]["allOf"]) {
+        if (JSONFile["file"][parentName]["allOf"][i]["properties"]) {
+          Vue.set(
+            JSONFile["file"][parentName]["allOf"][i]["properties"],
+            childName,
+            childObj
+          );
+        }
+      }
+    } else {
+      Vue.set(JSONFile["file"][parentName].properties, childName, childObj);
+    }
+  } else {
+    childObj = {
+      $ref: childFileName + "#/components/schemas/" + childName
+    };
+
+    if (JSONFile["file"][parentName]["allOf"]) {
+      for (let i in JSONFile["file"][parentName]["allOf"]) {
+        if (JSONFile["file"][parentName]["allOf"][i]["properties"]) {
+          Vue.set(
+            JSONFile["file"][parentName]["allOf"][i]["properties"],
+            childName,
+            childObj
+          );
+        }
+      }
+    } else {
+      Vue.set(JSONFile["file"][parentName].properties, childName, childObj);
+    }
+  }
+}
+
+// add superClass to object, making that object a subclass
+export function addSuperClass(
+  workingFile,
+  subClassName,
+  superClassName,
+  superClassRefFileName,
+  loadedFiles
+) {
+  let refExists = false;
+  let allOfArr = [];
+  let allOfObj = {};
+
+  if (workingFile[subClassName]["allOf"] !== undefined) {
+    for (let i of JSONFile[workingFile].allOf) {
+      if (
+        i["ref"] ==
+        "#/components/schemas/" + superClassName
+      ) {
+        refExists = true;
+      }
+    }
+    if (!refExists) {
+      JSONFile[subClassName].allOf.push({
+        $ref: "#/components/schemas/" + superClassName
+      });
+    }
+  } else {
+    allOfArr.push({
+      $ref: "#/components/schemas/" + superClassName
+    });
+    allOfArr.push(JSON.parse(JSON.stringify(workingFile[subClassName])));
+    allOfObj = {
+      allOf: allOfArr
+    };
+    Vue.delete(workingFile, subClassName);
+    Vue.set(workingFile, subClassName, allOfObj);
+  }
+}
+
+export function removeSuperClass(JSONFile, subClassName, superClassName) {
+  if (JSONFile[subClassName]["allOf"].length > 2) {
+    for (let i in JSONFile[subClassName]["allOf"]) {
+      if (JSONFile[subClassName]["allOf"][i]["$ref"]) {
+        if (
+          JSONFile[subClassName]["allOf"][i]["$ref"].includes(superClassName)
+        ) {
+          Vue.delete(JSONFile[subClassName]["allOf"], i);
+        }
+      }
+    }
+  } else {
+    let temp_subClass_obj = {};
+    for (let i in JSONFile[subClassName]["allOf"]) {
+      if (JSONFile[subClassName]["allOf"][i]["type"]) {
+        temp_subClass_obj = JSONFile[subClassName]["allOf"][i];
+      }
+    }
+    Vue.set(JSONFile, subClassName, temp_subClass_obj);
+  }
+}
+
+// add enumeration to definition element
+export function addEnum(JSONFile, defnName, enumName) {
+  let temp_enum = {};
+
+  for (let i in JSONFile[defnName]["allOf"]) {
+    if (JSONFile[defnName]["allOf"][i]["type"]) {
+      if (JSONFile[defnName]["allOf"][i]["enum"]) {
+        JSONFile[defnName]["allOf"][i]["enum"].push(enumName);
+      } else {
+        temp_enum = [enumName];
+        Vue.set(JSONFile[defnName]["allOf"][i], "enum", temp_enum);
+      }
+    }
+  }
+}
+
+// remove enumeration from definition element
+export function removeEnum(JSONFile, defnName, enumName) {
+  for (let i in JSONFile[defnName]["allOf"]) {
+    if (JSONFile[defnName]["allOf"][i]["enum"]) {
+      let enum_index = JSONFile[defnName]["allOf"][i]["enum"].indexOf(enumName);
+      if (JSONFile[defnName]["allOf"][i]["enum"].length == 1) {
+        Vue.delete(JSONFile[defnName]["allOf"][i], "enum");
+      } else {
+        Vue.delete(JSONFile[defnName]["allOf"][i]["enum"], enum_index);
+      }
+    }
+  }
+}
+
+export function createNewDefnFile(title, description, fileName) {
+  let returnNewFileObj = {};
+  returnNewFileObj["fullFileForExport"] = newFileTemplate;
+  returnNewFileObj["file"] =
+    returnNewFileObj["fullFileForExport"].components.schemas;
+  returnNewFileObj["fileName"] = fileName;
+
+  returnNewFileObj["fullFileForExport"]["info"]["title"] = title;
+  returnNewFileObj["fullFileForExport"]["info"]["description"] = description;
+
+  return returnNewFileObj;
+}
+
+// todo: handle loading in inheritance
+export function loadInDefinition(workingFile, defnName, refFile) {
+  let dependenciesToAdd = getObjChildren(refFile, defnName)
+  let elToAdd = []
+  let objToAdd = []
+  let alreadyAdded = []
+
+  for (let i = 0; i < dependenciesToAdd.length; i++) {
+    if (dependenciesToAdd[i]["type"] == "object" || dependenciesToAdd[i]["type"] == "array") {
+      objToAdd.push(dependenciesToAdd[i]["defnName"])
+    } else {
+      elToAdd.push(dependenciesToAdd[i]["defnName"])
+    }
+  }
+
+  for (let i = 0; i < elToAdd.length; i++) {
+    if (!alreadyAdded.includes(elToAdd[i])) {
+      alreadyAdded.push(elToAdd[i])
+      Vue.set(workingFile, elToAdd[i], refFile[elToAdd[i]]);
+    }
+  }
+
+  for (let i = 0; i < objToAdd.length; i++) {
+    if (!alreadyAdded.includes(objToAdd[i])) {
+      alreadyAdded.push(objToAdd[i])
+
+      Vue.set(workingFile, objToAdd[i], refFile[objToAdd[i]]);
+    }
+  }
+
+  // todo: needs error handling and error reporting
+}
+
+export function getDefnNameFromRef(ref) {
+  return ref.slice(ref.lastIndexOf("/") + 1)
+}
+
+// returns a list of dependencies of an obj
+export function getObjChildren(refFile, defnName) {
+  // don't need to pull in these objects if they are referenced as superclass
+  var superClassWhiteList = ["TaxonomyElementString", "TaxonomyElementNumber", 
+    "TaxonomyElementInteger", "TaxonomyElementBoolean"]
+  // don't re-add primitives
+  var primitiveWhiteList = ["Value", "Unit", "Decimals", "Precision", "StartTime", "EndTime"]
+  let dependencies = []
+
+  let defnObj = refFile[defnName]
+
+  if (defnObj["type"] == "object") {
+    dependencies.push(
+      {
+        "type": "object",
+        "defnName": defnName
+      }
+    )
+    for (let i in defnObj["properties"]) {
+      dependencies = dependencies.concat(getObjChildren(refFile, i))
+    }
+  } else if (defnObj["type"] == "array") {
+    dependencies.push(
+      {
+        "type": "array",
+        "defnName": defnName
+      }
+    )
+    let item = getDefnNameFromRef(defnObj["items"]["$ref"])
+
+    dependencies = dependencies.concat(getObjChildren(refFile, item))
+      
+  } else {
+    if (!primitiveWhiteList.includes(defnName)) {
+      for (let i in defnObj["allOf"]) {
+        if ("$ref" in defnObj["allOf"][i]) {
+          if (superClassWhiteList.includes(getDefnNameFromRef(defnObj["allOf"][i]["$ref"]))) {
+            dependencies.push(
+              {
+                "type": "element",
+                "defnName": defnName
+              }
+            )
+          } else {
+            dependencies.push(
+              {
+                "type": "object",
+                "defnName": defnName
+              }
+            )            
+  
+            dependencies = dependencies.concat(getObjChildren(refFile, getDefnNameFromRef(defnObj["allOf"][i]["$ref"])))
+          }
+        } else if ("properties" in defnObj["allOf"][i]) {
+          for (let j in defnObj["allOf"][i]["properties"]) {
+            
+            dependencies = dependencies.concat(getObjChildren(refFile, j))
+          }
+        }
+      }
+    }
+  }
+
+  return dependencies
+}
diff --git a/src/views/OBEditor.vue b/src/views/OBEditor.vue
index ceec2fb..8c790cd 100644
--- a/src/views/OBEditor.vue
+++ b/src/views/OBEditor.vue
@@ -1,1366 +1,1367 @@
-<template>
-  <div class="ob-editor-container">
-    <div class="element-selector-body" ref="treeContainer">
-      <div class="file-load-tabs">
-        <b-card no-body class="rounded-0" id="no-body-card">
-          <b-tabs
-            v-model="$store.state.currentTabIndexFileEditor"
-            card
-            id="start-tabs"
-          >
-            <template v-slot:tabs-end>
-              <b-nav-item @click="showAddFileModal = true" href="#">
-                <b>+</b>
-              </b-nav-item>
-            </template>
-            <template v-slot:empty>
-              <div class="text-center text-muted">
-                There are no open files<br />
-                Import a new file using the <b>+</b> button above.
-              </div>
-            </template>
-            <b-tab
-              v-for="(item, index) in fileTabs"
-              :key="'dyn-tab-' + index"
-              :title="item.fileName"
-            >
-              <template v-slot:title>
-                <strong>{{ item.fileName }}</strong>
-                <span @click="$bvModal.show('modal-close-file-warning')">
-                  <v-icon name="times" id="tab-close" />
-                </span>
-              </template>
-              <span v-if="$store.state.currentFile">
-                <div class="tree-search" v-if="$store.state.viewerMode == 'Edit Mode'">
-                  <b-form-input
-                    class="tree-search-bar"
-                    v-model="treeSearchTerm"
-                    placeholder="Search element names... (wildcard: * )"
-                  >
-                  </b-form-input>
-                </div>
-                <span :key="$store.state.refreshKey">
-                  <span v-for="arr in sortedObjects">
-                    <!-- obj node -->
-                    <UploadOBTree
-                      v-if="arr[2] == 'Object'"
-                      :name="arr[0]"
-                      :children="arr[1].properties"
-                      :depth="0"
-                      :expandAllObjects="expandAllObjects"
-                      :nodeDescription="arr[1].description"
-                      :isObj="true"
-                      parent="root"
-                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
-                      type="object"
-                      :ref="defnRef(arr[0], item.fileName)"
-                      :nameRef="defnRef(arr[0], item.fileName)"
-                      :file="computedFile"
-                      :isTaxonomyElement="false"
-                      :referenceFile="arr[3]"
-                      :isLocal="arr[4]"
-                      :viewObj="arr[5]"
-                      :isTopLevel="true"
-                      :topLevelExpand="true"
-                    ></UploadOBTree>
-
-                    <UploadOBTree
-                      v-else-if="arr[2] == 'Array'"
-                      :name="arr[0]"
-                      :children="getArrayItemAsChildren(arr[3], arr[5], arr[0])"
-                      :depth="0"
-                      :expandAllObjects="expandAllObjects"
-                      :nodeDescription="arr[1].description"
-                      :isObj="false"
-                      parent="root"
-                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
-                      type="array"
-                      :ref="defnRef(arr[0], item.fileName)"
-                      :nameRef="defnRef(arr[0], item.fileName)"
-                      :file="computedFile"
-                      :isArray="true"
-                      :arrayItemRef="arr[5]"
-                      :arrayItemType="getArrItemType(arr[5])"
-                      :referenceFile="arr[3]"
-                      :isLocal="arr[4]"
-                      :viewObj="false"
-                      :isTopLevel="true"
-                      :topLevelExpand="true"
-                    ></UploadOBTree>
-
-                    <!-- taxonomy element -->
-                    <UploadOBTree
-                      v-else-if="arr[2] == 'TaxonomyElement'"
-                      :isObj="false"
-                      :name="arr[0]"
-                      :children="subClassChildren(arr[4], arr[3], arr[1], arr[0])"
-                      :depth="0"
-                      :expandAllObjects="expandAllObjects"
-                      :nodeDescription="getNodeDescription(arr[1])"
-                      parent="root"
-                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
-                      type="object"
-                      :ref="defnRef(arr[0], item.fileName)"
-                      :nameRef="defnRef(arr[0], item.fileName)"
-                      :file="computedFile"
-                      :isTaxonomyElement="true"
-                      :referenceFile="arr[4]"
-                      :isLocal="arr[5]"
-                      :viewObj="false"
-                      :isTopLevel="true"
-                    >
-                    </UploadOBTree>
-
-                    <!-- allOf Obj -->
-                    <UploadOBTree
-                      v-else-if="arr[2] == 'ObjWithInherit'"
-                      :name="arr[0]"
-                      :children="subClassChildren(arr[4], arr[3], arr[1], arr[0])"
-                      :depth="0"
-                      :expandAllObjects="expandAllObjects"
-                      :nodeDescription="getNodeDescription(arr[1])"
-                      :isObj="true"
-                      parent="root"
-                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
-                      type="object"
-                      :ref="defnRef(arr[0], item.fileName)"
-                      :nameRef="defnRef(arr[0], item.fileName)"
-                      :file="computedFile"
-                      :isTaxonomyElement="false"
-                      :referenceFile="arr[4]"
-                      :isLocal="arr[5]"
-                      :viewObj="false"
-                      :isTopLevel="true"
-                    ></UploadOBTree>
-
-                    <UploadOBTree
-                      v-else
-                      :isObj="false"
-                      :name="arr[0]"
-                      :depth="0"
-                      :expandAllObjects="expandAllObjects"
-                      :nodeDescription="getNodeDescription(arr[1])"
-                      parent="root"
-                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
-                      type="string"
-                      :ref="defnRef(arr[0], item.fileName)"
-                      :nameRef="defnRef(arr[0], item.fileName)"
-                      :file="computedFile"
-                      :isTaxonomyElement="false"
-                      :referenceFile="arr[2]"
-                      :isLocal="arr[3]"
-                      :viewObj="false"
-                      :isTopLevel="true"
-                    >
-                    </UploadOBTree>
-                  </span>
-                </span>
-                <div class="load-more-btn-container">
-                  <b-button @click="loadMore" v-if="showLoadMore"
-                    >Load more</b-button
-                  >
-                </div>
-              </span>
-            </b-tab>
-          </b-tabs>
-        </b-card>
-        <div id="modal-container">
-          <b-modal id="modal-center" v-model="showAddFileModal">
-            <template v-slot:modal-header>
-              <div id="modal-header-">
-                <h5 id="modal-header-inline">Load Schema</h5>
-                <v-icon
-                  name="info-circle"
-                  id="info-circle-"
-                  v-b-popover.hover.right="
-                    'Choose an OB OpenAPI Definition File from your own system or load a Master File from View/Edit Dependency. '
-                  "
-                />
-              </div>
-            </template>
-            <template v-slot:modal-footer>
-              <div class="w-100">
-                <b-button
-                  variant="primary"
-                  class="float-right"
-                  @click="loadFile"
-                  :disabled="!file"
-                  v-if="tabIndexFileUpload == 0"
-                >
-                  Open
-                </b-button>
-                <b-button
-                  variant="primary"
-                  class="float-right"
-                  @click="createFile"
-                  v-if="tabIndexFileUpload == 1"
-                >
-                  Create
-                </b-button>
-                <b-button
-                  variant="primary"
-                  class="float-right"
-                  @click="loadDependencyFile"
-                  :disabled="!file"
-                  v-if="tabIndexFileUpload == 2"
-                >
-                  Open
-                </b-button>
-                <b-button
-                  variant="danger"
-                  class="float-right"
-                  @click="cancelLoadModal"
-                >
-                  Cancel
-                </b-button>
-              </div>
-            </template>
-            <div id="modal-tabs-container">
-              <b-tabs
-                content-class="mt-3"
-                id="modal-tabs"
-                no-fade
-                v-model="tabIndexFileUpload"
-              >
-                <div id="modal-tabs-inside">
-                  <b-tab title="From Local" active>
-                    <div class="tab-container">
-                      <div id="file-selector-container">
-                        <b-form-file
-                          v-model="file"
-                          :state="Boolean(file)"
-                          placeholder="Choose your OpenAPI Schema File..."
-                          v-if="!file"
-                        ></b-form-file>
-                        <span id="selected-file-txt" v-else>
-                          Selected file:
-                          <strong>
-                            {{ file ? file.name : "" }}
-                          </strong>
-                        </span>
-                        <br />
-                        <span id="unSelectFile-btn" v-if="file">
-                          <b-button @click="unSelectFile">
-                            Unselect File
-                          </b-button>
-                        </span>
-                      </div>
-                      <div class="error-container">
-                        <b-alert
-                          id="file-duplicate-error"
-                          v-model="fileAlreadyOpened"
-                          variant="danger"
-                          dismissible
-                        >
-                          File already opened. Cannot open the same file twice.
-                        </b-alert>
-                        <b-alert
-                          id="missing-ref-error"
-                          v-model="showMissingRefsErr"
-                          variant="danger"
-                          dismissible
-                        >
-                          <p>
-                            Missing references:
-                            <strong>{{ missingRefsRequired }}</strong
-                            ><br />
-                            Load in missing files first to load this file in.
-                          </p>
-                        </b-alert>
-                      </div>
-                    </div>
-                  </b-tab>
-                  <b-tab title="Create New File">
-                    <div id="new-file-form">
-                      <b-form-group
-                        id="new-file-input-group-1"
-                        label="Definition file title:"
-                        label-for="new-file-input-1"
-                      >
-                        <b-form-input
-                          id="new-file-input-1"
-                          v-model="newFileForm.fileTitle"
-                          placeholder="Enter title for your new definition file"
-                        ></b-form-input>
-                      </b-form-group>
-
-                      <b-form-group
-                        id="new-file-input-group-2"
-                        label="Definition File Description:"
-                        label-for="new-file-input-2"
-                      >
-                        <b-form-input
-                          id="new-file-input-2"
-                          v-model="newFileForm.fileDescription"
-                          placeholder="Enter description for your new definition file"
-                        ></b-form-input>
-                      </b-form-group>
-
-                      <b-form-group
-                        id="new-file-input-group-3"
-                        label="Definition Filename:"
-                        label-for="new-file-input-3"
-                      >
-                        <b-form-input
-                          id="new-file-input-3"
-                          v-model="newFileForm.fileName"
-                          placeholder="Enter filename for your new definition file."
-                        ></b-form-input>
-                      </b-form-group>
-                    </div>
-                  </b-tab>
-                  <b-tab title="View/Edit Dependency">
-                    <div class="database-selector-container">
-                      <div class="database-selector-list">
-                        <li
-                          v-for="(value, name, index) in dbList"
-                          id="db-in-list"
-                          @click="selectDBFile(index, name)"
-                          :class="{ 'selected-node': index == selectedIndex }"
-                        >
-                          <span id="db-list-name">
-                            {{ name }}
-                          </span>
-                        </li>
-                      </div>
-                      <div class="database-selector-list-information">
-                        <span v-if="selectedDependencyInfo">
-                          <p>{{ selectedDependencyInfo }}</p>
-                          <!-- <b-form-checkbox
-                                            v-model="readOnly"
-                                            name="checkbox-2"
-                                            value="true"
-                                            unchecked-value="false"
-                                        >
-                                            Read only
-                                        </b-form-checkbox> -->
-                        </span>
-                      </div>
-                    </div>
-                  </b-tab>
-                </div>
-              </b-tabs>
-            </div>
-          </b-modal>
-        </div>
-      </div>
-    </div>
-    <div class="element-selector-footer">
-      <b-button variant="primary" size="sm" @click="toggleExpandAll" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
-        <span v-if="expandAllObjects">
-          Collapse All
-        </span>
-        <span v-else-if="!expandAllObjects">
-          Expand All
-        </span>
-      </b-button>
-
-      <b-button variant="primary" size="sm" @click="showCreateDefinitionForm" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
-        Create New Definition
-      </b-button>
-
-      <b-button variant="primary" size="sm" @click="showLoadInDefinitionForm" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
-        Load In Definition
-      </b-button>
-
-      <b-button variant="primary" size="sm" @click="showEditItemTypesMain" v-if="$store.state.viewerMode == 'Edit Mode'" :disabled="!$store.state.currentFile">Item Types Editor</b-button>
-    </div>
-    <div class="element-editor-header">
-      <div class="editor-header">
-        <h4 v-if="$store.state.activeEditorView == 'DetailedNodeView'">Detailed View</h4>
-        <h4 v-if="$store.state.activeEditorView == 'EditDefinition'">
-          Edit <strong>{{ $store.state.isSelected }}</strong>
-        </h4>
-        <h4 v-if="$store.state.activeEditorView == 'CreateDefinitionForm'">
-          Create Definition
-        </h4>
-        <h4 v-if="$store.state.activeEditorView == 'LoadInDefinition'">Load In Definition</h4>
-        <h4 v-if="$store.state.activeEditorView == 'EditItemTypesMain'">
-          <h4 v-if="!$store.state.activeItemTypesView">Item Types Editor</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'ViewAllItemTypes'">View All Item Types</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'CreateItemType'">Create Item Type</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'EditItemType'">Edit Item Type</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'CreateItemTypeGroup'">Create Item Type Group</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'EditItemTypeGroup'">Edit Item Type Group</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'DeleteItemTypeGroup'">Delete Item Type Group</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'ViewAllItemTypeGroups'">View All Item Type Groups</h4>
-          <h4 v-else-if="$store.state.activeItemTypesView == 'DeleteItemType'">Delete Item Type</h4>
-        </h4>
-      </div>
-      <div class="download-button-container">
-        <b-button
-          variant="primary"
-          v-b-modal.export-modal
-          @click="exportModalOpened('sampleJSON')"
-          :disabled="!$store.state.currentFile"
-          size="sm"
-          v-if="$store.state.viewerMode == 'Edit Mode'"
-          >Create Sample JSON</b-button
-        >
-        <b-button
-          variant="primary"
-          v-b-modal.export-modal
-          @click="exportModalOpened('taxonomy')"
-          :disabled="!$store.state.currentFile"
-          size="sm"
-          v-if="$store.state.viewerMode == 'Edit Mode'"
-          >Save As</b-button
-        >
-      </div>
-    </div>
-    <div class="element-editor-body">
-      <!-- <DetailedNodeView v-if="$store.state.showDetailedView" />
-      <EditDefinition v-if="$store.state.showEditNodeView" />
-      <CreateDefinitionForm v-show="$store.state.showCreateDefinitionForm" />
-      <LoadInDefinition v-if="$store.state.showLoadInDefinitionForm" /> -->
-      <component :is="$store.state.activeEditorView"></component>
-    </div>
-
-    <!-- Modals -->
-    <div class="element-editor-footer"></div>
-    <ExportFormModal />
-    <span id="modal-container">
-      <b-modal id="modal-close-file-warning">
-        <template v-slot:modal-title>
-          Close File?
-        </template>
-        <template v-slot:modal-footer>
-          <div class="w-100">
-            <b-button
-              class="float-right"
-              variant="primary"
-              @click="closeTabWarning()"
-              >OK</b-button
-            >
-            <b-button
-              class="float-right"
-              @click="$bvModal.hide('modal-close-file-warning')"
-              >Cancel</b-button
-            >
-          </div>
-        </template>
-        <template v-slot:default>
-          Are you sure you want to close the file? Any changes not exported will
-          not be saved. Make sure this file is not being referenced in another
-          loaded files or it may cause errors.
-        </template>
-      </b-modal>
-    </span>
-  </div>
-</template>
-
-<script>
-import UploadOBTree from "../components/UploadOBTree.vue";
-import DetailedNodeView from "../components/DetailedNodeView.vue";
-import CreateDefinitionForm from "../components/forms/CreateDefinitionForm.vue";
-import ExportFormModal from "../components/forms/ExportFormModal";
-import LoadInDefinition from "../components/EditDefinition/LoadInDefinition";
-import EditDefinition from "../components/EditDefinition/EditDefinition";
-import EditItemTypesMain from "../components/ItemTypes/EditItemTypesMain"
-import * as miscUtilities from "../utils/miscUtilities";
-import * as JSONEditor from "../utils/JSONEditor.js";
-import SolarTaxonomyMaster from "@/assets/master_files/Master-Solar-Taxonomy.json";
-import OBOpenAPIMaster from "@/assets/master_files/Master-OB-OpenAPI.json";
-import FileSaver from "file-saver";
-
-export default {
-  components: {
-    UploadOBTree,
-    DetailedNodeView,
-    CreateDefinitionForm,
-    ExportFormModal,
-    EditDefinition,
-    LoadInDefinition,
-    EditItemTypesMain
-  },
-  created() {
-    // if query params, create cookie
-    // query param form = ?views=
-    if (Object.keys(this.$route.query).length !== 0) {
-      miscUtilities.eraseCookie('viewObjs')
-      let view_objects = this.$route.query['views']
-      view_objects = view_objects.split(',')
-      for (let i in view_objects) {
-        this.$store.commit("addViewObj", {
-          el: view_objects[i],
-          mode: 'create_cookie'
-        })
-      }
-    } else {
-      let viewObjsArr = JSON.parse(miscUtilities.readCookie('viewObjs'))
-      if (viewObjsArr == null) {
-        viewObjsArr = []
-      }
-      // if you have cookie, read it, if not switch to edit mode
-      if (viewObjsArr.length != 0) {
-        for (let i in viewObjsArr) {
-          this.$store.commit("addViewObj", {
-            el: viewObjsArr[i],
-            mode: 'init'
-          });
-        }
-      } else {
-        this.$store.commit('clearEditorView')
-        this.$store.commit('changeViewerMode', 'Edit Mode')
-      }
-
-    }
-
-    this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"] = {
-      fullFileForExport: SolarTaxonomyMaster,
-      file: SolarTaxonomyMaster.components.schemas,
-      fileName: "Master-Solar-Taxonomy.json"
-    };
-
-    this.$store.state.loadedFiles["Master-OB-OpenAPI.json"] = {
-      fullFileForExport: OBOpenAPIMaster,
-      file: OBOpenAPIMaster.components.schemas,
-      fileName: "Master-OB-OpenAPI.json"
-    };
-
-    // load in item type for default definition files (solar and ob)
-    if (this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-types']) {
-      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_types"] = this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-types']
-    } else {
-      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_types"] = {}
-    }
-
-    if (this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-types']) {
-      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_types"] = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-types']
-    } else {
-      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_types"] = {}
-    }
-
-    // load in item type groups for default definition files (solar and ob)
-    if (this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-type-groups']) {
-      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_type_groups"] = this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-type-groups']
-    } else {
-      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_type_groups"] = {}
-    }
-
-    if (this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-type-groups']) {
-      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_type_groups"] = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-type-groups']
-    } else {
-      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_type_groups"] = {}
-    }
-
-    this.file = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"];
-    this.loadDependencyFile()
-  },
-  data() {
-    return {
-      file: null,
-      expandAllObjects: true,
-      detailedView: true,
-      editorView: false,
-      allNodesFlat: [],
-      numOfElem: 50,
-      showLoadMore: false,
-      filteredCount: 0,
-      tabs: [],
-      tabCounter: 0,
-      showAddFileModal: false,
-      tabIndexFileUpload: null,
-      tabIndexEditorView: null,
-      readOnly: false,
-      selectedIndex: null,
-      selectedDependencyFileName: null,
-      selectedDependencyInfo: null,
-      dbList: {
-        "Master-Solar-Taxonomy.json": {
-          information:
-            "This is the latest release of the Orange Button Solar Taxonomy",
-          fileName: "Master-Solar-Taxonomy.json"
-        },
-        "Master-OB-OpenAPI.json": {
-          information:
-            "This is the latest release of the Orange Button OpenAPI Master Document",
-          fileName: "Master-OB-OpenAPI.json"
-        }
-      },
-      fileAlreadyOpened: false,
-      currentTabIndex: null,
-      newFileForm: {
-        fileTitle: "",
-        fileDescription: "",
-        fileName: ""
-      },
-      missingRefsRequired: [],
-      showMissingRefsErr: false,
-      treeSearchTerm: ""
-    };
-  },
-  methods: {
-    getArrItemType(arrItemRef) {
-      return miscUtilities.getArrayItemType(
-        arrItemRef,
-        this.$store.state.loadedFiles,
-        this.$store.state.currentFile
-      );
-    },
-    fileToJSON() {
-      if (this.file) {
-        let reader = new FileReader();
-        reader.readAsText(this.file);
-        reader.onload = () => {
-          this.$store.commit("updateOriginalJSONFile", reader.result);
-        };
-
-        reader.onerror = function() {
-          console.log(reader.error);
-        };
-      }
-    },
-    createFile() {
-      let defnFileTitle = this.newFileForm.fileTitle;
-      let defnFileDescription = this.newFileForm.fileDescription;
-      let defnFileName = this.newFileForm.fileName;
-
-      let check_duplicate_file = false;
-
-      if (!defnFileTitle) {
-        defnFileTitle = "Placeholder Title";
-      }
-
-      if (!defnFileDescription) {
-        defnFileDescription = "Placeholder Description";
-      }
-
-      if (!defnFileDescription) {
-        defnFileName = "OB-OpenAPI-DefnFile.json";
-      }
-
-      let newFileObj = JSONEditor.createNewDefnFile(
-        defnFileTitle,
-        defnFileDescription,
-        defnFileName
-      );
-
-      for (let i in this.$store.state.fileTabs) {
-        if (this.$store.state.fileTabs[i].fileName == newFileObj.fileName) {
-          check_duplicate_file = true;
-        }
-      }
-
-      if (check_duplicate_file) {
-        this.fileAlreadyOpened = true;
-      } else {
-        this.$store.state.fileTabs.push(newFileObj);
-        this.showAddFileModal = false;
-        this.$store.state.loadedFiles[this.newFileForm.fileName] = newFileObj;
-      }
-    },
-
-    fromSuperClass(childNode) {
-      if (childNode["fromSuperClass"]) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    exportFile() {
-      this.$store.commit("exportFile");
-    },
-    showCreateDefinitionForm() {
-      this.$store.commit("selectNone")
-      this.$store.commit("showCreateDefinitionForm");
-      this.$store.commit("refreshCreateDefnInputs", true);
-    },
-    showLoadInDefinitionForm() {
-      this.$store.commit("selectNone")
-      this.$store.commit("showLoadInDefinitionForm");
-    },
-    showEditItemTypesMain() {
-      this.$store.commit("selectNone")
-      this.$store.commit("showNoItemTypesViews")
-      this.$store.commit("showEditItemTypesMain");
-    },
-    toggleExpandAll() {
-      this.expandAllObjects = !this.expandAllObjects;
-    },
-    objectRef(nodeName, fileName) {
-      return fileName + "-" + nodeName + "-root";
-    },
-    setExportFile(fileToExportType) {
-      let fileToExport = null;
-      let exportModalHeader = "";
-      if (fileToExportType === "taxonomy") {
-        fileToExport = this.$store.state.currentFile.fullFileForExport;
-        exportModalHeader = "Save as...";
-      } else if (fileToExportType === "sampleJSON") {
-        fileToExport = miscUtilities.getSampleJSON(this.$store.state.currentFile.fileName, this.$store.state);
-        exportModalHeader = "Create Sample JSON";
-      }
-      this.$store.commit("setFileToExport", {
-        fileToExport: fileToExport,
-        fileToExportName: this.$store.state.currentFile.fileName,
-        exportModalHeader: exportModalHeader
-      });
-    },
-    exportModalOpened(fileToExportType) {
-      this.setExportFile(fileToExportType);
-      this.$store.commit("setShowExportModal", true);
-    },
-    // returns object containing all children of the superClass and subClass with no duplicates, while labeling objects/elements that are inherited for signifying
-    subClassChildren(file, superClassRef, subClassObj, key) {
-      return miscUtilities.getSuperClassChildren(
-        file,
-        superClassRef,
-        subClassObj,
-        null,
-        key,
-        this.$store.state.loadedFiles
-      );
-    },
-    getArrayItemAsChildren(file, arrayItemRef, key) {
-      return miscUtilities.getArrayItemAsChildren(
-        file,
-        arrayItemRef,
-        key,
-        this.$store.state.loadedFiles
-      );
-    },
-
-    loadMore() {
-      this.numOfElem += 50;
-      if (this.numOfElem + 1 >= this.filteredCount) {
-        this.showLoadMore = false;
-      } else {
-        this.showLoadMore = true;
-      }
-    },
-
-    selectDBFile(index, name) {
-      this.selectedIndex = index;
-      this.selectedDependencyFileName = this.dbList[name]["fileName"];
-      this.selectedDependencyInfo = this.dbList[name]["information"];
-      this.file = this.$store.state.loadedFiles[name];
-    },
-    unSelectFile() {
-      this.file = null;
-      this.showMissingRefsErr = false;
-      this.fileAlreadyOpened = false;
-    },
-    loadFile() {
-      let refsRequired = [];
-      this.missingRefsRequired = [];
-      this.showMissingRefsErr = false;
-      let file_obj = {
-        fileName: this.file.name
-      };
-
-      let reader = new FileReader();
-      let check_duplicate_file = false;
-
-      reader.readAsText(this.file);
-      reader.onload = () => {
-        file_obj["fullFileForExport"] = JSON.parse(reader.result);
-        file_obj["file"] = file_obj["fullFileForExport"].components.schemas;
-
-        // todo: refactor to make into a function that is also used in create() 
-        // stores item types and item types groups of loaded file
-        if (file_obj["fullFileForExport"]["x-ob-item-types"]) {
-          file_obj["item_types"] = file_obj["fullFileForExport"]["x-ob-item-types"]
-        } else {
-          file_obj["item_types"] = {}
-        }
-
-        if (file_obj["fullFileForExport"]["x-ob-item-type-groups"]) {
-          file_obj["item_type_groups"] = file_obj["fullFileForExport"]["x-ob-item-type-groups"]
-        } else {
-          file_obj["item_type_groups"] = {}
-        }
-
-        for (let i in this.$store.state.fileTabs) {
-          if (this.$store.state.fileTabs[i].fileName == file_obj.fileName) {
-            check_duplicate_file = true;
-          }
-        }
-
-        if (check_duplicate_file) {
-          this.fileAlreadyOpened = true;
-        } else {
-          this.$store.state.fileTabs.push(file_obj);
-          this.showAddFileModal = false;
-          this.$store.commit("loadFile", file_obj);
-        }
-      };
-    },
-    cancelLoadModal() {
-      this.showAddFileModal = false;
-    },
-    closeTabWarning() {
-      this.closeTab(this.$store.state.currentTabIndexFileEditor);
-      this.$bvModal.hide("modal-close-file-warning");
-    },
-    closeTab(x) {
-      this.$store.commit("removeFile", this.$store.state.currentFile.fileName);
-      this.$store.state.currentFile = null;
-      this.$store.state.fileTabs.splice(x, 1);
-      this.$store.state.currentFile = this.$store.state.fileTabs[
-        this.$store.state.currentTabIndexFileEditor
-      ];
-      if (this.$store.state.currentFile)
-        this.$store.state.selectedFileName = this.$store.state.currentFile["fileName"]
-    },
-    getNodeDescription(nodeObj) {
-      return nodeObj["description"];
-    },
-    loadDependencyFile() {
-      let check_duplicate_file = false;
-      let file_obj = this.file;
-      for (let i in this.$store.state.fileTabs) {
-        if (this.$store.state.fileTabs[i].fileName == file_obj.fileName) {
-          check_duplicate_file = true;
-        }
-      }
-
-      if (check_duplicate_file) {
-        this.fileAlreadyOpened = true;
-      } else {
-        this.$store.state.fileTabs.push(file_obj);
-        this.showAddFileModal = false;
-      }
-    },
-    defnRef(nodeName, fileName) {
-      let defnRef =
-        "root" + "-" + miscUtilities.generateUniqueRef(nodeName, fileName);
-      return defnRef;
-    },
-    defnRefParentTrailStart(nodeName, fileName) {
-      return miscUtilities.generateUniqueRef(nodeName, fileName, "root");
-    },
-    isViewObj(el) {
-      if (this.$store.state.viewObjs.includes(el)) {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  watch: {
-    treeSearchTerm() {
-        this.$store.commit('reRenderList')
-        this.$store.commit('clearEditorView')
-    },
-    tabIndexFileUpload() {
-      this.selectedIndex = null;
-      this.selectedDependencyFileName = null;
-      this.selectedDependencyInfo = null;
-      this.file = null;
-      this.newFileForm.fileTitle = null;
-      this.newFileForm.fileDescription = null;
-      this.newFileForm.fileName = null;
-    },
-    "$store.state.currentTabIndexFileEditor"() {
-      this.$store.state.currentFile = this.$store.state.fileTabs[
-        this.$store.state.currentTabIndexFileEditor
-      ];
-      if (this.$store.state.currentFile)
-        this.$store.state.selectedFileName = this.$store.state.currentFile["fileName"]
-
-      this.$store.commit('showNoView')
-
-      this.$store.state.isSelected = null;
-      this.$store.state.nameRef = null;
-    },
-    file() {
-      this.fileToJSON();
-    },
-
-    "$store.state.selectDefinitionNode"() {
-      let yCoord = 0;
-      let notRoot = false;
-      let firstHyphenIndex = 0;
-      let secondHyphenIndex = 0;
-      let nameRefOfRoot = "";
-
-      if (!this.$store.state.nameRef.includes("root-")) {
-        notRoot = true;
-        firstHyphenIndex = this.$store.state.nameRef.indexOf("-");
-        secondHyphenIndex = this.$store.state.nameRef.indexOf(
-          "-",
-          firstHyphenIndex + 1
-        );
-        nameRefOfRoot =
-          "root-" +
-          this.$store.state.nameRef.slice(0, firstHyphenIndex + 1) +
-          this.$store.state.nameRef.slice(secondHyphenIndex + 1);
-      }
-
-      if (this.$store.state.selectDefinitionNode == true && notRoot) {
-        if (
-          this.$store.state.selectDefinitionNode == true &&
-          this.$store.state.nodeType != "object"
-        ) {
-          yCoord = this.$refs[nameRefOfRoot][0].$el.offsetTop;
-
-          this.$refs.treeContainer.scrollTop = yCoord - 200;
-          this.$store.commit("toggleSelectDefinitionNode");
-          this.$store.state.nameRef = nameRefOfRoot;
-        } else if (
-          this.$store.state.selectDefinitionNode == true &&
-          this.$store.state.nodeType == "object"
-        ) {
-          yCoord = this.$refs[nameRefOfRoot][0].$el.offsetTop;
-
-          this.$refs.treeContainer.scrollTop = yCoord - 200;
-          this.$store.state.nameRef = nameRefOfRoot;
-          this.$store.commit("toggleSelectDefinitionNode");
-        }
-        this.$store.state.nodeParent = "root";
-      }
-    },
-    "$store.state.inXBRLTab"() {
-      this.numOfElem = 50;
-      this.$store.state.treeSearchTerm = "";
-      this.$store.state.nameRef = "";
-      this.$store.commit("showNoView")
-    },
-    showAddFileModal() {
-      this.file = null;
-      this.fileAlreadyOpened = false;
-      this.showMissingRefsErr = false;
-    },
-    tabIndex() {
-      this.readOnly = false;
-      this.file = null;
-      this.selectedIndex = null;
-      this.selectedDependencyInfo = null;
-      this.selectedDependencyFileName = null;
-    },
-    file() {
-      if (this.file) {
-        // console.log(this.file.name)
-      } else {
-        // console.log(this.file)
-      }
-    },
-    selectedIndex() {
-      this.readOnly = false;
-    },
-    filteredCount() {
-      this.numOfElem = 50;
-      if (this.numOfElem + 1 >= this.filteredCount) {
-        this.showLoadMore = false;
-      } else {
-        this.showLoadMore = true;
-      }
-    }
-  },
-  computed: {
-    fileTabs() {
-      return this.$store.state.fileTabs;
-    },
-    sortedObjects() {
-      let obj_lst = [];
-      let el_lst = [];
-      let arr_lst = [];
-      let arr_item = "";
-      let immutable_lst = [];
-      let superClass_lst = [];
-      let subClass_obj = {};
-      let immutable_OB = [
-        "Value",
-        "Unit",
-        "Decimals",
-        "Precision",
-        "TaxonomyElementString",
-        "TaxonomyElementNumber",
-        "TaxonomyElementInteger",
-        "TaxonomyElementBoolean"
-      ];
-      let nodeType = "";
-      let defnRef = "";
-      let refFileContext = "LOCAL";
-      let isLocal = true;
-
-      let isTaxonomyElement = false;
-
-      //file parameter is the local file
-      //fileReference is the reference file
-      let fileReference = this.$store.state.currentFile.file;
-
-      if (fileReference) {
-        Object.keys(fileReference).forEach(key => {
-          isTaxonomyElement = false;
-          isLocal = true;
-          superClass_lst = [];
-          fileReference = this.$store.state.currentFile.file;
-          let isViewObj = this.isViewObj(key)
-
-          defnRef = miscUtilities.getDefnRef(
-            fileReference,
-            key,
-            null,
-            this.$store.state.loadedFiles
-          );
-
-          refFileContext = miscUtilities.getRefFileContext(defnRef);
-
-          if (refFileContext != "LOCAL") {
-            fileReference = this.$store.state.loadedFiles[refFileContext][
-              "file"
-            ];
-            isLocal = false;
-          }
-
-          if (fileReference[key]["type"] == "object") {
-            nodeType = "Object";
-            obj_lst.push([
-              key,
-              fileReference[key],
-              nodeType,
-              fileReference,
-              isLocal,
-              isViewObj
-            ]);
-          } else if (fileReference[key]["allOf"]) {
-            for (let i in fileReference[key]["allOf"]) {
-              if (fileReference[key]["allOf"][i]["$ref"]) {
-                superClass_lst.push(fileReference[key]["allOf"][i]["$ref"]);
-              } else {
-                subClass_obj = fileReference[key]["allOf"][i];
-              }
-            }
-            nodeType = "";
-
-            // check if TaxonomyElement, if it only has 1 ref and that ref includes TaxonomyElement in string
-            if (superClass_lst.length == 1) {
-              for (let i in superClass_lst) {
-                if (superClass_lst[i].includes("TaxonomyElement")) {
-                  isTaxonomyElement = true;
-                }
-              }
-            }
-
-            if (isTaxonomyElement) {
-              nodeType = "TaxonomyElement";
-              el_lst.push([
-                key,
-                subClass_obj,
-                nodeType,
-                superClass_lst,
-                fileReference,
-                isLocal
-              ]);
-            } else {
-              nodeType = "ObjWithInherit";
-              obj_lst.push([
-                key,
-                subClass_obj,
-                nodeType,
-                superClass_lst,
-                fileReference,
-                isLocal
-              ]);
-            }
-          } else if (fileReference[key]["type"] == "array") {
-            nodeType = "Array";
-            arr_item = fileReference[key]["items"]["$ref"];
-            arr_lst.push([
-              key,
-              fileReference[key],
-              nodeType,
-              fileReference,
-              isLocal,
-              arr_item
-            ]);
-          } else {
-            immutable_lst.push([
-              key,
-              fileReference[key],
-              fileReference,
-              isLocal
-            ]);
-          }
-        });
-
-        obj_lst.sort();
-        el_lst.sort();
-        immutable_lst.sort();
-        arr_lst.sort();
-        let returnArr = obj_lst
-          .concat(arr_lst)
-          .concat(el_lst)
-          .concat(immutable_lst);
-        
-        if (this.$store.state.viewerMode == 'Edit Mode') {
-          returnArr = returnArr.filter(node => {
-              return miscUtilities.wildcardSearch(node[0].toLowerCase(), this.treeSearchTerm.toLowerCase());
-          });
-        } else if (this.$store.state.viewerMode == 'View Mode') {
-          returnArr = returnArr.filter(node => {
-              return miscUtilities.viewObjFilter(node[0], this.$store.state.viewObjs);
-          });
-        }
-        this.filteredCount = returnArr.length;
-        return returnArr.slice(0, this.numOfElem);
-      }
-    },
-    computedFile() {
-      return this.$store.state.currentFile;
-    }
-  }
-};
-</script>
-
-<style>
-.ob-editor-container {
-  height: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1.17fr;
-  grid-template-rows: 54px 1fr 50px;
-  background-color: #f7f7f7;
-}
-
-.element-selector-body {
-  grid-column: 1 / 2;
-  grid-row: 1 / span 2;
-  border: #d3d3d3 solid 1px;
-  overflow-y: auto;
-  overflow-x: auto;
-  display: grid;
-  background-color: white;
-}
-
-.enable-scroll {
-}
-
-.element-selector-footer {
-  grid-column: 1 / 2;
-  grid-row: 3 /4;
-  border: #d3d3d3 solid 1px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.element-editor-header {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-  border-top: #d3d3d3 solid 1px;
-  border-right: #d3d3d3 solid 1px;
-  border-left: #d3d3d3 solid 1px;
-  padding-left: 15px;
-  display: grid;
-  grid-template-columns: .3fr .7fr;
-}
-
-.editor-header {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  grid-column: 1 / span 2;
-  grid-row: 1 / 2;
-  padding-top: 5px;
-}
-
-.download-button-container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  padding-right: 15px;
-}
-
-.element-editor-body {
-  grid-column: 2 / 3;
-  grid-row: 2 / span 2;
-  border: #d3d3d3 solid 1px;
-  overflow-y: auto;
-}
-
-.element-editor-footer {
-  grid-column: 2 / 3;
-  grid-row: 3 /4;
-  /* border: #d3d3d3 solid 1px; */
-}
-
-.btn {
-  margin-left: 5px;
-}
-
-.tabs-selector {
-  min-height: 100%;
-}
-
-.tree-search {
-  grid-row: 1 / 2;
-  display: flex;
-  align-items: center;
-  padding-left: 15px;
-  width: 559px;
-}
-
-.file-tabs {
-}
-
-.load-more-btn-container {
-  margin-top: 5px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.modal-tabs-container {
-}
-
-#modal-center___BV_modal_body_ {
-  padding: 0px;
-}
-
-#modal-center___BV_modal_header_ {
-  border-bottom: none;
-}
-
-#modal-tabs-inside {
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 10px;
-  height: 300px;
-}
-
-#modal-header- {
-}
-
-#modal-header-inline {
-  display: inline-block;
-}
-
-#info-circle- {
-  margin-left: 6px;
-  margin-bottom: 5px;
-  height: 18px;
-  width: 18px;
-}
-
-.was-validated .custom-file-input:invalid ~ .custom-file-label,
-.custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #dee2e6 !important;
-}
-
-#selected-file-txt {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#readonly-checkbox {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.database-selector-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.database-selector-list {
-  grid-column: 1 / 2;
-  border: 1px solid black;
-  margin: 10px;
-  margin-top: 0px;
-  height: 280px;
-}
-
-.database-selector-list-information {
-  grid-column: 2 / 3;
-}
-
-#db-in-list {
-  list-style: none;
-  border-bottom: 1px solid black;
-}
-
-#db-in-list {
-  padding-left: 5px;
-}
-
-#file-duplicate-error {
-  margin-top: 0px;
-}
-
-#missing-ref-error {
-  margin-top: 0px;
-}
-
-.alert {
-  margin-bottom: 0px !important;
-}
-
-.tab-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.tab-pane {
-  height: 100%;
-}
-
-#unSelectFile-btn {
-  margin-top: 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.card-header {
-  border-radius: 0px !important;
-}
-
-#no-body-card {
-  border: none;
-}
-
-#tab-close {
-  margin-bottom: 1px;
-  margin-left: 6px;
-  border-radius: 50%;
-  height: 18px;
-  width: 18px;
-  padding: 2px;
-}
-
-#tab-close:hover {
-  background-color: #dbdbdc;
-}
-
-.card-body {
-  padding: 0px !important;
-  padding-top: 5px !important;
-}
-
-#new-file-form {
-  padding: 5px 25px 10px 25px;
-}
-
-.tree-search-bar {
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-.load-more-btn-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.nav-tabs .nav-link {
-  border: 1px solid #e6e9ec !important;
-}
-
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-item.show .nav-link {
-  color: #495057 !important;
-  background-color: #fff !important;
-  border-color: #d3d3d3 #d3d3d3 #fff !important;
-}
-</style>
+<template>
+  <div class="ob-editor-container">
+    <div class="element-selector-body" ref="treeContainer">
+      <div class="file-load-tabs">
+        <b-card no-body class="rounded-0" id="no-body-card">
+          <b-tabs
+            v-model="$store.state.currentTabIndexFileEditor"
+            card
+            id="start-tabs"
+          >
+            <template v-slot:tabs-end>
+              <b-nav-item @click="showAddFileModal = true" href="#">
+                <b>+</b>
+              </b-nav-item>
+            </template>
+            <template v-slot:empty>
+              <div class="text-center text-muted">
+                There are no open files<br />
+                Import a new file using the <b>+</b> button above.
+              </div>
+            </template>
+            <b-tab
+              v-for="(item, index) in fileTabs"
+              :key="'dyn-tab-' + index"
+              :title="item.fileName"
+            >
+              <template v-slot:title>
+                <strong>{{ item.fileName }}</strong>
+                <span @click="$bvModal.show('modal-close-file-warning')">
+                  <v-icon name="times" id="tab-close" />
+                </span>
+              </template>
+              <span v-if="$store.state.currentFile">
+                <div class="tree-search" v-if="$store.state.viewerMode == 'Edit Mode'">
+                  <b-form-input
+                    class="tree-search-bar"
+                    v-model="treeSearchTerm"
+                    placeholder="Search element names... (wildcard: * )"
+                  >
+                  </b-form-input>
+                </div>
+                <span :key="$store.state.refreshKey">
+                  <span v-for="arr in sortedObjects">
+                    <!-- obj node -->
+                    <UploadOBTree
+                      v-if="arr[2] == 'Object'"
+                      :name="arr[0]"
+                      :children="arr[1].properties"
+                      :depth="0"
+                      :expandAllObjects="expandAllObjects"
+                      :nodeDescription="arr[1].description"
+                      :isObj="true"
+                      parent="root"
+                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
+                      type="object"
+                      :ref="defnRef(arr[0], item.fileName)"
+                      :nameRef="defnRef(arr[0], item.fileName)"
+                      :file="computedFile"
+                      :isTaxonomyElement="false"
+                      :referenceFile="arr[3]"
+                      :isLocal="arr[4]"
+                      :viewObj="arr[5]"
+                      :isTopLevel="true"
+                      :topLevelExpand="true"
+                    ></UploadOBTree>
+
+                    <UploadOBTree
+                      v-else-if="arr[2] == 'Array'"
+                      :name="arr[0]"
+                      :children="getArrayItemAsChildren(arr[3], arr[5], arr[0])"
+                      :depth="0"
+                      :expandAllObjects="expandAllObjects"
+                      :nodeDescription="arr[1].description"
+                      :isObj="false"
+                      parent="root"
+                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
+                      type="array"
+                      :ref="defnRef(arr[0], item.fileName)"
+                      :nameRef="defnRef(arr[0], item.fileName)"
+                      :file="computedFile"
+                      :isArray="true"
+                      :arrayItemRef="arr[5]"
+                      :arrayItemType="getArrItemType(arr[5])"
+                      :referenceFile="arr[3]"
+                      :isLocal="arr[4]"
+                      :viewObj="false"
+                      :isTopLevel="true"
+                      :topLevelExpand="true"
+                    ></UploadOBTree>
+
+                    <!-- taxonomy element -->
+                    <UploadOBTree
+                      v-else-if="arr[2] == 'TaxonomyElement'"
+                      :isObj="false"
+                      :name="arr[0]"
+                      :children="subClassChildren(arr[4], arr[3], arr[1], arr[0])"
+                      :depth="0"
+                      :expandAllObjects="expandAllObjects"
+                      :nodeDescription="getNodeDescription(arr[1])"
+                      parent="root"
+                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
+                      type="object"
+                      :ref="defnRef(arr[0], item.fileName)"
+                      :nameRef="defnRef(arr[0], item.fileName)"
+                      :file="computedFile"
+                      :isTaxonomyElement="true"
+                      :referenceFile="arr[4]"
+                      :isLocal="arr[5]"
+                      :viewObj="false"
+                      :isTopLevel="true"
+                    >
+                    </UploadOBTree>
+
+                    <!-- allOf Obj -->
+                    <UploadOBTree
+                      v-else-if="arr[2] == 'ObjWithInherit'"
+                      :name="arr[0]"
+                      :children="subClassChildren(arr[4], arr[3], arr[1], arr[0])"
+                      :depth="0"
+                      :expandAllObjects="expandAllObjects"
+                      :nodeDescription="getNodeDescription(arr[1])"
+                      :isObj="true"
+                      parent="root"
+                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
+                      type="object"
+                      :ref="defnRef(arr[0], item.fileName)"
+                      :nameRef="defnRef(arr[0], item.fileName)"
+                      :file="computedFile"
+                      :isTaxonomyElement="false"
+                      :referenceFile="arr[4]"
+                      :isLocal="arr[5]"
+                      :viewObj="false"
+                      :isTopLevel="true"
+                    ></UploadOBTree>
+
+                    <UploadOBTree
+                      v-else
+                      :isObj="false"
+                      :name="arr[0]"
+                      :depth="0"
+                      :expandAllObjects="expandAllObjects"
+                      :nodeDescription="getNodeDescription(arr[1])"
+                      parent="root"
+                      :parent_trail="defnRefParentTrailStart(arr[0], item.fileName)"
+                      type="string"
+                      :ref="defnRef(arr[0], item.fileName)"
+                      :nameRef="defnRef(arr[0], item.fileName)"
+                      :file="computedFile"
+                      :isTaxonomyElement="false"
+                      :referenceFile="arr[2]"
+                      :isLocal="arr[3]"
+                      :viewObj="false"
+                      :isTopLevel="true"
+                    >
+                    </UploadOBTree>
+                  </span>
+                </span>
+                <div class="load-more-btn-container">
+                  <b-button @click="loadMore" v-if="showLoadMore"
+                    >Load more</b-button
+                  >
+                </div>
+              </span>
+            </b-tab>
+          </b-tabs>
+        </b-card>
+        <div id="modal-container">
+          <b-modal id="modal-center" v-model="showAddFileModal">
+            <template v-slot:modal-header>
+              <div id="modal-header-">
+                <h5 id="modal-header-inline">Load Schema</h5>
+                <v-icon
+                  name="info-circle"
+                  id="info-circle-"
+                  v-b-popover.hover.right="
+                    'Choose an OB OpenAPI Definition File from your own system or load a Master File from View/Edit Dependency. '
+                  "
+                />
+              </div>
+            </template>
+            <template v-slot:modal-footer>
+              <div class="w-100">
+                <b-button
+                  variant="primary"
+                  class="float-right"
+                  @click="loadFile"
+                  :disabled="!file"
+                  v-if="tabIndexFileUpload == 0"
+                >
+                  Open
+                </b-button>
+                <b-button
+                  variant="primary"
+                  class="float-right"
+                  @click="createFile"
+                  v-if="tabIndexFileUpload == 1"
+                >
+                  Create
+                </b-button>
+                <b-button
+                  variant="primary"
+                  class="float-right"
+                  @click="loadDependencyFile"
+                  :disabled="!file"
+                  v-if="tabIndexFileUpload == 2"
+                >
+                  Open
+                </b-button>
+                <b-button
+                  variant="danger"
+                  class="float-right"
+                  @click="cancelLoadModal"
+                >
+                  Cancel
+                </b-button>
+              </div>
+            </template>
+            <div id="modal-tabs-container">
+              <b-tabs
+                content-class="mt-3"
+                id="modal-tabs"
+                no-fade
+                v-model="tabIndexFileUpload"
+              >
+                <div id="modal-tabs-inside">
+                  <b-tab title="From Local" active>
+                    <div class="tab-container">
+                      <div id="file-selector-container">
+                        <b-form-file
+                          v-model="file"
+                          :state="Boolean(file)"
+                          placeholder="Choose your OpenAPI Schema File..."
+                          v-if="!file"
+                        ></b-form-file>
+                        <span id="selected-file-txt" v-else>
+                          Selected file:
+                          <strong>
+                            {{ file ? file.name : "" }}
+                          </strong>
+                        </span>
+                        <br />
+                        <span id="unSelectFile-btn" v-if="file">
+                          <b-button @click="unSelectFile">
+                            Unselect File
+                          </b-button>
+                        </span>
+                      </div>
+                      <div class="error-container">
+                        <b-alert
+                          id="file-duplicate-error"
+                          v-model="fileAlreadyOpened"
+                          variant="danger"
+                          dismissible
+                        >
+                          File already opened. Cannot open the same file twice.
+                        </b-alert>
+                        <b-alert
+                          id="missing-ref-error"
+                          v-model="showMissingRefsErr"
+                          variant="danger"
+                          dismissible
+                        >
+                          <p>
+                            Missing references:
+                            <strong>{{ missingRefsRequired }}</strong
+                            ><br />
+                            Load in missing files first to load this file in.
+                          </p>
+                        </b-alert>
+                      </div>
+                    </div>
+                  </b-tab>
+                  <b-tab title="Create New File">
+                    <div id="new-file-form">
+                      <b-form-group
+                        id="new-file-input-group-1"
+                        label="Definition file title:"
+                        label-for="new-file-input-1"
+                      >
+                        <b-form-input
+                          id="new-file-input-1"
+                          v-model="newFileForm.fileTitle"
+                          placeholder="Enter title for your new definition file"
+                        ></b-form-input>
+                      </b-form-group>
+
+                      <b-form-group
+                        id="new-file-input-group-2"
+                        label="Definition File Description:"
+                        label-for="new-file-input-2"
+                      >
+                        <b-form-input
+                          id="new-file-input-2"
+                          v-model="newFileForm.fileDescription"
+                          placeholder="Enter description for your new definition file"
+                        ></b-form-input>
+                      </b-form-group>
+
+                      <b-form-group
+                        id="new-file-input-group-3"
+                        label="Definition Filename:"
+                        label-for="new-file-input-3"
+                      >
+                        <b-form-input
+                          id="new-file-input-3"
+                          v-model="newFileForm.fileName"
+                          placeholder="Enter filename for your new definition file."
+                        ></b-form-input>
+                      </b-form-group>
+                    </div>
+                  </b-tab>
+                  <b-tab title="View/Edit Dependency">
+                    <div class="database-selector-container">
+                      <div class="database-selector-list">
+                        <li
+                          v-for="(value, name, index) in dbList"
+                          id="db-in-list"
+                          @click="selectDBFile(index, name)"
+                          :class="{ 'selected-node': index == selectedIndex }"
+                        >
+                          <span id="db-list-name">
+                            {{ name }}
+                          </span>
+                        </li>
+                      </div>
+                      <div class="database-selector-list-information">
+                        <span v-if="selectedDependencyInfo">
+                          <p>{{ selectedDependencyInfo }}</p>
+                          <!-- <b-form-checkbox
+                                            v-model="readOnly"
+                                            name="checkbox-2"
+                                            value="true"
+                                            unchecked-value="false"
+                                        >
+                                            Read only
+                                        </b-form-checkbox> -->
+                        </span>
+                      </div>
+                    </div>
+                  </b-tab>
+                </div>
+              </b-tabs>
+            </div>
+          </b-modal>
+        </div>
+      </div>
+    </div>
+    <div class="element-selector-footer">
+      <b-button variant="primary" size="sm" @click="toggleExpandAll" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
+        <span v-if="expandAllObjects">
+          Collapse All
+        </span>
+        <span v-else-if="!expandAllObjects">
+          Expand All
+        </span>
+      </b-button>
+
+      <b-button variant="primary" size="sm" @click="showCreateDefinitionForm" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
+        Create New Definition
+      </b-button>
+
+      <b-button variant="primary" size="sm" @click="showLoadInDefinitionForm" :disabled="!$store.state.currentFile" v-if="$store.state.viewerMode == 'Edit Mode'">
+        Load In Definition
+      </b-button>
+
+      <b-button variant="primary" size="sm" @click="showEditItemTypesMain" v-if="$store.state.viewerMode == 'Edit Mode'" :disabled="!$store.state.currentFile">Item Types Editor</b-button>
+    </div>
+    <div class="element-editor-header">
+      <div class="editor-header">
+        <h4 v-if="$store.state.activeEditorView == 'DetailedNodeView'">Detailed View</h4>
+        <h4 v-if="$store.state.activeEditorView == 'EditDefinition'">
+          Edit <strong>{{ $store.state.isSelected }}</strong>
+        </h4>
+        <h4 v-if="$store.state.activeEditorView == 'CreateDefinitionForm'">
+          Create Definition
+        </h4>
+        <h4 v-if="$store.state.activeEditorView == 'LoadInDefinition'">Load In Definition</h4>
+        <h4 v-if="$store.state.activeEditorView == 'EditItemTypesMain'">
+          <h4 v-if="!$store.state.activeItemTypesView">Item Types Editor</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'ViewAllItemTypes'">View All Item Types</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'CreateItemType'">Create Item Type</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'EditItemType'">Edit Item Type</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'CreateItemTypeGroup'">Create Item Type Group</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'EditItemTypeGroup'">Edit Item Type Group</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'DeleteItemTypeGroup'">Delete Item Type Group</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'ViewAllItemTypeGroups'">View All Item Type Groups</h4>
+          <h4 v-else-if="$store.state.activeItemTypesView == 'DeleteItemType'">Delete Item Type</h4>
+        </h4>
+      </div>
+      <div class="download-button-container">
+        <b-button
+          variant="primary"
+          v-b-modal.export-modal
+          @click="exportModalOpened('sampleJSON')"
+          :disabled="!$store.state.currentFile"
+          size="sm"
+          v-if="$store.state.viewerMode == 'Edit Mode'"
+          >Create Sample JSON</b-button
+        >
+        <b-button
+          variant="primary"
+          v-b-modal.export-modal
+          @click="exportModalOpened('taxonomy')"
+          :disabled="!$store.state.currentFile"
+          size="sm"
+          v-if="$store.state.viewerMode == 'Edit Mode'"
+          >Save As</b-button
+        >
+      </div>
+    </div>
+    <div class="element-editor-body">
+      <!-- <DetailedNodeView v-if="$store.state.showDetailedView" />
+      <EditDefinition v-if="$store.state.showEditNodeView" />
+      <CreateDefinitionForm v-show="$store.state.showCreateDefinitionForm" />
+      <LoadInDefinition v-if="$store.state.showLoadInDefinitionForm" /> -->
+      <component :is="$store.state.activeEditorView"></component>
+    </div>
+
+    <!-- Modals -->
+    <div class="element-editor-footer"></div>
+    <ExportFormModal />
+    <span id="modal-container">
+      <b-modal id="modal-close-file-warning">
+        <template v-slot:modal-title>
+          Close File?
+        </template>
+        <template v-slot:modal-footer>
+          <div class="w-100">
+            <b-button
+              class="float-right"
+              variant="primary"
+              @click="closeTabWarning()"
+              >OK</b-button
+            >
+            <b-button
+              class="float-right"
+              @click="$bvModal.hide('modal-close-file-warning')"
+              >Cancel</b-button
+            >
+          </div>
+        </template>
+        <template v-slot:default>
+          Are you sure you want to close the file? Any changes not exported will
+          not be saved. Make sure this file is not being referenced in another
+          loaded files or it may cause errors.
+        </template>
+      </b-modal>
+    </span>
+  </div>
+</template>
+
+<script>
+import UploadOBTree from "../components/UploadOBTree.vue";
+import DetailedNodeView from "../components/DetailedNodeView.vue";
+import CreateDefinitionForm from "../components/forms/CreateDefinitionForm.vue";
+import ExportFormModal from "../components/forms/ExportFormModal";
+import LoadInDefinition from "../components/EditDefinition/LoadInDefinition";
+import EditDefinition from "../components/EditDefinition/EditDefinition";
+import EditItemTypesMain from "../components/ItemTypes/EditItemTypesMain"
+import * as miscUtilities from "../utils/miscUtilities";
+import * as JSONEditor from "../utils/JSONEditor.js";
+import SolarTaxonomyMaster from "@/assets/master_files/Master-Solar-Taxonomy.json";
+import OBOpenAPIMaster from "@/assets/master_files/Master-OB-OpenAPI.json";
+import FileSaver from "file-saver";
+
+export default {
+  components: {
+    UploadOBTree,
+    DetailedNodeView,
+    CreateDefinitionForm,
+    ExportFormModal,
+    EditDefinition,
+    LoadInDefinition,
+    EditItemTypesMain
+  },
+  created() {
+    // if query params, create cookie
+    // query param form = ?views=
+    if (Object.keys(this.$route.query).length !== 0) {
+      miscUtilities.eraseCookie('viewObjs')
+      let view_objects = this.$route.query['views']
+      view_objects = view_objects.split(',')
+      for (let i in view_objects) {
+        this.$store.commit("addViewObj", {
+          el: view_objects[i],
+          mode: 'create_cookie'
+        })
+      }
+    } else {
+      let viewObjsArr = JSON.parse(miscUtilities.readCookie('viewObjs'))
+      if (viewObjsArr == null) {
+        viewObjsArr = []
+      }
+      // if you have cookie, read it, if not switch to edit mode
+      if (viewObjsArr.length != 0) {
+        for (let i in viewObjsArr) {
+          this.$store.commit("addViewObj", {
+            el: viewObjsArr[i],
+            mode: 'init'
+          });
+        }
+      } else {
+        this.$store.commit('clearEditorView')
+        this.$store.commit('changeViewerMode', 'Edit Mode')
+      }
+
+    }
+
+    this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"] = {
+      fullFileForExport: SolarTaxonomyMaster,
+      file: SolarTaxonomyMaster.components.schemas,
+      fileName: "Master-Solar-Taxonomy.json"
+    };
+
+    this.$store.state.loadedFiles["Master-OB-OpenAPI.json"] = {
+      fullFileForExport: OBOpenAPIMaster,
+      file: OBOpenAPIMaster.components.schemas,
+      fileName: "Master-OB-OpenAPI.json"
+    };
+
+    // load in item type for default definition files (solar and ob)
+    if (this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-types']) {
+      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_types"] = this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-types']
+    } else {
+      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_types"] = {}
+    }
+
+    if (this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-types']) {
+      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_types"] = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-types']
+    } else {
+      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_types"] = {}
+    }
+
+    // load in item type groups for default definition files (solar and ob)
+    if (this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-type-groups']) {
+      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_type_groups"] = this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]['fullFileForExport']['x-ob-item-type-groups']
+    } else {
+      this.$store.state.loadedFiles["Master-Solar-Taxonomy.json"]["item_type_groups"] = {}
+    }
+
+    if (this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-type-groups']) {
+      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_type_groups"] = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]['fullFileForExport']['x-ob-item-type-groups']
+    } else {
+      this.$store.state.loadedFiles["Master-OB-OpenAPI.json"]["item_type_groups"] = {}
+    }
+
+    this.file = this.$store.state.loadedFiles["Master-OB-OpenAPI.json"];
+    this.loadDependencyFile()
+  },
+  data() {
+    return {
+      file: null,
+      expandAllObjects: true,
+      detailedView: true,
+      editorView: false,
+      allNodesFlat: [],
+      numOfElem: 50,
+      showLoadMore: false,
+      filteredCount: 0,
+      tabs: [],
+      tabCounter: 0,
+      showAddFileModal: false,
+      tabIndexFileUpload: null,
+      tabIndexEditorView: null,
+      readOnly: false,
+      selectedIndex: null,
+      selectedDependencyFileName: null,
+      selectedDependencyInfo: null,
+      dbList: {
+        "Master-Solar-Taxonomy.json": {
+          information:
+            "This is the latest release of the Orange Button Solar Taxonomy",
+          fileName: "Master-Solar-Taxonomy.json"
+        },
+        "Master-OB-OpenAPI.json": {
+          information:
+            "This is the latest release of the Orange Button OpenAPI Master Document",
+          fileName: "Master-OB-OpenAPI.json"
+        }
+      },
+      fileAlreadyOpened: false,
+      currentTabIndex: null,
+      newFileForm: {
+        fileTitle: "",
+        fileDescription: "",
+        fileName: ""
+      },
+      missingRefsRequired: [],
+      showMissingRefsErr: false,
+      treeSearchTerm: ""
+    };
+  },
+  methods: {
+    getArrItemType(arrItemRef) {
+      return miscUtilities.getArrayItemType(
+        arrItemRef,
+        this.$store.state.loadedFiles,
+        this.$store.state.currentFile
+      );
+    },
+    fileToJSON() {
+      if (this.file) {
+        let reader = new FileReader();
+        reader.readAsText(this.file);
+        reader.onload = () => {
+          this.$store.commit("updateOriginalJSONFile", reader.result);
+        };
+
+        reader.onerror = function() {
+          console.log(reader.error);
+        };
+      }
+    },
+    createFile() {
+      let defnFileTitle = this.newFileForm.fileTitle;
+      let defnFileDescription = this.newFileForm.fileDescription;
+      let defnFileName = this.newFileForm.fileName;
+
+      let check_duplicate_file = false;
+
+      if (!defnFileTitle) {
+        defnFileTitle = "Placeholder Title";
+      }
+
+      if (!defnFileDescription) {
+        defnFileDescription = "Placeholder Description";
+      }
+
+      if (!defnFileDescription) {
+        defnFileName = "OB-OpenAPI-DefnFile.json";
+      }
+
+      let newFileObj = JSONEditor.createNewDefnFile(
+        defnFileTitle,
+        defnFileDescription,
+        defnFileName
+      );
+
+      for (let i in this.$store.state.fileTabs) {
+        if (this.$store.state.fileTabs[i].fileName == newFileObj.fileName) {
+          check_duplicate_file = true;
+        }
+      }
+
+      if (check_duplicate_file) {
+        this.fileAlreadyOpened = true;
+      } else {
+        this.$store.state.fileTabs.push(newFileObj);
+        this.showAddFileModal = false;
+        this.$store.state.loadedFiles[this.newFileForm.fileName] = newFileObj;
+      }
+    },
+
+    fromSuperClass(childNode) {
+      if (childNode["fromSuperClass"]) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    exportFile() {
+      this.$store.commit("exportFile");
+    },
+    showCreateDefinitionForm() {
+      this.$store.commit("selectNone")
+      this.$store.commit("showCreateDefinitionForm");
+      this.$store.commit("refreshCreateDefnInputs", true);
+    },
+    showLoadInDefinitionForm() {
+      this.$store.commit("selectNone")
+      this.$store.commit("showLoadInDefinitionForm");
+    },
+    showEditItemTypesMain() {
+      this.$store.commit("selectNone")
+      this.$store.commit("showNoItemTypesViews")
+      this.$store.commit("showEditItemTypesMain");
+    },
+    toggleExpandAll() {
+      this.expandAllObjects = !this.expandAllObjects;
+    },
+    objectRef(nodeName, fileName) {
+      return fileName + "-" + nodeName + "-root";
+    },
+    setExportFile(fileToExportType) {
+      let fileToExport = null;
+      let exportModalHeader = "";
+      if (fileToExportType === "taxonomy") {
+        fileToExport = this.$store.state.currentFile.fullFileForExport;
+        exportModalHeader = "Save as...";
+      } else if (fileToExportType === "sampleJSON") {
+        fileToExport = miscUtilities.getSampleJSON(this.$store.state.currentFile.fileName, this.$store.state);
+        exportModalHeader = "Create Sample JSON";
+      }
+      this.$store.commit("setFileToExport", {
+        fileToExport: fileToExport,
+        fileToExportName: this.$store.state.currentFile.fileName,
+        exportModalHeader: exportModalHeader
+      });
+    },
+    exportModalOpened(fileToExportType) {
+      this.setExportFile(fileToExportType);
+      this.$store.commit("setShowExportModal", true);
+    },
+    // returns object containing all children of the superClass and subClass with no duplicates, while labeling objects/elements that are inherited for signifying
+    subClassChildren(file, superClassRef, subClassObj, key) {
+      return miscUtilities.getSuperClassChildren(
+        file,
+        superClassRef,
+        subClassObj,
+        null,
+        key,
+        this.$store.state.loadedFiles
+      );
+    },
+    getArrayItemAsChildren(file, arrayItemRef, key) {
+      return miscUtilities.getArrayItemAsChildren(
+        file,
+        arrayItemRef,
+        key,
+        this.$store.state.loadedFiles
+      );
+    },
+
+    loadMore() {
+      this.numOfElem += 50;
+      if (this.numOfElem + 1 >= this.filteredCount) {
+        this.showLoadMore = false;
+      } else {
+        this.showLoadMore = true;
+      }
+    },
+
+    selectDBFile(index, name) {
+      this.selectedIndex = index;
+      this.selectedDependencyFileName = this.dbList[name]["fileName"];
+      this.selectedDependencyInfo = this.dbList[name]["information"];
+      this.file = this.$store.state.loadedFiles[name];
+    },
+    unSelectFile() {
+      this.file = null;
+      this.showMissingRefsErr = false;
+      this.fileAlreadyOpened = false;
+    },
+    loadFile() {
+      let refsRequired = [];
+      this.missingRefsRequired = [];
+      this.showMissingRefsErr = false;
+      let file_obj = {
+        fileName: this.file.name
+      };
+
+      let reader = new FileReader();
+      let check_duplicate_file = false;
+
+      reader.readAsText(this.file);
+      reader.onload = () => {
+        file_obj["fullFileForExport"] = JSON.parse(reader.result);
+        file_obj["file"] = file_obj["fullFileForExport"].components.schemas;
+
+        // todo: refactor to make into a function that is also used in create() 
+        // stores item types and item types groups of loaded file
+        if (file_obj["fullFileForExport"]["x-ob-item-types"]) {
+          file_obj["item_types"] = file_obj["fullFileForExport"]["x-ob-item-types"]
+        } else {
+          file_obj["item_types"] = {}
+        }
+
+        if (file_obj["fullFileForExport"]["x-ob-item-type-groups"]) {
+          file_obj["item_type_groups"] = file_obj["fullFileForExport"]["x-ob-item-type-groups"]
+        } else {
+          file_obj["item_type_groups"] = {}
+        }
+
+        for (let i in this.$store.state.fileTabs) {
+          if (this.$store.state.fileTabs[i].fileName == file_obj.fileName) {
+            check_duplicate_file = true;
+          }
+        }
+
+        if (check_duplicate_file) {
+          this.fileAlreadyOpened = true;
+        } else {
+          this.$store.state.fileTabs.push(file_obj);
+          this.showAddFileModal = false;
+          this.$store.commit("loadFile", file_obj);
+        }
+      };
+    },
+    cancelLoadModal() {
+      this.showAddFileModal = false;
+    },
+    closeTabWarning() {
+      this.closeTab(this.$store.state.currentTabIndexFileEditor);
+      this.$bvModal.hide("modal-close-file-warning");
+    },
+    closeTab(x) {
+      this.$store.commit("removeFile", this.$store.state.currentFile.fileName);
+      this.$store.state.currentFile = null;
+      this.$store.state.fileTabs.splice(x, 1);
+      this.$store.state.currentFile = this.$store.state.fileTabs[
+        this.$store.state.currentTabIndexFileEditor
+      ];
+      if (this.$store.state.currentFile)
+        this.$store.state.selectedFileName = this.$store.state.currentFile["fileName"]
+    },
+    getNodeDescription(nodeObj) {
+      return nodeObj["description"];
+    },
+    loadDependencyFile() {
+      let check_duplicate_file = false;
+      let file_obj = this.file;
+      for (let i in this.$store.state.fileTabs) {
+        if (this.$store.state.fileTabs[i].fileName == file_obj.fileName) {
+          check_duplicate_file = true;
+        }
+      }
+
+      if (check_duplicate_file) {
+        this.fileAlreadyOpened = true;
+      } else {
+        this.$store.state.fileTabs.push(file_obj);
+        this.showAddFileModal = false;
+      }
+    },
+    defnRef(nodeName, fileName) {
+      let defnRef =
+        "root" + "-" + miscUtilities.generateUniqueRef(nodeName, fileName);
+      return defnRef;
+    },
+    defnRefParentTrailStart(nodeName, fileName) {
+      return miscUtilities.generateUniqueRef(nodeName, fileName, "root");
+    },
+    isViewObj(el) {
+      if (this.$store.state.viewObjs.includes(el)) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  watch: {
+    treeSearchTerm() {
+        this.$store.commit('reRenderList')
+        this.$store.commit('clearEditorView')
+    },
+    tabIndexFileUpload() {
+      this.selectedIndex = null;
+      this.selectedDependencyFileName = null;
+      this.selectedDependencyInfo = null;
+      this.file = null;
+      this.newFileForm.fileTitle = null;
+      this.newFileForm.fileDescription = null;
+      this.newFileForm.fileName = null;
+    },
+    "$store.state.currentTabIndexFileEditor"() {
+      this.$store.state.currentFile = this.$store.state.fileTabs[
+        this.$store.state.currentTabIndexFileEditor
+      ];
+
+      if (this.$store.state.currentFile)
+        this.$store.state.selectedFileName = this.$store.state.currentFile["fileName"]
+
+      this.$store.commit('showNoView')
+
+      this.$store.state.isSelected = null;
+      this.$store.state.nameRef = null;
+    },
+    file() {
+      this.fileToJSON();
+    },
+
+    "$store.state.selectDefinitionNode"() {
+      let yCoord = 0;
+      let notRoot = false;
+      let firstHyphenIndex = 0;
+      let secondHyphenIndex = 0;
+      let nameRefOfRoot = "";
+
+      if (!this.$store.state.nameRef.includes("root-")) {
+        notRoot = true;
+        firstHyphenIndex = this.$store.state.nameRef.indexOf("-");
+        secondHyphenIndex = this.$store.state.nameRef.indexOf(
+          "-",
+          firstHyphenIndex + 1
+        );
+        nameRefOfRoot =
+          "root-" +
+          this.$store.state.nameRef.slice(0, firstHyphenIndex + 1) +
+          this.$store.state.nameRef.slice(secondHyphenIndex + 1);
+      }
+
+      if (this.$store.state.selectDefinitionNode == true && notRoot) {
+        if (
+          this.$store.state.selectDefinitionNode == true &&
+          this.$store.state.nodeType != "object"
+        ) {
+          yCoord = this.$refs[nameRefOfRoot][0].$el.offsetTop;
+
+          this.$refs.treeContainer.scrollTop = yCoord - 200;
+          this.$store.commit("toggleSelectDefinitionNode");
+          this.$store.state.nameRef = nameRefOfRoot;
+        } else if (
+          this.$store.state.selectDefinitionNode == true &&
+          this.$store.state.nodeType == "object"
+        ) {
+          yCoord = this.$refs[nameRefOfRoot][0].$el.offsetTop;
+
+          this.$refs.treeContainer.scrollTop = yCoord - 200;
+          this.$store.state.nameRef = nameRefOfRoot;
+          this.$store.commit("toggleSelectDefinitionNode");
+        }
+        this.$store.state.nodeParent = "root";
+      }
+    },
+    "$store.state.inXBRLTab"() {
+      this.numOfElem = 50;
+      this.$store.state.treeSearchTerm = "";
+      this.$store.state.nameRef = "";
+      this.$store.commit("showNoView")
+    },
+    showAddFileModal() {
+      this.file = null;
+      this.fileAlreadyOpened = false;
+      this.showMissingRefsErr = false;
+    },
+    tabIndex() {
+      this.readOnly = false;
+      this.file = null;
+      this.selectedIndex = null;
+      this.selectedDependencyInfo = null;
+      this.selectedDependencyFileName = null;
+    },
+    file() {
+      if (this.file) {
+        // console.log(this.file.name)
+      } else {
+        // console.log(this.file)
+      }
+    },
+    selectedIndex() {
+      this.readOnly = false;
+    },
+    filteredCount() {
+      this.numOfElem = 50;
+      if (this.numOfElem + 1 >= this.filteredCount) {
+        this.showLoadMore = false;
+      } else {
+        this.showLoadMore = true;
+      }
+    }
+  },
+  computed: {
+    fileTabs() {
+      return this.$store.state.fileTabs;
+    },
+    sortedObjects() {
+      let obj_lst = [];
+      let el_lst = [];
+      let arr_lst = [];
+      let arr_item = "";
+      let immutable_lst = [];
+      let superClass_lst = [];
+      let subClass_obj = {};
+      let immutable_OB = [
+        "Value",
+        "Unit",
+        "Decimals",
+        "Precision",
+        "TaxonomyElementString",
+        "TaxonomyElementNumber",
+        "TaxonomyElementInteger",
+        "TaxonomyElementBoolean"
+      ];
+      let nodeType = "";
+      let defnRef = "";
+      let refFileContext = "LOCAL";
+      let isLocal = true;
+
+      let isTaxonomyElement = false;
+
+      //file parameter is the local file
+      //fileReference is the reference file
+      let fileReference = this.$store.state.currentFile.file;
+
+      if (fileReference) {
+        Object.keys(fileReference).forEach(key => {
+          isTaxonomyElement = false;
+          isLocal = true;
+          superClass_lst = [];
+          fileReference = this.$store.state.currentFile.file;
+          let isViewObj = this.isViewObj(key)
+
+          defnRef = miscUtilities.getDefnRef(
+            fileReference,
+            key,
+            null,
+            this.$store.state.loadedFiles
+          );
+
+          refFileContext = miscUtilities.getRefFileContext(defnRef);
+
+          if (refFileContext != "LOCAL") {
+            fileReference = this.$store.state.loadedFiles[refFileContext][
+              "file"
+            ];
+            isLocal = false;
+          }
+
+          if (fileReference[key]["type"] == "object") {
+            nodeType = "Object";
+            obj_lst.push([
+              key,
+              fileReference[key],
+              nodeType,
+              fileReference,
+              isLocal,
+              isViewObj
+            ]);
+          } else if (fileReference[key]["allOf"]) {
+            for (let i in fileReference[key]["allOf"]) {
+              if (fileReference[key]["allOf"][i]["$ref"]) {
+                superClass_lst.push(fileReference[key]["allOf"][i]["$ref"]);
+              } else {
+                subClass_obj = fileReference[key]["allOf"][i];
+              }
+            }
+            nodeType = "";
+
+            // check if TaxonomyElement, if it only has 1 ref and that ref includes TaxonomyElement in string
+            if (superClass_lst.length == 1) {
+              for (let i in superClass_lst) {
+                if (superClass_lst[i].includes("TaxonomyElement")) {
+                  isTaxonomyElement = true;
+                }
+              }
+            }
+
+            if (isTaxonomyElement) {
+              nodeType = "TaxonomyElement";
+              el_lst.push([
+                key,
+                subClass_obj,
+                nodeType,
+                superClass_lst,
+                fileReference,
+                isLocal
+              ]);
+            } else {
+              nodeType = "ObjWithInherit";
+              obj_lst.push([
+                key,
+                subClass_obj,
+                nodeType,
+                superClass_lst,
+                fileReference,
+                isLocal
+              ]);
+            }
+          } else if (fileReference[key]["type"] == "array") {
+            nodeType = "Array";
+            arr_item = fileReference[key]["items"]["$ref"];
+            arr_lst.push([
+              key,
+              fileReference[key],
+              nodeType,
+              fileReference,
+              isLocal,
+              arr_item
+            ]);
+          } else {
+            immutable_lst.push([
+              key,
+              fileReference[key],
+              fileReference,
+              isLocal
+            ]);
+          }
+        });
+
+        obj_lst.sort();
+        el_lst.sort();
+        immutable_lst.sort();
+        arr_lst.sort();
+        let returnArr = obj_lst
+          .concat(arr_lst)
+          .concat(el_lst)
+          .concat(immutable_lst);
+        
+        if (this.$store.state.viewerMode == 'Edit Mode') {
+          returnArr = returnArr.filter(node => {
+              return miscUtilities.wildcardSearch(node[0].toLowerCase(), this.treeSearchTerm.toLowerCase());
+          });
+        } else if (this.$store.state.viewerMode == 'View Mode') {
+          returnArr = returnArr.filter(node => {
+              return miscUtilities.viewObjFilter(node[0], this.$store.state.viewObjs);
+          });
+        }
+        this.filteredCount = returnArr.length;
+        return returnArr.slice(0, this.numOfElem);
+      }
+    },
+    computedFile() {
+      return this.$store.state.currentFile;
+    }
+  }
+};
+</script>
+
+<style>
+.ob-editor-container {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1.17fr;
+  grid-template-rows: 54px 1fr 50px;
+  background-color: #f7f7f7;
+}
+
+.element-selector-body {
+  grid-column: 1 / 2;
+  grid-row: 1 / span 2;
+  border: #d3d3d3 solid 1px;
+  overflow-y: auto;
+  overflow-x: auto;
+  display: grid;
+  background-color: white;
+}
+
+.enable-scroll {
+}
+
+.element-selector-footer {
+  grid-column: 1 / 2;
+  grid-row: 3 /4;
+  border: #d3d3d3 solid 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.element-editor-header {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+  border-top: #d3d3d3 solid 1px;
+  border-right: #d3d3d3 solid 1px;
+  border-left: #d3d3d3 solid 1px;
+  padding-left: 15px;
+  display: grid;
+  grid-template-columns: .3fr .7fr;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  grid-column: 1 / span 2;
+  grid-row: 1 / 2;
+  padding-top: 5px;
+}
+
+.download-button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  padding-right: 15px;
+}
+
+.element-editor-body {
+  grid-column: 2 / 3;
+  grid-row: 2 / span 2;
+  border: #d3d3d3 solid 1px;
+  overflow-y: auto;
+}
+
+.element-editor-footer {
+  grid-column: 2 / 3;
+  grid-row: 3 /4;
+  /* border: #d3d3d3 solid 1px; */
+}
+
+.btn {
+  margin-left: 5px;
+}
+
+.tabs-selector {
+  min-height: 100%;
+}
+
+.tree-search {
+  grid-row: 1 / 2;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  width: 559px;
+}
+
+.file-tabs {
+}
+
+.load-more-btn-container {
+  margin-top: 5px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.modal-tabs-container {
+}
+
+#modal-center___BV_modal_body_ {
+  padding: 0px;
+}
+
+#modal-center___BV_modal_header_ {
+  border-bottom: none;
+}
+
+#modal-tabs-inside {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  height: 300px;
+}
+
+#modal-header- {
+}
+
+#modal-header-inline {
+  display: inline-block;
+}
+
+#info-circle- {
+  margin-left: 6px;
+  margin-bottom: 5px;
+  height: 18px;
+  width: 18px;
+}
+
+.was-validated .custom-file-input:invalid ~ .custom-file-label,
+.custom-file-input.is-invalid ~ .custom-file-label {
+  border-color: #dee2e6 !important;
+}
+
+#selected-file-txt {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#readonly-checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.database-selector-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.database-selector-list {
+  grid-column: 1 / 2;
+  border: 1px solid black;
+  margin: 10px;
+  margin-top: 0px;
+  height: 280px;
+}
+
+.database-selector-list-information {
+  grid-column: 2 / 3;
+}
+
+#db-in-list {
+  list-style: none;
+  border-bottom: 1px solid black;
+}
+
+#db-in-list {
+  padding-left: 5px;
+}
+
+#file-duplicate-error {
+  margin-top: 0px;
+}
+
+#missing-ref-error {
+  margin-top: 0px;
+}
+
+.alert {
+  margin-bottom: 0px !important;
+}
+
+.tab-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.tab-pane {
+  height: 100%;
+}
+
+#unSelectFile-btn {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-header {
+  border-radius: 0px !important;
+}
+
+#no-body-card {
+  border: none;
+}
+
+#tab-close {
+  margin-bottom: 1px;
+  margin-left: 6px;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  padding: 2px;
+}
+
+#tab-close:hover {
+  background-color: #dbdbdc;
+}
+
+.card-body {
+  padding: 0px !important;
+  padding-top: 5px !important;
+}
+
+#new-file-form {
+  padding: 5px 25px 10px 25px;
+}
+
+.tree-search-bar {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.load-more-btn-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-tabs .nav-link {
+  border: 1px solid #e6e9ec !important;
+}
+
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #495057 !important;
+  background-color: #fff !important;
+  border-color: #d3d3d3 #d3d3d3 #fff !important;
+}
+</style>