Back
Trustworthy Ethical Assurance

Trustworthy Ethical Assurance

Richard Griffiths / 29 August 2024

Contributor

This is a collaboration project with The Alan Turing Insitute on their Trustworthy and Ethical Assurance platform. The aim of this project was to take their initial prototype and build a more modern and collaborative design to better their user's experience. Also enhancing the project with new features such as login third party providers and libe collaboration.

Features

  • Assurance Cases: Create and manage assurance cases.
  • Sharing & Collaboration: Share cases with other users with different levels of access.
  • Login with GitHub: Use your GitHub account to login to use the platform.
  • Interactive Diagram: Manage the assurance by adding new elements to the diagram, or move them to other elements.
  • Responsive Design: New modern and mobile friendly design.

Technologies

  • NextJs: A React framework for building static and dynamic websites.
  • Tailwind CSS: A utility-first CSS framework for building custom designs.
  • Docker: Application container and deployment
  • Reactflow: A customizable React component for building node-based editors and interactive diagrams.
  • Next Auth.js: Authentication for Next.js applications used for 3rd party providers.
  • Python: A high-level, general-purpose programming language.

Challenges and Solutions

Challenge 1: Find a better way of displaying the assurance case diagram.

It was important to replace the original diagram tool to something more user friendly and that we could easily adapt into the new design. Another requirement here was to use an open source library, so that other developers could pick this up and evolve in the future if needed. I was tasked to take these requirements and find the best tool and how I can provide a solution that ticked all the boxes.

This is when I came across ReactFlow a Javascript based diagram library that would fit most of the requirements. However, some features were hidden behind a license (no scope for additional spending) so I had manually code these in, for example the toggling feature that collapses all child elements.

Screenshots/Demos

Diagram of an Assurance Case Diagram of an Assurance Case

Conclusion

This was a really fun project to work on and has given me some knowledge and understanding when working with some digram tools such as ReactFlow, as this was something completely new to me. Keen to see how this application evolves, as I know interactivity could be improved when working with the diagram, allowing users to create nodes directly from a parent.