Skip to content

Commit

Permalink
5016 bug when extracting a configuration we need to distinguish missi…
Browse files Browse the repository at this point in the history 
…ng values from 0 (#5066)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@YohannParis @github-actions
YohannParis and github-actions[bot] authored Oct 9, 2024
1 parent 794e558 commit 3114569
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 140 deletions.
107 changes: 44 additions & 63 deletions packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,37 @@
<h4>Other configuration values for '{{ otherValueList[0].target }}'</h4>
</template>
<DataTable
:value="otherValueList"
@update:selection="onCustomSelectionChange"
dataKey="id"
:rowsPerPageOptions="[10, 20, 50]"
tableStyle="min-width: 55rem"
:rowsPerPageOptions="[10, 20, 50]"
:value="otherValueList"
@update:selection="onCustomSelectionChange"
>
<template #header> </template>
<Column headerStyle="width: 2rem">
<Column>
<template #body="{ data }">
<RadioButton
v-model="customSelection"
variant="filled"
:inputId="data.id"
:value="data"
variant="filled"
@change="onCustomSelectionChange(data)"
/>
</template>
</Column>
<Column
v-for="(col, index) in selectedColumns"
:field="col.field"
:header="col.header"
:sortable="col.field !== 'stats'"
:key="index"
:style="`width: ${getColumnWidth(col.field)}%`"
>
<Column sortable>
<template #header>Configuration name</template>
<template #body="{ data }">{{ data.name }}</template>
</Column>
<Column sortable>
<template #header>Source</template>
<template #body="{ data }">{{ data.source }}</template>
</Column>
<Column sortable>
<template #header>Value</template>
<template #body="{ data }">
<template v-if="col.field === 'name'">
{{ data.name }}
</template>
<template v-if="col.field === 'source'">
{{ data.source }}
</template>
<template v-if="col.field === 'expression'">
<section class="inline-flex gap-1">
<span class="value-label">Constants</span>
<span class="value">{{ numberToNist(data.expression) || data.expression }}</span>
</section>
</template>
<span class="value-label">Constants</span>
{{ numberToNist(data.expression) || data.expression }}
</template>
</Column>
<ColumnGroup type="footer">
Expand Down Expand Up @@ -85,25 +77,25 @@
</ColumnGroup>
</DataTable>
<template #footer>
<Button label="Apply selected value" @click="applySelectedValue" :disabled="!selection" />
<Button label="Apply selected value" :disabled="!selection" @click="applySelectedValue" />
<Button label="Cancel" severity="secondary" outlined @click="emit('close-modal')" />
</template>
</tera-modal>
</template>

<script setup lang="ts">
import { numberToNist } from '@/utils/number';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
import { DistributionType } from '@/services/distribution';
import { ref } from 'vue';
import Button from 'primevue/button';
import TeraModal from '@/components/widgets/tera-modal.vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Row from 'primevue/row';
import DataTable from 'primevue/datatable';
import ColumnGroup from 'primevue/columngroup';
import RadioButton from 'primevue/radiobutton';
import Row from 'primevue/row';
import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraModal from '@/components/widgets/tera-modal.vue';
import { numberToNist } from '@/utils/number';
import { DistributionType } from '@/services/distribution';
const props = defineProps<{
id: string;
Expand All @@ -112,11 +104,6 @@ const props = defineProps<{
}>();
const otherValueList = ref(props.otherValueList);
const columns = ref([
{ field: 'name', header: 'Configuration name' },
{ field: 'source', header: 'Source' },
{ field: 'expression', header: 'Value' }
]);
const emit = defineEmits(['update-expression', 'update-source', 'close-modal']);
Expand All @@ -126,7 +113,6 @@ const customConstant = ref(0);
const numberOptions = [DistributionType.Constant, DistributionType.Uniform];
const selectedColumns = ref(columns.value);
const customSelection = ref(false);
const selection = ref<null | { id?: string; source?: string; constant?: number }>(null);
Expand All @@ -141,19 +127,6 @@ const onCustomSelectionChange = (val) => {
}
};
function getColumnWidth(columnField: string) {
switch (columnField) {
case 'name':
return 40;
case 'source':
return 20;
case 'expression':
return 100;
default:
return 100;
}
}
function applySelectedValue() {
emit('update-expression', { id: props.id, value: selection.value?.constant });
emit('update-source', { id: props.id, value: selection.value?.source });
Expand All @@ -162,26 +135,34 @@ function applySelectedValue() {
</script>

<style scoped>
.value-label {
color: var(--surface-600);
padding-right: 1rem;
/* Override PrimeVue styles */
:deep(.p-datatable-table) th {
padding: var(--gap-4);
width: 100%;
}
.value {
color: var(--surface-900);
:deep(.p-datatable-table) th:nth-of-type(1) {
width: 2rem;
}
:deep(.p-datatable-table) th:nth-of-type(2) {
width: 40%;
}
:deep(.p-datatable-table) th:nth-of-type(3) {
width: 20%;
}
.value-label {
color: var(--text-color-subdued);
padding-right: var(--gap-4);
}
.custom-input-label {
align-items: center;
display: flex;
justify-content: left;
align-items: center;
padding-right: 1rem;
padding-right: var(--gap-4);
}
.custom-input {
height: 100%;
}
:deep(input) {
margin-top: 1rem;
}
</style>
50 changes: 19 additions & 31 deletions packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<tera-input-text v-model="filterText" placeholder="Filter" class="w-2 p-1" />
</template>

<ul class="pl-1">
<ul>
<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
<!-- Stratified -->
<section v-if="isVirtual" class="initial-entry-stratified">
Expand All @@ -16,22 +16,19 @@
<span>{{ baseInitial }}</span>
<Button label="Open Matrix" text size="small" @click.stop="matrixModalId = baseInitial" />
</template>
<div class="flex">
<ul class="ml-1">
<li v-for="{ target } in childInitials" :key="target">
<tera-initial-entry
:model="model"
:model-configuration="modelConfiguration"
:modelConfigurations="modelConfigurations"
:initial-id="target"
:feature-config="featureConfig"
@update-expression="emit('update-expression', $event)"
@update-source="emit('update-source', $event)"
/>
<Divider type="solid" />
</li>
</ul>
</div>
<ul>
<li v-for="{ target } in childInitials" :key="target">
<tera-initial-entry
:model="model"
:model-configuration="modelConfiguration"
:modelConfigurations="modelConfigurations"
:feature-config="featureConfig"
:initial-id="target"
@update-expression="emit('update-expression', $event)"
@update-source="emit('update-source', $event)"
/>
</li>
</ul>
</AccordionTab>
</Accordion>
</section>
Expand All @@ -47,7 +44,6 @@
@update-expression="emit('update-expression', $event)"
@update-source="emit('update-source', $event)"
/>
<Divider type="solid" />
</li>
</ul>
</AccordionTab>
Expand All @@ -74,7 +70,6 @@ import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import Button from 'primevue/button';
import Divider from 'primevue/divider';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import type { FeatureConfig } from '@/types/common';
import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
Expand Down Expand Up @@ -125,8 +120,13 @@ const filterText = ref('');
<style scoped>
ul {
flex-grow: 1;
padding-left: var(--gap-1);
li {
border-bottom: 1px solid var(--gray-300);
list-style: none;
margin-bottom: var(--gap-1-5);
padding-bottom: var(--gap-1-5);
}
}
Expand All @@ -141,16 +141,4 @@ ul {
margin-left: var(--gap-1);
margin-right: auto;
}
:deep(.p-divider) {
&.p-divider-horizontal {
margin-top: var(--gap-2);
margin-bottom: var(--gap-2);
color: var(--gray-300);
}
&.p-divider-vertical {
margin-left: var(--gap-small);
margin-right: var(--gap);
}
}
</style>
Loading

0 comments on commit 3114569

Please sign in to comment.