CE-1482: POC of workflow library

src/qqq/components/workflows/RootEditor.tsx

@@ -0,0 +1,21 @@
+import {ChangeEvent} from "react";
+import {useRootEditor} from "sequential-workflow-designer-react";
+import {WorkflowDefinition} from "./model";
+
+export function RootEditor()
+{
+   const {properties, setProperty, isReadonly} = useRootEditor<WorkflowDefinition>();
+
+   function onAlfaChanged(e: ChangeEvent)
+   {
+      setProperty("alfa", (e.target as HTMLInputElement).value);
+   }
+
+   return (
+      <>
+         <h2>Optimization Workflow Editor</h2>
+
+         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </>
+   );
+}

src/qqq/components/workflows/StepEditor.tsx

@@ -0,0 +1,69 @@
+import {ChangeEvent} from "react";
+import {useStepEditor} from "sequential-workflow-designer-react";
+import {SwitchStep, TaskStep, WarehouseOptimizationStep} from "./model";
+
+export function StepEditor()
+{
+   const {type, name, step, properties, isReadonly, setName, setProperty, notifyPropertiesChanged, notifyChildrenChanged} =
+      useStepEditor<TaskStep | SwitchStep | WarehouseOptimizationStep>();
+
+   function onNameChanged(e: ChangeEvent)
+   {
+      setName((e.target as HTMLInputElement).value);
+   }
+
+   function onXChanged(e: ChangeEvent)
+   {
+      setProperty("warehouse", (e.target as HTMLInputElement).value);
+   }
+
+   function onYChanged(e: ChangeEvent)
+   {
+      properties["wmsConnection"] = (e.target as HTMLInputElement).value;
+      notifyPropertiesChanged();
+   }
+
+   function toggleExtraBranch()
+   {
+      const switchStep = step as SwitchStep;
+      if (switchStep.branches["extra"])
+      {
+         delete switchStep.branches["extra"];
+      }
+      else
+      {
+         switchStep.branches["extra"] = [];
+      }
+      notifyChildrenChanged();
+   }
+
+   return (
+      <>
+         <h2>Step Editor</h2>
+         <h3>{type}</h3>
+
+         <h4>Pre-Script</h4>
+         <select>
+            <option>Pre Script #1</option>
+            <option>Pre Script #2</option>
+            <option>Pre Script #3</option>
+         </select>
+
+         <h4>Post-Script</h4>
+         <select>
+            <option>Post Script #1</option>
+            <option>Post Script #2</option>
+            <option>Post Script #3</option>
+         </select>
+
+         {type === "switch" && (
+            <>
+               <h4>Extra branch</h4>
+               <button onClick={toggleExtraBranch} disabled={isReadonly}>
+                  Toggle branch
+               </button>
+            </>
+         )}
+      </>
+   );
+}

src/qqq/components/workflows/StepUtils.ts

@@ -0,0 +1,214 @@
+import {Branches, Uid} from "sequential-workflow-designer";
+import {ContainerStep, OptimizationStepType, SwitchStep, TaskStep, WarehouseOptimizationStep} from "./model";
+
+export function createTaskStep(): TaskStep
+{
+   return {
+      id: Uid.next(),
+      componentType: "task",
+      type: "task",
+      name: "blah",
+      properties: {}
+   };
+}
+
+
+//////////////////////
+// define all steps //
+//////////////////////
+export function createDetermineWarehouseRoutingStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine Warehouse", "determineWarehouseRouting");
+}
+
+export function createDetermineLineHaulLaneStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine Line Haul Lane", "determineLineHaulLane");
+}
+
+export function createValidateLineItemsStep(): WarehouseOptimizationStep
+{
+   return createStep("Validate Line Items", "validateLineItems");
+}
+
+export function createDetermineCoolingCategoryStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine Cooling Category", "determineCoolingCategory");
+}
+
+export function createValidateOptimizationRulesStep(): WarehouseOptimizationStep
+{
+   return createStep("Validate Optimization Rules", "validateOptimizationRules");
+}
+
+export function createValidateAddressStep(): WarehouseOptimizationStep
+{
+   return createStep("Validate Address", "validateAddress");
+}
+
+export function createDetermineCarrierServiceStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine Carrier Service", "determineCarrierService");
+}
+
+export function createDetermineTNTStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine TNT ", "determineTNT");
+}
+
+export function createDetermineOrderServiceDatesStep(): WarehouseOptimizationStep
+{
+   return createStep("Determine Order Service Dates ", "determineOrderServiceDates");
+}
+
+export function createOrderMatchesFilterSelectorStep(): WarehouseOptimizationStep
+{
+   return createStep("Order Matches Filter Selector", "orderMatchesFilterSelector");
+}
+
+
+////////////////////////
+// define all outputs //
+////////////////////////
+export function createDetermineWarehouseRoutingOuptut(): SwitchStep
+{
+   return (createOutput("Output", {Edison: [], Patterson: [], Stockton: []}));
+}
+
+export function createDetermineLineHaulLaneOutput(): SwitchStep
+{
+   return (createOutput("Output", {Chicago: [], Dallas: [], Sheboygan: []}));
+}
+
+export function createValidateLineItemsOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
+}
+
+export function createDetermineCoolingCategoryOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Ambient": [], "Frozen": [], "Other": []}));
+}
+
+export function createValidateOptimizationRulesOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
+}
+
+export function createAddressValidationOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
+}
+
+export function createDetermineCarrierServiceOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Fedex Ground": [], "UPS Ground": [], "OnTrac Ground": []}));
+}
+
+export function createDetermineTNTOutput(): SwitchStep
+{
+   return (createOutput("Output", {1: [], 2: [], 3: [], "4+": []}));
+}
+
+export function createDetermineOrderServiceDatesOutput(): SwitchStep
+{
+   return (createOutput("Output", {Monday: [], Tuesday: [], Wednesday: []}));
+}
+
+export function createOrderMatchesFilterSelectorOutput(): SwitchStep
+{
+   return (createOutput("Output", {"Matches": [], "No Match": []}));
+}
+
+
+//////////////////////////////
+// groups of steps + output //
+//////////////////////////////
+export function createDetermineWarehouseRoutingGroup(): ContainerStep
+{
+   return (createGroup("Determine Warehouse Routing", [createDetermineWarehouseRoutingStep(), createDetermineWarehouseRoutingOuptut()]));
+}
+
+export function createDetermineLineHaulLaneGroup(): ContainerStep
+{
+   return (createGroup("Determine Line Haul Lane", [createDetermineLineHaulLaneStep(), createDetermineLineHaulLaneOutput()]));
+}
+
+export function createValidateLineItemsGroup(): ContainerStep
+{
+   return (createGroup("Validate Line Items", [createValidateLineItemsStep(), createValidateLineItemsOutput()]));
+}
+
+export function createDetermineCoolingCategoryGroup(): ContainerStep
+{
+   return (createGroup("Determine Cooling Category", [createDetermineCoolingCategoryStep(), createDetermineCoolingCategoryOutput()]));
+}
+
+export function createValidateOptimizationRulesGroup(): ContainerStep
+{
+   return (createGroup("Validate Optimization Rules", [createValidateOptimizationRulesStep(), createValidateOptimizationRulesOutput()]));
+}
+
+export function createValidateAddressGroup(): ContainerStep
+{
+   return (createGroup("Validate Address", [createValidateAddressStep(), createAddressValidationOutput()]));
+}
+
+export function createDetermineCarrierServiceGroup(): ContainerStep
+{
+   return (createGroup("Determine Carrier Service", [createDetermineCarrierServiceStep(), createDetermineCarrierServiceOutput()]));
+}
+
+export function createDetermineTNTGroup(): ContainerStep
+{
+   return (createGroup("Determine TNT", [createDetermineTNTStep(), createDetermineTNTOutput()]));
+}
+
+export function createDetermineOrderServiceDatesGroup(): ContainerStep
+{
+   return (createGroup("Determine Order Service Dates", [createDetermineOrderServiceDatesStep(), createDetermineOrderServiceDatesOutput()]));
+}
+
+export function createOrderMatchesFilterSelector(): ContainerStep
+{
+   return (createGroup("Order Matches Filter Selector", [createOrderMatchesFilterSelectorStep(), createOrderMatchesFilterSelectorOutput()]));
+}
+
+
+///////////
+// utils //
+///////////
+export function createStep(name: string, type: OptimizationStepType): WarehouseOptimizationStep
+{
+   return {
+      id: Uid.next(),
+      componentType: "task",
+      type: type,
+      name: name,
+      properties: {}
+   };
+}
+
+export function createOutput(name: string, branches: Branches): SwitchStep
+{
+   return {
+      id: Uid.next(),
+      componentType: "switch",
+      type: "switch",
+      name: name,
+      properties: {},
+      branches: branches
+   };
+}
+
+export function createGroup(name: string, sequence: (WarehouseOptimizationStep | SwitchStep)[]): ContainerStep
+{
+   return {
+      id: Uid.next(),
+      componentType: "container",
+      type: "container",
+      name: name,
+      properties: {},
+      sequence: sequence
+   };
+}

src/qqq/components/workflows/WorkflowEditor.tsx

@@ -0,0 +1,187 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
+import {ToggleButtonGroup, Typography} from "@mui/material";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Snackbar from "@mui/material/Snackbar";
+import TextField from "@mui/material/TextField";
+import FormData from "form-data";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import WorkflowPreview from "qqq/components/workflows/WorkflowPreview";
+import Client from "qqq/utils/qqq/Client";
+import React, {useReducer, useState} from "react";
+
+export interface WorkflowEditorProps
+{
+   title: string;
+   workflowId: number;
+   contents: string;
+   closeCallback: any;
+}
+
+
+const qController = Client.getInstance();
+
+function WorkflowEditor({title, workflowId, contents, closeCallback}: WorkflowEditorProps): JSX.Element
+{
+   const [closing, setClosing] = useState(false);
+   const [updatedCode, setUpdatedCode] = useState(contents);
+   const [commitMessage, setCommitMessage] = useState("");
+   const [openTool, setOpenTool] = useState(null);
+   const [errorAlert, setErrorAlert] = useState("");
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   const changeOpenTool = (event: React.MouseEvent<HTMLElement>, newValue: string | null) =>
+   {
+      setOpenTool(newValue);
+
+      /////////////////////////////////////////////////
+      // need this to make Ace recognize new height. //
+      /////////////////////////////////////////////////
+      setTimeout(() =>
+      {
+         window.dispatchEvent(new Event("resize"));
+      }, 100);
+   };
+
+   const saveClicked = () =>
+   {
+      try
+      {
+         JSON.parse(updatedCode);
+      }
+      catch (e)
+      {
+         setErrorAlert("Cannot save Workflow Contents.  Invalid json:  " + e);
+         return;
+      }
+
+      setClosing(true);
+
+      (async () =>
+      {
+         const formData = new FormData();
+         formData.append("workflowId", workflowId);
+         formData.append("contents", updatedCode);
+         formData.append("commitMessage", commitMessage);
+
+         //////////////////////////////////////////////////////////////////
+         // we don't want this job to go async, so, pass a large timeout //
+         //////////////////////////////////////////////////////////////////
+         formData.append("_qStepTimeoutMillis", 60 * 1000);
+
+         const formDataHeaders = {
+            "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
+         };
+
+         const processResult = await qController.processInit("storeWorkflowVersionProcess", formData, formDataHeaders);
+         if (processResult instanceof QJobError)
+         {
+            const jobError = processResult as QJobError;
+            closeCallback(null, "failed", jobError.userFacingError ?? jobError.error);
+         }
+         console.log("process result");
+         console.log(processResult);
+
+         closeCallback(null, "saved", "Saved New Workflow Version");
+      })();
+   };
+
+   const cancelClicked = () =>
+   {
+      setClosing(true);
+      closeCallback(null, "cancelled");
+   };
+
+   const updateCode = (value: string, event: any) =>
+   {
+      console.log("Updating code");
+      setUpdatedCode(value);
+      forceUpdate();
+   };
+
+   const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
+   {
+      setCommitMessage(event.target.value);
+   };
+
+   return (
+      <Box sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
+         <Card sx={{height: "100%", p: 3}}>
+
+            <Snackbar open={errorAlert !== null && errorAlert !== ""} onClose={(event?: React.SyntheticEvent | Event, reason?: string) =>
+            {
+               if (reason === "clickaway")
+               {
+                  return;
+               }
+               setErrorAlert("");
+            }} anchorOrigin={{vertical: "top", horizontal: "center"}}>
+               <Alert color="error" onClose={() => setErrorAlert("")}>
+                  {errorAlert}
+               </Alert>
+            </Snackbar>
+
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+               <Typography variant="h5" pb={1}>
+                  {title}
+               </Typography>
+
+               <Box>
+                  <Typography variant="body2" display="inline" pr={1}>
+                     Tools:
+                  </Typography>
+                  <ToggleButtonGroup
+                     value={openTool}
+                     exclusive
+                     onChange={changeOpenTool}
+                     size="small"
+                     sx={{pb: 1}}
+                  >
+                  </ToggleButtonGroup>
+               </Box>
+            </Box>
+
+            <Box sx={{height: openTool ? "45%" : "100%"}}>
+               <WorkflowPreview />
+            </Box>
+
+            <Box pt={1}>
+               <Grid container alignItems="flex-end">
+                  <Box width="50%">
+                     <TextField id="commitMessage" label="Commit Message" variant="standard" fullWidth value={commitMessage} onChange={updateCommitMessage} />
+                  </Box>
+                  <Grid container justifyContent="flex-end" spacing={3}>
+                     <QCancelButton disabled={closing} onClickHandler={cancelClicked} />
+                     <QSaveButton disabled={closing} onClickHandler={saveClicked} />
+                  </Grid>
+               </Grid>
+            </Box>
+         </Card>
+      </Box>
+   );
+}
+
+export default WorkflowEditor;

src/qqq/components/workflows/WorkflowPreview.tsx

@@ -0,0 +1,199 @@
+import {useEffect, useMemo, useState} from "react";
+import {ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration} from "sequential-workflow-designer";
+import {SequentialWorkflowDesigner, useSequentialWorkflowDesignerController, wrapDefinition} from "sequential-workflow-designer-react";
+import {WorkflowDefinition} from "./model";
+import {RootEditor} from "./RootEditor";
+import {StepEditor} from "./StepEditor";
+import {createDetermineCarrierServiceGroup, createDetermineCoolingCategoryGroup, createDetermineLineHaulLaneGroup, createDetermineOrderServiceDatesGroup, createDetermineTNTGroup, createDetermineWarehouseRoutingGroup, createOrderMatchesFilterSelector, createTaskStep, createValidateAddressGroup, createValidateLineItemsGroup, createValidateOptimizationRulesGroup} from "./StepUtils";
+
+const startDefinition: WorkflowDefinition = {
+   properties: {
+      alfa: "bravo"
+   },
+   sequence: []
+};
+
+
+function WorkflowPreview()
+{
+   const controller = useSequentialWorkflowDesignerController();
+   const toolboxConfiguration: ToolboxConfiguration = useMemo(
+      () => ({
+         groups: [{
+            name: "Optimization Steps", steps: [
+               createDetermineCarrierServiceGroup(),
+               createDetermineCoolingCategoryGroup(),
+               createDetermineLineHaulLaneGroup(),
+               createDetermineOrderServiceDatesGroup(),
+               createDetermineTNTGroup(),
+               createDetermineWarehouseRoutingGroup()
+            ]
+         },
+         {
+            name: "Validators", steps: [
+               createValidateAddressGroup(),
+               createValidateLineItemsGroup(),
+               createValidateOptimizationRulesGroup()
+            ]
+         },
+         {
+            name: "Utilities", steps: [
+               createOrderMatchesFilterSelector()
+            ]
+         }
+         ]
+      }),
+      []
+   );
+   const stepsConfiguration: StepsConfiguration = useMemo(
+      () => ({
+         iconUrlProvider: () => null
+      }),
+      []
+   );
+   const validatorConfiguration: ValidatorConfiguration = useMemo(
+      () => ({
+         step: (step: Step) => Boolean(step.name),
+         root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa)
+      }),
+      []
+   );
+
+   const [isVisible, setIsVisible] = useState(true);
+   const [isToolboxCollapsed, setIsToolboxCollapsed] = useState(false);
+   const [isEditorCollapsed, setIsEditorCollapsed] = useState(false);
+   const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
+   const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
+   const [isReadonly, setIsReadonly] = useState(false);
+   const [moveViewportToStep, setMoveViewportToStep] = useState<string | null>(null);
+   const definitionJson = JSON.stringify(definition.value, null, 2);
+
+   useEffect(() =>
+   {
+      console.log(`definition updated, isValid=${definition.isValid}`);
+   }, [definition]);
+
+   useEffect(() =>
+   {
+      if (moveViewportToStep)
+      {
+         if (controller.isReady())
+         {
+            controller.moveViewportToStep(moveViewportToStep);
+         }
+         setMoveViewportToStep(null);
+      }
+   }, [controller, moveViewportToStep]);
+
+   function toggleVisibilityClicked()
+   {
+      setIsVisible(!isVisible);
+   }
+
+   function toggleSelectionClicked()
+   {
+      const id = definition.value.sequence[0].id;
+      setSelectedStepId(selectedStepId ? null : id);
+   }
+
+   function toggleIsReadonlyClicked()
+   {
+      setIsReadonly(!isReadonly);
+   }
+
+   function toggleToolboxClicked()
+   {
+      setIsToolboxCollapsed(!isToolboxCollapsed);
+   }
+
+   function toggleEditorClicked()
+   {
+      setIsEditorCollapsed(!isEditorCollapsed);
+   }
+
+   function moveViewportToFirstStepClicked()
+   {
+      const fistStep = definition.value.sequence[0];
+      if (fistStep)
+      {
+         setMoveViewportToStep(fistStep.id);
+      }
+   }
+
+   async function appendStepClicked()
+   {
+      const newStep = createTaskStep();
+
+      const newDefinition = ObjectCloner.deepClone(definition.value);
+      newDefinition.sequence.push(newStep);
+      // We need to wait for the controller to finish the operation before we can select the new step
+      await controller.replaceDefinition(newDefinition);
+
+      setSelectedStepId(newStep.id);
+      setMoveViewportToStep(newStep.id);
+   }
+
+   function reloadDefinitionClicked()
+   {
+      const newDefinition = ObjectCloner.deepClone(startDefinition);
+      setSelectedStepId(null);
+      setDefinition(wrapDefinition(newDefinition));
+   }
+
+   function yesOrNo(value: boolean)
+   {
+      return value ? "✅ Yes" : "⛔ No";
+   }
+
+   return (
+      <>
+         {isVisible && (
+            <SequentialWorkflowDesigner
+               undoStackSize={10}
+               definition={definition}
+               onDefinitionChange={setDefinition}
+               selectedStepId={selectedStepId}
+               isReadonly={isReadonly}
+               onSelectedStepIdChanged={setSelectedStepId}
+               toolboxConfiguration={toolboxConfiguration}
+               isToolboxCollapsed={isToolboxCollapsed}
+               onIsToolboxCollapsedChanged={setIsToolboxCollapsed}
+               stepsConfiguration={stepsConfiguration}
+               validatorConfiguration={validatorConfiguration}
+               controlBar={true}
+               rootEditor={<RootEditor />}
+               stepEditor={<StepEditor />}
+               isEditorCollapsed={isEditorCollapsed}
+               onIsEditorCollapsedChanged={setIsEditorCollapsed}
+               controller={controller}
+            />
+         )}
+
+         <ul>
+            <li>Definition: {definitionJson.length} bytes</li>
+            <li>Selected step: {selectedStepId}</li>
+            <li>Is readonly: {yesOrNo(isReadonly)}</li>
+            <li>Is valid: {definition.isValid === undefined ? "?" : yesOrNo(definition.isValid)}</li>
+            <li>Is toolbox collapsed: {yesOrNo(isToolboxCollapsed)}</li>
+            <li>Is editor collapsed: {yesOrNo(isEditorCollapsed)}</li>
+         </ul>
+
+         <div>
+            <button onClick={toggleVisibilityClicked}>Toggle visibility</button>
+            <button onClick={reloadDefinitionClicked}>Reload definition</button>
+            <button onClick={toggleSelectionClicked}>Toggle selection</button>
+            <button onClick={toggleIsReadonlyClicked}>Toggle readonly</button>
+            <button onClick={toggleToolboxClicked}>Toggle toolbox</button>
+            <button onClick={toggleEditorClicked}>Toggle editor</button>
+            <button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
+            <button onClick={appendStepClicked}>Append step</button>
+         </div>
+
+         <div>
+            <textarea value={definitionJson} readOnly={true} cols={100} rows={15} />
+         </div>
+      </>
+   );
+}
+
+export default WorkflowPreview;

src/qqq/components/workflows/model.ts

@@ -0,0 +1,75 @@
+import {BranchedStep, Definition, Step} from "sequential-workflow-designer";
+
+export interface WorkflowDefinition extends Definition
+{
+   properties: {
+      alfa?: string;
+   };
+}
+
+export interface TaskStep extends Step
+{
+   componentType: "task";
+   type: "task";
+   properties: {
+      x?: string;
+      y?: string;
+      warehouse?: string;
+      wmsConnection?: string;
+      wmsSystem?: string;
+   };
+}
+
+export type OptimizationStepType =
+   "determineWarehouseRouting" |
+   "determineLineHaulLane" |
+   "validateLineItems" |
+   "determineCoolingCategory" |
+   "validateOptimizationRules" |
+   "validateAddress" |
+   "determineCarrierService" |
+   "determineTNT" |
+   "determineOrderServiceDates" |
+   "orderMatchesFilterSelector";
+
+
+export interface WarehouseOptimizationStep extends Step
+{
+   componentType: "task";
+   type: OptimizationStepType;
+   properties: {
+      x?: string;
+      y?: string;
+      warehouse?: string;
+      wmsConnection?: string;
+      wmsSystem?: string;
+      isValid?: boolean;
+   };
+}
+
+export interface SwitchStep extends BranchedStep
+{
+   componentType: "switch";
+   type: "switch";
+   properties: {
+      x?: string;
+      y?: string;
+      warehouse?: string;
+      wmsConnection?: string;
+      wmsSystem?: string;
+   };
+}
+
+export interface ContainerStep extends Step
+{
+   componentType: "container";
+   type: "container";
+   properties: {
+      x?: string;
+      y?: string;
+      warehouse?: string;
+      wmsConnection?: string;
+      wmsSystem?: string;
+   };
+   sequence: (WarehouseOptimizationStep | SwitchStep)[];
+}