Added Cia Scenario Viewer

src/components/ChangeImpactOutputViewer.vue

@@ -0,0 +1,122 @@
+<template>
+    <div v-if="parsedOuput != null">
+        <h1>{{ parsedOuput.title }}</h1>
+        <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>
+
+<script setup>
+import { defineProps, onMounted, ref, toRefs } from 'vue';
+import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
+
+const parsedOuput =ref(null);
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+    scenario_output: {
+        type: String,
+        required: true
+    }
+});
+
+const { scenario_output } = toRefs(props);
+
+onMounted(() => {
+    console.log(scenario_output.value.replace('```json', '').replace('```', ''));
+    var jsonParsed = JSON.parse(scenario_output.value.replace('```json', '').replace('```', ''));
+    console.log(jsonParsed);
+    parsedOuput.value = jsonParsed;
+
+});
+</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/CiaFlowCodeViewer.vue

@@ -0,0 +1,160 @@
+<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 { CodeDiff } from 'v-code-diff'
+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'
+
+
+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)
+
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+    changes: {
+        type: Object,
+        required: true
+    }
+});
+const { changes } = toRefs(props);
+
+onMounted(() => {
+  defineNodes()
+})
+
+onInit((vueFlowInstance) => {
+  vueFlowInstance.fitView()
+})
+
+
+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 app = {'name':'Apollo'}
+
+    tmpNode.push({
+        id: app.name,
+        data: { label: app.name },
+        position: { x: 250, y: 0 },
+        class: 'light',
+    },) 
+
+    changes.value.forEach((change) => {
+        var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
+        tmpNode.push({
+            id: change.filename,
+            data: { label: label },
+            position: { x: 250, y: 0 },
+            class: 'light',
+        })
+
+        tmpEdges.push({
+            id: app.name + change.filename,
+            source: app.name,
+            target: change.filename,
+        })
+
+      
+        tmpNode.push({
+            id: change.classname,
+            data: { label: change.classname.split(".").slice(-1)[0] , data: change},
+            type: 'class-node', 
+            position: { x: 250, y: 0 },
+            dimension: { width: 200, height: 100 },
+
+          })
+        tmpEdges.push({
+            id: change.filename + change.classname,
+            source:  change.filename,
+            target: change.classname,
+        })
+  
+            
+    })
+
+    nodes.value = tmpNode
+    edges.value = tmpEdges
+}
+
+</script>
+
+<template>
+    <Dialog v-model:visible="dialogCodeVisible" modal :header="selectionNode.classname" :style="{ width: '70vw' }">
+        <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>
+
+    <div>
+            <VueFlow
+                :nodes="nodes"
+                :edges="edges"
+                :class="{ dark }"
+                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>
+
+<style scoped>
+ 
+</style>

src/components/ClassNode.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+
+
+// props were passed from the slot using `v-bind="customNodeProps"`
+const props = defineProps(['label','targetPosition','sourcePosition','data'])
+</script>
+
+<template>
+  <div>
+    <Handle type="target" :position="targetPosition" />
+    <div>{{ data.label }}</div>
+   <!-- <Handle type="source" :position="sourcePosition" />-->
+  </div>
+</template>

src/components/useLayout.js

@@ -0,0 +1,56 @@
+import dagre from '@dagrejs/dagre'
+import { Position, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ */
+export function useLayout() {
+  const { findNode } = useVueFlow()
+
+  const graph = ref(new dagre.graphlib.Graph())
+
+  const previousDirection = ref('LR')
+
+  function layout(nodes, edges, direction) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph()
+
+    graph.value = dagreGraph
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+    const isHorizontal = direction === 'LR'
+    dagreGraph.setGraph({ rankdir: direction })
+
+    previousDirection.value = direction
+
+    for (const node of nodes) {
+      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+      const graphNode = findNode(node.id)
+
+      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target)
+    }
+
+    dagre.layout(dagreGraph)
+
+    // set nodes with updated positions
+    return nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id)
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+      }
+    })
+  }
+
+  return { graph, layout, previousDirection }
+}