@eclipse-glsp-examples/workflow-server 0.9.0-next.397cddd.4

package/src/provider/workflow-command-palette-action-provider.ts

@@ -0,0 +1,124 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+    Args,
+    CommandPaletteActionProvider,
+    CreateEdgeOperation,
+    CreateNodeOperation,
+    DefaultTypes,
+    DeleteElementOperation,
+    GModelElement,
+    GModelState,
+    GNode,
+    LabeledAction,
+    ORIGIN_POINT,
+    Point
+} from '@eclipse-glsp/server-node';
+import { inject, injectable } from 'inversify';
+import { TaskNode } from '../graph-extension';
+import { ModelTypes } from '../util/model-types';
+
+@injectable()
+export class WorkflowCommandPaletteActionProvider extends CommandPaletteActionProvider {
+    @inject(GModelState)
+    protected modelState: GModelState;
+
+    getPaletteActions(selectedElementIds: string[], selectedElements: GModelElement[], position: Point, args?: Args): LabeledAction[] {
+        const actions: LabeledAction[] = [];
+        if (this.modelState.isReadonly) {
+            return actions;
+        }
+        const index = this.modelState.index;
+        // Create actions
+        actions.push(
+            new LabeledAction(
+                'Create Automated Task',
+                [new CreateNodeOperation(ModelTypes.AUTOMATED_TASK, position ?? ORIGIN_POINT)],
+                'fa-plus-square'
+            ),
+            new LabeledAction(
+                'Create Manual Task',
+                [new CreateNodeOperation(ModelTypes.MANUAL_TASK, position ?? ORIGIN_POINT)],
+                'fa-plus-square'
+            ),
+            new LabeledAction(
+                'Create Merge Node',
+                [new CreateNodeOperation(ModelTypes.MERGE_NODE, position ?? ORIGIN_POINT)],
+                'fa-plus-square'
+            ),
+            new LabeledAction(
+                'Create Decision Node',
+                [new CreateNodeOperation(ModelTypes.DECISION_NODE, position ?? ORIGIN_POINT)],
+                'fa-plus-square'
+            ),
+            new LabeledAction('Create Category', [new CreateNodeOperation(ModelTypes.CATEGORY, position ?? ORIGIN_POINT)], 'fa-plus-square')
+        );
+        // Create edge action between two nodes
+        if (selectedElements.length === 1) {
+            const element = selectedElements[0];
+            if (element instanceof GNode) {
+                actions.push(...this.createEdgeActions(element, index.getAllByClass(TaskNode)));
+            }
+        } else if (selectedElements.length === 2) {
+            const source = selectedElements[0];
+            const target = selectedElements[1];
+            if (source instanceof TaskNode && target instanceof TaskNode) {
+                actions.push(
+                    this.createEdgeAction(`Create Edge from ${this.getLabel(source)} to ${this.getLabel(target)}`, source, target)
+                );
+                actions.push(
+                    this.createWeightedEdgeAction(
+                        `Create Weighted Edge from ${this.getLabel(source)} to ${this.getLabel(target)}`,
+                        source,
+                        target
+                    )
+                );
+            }
+        }
+        // Delete action
+        if (selectedElements.length === 1) {
+            actions.push(new LabeledAction('Delete', [new DeleteElementOperation(selectedElementIds)], 'fa-minus-square'));
+        } else if (selectedElements.length > 1) {
+            actions.push(new LabeledAction('Delete All', [new DeleteElementOperation(selectedElementIds)], 'fa-minus-square'));
+        }
+
+        return actions;
+    }
+
+    private createEdgeActions(source: GNode, targets: GNode[]): LabeledAction[] {
+        const actions: LabeledAction[] = [];
+        targets.forEach(node => actions.push(this.createEdgeAction(`Create Edge to ${this.getLabel(node)}`, source, node)));
+        targets.forEach(node =>
+            actions.push(this.createWeightedEdgeAction(`Create Weighted Edge to ${this.getLabel(node)}`, source, node))
+        );
+        return actions;
+    }
+
+    private createWeightedEdgeAction(label: string, source: GNode, node: GNode): LabeledAction {
+        return new LabeledAction(label, [new CreateEdgeOperation(ModelTypes.WEIGHTED_EDGE, source.id, node.id)], 'fa-plus-square');
+    }
+
+    private createEdgeAction(label: string, source: GNode, node: GNode): LabeledAction {
+        return new LabeledAction(label, [new CreateEdgeOperation(DefaultTypes.EDGE, source.id, node.id)], 'fa-plus-square');
+    }
+
+    private getLabel(node: GNode): string {
+        if (node instanceof TaskNode) {
+            return node.name;
+        }
+        return node.id;
+    }
+}

package/src/provider/workflow-context-menu-item-provider.ts

@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Args, ContextMenuItemProvider, CreateNodeOperation, GModelState, MenuItem, Point } from '@eclipse-glsp/server-node';
+import { inject, injectable } from 'inversify';
+import { GridSnapper } from '../handler/grid-snapper';
+import { ModelTypes } from '../util/model-types';
+
+@injectable()
+export class WorkflowContextMenuItemProvider extends ContextMenuItemProvider {
+    @inject(GModelState)
+    protected modelState: GModelState;
+
+    getItems(selectedElementIds: string[], position: Point, args?: Args): MenuItem[] {
+        if (this.modelState.isReadonly) {
+            return [];
+        }
+        const snappedPosition = GridSnapper.snap(position);
+        const newAutTask = new MenuItem('newAutoTask', 'Automated Task', [
+            new CreateNodeOperation(ModelTypes.AUTOMATED_TASK, snappedPosition)
+        ]);
+        const newManTask = new MenuItem('newManualTask', 'Manual Task', [new CreateNodeOperation(ModelTypes.MANUAL_TASK, snappedPosition)]);
+        const newChildMenu = new MenuItem('new', 'New', undefined, [newAutTask, newManTask], 'add', '0_new');
+        return [newChildMenu];
+    }
+}

package/src/util/model-types.ts

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+/* eslint-disable @typescript-eslint/padding-line-between-statements */
+export namespace ModelTypes {
+    export const LABEL_HEADING = 'label:heading';
+    export const LABEL_TEXT = 'label:text';
+    export const COMP_HEADER = 'comp:header';
+    export const LABEL_ICON = 'label:icon';
+    export const WEIGHTED_EDGE = 'edge:weighted';
+    export const ICON = 'icon';
+    export const ACTIVITY_NODE = 'activityNode';
+    export const DECISION_NODE = `${ACTIVITY_NODE}:decision`;
+    export const MERGE_NODE = `${ACTIVITY_NODE}:merge`;
+    export const FORK_NODE = `${ACTIVITY_NODE}:fork`;
+    export const JOIN_NODE = `${ACTIVITY_NODE}:join`;
+    export const TASK = 'task';
+    export const MANUAL_TASK = `${TASK}:manual`;
+    export const AUTOMATED_TASK = `${TASK}:automated`;
+    export const CATEGORY = 'category';
+    export const STRUCTURE = 'struct';
+
+    export function toNodeType(type: string): string {
+        switch (type) {
+            case DECISION_NODE:
+                return 'decisionNode';
+            case MERGE_NODE:
+                return 'mergeNode';
+            case FORK_NODE:
+                return 'forkNode';
+            case JOIN_NODE:
+                return 'joinNode';
+            case MANUAL_TASK:
+                return 'manual';
+            case AUTOMATED_TASK:
+                return 'automated';
+            case CATEGORY:
+                return 'category';
+            default:
+                return 'unknown';
+        }
+    }
+}

package/src/workflow-diagram-configuration.ts

@@ -0,0 +1,122 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { DefaultTypes, EdgeTypeHint, ShapeTypeHint } from '@eclipse-glsp/protocol';
+import {
+    DiagramConfiguration,
+    GCompartment,
+    GEdge,
+    getDefaultMapping,
+    GLabel,
+    GModelElementConstructor,
+    ServerLayoutKind
+} from '@eclipse-glsp/server-node';
+import { injectable } from 'inversify';
+import { ActivityNode, Category, TaskNode } from './graph-extension';
+import { ModelTypes as types } from './util/model-types';
+
+@injectable()
+export class WorkflowDiagramConfiguration implements DiagramConfiguration {
+    get typeMapping(): Map<string, GModelElementConstructor> {
+        const mapping = getDefaultMapping();
+        mapping.set(types.LABEL_HEADING, GLabel);
+        mapping.set(types.LABEL_TEXT, GLabel);
+        mapping.set(types.COMP_HEADER, GCompartment);
+        mapping.set(types.LABEL_ICON, GLabel);
+        mapping.set(types.WEIGHTED_EDGE, GEdge);
+        mapping.set(types.ICON, GCompartment);
+        mapping.set(types.ACTIVITY_NODE, ActivityNode);
+        mapping.set(types.TASK, TaskNode);
+        mapping.set(types.CATEGORY, Category);
+        mapping.set(types.STRUCTURE, GCompartment);
+        return mapping;
+    }
+
+    get shapeTypeHints(): ShapeTypeHint[] {
+        return [
+            createDefaultShapeTypeHint(types.MANUAL_TASK),
+            createDefaultShapeTypeHint(types.AUTOMATED_TASK),
+            createDefaultShapeTypeHint(types.FORK_NODE),
+            createDefaultShapeTypeHint(types.JOIN_NODE),
+            createDefaultShapeTypeHint(types.DECISION_NODE),
+            createDefaultShapeTypeHint(types.MERGE_NODE),
+            {
+                elementTypeId: types.CATEGORY,
+                repositionable: true,
+                deletable: true,
+                resizable: true,
+                reparentable: true,
+                containableElementTypeIds: [
+                    types.DECISION_NODE,
+                    types.MERGE_NODE,
+                    types.FORK_NODE,
+                    types.JOIN_NODE,
+                    types.AUTOMATED_TASK,
+                    types.MANUAL_TASK,
+                    types.CATEGORY
+                ]
+            }
+        ];
+    }
+
+    get edgeTypeHints(): EdgeTypeHint[] {
+        return [
+            createDefaultEdgeTypeHint(DefaultTypes.EDGE),
+            {
+                elementTypeId: types.WEIGHTED_EDGE,
+                repositionable: true,
+                deletable: true,
+                routable: true,
+                sourceElementTypeIds: [types.DECISION_NODE],
+                targetElementTypeIds: [types.MANUAL_TASK, types.AUTOMATED_TASK, types.FORK_NODE, types.JOIN_NODE]
+            }
+        ];
+    }
+
+    layoutKind = ServerLayoutKind.MANUAL;
+    needsClientLayout = true;
+    animatedUpdate = true;
+}
+
+export function createDefaultShapeTypeHint(elementId: string): ShapeTypeHint {
+    return { elementTypeId: elementId, repositionable: true, deletable: true, resizable: true, reparentable: true };
+}
+
+export function createDefaultEdgeTypeHint(elementId: string): EdgeTypeHint {
+    return {
+        elementTypeId: elementId,
+        repositionable: true,
+        deletable: true,
+        routable: true,
+        sourceElementTypeIds: [
+            types.MANUAL_TASK,
+            types.AUTOMATED_TASK,
+            types.DECISION_NODE,
+            types.MERGE_NODE,
+            types.FORK_NODE,
+            types.JOIN_NODE,
+            types.CATEGORY
+        ],
+        targetElementTypeIds: [
+            types.MANUAL_TASK,
+            types.AUTOMATED_TASK,
+            types.DECISION_NODE,
+            types.MERGE_NODE,
+            types.FORK_NODE,
+            types.JOIN_NODE,
+            types.CATEGORY
+        ]
+    };
+}

package/src/workflow-diagram-module.ts

@@ -0,0 +1,107 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+    ClassMultiBinding,
+    CommandPaletteActionProvider,
+    ContextMenuItemProvider,
+    DefaultToolPaletteItemProvider,
+    DiagramConfiguration,
+    GLSPServer,
+    GModelDiagramModule,
+    GModelIndex,
+    InstanceMultiBinding,
+    JsonRpcGLSPServer,
+    LabelEditValidator,
+    ModelValidator,
+    NavigationTargetProvider,
+    NavigationTargetResolver,
+    OperationHandlerConstructor,
+    PopupModelFactory,
+    ServerModule,
+    ToolPaletteItemProvider
+} from '@eclipse-glsp/server-node';
+import { injectable, interfaces } from 'inversify';
+import { CreateAutomatedTaskHandler } from './handler/create-automated-task-handler';
+import { CreateCategoryHandler } from './handler/create-category-handler';
+import { CreateDecisionNodeHandler } from './handler/create-decision-node-handler';
+import { CreateEdgeHandler } from './handler/create-edge-handler';
+import { CreateForkNodeHandler } from './handler/create-fork-node-handler';
+import { CreateJoinNodeHandler } from './handler/create-join-node-handler';
+import { CreateManualTaskHandler } from './handler/create-manual-task-handler';
+import { CreateMergeNodeHandler } from './handler/create-merge-node-handler';
+import { CreateWeightedEdgeHandler } from './handler/create-weighted-edge-handler';
+import { WorkflowLabelEditValidator } from './labeledit/workflow-label-edit-validator';
+import { WorkflowModelValidator } from './marker/workflow-model-validator';
+import { WorkflowNavigationTargetResolver } from './model/workflow-navigation-target-resolver';
+import { NextNodeNavigationTargetProvider } from './provider/next-node-navigation-target-provider';
+import { NodeDocumentationNavigationTargetProvider } from './provider/node-documentation-navigation-target-provider';
+import { PreviousNodeNavigationTargetProvider } from './provider/previous-node-navigation-target-provider';
+import { WorkflowCommandPaletteActionProvider } from './provider/workflow-command-palette-action-provider';
+import { WorkflowContextMenuItemProvider } from './provider/workflow-context-menu-item-provider';
+import { WorkflowDiagramConfiguration } from './workflow-diagram-configuration';
+import { WorkflowGLSPServer } from './workflow-glsp-server';
+import { WorkflowModelIndex } from './workflow-model-index';
+import { WorkflowPopupFactory } from './workflow-popup-factory';
+
+@injectable()
+export class WorkflowServerModule extends ServerModule {
+    configure(bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind): void {
+        super.configure(bind, unbind, isBound, rebind);
+        bind(WorkflowGLSPServer).toSelf().inSingletonScope();
+        rebind(GLSPServer).toService(WorkflowGLSPServer);
+        rebind(JsonRpcGLSPServer).toService(WorkflowGLSPServer);
+    }
+}
+
+@injectable()
+export class WorkflowDiagramModule extends GModelDiagramModule {
+    get diagramType(): string {
+        return 'workflow-diagram';
+    }
+
+    protected configure(bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind): void {
+        super.configure(bind, unbind, isBound, rebind);
+        bind(DiagramConfiguration).to(WorkflowDiagramConfiguration).inSingletonScope();
+        bind(NavigationTargetResolver).to(WorkflowNavigationTargetResolver).inSingletonScope();
+        bind(ContextMenuItemProvider).to(WorkflowContextMenuItemProvider).inSingletonScope();
+        bind(CommandPaletteActionProvider).to(WorkflowCommandPaletteActionProvider).inSingletonScope();
+        bind(LabelEditValidator).to(WorkflowLabelEditValidator).inSingletonScope();
+        bind(PopupModelFactory).to(WorkflowPopupFactory).inSingletonScope();
+        bind(ModelValidator).to(WorkflowModelValidator).inSingletonScope();
+        bind(ToolPaletteItemProvider).to(DefaultToolPaletteItemProvider).inSingletonScope();
+        rebind(GModelIndex).to(WorkflowModelIndex).inSingletonScope();
+    }
+
+    protected configureOperationHandlers(binding: InstanceMultiBinding<OperationHandlerConstructor>): void {
+        super.configureOperationHandlers(binding);
+        binding.add(CreateAutomatedTaskHandler);
+        binding.add(CreateManualTaskHandler);
+        binding.add(CreateJoinNodeHandler);
+        binding.add(CreateForkNodeHandler);
+        binding.add(CreateEdgeHandler);
+        binding.add(CreateWeightedEdgeHandler);
+        binding.add(CreateMergeNodeHandler);
+        binding.add(CreateDecisionNodeHandler);
+        binding.add(CreateCategoryHandler);
+    }
+
+    protected configureNavigationTargetProviders(binding: ClassMultiBinding<NavigationTargetProvider>): void {
+        super.configureNavigationTargetProviders(binding);
+        binding.add(NextNodeNavigationTargetProvider);
+        binding.add(PreviousNodeNavigationTargetProvider);
+        binding.add(NodeDocumentationNavigationTargetProvider);
+    }
+}

package/src/workflow-glsp-server.ts

@@ -0,0 +1,37 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Args, ArgsUtil, DefaultGLSPServer, InitializeResult, Logger, MaybePromise } from '@eclipse-glsp/server-node';
+import { inject, injectable } from 'inversify';
+
+@injectable()
+export class WorkflowGLSPServer extends DefaultGLSPServer {
+    MESSAGE_KEY = 'message';
+    TIMESTAMP_KEY = 'timestamp';
+
+    @inject(Logger)
+    protected logger: Logger;
+
+    protected handleInitializeArgs(result: InitializeResult, args: Args | undefined): MaybePromise<InitializeResult> {
+        if (!args) {
+            return result;
+        }
+        const timestamp = ArgsUtil.get(args, this.TIMESTAMP_KEY);
+        const message = ArgsUtil.get(args, this.MESSAGE_KEY);
+
+        this.logger.debug(`${timestamp}: ${message}`);
+        return result;
+    }
+}

package/src/workflow-model-index.ts

@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { GEdge, GModelIndex } from '@eclipse-glsp/server-node';
+import { injectable } from 'inversify';
+import { ModelTypes } from './util/model-types';
+
+@injectable()
+export class WorkflowModelIndex extends GModelIndex {
+    getAllEdges(): GEdge[] {
+        const edges: GEdge[] = super.getAllEdges();
+        this.getElements(ModelTypes.WEIGHTED_EDGE).forEach(weighted => {
+            if (weighted instanceof GEdge) {
+                edges.push(weighted);
+            }
+        });
+        return edges;
+    }
+}

package/src/workflow-popup-factory.ts

@@ -0,0 +1,46 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { GModelElement, GModelRoot, GPreRenderedElement, PopupModelFactory, RequestPopupModelAction } from '@eclipse-glsp/server-node';
+import { TaskNode } from './graph-extension';
+import { injectable } from 'inversify';
+
+const NL = '<br/>';
+
+@injectable()
+export class WorkflowPopupFactory implements PopupModelFactory {
+    createPopupModel(element: GModelElement, action: RequestPopupModelAction): GModelRoot | undefined {
+        if (element && element instanceof TaskNode) {
+            const popupTitle = GPreRenderedElement.builder()
+                .id('popup-title')
+                .code(`<div class="sprotty-popup-title">${element.name}</div>`)
+                .build();
+
+            const popupBody = GPreRenderedElement.builder()
+                .id('popup-body')
+                .code(`<div class="sprotty-popup-body">${this.generateBody(element)}</div>`)
+                .build();
+
+            return GModelRoot.builder().type('html').canvasBounds(action.bounds).id('sprotty-popup').add(popupTitle).add(popupBody).build();
+        }
+        return undefined;
+    }
+
+    private generateBody(task: TaskNode): string {
+        return `Type: ${task.taskType} ${NL}
+            Duration: ${task.duration} ${NL}
+            Reference: ${task.references} ${NL}`;
+    }
+}