From ddda915ebdc27d7ee29ffbf3545a9c33c8e3b314 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:40:56 +1100
Subject: [PATCH] fix(ui): start workflow w/ single column as root

---
 .../src/features/nodes/store/workflowSlice.ts | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 8850a405d4..59c24e5e57 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -13,6 +13,7 @@ import type {
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import {
+  buildContainer,
   type ContainerElement,
   type FormElement,
   isContainerElement,
@@ -25,18 +26,26 @@ import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types'
 
 import { selectNodesSlice } from './selectors';
 
-const blankWorkflow: Omit<WorkflowV3, 'nodes' | 'edges'> = {
-  name: '',
-  author: '',
-  description: '',
-  version: '',
-  contact: '',
-  tags: '',
-  notes: '',
-  exposedFields: [],
-  meta: { version: '3.0.0', category: 'user' },
-  id: undefined,
-  form: undefined,
+const getBlankWorkflow = (): Omit<WorkflowV3, 'nodes' | 'edges'> => {
+  const rootElement = buildContainer('column', []);
+  return {
+    name: '',
+    author: '',
+    description: '',
+    version: '',
+    contact: '',
+    tags: '',
+    notes: '',
+    exposedFields: [],
+    meta: { version: '3.0.0', category: 'user' },
+    id: undefined,
+    form: {
+      elements: {
+        [rootElement.id]: rootElement,
+      },
+      rootElementId: rootElement.id,
+    },
+  };
 };
 
 const initialWorkflowState: WorkflowState = {
@@ -49,7 +58,7 @@ const initialWorkflowState: WorkflowState = {
   orderDirection: 'DESC',
   categorySections: {},
   formMode: 'view',
-  ...blankWorkflow,
+  ...getBlankWorkflow(),
 };
 
 export const workflowSlice = createSlice({