From 1b5a9126b738ef70bd5c4f5e4b8216ede82a8624 Mon Sep 17 00:00:00 2001
From: "andrea.terzani" <andrea.terzani@accenture.com>
Date: Wed, 16 Oct 2024 15:04:38 +0200
Subject: [PATCH 1/5] new cia scenario output

---
 package-lock.json                           |  11 ++
 package.json                                |   2 +
 src/components/ChangeImpactOutputViewer.vue |  10 --
 src/components/CiaFlowCodeViewer.vue        |  14 ++-
 src/components/CiaSingleImpactView.vue      | 108 ++++++++++++++++++++
 src/main.js                                 |   2 +-
 6 files changed, 128 insertions(+), 19 deletions(-)
 create mode 100644 src/components/CiaSingleImpactView.vue

diff --git a/package-lock.json b/package-lock.json
index b8b0b03..58ef22b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
                 "axios": "^1.7.2",
                 "chart.js": "3.3.2",
                 "Hermione": "file:",
+                "highlight.js": "^11.10.0",
                 "json-editor-vue": "^0.15.1",
                 "md-editor-v3": "^4.18.0",
                 "primeicons": "^6.0.1",
@@ -29,6 +30,7 @@
                 "v-code-diff": "^1.13.1",
                 "vue": "^3.4.34",
                 "vue-authenticate-2": "^2.2.0",
+                "vue-highlight-code": "^0.2.0",
                 "vue-markdown-render": "^2.2.1",
                 "vue-router": "^4.4.0",
                 "vue3-markdown": "^1.1.9"
@@ -6403,6 +6405,15 @@
                 "eslint": ">=6.0.0"
             }
         },
+        "node_modules/vue-highlight-code": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/vue-highlight-code/-/vue-highlight-code-0.2.0.tgz",
+            "integrity": "sha512-KNDa2QWr2yVxVJYRmcr8/cHUGPoGrwDWNm5P0pos+ZkG0tC5mc1Nb4BpBddL+SNYH24ZV9Bco6iOVSkG9H3K8g==",
+            "dependencies": {
+                "highlight.js": "^11.5.1",
+                "vue": "^3.2.25"
+            }
+        },
         "node_modules/vue-markdown-render": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
diff --git a/package.json b/package.json
index 5760356..6f07ea9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
         "Hermione": "file:",
+        "highlight.js": "^11.10.0",
         "json-editor-vue": "^0.15.1",
         "md-editor-v3": "^4.18.0",
         "primeicons": "^6.0.1",
@@ -29,6 +30,7 @@
         "v-code-diff": "^1.13.1",
         "vue": "^3.4.34",
         "vue-authenticate-2": "^2.2.0",
+        "vue-highlight-code": "^0.2.0",
         "vue-markdown-render": "^2.2.1",
         "vue-router": "^4.4.0",
         "vue3-markdown": "^1.1.9"
diff --git a/src/components/ChangeImpactOutputViewer.vue b/src/components/ChangeImpactOutputViewer.vue
index 88ae0b0..129c0d3 100644
--- a/src/components/ChangeImpactOutputViewer.vue
+++ b/src/components/ChangeImpactOutputViewer.vue
@@ -4,16 +4,6 @@
         <p>{{ parsedOuput.description }}</p>
         <CiaFlowCodeViewer :changes="parsedOuput.changes">
         </CiaFlowCodeViewer>
-      <!--  <div v-for="change in parsedOuput.changes" >
-                
-            <CodeDiff
-            :old-string="change.previous_code"
-            :new-string="change.new_code"
-            output-format="side-by-side"
-            />
-            
-
-        </div>-->
     </div>
 </template>
 
diff --git a/src/components/CiaFlowCodeViewer.vue b/src/components/CiaFlowCodeViewer.vue
index 88ba2b9..012f65e 100644
--- a/src/components/CiaFlowCodeViewer.vue
+++ b/src/components/CiaFlowCodeViewer.vue
@@ -4,7 +4,6 @@ import { Controls } from '@vue-flow/controls'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'
 import Dialog from 'primevue/dialog'
-import { CodeDiff } from 'v-code-diff'
 import { nextTick, onMounted, ref, toRefs } from 'vue'
 import ClassNode from './ClassNode.vue'
 import { useLayout } from './useLayout'
@@ -112,15 +111,18 @@ function defineNodes() {
 </script>
 
 <template>
-    <Dialog v-model:visible="dialogCodeVisible" modal :header="selectionNode.classname" :style="{ width: '70vw' }">
-        <h2>Change description: </h2>{{ selectionNode.change_description }}
+    <Dialog v-model:visible="dialogCodeVisible" modal :header="'Change on: '+selectionNode.classname" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
+      <CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>
+        <!---<h2>Change description: </h2>{{ selectionNode.change_description }}
+        
         <div class="flex items-center gap-4 mb-4">
           <CodeDiff
             :old-string="selectionNode.previous_code"
             :new-string="selectionNode.new_code"
             output-format="side-by-side"
             />
-         </div>
+         </div>-->
+
     </Dialog>
 
     <div>
@@ -145,10 +147,6 @@ function defineNodes() {
         <MiniMap />
 
         <Controls position="top-left">
-
-        
-
-
         </Controls>
     </VueFlow>
     </div>
diff --git a/src/components/CiaSingleImpactView.vue b/src/components/CiaSingleImpactView.vue
new file mode 100644
index 0000000..934db3a
--- /dev/null
+++ b/src/components/CiaSingleImpactView.vue
@@ -0,0 +1,108 @@
+<template>
+        <Tabs value="0" @update:value="tabUpdate">
+            <TabList>
+                <Tab value="0">Change Description</Tab>
+                <Tab value="1">Code Diff</Tab>
+                <Tab value="class-description">Class RE</Tab>
+                <Tab value="class-code">Actual Class Code</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        <MdPreview class="editor" v-model="change.change_description" language="en-US"  />
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        <div class="flex items-center gap-4 mb-4">
+                            <CodeDiff
+                                :old-string="change.previous_code"
+                                :new-string="change.new_code"
+                                output-format="side-by-side"
+                                />
+                        </div>
+                    </p>
+                </TabPanel>
+                <TabPanel value="class-description">
+                    <p class="m-0" v-if="classLoaded">
+                        <MdPreview class="editor" v-model="classDetails.reDescription" language="en-US"  />
+                    </p>
+                    <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+                </TabPanel>
+                <TabPanel value="class-code">
+                  
+                        <p v-if="classLoaded" class="m-0"> 
+
+                            <HighCode
+                            class="code"
+                            :codeValue="classDetails.code"
+                            theme="dark"
+                            width="100%"
+                            height="100%"
+                            codeLines="true"
+                            fontSize="14px"
+                            ></HighCode>
+                        </p>
+                        <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+                    
+                   
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+       
+</template>
+
+<script setup>
+import axios from 'axios';
+import { MdPreview } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import Tab from 'primevue/tab';
+import TabList from 'primevue/tablist';
+import TabPanel from 'primevue/tabpanel';
+import TabPanels from 'primevue/tabpanels';
+import Tabs from 'primevue/tabs';
+import { CodeDiff } from 'v-code-diff';
+import { defineProps, onMounted, ref, toRefs } from 'vue';
+import { HighCode } from 'vue-highlight-code';
+import 'vue-highlight-code/dist/style.css';
+
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+    change: {
+        type: String,
+        required: true
+    }
+});
+
+const { change } = toRefs(props);
+const  classDetails  = ref(null);
+const  classLoaded  = ref(false);
+
+onMounted(() => {
+    
+
+});
+
+function tabUpdate(value) {
+    console.log(value);
+    if ((value === 'class-description'  || value ==='class-code') && classLoaded.value === false) {
+
+        console.log("Getting class details : ", change.value.classname);
+        axios.get("/source-module/getClassDetailedInfo?className=" +  change.value.classname ).then(resp => {
+            classDetails.value = resp.data;
+            classLoaded.value = true;
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    }
+}
+</script>
+
+<style>
+
+
+</style>
diff --git a/src/main.js b/src/main.js
index b6b43d8..ac98284 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,7 +47,7 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
+axios.defaults.baseURL = 'http://localhost:8081' //import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
 
 const app = createApp(App);
 

From ab7b8e79557d57814b117f40583d4d9af6851677 Mon Sep 17 00:00:00 2001
From: "andrea.terzani" <andrea.terzani@accenture.com>
Date: Wed, 16 Oct 2024 15:06:15 +0200
Subject: [PATCH 2/5] fe url

---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index ac98284..b6b43d8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,7 +47,7 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = 'http://localhost:8081' //import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
+axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
 
 const app = createApp(App);
 

From 6ea3fc26e3914c48b4f964e2bbd73902756a7a81 Mon Sep 17 00:00:00 2001
From: "andrea.terzani" <andrea.terzani@accenture.com>
Date: Fri, 18 Oct 2024 07:03:24 +0200
Subject: [PATCH 3/5] code browser

---
 src/components/CiaFlowCodeViewer.vue   |   9 -
 src/components/CiaSingleImpactView.vue |   2 +-
 src/components/FileFlowViewer.vue      | 229 +++++++++++++++++++++++++
 src/components/SingleClassViewer.vue   | 173 +++++++++++++++++++
 src/layout/AppMenu.vue                 |   4 +
 src/main.js                            |   2 +-
 src/router/index.js                    |   5 +
 src/service/ApplicationCodeService.js  |   8 +
 src/views/pages/ApplicationBrowser.vue |  95 ++++++++++
 9 files changed, 516 insertions(+), 11 deletions(-)
 create mode 100644 src/components/FileFlowViewer.vue
 create mode 100644 src/components/SingleClassViewer.vue
 create mode 100644 src/service/ApplicationCodeService.js
 create mode 100644 src/views/pages/ApplicationBrowser.vue

diff --git a/src/components/CiaFlowCodeViewer.vue b/src/components/CiaFlowCodeViewer.vue
index 012f65e..a52ff8e 100644
--- a/src/components/CiaFlowCodeViewer.vue
+++ b/src/components/CiaFlowCodeViewer.vue
@@ -113,15 +113,6 @@ function defineNodes() {
 <template>
     <Dialog v-model:visible="dialogCodeVisible" modal :header="'Change on: '+selectionNode.classname" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
       <CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>
-        <!---<h2>Change description: </h2>{{ selectionNode.change_description }}
-        
-        <div class="flex items-center gap-4 mb-4">
-          <CodeDiff
-            :old-string="selectionNode.previous_code"
-            :new-string="selectionNode.new_code"
-            output-format="side-by-side"
-            />
-         </div>-->
 
     </Dialog>
 
diff --git a/src/components/CiaSingleImpactView.vue b/src/components/CiaSingleImpactView.vue
index 934db3a..5fc40aa 100644
--- a/src/components/CiaSingleImpactView.vue
+++ b/src/components/CiaSingleImpactView.vue
@@ -40,7 +40,7 @@
                             theme="dark"
                             width="100%"
                             height="100%"
-                            codeLines="true"
+                            :codeLines="true"
                             fontSize="14px"
                             ></HighCode>
                         </p>
diff --git a/src/components/FileFlowViewer.vue b/src/components/FileFlowViewer.vue
new file mode 100644
index 0000000..d88f2a8
--- /dev/null
+++ b/src/components/FileFlowViewer.vue
@@ -0,0 +1,229 @@
+<template>
+  <Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: '+selectionNode.fullyQualifiedClassName" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
+      <SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" />
+  </Dialog>
+
+  <div>
+          <VueFlow
+              :nodes="nodes"
+              :edges="edges"
+              class=" basic-flow"
+              :default-viewport="{ zoom: 1.5 }"
+              :min-zoom="0.2"
+              :max-zoom="4"
+              @nodes-initialized="layoutGraph('LR')"
+          >
+
+
+            <template #node-class-node="props">
+              <ClassNode v-bind="props" />
+            </template>
+
+      <Background pattern-color="#aaa" :gap="16" />
+
+      <MiniMap />
+
+      <Controls position="top-left">
+      </Controls>
+  </VueFlow>
+  </div>
+
+</template>
+
+
+<script setup>
+
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/minimap'
+import Dialog from 'primevue/dialog'
+import { nextTick, onMounted, ref, toRefs, watch } from 'vue'
+import ClassNode from './ClassNode.vue'
+import { useLayout } from './useLayout'
+
+import axios from 'axios'
+import { defineProps } from 'vue'
+import 'vue3-markdown/dist/style.css'
+
+
+const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
+
+const nodes = ref(null)
+const edges = ref(null)
+const dark = ref(false)
+const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
+const { graph, layout, previousDirection } = useLayout()
+
+const dialogCodeVisible = ref(false)
+const props = defineProps({
+    file: {
+        type: String,
+        required: true
+    },
+    application: {
+        type: String,
+        required: true
+    }
+});
+
+const { file } = toRefs(props);
+const  fileDetails = ref(null);
+
+onMounted(() => {
+  //defineNodes()
+})
+
+watch(() => props.file, (first, second) => {
+        loadFileDetails(first)
+    });
+
+onInit((vueFlowInstance) => {
+  vueFlowInstance.fitView()
+})
+
+
+function loadFileDetails(filename){
+
+    let fileInfo={
+      filename: filename,
+      applicationName: props.application
+    }
+
+    axios.post("/source-module/getFileSimpleInfo",fileInfo).then(response => {
+        fileDetails.value =response.data
+        defineNodes()
+    })
+}
+
+onNodeClick(({ event, nodes, node }) => {
+  console.log(node)
+  if(node.type == 'class-node') {
+    selectionNode.value = node.data.data
+    dialogCodeVisible.value = true
+  }
+
+})
+
+
+function layoutGraph(direction) {
+  nodes.value = layout(nodes.value, edges.value, direction)
+  nextTick(() => {
+    fitView()
+  })
+}
+
+function defineNodes() {
+
+  var tmpNode=[]
+    var tmpEdges=[]
+    var  filename = fileDetails.value.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
+
+    tmpNode.push({
+        id: filename,
+        data: { label: filename },
+        position: { x: 250, y: 0 },
+        class: 'light',
+    },) 
+
+    fileDetails.value.classes.forEach((c) => {
+        tmpNode.push({
+            id: c.name,
+            data: { label:c.name.split(".").slice(-1)[0] , data:{ fullyQualifiedClassName:c.name} },
+            position: { x: 250, y: 0 },
+            class: 'light',
+            type: 'class-node'
+        })
+        tmpEdges.push({
+            id: filename + c.name,
+            source:  filename,
+            target: c.name,
+        })    
+    })
+   
+
+    nodes.value = tmpNode
+    edges.value = tmpEdges
+    layoutGraph('LR')
+}
+
+</script>
+
+<style>
+
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+
+
+
+.basic-flow{
+    height: 90vh;
+    width: 100%;
+  
+}
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+
+.basic-flow.dark {
+    background:#2d3748;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node {
+    background:#4a5568;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node.selected {
+    background:#333;
+    box-shadow:0 0 0 2px #2563eb
+}
+
+.basic-flow .vue-flow__controls {
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center
+}
+
+.basic-flow.dark .vue-flow__controls {
+    border:1px solid #FFFFFB
+}
+
+.basic-flow .vue-flow__controls .vue-flow__controls-button {
+    border:none;
+    border-right:1px solid #eee
+}
+
+.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
+    background:#4d4d4d
+}
+
+.basic-flow.dark .vue-flow__edge-textbg {
+    fill:#292524
+}
+
+.basic-flow.dark .vue-flow__edge-text {
+    fill:#fffffb
+}
+
+
+.vue-flow__node-class-node {
+    border:1px solid #dc07bc;
+    padding:10px;
+    border-radius: 5px;
+    background:#f5f5f5;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:center;
+    gap:10px;
+    max-width:250px;
+    min-width: 200px;
+}
+</style>
diff --git a/src/components/SingleClassViewer.vue b/src/components/SingleClassViewer.vue
new file mode 100644
index 0000000..ff9264b
--- /dev/null
+++ b/src/components/SingleClassViewer.vue
@@ -0,0 +1,173 @@
+<template>
+    <Tabs value="class-code" @update:value="tabUpdate">
+        <TabList>            
+            <Tab value="class-code">Class Code</Tab>
+            <Tab value="class-description">Class RE</Tab>
+            <Tab v-if="methods != null" value="method-list">Method List</Tab>
+        </TabList>
+        <TabPanels>
+        
+           
+           
+            <TabPanel value="class-code">    
+                    <p v-if="classLoaded" class="m-0"> 
+
+                        <HighCode
+                        class="code"
+                        :codeValue="classDetails.code"
+                        theme="light"
+                        width="100%"
+                        height="100%"
+                        :codeLines="true"
+                        fontSize="14px"
+                        ></HighCode>
+                    </p>
+                    <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+                
+               
+            </TabPanel> 
+            <TabPanel value="class-description">
+                <p class="m-0" v-if="classLoaded">
+                    <MdPreview v-if="classDetails.reDescription != null" class="editor" v-model="classDetails.reDescription" language="en-US"  />
+                    <p v-else> No Description available for this class</p>
+                </p>
+                <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+            </TabPanel>
+            <TabPanel v-if="methods != null" value="method-list">
+
+                <div  v-if="classLoaded" class="grid grid-cols-12 gap-2">
+                    <div class="col-span-3">
+                        <div class="card folder-tree ">
+                            <h5>Method List</h5>
+                                <Listbox v-model="selectedMethodName" :options="methods" @update:modelValue="updateSelectedMethod" optionLabel="name" class="w-full " />
+                        </div>
+                    </div>
+                    <div class="col-span-9">
+                        <div v-if="!loadingMethod && selectedMethodDetails != null && selectedMethodDetails.reDescription == null" class="card flow-codeviewer">  
+                            <h5>Method Code ( No reverse engineering available )</h5>
+                            <HighCode
+                                class="code"
+                                :codeValue="selectedMethodDetails.code"
+                                v-model="selectedMethodDetails.code"
+                                theme="light"
+                                width="100%"
+                                height="80%"
+                                :codeLines="true"
+                                fontSize="14px"
+                                ></HighCode>
+
+                        </div>
+                        <div v-if="!loadingMethod && selectedMethodDetails != null && selectedMethodDetails.reDescription != null" class="card flow-codeviewer">  
+                            <h5>Method Explaination</h5>
+                            <MdPreview class="editor" v-model="selectedMethodDetails.reDescription" language="en-US"  />
+
+
+                        </div>
+                        <Skeleton v-if="loadingMethod" width="100%" height="10rem"></Skeleton>
+
+                    </div>
+                </div>
+                
+                <Skeleton v-else width="100%" height="10rem"></Skeleton>
+
+            </TabPanel>
+        </TabPanels>
+    </Tabs>
+   
+</template>
+
+<script setup>
+
+import axios from 'axios';
+import { MdPreview } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import Tab from 'primevue/tab';
+import TabList from 'primevue/tablist';
+import TabPanel from 'primevue/tabpanel';
+import TabPanels from 'primevue/tabpanels';
+import Tabs from 'primevue/tabs';
+import { defineProps, onMounted, ref, toRefs } from 'vue';
+import { HighCode } from 'vue-highlight-code';
+import 'vue-highlight-code/dist/style.css';
+import { useLayout } from './useLayout';
+
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+className: {
+    type: String,
+    required: true
+}
+});
+
+const { className } = toRefs(props);
+const  classDetails  = ref(null);
+const  classLoaded  = ref(false);
+const nodes = ref(null)
+const edges = ref(null)
+const dark = ref(false)
+const selectedMethodName = ref(null)
+const selectedMethodDetails = ref(null)
+const loadingMethod = ref(false)
+const methods = ref(null)
+const { graph, layout, previousDirection } = useLayout()
+
+onMounted(() => {
+    loadClassDetails();
+
+});
+
+function tabUpdate(value) {
+    console.log(value);
+    if ((value === 'class-description'  || value ==='class-code') && classLoaded.value === false) {
+        loadClassDetails()
+    }
+}
+
+function updateSelectedMethod(value) {
+    console.log("Selected Method : ", value);
+    if (value == null) {
+        return;
+    }
+    if(selectedMethodDetails.value != null && value.value == selectedMethodDetails.value.fullyQualifiedName ) {
+        return;
+    }
+    loadingMethod.value = true;
+    axios.get("/source-module/getMethodDetailedInfo?methodName=" +  value.value  ).then(resp => {
+        console.log(resp.data);
+        selectedMethodDetails.value = resp.data;
+        loadingMethod.value = false;
+    })
+}
+
+function loadClassDetails() {
+    console.log("Getting class details : ", className.value);
+    axios.get("/source-module/getClassDetailedInfo?className=" +  className.value ).then(resp => {
+        classDetails.value = resp.data;
+        if (classDetails.value.methods != null) {
+            methods.value = createMethodList();
+        }
+        
+        classLoaded.value = true;
+    })
+    .catch(error => {
+        console.error('Error during the request:', error);
+    });
+}
+
+function createMethodList() {
+    let methods = [];
+    classDetails.value.methods.forEach(method => {
+        methods.push({name: method.split(".").slice(-1)[0], value: method});
+    });
+    return methods;
+}
+
+</script>
+
+<style>
+
+
+</style>
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index ba84f29..219d8b4 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -13,7 +13,11 @@ const model = ref([
     }, {
         label: 'Canvas',
         items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
+    },{
+        label: 'Browse Code',
+        items: [{ label: 'ATF-Prossor', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }]
     } 
+
 ]);
 </script>
 
diff --git a/src/main.js b/src/main.js
index b6b43d8..ac98284 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,7 +47,7 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
+axios.defaults.baseURL = 'http://localhost:8081' //import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
 
 const app = createApp(App);
 
diff --git a/src/router/index.js b/src/router/index.js
index fd59fdb..5c75047 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,6 +38,11 @@ const router = createRouter({
                     path: '/canvas',
                     name: 'canvas',
                     component: () => import('@/views/pages/canvas/Canvas.vue')
+                }, 
+                {
+                    path: '/app-browser',
+                    name: 'app-browser',
+                    component: () => import('@/views/pages/ApplicationBrowser.vue')
                 },
                 {
                     path: '/mdcanvas',
diff --git a/src/service/ApplicationCodeService.js b/src/service/ApplicationCodeService.js
new file mode 100644
index 0000000..5b2ffec
--- /dev/null
+++ b/src/service/ApplicationCodeService.js
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export const ApplicationCodeService = {
+
+    getApplication(applicationName) {
+        return axios.get(`/source-viewer/getApplicationTreeNode?applicationName=${applicationName}`);
+    }
+};
\ No newline at end of file
diff --git a/src/views/pages/ApplicationBrowser.vue b/src/views/pages/ApplicationBrowser.vue
new file mode 100644
index 0000000..4566800
--- /dev/null
+++ b/src/views/pages/ApplicationBrowser.vue
@@ -0,0 +1,95 @@
+<template> 
+    <div class="flex items-center justify-between p-2">
+            <h1>
+                Source Code Explorer  : ATF-Processor
+            </h1>
+    </div>
+
+    <div class="grid grid-cols-12 gap-2">
+        <div class="col-span-4">
+            <div class="card folder-tree ">
+                <h5>File Browser</h5>
+
+                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" :filter="true" filterMode="lenient" class="w-full"></Tree>
+
+            </div>
+        </div>
+        <div class="col-span-8">
+            <div class="card flow-codeviewer">  
+                <h5>File Explorer</h5>
+                <FileFlowViewer :file="selectedFile" :application="application"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>  
+
+import FileFlowViewer from '@/components/FileFlowViewer.vue';
+import { ApplicationCodeService } from '@/service/ApplicationCodeService';
+import Tree from 'primevue/tree';
+import { onMounted, ref } from 'vue';
+const nodes = ref(null)
+const expandedKeys = ref({});
+const selectedFile = ref({})
+const application=ref("ATF-Notifier")
+onMounted(() => {
+    console.log("Mounted")
+    ApplicationCodeService.getApplication('ATF-Notifier').then(response => {
+        var tmp = []
+        tmp.push(response.data)
+        nodes.value = tmp
+        expandAll()   
+    })
+})
+
+function onNodeSelect(e){
+    if(e.icon == "pi pi-fw pi-file"){
+        selectedFile.value = e.key
+    }
+    console.log(e)
+}
+
+
+
+
+
+const expandAll = () => {
+    for (let node of nodes.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = { ...expandedKeys.value };
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    expandedKeys.value[node.key] = true;
+
+    if (node.children && node.children.length) {
+        for (let child of node.children) {
+            expandNode(child);
+        }
+    }
+};
+
+</script>
+
+
+<style>
+.folder-tree {
+    min-height: 75vh;
+    overflow: auto;
+}
+
+.p-inputtext {
+    width: 100%;
+}
+
+.flow-codeviewer{
+    height:75vh
+}
+</style>
\ No newline at end of file

From 06bd78c86cb62c3fec7c367c02ef41285d98ed2b Mon Sep 17 00:00:00 2001
From: "andrea.terzani" <andrea.terzani@accenture.com>
Date: Fri, 18 Oct 2024 07:22:20 +0200
Subject: [PATCH 4/5] Update AppMenu and ApplicationBrowser components

---
 src/layout/AppMenu.vue                 | 4 ++--
 src/views/pages/ApplicationBrowser.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 219d8b4..fad86de 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -14,8 +14,8 @@ const model = ref([
         label: 'Canvas',
         items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
     },{
-        label: 'Browse Code',
-        items: [{ label: 'ATF-Prossor', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }]
+        label: 'Your Applications',
+        items: [{ label: 'ATF-Notifier', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }]
     } 
 
 ]);
diff --git a/src/views/pages/ApplicationBrowser.vue b/src/views/pages/ApplicationBrowser.vue
index 4566800..697a848 100644
--- a/src/views/pages/ApplicationBrowser.vue
+++ b/src/views/pages/ApplicationBrowser.vue
@@ -1,7 +1,7 @@
 <template> 
     <div class="flex items-center justify-between p-2">
             <h1>
-                Source Code Explorer  : ATF-Processor
+                Source Code Explorer  : {{application}}
             </h1>
     </div>
 

From 0a39ca5186f5156b484e4e419006636f9a0d8182 Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Fri, 18 Oct 2024 06:01:05 +0000
Subject: [PATCH 5/5] gateway variable added

---
 src/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index ac98284..404e219 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,7 +47,8 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = 'http://localhost:8081' //import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'//
+axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'
+console.log(import.meta.env.VITE_BACKEND_URL);
 
 const app = createApp(App);