google / google/flow-lens

Add Opacity to Untouched Nodes

Open
#44 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
81
Forks
11
PR merge metrics
No merged PRs in 30d

Description

## Description
When reviewing flow changes in a git diff context, it can be challenging to quickly focus on the modified elements. Adding opacity to untouched nodes would make the changes even more apparent during code review.

## Proposed Solution
Add 50% opacity to all nodes that weren't added, modified, or deleted in the diff. Implementation varies by diagram tool:

### Mermaid
- Add `opacity:.50` to the style class for untouched nodes

### Graphviz
- Modify the fillcolor attribute to include alpha channel
- Change from: `fillcolor="#F9548A"`
- To: `fillcolor="#F9548A80"` (80 = 50% opacity)

### PlantUML
- Similar to Graphviz, add alpha channel to colors
- Change from: `#F9548A`
- To: `#F9548A80`

## Expected Behavior
- Added nodes: Full opacity + green border
- Modified nodes: Full opacity + orange border
- Deleted nodes: Full opacity + red border
- Unchanged nodes: 50% opacity, no special border

## Benefits
- Easier visual distinction between changed and unchanged elements
- Faster code review process
- Better focus on the actual changes in complex flows

## Example

Image

## Implementation Notes
- This change would only affect diff mode
- The opacity modification should be applied after determining node diff status
- We may need to change the flow parsing logic and introduce a new diff status enum - `UNCHANGED`

## Related Files
- src/main/mermaid_generator.ts
- src/main/graphviz_generator.ts
- src/main/plantuml_generator.ts
- src/main/uml_generator.ts

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.