{"id":13503552,"url":"https://github.com/SarAhmed/timeline-dep-graph","last_synced_at":"2025-03-29T18:31:21.518Z","repository":{"id":101676228,"uuid":"297938445","full_name":"SarAhmed/timeline-dep-graph","owner":"SarAhmed","description":"Dynamic rollout visualization library.","archived":false,"fork":false,"pushed_at":"2020-10-22T09:09:20.000Z","size":599,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-01T00:31:45.552Z","etag":null,"topics":["dependency-graph","rollouts","timeline","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SarAhmed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2020-09-23T10:47:35.000Z","updated_at":"2023-06-08T05:00:19.000Z","dependencies_parsed_at":"2023-06-07T20:15:25.363Z","dependency_job_id":null,"html_url":"https://github.com/SarAhmed/timeline-dep-graph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SarAhmed%2Ftimeline-dep-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SarAhmed%2Ftimeline-dep-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SarAhmed%2Ftimeline-dep-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SarAhmed%2Ftimeline-dep-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SarAhmed","download_url":"https://codeload.github.com/SarAhmed/timeline-dep-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246226980,"owners_count":20743862,"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":["dependency-graph","rollouts","timeline","visualization"],"created_at":"2024-07-31T23:00:39.502Z","updated_at":"2025-03-29T18:31:21.073Z","avatar_url":"https://github.com/SarAhmed.png","language":"TypeScript","funding_links":[],"categories":["others","Libraries"],"sub_categories":["vis.js based libraries"],"readme":"# Graphical Rollouts UI\n![example_tdg](TDG-screenshot.png)\n\nTDG (i.e. timeline-dep-graph) is a visualization library to represent rollouts graphically. The tasks are represented as a rectangular bar on the timeline and spanning the time it elapsed to execute. The library supports visualizing subtasks within a parent task (i.e. rollout hierarchy) by encapsulating the subtasks within the parent task and visualizes the dependencies between tasks using directed arrows.\nThe library dynamically detects the changes in the provided tasks array and according repaints only the affected tasks and/or dependencies (i.e. add/remove/update).\n\nThere is a set of supported features such as zooming in/out, navigating to the beginning/end of the rollout, grouping tasks based on status, fit the visible screen to include the whole rollout and focusing on a task by giving its id.\n\n## Build\nTo build the library from source, clone the project from github\n```\n$ git clone https://github.com/SarAhmed/timeline-dep-graph.git\n```\nThen to install all dependencies and build the library, run `npm install` in the root of the project.\n```\n$ cd timeline-dep-graph/\n$ npm install\n```\nThen run\n```\n$ npm run build\n```\nOR, run `ng build` in the angular project directory to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n```\n$ cd timeline-dep-graph/\n$ ng build\n```\n\n## Development server\nRun `ng serve` in the angular project for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\nInstall the project dependecies \u003cem\u003eonce\u003c/em\u003e\n```\n$ cd timeline-dep-graph/\n$ npm install\n```\nThen run\n```\n$ cd timeline-dep-graph/\n$ ng serve\n```\n\n## Running unit tests\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\nInstall the project dependecies \u003cem\u003eonce\u003c/em\u003e\n```\n$ cd timeline-dep-graph/\n$ npm install\n```\nThen run\n```\n$ cd timeline-dep-graph/\n$ ng test\n```\n\n## API\n``` js\nexport type TaskId = string;\n\n/**\n * Status represents the statuses that a task can have.\n * The statuses are ordered by priority. For example in the provided\n * statuses below, FAILED has the highest priority and SUCCESS\n * has the lowest priority.\n * Thus if tasks are grouped, FAILED tasks will be in the most upper group level\n * and SUCCESS tasks will be in the lowest group level.\n *\n * If more Statuses are needed, please add them below and add their\n * associated styling in the `styles.scss` or in your global styling file.\n * For every new status add two classes:\n *\n * ```\n * rect.tdg-(status value) {\n *  fill: (status color);\n * }\n *\n * small.tdg-(status value) {\n *  color: (status color);\n * }\n * ```\n *\n * For example, adding an `ACTION_REQUIRED = action_required` status.\n * Their styling could be:\n * ```\n * rect.tdg-action_required {\n *  fill: orange;\n * }\n *\n * small.tdg-action_required {\n *  color: orange;\n * }\n * ```\n */\nenum Status {\n  FAILED = 'failed',\n  BLOCKED = 'blocked',\n  UNKNOWN = 'unknown',\n  RUNNING = 'running',\n  SUCCESS = 'success',\n}\n\ninterface Task {\n  readonly id: TaskId;\n  name: string;\n  status: Status;\n  dependants: TaskId[];\n  startTime?: Date;\n  finishTime?: Date;\n  subTasks: Task[];\n}\n\n@Component{...}\nclass DependencyGraph {\n   @Input() tasks: Task[] = [];\n\n  /**\n   * The minHeight of the timeline is in pixels or as a percentage.\n   * ```\n   * minHeight = 400; // Sets the timeline's minimum height to 400px.\n   * minHeight = \"400px\"; // Sets the timeline's minimum height to 400px.\n   * minHeight = \"50%\"; // Timeline spans in minimum 50% of its parent's height.\n   * ```\n   */\n  @Input() minHeight?: number | string;\n\n  /**\n   * The width of the timeline is in pixels or as a percentage.\n   * When width is undefined or null,\n   * the width of the timeline spans 100% of its parent's width.\n   * ```\n   * width = 400; // Sets the timeline's width to 400px.\n   * width = \"400px\"; // Sets the timeline's width to 400px.\n   * width = \"50%\"; // Timeline spans 50% of its parent's width.\n   * ```\n   */\n  @Input() width?: number | string;\n\n  /**\n   * Adjust the visible window such that,\n   * the selected task is centered on the screen.\n   */\n  @Input() focusTask?: TaskId;\n\n  /**\n   * selectedTask is fired when the task name is being clicked on.\n   */\n  @Output() selectedTask = new EventEmitter\u003cTaskId\u003e();\n\n  /**\n   * taskOver is fired when the cursor moves over a task.\n   */\n  @Output() taskOver = new EventEmitter\u003cTaskId\u003e();\n\n  /**\n   * taskOut is fired when the cursor moves out of a task.\n   */\n  @Output() taskOut = new EventEmitter\u003cTaskId\u003e();\n}\n\n```\n\n## Contribute\nContributions to the TDG library are very welcome. Please check [this](CONTRIBUTING.md).\n\n## License\nApache 2.0\n\nThis is not an official Google product.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSarAhmed%2Ftimeline-dep-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSarAhmed%2Ftimeline-dep-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSarAhmed%2Ftimeline-dep-graph/lists"}