From e1401f91704946320679a9d5a30fec9b7af5039f Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Tue, 20 Feb 2024 18:07:03 -0600
Subject: [PATCH] make it so block options are not visible until a file is
 selected

---
 .../src/components/datablocks/CycleBlock.vue  | 238 +++++++++---------
 webapp/src/components/datablocks/NMRBlock.vue | 156 ++++++------
 webapp/src/components/datablocks/XRDBlock.vue |  48 ++--
 3 files changed, 225 insertions(+), 217 deletions(-)

diff --git a/webapp/src/components/datablocks/CycleBlock.vue b/webapp/src/components/datablocks/CycleBlock.vue
index 30647731e..7f8955996 100644
--- a/webapp/src/components/datablocks/CycleBlock.vue
+++ b/webapp/src/components/datablocks/CycleBlock.vue
@@ -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>
diff --git a/webapp/src/components/datablocks/NMRBlock.vue b/webapp/src/components/datablocks/NMRBlock.vue
index af18ae2e8..ea57e2eda 100644
--- a/webapp/src/components/datablocks/NMRBlock.vue
+++ b/webapp/src/components/datablocks/NMRBlock.vue
@@ -9,90 +9,94 @@ DataBlockBase as a prop, and save from within DataBlockBase  -->
       :extensions="['.zip']"
       updateBlockOnChange
     />
-    <div class="form-inline mt-2">
-      <div class="form-group">
-        <label class="mr-2"><b>Process number:</b></label>
-        <select class="form-control" v-model="selected_process" @change="updateBlock">
-          <option v-for="process_number in block.available_processes" :key="process_number">
-            {{ process_number }}
-          </option>
-        </select>
+    <div v-show="file_id">
+      <div class="form-inline mt-2">
+        <div class="form-group">
+          <label class="mr-2"><b>Process number:</b></label>
+          <select class="form-control" v-model="selected_process" @change="updateBlock">
+            <option v-for="process_number in block.available_processes" :key="process_number">
+              {{ process_number }}
+            </option>
+          </select>
+        </div>
       </div>
-    </div>
 
-    <div class="mt-4">
-      <span class="mr-2">
-        <Isotope :isotopeString="block.nucleus" /> {{ block.pulse_program_name }}
-      </span>
-      <a type="button" class="btn btn-default btn-sm mb-2" @click="titleShown = !titleShown">{{
-        titleShown ? "hide title" : "show title"
-      }}</a>
-      <a
-        type="button"
-        class="btn btn-default btn-sm mb-2 ml-2"
-        @click="detailsShown = !detailsShown"
-        >{{ detailsShown ? "hide measurement details" : "show measurement details" }}</a
-      >
-    </div>
-    <div v-if="titleShown" class="card mb-2">
-      <div class="card-body" style="white-space: pre">
-        {{ block.topspin_title }}
+      <div class="mt-4">
+        <span class="mr-2">
+          <Isotope :isotopeString="block.nucleus" /> {{ block.pulse_program_name }}
+        </span>
+        <a type="button" class="btn btn-default btn-sm mb-2" @click="titleShown = !titleShown">{{
+          titleShown ? "hide title" : "show title"
+        }}</a>
+        <a
+          type="button"
+          class="btn btn-default btn-sm mb-2 ml-2"
+          @click="detailsShown = !detailsShown"
+          >{{ detailsShown ? "hide measurement details" : "show measurement details" }}</a
+        >
       </div>
-    </div>
-    <div class="row">
-      <div id="bokehPlotContainer" class="col-xl-8 col-lg-8 col-md-11 mx-auto">
-        <BokehPlot v-if="bokehPlotData" :bokehPlotData="bokehPlotData" />
-        <div v-else class="alert alert-secondary">
-          Plotting currently not available for data with dimension > 1
+      <div v-if="titleShown" class="card mb-2">
+        <div class="card-body" style="white-space: pre">
+          {{ block.topspin_title }}
         </div>
       </div>
-      <div v-if="detailsShown" class="col-xl-4 col-lg-4 ml-0">
-        <table class="table table-sm">
-          <tbody>
-            <tr>
-              <th scope="row">nucleus</th>
-              <td><Isotope :isotopeString="block.nucleus" /></td>
-            </tr>
-            <tr>
-              <th scope="row">pulse program</th>
-              <td>{{ block.pulse_program_name }}</td>
-            </tr>
-            <tr>
-              <th scope="row">Data shape</th>
-              <td>
-                {{ block.processed_data_shape }} (<i>d</i> =
-                {{ block.processed_data_shape.length }})
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">probe</th>
-              <td>{{ block.probe_name }} s</td>
-            </tr>
+      <div class="row">
+        <div id="bokehPlotContainer" class="col-xl-8 col-lg-8 col-md-11 mx-auto">
+          <BokehPlot v-if="bokehPlotData" :bokehPlotData="bokehPlotData" />
+          <div v-else class="alert alert-secondary">
+            Plotting currently not available for data with dimension > 1
+          </div>
+        </div>
+        <div v-if="detailsShown" class="col-xl-4 col-lg-4 ml-0">
+          <table class="table table-sm">
+            <tbody>
+              <tr>
+                <th scope="row">nucleus</th>
+                <td><Isotope :isotopeString="block.nucleus" /></td>
+              </tr>
+              <tr>
+                <th scope="row">pulse program</th>
+                <td>{{ block.pulse_program_name }}</td>
+              </tr>
+              <tr>
+                <th scope="row">Data shape</th>
+                <td>
+                  {{ block.processed_data_shape }} (<i>d</i> =
+                  {{ block.processed_data_shape.length }})
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">probe</th>
+                <td>{{ block.probe_name }} s</td>
+              </tr>
 
-            <tr>
-              <th scope="row"># of scans</th>
-              <td>{{ block.nscans }}</td>
-            </tr>
+              <tr>
+                <th scope="row"># of scans</th>
+                <td>{{ block.nscans }}</td>
+              </tr>
 
-            <tr>
-              <th scope="row">recycle delay</th>
-              <td>{{ block.recycle_delay }} s</td>
-            </tr>
-            <tr>
-              <th scope="row">carrier frequency</th>
-              <td>{{ block.carrier_frequency_MHz }} MHz</td>
-            </tr>
+              <tr>
+                <th scope="row">recycle delay</th>
+                <td>{{ block.recycle_delay }} s</td>
+              </tr>
+              <tr>
+                <th scope="row">carrier frequency</th>
+                <td>{{ block.carrier_frequency_MHz }} MHz</td>
+              </tr>
 
-            <tr>
-              <th scope="row">carrier offset</th>
-              <td>{{ (block.carrier_offset_Hz / block.carrier_frequency_MHz).toFixed(1) }} ppm</td>
-            </tr>
-            <tr>
-              <th scope="row">cnst31</th>
-              <td>{{ block.CNST31 }}</td>
-            </tr>
-          </tbody>
-        </table>
+              <tr>
+                <th scope="row">carrier offset</th>
+                <td>
+                  {{ (block.carrier_offset_Hz / block.carrier_frequency_MHz).toFixed(1) }} ppm
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">cnst31</th>
+                <td>{{ block.CNST31 }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </DataBlockBase>
diff --git a/webapp/src/components/datablocks/XRDBlock.vue b/webapp/src/components/datablocks/XRDBlock.vue
index 2688728df..5ce27f19b 100644
--- a/webapp/src/components/datablocks/XRDBlock.vue
+++ b/webapp/src/components/datablocks/XRDBlock.vue
@@ -12,32 +12,34 @@ DataBlockBase as a prop, and save from within DataBlockBase  -->
       />
     </div>
 
-    <div class="form-row col-md-6 col-lg-4 mt-2 mb-2 pl-0">
-      <div class="input-group form-inline">
-        <label class="mr-2"><b>Wavelength (Å):</b></label>
-        <input
-          type="text"
-          class="form-control"
-          :class="{ 'is-invalid': wavelengthParseError }"
-          v-model="wavelength"
-          @keydown.enter="
-            parseWavelength();
-            updateBlock();
-          "
-          @blur="
-            parseWavelength();
-            updateBlock();
-          "
-        />
-        <div v-if="wavelengthParseError" class="alert alert-danger mt-2 mx-auto">
-          {{ wavelengthParseError }}
+    <div v-if="file_id">
+      <div class="form-row col-md-6 col-lg-4 mt-2 mb-2 pl-0">
+        <div class="input-group form-inline">
+          <label class="mr-2"><b>Wavelength (Å):</b></label>
+          <input
+            type="text"
+            class="form-control"
+            :class="{ 'is-invalid': wavelengthParseError }"
+            v-model="wavelength"
+            @keydown.enter="
+              parseWavelength();
+              updateBlock();
+            "
+            @blur="
+              parseWavelength();
+              updateBlock();
+            "
+          />
+          <div v-if="wavelengthParseError" class="alert alert-danger mt-2 mx-auto">
+            {{ wavelengthParseError }}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="row">
-      <div id="bokehPlotContainer" class="col-xl-9 col-lg-10 col-md-11 mx-auto">
-        <BokehPlot :bokehPlotData="bokehPlotData" />
+      <div class="row">
+        <div id="bokehPlotContainer" class="col-xl-9 col-lg-10 col-md-11 mx-auto">
+          <BokehPlot :bokehPlotData="bokehPlotData" />
+        </div>
       </div>
     </div>
   </DataBlockBase>