Skip to content

TopologySelectable.md

Latest commit

 

History

History
55 lines (42 loc) · 2.06 KB

TopologySelectable.md

File metadata and controls

55 lines (42 loc) · 2.06 KB
id Selection
section extensions
subsection topology
sortValue 21
sourceLink https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologySelectableDemo.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';

Introduction

Selection functionality enables users to select nodes and edges in a Topology view.

Using selection

To allow nodes and edges to be selectable, use the withSelection utility when you return the node/edge component in the ComponentFactory.

  • For example: withSelection()(MyCustomNode)

The component should accept 2 parameters, onSelect and selected (you can simply extend WithSelectionProps).

  • onSelect: Function to call upon node selection. Typically, the outer container for the component would call onSelect when clicked.
  • selected: Indicates if the element is currently selected. Updates the drawing of the component to indicate its selection status.

Alternatively, you can use the useSelection hook within the component to retrieve the same 2 properties.

If you are using DefaultNode, these properties can be passed along and will be handled appropriately.

By default, the application must control the selection state. This can be done by adding a listener to the controller for a SELECTION_EVENT. The listener would then keep track of the selectedIds and maintain the ids in state, which should be passed to the VisualizationSurface.

Alternatively, you can pass { controlled: true } to the withSelection utility or to the useSelection hook.

Example