Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: calibrated configruration view #4377

Merged
merged 14 commits into from
Aug 9, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ header .title {
header .tabs-row {
justify-content: space-between;
align-items: end;
gap: var(--gap);
gap: var(--gap-1);
}

header .tabs-row:deep(.p-tabview .p-tabview-panels) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ h6 {

.description {
grid-area: description;
color: var(--text-color-subdued);
}

.unit {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,40 @@
<template>
<div>
<header>
<div>
<div class="flex">
<strong>{{ initialId }}</strong>
<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
<template v-if="unit">
<label class="ml-2">Unit</label>
<span class="ml-1">{{ unit }}</span>
</template>
<template v-if="concept">
<label class="ml-auto">Concept</label>
<span class="ml-1">{{ concept }}</span>
</template>
</div>
<span v-if="description" class="ml-4">{{ description }}</span>
<span v-if="description" class="description">{{ description }}</span>
</header>
<main>
<span class="expression">
<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
mwdchang marked this conversation as resolved.
Show resolved Hide resolved
<main>
<span class="expression">
<tera-input-text
label="Expression"
:model-value="getInitialExpression(modelConfiguration, initialId)"
@update:model-value="emit('update-expression', { id: initialId, value: $event })"
/>
</span>
<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
</main>
<footer v-if="sourceOpen">
<tera-input-text
label="Expression"
:model-value="getInitialExpression(modelConfiguration, initialId)"
@update:model-value="emit('update-expression', { id: initialId, value: $event })"
placeholder="Add a source"
:model-value="getInitialSource(modelConfiguration, initialId)"
@update:model-value="emit('update-source', { id: initialId, value: $event })"
/>
</span>
<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
</main>
<footer v-if="sourceOpen">
<tera-input-text
placeholder="Add a source"
:model-value="getInitialSource(modelConfiguration, initialId)"
@update:model-value="emit('update-source', { id: initialId, value: $event })"
/>
</footer>
</footer>
</template>
</div>
<tera-initial-other-value-modal
v-if="showOtherConfigValueModal"
Expand All @@ -44,14 +50,16 @@
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash';
import { computed, ref, onMounted } from 'vue';
import { DistributionType } from '@/services/distribution';
import { Model, ModelConfiguration } from '@/types/Types';
import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial-other-value-modal.vue';
import { computed, ref } from 'vue';
import Button from 'primevue/button';
import { getInitialDescription, getInitialName, getInitialUnits } from '@/model-representation/service';
import { getInitialDescription, getInitialName, getInitialUnits, getStates } from '@/model-representation/service';
import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';

const props = defineProps<{
model: Model;
Expand All @@ -70,23 +78,33 @@ const name = getInitialName(props.model, props.initialId);
const unit = getInitialUnits(props.model, props.initialId);
const description = getInitialDescription(props.model, props.initialId);

const concept = ref('');
const sourceOpen = ref(false);
const showOtherConfigValueModal = ref(false);

const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);

function getSourceLabel(initialId) {
if (sourceOpen.value) return 'Hide source';
if (!getInitialSource(props.modelConfiguration, initialId)) return 'Add source';
return 'Show source';
}

const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
onMounted(async () => {
const identifiers = getStates(props.model).find((state) => state.id === props.initialId)?.grounding?.identifiers;
if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
});
</script>

<style scoped>
header {
display: flex;
flex-direction: column;
padding-bottom: var(--gap-small);
padding-bottom: var(--gap-2);
gap: var(--gap-2);
}
.description {
color: var(--text-color-subdued);
}
.expression {
flex-grow: 1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<tera-input-text v-model="filterText" placeholder="Filter" />
</template>

<ul>
<ul class="pl-4">
<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
<!-- Stratified -->
<Accordion v-if="isVirtual" multiple>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="flex flex-column flex-1">
<header>
<div>
<div class="flex">
<strong>{{ parameterId }}</strong>
<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
<template v-if="units">
Expand All @@ -15,71 +15,82 @@
</template>
</div>

<span v-if="description">{{ description }}</span>
<span class="description" v-if="description">{{ description }}</span>
</header>
<main>
<span class="flex gap-2">
<Dropdown
:model-value="getParameterDistribution(modelConfiguration, parameterId).type"
@change="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromTypeChange($event.value)
})
"
option-label="name"
option-value="value"
:options="distributionTypeOptions()"
/>

<!-- Constant -->
<tera-input-number
v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
label="Constant"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
@update:model-value="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromParameterChange({ value: $event })
})
"
/>
<!-- Uniform Distribution -->
<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
<tera-input-number
label="Min"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
@update:model-value="
<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
<main>
<span class="flex gap-2">
<Dropdown
:model-value="getParameterDistribution(modelConfiguration, parameterId).type"
@change="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromParameterChange({ minimum: $event })
distribution: formatPayloadFromTypeChange($event.value)
})
"
option-label="name"
option-value="value"
:options="distributionTypeOptions()"
/>

<!-- Constant -->
<tera-input-number
label="Max"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
label="Constant"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
@update:model-value="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromParameterChange({ maximum: $event })
distribution: formatPayloadFromParameterChange({ value: $event })
})
"
/>
</template>
<!-- Uniform Distribution -->
<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
<tera-input-number
label="Min"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
@update:model-value="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromParameterChange({ minimum: $event })
})
"
/>
<tera-input-number
label="Max"
:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
@update:model-value="
emit('update-parameter', {
id: parameterId,
distribution: formatPayloadFromParameterChange({ maximum: $event })
})
"
/>
</template>
</span>
<section>
<Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
</section>
</main>
<footer v-if="isSourceOpen" class="mb-2">
<tera-input-text
placeholder="Add a source"
:model-value="getParameterSource(modelConfiguration, parameterId)"
@update:model-value="emit('update-source', { id: parameterId, value: $event })"
/>
</footer>
</template>
<div v-else-if="inferredDistribution" class="inferred-parameter">
<span class="type"><label>Type</label> {{ inferredDistribution.type }}</span>
<span class="mean">
<label>Mean</label> {{ displayNumber(inferredDistribution?.parameters?.mean.toString()) }}
</span>
<section>
<Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
</section>
</main>
<footer v-if="isSourceOpen" class="mb-2">
<tera-input-text
placeholder="Add a source"
:model-value="getParameterSource(modelConfiguration, parameterId)"
@update:model-value="emit('update-source', { id: parameterId, value: $event })"
/>
</footer>
<span class="std">
<label>STD</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
</span>
</div>
</div>
<tera-parameter-other-value-modal
v-if="showOtherConfigValueModal"
Expand All @@ -93,16 +104,19 @@
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash';
import { computed, ref, onMounted } from 'vue';
import { Model, ModelConfiguration } from '@/types/Types';
import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
import { computed, ref } from 'vue';
import Button from 'primevue/button';
import Dropdown from 'primevue/dropdown';
import { DistributionType, distributionTypeOptions } from '@/services/distribution';
import { getParameter } from '@/model-representation/service';
import TeraParameterOtherValueModal from '@/components/model/petrinet/tera-parameter-other-value-modal.vue';
import { displayNumber } from '@/utils/number';
import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';

const props = defineProps<{
model: Model;
Expand All @@ -116,8 +130,11 @@ const emit = defineEmits(['update-parameter', 'update-source']);
const name = getParameter(props.model, props.parameterId)?.name;
const units = getParameter(props.model, props.parameterId)?.units?.expression;
const description = getParameter(props.model, props.parameterId)?.description;
const concept = getParameter(props.model, props.parameterId)?.grounding?.identifiers[0];
const inferredDistribution = props.modelConfiguration.inferredParameterList?.find(
(param) => param.referenceId === props.parameterId
)?.distribution;

const concept = ref('');
const isSourceOpen = ref(false);
const showOtherConfigValueModal = ref(false);

Expand Down Expand Up @@ -152,6 +169,11 @@ function formatPayloadFromTypeChange(type: DistributionType) {
}

const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);

onMounted(async () => {
const identifiers = getParameter(props.model, props.parameterId)?.grounding?.identifiers;
if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
});
</script>

<style scoped>
Expand All @@ -167,11 +189,22 @@ main {
padding-bottom: var(--gap-small);
}

.description {
color: var(--text-color-subdued);
}

:deep(.p-dropdown-label) {
min-width: 10rem;
}

label {
color: var(--text-color-subdued);
}

.inferred-parameter {
display: flex;
& > span {
width: 20%;
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<Button text small icon="pi pi-times" @click="isAddingUncertainty = false" />
</span>

<ul>
<ul class="pl-4">
<li v-for="{ baseParameter, childParameters, isVirtual } in parameterList" :key="baseParameter">
<!-- Stratified -->
<Accordion v-if="isVirtual" multiple>
Expand Down Expand Up @@ -80,7 +80,7 @@
</AccordionTab>
</Accordion>
<!-- Unstratified -->
<div v-else class="flex gap-4 pl-5">
<div v-else class="flex gap-4">
<Checkbox
v-if="
isAddingUncertainty &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ export const blankModelConfig: ModelConfiguration = {
simulationId: '',
observableSemanticList: [],
parameterSemanticList: [],
initialSemanticList: []
initialSemanticList: [],
inferredParameterList: []
};

export const ModelConfigOperation: Operation = {
Expand Down
Loading
Loading