Added Cia Scenario Viewer

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>