{"id":24499914,"url":"https://github.com/luillyfe/planner-node-map","last_synced_at":"2025-03-15T07:20:56.082Z","repository":{"id":270717864,"uuid":"911243875","full_name":"luillyfe/planner-node-map","owner":"luillyfe","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-13T21:18:11.000Z","size":1734,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T22:16:18.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://planner-node-map.vercel.app","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/luillyfe.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":"2025-01-02T15:10:44.000Z","updated_at":"2025-01-13T21:18:14.000Z","dependencies_parsed_at":"2025-01-02T17:07:20.849Z","dependency_job_id":null,"html_url":"https://github.com/luillyfe/planner-node-map","commit_stats":null,"previous_names":["luillyfe/planner-node-map"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luillyfe%2Fplanner-node-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luillyfe%2Fplanner-node-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luillyfe%2Fplanner-node-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luillyfe%2Fplanner-node-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luillyfe","download_url":"https://codeload.github.com/luillyfe/planner-node-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243696705,"owners_count":20332823,"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":[],"created_at":"2025-01-21T22:16:23.005Z","updated_at":"2025-03-15T07:20:56.045Z","avatar_url":"https://github.com/luillyfe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Node Graph Visualization 🔄\n\nA beautiful and interactive visualization tool for workflow processes, built with React Flow and TypeScript. This project provides a dynamic way to visualize complex workflows with dependencies and detailed step information.\n\n![Project Preview](reactflow.png)\n\n## ✨ Features\n\n- 🎯 Interactive node-based workflow visualization\n- 🔄 Animated connections between dependent steps\n- 💫 Smooth transitions and hover effects\n- 📱 Responsive design\n- 🎨 Custom styled nodes for different tool types\n- 🔍 Detailed step information in an elegant drawer\n- 🎮 Intuitive controls for navigation\n- 🖼️ Beautiful gradients and modern UI design\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- npm or yarn\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/luillyfe/planner-node-map.git\n```\n\n2. Install Dependencies\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. Run the development server\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n4. Open http://localhost:3000 in your browser\n\n## 🛠️ Built With\n\n- React - Frontend framework\n- TypeScript - Programming language\n- React Flow - Node-based visualization library\n- Tailwind CSS - Styling\n- React Icons - Icon library\n\n## 📦 Project Structure\n\n```\nsrc/\n├── components/\n│ ├── InteractiveNodeGraph.tsx # Main component\n│ └── ui/ # UI components\n├── types/ # TypeScript interfaces\n└── styles/ # CSS styles\n```\n\n## 🎨 Customization\n\n### Adding New Node Types\n\nTo add a new node type, update the getNodeStyle and getToolIcon functions:\n\n```typescript\nconst getNodeStyle = (tool: string) =\u003e {\n  const styles: { [key: string]: string } = {\n    // Add new node style here\n    NewTool: `${baseStyle} bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200`,\n  };\n  return styles[tool] || baseStyle;\n};\n\nconst getToolIcon = (tool: string) =\u003e {\n  const icons: { [key: string]: JSX.Element } = {\n    // Add new tool icon here\n    NewTool: \u003cNewIcon className=\"w-6 h-6 text-purple-600\" /\u003e,\n  };\n  return icons[tool] || \u003cFaSearch className=\"w-6 h-6\" /\u003e;\n};\n```\n\n### Modifying the Workflow\n\nUpdate the planData object to modify the workflow:\n\n```typescript\nconst planData: PlanData = {\n  goal: \"Your workflow goal\",\n  steps: [\n    {\n      description: \"Step description\",\n      tool: \"ToolName\",\n      parameters: {\n        // Your parameters\n      },\n      dependencies: [\"DependencyTool\"],\n    },\n    // Add more steps...\n  ],\n};\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (git checkout -b feature/AmazingFeature)\n3. Commit your changes (git commit -m 'Add some AmazingFeature')\n4. Push to the branch (git push origin feature/AmazingFeature)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE.md file for details\n\n## 👏 Acknowledgments\n\n- React Flow for the amazing visualization library\n- Tailwind CSS for the utility-first CSS framework\n- React Icons for the beautiful icons\n\n## 📧 Contact\n\nFermin Blanco - @luillyfe - luillyfe89@gmail.com\n\nProject Link: https://github.com/luillyfe/planner-node-map\n\n---\n\nMade with ❤️ by Fermin Blanco\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluillyfe%2Fplanner-node-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluillyfe%2Fplanner-node-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluillyfe%2Fplanner-node-map/lists"}