### Start the Topology workspace

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

Commands to install dependencies and initialize the workspace environment.

```bash
yarn install
yarn start
```

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

### Launch the demo application

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

Commands to navigate to the demo package and start the hot-reloading development server.

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

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

### Topology Toolbar Implementation

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

Demonstrates the setup of a TopologyView with context and view toolbars using the VisualizationProvider.

```ts
```ts file='./TopologyToolbarDemo.tsx'
```
```

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

### Install Node version with nvm

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

Commands to set the required Node version for development.

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

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

### Implement Topology Baseline Demo

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

Demonstrates the setup of a topology visualization using a VisualizationProvider and VisualizationSurface. Requires registration of layout and component factories.

```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 Topology package

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

Commands to add the topology package to your project using package managers.

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

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

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

### Topology Sidebar Implementation

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

This example demonstrates how to integrate a TopologySideBar into a TopologyView, using the show and onClose properties to manage visibility based on selection state.

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

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

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

### Clone the Topology repository

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

Initial step to download the project source code and enter the directory.

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

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

### Topology Selectable Demo

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

Demonstrates the implementation of selectable elements within a topology graph.

```typescript
```ts file='./TopologySelectableDemo.tsx'
```
```

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

### Verify server output

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

Expected console output confirming the development server is active and the local URL.

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

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

### Topology Component Imports

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

Required imports for setting up a basic topology visualization using PatternFly components.

```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/rh-ui-regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon';

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

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

### Fit to Screen Callback

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

Fits the entire graph into the viewable area with a specified margin.

```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);
})
```

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

### Topology Anchors Imports

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

Required imports for implementing custom anchors and topology components.

```typescript
import { useMemo } from 'react';
import {
  AbstractAnchor,
  AnchorEnd,
  ColaLayout,
  DefaultEdge,
  DefaultNode,
  GraphComponent,
  Layer,
  ModelKind,
  NodeShape,
  Point,
  useAnchor,
  useSvgAnchor,
  Visualization,
  VisualizationProvider,
  VisualizationSurface,
  withDragNode,
} from '@patternfly/react-topology';
```

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

### Zoom In Callback

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

Handles the zoom in action by scaling the graph.

```typescript
action(() => {
  // Zoom in by desired amount
  controller.getGraph().scaleBy(4 / 3);
})
```

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

### withDndDrop

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

Wraps a component to enable it as a drop target. It provides a dndDropRef to be attached to the drop zone element.

```APIDOC
## withDndDrop(spec)

### Description
Wraps a component to enable it as a drop target. It returns a function that accepts the component to be wrapped and provides a `dndDropRef` to attach to the element's drop zone.

### Parameters
- **spec** (DropTargetSpec) - Required - The drop target specification.

### Returns
- **Function** - A function that takes the droppable component and returns the droppable component.
```

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

### Zoom Out Callback

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

Handles the zoom out action by scaling the graph.

```typescript
action(() => {
  // Zoom in out desired amount
  controller.getGraph().scaleBy(0.75);
})
```

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

### Legend Callback

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

Placeholder for application-specific legend display logic.

```typescript
action(() => {
  // application specific code to show a legend (no default support)
})
```

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

### Define getEdgesFromNodes utility

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

Generates the necessary edges for the pipeline model, including connections to spacer and finally nodes.

```typescript
/**
 * parameters:
 *   nodes: PipelineNodeModel[] - List of all nodes in the model
 *   spacerNodeType: string     - Type set on spacer nodes
 *   edgeType:                  - Type to set on created edges
 *   spacerEdgeType:            - Type to set on edges between spacer nodes
 *   finallyNodeTypes: string[] - Types to consider as finally nodes on incoming nodes
 *   finallyEdgeType: string[]  - Type to set on edges to finally nodes
 *
 * Returns:
 *   EdgeModel[]: a list edges required to layout the pipeline view
 **/
const getEdgesFromNodes = (
  nodes: PipelineNodeModel[],
  spacerNodeType = DEFAULT_SPACER_NODE_TYPE,
  edgeType = DEFAULT_EDGE_TYPE,
  spacerEdgeType = DEFAULT_EDGE_TYPE,
  finallyNodeTypes: string[] = [DEFAULT_FINALLY_NODE_TYPE],
  finallyEdgeType = DEFAULT_EDGE_TYPE
): EdgeModel[]
```

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

### getSpacerNodes

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

Calculates the necessary spacer nodes required to layout the pipeline view based on the provided task and finally nodes.

```APIDOC
## getSpacerNodes

### Description
Calculates the necessary spacer nodes required to layout the pipeline view. Spacer nodes are used to aggregate edges to and from multiple task nodes.

### Parameters
- **nodes** (PipelineNodeModel[]) - Required - List of task and finally nodes in the model
- **spacerNodeType** (string) - Optional - Type to use for Spacer nodes (defaults to DEFAULT_SPACER_NODE_TYPE)
- **finallyNodeTypes** (string[]) - Optional - Types to consider as finally nodes on incoming nodes (defaults to [DEFAULT_FINALLY_NODE_TYPE])

### Returns
- **PipelineNodeModel[]** - A list of spacer nodes required to layout the pipeline view
```

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

### withSourceDrag

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

Wraps an edge component to enable dragging of the edge source. It provides a sourceDragRef to be attached to the source terminal.

```APIDOC
## withSourceDrag(spec)

### Description
Wraps an edge component to enable dragging of the edge source. It returns a function that accepts the component to be wrapped and provides a `sourceDragRef` to attach to the source terminal.

### Parameters
- **spec** (DragSourceSpec) - Required - The drag source specification.

### Returns
- **Function** - A function that takes the draggable edge component and returns the draggable component.
```

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

### withDragNode

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

Wraps a node component to enable dragging functionality. It provides a dragNodeRef to be attached to the draggable element.

```APIDOC
## withDragNode(spec)

### Description
Wraps a node component to enable dragging functionality. It returns a function that accepts the component to be wrapped and provides a `dragNodeRef` to attach to the element.

### Parameters
- **spec** (DragSourceSpec) - Optional - The drag source specification.

### Returns
- **Function** - A function that takes the draggable node component and returns the draggable component.
```

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

### Reset View Callback

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

Resets the graph scale and position, and re-runs the layout.

```typescript
action(() => {
  // BaseGraph's reset implementation will scale back to 1, and re-center
  // the graph
  controller.getGraph().reset();

  // re-run the layout
  controller.getGraph().layout();
})
```

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

### Define getSpacerNodes utility

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

Calculates required spacer nodes for pipeline layout based on task and finally nodes.

```typescript
/**
 * parameters:
 *   nodes: PipelineNodeModel[] - List of task and finally nodes in the model
 *   spacerNodeType: string     - Type to use for Spacer nodes
 *   finallyNodeTypes: string[] - Types to consider as finally nodes on incoming nodes
 *
 * Returns:
 *   PipelineNodeModel[]: a list of spacer nodes required to layout the pipeline view
 **/
 
const getSpacerNodes = (
  nodes: PipelineNodeModel[],
  spacerNodeType = DEFAULT_SPACER_NODE_TYPE,
  finallyNodeTypes: string[] = [DEFAULT_FINALLY_NODE_TYPE]
): PipelineNodeModel[]
```

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

### getEdgesFromNodes

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

Determines the edges in the model required to layout the pipeline view by processing all nodes including spacer nodes.

```APIDOC
## getEdgesFromNodes

### Description
Determines the edges in the model required to layout the pipeline view by processing all nodes including spacer nodes.

### Parameters
- **nodes** (PipelineNodeModel[]) - Required - List of all nodes in the model
- **spacerNodeType** (string) - Optional - Type set on spacer nodes (defaults to DEFAULT_SPACER_NODE_TYPE)
- **edgeType** (string) - Optional - Type to set on created edges (defaults to DEFAULT_EDGE_TYPE)
- **spacerEdgeType** (string) - Optional - Type to set on edges between spacer nodes (defaults to DEFAULT_EDGE_TYPE)
- **finallyNodeTypes** (string[]) - Optional - Types to consider as finally nodes on incoming nodes (defaults to [DEFAULT_FINALLY_NODE_TYPE])
- **finallyEdgeType** (string) - Optional - Type to set on edges to finally nodes (defaults to DEFAULT_EDGE_TYPE)

### Returns
- **EdgeModel[]** - A list of edges required to layout the pipeline view
```

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

### withTargetDrag

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

Wraps an edge component to enable dragging of the edge target. It provides a targetDragRef to be attached to the target terminal.

```APIDOC
## withTargetDrag(spec)

### Description
Wraps an edge component to enable dragging of the edge target. It returns a function that accepts the component to be wrapped and provides a `targetDragRef` to attach to the target terminal.

### Parameters
- **spec** (DragSourceSpec) - Required - The drag source specification.

### Returns
- **Function** - A function that takes the draggable edge component and returns the draggable component.
```

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

### withDndDrop Function Signature

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

Defines the signature for the withDndDrop higher-order component used to make components valid drop targets.

```typescript
/**
 * Parameters:
 *  spec: The drop target spec
 * 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.
 **/
 export const withDndDrop = (spec: DropTargetSpec) =>
  (wrappedComponent: React.FunctionComponent) =>  React.ComponentType);
```

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

### withDragNode Function Signature

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

Defines the signature for the withDragNode higher-order component used to make nodes draggable.

```typescript
/**
 * Parameters:
 *  spec: The drag source spec
 * Returns:
 *  function that takes the draggable node component and returns the draggable component
 *  which is also passed 'dragNodeRef' to attach to the element.
 **/
export const withDragNode = (spec?: DragSourceSpec) => 
  (wrappedComponent: React.FunctionComponent) =>  React.ComponentType);
```

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

### withSourceDrag Function Signature

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

Defines the signature for the withSourceDrag higher-order component used to enable dragging of edge sources.

```typescript
/**
 * Parameters:
 *  spec: The drag source spec
 * Returns:
 *  function that takes the draggable edge component and returns the draggable component
 *  which is also passed 'sourceDragRef' to attach to the element.
 **/
export const withSourceDrag = (spec: DragSourceSpec) =>
  (wrappedComponent: React.FunctionComponent) =>  React.ComponentType);
```

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

### withTargetDrag Function Signature

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

Defines the signature for the withTargetDrag higher-order component used to enable dragging of edge targets.

```typescript
/**
 * Parameters:
 *  spec: The drag source spec
 * Returns:
 *  function that takes the draggable edge component and returns the draggable component
 *  which is also passed 'targetDragRef' to attach to the element.
 **/
export const withTargetDrag = (spec: DragSourceSpec) =>
  (wrappedComponent: React.FunctionComponent) =>  React.ComponentType);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.