diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultEdge.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultEdge.tsx
deleted file mode 100644
index 6e76b383898dd..0000000000000
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultEdge.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import {
-    Edge,
-    EdgeConnectorArrow,
-    EdgeTerminalType,
-    Layer,
-    Point,
-    useBendpoint,
-    WithRemoveConnectorProps,
-    WithSourceDragProps,
-    WithTargetDragProps,
-} from '@patternfly/react-topology';
-
-type EdgeProps = {
-    element: Edge;
-    dragging?: boolean;
-} & WithSourceDragProps &
-    WithTargetDragProps &
-    WithRemoveConnectorProps;
-
-interface BendpointProps {
-    point: Point;
-}
-
-const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
-    const [hover, setHover] = React.useState(false);
-    const [, ref] = useBendpoint(point);
-    return (
-        <circle
-            ref={ref}
-            cx={point.x}
-            cy={point.y}
-            r={5}
-            fill="lightblue"
-            fillOpacity={hover ? 0.8 : 0}
-            onMouseOver={() => setHover(true)}
-            onMouseOut={() => setHover(false)}
-        />
-    );
-});
-
-const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
-    element,
-    sourceDragRef,
-    targetDragRef,
-    dragging,
-    onShowRemoveConnector,
-    onHideRemoveConnector,
-}) => {
-    const startPoint = element.getStartPoint();
-    const endPoint = element.getEndPoint();
-    const bendpoints = element.getBendpoints();
-    const d = `M${startPoint.x} ${startPoint.y} ${bendpoints
-        .map((b: Point) => `L${b.x} ${b.y} `)
-        .join('')}L${endPoint.x} ${endPoint.y}`;
-
-    return (
-        <>
-            <Layer id={dragging ? 'top' : undefined}>
-                <path
-                    strokeWidth={1}
-                    stroke={(element.getData() && element.getData().color) || 'red'}
-                    d={d}
-                    fill="none"
-                    onMouseEnter={onShowRemoveConnector}
-                    onMouseLeave={onHideRemoveConnector}
-                />
-                {sourceDragRef && (
-                    <circle
-                        ref={sourceDragRef}
-                        r={8}
-                        cx={startPoint.x}
-                        cy={startPoint.y}
-                        fillOpacity={0}
-                    />
-                )}
-                <EdgeConnectorArrow
-                    dragRef={targetDragRef}
-                    edge={element}
-                    terminalType={EdgeTerminalType.directional}
-                />
-            </Layer>
-            {bendpoints && bendpoints.map((p, i) => <Bendpoint point={p} key={i.toString()} />)}
-        </>
-    );
-};
-
-export default observer(DefaultEdge);
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultGroup.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultGroup.tsx
deleted file mode 100644
index f62a294db482d..0000000000000
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/DefaultGroup.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import {
-    useCombineRefs,
-    WithDragNodeProps,
-    WithSelectionProps,
-    Node,
-    Rect,
-    Layer,
-    WithDndDropProps,
-    WithDndDragProps,
-    useAnchor,
-    RectAnchor,
-} from '@patternfly/react-topology';
-
-type GroupProps = {
-    children?: React.ReactNode;
-    element: Node;
-    droppable?: boolean;
-    hover?: boolean;
-    canDrop?: boolean;
-} & WithSelectionProps &
-    WithDragNodeProps &
-    WithDndDragProps &
-    WithDndDropProps;
-
-const DefaultGroup: React.FunctionComponent<GroupProps> = ({
-    element,
-    children,
-    selected,
-    onSelect,
-    dragNodeRef,
-    dndDragRef,
-    dndDropRef,
-    droppable,
-    hover,
-    canDrop,
-}) => {
-    // @ts-expect-error TODO: raise type error issue with patternfly/react-topology team
-    useAnchor(RectAnchor);
-    const boxRef = React.useRef<Rect | null>(null);
-    const refs = useCombineRefs<SVGRectElement>(
-        dragNodeRef as React.Ref<SVGRectElement>,
-        dndDragRef,
-        dndDropRef
-    );
-
-    if (!droppable || !boxRef.current) {
-        // change the box only when not dragging
-        boxRef.current = element.getBounds();
-    }
-    let fill = '#ededed';
-    if (canDrop && hover) {
-        fill = 'lightgreen';
-    } else if (canDrop && droppable) {
-        fill = 'lightblue';
-    } else if (element.getData()) {
-        fill = element.getData().background;
-    }
-
-    if (element.isCollapsed()) {
-        const { width, height } = element.getDimensions();
-        return (
-            <g>
-                <rect
-                    ref={refs}
-                    x={0}
-                    y={0}
-                    width={width}
-                    height={height}
-                    rx={5}
-                    ry={5}
-                    fill={fill}
-                    strokeWidth={2}
-                    stroke={selected ? 'blue' : '#cdcdcd'}
-                />
-            </g>
-        );
-    }
-
-    return (
-        <Layer id="groups">
-            <rect
-                ref={refs}
-                onClick={onSelect}
-                x={boxRef.current.x}
-                y={boxRef.current.y}
-                width={boxRef.current.width}
-                height={boxRef.current.height}
-                fill={fill}
-                strokeWidth={2}
-                stroke={selected ? 'blue' : '#cdcdcd'}
-            />
-            {children}
-        </Layer>
-    );
-};
-
-export default observer(DefaultGroup);
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/DemoDefaultNode.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/DemoDefaultNode.tsx
deleted file mode 100644
index ed1751387def1..0000000000000
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/DemoDefaultNode.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import * as React from 'react';
-import classNames from 'classnames';
-import { observer } from 'mobx-react';
-import {
-    WithCreateConnectorProps,
-    Node,
-    WithContextMenuProps,
-    WithDragNodeProps,
-    WithSelectionProps,
-    WithDndDragProps,
-    WithDndDropProps,
-    useCombineRefs,
-    useHover,
-    getShapeComponent,
-    ShapeProps,
-} from '@patternfly/react-topology';
-
-type DemoDefaultNodeProps = {
-    element: Node;
-    canDrop?: boolean;
-    getCustomShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
-} & WithSelectionProps &
-    WithDragNodeProps &
-    WithDndDragProps &
-    WithDndDropProps &
-    WithCreateConnectorProps &
-    WithContextMenuProps;
-
-const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
-    element,
-    selected,
-    onSelect,
-    dragNodeRef,
-    dndDragRef,
-    canDrop,
-    dndDropRef,
-    getCustomShape,
-    onHideCreateConnector,
-    onShowCreateConnector,
-    onContextMenu,
-}) => {
-    const [hover, hoverRef] = useHover();
-    const refs = useCombineRefs(hoverRef, dragNodeRef as React.Ref<Element>, dndDragRef);
-    const { width, height } = element.getDimensions();
-
-    const className = classNames('pf-ri-topology__node__background', {
-        'pf-m-hover': canDrop && hover,
-        'pf-m-selected': selected,
-    });
-    const ShapeComponent =
-        (getCustomShape && getCustomShape(element)) || getShapeComponent(element);
-
-    React.useEffect(() => {
-        if (hover) {
-            onShowCreateConnector && onShowCreateConnector();
-        } else {
-            onHideCreateConnector && onHideCreateConnector();
-        }
-    }, [hover, onShowCreateConnector, onHideCreateConnector]);
-
-    return (
-        <g
-            ref={refs as React.LegacyRef<SVGGElement>}
-            onClick={onSelect}
-            onContextMenu={onContextMenu}
-        >
-            <ShapeComponent
-                className={className}
-                element={element}
-                width={width}
-                height={height}
-                dndDropRef={dndDropRef}
-            />
-        </g>
-    );
-};
-
-export default observer(DemoDefaultNode);
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/StyleEdge.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/StyleEdge.tsx
index ad736bd4ce28b..7069b42fdfc1b 100644
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/StyleEdge.tsx
+++ b/ui/apps/platform/src/Containers/NetworkGraph/components/StyleEdge.tsx
@@ -1,24 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {
-    DefaultEdge,
-    Edge,
-    WithContextMenuProps,
-    WithSelectionProps,
-} from '@patternfly/react-topology';
+import { Edge, DefaultEdge } from '@patternfly/react-topology';
 
 type StyleEdgeProps = {
     element: Edge;
-} & WithContextMenuProps &
-    WithSelectionProps;
+};
 
-const StyleEdge: React.FunctionComponent<StyleEdgeProps> = ({
-    element,
-    onContextMenu,
-    contextMenuOpen,
-    ...rest
-}) => {
+const StyleEdge: React.FunctionComponent<StyleEdgeProps> = ({ element, ...rest }) => {
     const data = element.getData();
 
     const passedData = React.useMemo(() => {
@@ -31,15 +20,7 @@ const StyleEdge: React.FunctionComponent<StyleEdgeProps> = ({
         return newData;
     }, [data]);
 
-    return (
-        <DefaultEdge
-            element={element}
-            {...rest}
-            {...passedData}
-            onContextMenu={data?.showContextMenu ? onContextMenu : undefined}
-            contextMenuOpen={contextMenuOpen}
-        />
-    );
+    return <DefaultEdge element={element} {...rest} {...passedData} />;
 };
 
 export default observer(StyleEdge);
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/StyleGroup.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/StyleGroup.tsx
index 86290186f66ae..4f647f57ed350 100644
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/StyleGroup.tsx
+++ b/ui/apps/platform/src/Containers/NetworkGraph/components/StyleGroup.tsx
@@ -6,7 +6,6 @@ import {
     observer,
     ScaleDetailsLevel,
     ShapeProps,
-    WithContextMenuProps,
     WithDragNodeProps,
     WithSelectionProps,
 } from '@patternfly/react-topology';
@@ -29,14 +28,11 @@ type StyleGroupProps = {
     onCollapseChange?: (group: Node, collapsed: boolean) => void;
     getCollapsedShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
     collapsedShadowOffset?: number; // defaults to 10
-} & WithContextMenuProps &
-    WithDragNodeProps &
+} & WithDragNodeProps &
     WithSelectionProps;
 
 const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
     element,
-    onContextMenu,
-    contextMenuOpen,
     collapsedWidth = 75,
     collapsedHeight = 75,
     ...rest
@@ -80,8 +76,6 @@ const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
 
     return (
         <DefaultGroup
-            onContextMenu={data.showContextMenu ? onContextMenu : undefined}
-            contextMenuOpen={contextMenuOpen}
             element={element}
             collapsedWidth={collapsedWidth}
             collapsedHeight={collapsedHeight}
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/defaultComponentFactory.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/defaultComponentFactory.tsx
index e5749cf802a84..898addc4ec653 100644
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/defaultComponentFactory.tsx
+++ b/ui/apps/platform/src/Containers/NetworkGraph/components/defaultComponentFactory.tsx
@@ -5,9 +5,9 @@ import {
     ModelKind,
     GraphComponent,
     DefaultNode,
+    DefaultEdge,
+    DefaultGroup,
 } from '@patternfly/react-topology';
-import Edge from './DefaultEdge';
-import Group from './DefaultGroup';
 
 // @ts-expect-error TODO: raise type error issue with patternfly/react-topology team
 const defaultComponentFactory: ComponentFactory = (
@@ -15,14 +15,14 @@ const defaultComponentFactory: ComponentFactory = (
     type: string
 ):
     | ComponentType<{ element: GraphElement }>
-    | typeof Group
+    | typeof DefaultGroup
     | typeof GraphComponent
     | typeof DefaultNode
-    | typeof Edge
+    | typeof DefaultEdge
     | typeof undefined => {
     switch (type) {
         case 'group':
-            return Group;
+            return DefaultGroup;
         default:
             switch (kind) {
                 case ModelKind.graph:
@@ -30,7 +30,7 @@ const defaultComponentFactory: ComponentFactory = (
                 case ModelKind.node:
                     return DefaultNode;
                 case ModelKind.edge:
-                    return Edge;
+                    return DefaultEdge;
                 default:
                     return undefined;
             }
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/components/stylesComponentFactory.tsx b/ui/apps/platform/src/Containers/NetworkGraph/components/stylesComponentFactory.tsx
index c96af4ce5661d..a1856e5395b9a 100644
--- a/ui/apps/platform/src/Containers/NetworkGraph/components/stylesComponentFactory.tsx
+++ b/ui/apps/platform/src/Containers/NetworkGraph/components/stylesComponentFactory.tsx
@@ -1,58 +1,19 @@
-import * as React from 'react';
 import {
     ComponentFactory,
-    withContextMenu,
-    ContextMenuSeparator,
-    ContextMenuItem,
     withDragNode,
     withSelection,
     ModelKind,
-    DragObjectWithType,
-    Node,
     withPanZoom,
     GraphComponent,
-    withCreateConnector,
-    Graph,
-    isNode,
     withDndDrop,
-    Edge,
-    withTargetDrag,
-    withSourceDrag,
     nodeDragSourceSpec,
-    nodeDropTargetSpec,
-    groupDropTargetSpec,
     graphDropTargetSpec,
     NODE_DRAG_TYPE,
-    CREATE_CONNECTOR_DROP_TYPE,
 } from '@patternfly/react-topology';
 import StyleNode from './StyleNode';
 import StyleGroup from './StyleGroup';
 import StyleEdge from './StyleEdge';
 
-const CONNECTOR_SOURCE_DROP = 'connector-src-drop';
-const CONNECTOR_TARGET_DROP = 'connector-target-drop';
-
-interface EdgeProps {
-    element: Edge;
-}
-
-const contextMenuItem = (label: string, i: number): React.ReactElement => {
-    if (label === '-') {
-        return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
-    }
-    return (
-        // eslint-disable-next-line no-alert
-        <ContextMenuItem key={label} onClick={() => alert(`Selected: ${label}`)}>
-            {label}
-        </ContextMenuItem>
-    );
-};
-
-const createContextMenuItems = (...labels: string[]): React.ReactElement[] =>
-    labels.map(contextMenuItem);
-
-const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth');
-
 const stylesComponentFactory: ComponentFactory = (kind: ModelKind, type: string): any => {
     if (kind === ModelKind.graph) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -61,99 +22,19 @@ const stylesComponentFactory: ComponentFactory = (kind: ModelKind, type: string)
     }
     switch (type) {
         case 'node':
-            return withCreateConnector((source: Node, target: Node | Graph): void => {
-                let targetId;
-                const model = source.getController().toModel();
-                if (isNode(target)) {
-                    targetId = target.getId();
-                } else {
-                    return;
-                }
-                const id = `e${source.getGraph().getEdges().length + 1}`;
-                if (!model.edges) {
-                    model.edges = [];
-                }
-                model.edges.push({
-                    id,
-                    type: 'edge',
-                    source: source.getId(),
-                    target: targetId,
-                });
-                source.getController().fromModel(model);
-            })(
+            return withDragNode(nodeDragSourceSpec('node', true, true))(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-
-                withDndDrop(
-                    nodeDropTargetSpec([
-                        CONNECTOR_SOURCE_DROP,
-                        CONNECTOR_TARGET_DROP,
-                        CREATE_CONNECTOR_DROP_TYPE,
-                    ])
-                )(
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    withContextMenu(() => defaultMenu)(
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-
-                        withDragNode(nodeDragSourceSpec('node', true, true))(
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            withSelection()(StyleNode)
-                        )
-                    )
-                )
+                withSelection()(StyleNode)
             );
         case 'group':
-            return withDndDrop(groupDropTargetSpec)(
+            return withDragNode(nodeDragSourceSpec('group'))(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                withContextMenu(() => defaultMenu)(
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    withDragNode(nodeDragSourceSpec('group'))(withSelection()(StyleGroup))
-                )
+                withSelection()(StyleGroup)
             );
         case 'edge':
-            return withSourceDrag<DragObjectWithType, Node, any, EdgeProps>({
-                item: { type: CONNECTOR_SOURCE_DROP },
-                begin: (monitor, props) => {
-                    props.element.raise();
-                    return props.element;
-                },
-                drag: (event, monitor, props) => {
-                    props.element.setStartPoint(event.x, event.y);
-                },
-                end: (dropResult, monitor, props) => {
-                    if (monitor.didDrop() && dropResult && props) {
-                        props.element.setSource(dropResult);
-                    }
-                    props.element.setStartPoint();
-                },
-            })(
-                withTargetDrag<DragObjectWithType, Node, { dragging?: boolean }, EdgeProps>({
-                    item: { type: CONNECTOR_TARGET_DROP },
-                    begin: (monitor, props) => {
-                        props.element.raise();
-                        return props.element;
-                    },
-                    drag: (event, monitor, props) => {
-                        props.element.setEndPoint(event.x, event.y);
-                    },
-                    end: (dropResult, monitor, props) => {
-                        if (monitor.didDrop() && dropResult && props) {
-                            props.element.setTarget(dropResult);
-                        }
-                        props.element.setEndPoint();
-                    },
-                    collect: (monitor) => ({
-                        dragging: monitor.isDragging(),
-                    }),
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                })(withContextMenu(() => defaultMenu)(withSelection()(StyleEdge)))
-            );
+            return StyleEdge;
         default:
             return undefined;
     }