Units UI (#968)

* add units to parameter components * add "compact" mode to ValueSourceBadge component for reusability * fix issue where "display:none" prevents proper padding calculation * add ellipsis to parameter inputs --------- Co-authored-by: Matthew Dailis <[email protected]>
NASA-AMMOS · Nov 6, 2023 · a39f4ae · a39f4ae
1 parent 6b2c4e0
commit a39f4ae
Show file tree

Hide file tree

Showing 20 changed files with 504 additions and 107 deletions.
diff --git a/e2e-tests/data/banananation-develop.jar b/e2e-tests/data/banananation-develop.jar
diff --git a/src/components/activity/ActivitySpanForm.svelte b/src/components/activity/ActivitySpanForm.svelte
@@ -27,6 +27,7 @@
   export let spanUtilityMaps: SpanUtilityMaps;
   export let user: User | null;
 
+  let activityType: ActivityType | null = null;
   let endTimeDoy: string | null = null;
   let formParametersComputedAttributes: FormParameter[] = [];
   let formParameters: FormParameter[] = [];
@@ -59,8 +60,12 @@
             activityType.parameters,
             span.attributes.arguments,
             activityType.required_parameters,
+            {},
             activityArguments.arguments,
-          );
+          ).map(formParameter => ({
+            ...formParameter,
+            valueSource: 'none',
+          }));
         }
       });
   }

diff --git a/src/components/context-menu/ContextMenu.svelte b/src/components/context-menu/ContextMenu.svelte
@@ -19,6 +19,10 @@
     }
   }
 
+  export function isShown() {
+    return shown;
+  }
+
   export function showDirectly(_x: number, _y: number, _xAnchor: number): void {
     shown = true;
     x = _x;
@@ -34,7 +38,7 @@
   }
 
   let div: HTMLDivElement;
-  let shown = false;
+  let shown: boolean = false;
   let x: number;
   let y: number;
 
@@ -62,6 +66,7 @@
 <svelte:body on:click={() => hide(true)} />
 
 {#if shown}
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div
     bind:this={div}
     class="context-menu"
@@ -70,6 +75,8 @@
     style:top={`${y}px`}
     transition:fade={{ duration: 50 }}
     on:click|stopPropagation={onClick}
+    on:mouseout
+    on:mouseover
   >
     <slot />
   </div>

diff --git a/src/components/form/Input.svelte b/src/components/form/Input.svelte
@@ -7,6 +7,9 @@
   export let layout: 'inline' | 'stacked' | null = 'stacked';
   export { className as class };
 
+  const padLeft = 5;
+  const padRight = 6;
+
   let className: string = '';
   let container: HTMLDivElement;
   let containerObserver: MutationObserver;
@@ -51,27 +54,51 @@
   });
 
   function padLeftSlot() {
-    const padLeft = 5;
-    const padRight = 3;
     if (left !== null) {
       left.style.left = `${padLeft}px`;
+      left.style.width = 'min-content';
+
       if (input !== null) {
-        input.style.paddingLeft = `${padLeft + left.clientWidth + padRight}px`;
+        input.style.paddingLeft = `min(40%, ${padLeft + padRight}px)`;
       }
       setChildrenStyles([left]);
     }
+    // because the content of the slot might not have been fully rendered by the time this function is called
+    // we must kick it out to a timeout to wait for it to be rendered
+    setTimeout(() => {
+      if (left !== null) {
+        left.style.left = `${padLeft}px`;
+
+        left.style.width = `min(40%, ${left.clientWidth}px)`;
+        if (input !== null) {
+          input.style.paddingLeft = `min(40%, ${padLeft + left.clientWidth + padRight}px)`;
+        }
+      }
+    }, 100);
   }
 
   function padRightSlot() {
-    const padLeft = 3;
-    const padRight = 5;
     if (right !== null) {
       right.style.right = `${padRight}px`;
+      right.style.width = 'min-content';
+
       if (input !== null) {
-        input.style.paddingRight = `${padLeft + right.clientWidth + padRight}px`;
+        input.style.paddingRight = `min(40%, ${padLeft + padRight}px)`;
       }
       setChildrenStyles([right]);
     }
+    // because the content of the slot might not have been fully rendered by the time this function is called
+    // we must kick it out to a timeout to wait for it to be rendered
+    setTimeout(() => {
+      if (right !== null) {
+        right.style.right = `${padRight}px`;
+
+        right.style.width = `min(40%, ${right.clientWidth}px)`;
+        if (input !== null) {
+          input.style.paddingRight = `min(40%, ${padLeft + right.clientWidth + padRight}px)`;
+        }
+      }
+    }, 100);
   }
 
   function inputObserverCallback(mutations: MutationRecord[]) {

diff --git a/src/components/parameters/ParameterBaseBoolean.svelte b/src/components/parameters/ParameterBaseBoolean.svelte
@@ -7,6 +7,7 @@
   import Input from '../form/Input.svelte';
   import ParameterBaseRightAdornments from './ParameterBaseRightAdornments.svelte';
   import ParameterName from './ParameterName.svelte';
+  import ParameterUnits from './ParameterUnits.svelte';
 
   export let disabled: boolean = false;
   export let formParameter: FormParameter;
@@ -32,16 +33,19 @@
       on:change={() => dispatch('change', formParameter)}
       use:useActions={use}
     />
-    <ParameterBaseRightAdornments
-      {disabled}
-      hidden={hideRightAdornments}
-      slot="right"
-      {formParameter}
-      {parameterType}
-      on:reset={() => dispatch('reset', formParameter)}
-      {use}
-    />
+    <div class="parameter-right" slot="right">
+      <ParameterUnits unit={formParameter.schema?.metadata?.unit?.value} />
+      <ParameterBaseRightAdornments
+        {disabled}
+        hidden={hideRightAdornments}
+        {formParameter}
+        {parameterType}
+        on:reset={() => dispatch('reset', formParameter)}
+        {use}
+      />
+    </div>
   </Input>
+  <div />
 </div>
 
 <style>
@@ -55,4 +59,10 @@
     display: grid;
     padding: 4px 0px;
   }
+
+  .parameter-right {
+    column-gap: 5px;
+    display: inline-flex;
+    width: 100%;
+  }
 </style>
diff --git a/src/components/parameters/ParameterBaseNumber.svelte b/src/components/parameters/ParameterBaseNumber.svelte
@@ -7,6 +7,7 @@
   import Input from '../form/Input.svelte';
   import ParameterBaseRightAdornments from './ParameterBaseRightAdornments.svelte';
   import ParameterName from './ParameterName.svelte';
+  import ParameterUnits from './ParameterUnits.svelte';
 
   export let disabled: boolean = false;
   export let formParameter: FormParameter;
@@ -34,15 +35,17 @@
       use:useActions={use}
       on:change={() => dispatch('change', formParameter)}
     />
-    <ParameterBaseRightAdornments
-      {disabled}
-      hidden={hideRightAdornments}
-      slot="right"
-      {formParameter}
-      {parameterType}
-      {use}
-      on:reset={() => dispatch('reset', formParameter)}
-    />
+    <div class="parameter-right" slot="right">
+      <ParameterUnits unit={formParameter.schema?.metadata?.unit?.value} />
+      <ParameterBaseRightAdornments
+        {disabled}
+        hidden={hideRightAdornments}
+        {formParameter}
+        {parameterType}
+        {use}
+        on:reset={() => dispatch('reset', formParameter)}
+      />
+    </div>
   </Input>
 </div>
 
@@ -51,4 +54,10 @@
     align-items: center;
     display: grid;
   }
+
+  .parameter-right {
+    column-gap: 5px;
+    display: inline-flex;
+    width: 100%;
+  }
 </style>
diff --git a/src/components/parameters/ParameterBaseRightAdornments.svelte b/src/components/parameters/ParameterBaseRightAdornments.svelte
@@ -25,16 +25,17 @@
 </script>
 
 <div class="parameter-base-right-adornment" {hidden}>
-  {#if !hideValueSource}
-    <ValueSourceBadge {disabled} source={formParameter.valueSource} {parameterType} {use} on:reset />
-  {/if}
   {#if errors.length > 0 && !hideError}
     <InputErrorBadge {errors} />
   {/if}
+  {#if !hideValueSource}
+    <ValueSourceBadge {disabled} source={formParameter.valueSource} {parameterType} {use} on:reset />
+  {/if}
 </div>
 
 <style>
   .parameter-base-right-adornment:not([hidden]) {
+    column-gap: 1px;
     display: flex;
   }
 </style>
diff --git a/src/components/parameters/ParameterBaseString.svelte b/src/components/parameters/ParameterBaseString.svelte
@@ -7,6 +7,7 @@
   import Input from '../form/Input.svelte';
   import ParameterBaseRightAdornments from './ParameterBaseRightAdornments.svelte';
   import ParameterName from './ParameterName.svelte';
+  import ParameterUnits from './ParameterUnits.svelte';
 
   export let disabled: boolean = false;
   export let formParameter: FormParameter;
@@ -34,15 +35,17 @@
       use:useActions={use}
       on:change={() => dispatch('change', formParameter)}
     />
-    <ParameterBaseRightAdornments
-      {disabled}
-      hidden={hideRightAdornments}
-      slot="right"
-      {formParameter}
-      {parameterType}
-      {use}
-      on:reset={() => dispatch('reset', formParameter)}
-    />
+    <div class="parameter-right" slot="right">
+      <ParameterUnits unit={formParameter.schema?.metadata?.unit?.value} />
+      <ParameterBaseRightAdornments
+        {disabled}
+        hidden={hideRightAdornments}
+        {formParameter}
+        {parameterType}
+        {use}
+        on:reset={() => dispatch('reset', formParameter)}
+      />
+    </div>
   </Input>
 </div>
 
@@ -51,4 +54,10 @@
     align-items: center;
     display: grid;
   }
+
+  .parameter-right {
+    column-gap: 5px;
+    display: inline-flex;
+    width: 100%;
+  }
 </style>
diff --git a/src/components/parameters/ParameterBaseVariant.svelte b/src/components/parameters/ParameterBaseVariant.svelte
@@ -7,6 +7,7 @@
   import { useActions, type ActionArray } from '../../utilities/useActions';
   import ParameterBaseRightAdornments from './ParameterBaseRightAdornments.svelte';
   import ParameterName from './ParameterName.svelte';
+  import ParameterUnits from './ParameterUnits.svelte';
 
   export let disabled: boolean = false;
   export let formParameter: FormParameter;
@@ -40,14 +41,17 @@
         </option>
       {/each}
     </select>
-    <ParameterBaseRightAdornments
-      {disabled}
-      hidden={hideRightAdornments}
-      {formParameter}
-      {parameterType}
-      {use}
-      on:reset={() => dispatch('reset', formParameter)}
-    />
+    <div class="parameter-right">
+      <ParameterUnits unit={formParameter.schema?.metadata?.unit?.value} />
+      <ParameterBaseRightAdornments
+        {disabled}
+        hidden={hideRightAdornments}
+        {formParameter}
+        {parameterType}
+        {use}
+        on:reset={() => dispatch('reset', formParameter)}
+      />
+    </div>
   </div>
 </div>
 
@@ -59,7 +63,15 @@
 
   .parameter-base-variant-content {
     align-items: center;
-    display: flex;
-    margin-right: 5px;
+    display: grid;
+    grid-template-columns: auto min-content;
+    margin-right: 6px;
+  }
+
+  .parameter-right {
+    column-gap: 5px;
+    display: inline-flex;
+    margin-left: 5px;
+    width: 100%;
   }
 </style>