⭐️ Inspiration
By creating this new version, we aimed to provide a more intuitive, real-time solution that allows teams to quickly understand relationships between tasks, prioritize issues more effectively, and maintain better communication. This change has not only streamlined our workflow but also increased transparency and accuracy in project management.
Always look beyond what you can see! ✨
🌏 What it does
Issue Links Viewer enhances Jira’s issue management by providing a graph-based visualization of issue links:
- Visualizes issue networks from individual issues
- Enables link creation and deletion directly within the graph, simplifying issue relationship management.
- Filters links by criteria like issue type, status, priority, and link type to declutter the view.
- Switches between Hierarchical and Fluid layouts, offering different visual perspectives.
- Displays key issue details on interaction, reducing the need to switch contexts.
👩🏼💻 How we built it
Issue Links Viewer was meticulously developed to provide users with an intuitive and powerful tool for exploring and managing issue relationships within Jira. Built on the Atlassian Forge platform, the application takes advantage of its secure and scalable cloud infrastructure to deliver a seamless experience. The user interface is crafted using a React-based Custom UI, ensuring a responsive and modern design that prioritizes ease of use and accessibility.
At the heart of Issue Links Viewer lies the Vis Network library, a highly capable framework for data visualization, enabling users to easily navigate and understand complex issue relationships through interactive and visually engaging network diagrams. This capability is further enhanced by the integration with Jira's REST API, allowing real-time retrieval and display of issue data. This ensures that the information users work with is always current, accurate, and directly aligned with their Jira projects.
The development process followed rigorous testing protocols to guarantee reliability and high performance, even for large and complex issue hierarchies. Adhering to agile methodologies allowed the team to incorporate user feedback continuously, ensuring the application meets the evolving needs of teams working within Jira.
By leveraging state-of-the-art technology and a thoughtful design approach, Issue Links Viewer transforms the way users understand and interact with their Jira issues, offering a solution that is not only efficient but also visually appealing and user-focused.
😰 Challenges we ran into
The development of the Issue Links Viewer came with a variety of technical and design challenges that required considerable effort to overcome. One of the first hurdles we encountered was the incompatibility between Atlaskit tokens and the vis-network library. Atlaskit tokens are a core part of Jira's design system, but they did not initially integrate well with vis-network, which we relied on to build the graph visualization. This incompatibility led to visual inconsistencies and required us to invest significant time in customizing and fine-tuning the integration to achieve a seamless user interface that adhered to Jira’s design guidelines.
Adding dark mode functionality was a challenge that demanded creative problem-solving. While Atlaskit provided some support for dark mode, ensuring that the graph rendered correctly required detecting and responding dynamically to theme changes. By implementing a robust mechanism for detecting these changes, we successfully enabled the dark mode feature for graph, enhancing the user experience for those working in different theme. 📈
A particularly complex issue was managing the dynamic updates of nodes and connecting them to filters. Users needed a fluid and intuitive experience where graph nodes would accurately reflect changes in the linked filters. Implementing this feature involved designing a system that could efficiently handle real-time updates while maintaining a clear and visually appealing graph layout. Balancing performance with usability proved to be a challenging but rewarding endeavor.
Lastly, a major limitation we faced was the lack of support for adding a global graph to the Jira navigator in earlier Forge versions. This restriction meant that some key features of the Issue Links Viewer could not be fully realized till the end of this Hackathon.
Each of these challenges required a combination of in-depth research, iterative testing, and innovative problem-solving to address. Through persistence and collaboration, we were able to overcome these obstacles and deliver a robust and user-friendly tool.
📌 Accomplishments that we're proud of
We are proud to have developed a tool that significantly enhances the user interface and functionality of the Issue Links Viewer, addressing key limitations identified in the Connect version of the tool. By focusing on optimization and usability, we have improved performance and created a more seamless and intuitive experience for users.
A major highlight of our development process was the creation and utilization of our custom ARUK library for React components. This library allowed us to build reusable, efficient, and visually consistent elements tailored to the needs of the Issue Links Viewer. The integration of this library not only streamlined development but also ensured a cohesive design that aligns with user expectations. 📚
Through these advancements, we have delivered a tool that optimizes workflow, improves visualization, and supports users in navigating complex issue connections more effectively. We are excited to provide a solution that simplifies the Jira experience and adds value for teams.
💡 What we learned
The development of the Issue Links Viewer provided us with valuable insights and significantly enhanced our technical expertise. We honed our skills in React and the Atlassian Forge platform, gaining a deeper understanding of building robust and responsive applications within the Forge ecosystem.
A key lesson was learning how to effectively utilize Forge's in-memory storage capabilities. This allowed us to manage data efficiently while maintaining optimal performance, even when dealing with complex issue dependencies and real-time updates. Additionally, we mastered the use of modals to create a seamless and intuitive user experience, enabling users to interact with detailed issue information without leaving the graph interface.
These experiences not only improved our technical proficiency but also deepened our understanding of how to design solutions that integrate seamlessly into existing Jira links, providing value while remaining flexible and user-friendly.
🔜 What's next for Issue Links Viewer
We’re excited to share the upcoming features for Issue Links Viewer, designed to enhance its usability and integration:
Global Graph 🌍
Currently, the visualizations are limited to individual projects or predefined issue contexts. We're working on introducing a global graph, enabling users to view and explore issue relationships across the entire Jira instance with custom JQL.
Support for Epic-to-Child Relationships 💪
We’re planning to enhance suport for Epic -> Child connections, a key hierarchy in Jira. These will be clearly styled in the graph, with filtering options to help focus on what matters.
Edit Links 📝
While you can already add and delete links in the viewer, we’re planning to expand this functionality to include modifying link details
Export Graph Views 💬
A future update will include the ability to export graph views as files (like PNG or SVG) and potentially as shareable, interactive formats. This will make it easier to share insights or use visualizations in reports and discussions.
Log in or sign up for Devpost to join the conversation.