{"id":20923812,"url":"https://github.com/patternfly/react-topology","last_synced_at":"2026-04-01T18:46:42.421Z","repository":{"id":151685006,"uuid":"597029391","full_name":"patternfly/react-topology","owner":"patternfly","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-19T19:02:56.000Z","size":3148,"stargazers_count":21,"open_issues_count":23,"forks_count":27,"subscribers_count":11,"default_branch":"main","last_synced_at":"2026-03-20T10:26:29.602Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patternfly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-02-03T13:23:19.000Z","updated_at":"2026-03-19T18:58:18.000Z","dependencies_parsed_at":"2024-01-25T15:44:12.008Z","dependency_job_id":"643929cf-0456-48aa-9679-ac422018fbfb","html_url":"https://github.com/patternfly/react-topology","commit_stats":null,"previous_names":[],"tags_count":102,"template":false,"template_full_name":null,"purl":"pkg:github/patternfly/react-topology","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-topology","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-topology/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-topology/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-topology/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/react-topology/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-topology/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-11-18T20:17:50.798Z","updated_at":"2026-04-01T18:46:42.416Z","avatar_url":"https://github.com/patternfly.png","language":"TypeScript","readme":"# PatternFly Topology\n \nThis package provides the resources necessary to use PatternFly Topology, an open source utility 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.\n\nTopology utilizes some of PatternFly's React components https://github.com/patternfly/patternfly-react. \n\nDocumentation for Topology and its features is available on [the PatternFly website.](www.patternfly.org/extensions/topology/overview)\n\n## Table of contents\n\n- [PatternFly Topology](#patternfly-topology)\n  - [Table of contents](#table-of-contents)\n  - [Prerequisites](#prerequisites)\n  - [Installing Topology](#installing-topology)\n  - [Initial setup and usage](#initial-setup-and-usage)\n  - [Example](#example)\n  - [Demo app](#demo-app)\n  - [Need help?](#need-help)\n\n## Prerequisites\n\nTo use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed.\n\n1. 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:\n\n   ```\n   nvm install 8\n   nvm use 8\n   ```\n\n1. Install and use version 1.6.0 or later of Yarn.\n\n## Installing Topology\n\nOnce you have all of the prerequisites, you can install the Topology package with Yarn or npm:\n\n1. Using Yarn:\n\n   ```\n   yarn add @patternfly/react-topology\n   ```\n\n1. Using npm:\n\n   ```\n   npm install @patternfly/react-topology --save\n   ```\n\n## Initial setup and usage\n\nTo use Topology out of the box, follow these steps:\n\n1. First transform your back-end data into a [Model](https://github.com/patternfly/react-topology/blob/main/packages/module/src/types.ts) object. This will contain the information needed to display the nodes and edges in your Topology view. Each node and edge contains a set of properties used by Topology, as well as a data field, which Topology can be used to customize the nodes and edges.\n\n1. Declare a controller, which can be initialized via the `useVisualizationController()` method.\n\n1. Create nodes by calling the `fromModel` method on the controller you initialized. `fromModel` will take the `Model` that you created as a parameter. Your data model should include a `graph` object, on which you will need to set `id` , `type`, and `layout`.\n\n1. To create your Topology view component, wrap `TopologyView` around `\u003cVisualizationSurface\u003e`, which can accept a `state` parameter.\n\n   - The value of state is application specific and should include any data the application wants to store/retrieve from the controller.\n   - Adding state to `\u003cVisualizationSurface\u003e` allows hooks to update when state changes.\n   - State can also be used to keep track of your graph state, such as selected elements.\n\n1. Wrap your `TopologyView` with your controller. In the example below, this is done via the `VisualizationProvider` which consumes the `Controller` via context.\n\n1. There are 3 `register` methods that the controller accesses.\n\n   These 2 must be declared explicitly:\n\n   1. **`registerLayoutFactory`:** Sets the layout of your topology view (e.g. Force, Dagre, Cola, etc.). You can use `defaultLayoutFactory` as a parameter if your application supports all layouts. You can also update `defaultLayout` to a custom implementation if you only want to support a subset of the available layout options.\n   1. **`registerComponentFactory`:** Lets you customize the components in your topology view (e.g. nodes, groups, and edges). You can use `defaultComponentFactory` as a parameter.\n\n   The remaining method is initialized in `Visualization.ts`, so it doesn't need to be declared unless you want to support a custom implementation that modifies the types:\n\n   3. **`registerElementFactory`:** Sets the types of the elements being used (e.g. graphs, nodes, edges). `defaultElementFactory` uses types from `ModelKind` and is exported in `index.ts`.\n\n## Example\n\n```ts\nimport { memo, useState, useMemo } from 'react';\nimport {\n  EdgeStyle,\n  Model,\n  NodeShape,\n  SELECTION_EVENT,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface\n} from '@patternfly/react-topology';\nimport defaultLayoutFactory from './layouts/defaultLayoutFactory';\nimport defaultComponentFactory from './components/defaultComponentFactory';\n\nconst NODE_SHAPE = NodeShape.ellipse;\nconst NODE_DIAMETER = 75;\n\nconst NODES = [\n  {\n    id: 'node-0',\n    type: 'node',\n    label: 'Node 0',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'node-1',\n    type: 'node',\n    label: 'Node 1',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'node-2',\n    type: 'node',\n    label: 'Node 2',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'node-3',\n    type: 'node',\n    label: 'Node 3',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'node-4',\n    type: 'node',\n    label: 'Node 4',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'node-5',\n    type: 'node',\n    label: 'Node 5',\n    width: NODE_DIAMETER,\n    height: NODE_DIAMETER,\n    shape: NODE_SHAPE\n  },\n  {\n    id: 'Group-1',\n    children: ['node-0', 'node-1', 'node-2', 'node-3'],\n    type: 'group-hull',\n    group: true,\n    label: 'Group-1',\n    style: {\n      padding: 15\n    }\n  }\n];\n\nconst EDGES = [\n  {\n    id: 'edge-node-4-node-5',\n    type: 'edge',\n    source: 'node-4',\n    target: 'node-5',\n    edgeStyle: EdgeStyle.default\n  },\n  {\n    id: 'edge-node-0-node-2',\n    type: 'edge',\n    source: 'node-0',\n    target: 'node-2',\n    edgeStyle: EdgeStyle.default\n  }\n];\n\nexport const TopologyBaselineDemo = memo(() =\u003e {\n  const [selectedIds, setSelectedIds] = useState\u003cstring[]\u003e([]);\n\n  const controller = useMemo(() =\u003e {\n    const model: Model = {\n      nodes: NODES,\n      edges: EDGES,\n      graph: {\n        id: 'g1',\n        type: 'graph',\n        layout: 'Cola'\n      }\n    };\n\n    const newController = new Visualization();\n    newController.registerLayoutFactory(defaultLayoutFactory);\n    newController.registerComponentFactory(defaultComponentFactory);\n\n    newController.addEventListener(SELECTION_EVENT, setSelectedIds);\n\n    newController.fromModel(model, false);\n\n    return newController;\n  }, []);\n\n  return (\n    \u003cVisualizationProvider controller={controller}\u003e\n      \u003cVisualizationSurface state={{ selectedIds }} /\u003e\n    \u003c/VisualizationProvider\u003e\n  );\n});\n```\n\n## Demo app\n\nTo help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained here.](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts)\n\nSee the instructions to install and run the demo app, here: [Demo README.md](packages/demo-app-ts/README.md)\n\n## Need help?\n\nIf you find a bug, have a request, or have any questions about Topology that aren't answered in our documentation, please [reach out to us on Slack.](https://patternfly.slack.com/archives/CK7URGJ2W)\n\n## Contributing to Topology\n\n### AI-assisted development guidelines\n\nPlease reference [PatternFly's AI-assisted development guidelines](https://github.com/patternfly/.github/blob/main/CONTRIBUTING.md) if you'd like to contribute code generated using AI.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-topology","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Freact-topology","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-topology/lists"}