Add display of units for calculated KCL values (#7619)

* Add display of units in UI modals with calculated KCL values

* Fix command bar display to handle units

* Add display of units in the command bar

* Fix more cases of NaN from units

* Fix to support explicit plus for exponent in scientific notation

* Fix display in autocomplete

* Change to parseFloat to be more resilient

* Add e2e test for command bar

* Change an existing test to use explicit inline units

* Fix case when input string can't be parsed

Author: jtran

e2e/playwright/command-bar-tests.spec.ts

@@ -525,7 +525,9 @@ test.describe('Command bar tests', () => {
     const projectName = 'test'
     const beforeKclCode = `a = 5
 b = a * a
-c = 3 + a`
+c = 3 + a
+theta = 45deg
+`
     await context.folderSetupFn(async (dir) => {
       const testProject = join(dir, projectName)
       await fsp.mkdir(testProject, { recursive: true })
@@ -615,9 +617,45 @@ c = 3 + a`
         stage: 'commandBarClosed',
       })
     })
+    await test.step(`Edit a parameter with explicit units via command bar`, async () => {
+      await cmdBar.cmdBarOpenBtn.click()
+      await cmdBar.chooseCommand('edit parameter')
+      await cmdBar
+        .selectOption({
+          name: 'theta',
+        })
+        .click()
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Edit parameter',
+        currentArgKey: 'value',
+        currentArgValue: '45deg',
+        headerArguments: {
+          Name: 'theta',
+          Value: '',
+        },
+        highlightedHeaderArg: 'value',
+      })
+      await cmdBar.argumentInput
+        .locator('[contenteditable]')
+        .fill('45deg + 1deg')
+      await cmdBar.progressCmdBar()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Edit parameter',
+        headerArguments: {
+          Name: 'theta',
+          Value: '46deg',
+        },
+      })
+      await cmdBar.progressCmdBar()
+      await cmdBar.expectState({
+        stage: 'commandBarClosed',
+      })
+    })
 
     await editor.expectEditor.toContain(
-      `a = 5b = a * amyParameter001 = ${newValue}c = 3 + a`
+      `a = 5b = a * amyParameter001 = ${newValue}c = 3 + atheta = 45deg + 1deg`
     )
   })
 

e2e/playwright/point-click.spec.ts

@@ -136,17 +136,17 @@ test.describe('Point-and-click tests', () => {
         highlightedHeaderArg: 'length',
         commandName: 'Extrude',
       })
-      await page.keyboard.insertText('width - 0.001')
+      await page.keyboard.insertText('width - 0.001in')
       await cmdBar.progressCmdBar()
       await cmdBar.expectState({
         stage: 'review',
         headerArguments: {
-          Length: '4.999',
+          Length: '4.999in',
         },
         commandName: 'Extrude',
       })
       await cmdBar.progressCmdBar()
-      await editor.expectEditor.toContain('extrude(length = width - 0.001)')
+      await editor.expectEditor.toContain('extrude(length = width - 0.001in)')
     })
 
     await test.step(`Edit second extrude via feature tree`, async () => {

rust/kcl-lib/src/execution/types.rs

@@ -840,6 +840,18 @@ pub enum UnitType {
     Angle(UnitAngle),
 }
 
+impl UnitType {
+    pub(crate) fn to_suffix(self) -> Option<String> {
+        match self {
+            UnitType::Count => Some("_".to_owned()),
+            UnitType::Length(UnitLen::Unknown) => None,
+            UnitType::Angle(UnitAngle::Unknown) => None,
+            UnitType::Length(l) => Some(l.to_string()),
+            UnitType::Angle(a) => Some(a.to_string()),
+        }
+    }
+}
+
 impl std::fmt::Display for UnitType {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {

rust/kcl-lib/src/fmt.rs

@@ -45,6 +45,31 @@ pub fn format_number_literal(value: f64, suffix: NumericSuffix) -> Result<String
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Serialize, thiserror::Error)]
+#[serde(tag = "type")]
+pub enum FormatNumericTypeError {
+    #[error("Invalid numeric type: {0:?}")]
+    Invalid(NumericType),
+}
+
+/// For UI code generation, format a number value with a suffix such that the
+/// result can parse as a literal. If it can't be done, returns an error.
+///
+/// This is used by TS.
+pub fn format_number_value(value: f64, ty: NumericType) -> Result<String, FormatNumericTypeError> {
+    match ty {
+        NumericType::Default { .. } => Ok(value.to_string()),
+        // There isn't a syntactic suffix for these. For unknown, we don't want
+        // to ever generate the unknown suffix. We currently warn on it, and we
+        // may remove it in the future.
+        NumericType::Unknown | NumericType::Any => Err(FormatNumericTypeError::Invalid(ty)),
+        NumericType::Known(unit_type) => unit_type
+            .to_suffix()
+            .map(|suffix| format!("{value}{suffix}"))
+            .ok_or(FormatNumericTypeError::Invalid(ty)),
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use pretty_assertions::assert_eq;
@@ -134,4 +159,74 @@ mod tests {
             Err(FormatNumericSuffixError::Invalid(NumericSuffix::Unknown))
         );
     }
+
+    #[test]
+    fn test_format_number_value() {
+        assert_eq!(
+            format_number_value(
+                1.0,
+                NumericType::Default {
+                    len: Default::default(),
+                    angle: Default::default()
+                }
+            ),
+            Ok("1".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Unknown))),
+            Err(FormatNumericTypeError::Invalid(NumericType::Known(UnitType::Length(
+                UnitLen::Unknown
+            ))))
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Angle(UnitAngle::Unknown))),
+            Err(FormatNumericTypeError::Invalid(NumericType::Known(UnitType::Angle(
+                UnitAngle::Unknown
+            ))))
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Count)),
+            Ok("1_".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Mm))),
+            Ok("1mm".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Cm))),
+            Ok("1cm".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::M))),
+            Ok("1m".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Inches))),
+            Ok("1in".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Feet))),
+            Ok("1ft".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Length(UnitLen::Yards))),
+            Ok("1yd".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Angle(UnitAngle::Degrees))),
+            Ok("1deg".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Known(UnitType::Angle(UnitAngle::Radians))),
+            Ok("1rad".to_owned())
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Unknown),
+            Err(FormatNumericTypeError::Invalid(NumericType::Unknown))
+        );
+        assert_eq!(
+            format_number_value(1.0, NumericType::Any),
+            Err(FormatNumericTypeError::Invalid(NumericType::Any))
+        );
+    }
 }

rust/kcl-lib/src/lib.rs

@@ -140,7 +140,7 @@ pub mod std_utils {
 
 pub mod pretty {
     pub use crate::{
-        fmt::{format_number_literal, human_display_number},
+        fmt::{format_number_literal, format_number_value, human_display_number},
         parsing::token::NumericSuffix,
     };
 }

rust/kcl-wasm-lib/src/wasm.rs

@@ -61,6 +61,37 @@ pub fn format_number_literal(value: f64, suffix_json: &str) -> Result<String, Js
     kcl_lib::pretty::format_number_literal(value, suffix).map_err(JsError::from)
 }
 
+#[wasm_bindgen]
+pub fn format_number_value(value: f64, numeric_type_json: &str) -> Result<String, String> {
+    console_error_panic_hook::set_once();
+
+    // ts-rs can't handle tuple types, so it mashes all of these types together.
+    if let Ok(ty) = serde_json::from_str::<NumericType>(numeric_type_json) {
+        if let Ok(formatted) = kcl_lib::pretty::format_number_value(value, ty) {
+            return Ok(formatted);
+        }
+    }
+    if let Ok(unit_type) = serde_json::from_str::<UnitType>(numeric_type_json) {
+        let ty = NumericType::Known(unit_type);
+        if let Ok(formatted) = kcl_lib::pretty::format_number_value(value, ty) {
+            return Ok(formatted);
+        }
+    }
+    if let Ok(unit_len) = serde_json::from_str::<UnitLen>(numeric_type_json) {
+        let ty = NumericType::Known(UnitType::Length(unit_len));
+        if let Ok(formatted) = kcl_lib::pretty::format_number_value(value, ty) {
+            return Ok(formatted);
+        }
+    }
+    if let Ok(unit_angle) = serde_json::from_str::<UnitAngle>(numeric_type_json) {
+        let ty = NumericType::Known(UnitType::Angle(unit_angle));
+        if let Ok(formatted) = kcl_lib::pretty::format_number_value(value, ty) {
+            return Ok(formatted);
+        }
+    }
+    Err(format!("Invalid type: {numeric_type_json}"))
+}
+
 #[wasm_bindgen]
 pub fn human_display_number(value: f64, ty_json: &str) -> Result<String, String> {
     console_error_panic_hook::set_once();

src/components/CommandBar/CommandBarHeaderFooter.tsx

@@ -12,7 +12,7 @@ import type {
 } from '@src/lib/commandTypes'
 import type { Selections } from '@src/lib/selections'
 import { getSelectionTypeDisplayText } from '@src/lib/selections'
-import { roundOff } from '@src/lib/utils'
+import { roundOffWithUnits } from '@src/lib/utils'
 import { commandBarActor, useCommandBarState } from '@src/lib/singletons'
 
 function CommandBarHeaderFooter({
@@ -163,10 +163,8 @@ function CommandBarHeaderFooter({
                         arg.inputType === 'selectionMixed' ? (
                           getSelectionTypeDisplayText(argValue as Selections)
                         ) : arg.inputType === 'kcl' ? (
-                          roundOff(
-                            Number(
-                              (argValue as KclCommandValue).valueCalculated
-                            ),
+                          roundOffWithUnits(
+                            (argValue as KclCommandValue).valueCalculated,
                             4
                           )
                         ) : arg.inputType === 'text' &&

src/components/CommandBar/CommandBarKclInput.tsx

@@ -21,13 +21,13 @@ import { Spinner } from '@src/components/Spinner'
 import { createLocalName, createVariableDeclaration } from '@src/lang/create'
 import { getNodeFromPath } from '@src/lang/queryAst'
 import type { SourceRange, VariableDeclarator } from '@src/lang/wasm'
-import { isPathToNode } from '@src/lang/wasm'
+import { formatNumberValue, isPathToNode } from '@src/lang/wasm'
 import type { CommandArgument, KclCommandValue } from '@src/lib/commandTypes'
 import { kclManager } from '@src/lib/singletons'
 import { getSystemTheme } from '@src/lib/theme'
 import { err } from '@src/lib/trap'
 import { useCalculateKclExpression } from '@src/lib/useCalculateKclExpression'
-import { roundOff } from '@src/lib/utils'
+import { roundOff, roundOffWithUnits } from '@src/lib/utils'
 import { varMentions } from '@src/lib/varCompletionExtension'
 import { useSettings } from '@src/lib/singletons'
 import { commandBarActor, useCommandBarState } from '@src/lib/singletons'
@@ -128,10 +128,22 @@ function CommandBarKclInput({
     sourceRange: sourceRangeForPrevVariables,
   })
 
-  const varMentionData: Completion[] = prevVariables.map((v) => ({
-    label: v.key,
-    detail: String(roundOff(Number(v.value))),
-  }))
+  const varMentionData: Completion[] = prevVariables.map((v) => {
+    const roundedWithUnits = (() => {
+      if (typeof v.value !== 'number' || !v.ty) {
+        return undefined
+      }
+      const numWithUnits = formatNumberValue(v.value, v.ty)
+      if (err(numWithUnits)) {
+        return undefined
+      }
+      return roundOffWithUnits(numWithUnits)
+    })()
+    return {
+      label: v.key,
+      detail: roundedWithUnits ?? String(roundOff(Number(v.value))),
+    }
+  })
   const varMentionsExtension = varMentions(varMentionData)
 
   const { setContainer, view } = useCodeMirror({
@@ -282,7 +294,7 @@ function CommandBarKclInput({
           ) : calcResult === 'NAN' ? (
             "Can't calculate"
           ) : (
-            roundOff(Number(calcResult), 4)
+            roundOffWithUnits(calcResult, 4)
           )}
         </span>
       </label>

src/lang/queryAst.test.ts

@@ -63,11 +63,36 @@ variableBelowShouldNotBeIncluded = 3
       execState.variables,
       topLevelRange(rangeStart, rangeStart)
     )
+    const defaultTy = {
+      type: 'Default',
+      angle: {
+        type: 'Degrees',
+      },
+      len: {
+        type: 'Mm',
+      },
+    }
     expect(variables).toEqual([
-      { key: 'baseThick', value: 1 },
-      { key: 'armAngle', value: 60 },
-      { key: 'baseThickHalf', value: 0.5 },
-      { key: 'halfArmAngle', value: 30 },
+      {
+        key: 'baseThick',
+        value: 1,
+        ty: defaultTy,
+      },
+      {
+        key: 'armAngle',
+        value: 60,
+        ty: defaultTy,
+      },
+      {
+        key: 'baseThickHalf',
+        value: 0.5,
+        ty: defaultTy,
+      },
+      {
+        key: 'halfArmAngle',
+        value: 30,
+        ty: defaultTy,
+      },
       // no arrExpShouldNotBeIncluded, variableBelowShouldNotBeIncluded etc
     ])
     // there are 4 number variables and 2 non-number variables before the sketch var

src/lang/queryAst.ts

@@ -55,6 +55,7 @@ import type { OpKclValue, Operation } from '@rust/kcl-lib/bindings/Operation'
 import { ARG_INDEX_FIELD, LABELED_ARG_FIELD } from '@src/lang/queryAstConstants'
 import type { KclCommandValue } from '@src/lib/commandTypes'
 import type { UnaryExpression } from 'typescript'
+import type { NumericType } from '@rust/kcl-lib/bindings/NumericType'
 
 /**
  * Retrieves a node from a given path within a Program node structure, optionally stopping at a specified node type.
@@ -306,6 +307,7 @@ export function traverse(
 export interface PrevVariable<T> {
   key: string
   value: T
+  ty: NumericType | undefined
 }
 
 export function findAllPreviousVariablesPath(
@@ -353,6 +355,7 @@ export function findAllPreviousVariablesPath(
     variables.push({
       key: varName,
       value: varValue.value,
+      ty: varValue.type === 'Number' ? varValue.ty : undefined,
     })
   })