updated CIA and File Tree visualization

src/components/CiaFlowCodeViewer.vue

@@ -7,9 +7,9 @@ import Dialog from 'primevue/dialog'
 import { nextTick, onMounted, ref, toRefs } from 'vue'
 import ClassNode from './ClassNode.vue'
 import { useLayout } from './useLayout'
-
 import { defineProps } from 'vue'
 import 'vue3-markdown/dist/style.css'
+import { UserPrefStore } from '@/stores/UserPrefStore.js';
 
 
 const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
@@ -22,6 +22,7 @@ const { graph, layout, previousDirection } = useLayout()
 
 const dialogCodeVisible = ref(false)
 
+const userPrefStore = UserPrefStore();
 
 //66f55e4b2894530b1c154f69
 const props = defineProps({
@@ -59,11 +60,9 @@ function layoutGraph(direction) {
 }
 
 function defineNodes() {
-
   var tmpNode=[]
-    var tmpEdges=[]
+    var tmpEdges = []
-    var app = {'name':'Apollo'}
+    var app = { name: userPrefStore.getSelApp.fe_name }
-
     tmpNode.push({
         id: app.name,
         data: { label: app.name },

src/stores/UserPrefStore.js

@@ -61,11 +61,15 @@ export const UserPrefStore = defineStore('userpref_store', () => {
       }
   });
 
+  const getSelProj = computed(() => {
+    return selectedProject.value
+  })
+
   const getSelApp = computed(() => {
     return selectedApp.value
   })
   
 
   
-    return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject }
+    return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject,getSelProj }
   })

src/views/pages/ApplicationBrowser.vue

@@ -5,24 +5,22 @@
             </h1>
     </div>
 
-    <div class="grid grid-cols-12 gap-2">
+    <div class="flex gap-2">
-        <div class="col-span-6">
+        <div class="card folder-tree">
-            <div class="card folder-tree ">
+            <h5>File Browser</h5>
-                <h5>File Browser</h5>
+            <div v-if="nodes && nodes.length" class="flex-1">
-                <div v-if="nodes && nodes.length">
+                <div class="flex flex-wrap gap-2">
-                    <div class="flex flex-wrap gap-2">
+                    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
-                        <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
+                    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
-                        <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
-                    </div>
-                    <Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
-                </div>
-                <div v-else class="self-center" style="flex: 1">
-                          <Skeleton v-for="(config, index) in skeletonConfigs"
-                                    :key="index"
-                                    :width="config.width"
-                                    :height="config.height"
-                                    class="mb-2" />
                 </div>
+                <Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
+            </div>
+            <div v-else class="flex-skeleton">
+                <Skeleton v-for="(config, index) in skeletonConfigs"
+                    :key="index"
+                    :width="config.width"
+                    :height="config.height"
+                    class="mb-2 w-full" />
             </div>
         </div>    
         <div id ="card-flow-codeviewer" class="flex-1">
@@ -44,15 +42,13 @@ import { LoadingStore } from '@/stores/LoadingStore.js';
 import Tree from 'primevue/tree';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { UserPrefStore } from '../../stores/UserPrefStore.js';
+import { UserPrefStore } from '@/stores/UserPrefStore.js';
 
 const nodes = ref(null)
 const expandedKeys = ref({});
 const selectedFile = ref({})
 const router = useRouter();
 const userPrefStore = UserPrefStore();
-//const selectedApp = userPrefStore.getSelApp;
-//const application=ref(selectedApp.fe_name)
 const loadingStore = LoadingStore()
 
 onMounted(() => {
@@ -92,7 +88,7 @@ function onNodeSelect(e){
         selectedFile.value = e.key
     }
     console.log(e)
-}
+};
 
 
 const expandAll = () => {
@@ -169,7 +165,13 @@ watch(selectedFile, () => {
     width: 100%;
 }
 
-.flow-codeviewer{
+.flow-codeviewer {
-    height:75vh
+    height: 75vh;
+}
+
+.flex-skeleton {
+  flex: 1;
+  min-width: 350px;
+  text-align: center;
 }
 </style>