Dromos is designed to enhance user engagement and collaboration within a specific interest community through dynamic interactive node graphs which users can create, edit, maintain. This platform targets both public and private sector researchers, scientists and stakeholders, offering tools that not only facilitate comprehensive visualization of causal pathways, but also encourage collaboration and knowledge sharing.

This Readme explicates the following with the regard to the Dromos front-end. For back-end related topics, such as back-end technologies and database structure, see Dromos-be.

• Technologies Used
• Features
  • Existing Features
  • Planned Features
• Components
• Testing
  • Validator Testing
• Known Bugs
• Deployment
• Credits
• Media

The technology stack and design choices for Dromos were purposefully selected with a clear focus on its future public use and the necessity for continuous evolution. The adoption of TypeScript over JavaScript, ShadCN/UI instead of Bootstrap, and TailwindCSS rather than traditional vanilla CSS, were all strategic decisions made to ensure the platform’s suitability for external parties. These choices are essential for maintaining the integrity and extensibility of Dromos as it transitions from initial development and portfolio project into a public-facing offering. The technologies chosen are not only robust and scalable but also support the objective of ongoing iteration and refinement, which is crucial considering that Dromos is intended to be enhanced and expanded by different developers over time.

Used for building user interfaces with components, allowing for efficient and flexible UI development.

Used for enhancing JavaScript code with static type definitions, TypeScript offers improved maintainability, understandability, and robustness of the codebase. By introducing static typing, it helps catch errors early in the development process and provides a more scalable foundation for large projects.

Used for creating custom designs quickly with a utility-first CSS framework, enabling rapid styling directly in markup.

Used for creating modern and interactive user interfaces with a set of high-quality, customizable React components.

Used for integrating scalable vector icons as React components, enhancing UI designs with easily customizable icons.

Used for incorporating a wide array of icons into web and mobile interfaces, customizable via CSS for various design needs.

Used for schema declaration and validation, ensuring data integrity with type-safe input validation in JavaScript and TypeScript applications.

Used for managing state in React applications, providing a simple and minimalistic approach to global state management outside of the React render cycle.

Used for drawing and managing large network graphs efficiently, enabling interactive visualizations directly within web applications.

Used for efficient and fast package management, pnpm offers a unique node_modules structure that saves disk space and reduces installation time by avoiding redundancy.

Used for front-end tooling, Vite provides a fast development environment by leveraging modern web technologies. It offers hot module replacement and optimized build times, significantly improving the developer experience.

• Interactive Graph: Utilizes SigmaJS to render interactive node graphs, enhancing user understanding of complex data structures.
• User Authentication: Secure login and registration system to manage user access and personalize user experiences.
• Dynamic Graph Rendering: Harnesses the power of SigmaJS and Django back-end to provide infrastructure to implement dynamic node coloring, sizing, and labeling.
• Customizable User Profiles: Users can customize their profiles, allowing them to add personal touches and relevant information.
• Responsive Design: Built with TailwindCSS for a seamless experience across all devices.
• CRUD User Accounts: Complete Create, Read, Update, and Delete (CRUD) capabilities for user accounts.
• Feed of Graphs with Recent Activity: Displays a live feed of graphs showing recent updates and interactions.
• View Graphs: Allows users to view details and statistics of graphs within the platform.
• CRUD Graphs: Users can create, read, update, and delete graphs.
• CRUD Nodes: Full CRUD functionality for managing nodes within the graphs.
• CRUD Comments: Users can comment on graphs and nodes, with full CRUD capabilities on these comments.
• Ability to View a Node in Quick View Using a Drawer: Quick access to view node details in a sliding drawer without leaving the current page.
• Ability to View a Node in Full View with Comments: Detailed view of a node including associated comments, enhancing user interaction and discussion.

• Ability to Open a Dropdown and Select Graph Layouts: Users can choose from various graph layouts, including directed acyclic graphs using the Dagre algorithm.
• Dynamic Coloring of Node Cycles: Automatically highlights nodes that cycle back to parent nodes, aiding users in identifying and resolving feedback loops.
• Ability to Fork Graphs: Similar to GitHub, allows users to fork graphs for personal modifications or experimentation.
• Sandbox Mode: Enables users to experiment with graphs in a safe environment without altering the main graph data.
• Advanced Analytics: Including centrality analysis, D-separation, and other complex data analysis techniques.
• Levels of Evidence for Nodes: Allows users to assign and display levels of evidence or certainty to nodes within graphs.
• Ability to Throttle Data Up and Down: Users can simulate changes in node input data to see how these alterations propagate through the network.
• Governance Model for Canonical Graphs: Establishes a framework for managing and approving changes to canonical graphs.
• Billing: Implements a billing system for users, particularly useful for service monetization and managing premium features.
• Mobile App: Extend functionality with a native mobile application.

During development, management of both components and state became increasingly difficult, and at same point it became apparent that the entire site would benefit from refactoring two componenents, which also served as the routes, out into two routes with several many fine-grained components. Not only did this help keep the architecture of the site more organized, but it also provided more reesuability--allowing components to be used in more than one place--as well as performance, as refactoring components no longer needed to be rendered when nothing changed. However, in the process of doing this, managing state become unwieldy, with prop-drilling and passing state to and from parent and child components. Therefore, Zustand was deployed to help manage state. One such example would be updating the node store when a node is clicked, and then being able to access that node ID stored in the stated when navigating out to the full node view. Prior to the architecture, the site's rough architecture can be seen here, with the orance arrows representing passing state:

With the refactoring, the fine-grained archecture resulting from abstrocting components out into much smaller can be seen, along with abstracting state out into centralized storage locations using Zustand:

Note: For those features marked as future implementation, this is specificially in regards to front-end implementation. Full CRUD functionality is possible through the admin panel, and therefore the tests below relate to the public user-facing front-end.

• TSX: TSX was validated using eslint.org. The total count was 3417 lines of .tsx code, with the only error generated being an as keyword in an Axios call, which can be safely ignored:

• CSS:

• In node view, owner ID is being shown, when it should be username:
• Responsivess issues in mobile view for the graph-view persists, as managing the HTML canvas with CSS proved to be difficult:

1. Cloning the Repository:

   • Clone the repository locally: git clone repository_url
   • Navigate to the project directory: cd project_directory

2. Setting Up Django Project:

   • Install Django: pip install django
   • Create a new Django project: django-admin startproject project_name
   • Navigate to the project directory: cd project_name
   • Create a Django app: python manage.py startapp app_name

3. Environment Variables Setup:

   • Create a .env file in the root directory.
   • Define environment variables:
     • SECRET_KEY: Django secret key for cryptographic signing.
     • DATABASE_URL: URL for connecting to the PostgreSQL database.
     • Other variables as needed (e.g., DEBUG, ALLOWED_HOSTS).

4. Heroku Deployment:

   • Install the Heroku CLI.
   • Log in to Heroku: heroku login
   • Create a new Heroku app: heroku create app_name
   • Set up PostgreSQL addon for the database: heroku addons:create heroku-postgresql:hobby-dev
   • Set Django environment variables in Heroku: heroku config:set VARIABLE_NAME=value
   • Push code to Heroku: git push heroku main

5. Database Migration:

   • Run database migrations: python manage.py migrate
   • Create a superuser for admin access: python manage.py createsuperuser

1. Setting Up ElephantSQL:

   • Sign up for an ElephantSQL account.
   • Create a new PostgreSQL instance.
   • Note down the database URL.

2. Environment Variables Setup:

   • Add the ElephantSQL database URL to the .env file.

1. Cloning the Repository:

   • Clone the repository locally: git clone repository_url
   • Navigate to the project directory: cd project_directory

2. Heroku Deployment:

   • Ensure you have a package.json file with required dependencies.
   • Create a new Heroku app: heroku create app_name
   • Set environment variables if necessary: heroku config:set VARIABLE_NAME=value
   • Push code to Heroku: git push heroku main

3. Installing Required Packages:

   • Decide on required packages:
     • React: npm install react
     • TypeScript: npm install typescript
     • TailwindCSS: npm install tailwindcss
     • ShadCN/UI: npm install @shadcn/ui
     • Lucide-React: npm install @lucide/react
     • Fontawesome: npm install @fortawesome/fontawesome-free
     • Zod: npm install zod
     • Zustand: npm install zustand
     • SigmaJS: npm install sigma
     • pnpm: npm install pnpm
     • Vite: npm install vite

Refer to the provided list of technologies used in the Dromos project for detailed information on the tech stack employed.

In general, the choice keep Dromos simple is that it is a SaaS app for business purposes, and in a highly technical space. Therefore, bright colors, unneeded imagery and any otherwise distracted media and colors were not used. As well, the choice to maintain a highly minimal design was done purposefully to maintain flexibility, as there will be changes in the future.

This was the original Balsamiq for the Graph View. One can see the difference between the mock-up and final implementation, as it became apparent that a dropdown would rather than scrollable cards would free up space for other needed functionality, such as the selected graph card and create node button.

Here, the actual implementation closely resembled the mock-ups of the Navbar:

Some improvements would be required, including:

• Node Quick drawer, which appears upon clicking a node
• Comment formatting and node full view

Additional improments would include:

• Additionaly rendering algorithms for graph
• Arrows on graph rendering to show directionality

• All content used in project is original.

• Icons from Fontawesome and Lucide.
• Logo generated using logo.com
• Blood Pressure picture: Image by Mohamed Hassan from Pixabay