From 1a55b6bbf4ef025a99be07a79fb6ecfa24f2f7fc Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 10 Jun 2024 13:53:28 -0400 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> --- README.md | 9 ++++++--- .../patternfly-docs/content/examples/AboutTopology.md | 2 +- .../patternfly-docs/content/examples/TopologyAnchors.md | 4 ++-- .../content/examples/TopologyContextMenu.md | 5 ++--- .../content/examples/TopologyControlBar.md | 2 +- .../content/examples/TopologyCustomNodes.md | 2 +- .../content/examples/TopologyDragDropDemo.md | 2 +- .../patternfly-docs/content/examples/TopologyLayouts.md | 2 +- .../patternfly-docs/content/examples/TopologyPanZoom.md | 2 +- .../content/examples/TopologySelectable.md | 2 +- .../patternfly-docs/content/examples/TopologyToolbar.md | 2 +- 11 files changed, 18 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 0186b84b..a746fea8 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This package provides the resources necessary to use PatternFly Topology, an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them. -Topology components are based on [PatternFly 4][patternfly-4] Based from https://github.com/patternfly/patternfly-react version 4.91.40 +Topology is based on PatternFly 5 components from https://github.com/patternfly/patternfly-react. Documentation for Topology and its features is available on [the PatternFly website.](www.patternfly.org/topology/about-topology) @@ -18,6 +18,7 @@ Documentation for Topology and its features is available on [the PatternFly webs To use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed. 1. Install and develop with the most up-to-date version of Node Active LTS. For example, to develop with Node 8, you would use the following commands: + ``` nvm install 8 nvm use 8 @@ -28,11 +29,13 @@ To use Topology, you will need to have both [Node Active LTS](https://github.com Once you have all of the prequisites, you can install the Topology package with Yarn or npm: -1. Using Yarn +1. Using Yarn: + ``` yarn add @patternfly/react-topology ``` -1. Using npm +1. Using npm: + ``` npm install @patternfly/react-topology --save ``` diff --git a/packages/module/patternfly-docs/content/examples/AboutTopology.md b/packages/module/patternfly-docs/content/examples/AboutTopology.md index ea8d6a20..77eb47e1 100644 --- a/packages/module/patternfly-docs/content/examples/AboutTopology.md +++ b/packages/module/patternfly-docs/content/examples/AboutTopology.md @@ -29,7 +29,7 @@ import './topology-example.css'; PatternFly's **Topology** is an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them. Creating these visuals can help document and communicate the intricacies of the processes behind your product. -To create a Topology view for your product, you can create a simple foundation of nodes, which represent your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your product. +To create a Topology view for your product, you can create a simple layout of nodes, which represents your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your product. ## Prerequisites diff --git a/packages/module/patternfly-docs/content/examples/TopologyAnchors.md b/packages/module/patternfly-docs/content/examples/TopologyAnchors.md index c4f2c922..eae972e7 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyAnchors.md +++ b/packages/module/patternfly-docs/content/examples/TopologyAnchors.md @@ -28,7 +28,7 @@ import './topology-example.css'; **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology). -An **anchor** is the point within a node where edges connect. +An **anchor** is the point at which an edge connects to a node. By default, nodes use a `CenterAnchor`, which refers to the center of the bounds of the node. You can use different anchors for different node shapes. @@ -42,7 +42,7 @@ You can specify the SVG element that determines edge locations by using the prov - **`useAnchor`:** Allows you to specify your own custom anchor or provide a function that returns a specific anchor. - This is useful for adjusting the anchor based on the node being displayed. -These hooks accept the following parameters, allowing you to customize when to use the anchor: +These hooks accept the following parameters, allowing you to customize the anchor: - **`points` (for `usePolygonAnchor` only):** The points for the polygon. - **`AnchorEnd`:** Use for start, end, or both. diff --git a/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md b/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md index f95184cc..485200ff 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md +++ b/packages/module/patternfly-docs/content/examples/TopologyContextMenu.md @@ -28,18 +28,17 @@ import './topology-example.css'; **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology). -A **context menu** displays a list of actions or links related to a graph element. Nodes, edges, and the graph itself can have context menus, which are shown when you right-click on a graph element. Selecting a menu item will trigger a process or navigate to a new location. +A **context menu** displays a list of actions or links related to a graph element. Nodes, edges, and the graph itself can have context menus, which are shown when you select the menu toggle or right-click on a graph element. Selecting a menu item will trigger a process or navigate to a new location. ## Using context menus -To add a context menu to a Topology element, use the `withContextMenu` utility when the context menu component is returned in the `componentFactory`. For example, `withContextMenu(() => contextMenu)(MyCustomNode)`. The component should accept 2 parameters: +To add a context menu to a Topology element, you can simply extend `WithContextMenuProps` and use the `withContextMenu` utility when the context menu component is returned in the `componentFactory`. For example, `withContextMenu(() => contextMenu)(MyCustomNode)`. The component should accept 2 parameters: - **`onContextMenu`:** The function to call upon node selection. Typically the outer container for the component would call `onContextMenu` when clicked. - **`contextMenuOpen`:** Indicates if the menu is currently open and applies styling to the respective component. If you are using `DefaultNode`, these properties can be passed along and will be handled appropriately. - ## Example diff --git a/packages/module/patternfly-docs/content/examples/TopologyControlBar.md b/packages/module/patternfly-docs/content/examples/TopologyControlBar.md index 8d7bcdaa..22a4940b 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyControlBar.md +++ b/packages/module/patternfly-docs/content/examples/TopologyControlBar.md @@ -35,7 +35,7 @@ import './topology-example.css'; **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology). -A **control bar** adds visualization controls to a Topology view, so that users can more easily explore. +A **control bar** adds visualization controls to a Topology view, so that users can more easily explore the graph layout. ## Using a control bar diff --git a/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md b/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md index 88f4ff89..b2d5293f 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md +++ b/packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md @@ -34,7 +34,7 @@ A **node** is an element within a Topology view that represents your data point, To create nodes with custom styling, you will need to create a custom node component, which your `customComponentFactory` will return. -To do this, you will need a `` component, with `CustomNodeProps` as the generic type and the destructured `element` as the parameter. The code in the following example shows how you can retrive data from `element` and apply it to the attributes of ``. +To do this, you will need a `` component, with `CustomNodeProps` as the generic type and the destructured `element` as the parameter. The code in the following example shows how you can retrieve data from `element` and apply it to the attributes of ``. Within each node in your `NODES` array, you can set `data` to include additional custom attributes. diff --git a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md index 20f97421..e7bbd021 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md +++ b/packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md @@ -41,7 +41,7 @@ import './topology-example.css'; ## Drag and drop -To add drag and drop functionality to your Topology view, add the following in your ``: +To add drag and drop functionality to your Topology view, add the following in your `ComponentFactory`: - Nodes can be dragged about the canvas by using the `useDragNode` hook, or by wrapping the `` component with `withDragNode`. diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md index 321841c0..55159c76 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md +++ b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md @@ -54,7 +54,7 @@ There are many algorithms available for positioning nodes, based on factors like - **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 gri, making the grid as `square` as possible. +- **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. diff --git a/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md b/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md index f8a9b0ee..b0ccc625 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md +++ b/packages/module/patternfly-docs/content/examples/TopologyPanZoom.md @@ -32,7 +32,7 @@ import './topology-example.css'; ## Using pan and zoom -To allow users to pan and zoom in a Topology view, use the `withPanZoom` utility when you return the graph component in the `` +To allow users to pan and zoom in a Topology view, use the `withPanZoom` utility when you return the graph component in the `ComponentFactory` - For example: `withPanZoom(GraphComponent)` The component should accept a `panZoomRef` property, which should be the ref on the surface element for the group. This is the element that will accept the drag or mouse-wheel events. diff --git a/packages/module/patternfly-docs/content/examples/TopologySelectable.md b/packages/module/patternfly-docs/content/examples/TopologySelectable.md index b789ecf9..240e6dc3 100644 --- a/packages/module/patternfly-docs/content/examples/TopologySelectable.md +++ b/packages/module/patternfly-docs/content/examples/TopologySelectable.md @@ -32,7 +32,7 @@ import './topology-example.css'; ## Using selection -To allow nodes and edges to be selectable, use the `withSelection` utility when you return the node/edge component in the ``. +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`). diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md index c3db0435..c313d131 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md +++ b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md @@ -49,7 +49,7 @@ To add a toolbar to a Topology view, wrap your `VisualizationProvider` with the **Note**: You can set the "state" on the controller to track values such as the `viewOptions`. -`` components can retrieve state from the controller via: +`GraphElement` components can retrieve state from the controller via: `element.getController().getState();` and react to that state accordingly.