4062 add other values styling

packages/client/hmi-client/src/assets/css/theme/_variables.scss

@@ -869,6 +869,7 @@ $petri-inputBox: var(--surface-0);
 
 :root {
 	--editing-color: rgb(238, 238, 136);
+	--button-color: #{$successButtonBg};
 	--border-radius-small: #{$smallBorderRadius};
 	--border-radius: #{$borderRadius};
 	--border-radius-medium: #{$mediumBorderRadius};

packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue

@@ -62,7 +62,9 @@ const props = defineProps<{
 	modelConfigurations: ModelConfiguration[];
 }>();
 
-const otherValueList = ref(getOtherValues(props.modelConfigurations, props.initialId, 'target', 'initialSemanticList'));
+const otherValueList = computed(() =>
+	getOtherValues(props.modelConfigurations, props.initialId, 'target', 'initialSemanticList')
+);
 
 const emit = defineEmits(['update-expression', 'update-source']);
 

packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue

@@ -1,89 +1,85 @@
 <template>
 	<tera-modal>
-		<section>
-			<DataTable
-				:value="otherValueList"
-				@update:selection="onCustomSelectionChange"
-				dataKey="id"
-				:rowsPerPageOptions="[10, 20, 50]"
-				tableStyle="min-width: 55rem"
+		<DataTable
+			:value="otherValueList"
+			@update:selection="onCustomSelectionChange"
+			dataKey="id"
+			:rowsPerPageOptions="[10, 20, 50]"
+			tableStyle="min-width: 55rem"
+		>
+			<template #header> </template>
+			<Column headerStyle="width: 2rem">
+				<template #body="{ data }">
+					<RadioButton
+						v-model="customSelection"
+						: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)}%`"
 			>
-				<template #header> </template>
-				<Column headerStyle="width: 2rem">
-					<template #body="{ data }">
-						{{ console.log(data) }}
-						<RadioButton
-							v-model="customSelection"
-							:inputId="data.id"
-							:value="data"
-							variant="filled"
-							@change="onCustomSelectionChange(data)"
-						/>
+				<template #body="{ data }">
+					<template v-if="col.field === 'name'">
+						{{ data.name }}
 					</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)}%`"
-				>
-					<template #body="{ data }">
-						<template v-if="col.field === 'name'">
-							{{ data.name }}
+					<template v-if="col.field === 'target'">
+						{{ data.target }}
+					</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) }}</span>
+						</section>
+					</template>
+				</template>
+			</Column>
+			<ColumnGroup type="footer">
+				<Row>
+					<Column>
+						<template #footer>
+							<RadioButton
+								v-model="customSelection"
+								inputId="custom"
+								:value="{}"
+								variant="filled"
+								@change="onCustomSelectionChange('custom')"
+							/>
 						</template>
-						<template v-if="col.field === 'target'">
-							{{ data.target }}
+					</Column>
+					<Column :colspan="2">
+						<template #footer>
+							<tera-input
+								placeholder="Add a source"
+								v-model="customSource"
+								@update:modelValue="onCustomSelectionChange"
+							/>
 						</template>
-						<template v-if="col.field === 'expression'">
+					</Column>
+					<Column>
+						<template #footer>
 							<section class="inline-flex gap-1">
-								<span class="cell-space">Constants</span>
-								<span>{{ numberToNist(data.expression) }}</span>
-							</section>
-						</template>
-					</template>
-				</Column>
-				<ColumnGroup type="footer">
-					<Row>
-						<Column>
-							<template #footer>
-								<RadioButton
-									v-model="customSelection"
-									inputId="custom"
-									:value="{}"
-									variant="filled"
-									@change="onCustomSelectionChange('custom')"
-								/>
-							</template>
-						</Column>
-						<Column :colspan="2">
-							<template #footer>
+								<span class="custom-input-label">Constant</span>
 								<tera-input
 									type="nist"
-									placeholder="Add a source"
-									v-model="customSource"
+									placeholder="Constant"
+									v-model="customConstant"
 									@update:modelValue="onCustomSelectionChange"
 								/>
-							</template>
-						</Column>
-						<Column>
-							<template #footer>
-								<section class="inline-flex gap-1">
-									<span class="custom-input-label">Constant</span>
-									<tera-input
-										type="nist"
-										placeholder="Constant"
-										v-model="customConstant"
-										@update:modelValue="onCustomSelectionChange"
-									/>
-								</section>
-							</template>
-						</Column>
-					</Row>
-				</ColumnGroup>
-			</DataTable>
-		</section>
+							</section>
+						</template>
+					</Column>
+				</Row>
+			</ColumnGroup>
+		</DataTable>
 		<template #footer>
 			<Button label="Apply selected value" @click="applySelectedValue" :disabled="!selection" />
 			<Button label="Cancel" severity="secondary" raised @click="emit('close-modal')" />
@@ -161,14 +157,35 @@ function applySelectedValue() {
 </script>
 
 <style scoped>
-.cell-space {
+.value-label {
+	color: var(--surface-600);
 	padding-right: 1rem;
 }
+.value {
+	color: var(--surface-900);
+}
 
 .custom-input-label {
 	display: flex;
 	justify-content: left;
 	align-items: center;
 	padding-right: 1rem;
 }
+
+.custom-input {
+	height: 100%;
+}
+/* Change style for Primevue componment */
+:deep(.p-radiobutton-box[data-pc-section='input']) {
+	border: 2px solid var(--button-color);
+}
+
+:deep(tbody > tr > td:last-child[role='cell']) {
+	border-radius: 5px;
+	box-shadow: inset 0px 0px 0px 1px var(--surface-border-alt);
+}
+
+:deep(input) {
+	margin-top: 1rem;
+}
 </style>

packages/client/hmi-client/src/components/model/petrinet/tera-line-graphic.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :id="graphicId" class="line-graphic-container">
+		<svg>
+			<line x1="0" :y1="parentHeight / 2" :x2="width" :y2="parentHeight / 2" stroke="black" />
+			<rect
+				v-if="distribution.type === DistributionType.Uniform"
+				:x="rectX"
+				:y="parentHeight / 2 - 2"
+				:width="rectWidth"
+				rx="2"
+				height="4"
+				stroke="gray"
+				fill="gray"
+			/>
+			<circle v-else :cx="circlePoint" :cy="parentHeight / 2" r="4" stroke="black" fill="black" />
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+import * as d3 from 'd3';
+import { onMounted, ref } from 'vue';
+import { DistributionType } from '@/services/distribution';
+
+const props = defineProps<{
+	id: string;
+	maxValue: number;
+	minValue: number;
+	distribution: any;
+}>();
+const graphicId = 'graphic-'.concat(props.id);
+const parentWidth = ref<number>(0);
+const parentHeight = ref<number>(0);
+const width = ref('100%');
+const rectWidth = ref(0);
+const rectX = ref(0);
+const circlePoint = ref(0);
+const range = ref([1, 100]);
+
+const max = props.maxValue;
+const min = props.minValue;
+
+const isUniformType = () => props.distribution.type === DistributionType.Uniform;
+
+onMounted(() => {
+	parentWidth.value = document.getElementById(graphicId)?.getBoundingClientRect().width ?? 0;
+	parentHeight.value = document.getElementById(graphicId)?.getBoundingClientRect().height ?? 0;
+	if (parentWidth.value) {
+		range.value = [0, parentWidth.value];
+	}
+
+	const scale = d3.scaleLinear().domain([min, max]).range(range.value);
+
+	if (!isUniformType()) {
+		const maxScaled = scale(max);
+		const cx = scale(props.distribution.parameters.value);
+		circlePoint.value = cx > maxScaled ? maxScaled - 5 : cx;
+	} else {
+		const barMin = scale(props.distribution.parameters.minimum);
+		const barMax = scale(props.distribution.parameters.maximum);
+		rectWidth.value = barMax - barMin;
+		rectX.value = barMin;
+	}
+});
+</script>
+
+<style scoped>
+.line-graphic-container {
+	width: 100%;
+	height: 40px;
+}
+</style>

packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue

@@ -125,7 +125,7 @@ const concept = getParameter(props.model, props.parameterId)?.grounding?.identif
 const isSourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
-const otherValueList = ref(
+const otherValueList = computed(() =>
 	getOtherValues(props.modelConfigurations, props.parameterId, 'referenceId', 'parameterSemanticList')
 );