### Topology Pipelines Getting Started Demo

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md

Example demonstrating the setup and usage of the Topology Pipelines component, including controller registration and data model creation.

```typescript
import { useEffect } from 'react';
import {
  TopologyView,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  useVisualizationController,
  DefaultTaskGroup,
  GraphComponent,
  ModelKind,
  SpacerNode,
  TaskEdge,
  FinallyNode,
  DEFAULT_FINALLY_NODE_TYPE,
  DEFAULT_TASK_NODE_TYPE,
  DEFAULT_EDGE_TYPE,
  DEFAULT_SPACER_NODE_TYPE,
  DEFAULT_WHEN_OFFSET,
  TaskNode,
  WhenDecorator,
  RunStatus,
  getEdgesFromNodes,
  getSpacerNodes,
  PipelineDagreLayout
} from '@patternfly/react-topology';

import './topology-pipelines-example.css';

// The following code is a conceptual representation of the demo setup.
// Actual implementation would involve defining nodes, edges, and controller logic.

// Example of controller setup:
// const controller = new Visualization();
// controller.registerLayoutFactory(() => new PipelineDagreLayout());
// controller.registerComponentFactory(...);
// controller.registerElementFactory(...);

// Example of data model creation:
// const nodes = [...]; // PipelineNodeModel[]
// const spacerNodes = getSpacerNodes(nodes);
// const allNodes = [...nodes, ...spacerNodes];
// const edges = getEdgesFromNodes(allNodes);
// const model = {
//   graph: {
//     id: 'pipeline-graph',
//     type: 'graph',
//     layout: {
//       type: 'PipelineDagreLayout'
//     }
//   },
//   nodes: allNodes,
//   edges: edges
// };

// Example of component usage:
// <VisualizationProvider controller={controller}>
//   <TopologyView>
//     <VisualizationSurface state={model} />
//   </TopologyView>
// </VisualizationProvider>

```

--------------------------------

### Start React Topology Docs Workspace

Source: https://github.com/patternfly/react-topology/blob/main/packages/demo-app-ts/README.md

Installs project dependencies using yarn and starts the development server for the PatternFly React Topology documentation workspace. This command should be run in the project's root directory.

```shell
yarn install
yarn start
```

--------------------------------

### Demo App Running Confirmation

Source: https://github.com/patternfly/react-topology/blob/main/packages/demo-app-ts/README.md

Example output message from the development server confirming that the demo app is running and providing the local URL for access in a browser.

```shell
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
```

--------------------------------

### React Topology Getting Started Demo

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/AboutTopology.md

This snippet refers to a demo application file for Patternfly React Topology, located in the `react-topology` repository. The actual code is external to this documentation.

```typescript
// Code from './TopologyGettingStartedDemo.tsx' is not provided in the input text.
// This entry serves as a placeholder for the external demo application code.
```

--------------------------------

### PatternFly React Topology Visualization Setup

Source: https://github.com/patternfly/react-topology/blob/main/README.md

This TypeScript example demonstrates the core setup for a PatternFly React Topology visualization. It defines nodes, edges, and groups, initializes a Visualization controller, registers layout and component factories, and configures event listeners for user interactions like selection.

```TypeScript
import { memo, useState, useMemo } from 'react';
import {
  EdgeStyle,
  Model,
  NodeShape,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface
} from '@patternfly/react-topology';
import defaultLayoutFactory from './layouts/defaultLayoutFactory';
import defaultComponentFactory from './components/defaultComponentFactory';

const NODE_SHAPE = NodeShape.ellipse;
const NODE_DIAMETER = 75;

const NODES = [
  {
    id: 'node-0',
    type: 'node',
    label: 'Node 0',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'node-1',
    type: 'node',
    label: 'Node 1',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'node-2',
    type: 'node',
    label: 'Node 2',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'node-3',
    type: 'node',
    label: 'Node 3',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'node-4',
    type: 'node',
    label: 'Node 4',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'node-5',
    type: 'node',
    label: 'Node 5',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NODE_SHAPE
  },
  {
    id: 'Group-1',
    children: ['node-0', 'node-1', 'node-2', 'node-3'],
    type: 'group-hull',
    group: true,
    label: 'Group-1',
    style: {
      padding: 15
    }
  }
];

const EDGES = [
  {
    id: 'edge-node-4-node-5',
    type: 'edge',
    source: 'node-4',
    target: 'node-5',
    edgeStyle: EdgeStyle.default
  },
  {
    id: 'edge-node-0-node-2',
    type: 'edge',
    source: 'node-0',
    target: 'node-2',
    edgeStyle: EdgeStyle.default
  }
];

export const TopologyBaselineDemo = memo(() => {
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  const controller = useMemo(() => {
    const model: Model = {
      nodes: NODES,
      edges: EDGES,
      graph: {
        id: 'g1',
        type: 'graph',
        layout: 'Cola'
      }
    };

    const newController = new Visualization();
    newController.registerLayoutFactory(defaultLayoutFactory);
    newController.registerComponentFactory(defaultComponentFactory);

    newController.addEventListener(SELECTION_EVENT, setSelectedIds);

    newController.fromModel(model, false);

    return newController;
  }, []);

  return (
    <VisualizationProvider controller={controller}>
      <VisualizationSurface state={{ selectedIds }} />
    </VisualizationProvider>
  );
});

```

--------------------------------

### Install Node LTS and Yarn

Source: https://github.com/patternfly/react-topology/blob/main/README.md

Commands to install and switch Node.js versions using nvm, and instructions for installing Yarn. These are prerequisites for using the react-topology package.

```bash
nvm install 8
nvm use 8
```

--------------------------------

### Install @patternfly/react-topology with Yarn

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/AboutTopology.md

Installs the PatternFly React Topology package using Yarn. This command is used to add the necessary library to your project's dependencies for building topology visualizations.

```Bash
yarn add @patternfly/react-topology
```

--------------------------------

### React Topology Component Setup

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/AboutTopology.md

Demonstrates the basic setup for using PatternFly's Topology components in a React application. It includes necessary imports for layout, nodes, edges, and visualization providers, setting the stage for creating interactive topology diagrams.

```TypeScript
import { useState, useMemo } from 'react';
import {
  ColaLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  ModelKind,
  NodeShape,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

```

--------------------------------

### Clone Topology Project

Source: https://github.com/patternfly/react-topology/blob/main/packages/demo-app-ts/README.md

Clones the PatternFly React Topology project from GitHub and navigates into the local directory. This is a necessary step before running the demo application.

```shell
git clone https://github.com/patternfly/react-topology.git
cd react-topology
```

--------------------------------

### Topology React Component Setup

Source: https://github.com/patternfly/react-topology/blob/main/README.md

Demonstrates the basic structure for setting up a Topology view in a React application, including initializing a controller and wrapping components.

```jsx
import React from 'react';
import { VisualizationProvider } from '@patternfly/react-topology';
import { VisualizationSurface } from '@patternfly/react-topology';
import { useVisualizationController } from '@patternfly/react-topology';

const TopologyComponent = () => {
  const controller = useVisualizationController();

  return (
    <VisualizationProvider controller={controller}>
      <TopologyView state={yourAppState}>
        <VisualizationSurface />
      </TopologyView>
    </VisualizationProvider>
  );
};

export default TopologyComponent;
```

--------------------------------

### Install @patternfly/react-topology with npm

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/AboutTopology.md

Installs the PatternFly React Topology package using npm. This command is an alternative for users who prefer npm as their package manager to add the topology library to their project.

```Bash
npm install @patternfly/react-topology --save
```

--------------------------------

### Run Demo App

Source: https://github.com/patternfly/react-topology/blob/main/packages/demo-app-ts/README.md

Navigates to the demo app's directory and launches the demo application using a hot-reloading development server. This command should be executed in a separate terminal window.

```shell
cd packages/demo-app-ts
yarn start:demo-app:hot
```

--------------------------------

### Install react-topology Package

Source: https://github.com/patternfly/react-topology/blob/main/README.md

Instructions for adding the PatternFly Topology package to your project using either Yarn or npm package managers.

```bash
yarn add @patternfly/react-topology
```

```bash
npm install @patternfly/react-topology --save
```

--------------------------------

### Topology Context Menu Example

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md

Demonstrates how to use the `withContextMenu` utility to add context menus to Topology elements. It shows the necessary imports and how to integrate context menu functionality with components like `DefaultNode`.

```TypeScript
import { useMemo } from 'react';
import {
  ColaLayout,
  ContextMenuItem,
  ContextMenuSeparator,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  ModelKind,
  NodeShape,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withContextMenu
} from '@patternfly/react-topology';

import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import './topology-example.css';

// Example usage of withContextMenu with DefaultNode
const TopologyNodeWithContextMenu = withContextMenu(DefaultNode);

// Example component structure (simplified)
const TopologyContextMenuDemo = ({ element }) => {
  const contextMenu = useMemo(() => [
    {
      id: 'edit',
      label: 'Edit',
      callback: () => { console.log('Edit clicked', element.id); },
    },
    {
      id: 'delete',
      label: 'Delete',
      callback: () => { console.log('Delete clicked', element.id); },
    },
    ContextMenuSeparator
  ], [element]);

  return (
    <VisualizationProvider>
      <VisualizationSurface />
      <GraphComponent
        // ... other props
        customNodeFactory={({ node }) => (
          <TopologyNodeWithContextMenu
            key={node.id}
            element={node}
            contextMenu={contextMenu}
            // ... other props for DefaultNode
          />
        )}
      />
    </VisualizationProvider>
  );
};

export default TopologyContextMenuDemo;

```

--------------------------------

### Custom Edge Component Example

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyCustomEdges.md

Demonstrates the implementation of a custom edge component within the PatternFly React Topology library. This example showcases how to integrate custom logic and rendering for edges, utilizing various components and hooks provided by the library.

```typescript
import {
  ColaLayout,
  CREATE_CONNECTOR_DROP_TYPE,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeAnimationSpeed,
  EdgeStyle,
  EdgeTerminalType,
  GraphComponent,
  LabelPosition,
  ModelKind,
  nodeDragSourceSpec,
  nodeDropTargetSpec,
  NodeShape,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withDndDrop,
  withDragNode,
  withSelection
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// The actual content of TopologyCustomEdgesDemo.tsx would go here.
// This snippet represents the file structure and imports for the example.
```

--------------------------------

### Topology Selection Example

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologySelectable.md

Demonstrates how to enable selection for nodes and edges in a topology view using the `withSelection` utility and managing selection state.

```tsx
import { useState, useMemo } from 'react';
import {
  ColaLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  ModelKind,
  NodeShape,
  NodeStatus,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withSelection
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// Example usage of withSelection utility
const MySelectableNode = withSelection()(DefaultNode);

const TopologySelectableDemo = () => {
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

  const onSelect = (ids: string[]) => {
    setSelectedIds(new Set(ids));
  };

  const controller = useMemo(() => {
    const controller = new Visualization();
    controller.registerComponentFactory((kind, type) => {
      if (kind === ModelKind.topology) {
        return VisualizationSurface;
      }
      if (kind === ModelKind.graph) {
        return GraphComponent;
      }
      if (kind === ModelKind.group) {
        return DefaultGroup;
      }
      if (kind === ModelKind.edge) {
        return DefaultEdge;
      }
      if (kind === ModelKind.node) {
        // Use the enhanced node component that supports selection
        return MySelectableNode;
      }
      return undefined;
    });
    controller.addEventListener(SELECTION_EVENT, ({ deselected, selected }) => {
      const newSelectedIds = new Set(selectedIds);
      deselected.forEach(id => newSelectedIds.delete(id));
      selected.forEach(id => newSelectedIds.add(id));
      setSelectedIds(newSelectedIds);
    });
    return controller;
  }, [selectedIds]); // Re-create controller if selectedIds change

  const elements = useMemo(() => ({
    id: 'topology-example',
    name: 'Topology',
    children: [
      {
        id: 'node-1',
        name: 'Node 1',
        group: 'group-1',
        data: {
          icon: <Icon1 />,
          // Pass selection state to the node
          selected: selectedIds.has('node-1')
        },
        type: 'node',
        render: 'node'
      },
      {
        id: 'node-2',
        name: 'Node 2',
        data: {
          icon: <Icon2 />,
          selected: selectedIds.has('node-2')
        },
        type: 'node',
        render: 'node'
      },
      {
        id: 'group-1',
        name: 'Group 1',
        type: 'group',
        children: [],
        render: 'group'
      }
    ]
  }), [selectedIds]);

  return (
    <VisualizationProvider controller={controller} graphElements={elements}>
      <div className="topology-content">
        <VisualizationSurface />
      </div>
    </VisualizationProvider>
  );
};

export default TopologySelectableDemo;

```

--------------------------------

### Topology Control Bar Example

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyControlBar.md

Demonstrates the integration of the TopologyControlBar component within a TopologyView, showcasing how to enable interactive graph controls.

```typescript
import { useState, useMemo } from 'react';
import {
  action,
  ColaLayout,
  createTopologyControlButtons,
  defaultControlButtonsOptions,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  ModelKind,
  NodeShape,
  SELECTION_EVENT,
  TopologyControlBar,
  TopologyView,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withPanZoom,
  withSelection
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// Assuming controller and graph setup exists elsewhere for the demo
// const controller = ...;

const TopologyControlBarDemo = () => {
  // Example state and memoization for graph elements
  const [nodes, setNodes] = useState<any[]>([]);
  const [edges, setEdges] = useState<any[]>([]);

  const controller = useMemo(() => {
    // Placeholder for actual controller initialization
    return {
      getGraph: () => ({
        scaleBy: (factor: number) => console.log(`Scaling by ${factor}`),
        fit: (margin: number) => console.log(`Fitting with margin ${margin}`),
        reset: () => console.log('Resetting view'),
        layout: () => console.log('Running layout')
      })
    };
  }, []);

  const controlButtons = useMemo(() => {
    return createTopologyControlButtons({
      ...defaultControlButtonsOptions,
      zoomInCallback: action(() => {
        controller.getGraph().scaleBy(4 / 3);
      }),
      zoomOutCallback: action(() => {
        controller.getGraph().scaleBy(0.75);
      }),
      fitToScreenCallback: action(() => {
        controller.getGraph().fit(80);
      }),
      resetViewCallback: action(() => {
        controller.getGraph().reset();
        controller.getGraph().layout();
      }),
      legendCallback: action(() => {
        // application specific code to show a legend (no default support)
        console.log('Legend button clicked');
      })
    });
  }, [controller]);

  return (
    <TopologyView
      controlBar={(
        <TopologyControlBar
          controlButtons={controlButtons}
        />
      )}
      id="topology-control-bar-demo"
    >
      <VisualizationProvider>
        <VisualizationSurface />
      </VisualizationProvider>
    </TopologyView>
  );
};

export default TopologyControlBarDemo;

```

--------------------------------

### Topology Toolbar Integration Example

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyToolbar.md

Demonstrates how to integrate a toolbar into a PatternFly React Topology view. It shows wrapping the `VisualizationProvider` with `<TopologyView>` and utilizing `viewToolbar` and `contextToolbar` properties for UI controls. It also touches upon retrieving and reacting to controller state within custom node components.

```typescript
import { useState, useMemo } from 'react';
import {
  BadgeLocation,
  ColaLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  LabelPosition,
  ModelKind,
  NodeShape,
  NodeStatus,
  observer,
  SELECTION_EVENT,
  TopologyView,
  Visualization,
  VisualizationProvider,
  VisualizationSurface
} from '@patternfly/react-topology';
import {
  MenuToggle,
  Select,
  SelectList,
  SelectOption,
  ToolbarItem
} from '@patternfly/react-core';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// Assuming TopologyToolbarDemo.tsx contains the full implementation
// The actual code for TopologyToolbarDemo.tsx is not provided in the input text.
// This snippet represents the context and imports for such a demo.

// Example of how to use TopologyView with toolbars:
/*
<TopologyView
  viewToolbar={(
    <Toolbar>
      <ToolbarItem>
        <Select>
          <MenuToggle>Options</MenuToggle>
          <SelectList>
            <SelectOption>Option 1</SelectOption>
          </SelectList>
        </Select>
      </ToolbarItem>
    </Toolbar>
  )}
  contextToolbar={(
    <Toolbar>
      <ToolbarItem>Context Action</ToolbarItem>
    </Toolbar>
  )}
>
  <VisualizationProvider>
    <VisualizationSurface />
  </VisualizationProvider>
</TopologyView>
*/

// To retrieve state from the controller within a GraphElement:
/*
const MyNode = observer(({ element }) => {
  const controllerState = element.getController().getState<ControllerState>();
  // Use controllerState to update node appearance or behavior
  return (
    <DefaultNode element={element} {...controllerState} />
  );
});
*/

```

--------------------------------

### Topology Drag and Drop Demo

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md

This example demonstrates the integration of drag and drop functionality within a PatternFly React Topology visualization. It showcases how to make nodes draggable and edges connectable via drag-and-drop interactions.

```typescript
import { useState, useMemo } from 'react';
import {
  ColaLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  graphDropTargetSpec,
  groupDropTargetSpec,
  ModelKind,
  nodeDragSourceSpec,
  nodeDropTargetSpec,
  NodeShape,
  NodeStatus,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withDndDrop,
  withDragNode,
  withPanZoom,
  withSelection,
  withTargetDrag,
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// ... (rest of the demo code)
```

--------------------------------

### Importing PatternFly React Icons

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyLayouts.md

Imports specific icon components from `@patternfly/react-icons` to provide visual cues within the application. `Icon1` (regions-icon) and `Icon2` (folder-open-icon) are imported for use in the topology example, likely representing different node types or states.

```TypeScript
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
```

--------------------------------

### Enable Pan and Zoom in React Topology

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md

This example demonstrates how to enable pan and zoom functionality for a Topology view in React. It utilizes the `withPanZoom` higher-order component from `@patternfly/react-topology` to wrap the `GraphComponent`, allowing users to navigate the graph using mouse wheel and drag gestures.

```typescript
import { useState, useMemo } from 'react';
import {
  ColaLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  EdgeStyle,
  GraphComponent,
  ModelKind,
  NodeShape,
  NodeStatus,
  SELECTION_EVENT,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withPanZoom
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

const TopologyComponent = () => {
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  const topologyData = useMemo(() => ({
    nodes: [
      { id: 'node-1', label: 'Node 1', x: 50, y: 50, group: 'group-1', data: { icon: Icon1, status: NodeStatus.Success } },
      { id: 'node-2', label: 'Node 2', x: 200, y: 50, data: { icon: Icon2, status: NodeStatus.Warning } },
      { id: 'node-3', label: 'Node 3', x: 350, y: 50, group: 'group-1', data: { icon: Icon1, status: NodeStatus.Danger } },
      { id: 'node-4', label: 'Node 4', x: 500, y: 50, data: { icon: Icon2, status: NodeStatus.Default } }
    ],
    edges: [
      { id: 'edge-1', source: 'node-1', target: 'node-2', type: 'edge-1', data: { style: EdgeStyle.dashed } },
      { id: 'edge-2', source: 'node-2', target: 'node-3', type: 'edge-2' },
      { id: 'edge-3', source: 'node-3', target: 'node-4', type: 'edge-3', data: { bendPoints: [{ x: 350, y: 150 }, { x: 500, y: 150 }] } }
    ],
    groups: [
      { id: 'group-1', label: 'Group 1', children: ['node-1', 'node-3'], collapsed: false, data: { height: 150, width: 450 } }
    ]
  }), []);

  const onSelection = (items: string[]) => {
    setSelectedIds(items);
  };

  const Graph = withPanZoom()(GraphComponent);

  return (
    <VisualizationProvider topologyData={topologyData} panning={true} zooming={true}>
      <div style={{ height: '500px', width: '100%' }}>
        <Graph
          id="topology-graph-pan-zoom"
          defaultNodeComponent={DefaultNode}
          defaultGroupComponent={DefaultGroup}
          defaultEdgeComponent={DefaultEdge}
          onSelection={onSelection}
          panZoomRef={null} 
        />
      </div>
    </VisualizationProvider>
  );
};

export default TopologyComponent;

```

--------------------------------

### Demonstrate Topology Layouts in React Topology

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyLayouts.md

This example showcases the implementation of various layout algorithms within the PatternFly React Topology component. It imports and utilizes components like `TopologyView`, `VisualizationSurface`, and specific layout classes such as `BreadthFirstLayout`, `ColaLayout`, `DagreLayout`, etc. The BreadthFirst layout has a noted limitation regarding row overflow management.

```TypeScript
import { useState, useMemo, useEffect } from 'react';
import {
  action,
  createTopologyControlButtons,
  defaultControlButtonsOptions,
  BreadthFirstLayout,
  ColaLayout,
  ColaGroupsLayout,
  ConcentricLayout,
  DagreLayout,
  DefaultEdge,
  DefaultGroup,
  DefaultNode,
  ForceLayout,
  GridLayout,
  GraphComponent,
  ModelKind,
  NodeShape,
  NodeStatus,
  observer,
  GRAPH_LAYOUT_END_EVENT,
  TopologyControlBar,
  TopologyView,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withDragNode,
  withPanZoom
} from '@patternfly/react-topology';
import { ToolbarItem } from '@patternfly/react-core';
import {
 Dropdown,
 DropdownItem,
 DropdownList,
} from '@patternfly/react-core';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

// Introduction
// A **layout** helps position the nodes in a Topology view, according to different visualization structures.
// There are many algorithms available for positioning nodes, based on factors like the side of nodes, distance between nodes, edges, and so on. The following layouts are available for you to use in your Topology views.
// - **Force:** Built on top of the d3-force layout provided by [d3/d3-force](https://github.com/d3/d3-force).
// - **Dagre:** Built on top of the dagrejs dagre layout provided by [dagrejs/dagre](https://github.com/dagrejs/dagre).
// - **Cola:** Built on top of the WebCola layout provided by [tgdwyer/WebCola](://github.com/tgdwyer/WebCola). 
//   - This layout uses `force simulation` by default, but can be turned off by setting the options `layoutOnDrag` flag to "false".
// - **ColaGroups:** Uses the cola layout recursively on each group, so that the group's children locations are set before the group's location is set relative to other groups or nodes at its level.
// - **Grid:** Orders nodes in a grid, making the grid as `square` as possible.
//   - This layout works well to distribute nodes without taking edges into consideration.
// - **Concentric:** Places nodes in a circular pattern.
//   - This layout has better results focused on high connectivity.
// - **BreadthFirst:** Uses a breadth-first algorithm to place the nodes. 
//   - This layout helps when you need to provide a natural "levels" approach that can be combined with other algorithms, in order to help users to identify the dependencies between elements.
//   - Note: The current version doesn't manage the overflow of a row.

// Example
// ```ts file='./TopologyLayoutsDemo.tsx'
// ```
```

--------------------------------

### Importing Local Stylesheet

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyLayouts.md

Imports a local CSS file named `topology-example.css` to apply custom styles specific to the topology demonstration. This ensures that the components are rendered with the desired visual appearance and layout adjustments.

```TypeScript
import './topology-example.css';
```

--------------------------------

### Importing PatternFly React Core UI Components

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyLayouts.md

Imports standard UI components from `@patternfly/react-core` that are commonly used to build interactive controls for topology views. Specifically, `ToolbarItem` is imported for toolbar functionality, and `Dropdown`, `DropdownItem`, `DropdownList` are included for creating dropdown menus.

```TypeScript
import { ToolbarItem } from '@patternfly/react-core';
import {
 Dropdown,
 DropdownItem,
 DropdownList
} from '@patternfly/react-core';
```

--------------------------------

### PatternFly React Topology Component API

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologySidebar.md

API documentation for key components used in integrating sidebars with React Topology views. This includes the `TopologyView` component for structuring the layout and the `TopologySideBar` component for the sidebar functionality.

```APIDOC
TopologyView:
  Props:
    sideBar?: React.ReactNode;
      - Description: Renders the sidebar content within the Topology view.
      - Type: React.ReactNode
      - Usage: Pass a component like `<TopologySideBar>` here.

TopologySideBar:
  Props:
    show: boolean;
      - Description: Controls the visibility of the sidebar.
      - Type: boolean
      - Usage: Set to `true` to display the sidebar, `false` to hide.
    onClose?: () => void;
      - Description: Callback function triggered when the sidebar's close button is clicked.
      - Type: () => void
      - Usage: Implement logic to hide the sidebar or deselect the current item.
    children?: React.ReactNode;
      - Description: The content to be displayed inside the sidebar.
      - Type: React.ReactNode
      - Usage: Place details, forms, or other relevant information here.
```

--------------------------------

### Handling Fit to Screen Action in PatternFly React Topology

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyControlBar.md

This snippet demonstrates how to implement the `fitToScreenCallback` for the Topology control bar. It shows how to fit the entire graph into the viewable area with an 80px margin using `controller.getGraph().fit(80)`. Note that the default `BaseGraph` fit implementation will not scale to greater than 1.

```TypeScript
action(() => {
  // Note: The default BaseGraph's fit implementation will not scale to greater
  // than 1 so it will not zoom in to enlarge the graph to take up the entire
  // viewable area.

  // Fit entire graph in the viewable area with an 80px margin
  controller.getGraph().fit(80);
})
```

--------------------------------

### Drag and Drop API Utilities

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md

Provides higher-order components (HOCs) for enabling drag and drop interactions in PatternFly React Topology. These utilities abstract the complexities of the drag-and-drop API, allowing developers to easily add drag source and drop target capabilities to nodes and edges.

```APIDOC
withDragNode
  Parameters:
    spec?: DragSourceSpec
  Returns:
    function that takes the draggable node component and returns the draggable component
    which is also passed 'dragNodeRef' to attach to the element.

withSourceDrag
  Parameters:
    spec: DragSourceSpec
  Returns:
    function that takes the draggable edge component and returns the draggable component
    which is also passed 'sourceDragRef' to attach to the element.

withTargetDrag
  Parameters:
    spec: DragSourceSpec
  Returns:
    function that takes the draggable edge component and returns the draggable component
    which is also passed 'targetDragRef' to attach to the element.

withDndDrop
  Parameters:
    spec: DropTargetSpec
  Returns:
    function that takes the droppable component and returns the droppable component
    which is also passed 'dndDropRef' to attach to the element's drop zone.
```

--------------------------------

### Custom Anchor Implementation

Source: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyAnchors.md

Demonstrates how to implement custom anchors for edge connections in PatternFly React Topology. It highlights the use of hooks like `usePolygonAnchor`, `useSvgAnchor`, and `useAnchor` to define specific connection points on nodes. Custom anchors must extend `AbstractAnchor` and implement `getLocation` and `getReferencePoint` methods.

```typescript
import {
  AbstractAnchor,
  AnchorEnd,
  Point,
  useAnchor,
  useSvgAnchor,
  usePolygonAnchor
} from '@patternfly/react-topology';

// Example of a custom anchor extending AbstractAnchor
class MyCustomAnchor extends AbstractAnchor {
  getLocation(reference: Point): Point {
    // Logic to determine anchor location based on reference point
    return { x: 0, y: 0 }; // Placeholder
  }

  getReferencePoint(): Point {
    // Logic to determine the reference point for outgoing edges
    return { x: 0, y: 0 }; // Placeholder
  }
}

// Usage with hooks:
// const anchor = useAnchor(MyCustomAnchor, { AnchorEnd: AnchorEnd.start });
// const svgAnchor = useSvgAnchor('path#my-node-path', { AnchorEnd: AnchorEnd.end });
// const polygonAnchor = usePolygonAnchor({ points: [{ x: 10, y: 10 }, { x: 20, y: 20 }] });

```