Added Cia Scenario Viewer

package.json

@@ -8,9 +8,14 @@
         "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
     "dependencies": {
+        "@dagrejs/dagre": "^1.1.4",
         "@heroicons/vue": "^2.1.5",
         "@primevue/themes": "^4.0.0",
         "@vavt/v3-extension": "^1.2.4",
+        "@vue-flow/background": "^1.3.0",
+        "@vue-flow/controls": "^1.1.2",
+        "@vue-flow/core": "^1.41.2",
+        "@vue-flow/minimap": "^1.5.0",
         "@websanova/vue-auth": "^4.2.1",
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
@@ -21,10 +26,12 @@
         "primevue": "^4.0.0",
         "quill": "^1.3.7",
         "showdown": "^2.1.0",
+        "v-code-diff": "^1.13.1",
         "vue": "^3.4.34",
         "vue-authenticate-2": "^2.2.0",
         "vue-markdown-render": "^2.2.1",
-        "vue-router": "^4.4.0"
+        "vue-router": "^4.4.0",
+        "vue3-markdown": "^1.1.9"
     },
     "devDependencies": {
         "@primevue/auto-import-resolver": "^4.0.1",

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 }
+}

src/layout/AppLayout.vue

@@ -2,6 +2,7 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed, ref, watch } from 'vue';
 import AppFooter from './AppFooter.vue';
+import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 
 const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
@@ -20,8 +21,8 @@ const containerClass = computed(() => {
     return {
         'layout-theme-light': !layoutConfig.darkTheme,
         'layout-theme-dark': layoutConfig.darkTheme,
-       //'layout-overlay': layoutConfig.menuMode === 'overlay',
+        'layout-overlay': layoutConfig.menuMode === 'overlay',
-       // 'layout-static': layoutConfig.menuMode === 'static',
+        'layout-static': layoutConfig.menuMode === 'static',
         'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
         'layout-overlay-active': layoutState.overlayMenuActive,
         'layout-mobile-active': layoutState.staticMenuMobileActive
@@ -54,9 +55,9 @@ const isOutsideClicked = (event) => {
 <template>
     <div class="layout-wrapper" :class="containerClass">
         <app-topbar></app-topbar>
-       <!-- <div class="layout-sidebar">
+       <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
-        </div>-->
+        </div>
         <div class="layout-main-container">
             <div class="layout-main">
                 <router-view></router-view>

src/layout/AppMenu.vue

@@ -6,10 +6,13 @@ import AppMenuItem from './AppMenuItem.vue';
 const model = ref([
     {
         label: 'Scenarios',
-        items: [{ label: 'Scenario List', icon: 'pi pi-fw pi-id-card', to: '/scenario-list' }]
+        items: [
+        { label: 'Scenarios', icon: 'pi pi-fw pi-id-card', to: '/' },
+        { label: 'CIA Scenario', icon: 'pi pi-fw pi-id-card', to: '/cia' },
+        { label: 'Executions', icon: 'pi pi-fw pi-id-card', to: '/exectutions' }]
     }, {
         label: 'Canvas',
-        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/canvas' }]
+        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
     } 
 ]);
 </script>

src/layout/AppTopbar.vue

@@ -38,10 +38,10 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
             </router-link>
         </div>
 
-       <!-- <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
+        <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
             <i class="pi pi-bars"></i>
         </button>
--->
+
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
                 <button  @click="router.push('/canvas')" class="layout-topbar-action" >

src/main.js

@@ -20,6 +20,7 @@ import '@/assets/tailwind.css';
 import { config } from 'md-editor-v3';
 
 
+
 config({
     editorConfig: {
         renderDelay: 0,
@@ -46,7 +47,7 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;
+axios.defaults.baseURL = 'http://localhost:8081'//import.meta.env.VITE_BACKEND_URL;
 
 const app = createApp(App);
 

src/router/index.js

@@ -24,6 +24,15 @@ const router = createRouter({
                     path: 'exec/:id',
                     name: 'scenario-exec',
                     component: () => import('@/views/pages/ScenarioExec.vue')
+                },{
+                    path: '/exectutions',
+                    name: 'exectutions',
+                    component: () => import('@/views/pages/OldScenarioExec.vue')
+                },
+                {
+                    path: '/cia',
+                    name: 'cia',
+                    component: () => import('@/views/pages/CiaScenarioExec.vue')
                 },
                 {
                     path: '/canvas',

src/views/pages/CiaScenarioExec.vue

@@ -0,0 +1,246 @@
+<template>
+        <div v-if="loading" class="flex justify-center">
+            <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
+        </div>
+        <div v-else>
+            <div class="flex items-center justify-between p-2">
+                <h1>
+                    {{ scenario.name }}
+                </h1>
+                <Button
+                    @click="back()" 
+                    label="Load" 
+                    class="flex items-center text-sm">
+                        <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
+                        <span>Back to Scenarios</span>
+                    </Button> 
+            </div>
+            <div class="flex mt-6">
+                <div class="card flex flex-col gap-4 w-full">
+                    <template v-if="scenario.inputs && scenario.inputs.length === 1">
+                        <div class="input-container flex items-center">
+                            <div class="flex-grow">
+                                <label :for="scenario.inputs[0].name"><h2>{{ scenario.inputs[0].label }}</h2></label>
+                                <div class="input-wrapper">
+                                    <component
+                                        :is="getInputComponent(scenario.inputs[0].type)"
+                                        :id="scenario.inputs[0].name"
+                                        v-model="formData[scenario.inputs[0].name]"
+                                        :options="scenario.inputs[0].options"
+                                        class="full-width-input"
+                                    />
+                                </div>
+                            </div>
+                            <Button label="Send" @click="execScenario" class="mt-9 ml-4"/>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div v-for="input in scenario.inputs" :key="input.name" class="input-container">
+                                <label :for="input.name"><b>{{ input.label }}</b></label>
+                                <div class="input-wrapper">
+                                    <component
+                                        :is="getInputComponent(input.type)"
+                                        :id="input.name"
+                                        v-model="formData[input.name]"
+                                        :options="input.options"
+                                        class="full-width-input"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex justify-end">
+                            <Button label="Submit" @click="execScenario" class=""/>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="loading_data" class="flex justify-center">
+            <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
+        </div>
+        <div v-if="data_loaded">
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Hermione Response</span>
+                </div>
+                </template>
+                <template #icons>
+                    <div class="flex justify-end">
+                    <Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
+                        <i class="pi pi-code"></i>
+                    </Button>
+                    </div>
+                </template>
+                
+                    <div class="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario_output != null">
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />
+                    </div>
+                </div>
+             </Panel>
+            <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+                
+                <div class="flex">
+                <div class="card flex flex-col gap-4 w-full">
+                <JsonEditorVue
+                    v-model="exec_scenario"
+                />
+            </div>
+        </div>
+    
+            </Dialog>
+        </div>
+</template>
+
+<script setup>
+
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
+import axios from 'axios';
+import JsonEditorVue from 'json-editor-vue';
+import 'md-editor-v3/lib/style.css';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import Select from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+
+const router = useRouter();
+const route = useRoute();
+const value = ref('');
+const scenario = ref({});
+const scenario_output = ref(null);
+const loading = ref(false);
+const data_loaded = ref(false);
+const loading_data = ref(false);
+const formData = ref({});
+const exec_id = ref(null);
+const exec_scenario = ref({});
+const debug_modal = ref(false)
+// Variable to hold the interval ID
+let pollingInterval = null;
+
+onMounted(() => {
+    loading.value = true
+    const id = '66f4ff309766132cadc97ebf' //TODO: Remove fixed scenario id route.params.id;  
+
+    axios.get('/scenarios/' + id )
+        .then(response => {
+            loading.value = false
+            scenario.value  = response.data
+        });
+});
+
+    const getInputComponent = (type) => {
+        switch (type) {
+            case 'text':
+                return InputText;
+            case 'textarea':
+                return Textarea;
+            case 'select':
+                return Select;
+            default:
+                return InputText;
+        }
+    };
+
+    const execScenario = () => {
+        loading_data.value = true;
+        data_loaded.value = false;
+
+        const data = {
+            scenario_id: scenario.value.id,
+            inputs: { ...formData.value }
+        };
+
+        axios.post('/scenarios/execute-async', data)
+            .then(response => {
+                scenario_output.value = response.data.stringOutput;
+                exec_id.value = response.data.scenarioExecution_id
+                // Start polling
+                startPolling();
+            })
+            .catch(error => {
+                console.error('Error executing scenario:', error);
+            });
+    };
+
+    const back = () => {
+        router.push({ name: 'scenario-list'});
+    }
+
+    const openDebug = () => {
+
+        axios.get('/scenarios/execute/'+ exec_id.value).then(resp =>{
+            exec_scenario.value = resp.data
+            debug_modal.value = true
+        })
+    }
+
+
+const pollBackendAPI = () => {
+
+        axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
+            if (response.data.status == 'OK' || response.data.status == 'ERROR') {
+                console.log("Condition met, stopping polling.");
+                stopPolling();
+
+                loading_data.value = false;
+                data_loaded.value = true;
+                scenario_output.value = response.data.stringOutput;
+                exec_id.value = response.data.scenarioExecution_id
+
+            } else {
+                console.log("Condition not met, polling continues.");
+            }
+        });
+}
+
+
+
+// Function to start polling
+function startPolling() {
+    // Set polling interval (every 5 seconds in this case)
+    pollingInterval = setInterval(pollBackendAPI, 2500);
+    console.log("Polling started.");
+}
+
+// Function to stop polling
+function stopPolling() {
+    clearInterval(pollingInterval);
+    console.log("Polling stopped.");
+}
+
+
+</script>
+
+<style scoped>
+    .input-container {
+        margin-bottom: 1em;
+    }
+
+    .input-wrapper {
+        display: flex;
+        align-items: center; 
+        gap: 0.5em; 
+        margin-top: 10px;
+    }
+
+    .full-width-input {
+        width: 100%;
+    }
+
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
+</style>

src/views/pages/KsDocumentForm.vue

@@ -1,87 +0,0 @@
-<template>
-    <div className="card">        
-        <h5>Ks document</h5>
-        <form @submit.prevent="submitForm">
-            <div class="p-field">
-                <label for="description">Description</label>
-                <InputText id="description" v-model="ksdocument.description" />
-            </div>
-            <div class="p-field">
-                <label for="fileName">File Name</label>
-                <InputText id="fileName" v-model="ksdocument.fileName" />
-            </div>
-            <div class="p-field">
-                <label for="filePath">File Path</label>
-                <InputText id="filePath" v-model="ksdocument.filePath" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionDate">Ingestion Date</label>
-                <InputText id="ingestionDate" v-model="ksdocument.ingestionDate" />
-            </div>
-            <div class="p-field">
-                <label for="defaultChunkSize">Default Chunk Size</label>
-                <InputNumber id="defaultChunkSize" v-model="ksdocument.ingestionInfo.defaultChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="maxNumberOfChunks">Max Number of Chunks</label>
-                <InputNumber id="maxNumberOfChunks" v-model="ksdocument.ingestionInfo.maxNumberOfChunks" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSize">Min Chunk Size</label>
-                <InputNumber id="minChunkSize" v-model="ksdocument.ingestionInfo.minChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSizeToEmbed">Min Chunk Size To Embed</label>
-                <InputNumber id="minChunkSizeToEmbed" v-model="ksdocument.ingestionInfo.minChunkSizeToEmbed" />
-            </div>
-            <div class="p-field">
-                <label for="type">Type</label>
-                <InputText id="type" v-model="ksdocument.ingestionInfo.type" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionStatus">Ingestion Status</label>
-                <InputText id="ingestionStatus" v-model="ksdocument.ingestionStatus" />
-            </div>
-            <div class="p-field">
-                <label for="name">Name</label>
-                <InputText id="name" v-model="ksdocument.name" />
-            </div>
-            <div class="p-field">
-                <label for="metadata">Metadata</label>
-                <InputTextarea id="metadata" v-model="ksdocument.ingestionInfo.metadata" />
-            </div>
-            <Button label="Submit" type="submit" />
-        </form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
-import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-import { data } from 'autoprefixer';
-
-const route = useRoute()
-
-const ksdocument = ref({ingestionInfo:{}});
-
-onMounted(() => {
-    axios.get('http://localhost:8082/ksdocuments/'+route.params.id)
-        .then(response => {
-            console.log(response.data);
-            ksdocument.value = response.data;
-        });
-});
-
-const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warning';
-    }
-}
-</script>

src/views/pages/KsDocuments.vue

@@ -1,74 +0,0 @@
-<template>
-    <div className="card">        
-
-        <DataTable
-            :value="ksdocuments"
-            :paginator="true"
-            :rows="10"
-            dataKey="id"
-            :rowHover="true"
-            showGridlines
-        >
-        <template #header>
-            <div class="flex flex-wrap items-center justify-between gap-2">
-                <span class="text-xl font-bold">KS Documents</span>
-                <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" /> 
-            </div>
-        </template>
-        <Column field="name" header="Name"></Column>
-        <Column field="fileName" header="File Name"></Column>
-        <Column field="ingestionStatus" header="Status">
-            <template #body="slotProps">
-                <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
-            </template>
-        </Column>
-        <Column field="ingestionDate" header="Ingestion Date"></Column>
-        <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-            <template #body="slotProps">
-                <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
-            </template>
-        </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
-import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-
-const router = useRouter()
-const ksdocuments = ref(null);
-const scenario = ref([])
-
-onMounted(() => {
-    axios.get('http://localhost:8082/fe-api/ksdocuments')
-        .then(response => {
-            console.log(response.data);
-            ksdocuments.value = response.data;
-        });
-});
-
-const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warning';
-    }
-}
-
-const editKsDocument = (data) => {
-    console.log(data);
-    router.push({ name: 'ks-document-edit', params: { id: data.id } });
-}
-
-const newKsDocument = () => {
-    console.log('new');
-    router.push({ name: 'ks-document-new'});
-
-}
-</script>

src/views/pages/OldScenarioExec.vue

@@ -0,0 +1,154 @@
+<template>
+        <div v-if="loading" class="flex justify-center">
+            <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
+        </div>
+        <div v-else>
+            <div class="flex items-center justify-between p-2">
+            
+                <Button
+                    @click="back()" 
+                    label="Load" 
+                    class="flex items-center text-sm">
+                        <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
+                        <span>Back to Scenarios</span>
+                    </Button> 
+            </div>
+            <div class="flex mt-6">
+                <div class="card flex flex-col gap-4 w-full">
+                    <div class="input-container flex items-center" v-if="!data_loaded">
+                        <div class="flex-grow">
+                            <label ><h2>Execution Id</h2></label>
+                            <div class="input-wrapper">
+                                <InputText v-model="execution_id" class="full-width-input" />
+                            </div>
+                        </div>
+                        <Button label="Find" @click="retrieveScenarioExec" class="mt-9 ml-4" />
+                    </div>
+                    <h1>
+                    {{ scenario.name }}
+                    </h1>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="loading_data" class="flex justify-center">
+            <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
+        </div>
+        <div v-if="data_loaded">
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Hermione Response</span>
+                </div>
+                </template>
+                <template #icons>
+                    <div class="flex justify-end">
+                    <Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
+                        <i class="pi pi-code"></i>
+                    </Button>
+                    </div>
+                </template>
+                
+                    <div class="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario_output != null">
+                        <!--<MdPreview class="editor" v-model="scenario_output" language="en-US"  />-->
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />
+                        
+                    </div>
+                </div>
+            </Panel>
+            <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+                
+                <div class="flex">
+                <div class="card flex flex-col gap-4 w-full">
+                <JsonEditorVue
+                    v-model="exec_scenario"
+                />
+            </div>
+        </div>
+    
+            </Dialog>
+        </div>
+</template>
+
+<script setup>
+
+import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
+import axios from 'axios';
+import JsonEditorVue from 'json-editor-vue';
+import 'md-editor-v3/lib/style.css';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+
+const router = useRouter();
+const route = useRoute();
+const value = ref('');
+const scenario = ref({});
+const scenario_output = ref(null);
+const loading = ref(false);
+const data_loaded = ref(false);
+const loading_data = ref(false);
+const formData = ref({});
+const exec_id = ref(null);
+const exec_scenario = ref({});
+const debug_modal = ref(false)
+const execution_id=ref("");
+
+
+const retrieveScenarioExec = () => {
+    const id = execution_id.value
+    loading.value = true
+
+    axios.get('/execution?id=' + id )
+        .then(response => {
+            loading.value = false
+            scenario.value  = response.data.scenario
+            exec_scenario.value = response.data
+            data_loaded.value = true;
+            scenario_output.value = response.data.execSharedMap.scenario_output;
+            exec_id.value = response.data.scenarioExecution_id      
+        });
+};
+
+   
+
+    
+const back = () => {
+    router.push({ name: 'scenario-list'});
+}
+
+const openDebug = () => {
+    debug_modal.value = true
+}
+</script>
+
+<style scoped>
+    .input-container {
+        margin-bottom: 1em;
+    }
+
+    .input-wrapper {
+        display: flex;
+        align-items: center; 
+        gap: 0.5em; 
+        margin-top: 10px;
+    }
+
+    .full-width-input {
+        width: 100%;
+    }
+
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
+</style>