Embeddings Panel Legend Margin

[ritch]

Improve the Embeddings panel plot legend positioning. If the width of the panel is < 500px, the legend will have a new 62px margin to account for the menu.

Summary by CodeRabbit

• New Features

  • Improved responsiveness of the embeddings plot legend with dynamic repositioning for narrow viewports.

• Bug Fixes

  • Prevented legend overlap on small widths to maintain visibility.
  • Enforced consistent top-right anchoring of the legend across screen sizes.

• Style

  • Refined legend placement and alignment for clearer readability and a cleaner layout on compact screens.

[coderabbitai]

Walkthrough

Updated EmbeddingsPlot legend positioning: legend.y is now conditional based on bounds.width (bounds.width < 500 ? 1 - 62 / bounds.height : 1) and explicit legend anchors/coordinate references were added (xanchor: "right", yanchor: "top", xref: "paper", yref: "paper").

Changes

Cohort / File(s)	Summary
Plot legend positioning in embeddings plot app/packages/embeddings/src/EmbeddingsPlot.tsx	Replaced fixed legend.y: 1 with conditional y = bounds.width < 500 ? 1 - 62 / bounds.height : 1; added xanchor: "right", yanchor: "top", xref: "paper", yref: "paper" to anchor the legend at the top-right in paper coordinates.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant EmbeddingsPlot as EmbeddingsPlot (React)
    participant Layout as Layout Calc
    participant Plotly as Plotly Render

    User->>EmbeddingsPlot: Mount / Resize
    EmbeddingsPlot->>Layout: Get bounds (width, height)
    Layout-->>EmbeddingsPlot: bounds

    rect rgba(200,230,255,0.25)
    note right of EmbeddingsPlot: legend.y calculation changed
    EmbeddingsPlot->>EmbeddingsPlot: if bounds.width < 500 then\nlegend.y = 1 - 62 / bounds.height\nelse legend.y = 1
    end

    EmbeddingsPlot->>Plotly: Render with legend anchors\n(xanchor="right", yanchor="top", xref="paper", yref="paper")
    Plotly-->>User: Plot displayed with adjusted legend

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Pre-merge checks (1 passed, 2 warnings)

❌ Failed Checks (2 warnings)

Check Name	Status	Explanation	Resolution
Description Check	⚠️ Warning	Description does not follow the repository’s required template and is missing all of the mandated sections such as “What changes are proposed,” “How is this patch tested?”, “Release Notes,” and “What areas of FiftyOne does this PR affect?”	Please update the PR description to use the repository’s template, including the “What changes are proposed,” “How is this patch tested?”, “Release Notes” section with checkboxes and details, and “What areas of FiftyOne does this PR affect?” fields.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed Checks (1 passed)

Check Name	Status	Explanation
Title Check	✅ Passed	Title succinctly captures the primary change of adjusting the embeddings panel legend’s margin for narrow widths, making it clear and specific to the changeset.

Poem

I nudged the legend to the light,
Top-right snug, a tidy sight.
When windows shrink, I hop and slide,
A tiny shift to keep it wide.
— Rabbit, plotting with delight 🐇📈

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  - Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.
  - Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4ef0ee6 and 495b50e.

📒 Files selected for processing (1)

• app/packages/embeddings/src/EmbeddingsPlot.tsx (1 hunks)

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

• app/packages/embeddings/src/EmbeddingsPlot.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)

• GitHub Check: test / test-python (ubuntu-latest-m, 3.9)
• GitHub Check: test / test-python (ubuntu-latest-m, 3.12)
• GitHub Check: test / test-python (ubuntu-latest-m, 3.11)
• GitHub Check: test / test-app
• GitHub Check: test / test-python (ubuntu-latest-m, 3.10)
• GitHub Check: e2e / test-e2e
• GitHub Check: lint / eslint
• GitHub Check: build / build

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ritch/emb-panel-legend

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/packages/embeddings/src/EmbeddingsPlot.tsx (2)

141-142: Drop legend.xref/yref — legend already uses paper coordinates; these props are likely ignored.

Cleaner config and fewer confusing, non-functional props.

Apply this diff:

-              yref: "paper",
-              xref: "paper",

---

138-140: Extract magic numbers (500, 62) and optionally clamp for tiny heights.

Improves readability and guards against negative y if height < 62.

Example:

const NARROW_WIDTH_PX = 500;
const LEGEND_MENU_MARGIN_PX = 62;

// ...
y: bounds.width < NARROW_WIDTH_PX
  ? Math.max(0, 1 - LEGEND_MENU_MARGIN_PX / bounds.height)
  : 1,

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 01a49dd and 4ef0ee6.

📒 Files selected for processing (1)

• app/packages/embeddings/src/EmbeddingsPlot.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

⚙️ CodeRabbit configuration file

Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.

Files:

• app/packages/embeddings/src/EmbeddingsPlot.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: test / test-python (ubuntu-latest-m, 3.12)
• GitHub Check: test / test-python (ubuntu-latest-m, 3.11)
• GitHub Check: test / test-python (ubuntu-latest-m, 3.9)
• GitHub Check: test / test-python (ubuntu-latest-m, 3.10)
• GitHub Check: e2e / test-e2e