Fixes

NASA-AMMOS · Dec 20, 2024 · 792cbdb · 792cbdb
1 parent cdfe150
commit 792cbdb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte b/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte
@@ -73,7 +73,7 @@
   }
 
   $: if (currentField === 'Parameter' && currentSubfieldLabel !== undefined && subfields) {
-    const matchingSubfield = subfields.find(subfield => subfield.label === currentSubfieldLabel) || subfields[0];
+    const matchingSubfield = subfields.find(subfield => subfield.label === currentSubfieldLabel);
     if (matchingSubfield) {
       // Map subfield type to filter type
       currentType = matchingSubfield.type;
@@ -208,9 +208,19 @@
     {:else if currentOperator === 'is_within' || currentOperator === 'is_not_within'}
       {#if Array.isArray(currentValue)}
         <div class="range-input">
-          <input class="st-input w-100" type="number" on:input={event => onRangeInputChange(event, 'min')} />
+          <Input class="dynamic-filter-input">
+            <input class="st-input w-100" type="number" on:input={event => onRangeInputChange(event, 'min')} />
+            <div class="parameter-right" slot="right">
+              <ParameterUnits unit={currentUnit} />
+            </div>
+          </Input>
           <div class="st-typography-label">To</div>
-          <input class="st-input w-100" type="number" on:input={event => onRangeInputChange(event, 'max')} />
+          <Input class="dynamic-filter-input">
+            <input class="st-input w-100" type="number" on:input={event => onRangeInputChange(event, 'max')} />
+            <div class="parameter-right" slot="right">
+              <ParameterUnits unit={currentUnit} />
+            </div>
+          </Input>
         </div>
       {/if}
     {:else if currentType === 'int' || currentType === 'real'}
@@ -263,6 +273,7 @@
     on:click|stopPropagation={() => dispatch('remove')}
     class="st-button icon"
     use:tooltip={{ content: 'Remove Filter' }}
+    style="min-width: min-content"
   >
     <CloseIcon />
   </button>
@@ -288,7 +299,6 @@
 
   .dynamic-filter-value {
     flex: 1;
-    min-width: 40px;
   }
 
   .range-input {
@@ -299,5 +309,6 @@
 
   :global(.dynamic-filter-input.input.input-stacked) {
     display: grid;
+    min-width: 64px;
   }
 </style>
diff --git a/src/components/ui/SearchableDropdown.svelte b/src/components/ui/SearchableDropdown.svelte
@@ -75,18 +75,20 @@
   let menuRef: Menu | undefined;
   let searchFilter: string = '';
   let selectedOptions: DropdownOptions = [];
-  let clientWidth: number = 0;
-  let maxOptionChars: number = 0;
+  let maxWidth: number = 0;
 
   $: {
     selectedOptions = [];
+    let maxOptionChars = 0;
     options.forEach(option => {
       if (selectedOptionValues.find(value => value === option.value)) {
         selectedOptions.push(option);
       }
       const optionCharacterLength = option.display.toString().length;
       maxOptionChars = Math.max(maxOptionChars, optionCharacterLength);
     });
+    // avg char length + 48 padding for the rest of the menu
+    maxWidth = Math.max(50, maxOptionChars * 8 + 48);
   }
 
   $: selectedOptions = options.filter(option => {
@@ -134,10 +136,6 @@
     }
   }
 
-  $: if (typeof clientWidth === 'number') {
-    menuRef?.hide();
-  }
-
   function onCloseMenu() {
     searchFilter = '';
   }
@@ -169,7 +167,7 @@
   }
 </script>
 
-<div class={rootClasses} bind:clientWidth>
+<div class={rootClasses}>
   <!-- svelte-ignore a11y-click-events-have-key-events a11y-interactive-supports-focus -->
   <div
     class="selected-display st-select w-100"
@@ -220,12 +218,11 @@
           />
         </Input>
       </div>
-      <!-- TODO instead of using clientWidth here we could pass in a width as a prop -->
       <RowVirtualizerFixed
         count={displayedOptions.length}
         overscan={100}
         maxHeight={maxListHeight}
-        minWidth="{Math.max(50, maxOptionChars * 7)}px"
+        minWidth="{maxWidth}px"
         selectedIndex={selectedOptions.length
           ? displayedOptions.findIndex(o => o.value === selectedOptions[0].value)
           : undefined}