feat: add deletion-marked visual indicators to catalog graph nodes

[kaviththiranga]

Nodes marked for deletion now display with dashed borders, diagonal
stripe overlay, reduced opacity, and a warning-colored accent. The
graph legend includes a new "Marked for Deletion" chip.

Summary by CodeRabbit

• New Features
  • Nodes marked for deletion now show a clear visual state: "Deleting" label, deletion-colored border/accent, reduced opacity, diagonal stripe overlay, and an updated tooltip indicating "Marked for Deletion".
  • Graph legend now includes a "Marked for Deletion" chip to explain the deletion visual and help identify affected nodes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds deletion-state detection and UI indicators for nodes marked for deletion: utility function and color constant, node rendering changes (labels, colors, dashed stroke, diagonal stripe overlay, tooltip), and an optional legend chip to show the deletion indicator.

Changes

Cohort / File(s)	Summary
Deletion Utility Layer plugins/openchoreo-react/src/utils/graphUtils.ts	Added DELETION_WARNING_COLOR constant and exported isNodeMarkedForDeletion(entity) which checks for a deletion timestamp annotation.
Node Deletion Visuals plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx	Branch rendering when node is deleting: reduced opacity, kind label → "Deleting", dashed stroke option, border/accent color switch to DELETION_WARNING_COLOR, SVG striped overlay pattern (unique IDs), and tooltip/title suffix.
Legend Updates plugins/openchoreo-react/src/components/GraphLegend/GraphLegend.tsx	Extended GraphLegendProps with optional showDeletionIndicator?: boolean (default true) and added DeletionLegendChip to render a "Marked for Deletion" chip styled with DELETION_WARNING_COLOR.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• sameerajayasoma
• jhivandb
• stefinie123

Poem

🐰 I nibble code and leave a stripe,
A warning hue, a gentle type,
"Deleting" whispers on the node,
A legend shows the flagged road,
Hop on — the graph now wears a stripe!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description provides a brief explanation and screenshot of the feature, but omits most required template sections like Purpose, Goals, User stories, Release notes, Documentation, and others.	Complete the PR description by filling in required sections: Purpose, Goals, Approach, User stories, Release note, Documentation, and other applicable sections from the template.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding visual indicators to graph nodes that are marked for deletion.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx (1)

130-130: Consider preserving kind information alongside deletion status.

When isDeleting is true, kindLabel becomes "Deleting" and the original kind (e.g., "Component", "Environment") is lost. Users may want to know both what type of entity is being deleted and that it's marked for deletion.

Consider an alternative like "Deleting Component" or keeping the kind label and relying on other visual cues (color, stripes, opacity) to convey deletion status.

♻️ Optional: Preserve kind in label

- const kindLabel = isDeleting ? 'Deleting' : getNodeKindLabel(entity.kind);
+ const baseKindLabel = getNodeKindLabel(entity.kind);
+ const kindLabel = isDeleting && baseKindLabel ? `Deleting ${baseKindLabel}` : baseKindLabel;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx`
at line 130, The label currently drops the entity kind when deletion is active;
update the logic that sets kindLabel so it preserves the original kind from
getNodeKindLabel(entity.kind) and adds a deletion prefix or suffix when
isDeleting is true (e.g., "Deleting Component"), by constructing the label from
getNodeKindLabel(entity.kind) plus a deletion marker when isDeleting is set;
modify the assignment of kindLabel (referencing kindLabel, isDeleting,
getNodeKindLabel, and entity.kind) accordingly or alternatively keep the
original kindLabel and rely on visual cues for deletion state.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx`:
- Line 130: The label currently drops the entity kind when deletion is active;
update the logic that sets kindLabel so it preserves the original kind from
getNodeKindLabel(entity.kind) and adds a deletion prefix or suffix when
isDeleting is true (e.g., "Deleting Component"), by constructing the label from
getNodeKindLabel(entity.kind) plus a deletion marker when isDeleting is set;
modify the assignment of kindLabel (referencing kindLabel, isDeleting,
getNodeKindLabel, and entity.kind) accordingly or alternatively keep the
original kindLabel and rely on visual cues for deletion state.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4bd5de99-a4c6-4130-8926-b178d18bbd2f

📥 Commits

Reviewing files that changed from the base of the PR and between fe4d514 and 8c6242f.

📒 Files selected for processing (3)

• plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx
• plugins/openchoreo-react/src/components/GraphLegend/GraphLegend.tsx
• plugins/openchoreo-react/src/utils/graphUtils.ts

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx`:
- Around line 139-143: Different inputs can normalize to the same sanitizedId
causing clip/pattern ID collisions; change the ID-generation so clipId and
stripePatternId include a collision-resistant suffix derived from the original
id (instead of relying on lossy sanitizedId alone). Specifically, keep the
sanitizedId for safe characters but append a short stable hash or encoded
fingerprint of the raw id (e.g., compute a short hash function or
base64/URL-safe encode of id) and use that combined string when creating clipId
and stripePatternId so each original id maps to a unique SVG ID (update the
variables sanitizedId, clipId, stripePatternId in CustomGraphNode.tsx
accordingly).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74fc8f83-1204-471a-b75f-d6e72028b722

📥 Commits

Reviewing files that changed from the base of the PR and between 8c6242f and ecfe45d.

📒 Files selected for processing (3)

• plugins/openchoreo-react/src/components/CustomGraphNode/CustomGraphNode.tsx
• plugins/openchoreo-react/src/components/GraphLegend/GraphLegend.tsx
• plugins/openchoreo-react/src/utils/graphUtils.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• plugins/openchoreo-react/src/components/GraphLegend/GraphLegend.tsx