@kapeta/local-cluster-service 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [0.47.0](https://github.com/kapetacom/local-cluster-service/compare/v0.46.0...v0.47.0) (2024-05-29)
+
+
+### Features
+
+* Added tests for event parsing and layouting of nodes ([#149](https://github.com/kapetacom/local-cluster-service/issues/149)) ([d36afa9](https://github.com/kapetacom/local-cluster-service/commit/d36afa905d0c66c4562b4eccf07c067efe6b3c9c))
+
 # [0.46.0](https://github.com/kapetacom/local-cluster-service/compare/v0.45.0...v0.46.0) (2024-05-28)
 
 

package/dist/cjs/src/storm/event-parser.d.ts

@@ -10,7 +10,7 @@ export interface BlockDefinitionInfo {
     content: BlockDefinition;
     aiName: string;
 }
-export interface ParsedResult {
+export interface StormDefinitions {
     plan: Plan;
     blocks: BlockDefinitionInfo[];
 }
@@ -51,12 +51,12 @@ export declare class StormEventParser {
     private options;
     constructor(options: StormOptions);
     private reset;
-    addEvent(evt: StormEvent): void;
+    addEvent(handle: string, evt: StormEvent): StormDefinitions;
     getEvents(): StormEvent[];
     isValid(): boolean;
     getError(): string;
     private applyLayoutToBlocks;
-    toResult(handle: string): ParsedResult;
+    toResult(handle: string): StormDefinitions;
     private toSafeName;
     private toRef;
     toBlockDefinitions(handle: string): {

package/dist/cjs/src/storm/event-parser.js

@@ -12,6 +12,8 @@ const nodejs_utils_1 = require("@kapeta/nodejs-utils");
 const kaplang_core_1 = require("@kapeta/kaplang-core");
 const node_uuid_1 = __importDefault(require("node-uuid"));
 const definitionsManager_1 = require("../definitionsManager");
+const ngraph_graph_1 = __importDefault(require("ngraph.graph"));
+const ngraph_forcelayout_1 = __importDefault(require("ngraph.forcelayout"));
 async function resolveOptions() {
     // Predefined types for now - TODO: Allow user to select / change
     const blockTypeService = await definitionsManager_1.definitionsManager.getLatestDefinition('kapeta/block-type-service');
@@ -87,6 +89,7 @@ async function resolveOptions() {
     };
 }
 exports.resolveOptions = resolveOptions;
+const LAYOUT_MARGIN = 50;
 class StormEventParser {
     events = [];
     planName = '';
@@ -105,7 +108,7 @@ class StormEventParser {
         this.blocks = {};
         this.connections = [];
     }
-    addEvent(evt) {
+    addEvent(handle, evt) {
         this.events.push(evt);
         switch (evt.type) {
             case 'CREATE_PLAN_PROPERTIES':
@@ -144,6 +147,7 @@ class StormEventParser {
             case 'FILE':
                 break;
         }
+        return this.toResult(handle);
     }
     getEvents() {
         return this.events;
@@ -155,13 +159,47 @@ class StormEventParser {
         return this.error;
     }
     applyLayoutToBlocks(result) {
+        const graph = (0, ngraph_graph_1.default)();
+        const blockInstances = {};
+        result.plan.spec.blocks.forEach((block, index) => {
+            graph.addNode(block.id, block);
+            blockInstances[block.id] = block;
+        });
+        result.plan.spec.connections.forEach((connection) => {
+            graph.addLink(connection.provider.blockId, connection.consumer.blockId);
+        });
+        const layout = (0, ngraph_forcelayout_1.default)(graph, {
+            springLength: 150,
+            debug: true,
+            dimensions: 2,
+            gravity: 2,
+            springCoefficient: 0.0008,
+        });
+        for (let i = 0; i < 100; ++i) {
+            layout.step();
+        }
+        // Layout might place things in negative space. We move everything to positive space
+        const graphBox = layout.getGraphRect();
+        let yAdjust = 0;
+        let xAdjust = 0;
+        if (graphBox.y1 < 0) {
+            yAdjust = -graphBox.y1;
+        }
+        if (graphBox.x1 < 0) {
+            xAdjust = -graphBox.x1;
+        }
+        graph.forEachNode((node) => {
+            const position = layout.getNodePosition(node.id);
+            blockInstances[node.id].dimensions.left = LAYOUT_MARGIN + Math.round(position.x + xAdjust);
+            blockInstances[node.id].dimensions.top = LAYOUT_MARGIN + Math.round(position.y + yAdjust);
+        });
+        layout.dispose();
         return result;
     }
     toResult(handle) {
         const planRef = this.toRef(handle, this.planName);
         const blockDefinitions = this.toBlockDefinitions(handle);
         const refIdMap = {};
-        const screens = {};
         const blocks = Object.entries(blockDefinitions).map(([ref, block]) => {
             const id = node_uuid_1.default.v4();
             refIdMap[ref] = id;
@@ -174,7 +212,7 @@ class StormEventParser {
                 dimensions: {
                     left: 0,
                     top: 0,
-                    width: 200,
+                    width: 150,
                     height: 200,
                 },
             };
@@ -377,7 +415,7 @@ class StormEventParser {
                                 },
                             },
                         };
-                        blockSpec.providers.push(dbResource);
+                        blockSpec.consumers.push(dbResource);
                         break;
                     case 'JWTCONSUMER':
                     case 'WEBFRAGMENT':

package/dist/cjs/src/storm/events.d.ts

@@ -2,6 +2,7 @@
  * Copyright 2023 Kapeta Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
+import { StormDefinitions } from "./event-parser";
 export type StormResourceType = 'API' | 'DATABASE' | 'CLIENT' | 'JWTPROVIDER' | 'JWTCONSUMER' | 'WEBFRAGMENT' | 'WEBPAGE' | 'SMTPCLIENT' | 'EXTERNAL_API' | 'SUBSCRIBER' | 'PUBLISHER' | 'QUEUE' | 'EXCHANGE';
 export type StormBlockType = 'BACKEND' | 'FRONTEND' | 'GATEWAY' | 'MQ' | 'CLI' | 'DESKTOP';
 export interface StormBlockInfo {
@@ -123,4 +124,10 @@ export interface StormEventDone {
     type: 'DONE';
     created: number;
 }
-export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFile | StormEventDone;
+export interface StormEventDefinitionChange {
+    type: 'DEFINITION_CHANGE';
+    reason: string;
+    created: number;
+    payload: StormDefinitions;
+}
+export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFile | StormEventDone | StormEventDefinitionChange;

package/dist/cjs/src/storm/events.js

@@ -1,6 +1,2 @@
 "use strict";
-/**
- * Copyright 2023 Kapeta Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/storm/routes.js

@@ -25,12 +25,13 @@ router.post('/:handle/all', async (req, res) => {
         const metaStream = await stormClient_1.stormClient.createMetadata(aiRequest.prompt, aiRequest.history);
         res.set('Content-Type', 'application/x-ndjson');
         metaStream.on('data', (data) => {
-            eventParser.addEvent(data);
+            const result = eventParser.addEvent(req.params.handle, data);
+            sendDefinitions(res, result);
         });
         await streamStormPartialResponse(metaStream, res);
         if (!eventParser.isValid()) {
             // We can't continue if the meta stream is invalid
-            res.write({
+            sendEvent(res, {
                 type: 'ERROR_INTERNAL',
                 payload: { error: eventParser.getError() },
                 reason: 'Failed to generate system',
@@ -40,6 +41,7 @@ router.post('/:handle/all', async (req, res) => {
             return;
         }
         const result = eventParser.toResult(handle);
+        sendDefinitions(res, result);
         const stormCodegen = new codegen_1.StormCodegen(aiRequest.prompt, result.blocks, eventParser.getEvents());
         const codegenStream = streamStormPartialResponse(stormCodegen.getStream(), res);
         await stormCodegen.process();
@@ -50,22 +52,30 @@ router.post('/:handle/all', async (req, res) => {
         sendError(err, res);
     }
 });
+function sendDefinitions(res, result) {
+    sendEvent(res, {
+        type: 'DEFINITION_CHANGE',
+        payload: result,
+        reason: 'Updates to definition',
+        created: Date.now(),
+    });
+}
 function sendDone(res) {
-    res.write(JSON.stringify({
+    sendEvent(res, {
         type: 'DONE',
         created: Date.now(),
-    }) + '\n');
+    });
     res.end();
 }
 function sendError(err, res) {
     console.error('Failed to send prompt', err);
     if (res.headersSent) {
-        res.write(JSON.stringify({
+        sendEvent(res, {
             type: 'ERROR_INTERNAL',
             created: Date.now(),
             payload: { error: err.message },
             reason: 'Failed while sending prompt',
-        }) + '\n');
+        });
     }
     else {
         res.status(400).send({ error: err.message });
@@ -74,7 +84,7 @@ function sendError(err, res) {
 function streamStormPartialResponse(result, res) {
     return new Promise((resolve, reject) => {
         result.on('data', (data) => {
-            res.write(JSON.stringify(data) + '\n');
+            sendEvent(res, data);
         });
         result.on('error', (err) => {
             reject(err);
@@ -84,4 +94,7 @@ function streamStormPartialResponse(result, res) {
         });
     });
 }
+function sendEvent(res, evt) {
+    res.write(JSON.stringify(evt) + '\n');
+}
 exports.default = router;

package/dist/cjs/test/storm/event-parser.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright 2023 Kapeta Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+export {};

package/dist/cjs/test/storm/event-parser.test.js

@@ -0,0 +1,169 @@
+"use strict";
+/**
+ * Copyright 2023 Kapeta Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const event_parser_1 = require("../../src/storm/event-parser");
+const parserOptions = {
+    serviceKind: 'kapeta/block-service:local',
+    serviceLanguage: 'kapeta/language-target-nodejs-ts:local',
+    frontendKind: 'kapeta/block-type-frontend:local',
+    frontendLanguage: 'kapeta/language-target-react-ts:local',
+    cliKind: 'kapeta/block-type-cli:local',
+    cliLanguage: 'kapeta/language-target-nodejs-ts:local',
+    desktopKind: 'kapeta/block-type-desktop:local',
+    desktopLanguage: 'kapeta/language-target-electron-ts:local',
+    gatewayKind: 'kapeta/block-type-gateway:local',
+    mqKind: 'kapeta/block-type-mq:local',
+    exchangeKind: 'kapeta/resource-type-exchange:local',
+    queueKind: 'kapeta/resource-type-queue:local',
+    publisherKind: 'kapeta/resource-type-publisher:local',
+    subscriberKind: 'kapeta/resource-type-subscriber:local',
+    databaseKind: 'kapeta/block-type-database:local',
+    apiKind: 'kapeta/block-type-api:local',
+    clientKind: 'kapeta/block-type-client:local',
+    webPageKind: 'kapeta/block-type-web-page:local',
+    webFragmentKind: 'kapeta/block-type-web-fragment:local',
+    jwtProviderKind: 'kapeta/resource-type-jwt-provider:local',
+    jwtConsumerKind: 'kapeta/resource-type-jwt-consumer:local',
+    smtpKind: 'kapeta/resource-type-smtp:local',
+    externalApiKind: 'kapeta/resource-type-external-api:local',
+};
+const events = [
+    {
+        type: 'CREATE_PLAN_PROPERTIES',
+        created: Date.now(),
+        reason: 'create plan properties',
+        payload: {
+            name: 'my-plan',
+            description: 'my plan description',
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create backend',
+        created: Date.now(),
+        payload: {
+            name: 'service',
+            description: 'A service block',
+            type: 'BACKEND',
+            resources: [
+                {
+                    name: 'entities',
+                    type: 'DATABASE',
+                    description: 'A database resource',
+                },
+                {
+                    type: 'API',
+                    name: 'entities',
+                    description: 'An API resource',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create frontend',
+        created: Date.now(),
+        payload: {
+            name: 'ui',
+            description: 'A frontend block',
+            type: 'FRONTEND',
+            resources: [
+                {
+                    name: 'web',
+                    type: 'WEBPAGE',
+                    description: 'A web page',
+                },
+                {
+                    type: 'CLIENT',
+                    name: 'entities',
+                    description: 'Client for backend',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_CONNECTION',
+        created: Date.now(),
+        reason: 'connect service to ui',
+        payload: {
+            fromComponent: 'service',
+            fromResource: 'entities',
+            fromResourceType: 'API',
+            toComponent: 'ui',
+            toResource: 'entities',
+            toResourceType: 'CLIENT',
+        },
+    },
+    {
+        type: 'CREATE_API',
+        reason: 'create api',
+        created: Date.now(),
+        payload: {
+            blockName: 'service',
+            content: `controller Entities('/entities') {
+                        @GET('/')
+                        list(): string[]
+                    }`,
+        },
+    },
+    {
+        type: 'CREATE_MODEL',
+        created: Date.now(),
+        reason: 'create model',
+        payload: {
+            blockName: 'service',
+            content: `type Entity {
+                        @Id
+                        id: string
+                        
+                        name: string
+                    }`,
+        },
+    },
+];
+describe('event-parser', () => {
+    it('it can parse events into a plan and blocks with proper layout', () => {
+        const parser = new event_parser_1.StormEventParser(parserOptions);
+        events.forEach((event) => parser.addEvent('kapeta', event));
+        const result = parser.toResult('kapeta');
+        expect(result.plan.metadata.name).toBe('kapeta/my-plan');
+        expect(result.plan.metadata.description).toBe('my plan description');
+        expect(result.blocks.length).toBe(2);
+        expect(result.blocks[0].content.metadata.name).toBe('kapeta/service');
+        expect(result.blocks[1].content.metadata.name).toBe('kapeta/ui');
+        const dbResource = result.blocks[0].content.spec.consumers?.[0];
+        const apiResource = result.blocks[0].content.spec.providers?.[0];
+        const clientResource = result.blocks[1].content.spec.consumers?.[0];
+        const pageResource = result.blocks[1].content.spec.providers?.[0];
+        expect(apiResource).toBeDefined();
+        expect(clientResource).toBeDefined();
+        expect(dbResource).toBeDefined();
+        expect(pageResource).toBeDefined();
+        expect(apiResource?.kind).toBe(parserOptions.apiKind);
+        expect(clientResource?.kind).toBe(parserOptions.clientKind);
+        expect(dbResource?.kind).toBe(parserOptions.databaseKind);
+        expect(pageResource?.kind).toBe(parserOptions.webPageKind);
+        expect(apiResource?.spec).toEqual(clientResource?.spec);
+        expect(dbResource?.spec.source.value).toContain('type Entity');
+        const serviceBlockInstance = result.plan.spec.blocks[0];
+        expect(serviceBlockInstance.name).toBe('service');
+        expect(serviceBlockInstance.dimensions.width).toBe(150);
+        expect(serviceBlockInstance.dimensions.height).toBe(200);
+        expect(serviceBlockInstance.dimensions.top).toBe(3);
+        expect(serviceBlockInstance.dimensions.left).toBe(6);
+        const uiBlockInstance = result.plan.spec.blocks[1];
+        expect(uiBlockInstance.name).toBe('ui');
+        expect(uiBlockInstance.dimensions.width).toBe(150);
+        expect(uiBlockInstance.dimensions.height).toBe(200);
+        expect(uiBlockInstance.dimensions.top).toBe(107);
+        expect(uiBlockInstance.dimensions.left).toBe(112);
+        expect(result.plan.spec.connections.length).toBe(1);
+        expect(result.plan.spec.connections[0].consumer.blockId).toBe(uiBlockInstance.id);
+        expect(result.plan.spec.connections[0].consumer.resourceName).toBe(clientResource?.metadata.name);
+        expect(result.plan.spec.connections[0].provider.blockId).toBe(serviceBlockInstance.id);
+        expect(result.plan.spec.connections[0].provider.resourceName).toBe(apiResource?.metadata.name);
+    });
+});

package/dist/esm/src/storm/event-parser.d.ts

@@ -10,7 +10,7 @@ export interface BlockDefinitionInfo {
     content: BlockDefinition;
     aiName: string;
 }
-export interface ParsedResult {
+export interface StormDefinitions {
     plan: Plan;
     blocks: BlockDefinitionInfo[];
 }
@@ -51,12 +51,12 @@ export declare class StormEventParser {
     private options;
     constructor(options: StormOptions);
     private reset;
-    addEvent(evt: StormEvent): void;
+    addEvent(handle: string, evt: StormEvent): StormDefinitions;
     getEvents(): StormEvent[];
     isValid(): boolean;
     getError(): string;
     private applyLayoutToBlocks;
-    toResult(handle: string): ParsedResult;
+    toResult(handle: string): StormDefinitions;
     private toSafeName;
     private toRef;
     toBlockDefinitions(handle: string): {

package/dist/esm/src/storm/event-parser.js

@@ -12,6 +12,8 @@ const nodejs_utils_1 = require("@kapeta/nodejs-utils");
 const kaplang_core_1 = require("@kapeta/kaplang-core");
 const node_uuid_1 = __importDefault(require("node-uuid"));
 const definitionsManager_1 = require("../definitionsManager");
+const ngraph_graph_1 = __importDefault(require("ngraph.graph"));
+const ngraph_forcelayout_1 = __importDefault(require("ngraph.forcelayout"));
 async function resolveOptions() {
     // Predefined types for now - TODO: Allow user to select / change
     const blockTypeService = await definitionsManager_1.definitionsManager.getLatestDefinition('kapeta/block-type-service');
@@ -87,6 +89,7 @@ async function resolveOptions() {
     };
 }
 exports.resolveOptions = resolveOptions;
+const LAYOUT_MARGIN = 50;
 class StormEventParser {
     events = [];
     planName = '';
@@ -105,7 +108,7 @@ class StormEventParser {
         this.blocks = {};
         this.connections = [];
     }
-    addEvent(evt) {
+    addEvent(handle, evt) {
         this.events.push(evt);
         switch (evt.type) {
             case 'CREATE_PLAN_PROPERTIES':
@@ -144,6 +147,7 @@ class StormEventParser {
             case 'FILE':
                 break;
         }
+        return this.toResult(handle);
     }
     getEvents() {
         return this.events;
@@ -155,13 +159,47 @@ class StormEventParser {
         return this.error;
     }
     applyLayoutToBlocks(result) {
+        const graph = (0, ngraph_graph_1.default)();
+        const blockInstances = {};
+        result.plan.spec.blocks.forEach((block, index) => {
+            graph.addNode(block.id, block);
+            blockInstances[block.id] = block;
+        });
+        result.plan.spec.connections.forEach((connection) => {
+            graph.addLink(connection.provider.blockId, connection.consumer.blockId);
+        });
+        const layout = (0, ngraph_forcelayout_1.default)(graph, {
+            springLength: 150,
+            debug: true,
+            dimensions: 2,
+            gravity: 2,
+            springCoefficient: 0.0008,
+        });
+        for (let i = 0; i < 100; ++i) {
+            layout.step();
+        }
+        // Layout might place things in negative space. We move everything to positive space
+        const graphBox = layout.getGraphRect();
+        let yAdjust = 0;
+        let xAdjust = 0;
+        if (graphBox.y1 < 0) {
+            yAdjust = -graphBox.y1;
+        }
+        if (graphBox.x1 < 0) {
+            xAdjust = -graphBox.x1;
+        }
+        graph.forEachNode((node) => {
+            const position = layout.getNodePosition(node.id);
+            blockInstances[node.id].dimensions.left = LAYOUT_MARGIN + Math.round(position.x + xAdjust);
+            blockInstances[node.id].dimensions.top = LAYOUT_MARGIN + Math.round(position.y + yAdjust);
+        });
+        layout.dispose();
         return result;
     }
     toResult(handle) {
         const planRef = this.toRef(handle, this.planName);
         const blockDefinitions = this.toBlockDefinitions(handle);
         const refIdMap = {};
-        const screens = {};
         const blocks = Object.entries(blockDefinitions).map(([ref, block]) => {
             const id = node_uuid_1.default.v4();
             refIdMap[ref] = id;
@@ -174,7 +212,7 @@ class StormEventParser {
                 dimensions: {
                     left: 0,
                     top: 0,
-                    width: 200,
+                    width: 150,
                     height: 200,
                 },
             };
@@ -377,7 +415,7 @@ class StormEventParser {
                                 },
                             },
                         };
-                        blockSpec.providers.push(dbResource);
+                        blockSpec.consumers.push(dbResource);
                         break;
                     case 'JWTCONSUMER':
                     case 'WEBFRAGMENT':

package/dist/esm/src/storm/events.d.ts

@@ -2,6 +2,7 @@
  * Copyright 2023 Kapeta Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
+import { StormDefinitions } from "./event-parser";
 export type StormResourceType = 'API' | 'DATABASE' | 'CLIENT' | 'JWTPROVIDER' | 'JWTCONSUMER' | 'WEBFRAGMENT' | 'WEBPAGE' | 'SMTPCLIENT' | 'EXTERNAL_API' | 'SUBSCRIBER' | 'PUBLISHER' | 'QUEUE' | 'EXCHANGE';
 export type StormBlockType = 'BACKEND' | 'FRONTEND' | 'GATEWAY' | 'MQ' | 'CLI' | 'DESKTOP';
 export interface StormBlockInfo {
@@ -123,4 +124,10 @@ export interface StormEventDone {
     type: 'DONE';
     created: number;
 }
-export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFile | StormEventDone;
+export interface StormEventDefinitionChange {
+    type: 'DEFINITION_CHANGE';
+    reason: string;
+    created: number;
+    payload: StormDefinitions;
+}
+export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFile | StormEventDone | StormEventDefinitionChange;

package/dist/esm/src/storm/events.js

@@ -1,6 +1,2 @@
 "use strict";
-/**
- * Copyright 2023 Kapeta Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/src/storm/routes.js

@@ -25,12 +25,13 @@ router.post('/:handle/all', async (req, res) => {
         const metaStream = await stormClient_1.stormClient.createMetadata(aiRequest.prompt, aiRequest.history);
         res.set('Content-Type', 'application/x-ndjson');
         metaStream.on('data', (data) => {
-            eventParser.addEvent(data);
+            const result = eventParser.addEvent(req.params.handle, data);
+            sendDefinitions(res, result);
         });
         await streamStormPartialResponse(metaStream, res);
         if (!eventParser.isValid()) {
             // We can't continue if the meta stream is invalid
-            res.write({
+            sendEvent(res, {
                 type: 'ERROR_INTERNAL',
                 payload: { error: eventParser.getError() },
                 reason: 'Failed to generate system',
@@ -40,6 +41,7 @@ router.post('/:handle/all', async (req, res) => {
             return;
         }
         const result = eventParser.toResult(handle);
+        sendDefinitions(res, result);
         const stormCodegen = new codegen_1.StormCodegen(aiRequest.prompt, result.blocks, eventParser.getEvents());
         const codegenStream = streamStormPartialResponse(stormCodegen.getStream(), res);
         await stormCodegen.process();
@@ -50,22 +52,30 @@ router.post('/:handle/all', async (req, res) => {
         sendError(err, res);
     }
 });
+function sendDefinitions(res, result) {
+    sendEvent(res, {
+        type: 'DEFINITION_CHANGE',
+        payload: result,
+        reason: 'Updates to definition',
+        created: Date.now(),
+    });
+}
 function sendDone(res) {
-    res.write(JSON.stringify({
+    sendEvent(res, {
         type: 'DONE',
         created: Date.now(),
-    }) + '\n');
+    });
     res.end();
 }
 function sendError(err, res) {
     console.error('Failed to send prompt', err);
     if (res.headersSent) {
-        res.write(JSON.stringify({
+        sendEvent(res, {
             type: 'ERROR_INTERNAL',
             created: Date.now(),
             payload: { error: err.message },
             reason: 'Failed while sending prompt',
-        }) + '\n');
+        });
     }
     else {
         res.status(400).send({ error: err.message });
@@ -74,7 +84,7 @@ function sendError(err, res) {
 function streamStormPartialResponse(result, res) {
     return new Promise((resolve, reject) => {
         result.on('data', (data) => {
-            res.write(JSON.stringify(data) + '\n');
+            sendEvent(res, data);
         });
         result.on('error', (err) => {
             reject(err);
@@ -84,4 +94,7 @@ function streamStormPartialResponse(result, res) {
         });
     });
 }
+function sendEvent(res, evt) {
+    res.write(JSON.stringify(evt) + '\n');
+}
 exports.default = router;

package/dist/esm/test/storm/event-parser.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright 2023 Kapeta Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+export {};

package/dist/esm/test/storm/event-parser.test.js

@@ -0,0 +1,169 @@
+"use strict";
+/**
+ * Copyright 2023 Kapeta Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const event_parser_1 = require("../../src/storm/event-parser");
+const parserOptions = {
+    serviceKind: 'kapeta/block-service:local',
+    serviceLanguage: 'kapeta/language-target-nodejs-ts:local',
+    frontendKind: 'kapeta/block-type-frontend:local',
+    frontendLanguage: 'kapeta/language-target-react-ts:local',
+    cliKind: 'kapeta/block-type-cli:local',
+    cliLanguage: 'kapeta/language-target-nodejs-ts:local',
+    desktopKind: 'kapeta/block-type-desktop:local',
+    desktopLanguage: 'kapeta/language-target-electron-ts:local',
+    gatewayKind: 'kapeta/block-type-gateway:local',
+    mqKind: 'kapeta/block-type-mq:local',
+    exchangeKind: 'kapeta/resource-type-exchange:local',
+    queueKind: 'kapeta/resource-type-queue:local',
+    publisherKind: 'kapeta/resource-type-publisher:local',
+    subscriberKind: 'kapeta/resource-type-subscriber:local',
+    databaseKind: 'kapeta/block-type-database:local',
+    apiKind: 'kapeta/block-type-api:local',
+    clientKind: 'kapeta/block-type-client:local',
+    webPageKind: 'kapeta/block-type-web-page:local',
+    webFragmentKind: 'kapeta/block-type-web-fragment:local',
+    jwtProviderKind: 'kapeta/resource-type-jwt-provider:local',
+    jwtConsumerKind: 'kapeta/resource-type-jwt-consumer:local',
+    smtpKind: 'kapeta/resource-type-smtp:local',
+    externalApiKind: 'kapeta/resource-type-external-api:local',
+};
+const events = [
+    {
+        type: 'CREATE_PLAN_PROPERTIES',
+        created: Date.now(),
+        reason: 'create plan properties',
+        payload: {
+            name: 'my-plan',
+            description: 'my plan description',
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create backend',
+        created: Date.now(),
+        payload: {
+            name: 'service',
+            description: 'A service block',
+            type: 'BACKEND',
+            resources: [
+                {
+                    name: 'entities',
+                    type: 'DATABASE',
+                    description: 'A database resource',
+                },
+                {
+                    type: 'API',
+                    name: 'entities',
+                    description: 'An API resource',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create frontend',
+        created: Date.now(),
+        payload: {
+            name: 'ui',
+            description: 'A frontend block',
+            type: 'FRONTEND',
+            resources: [
+                {
+                    name: 'web',
+                    type: 'WEBPAGE',
+                    description: 'A web page',
+                },
+                {
+                    type: 'CLIENT',
+                    name: 'entities',
+                    description: 'Client for backend',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_CONNECTION',
+        created: Date.now(),
+        reason: 'connect service to ui',
+        payload: {
+            fromComponent: 'service',
+            fromResource: 'entities',
+            fromResourceType: 'API',
+            toComponent: 'ui',
+            toResource: 'entities',
+            toResourceType: 'CLIENT',
+        },
+    },
+    {
+        type: 'CREATE_API',
+        reason: 'create api',
+        created: Date.now(),
+        payload: {
+            blockName: 'service',
+            content: `controller Entities('/entities') {
+                        @GET('/')
+                        list(): string[]
+                    }`,
+        },
+    },
+    {
+        type: 'CREATE_MODEL',
+        created: Date.now(),
+        reason: 'create model',
+        payload: {
+            blockName: 'service',
+            content: `type Entity {
+                        @Id
+                        id: string
+                        
+                        name: string
+                    }`,
+        },
+    },
+];
+describe('event-parser', () => {
+    it('it can parse events into a plan and blocks with proper layout', () => {
+        const parser = new event_parser_1.StormEventParser(parserOptions);
+        events.forEach((event) => parser.addEvent('kapeta', event));
+        const result = parser.toResult('kapeta');
+        expect(result.plan.metadata.name).toBe('kapeta/my-plan');
+        expect(result.plan.metadata.description).toBe('my plan description');
+        expect(result.blocks.length).toBe(2);
+        expect(result.blocks[0].content.metadata.name).toBe('kapeta/service');
+        expect(result.blocks[1].content.metadata.name).toBe('kapeta/ui');
+        const dbResource = result.blocks[0].content.spec.consumers?.[0];
+        const apiResource = result.blocks[0].content.spec.providers?.[0];
+        const clientResource = result.blocks[1].content.spec.consumers?.[0];
+        const pageResource = result.blocks[1].content.spec.providers?.[0];
+        expect(apiResource).toBeDefined();
+        expect(clientResource).toBeDefined();
+        expect(dbResource).toBeDefined();
+        expect(pageResource).toBeDefined();
+        expect(apiResource?.kind).toBe(parserOptions.apiKind);
+        expect(clientResource?.kind).toBe(parserOptions.clientKind);
+        expect(dbResource?.kind).toBe(parserOptions.databaseKind);
+        expect(pageResource?.kind).toBe(parserOptions.webPageKind);
+        expect(apiResource?.spec).toEqual(clientResource?.spec);
+        expect(dbResource?.spec.source.value).toContain('type Entity');
+        const serviceBlockInstance = result.plan.spec.blocks[0];
+        expect(serviceBlockInstance.name).toBe('service');
+        expect(serviceBlockInstance.dimensions.width).toBe(150);
+        expect(serviceBlockInstance.dimensions.height).toBe(200);
+        expect(serviceBlockInstance.dimensions.top).toBe(3);
+        expect(serviceBlockInstance.dimensions.left).toBe(6);
+        const uiBlockInstance = result.plan.spec.blocks[1];
+        expect(uiBlockInstance.name).toBe('ui');
+        expect(uiBlockInstance.dimensions.width).toBe(150);
+        expect(uiBlockInstance.dimensions.height).toBe(200);
+        expect(uiBlockInstance.dimensions.top).toBe(107);
+        expect(uiBlockInstance.dimensions.left).toBe(112);
+        expect(result.plan.spec.connections.length).toBe(1);
+        expect(result.plan.spec.connections[0].consumer.blockId).toBe(uiBlockInstance.id);
+        expect(result.plan.spec.connections[0].consumer.resourceName).toBe(clientResource?.metadata.name);
+        expect(result.plan.spec.connections[0].provider.blockId).toBe(serviceBlockInstance.id);
+        expect(result.plan.spec.connections[0].provider.resourceName).toBe(apiResource?.metadata.name);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kapeta/local-cluster-service",
-    "version": "0.46.0",
+    "version": "0.47.0",
     "description": "Manages configuration, ports and service discovery for locally running Kapeta systems",
     "type": "commonjs",
     "exports": {
@@ -74,6 +74,8 @@
         "gunzip-maybe": "^1.4.2",
         "lodash": "^4.17.15",
         "md5": "2.2.1",
+        "ngraph.forcelayout": "^3.3.1",
+        "ngraph.graph": "^20.0.1",
         "node-cache": "^5.1.2",
         "node-uuid": "^1.4.8",
         "parse-data-uri": "^0.2.0",

package/src/storm/event-parser.ts

@@ -3,14 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import {
-    ScreenTemplate,
-    StormBlockInfoFilled,
-    StormBlockType,
-    StormConnection,
-    StormEvent,
-    StormResourceType,
-} from './events';
+import { StormBlockInfoFilled, StormBlockType, StormConnection, StormEvent, StormResourceType } from './events';
 import {
     BlockDefinition,
     BlockInstance,
@@ -24,6 +17,8 @@ import { KapetaURI, normalizeKapetaUri, parseKapetaUri } from '@kapeta/nodejs-ut
 import { KAPLANG_ID, KAPLANG_VERSION, RESTMethod } from '@kapeta/kaplang-core';
 import uuid from 'node-uuid';
 import { definitionsManager } from '../definitionsManager';
+import createGraph from 'ngraph.graph';
+import createLayout from 'ngraph.forcelayout';
 
 export interface BlockDefinitionInfo {
     uri: KapetaURI;
@@ -31,7 +26,7 @@ export interface BlockDefinitionInfo {
     aiName: string;
 }
 
-export interface ParsedResult {
+export interface StormDefinitions {
     plan: Plan;
     blocks: BlockDefinitionInfo[];
 }
@@ -175,6 +170,8 @@ export async function resolveOptions(): Promise<StormOptions> {
     };
 }
 
+const LAYOUT_MARGIN = 50;
+
 export class StormEventParser {
     private events: StormEvent[] = [];
     private planName: string = '';
@@ -196,7 +193,7 @@ export class StormEventParser {
         this.connections = [];
     }
 
-    public addEvent(evt: StormEvent): void {
+    public addEvent(handle:string, evt: StormEvent): StormDefinitions {
         this.events.push(evt);
         switch (evt.type) {
             case 'CREATE_PLAN_PROPERTIES':
@@ -236,6 +233,8 @@ export class StormEventParser {
             case 'FILE':
                 break;
         }
+
+        return this.toResult(handle);
     }
 
     public getEvents(): StormEvent[] {
@@ -250,15 +249,57 @@ export class StormEventParser {
         return this.error;
     }
 
-    private applyLayoutToBlocks(result: ParsedResult): ParsedResult {
+    private applyLayoutToBlocks(result: StormDefinitions): StormDefinitions {
+        const graph = createGraph();
+        const blockInstances: { [key: string]: BlockInstance } = {};
+
+        result.plan.spec.blocks.forEach((block, index) => {
+            graph.addNode(block.id, block);
+            blockInstances[block.id] = block;
+        });
+
+        result.plan.spec.connections.forEach((connection) => {
+            graph.addLink(connection.provider.blockId, connection.consumer.blockId);
+        });
+
+        const layout = createLayout(graph, {
+            springLength: 150,
+            debug: true,
+            dimensions: 2,
+            gravity: 2,
+            springCoefficient: 0.0008,
+        });
+
+        for (let i = 0; i < 100; ++i) {
+            layout.step();
+        }
+
+        // Layout might place things in negative space. We move everything to positive space
+        const graphBox = layout.getGraphRect();
+        let yAdjust = 0;
+        let xAdjust = 0;
+        if (graphBox.y1 < 0) {
+            yAdjust = -graphBox.y1;
+        }
+        if (graphBox.x1 < 0) {
+            xAdjust = -graphBox.x1;
+        }
+
+        graph.forEachNode((node) => {
+            const position = layout.getNodePosition(node.id);
+            blockInstances[node.id].dimensions.left = LAYOUT_MARGIN + Math.round(position.x + xAdjust);
+            blockInstances[node.id].dimensions.top = LAYOUT_MARGIN + Math.round(position.y + yAdjust);
+        });
+
+        layout.dispose();
+
         return result;
     }
 
-    public toResult(handle: string): ParsedResult {
+    public toResult(handle: string): StormDefinitions {
         const planRef = this.toRef(handle, this.planName);
         const blockDefinitions = this.toBlockDefinitions(handle);
         const refIdMap: { [key: string]: string } = {};
-        const screens: { [key: string]: ScreenTemplate[] } = {};
         const blocks = Object.entries(blockDefinitions).map(([ref, block]) => {
             const id = uuid.v4();
             refIdMap[ref] = id;
@@ -271,7 +312,7 @@ export class StormEventParser {
                 dimensions: {
                     left: 0,
                     top: 0,
-                    width: 200,
+                    width: 150,
                     height: 200,
                 },
             } satisfies BlockInstance;
@@ -504,7 +545,7 @@ export class StormEventParser {
                                 } satisfies SourceCode,
                             },
                         };
-                        blockSpec.providers!.push(dbResource);
+                        blockSpec.consumers!.push(dbResource);
                         break;
                     case 'JWTCONSUMER':
                     case 'WEBFRAGMENT':

package/src/storm/events.ts

@@ -2,6 +2,7 @@
  * Copyright 2023 Kapeta Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
+import {StormDefinitions} from "./event-parser";
 
 export type StormResourceType =
     | 'API'
@@ -154,6 +155,13 @@ export interface StormEventDone {
     created: number;
 }
 
+export interface StormEventDefinitionChange {
+    type: 'DEFINITION_CHANGE';
+    reason: string;
+    created: number;
+    payload: StormDefinitions;
+}
+
 export type StormEvent =
     | StormEventCreateBlock
     | StormEventCreateConnection
@@ -165,4 +173,5 @@ export type StormEvent =
     | StormEventScreen
     | StormEventScreenCandidate
     | StormEventFile
-    | StormEventDone;
+    | StormEventDone
+    | StormEventDefinitionChange;

package/src/storm/routes.ts

@@ -4,15 +4,15 @@
  */
 
 import Router from 'express-promise-router';
-import { Response } from 'express';
-import { corsHandler } from '../middleware/cors';
-import { stringBody } from '../middleware/stringBody';
-import { KapetaBodyRequest } from '../types';
-import { StormContextRequest, StormFileImplementationPrompt, StormFileInfo, StormStream } from './stream';
-import { stormClient } from './stormClient';
-import { StormEvent } from './events';
-import { resolveOptions, StormEventParser } from './event-parser';
-import { StormCodegen } from './codegen';
+import {Response} from 'express';
+import {corsHandler} from '../middleware/cors';
+import {stringBody} from '../middleware/stringBody';
+import {KapetaBodyRequest} from '../types';
+import {StormContextRequest, StormFileImplementationPrompt, StormFileInfo, StormStream} from './stream';
+import {stormClient} from './stormClient';
+import {StormEvent} from './events';
+import {resolveOptions, StormDefinitions, StormEventParser} from './event-parser';
+import {StormCodegen} from './codegen';
 
 const router = Router();
 
@@ -33,24 +33,29 @@ router.post('/:handle/all', async (req: KapetaBodyRequest, res: Response) => {
         res.set('Content-Type', 'application/x-ndjson');
 
         metaStream.on('data', (data: StormEvent) => {
-            eventParser.addEvent(data);
+            const result = eventParser.addEvent(req.params.handle, data);
+
+            sendDefinitions(res, result);
         });
 
         await streamStormPartialResponse(metaStream, res);
 
         if (!eventParser.isValid()) {
             // We can't continue if the meta stream is invalid
-            res.write({
+            sendEvent(res, {
                 type: 'ERROR_INTERNAL',
-                payload: { error: eventParser.getError() },
+                payload: {error: eventParser.getError()},
                 reason: 'Failed to generate system',
                 created: Date.now(),
-            } satisfies StormEvent);
+            });
             res.end();
             return;
         }
+
         const result = eventParser.toResult(handle);
 
+        sendDefinitions(res, result);
+
         const stormCodegen = new StormCodegen(aiRequest.prompt, result.blocks, eventParser.getEvents());
 
         const codegenStream = streamStormPartialResponse(stormCodegen.getStream(), res);
@@ -65,13 +70,20 @@ router.post('/:handle/all', async (req: KapetaBodyRequest, res: Response) => {
     }
 });
 
+function sendDefinitions(res: Response, result: StormDefinitions) {
+    sendEvent(res, {
+        type: 'DEFINITION_CHANGE',
+        payload: result,
+        reason: 'Updates to definition',
+        created: Date.now(),
+    });
+}
+
 function sendDone(res: Response) {
-    res.write(
-        JSON.stringify({
-            type: 'DONE',
-            created: Date.now(),
-        } satisfies StormEvent) + '\n'
-    );
+    sendEvent(res, {
+        type: 'DONE',
+        created: Date.now(),
+    });
 
     res.end();
 }
@@ -79,23 +91,22 @@ function sendDone(res: Response) {
 function sendError(err: Error, res: Response) {
     console.error('Failed to send prompt', err);
     if (res.headersSent) {
-        res.write(
-            JSON.stringify({
-                type: 'ERROR_INTERNAL',
-                created: Date.now(),
-                payload: { error: err.message },
-                reason: 'Failed while sending prompt',
-            } satisfies StormEvent) + '\n'
-        );
+        sendEvent(res, {
+            type: 'ERROR_INTERNAL',
+            created: Date.now(),
+            payload: {error: err.message},
+            reason: 'Failed while sending prompt',
+        });
     } else {
-        res.status(400).send({ error: err.message });
+        res.status(400).send({error: err.message});
     }
 }
 
+
 function streamStormPartialResponse(result: StormStream, res: Response) {
     return new Promise<void>((resolve, reject) => {
         result.on('data', (data) => {
-            res.write(JSON.stringify(data) + '\n');
+            sendEvent(res, data);
         });
 
         result.on('error', (err) => {
@@ -108,4 +119,8 @@ function streamStormPartialResponse(result: StormStream, res: Response) {
     });
 }
 
+function sendEvent(res: Response, evt: StormEvent) {
+    res.write(JSON.stringify(evt) + '\n');
+}
+
 export default router;

package/test/storm/event-parser.test.ts

@@ -0,0 +1,190 @@
+/**
+ * Copyright 2023 Kapeta Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { StormEventParser } from '../../src/storm/event-parser';
+import { StormEvent } from '../../src/storm/events';
+
+const parserOptions = {
+    serviceKind: 'kapeta/block-service:local',
+    serviceLanguage: 'kapeta/language-target-nodejs-ts:local',
+
+    frontendKind: 'kapeta/block-type-frontend:local',
+    frontendLanguage: 'kapeta/language-target-react-ts:local',
+
+    cliKind: 'kapeta/block-type-cli:local',
+    cliLanguage: 'kapeta/language-target-nodejs-ts:local',
+
+    desktopKind: 'kapeta/block-type-desktop:local',
+    desktopLanguage: 'kapeta/language-target-electron-ts:local',
+
+    gatewayKind: 'kapeta/block-type-gateway:local',
+
+    mqKind: 'kapeta/block-type-mq:local',
+    exchangeKind: 'kapeta/resource-type-exchange:local',
+    queueKind: 'kapeta/resource-type-queue:local',
+    publisherKind: 'kapeta/resource-type-publisher:local',
+    subscriberKind: 'kapeta/resource-type-subscriber:local',
+    databaseKind: 'kapeta/block-type-database:local',
+
+    apiKind: 'kapeta/block-type-api:local',
+    clientKind: 'kapeta/block-type-client:local',
+
+    webPageKind: 'kapeta/block-type-web-page:local',
+    webFragmentKind: 'kapeta/block-type-web-fragment:local',
+
+    jwtProviderKind: 'kapeta/resource-type-jwt-provider:local',
+    jwtConsumerKind: 'kapeta/resource-type-jwt-consumer:local',
+
+    smtpKind: 'kapeta/resource-type-smtp:local',
+    externalApiKind: 'kapeta/resource-type-external-api:local',
+};
+
+const events: StormEvent[] = [
+    {
+        type: 'CREATE_PLAN_PROPERTIES',
+        created: Date.now(),
+        reason: 'create plan properties',
+        payload: {
+            name: 'my-plan',
+            description: 'my plan description',
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create backend',
+        created: Date.now(),
+        payload: {
+            name: 'service',
+            description: 'A service block',
+            type: 'BACKEND',
+            resources: [
+                {
+                    name: 'entities',
+                    type: 'DATABASE',
+                    description: 'A database resource',
+                },
+                {
+                    type: 'API',
+                    name: 'entities',
+                    description: 'An API resource',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_BLOCK',
+        reason: 'create frontend',
+        created: Date.now(),
+        payload: {
+            name: 'ui',
+            description: 'A frontend block',
+            type: 'FRONTEND',
+            resources: [
+                {
+                    name: 'web',
+                    type: 'WEBPAGE',
+                    description: 'A web page',
+                },
+                {
+                    type: 'CLIENT',
+                    name: 'entities',
+                    description: 'Client for backend',
+                },
+            ],
+        },
+    },
+    {
+        type: 'CREATE_CONNECTION',
+        created: Date.now(),
+        reason: 'connect service to ui',
+        payload: {
+            fromComponent: 'service',
+            fromResource: 'entities',
+            fromResourceType: 'API',
+            toComponent: 'ui',
+            toResource: 'entities',
+            toResourceType: 'CLIENT',
+        },
+    },
+    {
+        type: 'CREATE_API',
+        reason: 'create api',
+        created: Date.now(),
+        payload: {
+            blockName: 'service',
+            content: `controller Entities('/entities') {
+                        @GET('/')
+                        list(): string[]
+                    }`,
+        },
+    },
+    {
+        type: 'CREATE_MODEL',
+        created: Date.now(),
+        reason: 'create model',
+        payload: {
+            blockName: 'service',
+            content: `type Entity {
+                        @Id
+                        id: string
+                        
+                        name: string
+                    }`,
+        },
+    },
+];
+
+describe('event-parser', () => {
+    it('it can parse events into a plan and blocks with proper layout', () => {
+        const parser = new StormEventParser(parserOptions);
+        events.forEach((event) => parser.addEvent('kapeta', event));
+
+        const result = parser.toResult('kapeta');
+
+        expect(result.plan.metadata.name).toBe('kapeta/my-plan');
+        expect(result.plan.metadata.description).toBe('my plan description');
+        expect(result.blocks.length).toBe(2);
+        expect(result.blocks[0].content.metadata.name).toBe('kapeta/service');
+        expect(result.blocks[1].content.metadata.name).toBe('kapeta/ui');
+
+        const dbResource = result.blocks[0].content.spec.consumers?.[0];
+        const apiResource = result.blocks[0].content.spec.providers?.[0];
+        const clientResource = result.blocks[1].content.spec.consumers?.[0];
+        const pageResource = result.blocks[1].content.spec.providers?.[0];
+
+        expect(apiResource).toBeDefined();
+        expect(clientResource).toBeDefined();
+        expect(dbResource).toBeDefined();
+        expect(pageResource).toBeDefined();
+
+        expect(apiResource?.kind).toBe(parserOptions.apiKind);
+        expect(clientResource?.kind).toBe(parserOptions.clientKind);
+        expect(dbResource?.kind).toBe(parserOptions.databaseKind);
+        expect(pageResource?.kind).toBe(parserOptions.webPageKind);
+
+        expect(apiResource?.spec).toEqual(clientResource?.spec);
+        expect(dbResource?.spec.source.value).toContain('type Entity');
+
+        const serviceBlockInstance = result.plan.spec.blocks[0];
+        expect(serviceBlockInstance.name).toBe('service');
+        expect(serviceBlockInstance.dimensions.width).toBe(150);
+        expect(serviceBlockInstance.dimensions.height).toBe(200);
+        expect(serviceBlockInstance.dimensions.top).toBe(3);
+        expect(serviceBlockInstance.dimensions.left).toBe(6);
+
+        const uiBlockInstance = result.plan.spec.blocks[1];
+        expect(uiBlockInstance.name).toBe('ui');
+        expect(uiBlockInstance.dimensions.width).toBe(150);
+        expect(uiBlockInstance.dimensions.height).toBe(200);
+        expect(uiBlockInstance.dimensions.top).toBe(107);
+        expect(uiBlockInstance.dimensions.left).toBe(112);
+
+        expect(result.plan.spec.connections.length).toBe(1);
+        expect(result.plan.spec.connections[0].consumer.blockId).toBe(uiBlockInstance.id);
+        expect(result.plan.spec.connections[0].consumer.resourceName).toBe(clientResource?.metadata.name);
+        expect(result.plan.spec.connections[0].provider.blockId).toBe(serviceBlockInstance.id);
+        expect(result.plan.spec.connections[0].provider.resourceName).toBe(apiResource?.metadata.name);
+    });
+});