Skip to content

Commit

Permalink
Cleanup calibrate drilldown (#4989)
Browse files Browse the repository at this point in the history 
Co-authored-by: Brittany Kondo <[email protected]>
  • Loading branch information
@brittanykondo
brittanykondo and Brittany Kondo committed Oct 1, 2024
1 parent 16ff5fc commit a23aa24
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 80 deletions.
202 changes: 124 additions & 78 deletions ...i-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,73 +95,78 @@ t d
@update:model-value="setPresetValues"
/>
</div>
<div class="spacer m-3" />
<p class="">
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>
<div class="spacer m-3" />
<p class="font-semibold">
ODE solver options
<i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
</p>
<div class="input-row">
<div class="label-and-input">
<label for="5">Method</label>
<Dropdown
id="5"
v-model="knobs.method"
:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
@update:model-value="updateState"
/>
</div>
<div class="label-and-input">
<label for="num-steps">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>
<div class="input-row">
<div class="label-and-input">
<label for="num-iterations">Number of solver iterations</label>
<tera-input-number
inputId="integeronly"
v-model="knobs.numIterations"
@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
inputId="numberonly"
v-model="knobs.learningRate"
@update:model-value="updateState"
/>
</div>
<div class="label-and-input">
<label>Inference algorithm</label>
<tera-input-text disabled model-value="SVI" />
<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>
<div class="label-and-input">
<label>Loss function</label>
<tera-input-text disabled model-value="ELBO" />
<div class="spacer m-3" />
<p class="font-semibold">
ODE solver options
<i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
</p>
<div class="input-row">
<div class="label-and-input">
<label for="5">Method</label>
<Dropdown
id="5"
v-model="knobs.method"
:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
@update:model-value="updateState"
/>
</div>
<div class="label-and-input">
<label for="num-steps">Step size</label>
<tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
</div>
</div>
<div class="label-and-input">
<label>Optimizer method</label>
<tera-input-text disabled model-value="ADAM" />
<div class="spacer m-3" />
<p class="font-semibold">
Inference Options
<i v-tooltip="inferenceOptionsTooltip" class="pi pi-info-circle info-circle" />
</p>
<div class="input-row">
<div class="label-and-input">
<label for="num-iterations">Number of solver iterations</label>
<tera-input-number
inputId="integeronly"
v-model="knobs.numIterations"
@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
inputId="numberonly"
v-model="knobs.learningRate"
@update:model-value="updateState"
/>
</div>
<div class="label-and-input">
<label>Inference algorithm</label>
<tera-input-text disabled model-value="SVI" />
</div>
<div class="label-and-input">
<label>Loss function</label>
<tera-input-text disabled model-value="ELBO" />
</div>
<div class="label-and-input">
<label>Optimizer method</label>
<tera-input-text disabled model-value="ADAM" />
</div>
</div>
</div>
</section>
Expand All @@ -186,31 +191,38 @@ t d
<!-- Output section -->
<template #preview>
<tera-drilldown-section>
<tera-drilldown-section v-if="showOutputSection">
<template #header-controls-left v-if="configuredModelConfig?.name">
<h5>{{ configuredModelConfig.name }}</h5>
<h5 class="ml-3">{{ configuredModelConfig.name }}</h5>
</template>
<template #header-controls-right>
<Button
label="Save for re-use"
severity="secondary"
class="mr-3"
outlined
:disabled="!configuredModelConfig"
@click="showSaveModal = true"
/>
</template>
<tera-operator-output-summary v-if="node.state.summaryId && !showSpinner" :summary-id="node.state.summaryId" />
<tera-operator-output-summary
v-if="node.state.summaryId && !showSpinner"
class="p-3"
:summary-id="node.state.summaryId"
/>
<!-- Loss chart -->
<h5>Loss</h5>
<div ref="lossChartContainer">
<vega-chart
expandable
v-if="lossValues.length > 0 || showSpinner"
ref="lossChartRef"
:are-embed-actions-visible="true"
:visualization-spec="lossChartSpec"
/>
<div class="ml-3 mr-3">
<h5>Loss</h5>
<div ref="lossChartContainer">
<vega-chart
expandable
v-if="lossValues.length > 0 || showSpinner"
ref="lossChartRef"
:are-embed-actions-visible="true"
:visualization-spec="lossChartSpec"
/>
</div>
</div>
<!-- Variable charts -->
Expand Down Expand Up @@ -284,6 +296,11 @@ t d
<tera-notebook-error v-if="!_.isEmpty(node.state?.errorMessage?.traceback)" v-bind="node.state.errorMessage" />
</tera-drilldown-section>
<!-- Empty state if calibrate hasn't been run yet -->
<section v-else class="output-section-empty-state">
<Vue3Lottie :animationData="EmptySeed" :height="150" loop autoplay />
<p class="helpMessage">Click 'Run' to begin calibrating</p>
</section>
</template>
<template #sidebar-right>
Expand Down Expand Up @@ -407,6 +424,8 @@ import {
saveAnnotation,
updateChartSettingsBySelectedVariables
} from '@/services/chart-settings';
import { Vue3Lottie } from 'vue3-lottie';
import EmptySeed from '@/assets/images/lottie-empty-seed.json';
import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
Expand Down Expand Up @@ -531,7 +550,7 @@ const modelStateOptions = ref<any[] | undefined>();
const modelParameters = ref<ModelParameter[]>([]);
const isOutputSettingsPanelOpen = ref(true);
const isOutputSettingsPanelOpen = ref(false);
const activeChartSettings = ref<ChartSetting | null>(null);
const datasetColumns = ref<DatasetColumn[]>();
Expand Down Expand Up @@ -578,6 +597,16 @@ const mappingDropdownPlaceholder = computed(() => {
return 'Please wait...';
});
const showOutputSection = computed(
() =>
lossValues.value.length > 0 ||
selectedErrorVariableSettings.value.length > 0 ||
selectedVariableSettings.value.length > 0 ||
selectedParameterSettings.value.length > 0 ||
showSpinner.value ||
!_.isEmpty(props.node.state?.errorMessage?.traceback)
);
const updateState = () => {
const state = _.cloneDeep(props.node.state);
state.numSamples = knobs.value.numSamples;
Expand Down Expand Up @@ -1270,4 +1299,21 @@ img {
width: 100%;
}
}
.output-section-empty-state {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap);
text-align: center;
pointer-events: none;
}
.additional-settings {
background: var(--surface-200);
padding: var(--gap-2);
}
</style>
3 changes: 1 addition & 2 deletions ...hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,8 +658,7 @@ onUnmounted(() => kernelManager.shutdown());
}
.empty-state {
position: absolute;
width: calc(100% - 240px);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
Expand Down

0 comments on commit a23aa24

Please sign in to comment.