Closes ENG-159

Description Of Changes

This PR completely refactors the datamap visualization from Cytoscape.js to ReactFlow + Dagre layout engine. This migration provides better React integration, improved performance, and more maintainable code architecture. The new implementation includes enhanced accessibility features, proper CSS modules, and a more responsive user interface.

Key architectural changes include replacing the imperative Cytoscape API with declarative ReactFlow components, implementing automatic layout using Dagre for connected components and grid layout for isolated nodes, and moving from inline styles to CSS modules with proper hover/focus states.

Code Changes

• Core Migration:

  • Replaced CytoscapeGraph component with new DatamapGraph using ReactFlow
  • Added new dependencies: @dagrejs/dagre v1.1.4 and @types/dagre v0.7.52
  • Removed all Cytoscape.js related code and dependencies

• New Components:

  • Added DatamapSystemNode.tsx - Custom ReactFlow node component for system visualization
  • Added DatamapGraph.tsx - Main graph visualization component with ReactFlow integration
  • Created useDatamapGraph custom hook for data transformation and layout logic
  • Added getLayoutedElements utility function for Dagre positioning

• Context & State Management:

  • Removed DatamapGraphContext and related context providers
  • Removed DatamapGraphStore component wrapper
  • Simplified state management by leveraging ReactFlow's built-in capabilities

• Import Path Updates:

  • Updated import paths across multiple components for consistency
  • Fixed relative imports in DataFlowAccordionForm.tsx, CustomFieldModal.tsx, and other affected files
  • Updated icon imports (e.g., TrashCanSolidIcon) to use correct paths

• Testing Updates:

  • Updated Cypress tests to use "reactflow-graph" selector instead of "cytoscape-graph"
  • Updated test expectations in datamap.cy.ts and routes.cy.ts

• UI/UX Improvements:

  • Removed system count display from SettingsBar component
  • Enhanced node styling with proper hover, focus, and selection states
  • Improved accessibility with keyboard navigation support

Steps to Confirm

1. Basic Functionality:

   • Navigate to the Datamap page and verify the graph renders correctly
   • Confirm that system nodes are displayed with proper styling
   • Test node selection and highlighting functionality

2. Layout & Interaction:

   • Verify that connected systems use Dagre layout and isolated systems use grid layout
   • Test graph panning, zooming, and viewport centering
   • Confirm that node connections (edges) are displayed correctly

3. Accessibility:

   • Test keyboard navigation through system nodes
   • Verify focus indicators are visible and properly styled
   • Confirm hover states work as expected

4. Performance:

   • Load datamap with various dataset sizes to ensure smooth rendering
   • Test interaction responsiveness compared to previous Cytoscape implementation

5. Integration:

   • Verify that datamap drawer functionality still works correctly
   • Test system selection and related UI updates
   • Confirm no console errors or warnings appear

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required