new cia scenario output

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",

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"

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>
 

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' }">
+    <Dialog v-model:visible="dialogCodeVisible" modal :header="'Change on: '+selectionNode.classname" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
-        <h2>Change description: </h2>{{ selectionNode.change_description }}
+      <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>

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>

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