feat: seperation of concerns for gesture value editor, adjusting output of nodes, integration testing, css file changes, and probably much more.

ref: N25B-412

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -3,6 +3,7 @@ import styles from '../../VisProg.module.css';
 import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
 import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
+import GestureValueEditor from "./GestureValueEditor"; // Add this import
 
 type PlanEditorDialogProps = {
   plan?: Plan;
@@ -10,25 +11,6 @@ type PlanEditorDialogProps = {
   description? : string;
 };
 
-/**
- * Adds an element to a React.JSX.Element that allows for the creation and editing of plans.
- * Renders a dialog in the current screen with buttons and text fields for names, actions and other configurability.
- * @param param0: Takes in a current plan, which can be undefined and a function which is called on saving with the potential plan.
- * @returns: JSX.Element
- * @example 
- * ``` 
- * // Within a Node's default JSX Element function
- * <PlanEditorDialog
- *   plan={data.plan}
- *   onSave={(plan) => {
- *      updateNodeData(props.id, {
- *          ...data,
- *          plan,
- *      });
- *    }}
- * /> 
- * ``` 
- */
 export default function PlanEditorDialog({
   plan,
   onSave,
@@ -53,8 +35,6 @@ export default function PlanEditorDialog({
         dialogRef.current?.showModal();
     }
 
-
-    
     const openEdit = () => {
         if (!plan) return;
         setDraftPlan(structuredClone(plan));
@@ -93,9 +73,9 @@ export default function PlanEditorDialog({
 
         {/* Start of dialog (plan editor) */}
         <dialog
-            ref={dialogRef}
-            className={styles.planDialog}
-            onCancel={(e) => e.preventDefault()}
+          ref={dialogRef}
+          className={`${styles.planDialog}`}
+          onWheel={(e) => e.stopPropagation()}
         >
         <form method="dialog" className="flex-col gap-md">
             <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
@@ -124,26 +104,34 @@ export default function PlanEditorDialog({
                         {/* Type selection */}
                         <select
                             value={newActionType}
-                            onChange={(e) =>
-                                setNewActionType(e.target.value as ActionTypes)}>
+                            onChange={(e) => {
+                                setNewActionType(e.target.value as ActionTypes);
+                                // Reset value when action type changes
+                                setNewActionValue("");
+                            }}>
                         <option value="speech">Speech Action</option>
                         <option value="gesture">Gesture Action</option>
                         <option value="llm">LLM Action</option>
                         </select>
                     </label>
 
-                    {/* Action value editor */}
-                    <TextField
-                        value={newActionValue}
-                        setValue={setNewActionValue}
-
-                        // TODO: Can be done with a switch in case there's more types to come.
-                        placeholder={
-                        newActionType === "speech" ? "Speech text"
-                        : newActionType === "gesture" ? "Gesture name"
-                        : "LLM goal"
-                        }
-                    />
+                    {/* Action value editor - UPDATED SECTION */}
+                    {newActionType === "gesture" ? (
+                        <GestureValueEditor
+                          value={newActionValue}
+                          setValue={setNewActionValue}
+                          placeholder="Gesture name"
+                        />
+                    ) : (
+                        <TextField
+                            value={newActionValue}
+                            setValue={setNewActionValue}
+                            placeholder={
+                                newActionType === "speech" ? "Speech text"
+                                : "LLM goal"
+                            }
+                        />
+                    )}
             
                     {/* Adding steps */}
                     <button
@@ -177,8 +165,7 @@ export default function PlanEditorDialog({
                     )}
             
                     
-                    {/* Map over all steps, create a div for them that deletes them
-                    if clicked on and add the index, name and type. as spans */}
+                    {/* Map over all steps */}
                     {draftPlan.steps.map((step, index) => (
                         <div
                         key={step.id}
@@ -198,7 +185,7 @@ export default function PlanEditorDialog({
                   ))}
                 </div>
               </div>
-            )} {/* End Action Editor and steps shower */}
+            )}
 
             {/* Buttons */}
             <div className="flex-row gap-md">
@@ -234,4 +221,4 @@ export default function PlanEditorDialog({
       </dialog>
     </>
   );
-}
+}