From 64ae96e60272778e0ac92a0663917ae9c2bbe276 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 14 Nov 2024 10:13:08 -0800
Subject: [PATCH] Closes #7823 - Markup/CSS sanding and shimming for derived
 telemetry front-end. - Toggle switch CSS improved to use `gap` instead of
 left margin.

---
 src/plugins/comps/components/CompsView.vue | 129 ++++++++++++---------
 src/plugins/comps/components/comps.scss    |  55 +++++++--
 src/ui/components/toggle-switch.scss       |   2 +-
 3 files changed, 123 insertions(+), 63 deletions(-)

diff --git a/src/plugins/comps/components/CompsView.vue b/src/plugins/comps/components/CompsView.vue
index 5e5cf886487..1c2b599e4d3 100644
--- a/src/plugins/comps/components/CompsView.vue
+++ b/src/plugins/comps/components/CompsView.vue
@@ -53,8 +53,12 @@
         </div>
       </div>
 
-      <div :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]">
-        <label v-if="isEditing" class="c-toggle-switch">
+      <div
+        v-if="isEditing"
+        class="c-comps__apply-test-data-control"
+        :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]"
+      >
+        <label class="c-toggle-switch">
           <input type="checkbox" :checked="testDataApplied" @change="toggleTestData" />
           <span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
           <span class="c-toggle-switch__label">Apply Test Values</span>
@@ -62,46 +66,55 @@
       </div>
       <div class="c-comps__refs">
         <div v-for="parameter in parameters" :key="parameter.keyString" class="c-comps__ref">
-          <span class="c-test-datum__string">Reference</span>
-          <input
-            v-if="isEditing"
-            v-model="parameter.name"
-            :aria-label="`Reference Name Input for ${parameter.name}`"
-            type="text"
-            class="c-input--md"
-            @change="updateParameters"
-          />
-          <div v-else class="--em">{{ parameter.name }}</div>
-          <span class="c-test-datum__string">=</span>
-          <span
-            class="c-comps__path-and-field"
-            :aria-label="`Reference ${parameter.name} Object Path`"
-          >
-            <ObjectPathString
-              :domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
-              :show-object-itself="true"
-              class="--em"
-            />
-            <!-- drop down to select value from telemetry -->
-            <select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters">
-              <option
-                v-for="parameterValueOption in compsManager.getMetaDataValuesForParameter(
-                  parameter.keyString
-                )"
-                :key="parameterValueOption.key"
-                :value="parameterValueOption.key"
+          <div class="c-comps__ref-section">
+            <div class="c-comps__ref-sub-section ref-and-path">
+              <span class="c-test-datum__string">Reference</span>
+              <input
+                v-if="isEditing"
+                v-model="parameter.name"
+                :aria-label="`Reference Name Input for ${parameter.name}`"
+                type="text"
+                class="c-input--md"
+                @change="updateParameters"
+              />
+              <div v-else class="--em">{{ parameter.name }}</div>
+              <span class="c-test-datum__string">=</span>
+              <span
+                class="c-comps__path-and-field"
+                :aria-label="`Reference ${parameter.name} Object Path`"
               >
-                {{ parameterValueOption.name }}
-              </option>
-            </select>
-            <div v-else>{{ parameter.valueToUse }}</div>
+                <ObjectPathString
+                  :domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
+                  :show-object-itself="true"
+                  class="c-comp__ref-path --em"
+                />
+                <!-- drop down to select value from telemetry -->
+                <select
+                  v-if="isEditing"
+                  v-model="parameter.valueToUse"
+                  class="c-comp__ref-field"
+                  @change="updateParameters"
+                >
+                  <option
+                    v-for="parameterValueOption in compsManager.getMetaDataValuesForParameter(
+                      parameter.keyString
+                    )"
+                    :key="parameterValueOption.key"
+                    :value="parameterValueOption.key"
+                  >
+                    {{ parameterValueOption.name }}
+                  </option>
+                </select>
+                <div v-else class="c-comp__ref-field">{{ parameter.valueToUse }}</div>
+              </span>
+            </div>
+
             <div
-              :class="[
-                'c-comps__refs-controls c-cdef__controls',
-                { disabled: !parameters?.length }
-              ]"
+              v-if="isEditing"
+              class="c-comps__ref-sub-section accum-vals"
+              :class="['c-comps__refs-controls', { disabled: !parameters?.length }]"
             >
-              <label v-if="isEditing" class="c-toggle-switch">
+              <label class="c-toggle-switch">
                 <span class="c-toggle-switch__label">Accumulate Values</span>
                 <input
                   v-model="parameter.accumulateValues"
@@ -113,11 +126,8 @@
                   aria-label="Toggle Parameter Accumulation"
                 ></span>
               </label>
-              <div v-if="!isEditing && parameter.accumulateValues">
-                - accumulating values with sample size {{ parameter.sampleSize }}
-              </div>
 
-              <span v-if="isEditing && parameter.accumulateValues" class="c-test-datum__string"
+              <span v-if="isEditing && parameter.accumulateValues" class="c-comps__label"
                 >Sample Size</span
               >
               <input
@@ -125,21 +135,30 @@
                 v-model="parameter.sampleSize"
                 :aria-label="`Sample Size for ${parameter.name}`"
                 type="number"
-                class="c-input--md"
+                class="c-input--sm c-comps__value"
                 @change="updateParameters"
               />
             </div>
-          </span>
-
-          <span v-if="isEditing" class="c-test-datum__string">Test value</span>
-          <input
-            v-if="isEditing"
-            v-model="parameter.testValue"
-            :aria-label="`Reference Test Value for ${parameter.name}`"
-            type="text"
-            class="c-input--md"
-            @change="updateTestValue(parameter)"
-          />
+
+            <div
+              v-if="!isEditing && parameter.accumulateValues"
+              class="c-comps__ref-sub-section accum-vals"
+            >
+              Accumulating values with sample size {{ parameter.sampleSize }}
+            </div>
+          </div>
+
+          <div v-if="isEditing" class="c-comps__ref-section">
+            <span class="c-comps__label">Test value</span>
+            <input
+              v-if="isEditing"
+              v-model="parameter.testValue"
+              :aria-label="`Reference Test Value for ${parameter.name}`"
+              type="text"
+              class="c-input--md c-comps__value"
+              @change="updateTestValue(parameter)"
+            />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/plugins/comps/components/comps.scss b/src/plugins/comps/components/comps.scss
index 3003c577d6e..988abd34ee5 100644
--- a/src/plugins/comps/components/comps.scss
+++ b/src/plugins/comps/components/comps.scss
@@ -56,25 +56,68 @@
     gap: $interiorMarginSm;
   }
 
+
+  &__apply-test-data-control {
+    padding: $interiorMargin 0;
+  }
+
+  &__refs {
+
+  }
+
   &__ref {
     @include discreteItem();
-    display: grid;
-    gap: $interiorMargin;
-    grid-template-columns: max-content max-content min-content 1fr;
-    padding: $interiorMargin;
+    align-items: start;
+    display: flex;
+    flex-direction: column;
+    padding: 0 $interiorMargin;
     line-height: 170%; // Aligns text with controls like selects
+
+    > * + * {
+      border-top: 1px solid $colorInteriorBorder;
+    }
+  }
+
+  &__ref-section {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $interiorMargin;
+    padding: $interiorMargin 0;
+    width: 100%;
+  }
+
+  &__ref-sub-section {
+    align-items: baseline;
+    display: flex;
+    flex: 1 1 auto;
+    gap: $interiorMargin;
+
+    &.ref-and-path {
+      flex: 0 1 auto;
+      flex-wrap: wrap;
+    }
   }
 
   &__path-and-field {
     align-items: start;
     display: flex;
+    flex-wrap: wrap;
     gap: $interiorMargin;
+
+    .c-comp__ref-path {
+      word-break: break-all;
+    }
+  }
+
+  &__label,
+  &__value {
+    white-space: nowrap;
   }
 
   &__expression {
     *[class*=value] {
       font-family: monospace;
-      //font-size: 1.1em;
       resize: vertical; // Only applies to textarea
     }
     div[class*=value] {
@@ -87,7 +130,6 @@
     border-radius: $basicCr;
     display: flex; // Creates hanging indent from :before icon
     padding: $interiorMarginSm $interiorMarginLg $interiorMarginSm $interiorMargin;
-    //text-wrap: normal;
     max-width: max-content;
 
     &:before {
@@ -107,6 +149,5 @@
 
   .--em {
     color: $colorBodyFgEm;
-    //font-weight: bold;
   }
 }
diff --git a/src/ui/components/toggle-switch.scss b/src/ui/components/toggle-switch.scss
index 402af4c0826..f2f6f85533f 100644
--- a/src/ui/components/toggle-switch.scss
+++ b/src/ui/components/toggle-switch.scss
@@ -25,6 +25,7 @@
 .c-toggle-switch {
   cursor: pointer;
   display: inline-flex;
+  gap: $interiorMarginSm;
   align-items: center;
   vertical-align: middle;
 
@@ -55,7 +56,6 @@
   }
 
   &__label {
-    margin-left: $interiorMarginSm;
     white-space: nowrap;
   }