From 547257f3aec09b61f61dab003318ef0b2cfda45a Mon Sep 17 00:00:00 2001
From: leslie <leslieyip02@gmail.com>
Date: Wed, 8 Apr 2026 00:40:04 +0800
Subject: [PATCH 1/2] feat: add minimal equation tooltip

---
 .../inspector/equation/EquationFieldSet.tsx   | 42 ++++++++++++++++++-
 server/sim/functions.go                       |  4 +-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/client/src/views/inspector/equation/EquationFieldSet.tsx b/client/src/views/inspector/equation/EquationFieldSet.tsx
index b192b9b..2d042da 100644
--- a/client/src/views/inspector/equation/EquationFieldSet.tsx
+++ b/client/src/views/inspector/equation/EquationFieldSet.tsx
@@ -1,7 +1,9 @@
 import { useRef } from "react";
+import { LuCircleHelp } from "react-icons/lu";
 
 import { Field, FieldLabel, FieldSet } from "@/components/ui/field";
 import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Flow, Node } from "@/models/graph";
 import { useEquationController } from "@/utils/useEquationController";
 import { useOutsideClickHandler } from "@/utils/useOutsideClickHandler";
@@ -32,7 +34,45 @@ export function EquationFieldSet({
         <>
             <FieldSet>
                 <Field>
-                    <FieldLabel>Equation</FieldLabel>
+                    <FieldLabel>
+                        Equation
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <LuCircleHelp />
+                            </TooltipTrigger>
+                            <TooltipContent className="flex flex-col gap-2">
+                                <div className="space-y-1">
+                                    <code className="font-semibold">
+                                        IF(cond, trueValue, falseValue)
+                                    </code>
+                                    <p className="text-sm text-muted-foreground">
+                                        Returns <code className="text-gray-400">trueValue</code> if{" "}
+                                        <code className="text-gray-400">cond</code> is true,
+                                        otherwise <code className="text-gray-400">falseValue</code>.
+                                    </p>
+                                </div>
+
+                                <div className="space-y-1">
+                                    <code className="font-semibold">STEP(value, targetTime)</code>
+                                    <p className="text-sm text-muted-foreground">
+                                        Returns <code className="text-gray-400">value</code> when{" "}
+                                        <code className="text-gray-400">targetTime</code> ≥ current
+                                        time, otherwise 0.
+                                    </p>
+                                </div>
+
+                                <div className="space-y-1">
+                                    <code className="font-semibold">
+                                        LOOKUP(target, x1, ..., xn, y1, ..., yn)
+                                    </code>
+                                    <p className="text-sm text-muted-foreground">
+                                        Performs piecewise linear interpolation for{" "}
+                                        <code className="text-gray-400">target</code>.
+                                    </p>
+                                </div>
+                            </TooltipContent>
+                        </Tooltip>
+                    </FieldLabel>
                     <Textarea
                         name="equation"
                         className={`
diff --git a/server/sim/functions.go b/server/sim/functions.go
index d86298f..64b53aa 100644
--- a/server/sim/functions.go
+++ b/server/sim/functions.go
@@ -1,6 +1,6 @@
 package sim
 
-// IF returns trueValue when cond is true and false otherwise
+// IF returns trueValue when cond is true and falseValue otherwise
 func IF(cond bool, trueValue float64, falseValue float64) float64 {
 	if cond {
 		return trueValue
@@ -8,7 +8,7 @@ func IF(cond bool, trueValue float64, falseValue float64) float64 {
 	return falseValue
 }
 
-// STEP returns the value if targetTime >= the environment's current time
+// STEP returns value if targetTime >= the environment's current time
 func STEP(value float64, targetTime float64, env RuntimeEnv) float64 {
 	currentTime, ok := env["currentTime"].(float64)
 	if !ok {

From 7f670596840cdc80b9a682106fc65d1fa1845b61 Mon Sep 17 00:00:00 2001
From: leslie <leslieyip02@gmail.com>
Date: Wed, 8 Apr 2026 10:00:44 +0800
Subject: [PATCH 2/2] fix: update styles

---
 .../inspector/equation/EquationFieldSet.tsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/views/inspector/equation/EquationFieldSet.tsx b/client/src/views/inspector/equation/EquationFieldSet.tsx
index 2d042da..864f7a5 100644
--- a/client/src/views/inspector/equation/EquationFieldSet.tsx
+++ b/client/src/views/inspector/equation/EquationFieldSet.tsx
@@ -40,23 +40,23 @@ export function EquationFieldSet({
                             <TooltipTrigger asChild>
                                 <LuCircleHelp />
                             </TooltipTrigger>
-                            <TooltipContent className="flex flex-col gap-2">
+                            <TooltipContent className="flex flex-col gap-2 ml-2">
                                 <div className="space-y-1">
                                     <code className="font-semibold">
                                         IF(cond, trueValue, falseValue)
                                     </code>
-                                    <p className="text-sm text-muted-foreground">
-                                        Returns <code className="text-gray-400">trueValue</code> if{" "}
-                                        <code className="text-gray-400">cond</code> is true,
-                                        otherwise <code className="text-gray-400">falseValue</code>.
+                                    <p className="text-sm text-background/70">
+                                        Returns <code className="text-gray-200">trueValue</code> if{" "}
+                                        <code className="text-gray-200">cond</code> is true,
+                                        otherwise <code className="text-gray-200">falseValue</code>.
                                     </p>
                                 </div>
 
                                 <div className="space-y-1">
                                     <code className="font-semibold">STEP(value, targetTime)</code>
-                                    <p className="text-sm text-muted-foreground">
-                                        Returns <code className="text-gray-400">value</code> when{" "}
-                                        <code className="text-gray-400">targetTime</code> ≥ current
+                                    <p className="text-sm text-background/70">
+                                        Returns <code className="text-gray-200">value</code> when{" "}
+                                        <code className="text-gray-200">targetTime</code> ≥ current
                                         time, otherwise 0.
                                     </p>
                                 </div>
@@ -65,9 +65,9 @@ export function EquationFieldSet({
                                     <code className="font-semibold">
                                         LOOKUP(target, x1, ..., xn, y1, ..., yn)
                                     </code>
-                                    <p className="text-sm text-muted-foreground">
+                                    <p className="text-sm text-background/70">
                                         Performs piecewise linear interpolation for{" "}
-                                        <code className="text-gray-400">target</code>.
+                                        <code className="text-gray-200">target</code>.
                                     </p>
                                 </div>
                             </TooltipContent>