Skip to content

Commit

Permalink
Merge pull request #40 from Cambio-Project/1.2.3-useability
Browse files Browse the repository at this point in the history 
Minor useability improvements and tooltips
  • Loading branch information
@franksn90
franksn90 authored Sep 4, 2024
2 parents bee16c1 + 4d84a07 commit b8785f5
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 67 deletions.
117 changes: 82 additions & 35 deletions components/Scenario.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,12 +175,18 @@ export default {
</div>

<div class="center mt-2 mb-2">
<UButton class="mr-1" icon="i-heroicons-pencil-square-16-solid" square size="xs" color="blue"
@click="toScenarioEditor(scenario.simulationID);"></UButton>
<UButton class="mr-1" icon="i-heroicons-cloud-arrow-down-16-solid" square size="xs" color="blue"
@click="downloadJSON(scenario.simulationID);"></UButton>
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="removeScenario(scenario.simulationID);"></UButton>
<UTooltip text="Edit Scenario">
<UButton class="mr-1" icon="i-heroicons-pencil-square-16-solid" square size="xs" color="blue"
@click="toScenarioEditor(scenario.simulationID);"></UButton>
</UTooltip>
<UTooltip text="Download Scenario">
<UButton class="mr-1" icon="i-heroicons-cloud-arrow-down-16-solid" square size="xs" color="blue"
@click="downloadJSON(scenario.simulationID);"></UButton>
</UTooltip>
<UTooltip text="Delete Scenario">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="removeScenario(scenario.simulationID);"></UButton>
</UTooltip>
</div>
</div>

Expand Down Expand Up @@ -221,10 +227,18 @@ export default {
<div class="container-row">
<div class="container-row-element-xxs">
{{ index + 1 }}.
<UButton class="ml-2" square v-if="!stimulus.showDetails" color="gray" size="2xs"
icon="i-heroicons-chevron-down" @click="toggleDetails(stimulus)"></UButton>
<UButton class="ml-2" square v-if="stimulus.showDetails" color="gray" size="2xs"
icon="i-heroicons-chevron-up" @click="toggleDetails(stimulus)"></UButton>
<span v-if="!stimulus.showDetails">
<UTooltip text="Show Specification Details">
<UButton class="ml-2" square color="gray" size="2xs"
icon="i-heroicons-chevron-down" @click="toggleDetails(stimulus)"></UButton>
</UTooltip>
</span>
<span v-if="stimulus.showDetails">
<UTooltip text="Hide Specification Details">
<UButton class="ml-2" square color="gray" size="2xs"
icon="i-heroicons-chevron-up" @click="toggleDetails(stimulus)"></UButton>
</UTooltip>
</span>
</div>
<div class="container-row-element">
<strong>{{ stimulus.SSEL }}</strong>
Expand Down Expand Up @@ -270,10 +284,18 @@ export default {
<div class="container-row">
<div class="container-row-element-xxs">
{{ index + 1 }}.
<UButton class="ml-2" square v-if="!response.showDetails" color="gray" size="2xs"
icon="i-heroicons-chevron-down" @click="toggleDetails(response)"></UButton>
<UButton class="ml-2" square v-if="response.showDetails" color="gray" size="2xs"
icon="i-heroicons-chevron-up" @click="toggleDetails(response)"></UButton>
<span v-if="!response.showDetails">
<UTooltip text="Show Specification Details">
<UButton class="ml-2" square color="gray" size="2xs"
icon="i-heroicons-chevron-down" @click="toggleDetails(response)"></UButton>
</UTooltip>
</span>
<span v-if="response.showDetails">
<UTooltip text="Hide Specification Details">
<UButton class="ml-2" square color="gray" size="2xs"
icon="i-heroicons-chevron-up" @click="toggleDetails(response)"></UButton>
</UTooltip>
</span>
</div>
<div class="container-row-element">
<strong>{{ response.SSEL }}</strong>
Expand Down Expand Up @@ -402,14 +424,23 @@ export default {
<span>{{ index + 1 }}.</span>
</div>
<div class="container-row-element">
<span> <Icon name="heroicons:globe-alt-20-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
getSimulationVerificationResultsPerResponse(this.result, index)
}}</span>
<span>
<UTooltip text="Simulation Results">
<Icon name="heroicons:globe-alt-20-solid" size="1.3em" class="mb-1 mr-1"/>{{
getSimulationVerificationResultsPerResponse(this.result, index)
}}
</UTooltip>
</span>

</div>
<div class="container-row-element">
<span> <Icon name="heroicons:chart-bar-16-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
getSearchVerificationResultsPerResponse(this.result, index)
}}</span>
<span>
<UTooltip text="Monitoring Results">
<Icon name="heroicons:chart-bar-16-solid" size="1.3em" class="mb-1 mr-1"/>{{
getSearchVerificationResultsPerResponse(this.result, index)
}}
</UTooltip>
</span>
</div>
</div>
</div>
Expand All @@ -436,16 +467,22 @@ export default {
</div>
<div v-if="result !== null">
<UDivider label="Actions" class="mb-1"/>
<UButton class="mr-1" icon="i-heroicons-globe-alt-20-solid" square size="xs" color="blue"
@click="initiateSimulation(scenario)"></UButton>
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSimulationVerificationRequired(scenario.simulationID)}"
square
size="xs"
color="blue"
@click="verifyScenario(scenario)"></UButton>
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteAllSimulationResultAndUpdate(scenario.simulationID);"></UButton>
<UTooltip text="Start Simulation">
<UButton class="mr-1" icon="i-heroicons-globe-alt-20-solid" square size="xs" color="blue"
@click="initiateSimulation(scenario)"></UButton>
</UTooltip>
<UTooltip text="Check Simulation Results">
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSimulationVerificationRequired(scenario.simulationID)}"
square
size="xs"
color="blue"
@click="verifyScenario(scenario)"></UButton>
</UTooltip>
<UTooltip text="Delete All Simulation Executions">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteAllSimulationResultAndUpdate(scenario.simulationID);"></UButton>
</UTooltip>

<UDivider label="Executions" class="mt-2 mb-2"/>
<div v-for="(resultName,resultIndex) in result.simulationNames">
Expand All @@ -464,8 +501,10 @@ export default {
</div>
<div class="container-element-xs w-full">
<div class="float-right mt-1">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteResultAndUpdate('simulation', scenario.simulationID, resultName, resultIndex);"></UButton>
<UTooltip text="Delete Simulation Execution">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteResultAndUpdate('simulation', scenario.simulationID, resultName, resultIndex);"></UButton>
</UTooltip>
</div>
</div>
</div>
Expand Down Expand Up @@ -500,7 +539,7 @@ export default {
</div>
<div class="container-row-element">
<UTooltip text="Refine Response">
<UButton class="mr-1" icon="i-heroicons-arrow-path" square size="xs"
<UButton class="mr-1" icon="i-heroicons-adjustments-horizontal" square size="xs"
@click="toRefinement(scenario.simulationID, index, resultName, true);"></UButton>
</UTooltip>
</div>
Expand Down Expand Up @@ -531,15 +570,21 @@ export default {
</div>
<div v-if="result !== null">
<UDivider label="Actions" class="mb-1"/>
<UTooltip text="Start Monitoring Search">
<UButton class="mr-1" icon="i-heroicons-chart-bar-16-solid" square size="xs" color="blue"
@click="initiateSearch(scenario)"></UButton>
</UTooltip>
<UTooltip text="Check Monitoring Search Results">
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSearchVerificationRequired(scenario.simulationID)}" square
size="xs"
color="blue"
@click="verifySearch(scenario)"></UButton>
</UTooltip>
<UTooltip text="Delete All Monitoring Executions">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteAllSearchResultAndUpdate(scenario.simulationID);"></UButton>
</UTooltip>

<UDivider label="Executions" class="mt-2 mb-2"/>
<div v-for="(resultName,resultIndex) in result.searchNames">
Expand All @@ -558,8 +603,10 @@ export default {
</div>
<div class="container-element-xs w-full">
<div class="float-right mt-1">
<UTooltip text="Delete Monitoring Execution">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="deleteResultAndUpdate('search', scenario.simulationID, resultName, resultIndex);"></UButton>
</UTooltip>
</div>
</div>
</div>
Expand Down Expand Up @@ -594,7 +641,7 @@ export default {
</div>
<div class="container-row-element">
<UTooltip text="Refine Response">
<UButton class="mr-1" icon="i-heroicons-arrow-path" square size="xs"
<UButton class="mr-1" icon="i-heroicons-adjustments-horizontal" square size="xs"
@click="toRefinement(scenario.simulationID, index, resultName, false);"></UButton>
</UTooltip>
</div>
Expand All @@ -621,7 +668,7 @@ export default {
</div>

<div class="mt-4 mb-4">
<UButton @click="toScenariosOverview()">Complete</UButton>
<UButton @click="toScenariosOverview()">Leave</UButton>
</div>
</template>

Expand Down
92 changes: 63 additions & 29 deletions components/Scenarios.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,14 +270,22 @@ export default {

<!-- Stimuli Counter -->
<div class="container-row-element-xs">
<UTooltip text="Stimulus Count">
<span>
<Icon name="icon-park-solid:lightning" color="red"/>
{{ scenario.stimuli.length }}
</span>
</UTooltip>
</div>

<!-- Response Counter -->
<div class="container-row-element-xs">
<Icon name="material-symbols:ecg-heart" color="purple"/>
{{ scenario.responses.length }}
<UTooltip text="Response Count">
<span>
<Icon name="material-symbols:ecg-heart" color="purple"/>
{{ scenario.responses.length }}
</span>
</UTooltip>
</div>

<!-- ID -->
Expand All @@ -288,15 +296,23 @@ export default {
<!-- Buttons -->
<div class="container-row-element-s">
<div class="float-right">
<UButton class="mr-1" icon="i-heroicons-pencil-square-16-solid" square size="xs" color="blue"
@click="toScenarioEditor(scenario.simulationID);"></UButton>
<UButton class="mr-1" icon="i-heroicons-document-magnifying-glass-16-solid" square size="xs"
color="blue"
@click="toScenarioDetails(scenario.simulationID)"></UButton>
<UButton class="mr-1" icon="i-heroicons-cloud-arrow-down-16-solid" square size="xs" color="blue"
@click="downloadJSON(scenario.simulationID);"></UButton>
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="removeScenario(scenario.simulationID);"></UButton>
<UTooltip text="Edit Scenario">
<UButton class="mr-1" icon="i-heroicons-pencil-square-16-solid" square size="xs" color="blue"
@click="toScenarioEditor(scenario.simulationID);"></UButton>
</UTooltip>
<UTooltip text="Show Scenario Details">
<UButton class="mr-1" icon="i-heroicons-document-magnifying-glass-16-solid" square size="xs"
color="blue"
@click="toScenarioDetails(scenario.simulationID)"></UButton>
</UTooltip>
<UTooltip text="Download Scenario">
<UButton class="mr-1" icon="i-heroicons-cloud-arrow-down-16-solid" square size="xs" color="blue"
@click="downloadJSON(scenario.simulationID);"></UButton>
</UTooltip>
<UTooltip text="Delete Scenario">
<UButton class="mr-1" icon="i-heroicons-trash-16-solid" square size="xs" color="red"
@click="removeScenario(scenario.simulationID);"></UButton>
</UTooltip>
</div>
</div>
</div>
Expand Down Expand Up @@ -388,14 +404,18 @@ export default {
<span>{{ index + 1 }}.</span>
</div>
<div class="container-row-element">
<UTooltip text="Response Satisfaction for Simulation">
<span> <Icon name="heroicons:globe-alt-20-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
getSimulationVerificationResultsPerResponse(this.findResults(scenario.simulationID), index)
}}</span>
</UTooltip>
</div>
<div class="container-row-element">
<UTooltip text="Response Satisfaction for Monitoring">
<span> <Icon name="heroicons:chart-bar-16-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
getSearchVerificationResultsPerResponse(this.findResults(scenario.simulationID), index)
}}</span>
</UTooltip>
</div>

</div>
Expand Down Expand Up @@ -478,21 +498,27 @@ export default {
<div class="container-row ">
<div class="container-row-element-s pt-2 pb-1"
:style="{ 'background-color': getResilienceScoreColor(this.findResults(scenario.simulationID))}">
<span>
<UTooltip text="Scenario's Resilience Score">
<span>
{{ getResilienceScore(this.findResults(scenario.simulationID)) }}
</span>
</span>
</UTooltip>
</div>

<div class="container-row-element-s pt-2 pb-1">
<span> <Icon name="heroicons:globe-alt-20-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
<UTooltip text="Full Response Satisfaction for Simulation">
<span> <Icon name="heroicons:globe-alt-20-solid" size="1.3em" class="mb-1 mr-1"/>{{
getSimulationVerificationResultsPerScenario(this.findResults(scenario.simulationID))
}}</span>
</UTooltip>
</div>

<div class="container-row-element-s pt-2 pb-1">
<span> <Icon name="heroicons:chart-bar-16-solid" size="1.3em" class="mb-1 mr-1"></Icon>{{
<UTooltip text="Full Response Satisfaction for Monitoring">
<span> <Icon name="heroicons:chart-bar-16-solid" size="1.3em" class="mb-1 mr-1"/>{{
getSearchVerificationResultsPerScenario(this.findResults(scenario.simulationID))
}}</span>
</UTooltip>
</div>

<div class="container-row-element pt-1 pb-1">
Expand Down Expand Up @@ -544,20 +570,28 @@ export default {

<div class="container-row-element-s pt-1 pb-1">
<span class="float-right">
<UButton class="mr-1" icon="i-heroicons-globe-alt-20-solid" square size="xs" color="blue"
@click="initiateSimulation(scenario)"></UButton>
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSimulationVerificationRequired(scenario.simulationID)}" square
size="xs"
color="blue"
@click="verifyScenario(scenario)"></UButton>
<UButton class="mr-1" icon="i-heroicons-chart-bar-16-solid" square size="xs" color="blue"
@click="initiateSearch(scenario)"></UButton>
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSearchVerificationRequired(scenario.simulationID)}" square
size="xs"
color="blue"
@click="verifySearch(scenario)"></UButton>
<UTooltip text="Start Simulation">
<UButton class="mr-1" icon="i-heroicons-globe-alt-20-solid" square size="xs" color="blue"
@click="initiateSimulation(scenario)"/>
</UTooltip>
<UTooltip text="Check Simulation Results">
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSimulationVerificationRequired(scenario.simulationID)}" square
size="xs"
color="blue"
@click="verifyScenario(scenario)"/>
</UTooltip>
<UTooltip text="Start Monitoring Search">
<UButton class="mr-1" icon="i-heroicons-chart-bar-16-solid" square size="xs" color="blue"
@click="initiateSearch(scenario)"/>
</UTooltip>
<UTooltip text="Check Monitoring Search Results">
<UButton class="mr-1" icon="i-heroicons-check-16-solid"
:class="{ 'blue-glowing-button' : isSearchVerificationRequired(scenario.simulationID)}" square
size="xs"
color="blue"
@click="verifySearch(scenario)"/>
</UTooltip>
</span>
</div>
</div>
Expand Down
Loading

0 comments on commit b8785f5

Please sign in to comment.