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>