feat: initial commit - adding a plan to phases and different ui for phase order editing

ref: N25B-451

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css

@@ -6,7 +6,6 @@
   overscroll-behavior: contain;
 }
 
-
 .planDialog::backdrop {
   background: rgba(0, 0, 0, 0.4);
 }
@@ -68,4 +67,17 @@
   font-style: italic;
 }
 
+.dragHandle {
+  margin-left: auto;
+  cursor: grab;
+  opacity: 0.5;
+  user-select: none;
+}
 
+.dragHandle:active {
+  cursor: grabbing;
+}
+
+.planStepDragging {
+  opacity: 0.4;
+}

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

@@ -6,16 +6,26 @@ import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
 import GestureValueEditor from "./GestureValueEditor"; 
 
+/**
+ * The properties of a plan editor.
+ * @property plan: The optional plan loaded into this editor.
+ * @property onSave: The function that will be called upon save.
+ * @property description: Optional description which is already set.
+ * @property onlyEditPhasing: Optional boolean to toggle
+ * whether or not this editor is part of the phase editing.
+ */
 type PlanEditorDialogProps = {
   plan?: Plan;
   onSave: (plan: Plan | undefined) => void;
   description? : string;
+  onlyEditPhasing? : boolean;
 };
 
 export default function PlanEditorDialog({
   plan,
   onSave,
   description,
+  onlyEditPhasing = false,
 }: PlanEditorDialogProps) {
   // UseStates and references
   const dialogRef = useRef<HTMLDialogElement | null>(null);
@@ -24,6 +34,7 @@ export default function PlanEditorDialog({
   const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
   const [newActionValue, setNewActionValue] = useState("");
   const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const { setScrollable } = useFlowStore();
   const nodes = useFlowStore().nodes;
 
@@ -89,9 +100,9 @@ export default function PlanEditorDialog({
         data-testid={"PlanEditorDialogTestID"}
       >
       <form method="dialog" className="flex-col gap-md">
-          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          <h3> {onlyEditPhasing ? "Editing Phase Ordering" : (draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan")} </h3>
           {/* Plan name text field */}
-          {draftPlan && (
+          {(draftPlan && !onlyEditPhasing) && (
               <TextField
                   value={draftPlan.name}
                   setValue={(name) =>
@@ -104,12 +115,14 @@ export default function PlanEditorDialog({
           {draftPlan && (<div className={styles.planEditor}>
               <div className={styles.planEditorLeft}>
               {/* Left Side (Action Adder) */}
-                  <h4>Add Action</h4>
+                  <h4>{onlyEditPhasing ? "You can't add any actions, only rearrange the steps." : "Add Action"}</h4>
                   {(!plan && description && draftPlan.steps.length === 0 && !hasInteractedWithPlan) && (<div className={styles.stepSuggestion}>
                       <label> Filled in as a suggestion! </label>
                       <label> Feel free to change! </label>
                   </div>)}
-                  <label>
+                
+                    
+                    {(!onlyEditPhasing) && (<label>
                       Action Type <wbr />
                       {/* Type selection */}
                       <select
@@ -123,10 +136,10 @@ export default function PlanEditorDialog({
                       <option value="gesture">Gesture Action</option>
                       <option value="llm">LLM Action</option>
                       </select>
-                  </label>
+                    </label>)}
 
                     {/* Action value editor*/}
-                  {newActionType === "gesture" ? (
+                    {!onlyEditPhasing && newActionType === "gesture" ? (
                       // Gesture get their own editor component
                       <GestureValueEditor
                         value={newActionValue}
@@ -134,15 +147,18 @@ export default function PlanEditorDialog({
                         setType={setNewActionGestureType}
                         placeholder="Gesture name"
                       />
-                  ) : (
-                      <TextField
+                    ) 
+                    :
+                    // Only show the text field if we're not just rearranging.
+                    (!onlyEditPhasing &&
+                      (<TextField
                           value={newActionValue}
                           setValue={setNewActionValue}
                           placeholder={
                               newActionType === "speech" ? "Speech text"
                               : "LLM goal"
                           }
-                      />
+                      />)
                     )}
                 
                   {/* Adding steps */}

src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts

@@ -10,4 +10,5 @@ export const PhaseNodeDefaults: PhaseNodeData = {
   hasReduce: true,
   nextPhaseId: null,
   isFirstPhase: false,
+  plan: undefined,
 };

src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx

@@ -10,6 +10,11 @@ import {allowOnlyConnectionsFromType, noSelfConnections} from "../HandleRules.ts
 import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
+import PlanEditorDialog from '../components/PlanEditor.tsx';
+import type { Plan } from '../components/Plan.tsx';
+import { insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/Plan.default.ts';
+import type { GoalNode } from './GoalNode.tsx';
 
 /**
  * The default data dot a phase node
@@ -26,6 +31,7 @@ export type PhaseNodeData = {
   hasReduce: boolean;
   nextPhaseId: string | "end" | null;
   isFirstPhase: boolean;
+  plan?: Plan;
 };
 
 export type PhaseNode = Node<PhaseNodeData>
@@ -54,6 +60,24 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
             placeholder={"Phase ..."}
           />
         </div>
+
+
+        {(data.plan && data.plan.steps.length > 0) && (<div>
+          <PlanEditorDialog
+                    plan={data.plan}
+                    onSave={(plan) => {
+                      updateNodeData(props.id, {
+                        ...data,
+                        plan,
+                      });
+                    }} 
+                    description={props.data.label}
+                    onlyEditPhasing={true}
+          />
+        </div>)}
+
+
+
         <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
           noSelfConnections,
           allowOnlyConnectionsFromType(["phase", "start"]),
@@ -129,9 +153,9 @@ export const PhaseTooltip = `
  */
 export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
   const data = _thisNode.data as PhaseNodeData
-
   const nodes = useFlowStore.getState().nodes;
   const sourceNode = nodes.find((node) => node.id === _sourceNodeId)!
+
   switch (sourceNode.type) {
     case "phase": break;
     case "start": data.isFirstPhase = true; break;
@@ -139,6 +163,18 @@ export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
     // endNodes cannot be the source of an outgoing connection
     // so we don't need to cover them with a special case
     // before handling the default behavior
+    case "goal": {
+        // First, let's see if we have a plan currently. If not, let's create a default plan with this goal inside.:)
+        if (!data.plan) {
+          data.plan = insertGoalInPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()} as Plan, sourceNode as GoalNode)
+        }
+        
+        // Else, lets just insert this goal into our current plan.
+        else {
+          data.plan = insertGoalInPlan(structuredClone(data.plan), sourceNode as GoalNode)
+        }
+        break;
+    }
     default: data.children.push(_sourceNodeId); break;
   }
 }