{"id":21466929,"url":"https://github.com/thiagodnf/visjs-extras-groupsequence","last_synced_at":"2025-06-12T08:07:39.150Z","repository":{"id":49639044,"uuid":"264356411","full_name":"thiagodnf/visjs-extras-groupsequence","owner":"thiagodnf","description":"A Vis.js layout extension for formatting nodes in a sequence or group sequence","archived":false,"fork":false,"pushed_at":"2024-01-30T18:43:56.000Z","size":837,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T06:11:20.682Z","etag":null,"topics":["diagram","group","layout","network","sequence","vis-network","visjs"],"latest_commit_sha":null,"homepage":"https://thiagodnf.github.io/visjs-extras-groupsequence","language":"JavaScript","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/thiagodnf.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}},"created_at":"2020-05-16T04:10:21.000Z","updated_at":"2022-12-10T14:41:05.000Z","dependencies_parsed_at":"2025-01-23T15:41:59.136Z","dependency_job_id":null,"html_url":"https://github.com/thiagodnf/visjs-extras-groupsequence","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/thiagodnf/visjs-extras-groupsequence","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagodnf%2Fvisjs-extras-groupsequence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagodnf%2Fvisjs-extras-groupsequence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagodnf%2Fvisjs-extras-groupsequence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagodnf%2Fvisjs-extras-groupsequence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiagodnf","download_url":"https://codeload.github.com/thiagodnf/visjs-extras-groupsequence/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagodnf%2Fvisjs-extras-groupsequence/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259427032,"owners_count":22855560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["diagram","group","layout","network","sequence","vis-network","visjs"],"created_at":"2024-11-23T08:16:05.384Z","updated_at":"2025-06-12T08:07:39.126Z","avatar_url":"https://github.com/thiagodnf.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/thiagodnf"],"categories":[],"sub_categories":[],"readme":"![logo](https://user-images.githubusercontent.com/114015/82124812-8367bf80-976f-11ea-9663-16b4358403f1.png)\n\nA Vis.js layout extension for formatting nodes in a sequence or group sequence.\n\n[![GitHub Release](https://img.shields.io/github/release/thiagodnf/visjs-extras-groupsequence.svg)](https://github.com/thiagodnf/visjs-extras-groupsequence/releases/latest)\n[![GitHub contributors](https://img.shields.io/github/contributors/thiagodnf/visjs-extras-groupsequence.svg)](https://github.com/thiagodnf/visjs-extras-groupsequence/graphs/contributors)\n[![GitHub stars](https://img.shields.io/github/stars/thiagodnf/visjs-extras-groupsequence.svg)](https://github.com/almende/thiagodnf/visjs-extras-groupsequence)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)\n\n## Features\n\n- Aggregate the nodes in groups\n- Use a \"head\" node to display the group's name\n- Select which node's property should be used to grouping\n\n## Screenshot\n\nGroups activated\n\n\u003ckbd\u003e\n  \u003cimg class=\"screenshot\" src=\"https://user-images.githubusercontent.com/114015/82110234-8a101b80-970a-11ea-9367-d01cbdbf9662.png\"/\u003e\n\u003c/kbd\u003e\n\nGroups disactived\n\n\u003ckbd\u003e\n  \u003cimg class=\"screenshot\" src=\"https://user-images.githubusercontent.com/114015/82126173-ec076a00-9778-11ea-892f-ea9cb614df12.png\"/\u003e\n\u003c/kbd\u003e\n\n## Requirements\n\nUpdated versions of these toolsets may break the build or app. If you have issues, try mirroring these exact versions.\n\n- Vis.js 7.6.4\n\n## Getting Started\n\n### Online access\n\nClick on the on the link below for seeing this tool in action.\n\nhttps://thiagodnf.github.io/visjs-extras-groupsequence/\n\n### Usage\n\nInclude the javascript file in your html file\n\n```html\n\u003cscript type=\"text/javascript\" src=\"src/group-sequence.js\"\u003e\u003c/script\u003e\n```\n\nand call the class before sending the nodes the vis-network\n\n```js\n\nlet gsOptions = {};\n\nlet layout  = new GroupSequence(gsOptions);\n\ngraph = layout.process(graph);\n\nvar data = {\n    nodes: new vis.DataSet(graph.nodes),\n    edges: new vis.DataSet(graph.edges)\n};\n\nvar options = {\n    physics: false\n};\n\nvar network = new vis.Network($container[0] , data, options);\n```\n\nWarning! Don't forget to set ```physics: false```\n\n### Parameters\n\nThe default options are:\n\n```js\nlet defaultOptions = {\n    horizontalSpacing: 120,\n    verticalSpacing: 100,\n    useHead: true,\n    useGroups: true,\n    sortGroups: true,\n    sortNodeIds: true,\n    direction: \"LR\",\n    smoothRoundnessRange: 0.09,\n    useSmooth: true,\n    groupNodeBy: \"group\",\n}\n```\n\nThe individual options are explained below.\n\n| Name | Type | Default | Description |\n| --- | :---: | :---: | --- |\n| ```horizontalSpacing``` | number | 120 | The horizontal distance among nodes |\n| ```verticalSpacing``` | number | 100 | The vertical distance among nodes |\n| ```useHead``` | boolean | true | Active the use of head nodes |\n| ```useGroups``` | boolean | true | Active the use of groups  |\n| ```sortGroups``` | boolean | true | Active if the groups should be sorted  |\n| ```sortNodeIds``` | boolean | true | Active if the nodes should be sorted |\n| ```direction``` | string | \"LR\" | Define the direction. Available options ```LR``` and ```RL``` |\n| ```smoothRoundnessRange``` | number | 0.09 | The size of edge's roundness |\n| ```useSmooth``` | boolean | true | Active the use of edge's smooth |\n| ```groupNodeBy``` | string |  \"group\" | Define the properties used for grouping|\n\n## Questions or Suggestions\n\nFeel free to create \u003ca href=\"https://github.com/thiagodnf/visjs-extras-groupsequence/issues\"\u003eissues\u003c/a\u003e here as you need\n\n## Contribute\n\nContributions to the this project are very welcome! We can't do this alone! Feel free to fork this project, work on it and then make a pull request.\n\n## Authors\n\n* **Thiago Ferreira** - *Initial work*\n\nSee also the list of [contributors](https://github.com/thiagodnf/visjs-extras-groupsequence/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n\n## Donate\n\nI open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).\n\nHowever, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:\n\n\u003ca href=\"https://www.buymeacoffee.com/thiagodnf\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\" alt=\"Buy Me A Coffee\"\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\nThanks! ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagodnf%2Fvisjs-extras-groupsequence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiagodnf%2Fvisjs-extras-groupsequence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagodnf%2Fvisjs-extras-groupsequence/lists"}