new cia scenario output

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' }">
-        <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>

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>