From 6e44a0773346a4dd9cdb0e0efa32b4c80632ed97 Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Mon, 9 Sep 2024 20:25:11 -0400 Subject: [PATCH 01/10] add accordion tabs --- .../workflow/ops/funman/tera-funman.vue | 192 +++++++++--------- 1 file changed, 100 insertions(+), 92 deletions(-) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue index e1ae0cce94..227b0a75c6 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue @@ -6,102 +6,102 @@ @on-close-clicked="emit('close')" @update-state="(state: any) => emit('update-state', state)" > -
+ +
-
- Set validation parameters - -
-

The validator will use these parameters to execute the sanity checks.

-
-
- - -
-
- - -
-
- - -
-
- - -
@@ -150,11 +150,14 @@ import TeraInputText from '@/components/widgets/tera-input-text.vue'; import TeraInputNumber from '@/components/widgets/tera-input-number.vue'; import Slider from 'primevue/slider'; import MultiSelect from 'primevue/multiselect'; +import Accordion from 'primevue/accordion'; +import AccordionTab from 'primevue/accordiontab'; import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue'; import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue'; import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue'; import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue'; +// import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue'; import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue'; @@ -180,11 +183,12 @@ enum FunmanTabs { Notebook = 'Notebook' } const toast = useToastService(); -const validateParametersToolTip = +/* const validateParametersToolTip = 'Validate the configuration of the model using functional model analysis (FUNMAN). \n \n The parameter space regions defined by the model configuration are evaluated to satisfactory or unsatisfactory depending on whether they generate model outputs that are within a given set of time-dependent constraints'; - +*/ const showSpinner = ref(false); const showAdditionalOptions = ref(false); +// const isSidebarOpen = ref(true); interface BasicKnobs { tolerance: number; @@ -626,4 +630,8 @@ div.section-row.timespan > div > span { .run-button { margin-right: auto; } + +.wizard-section { + background-color: var(--surface-100); +} From eb8208154dbb10db1e0dcb81c9f9af9fc7222ee1 Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Tue, 10 Sep 2024 09:49:46 -0400 Subject: [PATCH 02/10] adjust styling of the constraint groups --- .../ops/funman/tera-compartment-constraint.vue | 12 ++++-------- .../ops/funman/tera-constraint-group-form.vue | 12 ++++-------- .../components/workflow/ops/funman/tera-funman.vue | 11 ++++++++++- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-compartment-constraint.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-compartment-constraint.vue index 11f0251737..fc10cc28bc 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-compartment-constraint.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-compartment-constraint.vue @@ -1,5 +1,5 @@ +
@@ -138,7 +134,7 @@ import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue'; import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue'; import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue'; import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue'; -// import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue'; +import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue'; import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue'; @@ -168,7 +164,7 @@ const toast = useToastService(); 'Validate the configuration of the model using functional model analysis (FUNMAN). \n \n The parameter space regions defined by the model configuration are evaluated to satisfactory or unsatisfactory depending on whether they generate model outputs that are within a given set of time-dependent constraints'; */ const showSpinner = ref(false); -// const isSidebarOpen = ref(true); +const isSliderOpen = ref(true); interface BasicKnobs { tolerance: number; @@ -601,20 +597,45 @@ div.section-row.timespan > div > span { color: var(--text-color-subdued); } -.run-button { - margin-right: auto; +/** Override default accordion styles */ +.accordion-component:deep(.p-accordion-header-link) { + background-color: var(--surface-100); } -.wizard-section { +.accordion-component:deep(.p-accordion-content) { background-color: var(--surface-100); + padding-left: var(--gap); + padding-right: var(--gap); } -/** Override default styles */ -.accordion-component:deep(.p-accordion-header-link) { +/* Override grid template so output expands when sidebar is closed */ +.overlay-container:deep(section.scale main) { + grid-template-columns: auto 1fr; +} + +/* Make the slider light grey */ +:deep(.slider-content) { background-color: var(--surface-100); + border-right: 1px solid var(--surface-border-light); } -.accordion-component:deep(.p-accordion-content) { +:deep(.slider-content header) { + background: transparent; +} + +:deep(.slider-tab) { background-color: var(--surface-100); + border-right: 1px solid var(--surface-border-light); +} + +:deep(.slider-tab header) { + background: transparent; +} + +.top-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--gap-1) var(--gap); } From a5924aebe4ac00e5aa36effb399a6edcec267917 Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Wed, 11 Sep 2024 12:42:49 -0400 Subject: [PATCH 06/10] allow constraint groups to overflow --- .../workflow/ops/funman/tera-constraint-group-form.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue index 2d7841205f..19ab98fb8e 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue @@ -198,7 +198,7 @@ watch( background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--border-radius); - overflow: hidden; + overflow: auto; } .sub-header { From d07fef67c9932dfa3f70dcf0e82694ba4c8412bd Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Wed, 11 Sep 2024 14:58:38 -0400 Subject: [PATCH 07/10] add info icons to headers --- .../workflow/ops/funman/tera-funman.vue | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue index d7773d7505..6befa152d9 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue @@ -14,8 +14,11 @@
- - + +

Implement sanity checks on the state space of the model to see how the parameter space of the model is partitioned into satisfiable and unsatisfiable regions separated by decision boundaries. @@ -40,8 +43,11 @@ @click="addConstraintForm" /> - - + +

-

{{ requestConstraints }}

@@ -159,9 +164,8 @@ enum FunmanTabs { Notebook = 'Notebook' } const toast = useToastService(); -/* const validateParametersToolTip = +const validateParametersToolTip = 'Validate the configuration of the model using functional model analysis (FUNMAN). \n \n The parameter space regions defined by the model configuration are evaluated to satisfactory or unsatisfactory depending on whether they generate model outputs that are within a given set of time-dependent constraints'; -*/ const showSpinner = ref(false); const isSliderOpen = ref(true); From 36c5d8ada2b85f419c70d1def837b8d6b4a0a498 Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Wed, 11 Sep 2024 15:24:43 -0400 Subject: [PATCH 08/10] add under construction note to notebook tab --- .../src/components/workflow/ops/funman/tera-funman.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue index 6befa152d9..cf25c75655 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue @@ -91,6 +91,7 @@
+
Notebook is under construction. Use the wizard for now.
 From 10c825f015208e9759815053b043385f66294db1 Mon Sep 17 00:00:00 2001 From: Brittany Kondo Date: Wed, 11 Sep 2024 15:58:37 -0400 Subject: [PATCH 09/10] make the slider a bit wider --- .../src/components/workflow/ops/funman/tera-funman.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue index cf25c75655..52eea5c7fe 100644 --- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue +++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue @@ -6,7 +6,7 @@ @update-state="(state: any) => emit('update-state', state)" >
- +
@@ -553,7 +554,6 @@ watch( .section-row { display: flex; align-items: center; - gap: 0.8125rem; align-self: stretch; } @@ -561,15 +561,20 @@ watch( display: flex; width: 100%; align-items: center; - gap: 0.8125rem; align-self: stretch; - gap: 1.5rem; + gap: var(--gap-medium); } div.section-row.timespan > div > span { width: 100%; } +.timespan-input { + display: flex; + flex-direction: column; + flex: 1; +} + .timespan-list { width: 100%; }