add hybrid panel section to common patterns

[imanjra]

What changes are proposed in this pull request?

add hybrid panel section to common patterns

How is this patch tested? If it is not, please explain why.

docs building

Release Notes

Is this a user-facing change that should be mentioned in the release notes?

• No. You can skip the rest of this section.
• Yes. Give a description of this change to be included in the release
  notes for FiftyOne users.

NA

What areas of FiftyOne does this PR affect?

• App: FiftyOne application changes
• Build: Build and test infrastructure changes
• Core: Core fiftyone Python library changes
• [d] Documentation: FiftyOne documentation changes
• Other

Summary by CodeRabbit

• Documentation
  • Added documentation for hybrid panels that combine Python backend with JavaScript/React frontend components, including references to example implementations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A new documentation section titled "Hybrid panels (Python + JavaScript/React)" has been added to the plugin development guide under the common patterns area. The section describes hybrid panels that combine Python and JavaScript/React implementations, includes a reference note with a link to a concrete example, and is positioned after the existing panel examples reference. This is a purely documentation-focused change with no modifications to APIs, configurations, or functional code.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Straightforward documentation addition with no code logic to verify
• Content accuracy of the hybrid panel description should be confirmed against actual implementation patterns
• Verify the referenced example link is accurate and accessible

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: adding a hybrid panel section to documentation's common patterns.
Description check	✅ Passed	Description covers what changes, how tested, and release notes status; 'How tested' is brief but sufficient for a docs-only change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/hybrid-panel

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81e6e6f and 5ac9749.

📒 Files selected for processing (1)

• docs/source/plugins/developing_plugins.rst (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-09T15:31:22.802Z

Learnt from: AdonaiVera
Repo: voxel51/fiftyone PR: 6303
File: docs/source/plugins/index.rst:419-423
Timestamp: 2025-09-09T15:31:22.802Z
Learning: The plugin ecosystem content in docs/source/plugins/index.rst is auto-generated from external plugin repositories via docs/scripts/generate_plugin_docs.py. Content quality issues like typos in plugin descriptions cannot be fixed directly in the documentation files and must be addressed at the source repositories by the plugin authors.

Applied to files:

• docs/source/plugins/developing_plugins.rst

⏰ 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). (1)

• GitHub Check: build

🔇 Additional comments (1)

docs/source/plugins/developing_plugins.rst (1)

3177-3189: Documentation content approved with formatting fix above.

The new hybrid panels section provides clear, concise documentation describing the feature and references a concrete example from the plugin repository. The structure, anchor reference, and prose quality all follow the existing documentation conventions in this file.

Once the underline formatting is corrected, this addition is ready for merge.

Please confirm that the documentation builds successfully after applying the underline fix by running the docs build process (e.g., make html or equivalent for your setup).

[AdonaiVera]

Hi @imanjra!
A couple of notes, from my perspective, this might fit really nicely under the developing-panels. I think it could also benefit from a bit more detail around how to use and structure it, with some concrete examples.

If you’re open to it, I already have a task planned for next week focused on improving plugin-related documentation. I’d be happy to include this as part of that work: review the full hybrid plugin PR in fiftyone/plugins, move this section into the Develop Panels docs, and expand it with more explanations and practical usage examples.

I think we should update this image too:

From a conversation with @ritch (and if I understood correctly), this also feels like the ideal kind of plugin architecture we’d love users to build, and I think we can add more info of how to use it in the docs!

Totally open to your thoughts!

[imanjra]

Hi @AdonaiVera!

I like the idea and am totally open to it. Also, I am happy to help with structuring guidelines, use cases, and concrete examples.

Edit: this section is indeed targeted to be under the Developing Panels section. The bulk of the details are in the plugins repo (voxel51/fiftyone-plugins#275, mainly in this README.md). However, I am happy to have the details moved here and link to it in the plugins example repo

[AdonaiVera]

Hi team,
I rebased with the latest changes, pointed everything to main, and added some improvements:

• A new image that includes the new hybrid panel pattern. We can still make adjustments to this image, and we are super open to feedback @brimoor. (I worked with @imanjra and Kpal in this)
  

• I added more context to the hybrid panel section (I also checked the related PR in fiftyone-plugins, here), @imanjra if you can take a look at the content to validate that I'm aligned, I used as a baseline the readme in the hybrid panel example.

• I added a FiftyOne app debug section to the docs, and also mentioned on the enterprise side a note in case they want to build their own plugin. @sherpan

Here is a video of the changes in local

local_hybrid.mov

Let me know what you think 👍

[AdonaiVera]

Another option that fit FO style!