5026 feat cleanup calibrate settings panel (#5071)

Co-authored-by: Brittany Kondo <[email protected]>
Co-authored-by: Brittany Kondo <[email protected]>

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue

@@ -15,7 +15,7 @@
  >
  <template #content>
  <div class="toolbar">
- <p>Click Run to begin calibrating.</p>
+ <p>Set your mapping, calibration and visualization settings then click run.</p>
  <span class="flex gap-2">
  <tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
  <Button label="Run" icon="pi pi-play" @click="runCalibrate" :disabled="disableRunButton" />
@@ -26,12 +26,12 @@
  <div class="form-section">
  <h5 class="mb-1">Mapping</h5>
  <p class="mb-2">
- Select a subset of output variables of the model and individually assosiate them to columns in the
+ Select a subset of output variables of the model and individually associate them to columns in the
  dataset.
  </p>
 
  <!-- Mapping table: Time variables -->
- <div class="input-row">
+ <div class="input-row mapping-input">
  <div class="label-and-input">
  <label class="column-header">Model: Timeline variable</label>
  <tera-input-text disabled model-value="timestamp" />
@@ -101,11 +101,19 @@
 
  <!-- Mapping section -->
  <section class="form-section">
- <h5 class="mb-1">
- Calibration settings
- <i v-tooltip="calibrationSettingsToolTip" class="pi pi-info-circle info-circle" />
- </h5>
- <p class="mb-2">Select one of the presets or customize the settings below.</p>
+ <h5 class="mb-1">Calibration settings</h5>
+ <div class="input-row">
+ <div class="label-and-input">
+ <label>Start time</label>
+ <tera-input-text disabled model-value="0" />
+ </div>
+ <div class="label-and-input">
+ <label for="num-samples">End time</label>
+ <tera-input-number inputId="integeronly" v-model="knobs.endTime" />
+ </div>
+ </div>
+ <div class="spacer m-2" />
+ <p class="mb-1">Preset (optional)</p>
  <div class="label-and-input">
  <Dropdown
  v-model="presetType"
@@ -114,28 +122,22 @@
  @update:model-value="setPresetValues"
  />
  </div>
+ <label class="mb-1 p-text-secondary text-sm">
+ <i class="pi pi-info-circle" />
+ This impacts solver method, iterations and learning rate.
+ </label>
  <div class="mt-1 additional-settings">
- <p>
- Number of Samples
- <i v-tooltip="numberOfSamplesTooltip" class="pi pi-info-circle info-circle" />
- </p>
- <div class="input-row">
- <div class="label-and-input">
- <tera-input-number
- inputId="integeronly"
- v-model="knobs.numSamples"
- @update:model-value="updateState"
- />
- </div>
+ <div class="label-and-input">
+ <label>Number of Samples</label>
+ <tera-input-number inputId="integeronly" v-model="knobs.numSamples" @update:model-value="updateState" />
  </div>
  <div class="spacer m-3" />
- <p class="font-semibold">
- ODE solver options
- <i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
- </p>
+
+ <h6 class="mb-2">ODE solver options</h6>
+
  <div class="input-row">
  <div class="label-and-input">
- <label for="5">Method</label>
+ <label for="5">Solver method</label>
  <Dropdown
  id="5"
  v-model="knobs.method"
@@ -144,15 +146,12 @@
  />
  </div>
  <div class="label-and-input">
- <label for="num-steps">Step size</label>
+ <label for="num-steps">Solver step size</label>
  <tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
  </div>
  </div>
  <div class="spacer m-3" />
- <p class="font-semibold">
- Inference Options
- <i v-tooltip="inferenceOptionsTooltip" class="pi pi-info-circle info-circle" />
- </p>
+ <h6 class="mb-2">Inference Options</h6>
  <div class="input-row">
  <div class="label-and-input">
  <label for="num-iterations">Number of solver iterations</label>
@@ -162,10 +161,6 @@
  @update:model-value="updateState"
  />
  </div>
- <div class="label-and-input">
- <label for="num-samples">End time for forecast</label>
- <tera-input-number inputId="integeronly" v-model="knobs.endTime" />
- </div>
  <div class="label-and-input">
  <label for="learning-rate">Learning rate</label>
  <tera-input-number
@@ -324,6 +319,7 @@
  <tera-slider-panel
  v-model:is-open="isOutputSettingsPanelOpen"
  direction="right"
+ class="input-config"
  header="Output Settings"
  content-width="360px"
  >
@@ -562,11 +558,6 @@ const qualityPreset = Object.freeze({
  learningRate: 0.03
 });
 
-const calibrationSettingsToolTip: string = 'TODO';
-const numberOfSamplesTooltip: string = 'TODO';
-const inferenceOptionsTooltip: string = 'TODO';
-const odeSolverOptionsTooltip: string = 'TODO';
-
 // Model variables checked in the model configuration will be options in the mapping dropdown
 const modelStateOptions = ref<any[] | undefined>();
 
@@ -1220,7 +1211,7 @@ watch(
 /* Mapping table */
 .mapping-table:deep(td) {
  border: none !important;
- padding: 0 var(--gap-1) var(--gap-2) 0 !important;
+ padding: 0 var(--gap-2) var(--gap-2) 0 !important;
  background: var(--surface-100);
 }
 
@@ -1274,7 +1265,11 @@ img {
 .label-and-input {
  display: flex;
  flex-direction: column;
- gap: var(--gap-2);
+ gap: var(--gap-1);
+
+ :deep(input) {
+ text-align: left;
+ }
 }
 .info-circle {
  color: var(--text-color-secondary);
@@ -1287,14 +1282,19 @@ img {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
- gap: var(--gap-3) var(--gap-2);
+ gap: var(--gap-2);
  width: 100%;
 
  & > * {
  flex: 1;
  }
 }
 
+/** Make inputs align with mapping table */
+.mapping-input {
+ width: calc(100% - 40px);
+}
+
 .loss-chart {
  background: var(--surface-a);
  border: 1px solid var(--surface-border-light);
@@ -1348,6 +1348,11 @@ img {
 
 .additional-settings {
  background: var(--surface-200);
- padding: var(--gap-2);
+ padding: var(--gap-3);
+ border-radius: var(--border-radius-medium);
+}
+
+input {
+ text-align: left;
 }
 </style>