Skip to content

Commit

Permalink
make it so block options are not visible until a file is selected
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdbocarsly
jdbocarsly committed Feb 21, 2024
1 parent 3cd8962 commit e1401f9
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 217 deletions.
238 changes: 120 additions & 118 deletions webapp/src/components/datablocks/CycleBlock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,136 +9,138 @@
updateBlockOnChange
/>
</div>
<div class="form-row">
<div class="input-group form-inline">
<label class="mr-2"><b>Cycles to plot:</b></label>
<input
id="cycles-input"
type="text"
class="form-control"
placeholder="e.g., 1-5, 7, 9-10. Starts at 1."
:class="{ 'is-invalid': cycle_num_error }"
v-model="cyclesString"
@keydown.enter="
parseCycleString();
updateBlock();
"
@blur="
parseCycleString();
updateBlock();
"
/>
<span id="list-of-cycles" class="pl-3 pt-2">Showing cycles: {{ parsedCycles }}</span>
</div>

<div v-if="cycle_num_error" class="alert alert-danger mt-2 mx-auto">
{{ cycle_num_error }}
</div>
</div>

<div class="form-row mt-2">
<div class="input-group form-inline">
<label class="mr-2"><b>Mode:</b></label>
<div class="btn-group">
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'final capacity' }"
@click="
derivative_mode = derivative_mode == 'final capacity' ? null : 'final capacity';
<div v-if="file_id">
<div class="form-row">
<div class="input-group form-inline">
<label class="mr-2"><b>Cycles to plot:</b></label>
<input
id="cycles-input"
type="text"
class="form-control"
placeholder="e.g., 1-5, 7, 9-10. Starts at 1."
:class="{ 'is-invalid': cycle_num_error }"
v-model="cyclesString"
@keydown.enter="
parseCycleString();
updateBlock();
"
>
Cycle Summary
</div>
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'dQ/dV' }"
@click="
derivative_mode = derivative_mode == 'dQ/dV' ? null : 'dQ/dV';
@blur="
parseCycleString();
updateBlock();
"
>
d<i>Q</i>/d<i>V</i>
/>
<span id="list-of-cycles" class="pl-3 pt-2">Showing cycles: {{ parsedCycles }}</span>
</div>

<div v-if="cycle_num_error" class="alert alert-danger mt-2 mx-auto">
{{ cycle_num_error }}
</div>
</div>

<div class="form-row mt-2">
<div class="input-group form-inline">
<label class="mr-2"><b>Mode:</b></label>
<div class="btn-group">
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'final capacity' }"
@click="
derivative_mode = derivative_mode == 'final capacity' ? null : 'final capacity';
updateBlock();
"
>
Cycle Summary
</div>
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'dQ/dV' }"
@click="
derivative_mode = derivative_mode == 'dQ/dV' ? null : 'dQ/dV';
updateBlock();
"
>
d<i>Q</i>/d<i>V</i>
</div>
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'dV/dQ' }"
@click="
derivative_mode = derivative_mode == 'dV/dQ' ? null : 'dV/dQ';
updateBlock();
"
>
d<i>V</i>/d<i>Q</i>
</div>
</div>
<div
class="btn btn-default"
:class="{ active: derivative_mode == 'dV/dQ' }"
@click="
derivative_mode = derivative_mode == 'dV/dQ' ? null : 'dV/dQ';
updateBlock();
"
</div>
</div>

<div
v-if="derivative_mode == 'dQ/dV' || derivative_mode == 'dV/dQ'"
v-show="derivative_mode"
class="row"
>
<div class="col-md slider" style="max-width: 250px">
<input
type="range"
class="form-control-range"
v-model="s_spline"
id="s_spline"
name="s_spline"
min="1"
max="10"
step="0.2"
@change="isReplotButtonDisplayed = true"
/>
<label
@mouseover="showDescription1 = true"
@mouseleave="showDescription1 = false"
for="s_spline"
>
d<i>V</i>/d<i>Q</i>
</div>
<span>Spline fit:</span> {{ -s_spline }}
</label>
</div>
<div class="col-md slider" style="max-width: 250px">
<input
type="range"
class="form-control-range"
v-model="win_size_1"
id="win_size_1"
name="win_size_1"
min="501"
max="1501"
@change="isReplotButtonDisplayed = true"
/>
<label
for="win_size_1"
@mouseover="showDescription2 = true"
@mouseleave="showDescription2 = false"
>
<span>Window Size 1:</span> {{ win_size_1 }}
</label>
</div>
<button v-show="isReplotButtonDisplayed" class="btn btn-default my-4" @click="updateBlock">
Recalculate
</button>
</div>
</div>

<div
v-if="derivative_mode == 'dQ/dV' || derivative_mode == 'dV/dQ'"
v-show="derivative_mode"
class="row"
>
<div class="col-md slider" style="max-width: 250px">
<input
type="range"
class="form-control-range"
v-model="s_spline"
id="s_spline"
name="s_spline"
min="1"
max="10"
step="0.2"
@change="isReplotButtonDisplayed = true"
/>
<label
@mouseover="showDescription1 = true"
@mouseleave="showDescription1 = false"
for="s_spline"
>
<span>Spline fit:</span> {{ -s_spline }}
</label>
<div class="alert alert-info" v-show="showDescription1">
<p>
Smoothing parameter that determines how close the spline fits to the real data. Larger
values result in a smoother fit with decreased detail.
</p>
</div>
<div class="col-md slider" style="max-width: 250px">
<input
type="range"
class="form-control-range"
v-model="win_size_1"
id="win_size_1"
name="win_size_1"
min="501"
max="1501"
@change="isReplotButtonDisplayed = true"
/>
<label
for="win_size_1"
@mouseover="showDescription2 = true"
@mouseleave="showDescription2 = false"
>
<span>Window Size 1:</span> {{ win_size_1 }}
</label>
<div class="alert alert-info" v-show="showDescription2">
<p>Window size for the Savitzky-Golay filter to apply to the derivatives.</p>
</div>
<button v-show="isReplotButtonDisplayed" class="btn btn-default my-4" @click="updateBlock">
Recalculate
</button>
</div>

<div class="alert alert-info" v-show="showDescription1">
<p>
Smoothing parameter that determines how close the spline fits to the real data. Larger
values result in a smoother fit with decreased detail.
</p>
</div>
<div class="alert alert-info" v-show="showDescription2">
<p>Window size for the Savitzky-Golay filter to apply to the derivatives.</p>
</div>

<div class="row mt-2">
<div
class="col mx-auto"
:class="{ 'limited-width': bokehPlotLimitedWidth, blurry: isUpdating }"
>
<BokehPlot :bokehPlotData="bokehPlotData" />
<div class="row mt-2">
<div
class="col mx-auto"
:class="{ 'limited-width': bokehPlotLimitedWidth, blurry: isUpdating }"
>
<BokehPlot :bokehPlotData="bokehPlotData" />
</div>
</div>
</div>
</DataBlockBase>
Expand Down
Loading

0 comments on commit e1401f9

Please sign in to comment.