Merge branch 'develop' of https://dev.azure.com/olympusai/Olympus/_git/hermione-fe into develop

index.html

@@ -5,7 +5,7 @@
       <meta charset="UTF-8">
       <link rel="icon" href="/favicon.ico">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Sakai Vue</title>
+      <title>Hermione</title>
       <link href="https://cdn.jsdelivr.net/npm/@vetixy/circular-std@1.0.0/dist/index.min.css" rel="stylesheet">
 
 </head>

src/assets/layout/variables/_common.scss

@@ -17,4 +17,6 @@
     --focus-ring-color: var(--p-focus-ring-color);
     --focus-ring-offset: var(--p-focus-ring-offset);
     --focus-ring-shadow: var(--p-focus-ring-shadow);
+    --p-tooltip-color: black !important;
+    --p-tooltip-background: white !important; 
 }

src/components/CiaFlowCodeViewer.vue

@@ -7,9 +7,9 @@ import Dialog from 'primevue/dialog'
 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'
+import { UserPrefStore } from '@/stores/UserPrefStore.js';
 
 
 const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
@@ -22,6 +22,7 @@ const { graph, layout, previousDirection } = useLayout()
 
 const dialogCodeVisible = ref(false)
 
+const userPrefStore = UserPrefStore();
 
 //66f55e4b2894530b1c154f69
 const props = defineProps({
@@ -59,11 +60,9 @@ function layoutGraph(direction) {
 }
 
 function defineNodes() {
-
   var tmpNode=[]
-    var tmpEdges=[]
+    var tmpEdges = []
-    var app = {'name':'Apollo'}
+    var app = { name: userPrefStore.getSelApp.fe_name }
-
     tmpNode.push({
         id: app.name,
         data: { label: app.name },

src/components/FileFlowViewer.vue

@@ -212,18 +212,35 @@ function defineNodes() {
     fill:#fffffb
 }
 
+.vue-flow__node-default {
+    border: 1px solid #292524;
+    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;
+    word-wrap: break-word;
+    overflow-wrap: break-word
+}
 
 .vue-flow__node-class-node {
-    border:1px solid #dc07bc;
+    border: 1px solid #a100ff;
-    padding:10px;
+    padding: 10px;
     border-radius: 5px;
-    background:#f5f5f5;
+    background: #f5f5f5;
-    display:flex;
+    display: flex;
-    flex-direction:column;
+    flex-direction: column;
-    justify-content:space-between;
+    justify-content: space-between;
-    align-items:center;
+    align-items: center;
-    gap:10px;
+    gap: 10px;
-    max-width:250px;
+    max-width: 250px;
     min-width: 200px;
+    word-wrap: break-word;
+    overflow-wrap: break-word
 }
 </style>

src/components/SingleClassViewer.vue

@@ -40,7 +40,7 @@
                     </div>
 
                     <div v-if="loadingStore.re_loading" class="flex justify-center">
-                         <jellyfish-loader :loading="loadingStore.re_loading"  scale="1" />
+                         <jellyfish-loader :loading="loadingStore.re_loading"  color="#a100ff" scale="1"/>
             <!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
                 </div>
                 <div v-if="!loadingStore.re_loading">

src/layout/AppConfigurator.vue

@@ -32,7 +32,7 @@ const primaryColors = ref([
     { name: 'sky', palette: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' } },
     { name: 'blue', palette: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' } },
     { name: 'indigo', palette: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' } },
-    { name: 'violet', palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' } },
+    { name: 'violet', palette: { 50: '#a100ff', 100: '#a100ff', 200: '#a100ff', 300: '#a100ff', 400: '#a100ff', 500: '#a100ff', 600: '#a100ff', 700: '#a100ff', 800: '#a100ff', 900: '#a100ff', 950: '#a100ff' } },
     { name: 'purple', palette: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' } },
     { name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
     { name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
@@ -66,7 +66,7 @@ const surfaces = ref([
     },
     {
         name: 'viva',
-        palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
+        palette: { 0: '#d6d3d1', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
     },
     {
         name: 'ocean',

src/layout/AppTopbar.vue

@@ -86,17 +86,17 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
             <div class="layout-config-menu">
                 <div v-if="loadingStore.isLoading">
                     <!--<ProgressSpinner v-if="loadingStore.loadingType=='data'" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>-->
-                    <JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px"  />
+                    <JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" color="#a100ff" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px"/>
-                    <RiseLoader  v-if="loadingStore.loadingType=='data'"    style="scale: 0.5; height: 10px; margin-top:5px"/>
+                    <RiseLoader  v-if="loadingStore.loadingType=='data'" color="#a100ff"   style="scale: 0.5; height: 10px; margin-top:5px"/>
 
                 </div>
-                <button @click="router.push('/mdcanvas')"  class="layout-topbar-action" >
+                <!-- <button @click="router.push('/mdcanvas')"  class="layout-topbar-action" >
                     <i class="pi pi-pencil"></i>
-                </button >
+                </button > -->
          
                  
-                <div class="relative">
+                <!-- <div class="relative">
-                   <!----> <button
+                   <button
                         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                         type="button"
                         class="layout-topbar-action layout-topbar-action-highlight"
@@ -104,7 +104,7 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
                         <i class="pi pi-palette"></i>
                     </button>
                     <AppConfigurator />
-                </div>
+                </div> -->
              
             
            

src/main.js

@@ -9,10 +9,13 @@ import App from './App.vue';
 import router from './router';
 
 
+import Aura from '@primevue/themes/aura';
+import Lara from '@primevue/themes/lara';
 import Nora from '@primevue/themes/nora';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
+import { definePreset } from '@primevue/themes';
 
 import BlockViewer from '@/components/BlockViewer.vue';
 
@@ -63,14 +66,78 @@ axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:80
 console.log(import.meta.env.VITE_BACKEND_URL);
 
 const app = createApp(App);
-const pinia = createPinia()
+const pinia = createPinia();
+const preset = definePreset(Nora, {
+    semantic: {
+        primary: {
+            50: '{violet.50}',
+            100: '{violet.100}',
+            200: '{violet.200}',
+            300: '{violet.300}',
+            400: '{violet.400}',
+            500: '{violet.500}',
+            600: '{violet.600}',
+            700: '{violet.700}',
+            800: '{violet.800}',
+            900: '{violet.900}',
+            950: '{violet.950}'
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: '#f3f3f3',
+                    50: '{viva.50}',
+                    100: '{viva.100}',
+                    200: '{viva.200}',
+                    300: '{viva.300}',
+                    400: '{viva.400}',
+                    500: '{viva.500}',
+                    600: '{viva.600}',
+                    700: '{viva.700}',
+                    800: '{viva.800}',
+                    900: '{viva.900}',
+                    950: '{viva.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}',
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}',
+                }
+            }
+        },
+        focusRing: {
+            width: '2px',
+            color: '{primary.color}',
+            offset: '1px'
+        }
+    }
+});
 
 app.use(pinia);
 app.use(router);
 
 app.use(PrimeVue, {
     theme: {
-        preset: Nora,
+        preset: preset,
         options: {
             prefix: 'p',
             darkModeSelector: '.app-dark',

src/stores/UserPrefStore.js

@@ -61,11 +61,15 @@ export const UserPrefStore = defineStore('userpref_store', () => {
       }
   });
 
+  const getSelProj = computed(() => {
+    return selectedProject.value
+  })
+
   const getSelApp = computed(() => {
     return selectedApp.value
   })
   
 
   
-    return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject }
+    return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject,getSelProj }
   })

src/views/pages/ApplicationBrowser.vue

@@ -5,26 +5,25 @@
             </h1>
     </div>
 
-    <div class="grid grid-cols-12 gap-2">
+    <div class="flex gap-2">
-        <div class="col-span-6">
+        <div class="card folder-tree">
-            <div class="card folder-tree ">
+            <h5>File Browser</h5>
-                <h5>File Browser</h5>
+            <div v-if="nodes && nodes.length" class="flex-1">
-                <div v-if="nodes && nodes.length">
+                <div class="flex flex-wrap gap-2">
-                    <div class="flex flex-wrap gap-2">
+                    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
-                        <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
+                    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
-                        <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
-                    </div>
-                    <Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
-                </div>
-                <div v-else class="self-center" style="flex: 1">
-                          <Skeleton v-for="(config, index) in skeletonConfigs"
-                                    :key="index"
-                                    :width="config.width"
-                                    :height="config.height"
-                                    class="mb-2" />
                 </div>
+                <Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
             </div>
-        </div>   
+            <div v-else class="flex-skeleton">
+                <Skeleton v-for="(config, index) in skeletonConfigs"
+                    :key="index"
+                    :width="config.width"
+                    :height="config.height"
+                    class="mb-2 w-full"
+                    style="background-color: #e7e7e8" />
+            </div>
+        </div>    
         <div id ="card-flow-codeviewer" class="flex-1">
             <div class="card flow-codeviewer">  
                 <h5>File Explorer</h5>
@@ -44,15 +43,13 @@ import { LoadingStore } from '@/stores/LoadingStore.js';
 import Tree from 'primevue/tree';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { UserPrefStore } from '../../stores/UserPrefStore.js';
+import { UserPrefStore } from '@/stores/UserPrefStore.js';
 
 const nodes = ref(null)
 const expandedKeys = ref({});
 const selectedFile = ref({})
 const router = useRouter();
 const userPrefStore = UserPrefStore();
-//const selectedApp = userPrefStore.getSelApp;
-//const application=ref(selectedApp.fe_name)
 const loadingStore = LoadingStore()
 
 onMounted(() => {
@@ -92,7 +89,7 @@ function onNodeSelect(e){
         selectedFile.value = e.key
     }
     console.log(e)
-}
+};
 
 
 const expandAll = () => {
@@ -169,7 +166,13 @@ watch(selectedFile, () => {
     width: 100%;
 }
 
-.flow-codeviewer{
+.flow-codeviewer {
-    height:75vh
+    height: 75vh;
+}
+
+.flex-skeleton {
+  flex: 1;
+  min-width: 350px;
+  text-align: center;
 }
 </style>

src/views/pages/OldScenarioExec.vue

@@ -20,10 +20,35 @@
             <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
         </div>
         <div v-if="data_loaded">
+            <!-- <div class="box p-4 border rounded-md shadow-sm" style="background-color: #f3f3f3;">
+                    <div v-for="(input, index) in inputs" :key="index" class="input-container">
+                        <div class="input-wrapper">
+                            <span class="font-bold">{{ index.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase()) }}:</span>
+                            <span>{{ input }}</span>
+                        </div>
+                    </div>
+            </div> -->
+
             <Panel class="mt-6">
                 <template #header>
                 <div class="flex items-center gap-2">
-                    <span class="font-bold">Hermione Response of Execution ID {{execution_id.id}}</span>
+                    <span class="font-bold">Execution Input for ID {{execution_id}}</span>
+                </div>
+                </template>
+                <div class="box p-4 border rounded-md shadow-sm" style="background-color: white;">
+                    <div v-for="(input, index) in inputs" :key="index" class="input-container">
+                        <div class="input-wrapper">
+                            <span class="font-bold">{{ index.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase()) }}:</span>
+                            <span>{{ input }}</span>
+                        </div>
+                    </div>
+            </div>
+            </Panel>
+
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Hermione response</span>
                 </div>
                 </template>
                 <template #icons>
@@ -34,7 +59,32 @@
                     </div>
                 </template>
                 
-                    <div class="card flex flex-col gap-4 w-full">
+                <div class="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario.outputType == 'ciaOutput'">
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />                       
+                    </div>
+                    <div v-else>
+                        <MdPreview class="editor" v-model="scenario_output" language="en-US"  />
+                    </div>
+                </div>
+            </Panel>
+
+
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Response of Execution ID {{execution_id}}</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.outputType == 'ciaOutput'">
                         <ChangeImpactOutputViewer :scenario_output="scenario_output" />                       
                     </div>
@@ -82,12 +132,22 @@ const exec_id = ref(null);
 const exec_scenario = ref({});
 const debug_modal = ref(false);
 const scenario_execution_store = ScenarioExecutionStore();
-const execution_id = scenario_execution_store.getSelectedExecScenario;
+const execution = scenario_execution_store.getSelectedExecScenario;
+const execution_id = ref(null)
+const inputs = ref(null);
 
 
 onMounted(() => {
-    console.log("scenario id: ", execution_id.id);
+    if (execution){
-    retrieveScenarioExec(execution_id.id)
+        console.log("scenario id: ", execution);
+        execution_id.value = execution.id
+        console.log("execution_id: ",execution_id)
+    }else{
+        const url = window.location.href;
+        execution_id.value = (new URL(url)).searchParams.get('id')
+        console.log(execution_id.value)
+    }
+    retrieveScenarioExec(execution_id.value)
 });
 
 const retrieveScenarioExec = (id) => {
@@ -102,6 +162,7 @@ const retrieveScenarioExec = (id) => {
             data_loaded.value = true;
             scenario_output.value = response.data.execSharedMap.scenario_output;
             exec_id.value = response.data.scenarioExecution_id
+            inputs.value = response.data.scenarioExecutionInput.inputs
         });
 };
 

src/views/pages/ProjectList.vue

@@ -18,6 +18,7 @@
                         v-model="data.search"
                         size="medium"
                         variant="filled"
+                        style="border: 1px solid #a100ff"
                     />
                 </div>
                 <SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">

src/views/pages/ScenarioExec.vue

@@ -51,16 +51,16 @@
             </div>
 
         <div v-if="loading_data" class="flex flex-col items-center">
-            <div class="flex justify-center">
+            <div class="flex justify-center mt-4">
                 <jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
             </div> 
-            <div v-if="scenario_response_message && scenario_response_message.includes('-')">
+            <div v-if="scenario_response_message && scenario_response_message.includes('/')">
-                <span>{{ scenario_response_message.split('-').join(' ') }}</span>
+                <span>{{ scenario_response_message }}</span>
             </div>
             <div v-else>
                 Starting execution...
             </div>
-            <div class="flex justify-center">
+            <div class="flex justify-center" style="margin-bottom: 30px;">
                 <p>Time elapsed:&nbsp;</p>
                 <div id="timer" class="timer">00:00</div>
             </div>
@@ -178,6 +178,8 @@ watch(() => route.params.id, fetchScenario);
 
     //Function to fetch scenarios
     function fetchScenario(id) {
+        data_loaded.value = false; 
+        formData.value = {}; 
         loading.value = true;
         axios.get(`/scenarios/${id}`)
             .then(response => {

src/views/pages/ScenarioExecList.vue

@@ -2,9 +2,9 @@
     <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 v-else >
-        <div class="flex items-center justify-between p-2">
+        <!-- <div class="flex items-center justify-between p-2">
-            <!--
+
             <Button
                 @click="back()" 
                 label="Load" 
@@ -12,11 +12,11 @@
                     <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
                     <span>Back to Scenarios</span>
             </Button>
-            -->
+
-        </div>
+        </div> -->
         <h2 class="text-xl font-bold mt-6">Executions List</h2>
         
-        <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" 
+        <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" scrollable scrollHeight="420px"
             :loading="loading_data" 
             class="mt-0"
             :rows="10"                
@@ -37,7 +37,7 @@
                 </div>
             </template>
             
-            <Column field="id" header="Execution ID"></Column>
+            <!-- <Column field="id" header="Execution ID"></Column> -->
             <Column field="scenario.name" header="Scenario Name">
                 <template #body="slotProps">
                     <div class="flex items-center gap-2">
@@ -74,7 +74,7 @@
                     <Rating :value="slotProps.data.rating" :stars="5" readonly cancel="false" />
                 </template>
             </Column>
-            <Column field="id">
+            <Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3'}">
                 <template #body="slotProps">
                     <div class="flex justify-center items-center h-full">
                         <Button label="View" @click="goToScenarioExec(slotProps.data)"  class="mt-0 ml-0" />
@@ -139,7 +139,7 @@ const goToScenarioExec = (execScenarioItem) => {
     console.log(execScenarioItem);
     
     scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
-        router.push({ name: 'scenario-exec-history'});
+        router.push({ name: 'scenario-exec-history',  query: { id:execScenarioItem.id } });
     });
 };
 

src/views/pages/ScenarioList.vue

@@ -15,6 +15,7 @@
                         v-model="scenario_store.filterString"
                         size="medium"
                         variant="filled"
+                        style="border: 1px solid #a100ff"
                     />
                 </div>