Tree diagram works, including clicking nodes or views to change the display to that node or view. The tree is zoomable and panable. Also added a pull out for the right side drawer so that the drawer can be expanded, including functionality to auto-close if the drawer is made too small. When closed, there is a small nub that can be clicked to open the drawer, making it more clear how to use the application.

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -221,7 +221,7 @@ export default {
           element.enabled = false;
           element.$emit("deactivated");
           element.$emit("update:active", false);
-        });
+        }); 
       }
     } else {
       // if a component is set to active, highlight it
@@ -328,17 +328,25 @@ export default {
       }
       if (this.$refs.boxes) {
         this.$refs.boxes.forEach((element) => {
-          if (element.$attrs.id !== componentData?.componentName) {
+          if (element.$attrs.id !== componentData.componentName) {
             element.enabled = false;
             element.$emit("deactivated");
             element.$emit("update:active", false);
           }
+          if (
+          this.activeComponent === element.$attrs.id &&
+          element.enabled === false
+          ) {
+          element.enabled = true;
+          element.$emit("activated");
+          element.$emit("update:active", true);
+          }
         });
       }
       if (!(componentData.componentName === this.activeComponent)) {
         this.setActiveComponent(componentData.componentName);
       }
-      if (componentData){
+      if (componentData && componentData.hasOwnProperty('componentName')){
         this.activeComponentData.isActive = true;
       }
     },
@@ -378,9 +386,12 @@ export default {
     copyActiveComponent() {},
   },
   watch: {
-    activeComponent: function () {
+    activeComponent: {
+    handler(){
       this.onActivated(this.activeComponentObj);
     },
+    deep: true,
+    },
   },
 };
 </script>

src/components/dashboard_items/ComponentDetails.vue

@@ -32,8 +32,8 @@ Description:
           <HTMLQueue />
         </q-tab-panel>
         <q-tab-panel name="state">
-          <p v-if="!this.activeComponentObj.state.length">
-            No state in component
+          <p v-if="!this?.activeComponentObj?.state?.length">
+            No state in component.
           </p>
           <ul id="stateList">
             <li v-for="comp in compObj.state" :key="comp">
@@ -42,21 +42,21 @@ Description:
           </ul>
         </q-tab-panel>
         <q-tab-panel name="actions">
-          <p v-if="!this.activeComponentObj.actions.length">
+          <p v-if="!this?.activeComponentObj?.actions?.length">
             No actions in component
           </p>
           <ul id="actionList">
-            <li v-for="comp in compObj.actions" :key="comp">
+            <li v-for="comp in compObj?.actions" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
         <q-tab-panel name="props">
-          <p v-if="!this.activeComponentObj.props.length">
+          <p v-if="!this?.activeComponentObj?.props?.length">
             No props in component
           </p>
           <ul id="propsList">
-            <li v-for="comp in compObj.props" :key="comp">
+            <li v-for="comp in compObj?.props" :key="comp">
               {{ comp }}
             </li>
           </ul>
@@ -79,7 +79,7 @@ export default {
     CodeSnippet
   },
   computed: {
-    ...mapState(["activeComponentObj"]),
+    ...mapState(["activeComponentObj","activeComponent"]),
     compObj: {
       get() {
         return this.activeComponentObj;

src/components/dashboard_items/Dashboard.vue

@@ -9,11 +9,12 @@ Description:
   <q-card id="dashboard-cards" class="bord">
     <q-tabs
       v-model="tab"
-      dense
       class="bg-subaccent text-white"
       active-color="secondary"
       indicator-color="secondary"
       align="left"
+      dense
+      breakpoint="1050"
     >
       <q-tab
         name="detail"

src/components/dashboard_items/HTMLQueue.vue

@@ -6,15 +6,15 @@ Description:
 
 <template>
   <section class="html-queue">
-    <i v-if='this.activeLayer.id !== ""' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
+    <i v-if='!this.activeLayer.id' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
     <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ depth }}' </span>
-    <span class='list-title' v-else-if='this.activeComponent !==""'> </span>
+    <span class='list-title' v-else-if='!this.activeComponent'></span>
     <hr>
     <div
       group="people"
       class="list-group"
     >
-      <p v-if='!this.componentMap[this.activeComponent].htmlList.length'>No HTML elements in component</p>
+      <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
       <div
       :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
       @dblclick.self="setActiveElement(element)"