code browser

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>
 

src/components/CiaSingleImpactView.vue

@@ -40,7 +40,7 @@
                             theme="dark"
                             width="100%"
                             height="100%"
-                            codeLines="true"
+                            :codeLines="true"
                             fontSize="14px"
                             ></HighCode>
                         </p>

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>

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>

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>
 

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);
 

src/router/index.js

@@ -39,6 +39,11 @@ const router = createRouter({
                     name: 'canvas',
                     component: () => import('@/views/pages/canvas/Canvas.vue')
                 }, 
+                {
+                    path: '/app-browser',
+                    name: 'app-browser',
+                    component: () => import('@/views/pages/ApplicationBrowser.vue')
+                },
                 {
                     path: '/mdcanvas',
                     name: 'mdcanvas',

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}`);
+    }
+};

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>