[BUG] Compliance Level CSS bug

[jtquach1]

Describe the bug

A clear and concise description of what the bug is.

The "Compliance Level" chart in the Results view's SVG color-changing-functionality upon hovering gets disabled when clicking on the chart. The color-changing functionality comes back when flipping the Comparison View toggle. The bug can still manifest when clicking on the chart again.

To Reproduce

Steps to reproduce the behavior:

1. Load "Red Hat 7 STIG Baseline" from the Samples tab; doesn't matter what file is loaded as long as its Compliance Level can be measured. You will be directed to the Results view.
2. Move the mouse cursor over on any part of the radial/circular shaped red/yellow/green squares in the Compliance Level chart. The squares will glow.
3. Click on any of the squares.
4. Move the mouse cursor away from the squares then move it back to a square.
5. See error
6. Open hamburger menu in top-left
7. Click the Comparison View toggle button twice to flip between Comparison View and Results view.
8. Repeat steps 2-5.

Expected behavior

A clear and concise description of what you expected to happen.
Hover/glow-effect persists after clicking on the colored-radial Compliance Level chart.

Screenshots

If applicable, add screenshots to help explain your problem.

Screen.Recording.2024-10-24.at.4.10.43.PM.mov

Desktop (please complete the following information):

• OS: OS Sonoma 14.7
• Browser: edge
• Version: 129.0.2792.89

Additional context

If you could also submit the file that would also be great!
Bug most likely is found in heimdall2/apps/frontend/src/components/cards/ComplianceChart.vue or heimdall2/apps/frontend/src/views/Results.vue, but former is most probable.