cleared execution data after changing a scenario, added logic to change scenario execution from url

src/views/pages/OldScenarioExec.vue

@@ -23,7 +23,7 @@
             <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">Response of Execution ID {{execution_id}}</span>
                 </div>
                 </template>
                 <template #icons>
@@ -34,7 +34,16 @@
                     </div>
                 </template>
 
-                    <div class="card flex flex-col gap-4 w-full">
+                <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>
+                
+                <div class="card flex flex-col gap-4 w-full">
                     <div v-if="scenario.outputType == 'ciaOutput'">
                         <ChangeImpactOutputViewer :scenario_output="scenario_output" />                       
                     </div>
@@ -82,12 +91,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);
-    retrieveScenarioExec(execution_id.id)
+    if (execution){
+        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 +121,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/ScenarioExec.vue

@@ -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 class="flex items-center justify-between p-2">
-            <!--
+    <div v-else >
+        <!-- <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"                
@@ -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 } });
     });
 };