Added output settings panel for the calibrate drilldown (#4700)

packages/client/hmi-client/src/components/drilldown/tera-drilldown.vue

@@ -81,6 +81,7 @@
  <slot name="preview" />
  </section>
  </tera-columnar-panel>
+ <slot name="sidebar-right" />
  </main>
  <footer v-if="slots.footer">
  <slot name="footer" />

packages/client/hmi-client/src/components/widgets/tera-chart-settings-item.vue

@@ -0,0 +1,34 @@
+<template>
+ <div class="chart-settings-item">
+ <h6>{{ settings.name }}</h6>
+ <div class="btn-group">
+ <Button label="Open chart settings" outlined severity="secondary" size="small" @click="$emit('open')" />
+ <Button icon="pi pi-trash" rounded text @click="$emit('remove', settings.id)" />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+
+defineProps({
+ settings: {
+ type: Object,
+ default: () => ({})
+ }
+});
+defineEmits(['open', 'remove']);
+</script>
+
+<style scoped>
+.chart-settings-item {
+ border-left: 4px solid #667085;
+ padding: var(--gap-3);
+ padding-left: var(--gap-4);
+ background: var(--surface-50);
+}
+.btn-group {
+ display: flex;
+ justify-content: space-between;
+}
+</style>

packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue

@@ -0,0 +1,75 @@
+<template>
+ <transition>
+ <div class="chart-settings-panel" v-if="activeSettings !== null">
+ <header :class="{ shadow: false }">
+ <Button :icon="`pi pi-times`" @click="$emit('close')" text rounded size="large" />
+ <h4>Chart Settings</h4>
+ </header>
+ <div class="content">
+ <div v-if="annotations !== undefined">
+ <h5>Annotations</h5>
+ <p>Not yet implemented</p>
+ </div>
+ </div>
+ </div>
+ </transition>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { ChartSetting } from '@/types/common';
+import { ChartAnnotation } from '@/types/Types';
+
+defineProps<{
+ activeSettings: ChartSetting | null;
+ annotations?: ChartAnnotation[];
+}>();
+
+defineEmits(['close', 'update:settings']);
+</script>
+
+<style scoped>
+.chart-settings-panel {
+ position: absolute;
+ top: 0;
+ z-index: 3;
+ height: 100%;
+ width: 100%;
+ background: #fff;
+ left: 0;
+
+ &.v-enter-active,
+ &.v-leave-active {
+ transition: left 0.15s ease-in;
+ left: 30%;
+ }
+ &.v-enter-from,
+ &.v-leave-to {
+ left: 100%;
+ }
+
+ header {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ padding: var(--gap-2);
+ padding-left: var(--gap);
+ gap: var(--gap);
+ background-color: rgba(255, 255, 255, 0.8);
+ backdrop-filter: blur(3px);
+ &.shadow {
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+ }
+ button {
+ height: 2.5rem;
+ }
+ }
+ .content {
+ padding: var(--gap-4);
+ }
+}
+</style>

packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue

@@ -14,6 +14,7 @@
  </header>
  <slot name="content" />
  </aside>
+ <slot name="overlay" />
  </template>
  <template v-slot:tab>
  <header :class="`tab ${direction}`">

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts

@@ -1,15 +1,14 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
+import { ChartSetting } from '@/types/common';
 import { CalibrateMap } from '@/services/calibrate-workflow';
 import calibrateSimulateCiemss from '@assets/svg/operator-images/calibrate-simulate-probabilistic.svg';
 
 const DOCUMENTATION_URL = 'https://github.com/ciemss/pyciemss/blob/main/pyciemss/interfaces.py#L529';
 
 export interface CalibrationOperationStateCiemss extends BaseState {
  method: string;
- selectedParameters: string[];
- selectedVariables: string[];
- selectedErrorVariables: string[];
  mapping: CalibrateMap[];
+ chartSettings: ChartSetting[];
  simulationsInProgress: string[];
 
  currentProgress: number;
@@ -52,9 +51,7 @@ export const CalibrationOperationCiemss: Operation = {
  initState: () => {
  const init: CalibrationOperationStateCiemss = {
  method: 'dopri5',
- selectedParameters: [],
- selectedVariables: [],
- selectedErrorVariables: [],
+ chartSettings: [],
  mapping: [{ modelVariable: '', datasetVariable: '' }],
  simulationsInProgress: [],
  currentProgress: 0,