PB-849: empty value bugs

frontend/src/components/ArraySelector/components/ArraySelectorTrigger/ArraySelectorTrigger.tsx

@@ -10,7 +10,7 @@ const ArraySelectorTrigger = ({
   onClick,
   icon,
 }: {
-  value: string[] | string;
+  value?: string[] | string;
   disabled: boolean
   onClick: () => void
   icon?: React.ReactNode
@@ -24,7 +24,9 @@ const ArraySelectorTrigger = ({
         ? value.slice(0, MAX_SHOWN_VALUES).join(", ")
         : value
       }
-      <span className={styles.counter}>{(value.length > MAX_SHOWN_VALUES) ? `+${(value.length - MAX_SHOWN_VALUES)}` : ""}</span>
+      {value && <span className={styles.counter}>
+        {(value.length > MAX_SHOWN_VALUES) ? `+${(value.length - MAX_SHOWN_VALUES)}` : ""}
+      </span>}
     </span>
     {!disabled && icon}
   </div>

frontend/src/components/ArraySelector/components/QubitsSelectorPopup/QubitsSelectorPopup.tsx

@@ -8,7 +8,7 @@ import { getSearchStringIndex } from "../../utils";
 type IProps = {
   open: boolean;
   onClose: () => void;
-  value: string[];
+  value?: string[];
   metadata: QubitMetadataList;
   onChange: (value: string[]) => void;
 }
@@ -87,7 +87,7 @@ const QubitsSelectorPopup = ({
     onClose();
   };
   const handleCancel = () => {
-    setSelection(value);
+    setSelection(value || []);
     onClose();
   };
 
@@ -99,7 +99,7 @@ const QubitsSelectorPopup = ({
   }, [open]);
 
   useEffect(() => {
-    setSelection(value);
+    setSelection(value || []);
   }, [value]);
 
   return <Dialog

frontend/src/components/Input/InputField.tsx

@@ -23,7 +23,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onCh
 const InputField = (props: InputProps) => {
   const {
     name = "",
-    value,
+    value = "",
     onChange,
     typeOfField,
     className,

frontend/src/components/Parameters/InputElement.tsx

@@ -21,7 +21,7 @@ const ParameterSelector = ({
   const subgraphBreadcrumbs = useSelector(getSubgraphBreadcrumbs);
   const selectedWorkflowName = useSelector(getSelectedWorkflowName);
 
-  const handleChange = (newValue: string | number | boolean) => {
+  const handleChange = (newValue: string | number | boolean | undefined) => {
     dispatch(setNodeParameter({
       paramKey: parameterKey,
       newValue,
@@ -35,16 +35,16 @@ const ParameterSelector = ({
     case "boolean":
       return (
         <Checkbox
-          checked={parameter.default as boolean}
-          onClick={() => handleChange(!parameter.default)}
+          checked={parameter.value as boolean}
+          onClick={() => handleChange(!parameter.value)}
           inputProps={{ "aria-label": "controlled" }}
         />
       );
     default:
       return (
         <InputField
           placeholder={parameterKey}
-          value={parameter.default ? parameter.default.toString() : ""}
+          value={parameter.value ? parameter.value.toString() : ""}
           onChange={handleChange}
         />
       );

frontend/src/components/Parameters/ParameterSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { Checkbox } from "@mui/material";
 import { ParamaterValue, SingleParameter } from "./Parameters";
-import { validate } from "./utils";
+import { getParameterType, validate } from "./utils";
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from "./Parameters.module.scss";
 import { NodeDTO } from "../../modules/Nodes";
@@ -22,9 +22,9 @@ const ParameterSelector = ({
   onChange: (paramKey: string, newValue: ParamaterValue, isValid: boolean, nodeId?: string | undefined) => void
 }) => {
   const [error, setError] = useState<undefined | string>(undefined);
-  const [inputValue, setInputValue] = useState(parameter.default);
+  const [inputValue, setInputValue] = useState<ParamaterValue | undefined>(parameter.value);
 
-  const handleBlur = useCallback((value: SingleParameter["default"]) => {
+  const handleBlur = useCallback((value?: ParamaterValue) => {
     const { isValid, error } = validate(parameter, value);
 
     onChange(parameterKey, value as string, isValid, node?.name);
@@ -49,7 +49,9 @@ const ParameterSelector = ({
    * time on backend, not during input. Consider adding number input with validation.
    */
   const renderInput = useCallback(() => {
-    if (parameter.type === "boolean")
+    const { type } = getParameterType(parameter);
+
+    if (type === "boolean")
       return (
         <Checkbox
           checked={inputValue as boolean}
@@ -90,11 +92,11 @@ const ParameterSelector = ({
     return (
       <InputField
         placeholder={parameterKey}
-        value={inputValue as string}
-        onChange={setInputValue}
+        value={inputValue as string || undefined}
+        onChange={(value) => setInputValue(value || undefined)}
         onBlur={() => handleBlur(inputValue)}
         className={styles.input}
-        type={["number", "integer"].includes(parameter.type) ? "number" : "string"}
+        type={["number", "integer"].includes(type) ? "number" : "string"}
         data-testid={`input-field-${parameterKey}`}
       />
     );

frontend/src/components/Parameters/Parameters.tsx

@@ -19,18 +19,19 @@ interface IProps {
   getInputElement: (key: string, parameter: SingleParameter, node?: NodeDTO | GraphWorkflow) => React.JSX.Element;
 }
 
-export type ParameterTypes = "boolean" | "number" | "integer" | "array" | "string";
-export type ParamaterValue = string | boolean | number | string[];
+export type ParameterTypes = "boolean" | "number" | "integer" | "array" | "string" | "null";
+export type ParamaterValue = string | boolean | number | string[] | undefined;
 export type QubitMetadata = { active: boolean; fidelity: number; }
 export type QubitMetadataList = Record<string, QubitMetadata>
 export interface SingleParameter {
   id?: string;
   name?: string;
   parameters?: InputParameter;
   default?: ParamaterValue;
+  value?: ParamaterValue;
   items?: { type: string };
   enum?: string[]
-  metadata?: QubitMetadataList;
+  metadata?: QubitMetadataList | null;
   options?: {
     id: string;
     title: string;
@@ -40,6 +41,9 @@ export interface SingleParameter {
   }[];
   title: string;
   type: ParameterTypes;
+  anyOf?: Array<{
+    type: ParameterTypes
+  }>
   is_targets: boolean;
   description?: string | null;
 }

frontend/src/components/Parameters/utils.ts

@@ -1,7 +1,16 @@
 import { SingleParameter } from "./Parameters";
 
+export const getParameterType = (parameter: SingleParameter) => {
+  return {
+    type: parameter.type || (parameter.anyOf || []).find(({ type }) => type !== "null")?.type,
+    allowEmpty: parameter.type === "null" || (parameter.anyOf || []).some(({ type }) => type === "null"),
+  };
+};
+
 export const validate = (parameter: SingleParameter, value: unknown) => {
-  if (value === undefined || value === "" || (Array.isArray(value) && value.length === 0)) {
+  const { type, allowEmpty } = getParameterType(parameter);
+
+  if (!allowEmpty && (value === undefined || value === null || value === "" || (Array.isArray(value) && value.length === 0))) {
     return {
       isValid: false,
       error: "Must be not empty",
@@ -10,9 +19,9 @@ export const validate = (parameter: SingleParameter, value: unknown) => {
 
   const num = Number(value);
 
-  switch (parameter.type) {
+  switch (type) {
     case "number":
-      if (isNaN(num)) {
+      if (!allowEmpty && isNaN(num)) {
         return {
           isValid: false,
           error: "Must be a number"
@@ -21,7 +30,7 @@ export const validate = (parameter: SingleParameter, value: unknown) => {
       return { isValid: true, error: undefined };
 
     case "integer":
-      if (isNaN(num) || !Number.isInteger(num)) {
+      if (!allowEmpty && (isNaN(num) || !Number.isInteger(num))) {
         return {
           isValid: false,
           error: "Must be an integer"

frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx

@@ -149,7 +149,7 @@ export const NodeElement: React.FC<{ nodeKey: string }> = ({ nodeKey }) => {
    * (title, type, description). Triggers a full NodesContext state update,
    * causing re-render of all consumers.
    */
-  const updateParameter = (paramKey: string, newValue: boolean | number | string | string[], isValid: boolean) => {
+  const updateParameter = (paramKey: string, newValue: boolean | number | string | string[] | undefined, isValid: boolean) => {
     handleSetError(paramKey, isValid);
     dispatch(setNodeParameter({ nodeKey, paramKey, newValue }));
   };

frontend/src/modules/Nodes/components/RunningJob/RunningJobParameters.tsx

@@ -18,7 +18,7 @@ export const RunningJobParameters: React.FC = () => {
               <div key={key} className={styles.parameterValues} data-testid={`parameter-item-${key}`}>
                 <div className={styles.parameterLabel} data-testid={`parameter-label-${key}`}
                 >{parameter.title}:</div>
-                <div className={styles.parameterValue} data-testid={`parameter-value-${key}`}>{parameter.default?.toString()}</div>
+                <div className={styles.parameterValue} data-testid={`parameter-value-${key}`}>{parameter.value?.toString()}</div>
               </div>
             ))
           }

frontend/src/stores/GraphStores/GraphLibrary/GraphLibraryStore.ts

@@ -73,6 +73,16 @@ export const graphLibrarySlice = createSlice({
   reducers: {
     setAllGraphs: (state, action) => {
       state.allGraphs = action.payload;
+
+      const applyDefaultValue = (workflow?: GraphMap) =>
+        Object.values(workflow || {}).map(graph => {
+          Object.values(graph.parameters || {}).map(parameter =>
+            parameter.value = parameter.default
+          );
+          graph.nodes && applyDefaultValue(graph.nodes);
+        });
+
+      applyDefaultValue(state.allGraphs);
     },
     setSelectedWorkflowName: (state, action) => {
       state.selectedWorkflowName = action.payload;
@@ -94,7 +104,7 @@ export const graphLibrarySlice = createSlice({
     },
     setNodeParameter: (state, action: PayloadAction<{
       paramKey: string
-      newValue: boolean | number | string | string[]
+      newValue: boolean | number | string | string[] | undefined
       nodeId?: string
       selectedWorkflowName?: string
       subgraphBreadcrumbs: string[]
@@ -114,7 +124,7 @@ export const graphLibrarySlice = createSlice({
       }
 
       if (graph.parameters)
-        graph.parameters[paramKey].default = newValue;
+        graph.parameters[paramKey].value = newValue;
     },
     setErrorObject: (state, action) => {
       state.errorObject = action.payload;

frontend/src/stores/GraphStores/GraphLibrary/actions.ts

@@ -120,7 +120,7 @@ export const submitWorkflow = () => async (dispatch: RootDispatch, getState: ()
     if (!params) return transformedParams;
 
     for (const key in params) {
-      transformedParams = { ...transformedParams, [key]: params[key].default };
+      transformedParams = { ...transformedParams, [key]: params[key].value };
     }
     return transformedParams;
   };
@@ -168,7 +168,7 @@ export const submitWorkflow = () => async (dispatch: RootDispatch, getState: ()
   }
 };
 
-export const setGraphNodeParameter = (paramKey: string, newValue: boolean | number | string | string[], nodeId?: string) =>
+export const setGraphNodeParameter = (paramKey: string, newValue: boolean | number | string | string[] | undefined, nodeId?: string) =>
   (dispatch: RootDispatch, getState: () => RootState) => {
     const subgraphBreadcrumbs = getSubgraphBreadcrumbs(getState());
     const selectedWorkflowName = getSelectedWorkflowName(getState());

frontend/src/stores/NodesStore/NodesStore.ts

@@ -109,11 +109,16 @@ export const nodesSlice = createSlice({
     },
     setAllNodes: (state, action) => {
       state.allNodes = action.payload;
+      Object.values(state.allNodes || {}).map((node) =>
+        Object.values(node.parameters || {}).map(parameter =>
+          parameter.value = parameter.default
+        )
+      );
     },
     setNodeParameter: (state, action) => {
       const { nodeKey, paramKey, newValue } = action.payload;
       if (state.allNodes && state.allNodes[nodeKey].parameters)
-        state.allNodes[nodeKey].parameters[paramKey].default = newValue;
+        state.allNodes[nodeKey].parameters[paramKey].value = newValue;
     },
     setIsNodeRunning: (state, action) => {
       state.isNodeRunning = action.payload;

frontend/src/stores/NodesStore/actions.ts

@@ -190,10 +190,10 @@ const formatDate = (date: Date) => {
 const transformInputParameters = (parameters: InputParameter) => {
   return Object.entries(parameters).reduce(
     (acc, [key, parameter]) => {
-      acc[key] = parameter.default ?? null;
+      acc[key] = parameter.value ?? null;
       return acc;
     },
-    {} as { [key: string]: boolean | number | string | null | string[] }
+    {} as { [key: string]: boolean | number | string | null | string[] | undefined }
   );
 };
 

frontend/src/stores/NodesStore/api/NodesAPI.tsx

@@ -30,7 +30,7 @@ export class NodesApi extends Api {
   static submitNodeParameters(
     nodeName: string,
     inputParameter: {
-      [key: string]: string | number | boolean | null | string[];
+      [key: string]: string | number | boolean | null | string[] | undefined;
     }
   ): Promise<Res<void>> {
     return this._fetch(this.api(SUBMIT_NODE_RUN()), API_METHODS.POST, {

frontend/tests/unit/components/NodeElement/NodeElement.test.tsx

@@ -122,6 +122,7 @@ describe("NodeElement - Execution", () => {
     parameters: {
       resonator: {
         default: "q1.resonator",
+        value: "q1.resonator",
         title: "Resonator",
         type: "string" as ParameterTypes,
         is_targets: false

frontend/tests/unit/modules/Graph/GraphElement.test.tsx

@@ -121,7 +121,6 @@ describe("GraphElement - Parameter Management", () => {
     });
     //TODO: mock WebSocket event
     mockStore.dispatch(setSelectedWorkflowName("test_workflow"));
-    mockStore.dispatch(setAllGraphs({ test_workflow: mockGraph }));
 
     render(
       <Providers>
@@ -163,7 +162,7 @@ describe("GraphElement - Parameter Management", () => {
     // Verify setAllGraphs was called with updated parameters
     await waitFor(() => {
       expect(getAllGraphs(mockStore.getState())?.test_workflow.parameters?.frequency)
-          .toHaveProperty("default", "6.5");
+          .toHaveProperty("value", "6.5");
     });
   });