Skip to content

Commit

Permalink
Merge branch 'main' into clean-up-app.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
YohannParis authored Oct 9, 2024
2 parents ed68752 + 79f8b03 commit be1627a
Show file tree
Hide file tree
Showing 25 changed files with 631 additions and 428 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<!-- Datable -->
<DataTable
:class="previewMode ? 'p-datatable-xsm' : 'p-datatable-sm'"
:value="rawContent.csv.slice(1, rawContent.csv.length)"
:value="rawContent.csv"
:rows="rows"
paginator
:paginatorPosition="paginatorPosition ? paginatorPosition : `bottom`"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<tera-resizable-panel v-if="!isHidden" :start-height="100" :resize-from-top="true" class="container">
<h6>
<span>{{ name }}</span>
<Button rounded text icon="pi pi-times" @click="isHidden = true" />
</h6>
<code class="code-section">{{ props.traceback }}</code>
</tera-resizable-panel>
<div v-if="isHidden" class="container">
<h6>
<span>{{ name }}</span>
<Button rounded text icon="pi pi-angle-double-up" @click="isHidden = false" />
</h6>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Button from 'primevue/button';
import TeraResizablePanel from '@/components/widgets/tera-resizable-panel.vue';
const props = defineProps<{
name?: string;
traceback?: string;
}>();
const name = props.name ?? 'Output Console';
const isHidden = ref<boolean>(false);
</script>

<style scoped>
.container {
background-color: var(--surface-100);
padding: var(--gap-small);
border-radius: var(--border-radius);
border: 1px solid var(--surface-border-light);
/* Shadow/medium */
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 4px 6px -1px rgba(0, 0, 0, 0.08);
}
.code-section {
white-space: pre-wrap;
}
h6 {
display: flex;
justify-content: space-between;
}
.hide {
display: none;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<template>
<div>
<aside>{{ !isEmpty(intervention.dynamicInterventions) ? 'Dynamic' : 'Static' }}</aside>
<h5>{{ intervention.name }}</h5>
<ul>
<li v-for="(staticIntervention, index) in intervention.staticInterventions" :key="`static-${index}`">
Set {{ staticIntervention.type }} <strong>{{ staticIntervention.appliedTo }}</strong> to
<strong>{{ staticIntervention.value }}</strong> starting at <strong>{{ staticIntervention.timestep }}</strong
>&nbsp;day.
</li>
<li v-for="(dynamicIntervention, index) in intervention.dynamicInterventions" :key="`dynamic-${index}`">
Set {{ dynamicIntervention.type }} <strong>{{ dynamicIntervention.appliedTo }}</strong> to
<strong>{{ dynamicIntervention.value }}</strong> when
<strong>{{ dynamicIntervention.parameter }}</strong> crosses the threshold&nbsp;<strong>{{
dynamicIntervention.threshold
}}</strong
>.
</li>
</ul>
</div>
</template>

<script setup lang="ts">
import { Intervention } from '@/types/Types';
import { isEmpty } from 'lodash';
defineProps<{
intervention: Intervention;
}>();
</script>

<style scoped>
div {
background: var(--surface-section);
border: 1px solid var(--surface-border-light);
border-radius: var(--border-radius-medium);
padding: var(--gap-4) var(--gap-5);
box-shadow:
0 2px 2px -1px rgba(0, 0, 0, 0.06),
0 2px 4px -1px rgba(0, 0, 0, 0.08);
}
ul {
list-style: none;
margin-top: var(--gap-2);
}
li + li {
margin-top: var(--gap-1);
}
aside {
color: var(--text-color-subdued);
font-size: var(--font-caption);
float: right;
}
</style>
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>
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 be1627a

Please sign in to comment.