show computed attribute units

src/components/activity/ActivitySpanForm.svelte

@@ -1,15 +1,14 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { ActivityType } from '../../types/activity';
+  import type { ActivityComputedAttributeDefinitions, ActivityType } from '../../types/activity';
   import type { User } from '../../types/app';
   import type { ExpansionSequence } from '../../types/expansion';
-  import type { ArgumentsMap, FormParameter, ParametersMap } from '../../types/parameter';
-  import type { ValueSchema } from '../../types/schema';
+  import type { ArgumentsMap, ComputedParametersMap, FormParameter } from '../../types/parameter';
   import type { Span, SpanUtilityMaps, SpansMap } from '../../types/simulation';
   import { getSpanRootParent } from '../../utilities/activities';
   import effects from '../../utilities/effects';
-  import { getFormParameters } from '../../utilities/parameters';
+  import { getFormComputedAttributes, getFormParameters } from '../../utilities/parameters';
   import { getDoyTimeFromInterval, getUnixEpochTime } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import Collapse from '../Collapse.svelte';
@@ -118,16 +117,20 @@
    * so we can render computed attributes as form parameters.
    */
   function setFormParametersComputedAttributes(
-    schema: ValueSchema | undefined,
+    computedAttributeDefinitions: ActivityComputedAttributeDefinitions | undefined,
     computedAttributes: ArgumentsMap | undefined,
   ) {
-    if (schema) {
-      const parametersMap: ParametersMap = { Value: { order: 0, schema } };
+    if (computedAttributeDefinitions) {
+      const parametersMap: ComputedParametersMap = {
+        Value: { order: 0, schema: computedAttributeDefinitions.schema, units: computedAttributeDefinitions.units },
+      };
       const argumentsMap: ArgumentsMap = computedAttributes ? { Value: computedAttributes } : { Value: {} };
-      formParametersComputedAttributes = getFormParameters(parametersMap, argumentsMap, []).map(formParameter => ({
-        ...formParameter,
-        valueSource: 'none',
-      }));
+      formParametersComputedAttributes = getFormComputedAttributes(parametersMap, argumentsMap, []).map(
+        formParameter => ({
+          ...formParameter,
+          valueSource: 'none',
+        }),
+      );
     }
   }
 </script>

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.unit} />
+      <ParameterBaseRightAdornments
+        {disabled}
+        hidden={hideRightAdornments}
+        {formParameter}
+        {parameterType}
+        {use}
+        on:reset={() => dispatch('reset', formParameter)}
+      />
+    </div>
   </div>
 </div>
 
@@ -62,4 +66,9 @@
     display: flex;
     margin-right: 5px;
   }
+
+  .parameter-right {
+    display: inline-flex;
+    margin-left: 5px;
+  }
 </style>

src/components/parameters/ParameterRecSeries.svelte

@@ -42,7 +42,7 @@
         name: `[${i}]`,
         order: i,
         schema: schema.items,
-        unit: formParameter.unit,
+        units: formParameter.units,
         value: getArgument(value[i], schema.items).value,
         valueSource: formParameter.valueSource,
       };

src/components/parameters/ParameterRecStruct.svelte

@@ -38,7 +38,7 @@
         name: key,
         order: index,
         schema: schema.items[key],
-        unit: formParameter.unit,
+        unit: formParameter.units?.[key],
         value: value !== null ? value[key] : null,
         valueSource: formParameter.valueSource,
       };

src/components/parameters/ParameterUnits.svelte

@@ -1,11 +1,13 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import { tooltip } from '../../utilities/tooltip';
+
   export let unit: string | undefined = undefined;
 </script>
 
 {#if unit}
-  <span class="parameter-units">{unit}</span>
+  <span class="parameter-units" use:tooltip={{ content: unit }}>{unit}</span>
 {/if}
 
 <style>

src/components/parameters/Parameters.svelte

@@ -67,7 +67,6 @@
 
 <style>
   .parameter {
-    align-items: center;
     column-gap: 4px;
     display: grid;
     grid-template-columns: auto 16px;
@@ -90,6 +89,7 @@
   }
 
   .parameter-info {
+    padding-top: 0.2rem;
     visibility: hidden;
   }
   .parameters-container :global(> div.highlight:hover .parameter-info) {

src/types/activity.ts

@@ -13,8 +13,13 @@ export type ActivityDirectivesByView = {
 
 export type UnitsMap = Record<string, string>;
 
+export type ActivityComputedAttributeDefinitions = {
+  schema: ValueSchema;
+  units?: Record<string, string>;
+};
+
 export type ActivityType = {
-  computed_attribute_definitions: ValueSchema;
+  computed_attribute_definitions: ActivityComputedAttributeDefinitions;
   name: string;
   parameter_definitions: ParametersMap;
   required_parameters: string[];

src/types/parameter.ts

@@ -16,6 +16,7 @@ export type FormParameter<T = ValueSchema> = {
   required?: boolean;
   schema: T;
   unit?: string;
+  units?: Record<ParameterName, string>;
   value: Argument;
   valueSource: ValueSource;
 };
@@ -25,6 +26,7 @@ export type Argument = any;
 export type ArgumentsMap = Record<ParameterName, Argument>;
 
 export type Parameter = { order: number; schema: ValueSchema; unit?: string };
+export type ComputedParameter = { order: number; schema: ValueSchema; units?: Record<ParameterName, string> };
 
 export type ParameterError = { message: string; schema: ValueSchema };
 
@@ -35,6 +37,7 @@ export type ParameterName = string;
 export type RequiredParametersList = ParameterName[];
 
 export type ParametersMap = Record<ParameterName, Parameter>;
+export type ComputedParametersMap = Record<ParameterName, ComputedParameter>;
 
 export type ParameterValidationError = {
   message: string;

src/types/simulation.ts

@@ -41,7 +41,7 @@ export type Resource = {
 export type ResourceType = {
   definition: {
     schema: ValueSchema;
-    units?: string;
+    unit?: string;
   };
   name: string;
 };

src/utilities/parameters.ts

@@ -2,6 +2,7 @@ import { isEqual, omitBy } from 'lodash-es';
 import type {
   Argument,
   ArgumentsMap,
+  ComputedParametersMap,
   FormParameter,
   ParametersMap,
   RequiredParametersList,
@@ -83,6 +84,35 @@ export function getFormParameters(
 
     return formParameter;
   });
+  return formParameters;
+}
+
+export function getFormComputedAttributes(
+  parametersMap: ComputedParametersMap,
+  argumentsMap: ArgumentsMap,
+  requiredParameters: RequiredParametersList,
+  presetArgumentsMap: ArgumentsMap = {},
+  defaultArgumentsMap: ArgumentsMap = {},
+): FormParameter[] {
+  const formParameters = Object.entries(parametersMap).map(([name, { order, schema, units }]) => {
+    const arg: Argument = argumentsMap[name];
+    const preset: Argument = presetArgumentsMap[name];
+    const defaultArg: Argument | undefined = defaultArgumentsMap[name];
+    const { value, valueSource } = getArgument(arg, schema, preset, defaultArg);
+    const required = requiredParameters.indexOf(name) > -1;
+    const formParameter: FormParameter = {
+      errors: null,
+      name,
+      order,
+      required,
+      schema,
+      units,
+      value,
+      valueSource,
+    };
+
+    return formParameter;
+  });
 
   return formParameters;
 }