You are modifying an existing D3 + React cell rendering implementation.
CRITICAL RULE: You are ONLY allowed to change the TEXT COLOR behavior and ONLY for cells that have anomaly data.
You must NOT change:
- Gradients
- Blur filters
- Border stroke
- Glow logic
- Layer order
- Animation timing constants
- Easing functions
- Opacity animation
- SVG structure
- D3 transition chaining
- Rendering logic for non-anomaly cells
- Any existing visual colors
For anomaly cells only:
When blink cycle runs:
-
During ACTIVE state: Text color must be pure black (#000000)
-
During FADE_OUT: Text color must smoothly transition toward white
-
During CLEAR state: Text color must be pure white (#FFFFFF)
-
During FADE_IN: Text color must transition back toward black
This loop must continue indefinitely in sync with the existing blink animation.
- Non-anomaly cells must behave EXACTLY as before.
- Do NOT animate text color for non-anomaly cells.
- Use D3 transitions (not CSS).
- Use the SAME timing constants: ACTIVE_HOLD FADE_OUT CLEAR_HOLD FADE_IN
- Use the SAME easing functions: FADE_OUT_EASE FADE_IN_EASE
- Keep recursive blinkCycle() structure intact.
- Do NOT simplify transition chaining.
- Do NOT modify opacity transitions.
- Do NOT alter gradient stops.
- Do NOT alter blur stdDeviation.
- Do NOT refactor the component.
- Do NOT move logic outside current useEffect.
- Detect anomaly condition (assume boolean isAnomaly).
- Capture text selection in a variable.
- Inside blinkCycle:
- Chain color transitions alongside opacity transitions.
- Use d3.interpolateRgb("#000000", "#FFFFFF").
- Ensure transitions are synchronized with opacity durations.
- Ensure non-anomaly cells skip color animation entirely.
Return:
- Short explanation of what was added.
- Only modified code sections.
- Clearly mark additions.
- Do NOT rewrite unrelated code.