Merge remote-tracking branch 'origin/main' into react18

cypress/e2e/custom-unit.test.ts

@@ -15,6 +15,11 @@ context("Test custom units", () => {
     enterExpression("a");
     unitField(computedNodeIndex).should("contain.html", "foo");
 
+    // constants can be included in the expression with custom units
+    // as long as the custom unit is used by an input variable.
+    enterExpression("a + 1 foo");
+    unitField(computedNodeIndex).should("contain.html", "foo");
+
     enterExpression("a*2");
     unitField(computedNodeIndex).should("contain.html", "foo");
 

src/components/app-store.ts

@@ -1,12 +1,15 @@
 import { destroy, types, flow } from "mobx-state-tree";
-import { DQRoot } from "../diagram";
+import { DQRoot, UnitsManager } from "../diagram";
 import { Variable, VariableType } from "../diagram/models/variable";
 
 export const AppStore = types.model("AppStore", {
   version: types.literal("1"),
   diagram: DQRoot,
   variables: types.map(Variable),
 })
+.volatile(self => ({
+  unitsManager: new UnitsManager()
+}))
 .actions(self => {
   const removeVariable = flow(function* removeVariable(variable?: VariableType) {
     if (variable) {

src/diagram/custom-math-js.test.ts

@@ -1,8 +1,9 @@
 import { createMath } from "./custom-mathjs";
-import { addCustomUnit } from "./custom-mathjs-units";
+import { UnitsManager } from "./units-manager";
 
 describe("MathJS", () => {
-  const { evaluate, unit } = createMath();
+  const unitsManager = new UnitsManager();
+  const { evaluate, unit } = createMath(unitsManager);
 
   it("can handle unit conversion with evaluate and unit values", () => {
     const scope = {
@@ -201,8 +202,8 @@ describe("MathJS", () => {
   describe("our customizations", () => {
 
     it("handles '$'", () => {
-      addCustomUnit("$");
-      const localMath = createMath();
+      unitsManager.addUnit("$");
+      const localMath = createMath(unitsManager);
       const scope = {
         a: localMath.unit(1, "m/$"),
         b: localMath.unit(1, "$")
@@ -213,8 +214,8 @@ describe("MathJS", () => {
     });
 
     it("handles units with options", () => {
-      addCustomUnit("cat", { aliases: ["cats"]});
-      const localMath = createMath();
+      unitsManager.addUnit("cat", { aliases: ["cats"]});
+      const localMath = createMath(unitsManager);
       const scope = {
         a: localMath.unit(1, "cat"),
         b: localMath.unit(2, "cats")
@@ -225,8 +226,8 @@ describe("MathJS", () => {
     });
 
     it("shares units across math instances", () => {
-      addCustomUnit("bags");
-      const localMath = createMath();
+      unitsManager.addUnit("bags");
+      const localMath = createMath(unitsManager);
       const scope = {
         a: localMath.unit(2, "bags"),
         b: localMath.unit(3, "bags")
@@ -235,7 +236,7 @@ describe("MathJS", () => {
       const simpl = result.simplify();
       expect(simpl.toString()).toEqual("5 bags");
 
-      const localMath2 = createMath();
+      const localMath2 = createMath(unitsManager);
       const result2 = localMath2.evaluate("a+b+4 bags", scope);
       const simpl2 = result2.simplify();
       expect(simpl2.toString()).toEqual("9 bags");

src/diagram/custom-mathjs.ts

@@ -3,19 +3,10 @@ import { create, simplifyDependencies, unitDependencies,
   parseDependencies, evaluateDependencies, toDependencies,
   createUnitDependencies } from "mathjs";
 
-import { customUnitsArray, deleteUnits, IUnit } from "./custom-mathjs-units";
+import { UnitsManager } from "./units-manager";
+import { IMathLib } from "./utils/mathjs-utils";
 
-export interface IMathLib {
-  simplify: math.Simplify;
-  unit: any;
-  parse: math.ParseFunction;
-  createUnit: (name: string, definition?: string | math.UnitDefinition | undefined, options?: math.CreateUnitOptions | undefined) => math.Unit;
-  evaluate: (expr: math.MathExpression | math.MathExpression[], scope?: object | undefined) => any;
-  number: (value?: string | number | boolean | math.MathArray | math.Matrix | math.Unit | math.BigNumber | math.Fraction | null | undefined) => number | math.MathArray | math.Matrix;
-  isUnit: (x: unknown) => x is math.Unit;
-  Unit: any;
-}
-function createMath(): IMathLib {
+export function createMath(unitsManager: UnitsManager): IMathLib {
   // This reduces the size of the bundle, see:
   // https://mathjs.org/docs/custom_bundling.html
   const m = create({ simplifyDependencies, unitDependencies, parseDependencies,
@@ -28,27 +19,7 @@ function createMath(): IMathLib {
   // import { create , all } from "mathjs";
   // const m = create({ all });
 
-  // The types don't give access to the Unit class object, but it is there.
-  const mathUnit = (m as any).Unit;
-
-  const isAlphaOriginal = mathUnit.isValidAlpha;
-  mathUnit.isValidAlpha = function (c: string): boolean {
-    return isAlphaOriginal(c) || c === "$";
-  };
-
-  deleteUnits.forEach((u: string) => mathUnit.deleteUnit(u));
-  customUnitsArray.forEach((u: IUnit) => {
-    // createUnit has two versions:
-    //   createUnit(name: string, definition?: string | UnitDefinition, options?: CreateUnitOptions): Unit;
-    //   createUnit(units: Record<string, string | UnitDefinition>, options?: CreateUnitOptions): Unit;
-    // If u.options is undefined and we call `m.createUnit(u.unit, u.options);` Typescript's overloading
-    // support fails for some reason. So this is split out to 2 function calls.
-    if (u.options) {
-      m.createUnit(u.unit, u.options);
-    } else {
-      m.createUnit(u.unit);
-    }
-  });
+  const mathUnit = unitsManager.initializeMath(m);
 
   return {
     simplify: m.simplify,
@@ -61,5 +32,3 @@ function createMath(): IMathLib {
     Unit: mathUnit
   };
 }
-
-export { createMath, };

src/diagram/index.ts

@@ -8,10 +8,24 @@ import { DQRoot } from "./models/dq-root";
 import { Variable, VariableSnapshot, VariableType } from "./models/variable";
 import { DiagramHelper } from "./utils/diagram-helper";
 import { useSelectMultipleVariables } from "../hooks/use-select-multiple-variables";
+import { UnitsManager } from "./units-manager";
 
 import "./components/diagram.scss";
 
 export {
-  Diagram, DiagramHelper, EditVariableDialogContent, updateVariable, DQNode, DQRoot, useSelectMultipleVariables,
-  Variable, VariableChip, VariableChipList, VariableSlider, VariableSnapshot, VariableType
+  Diagram, 
+  DiagramHelper, 
+  DQNode, 
+  DQRoot, 
+  EditVariableDialogContent,
+  UnitsManager,
+  Variable, 
+  VariableChip, 
+  VariableChipList, 
+  VariableSlider, 
+  VariableSnapshot, 
+  VariableType,
+
+  updateVariable, 
+  useSelectMultipleVariables,
 };