✨ Replace docstring bubble with right sidebar preview

[rabea-al]

Description

• Replaced the old chat-bubble style that appeared when clicking the ℹ︎ icon on a component with a new preview panel that opens in the right sidebar.
• Updated the infoIcon to support both light and dark themes automatically.
• Added "Open Script" button to the Component Preview panel toolbar.
• Used a new fileCodeIcon for the "Open Script" button.
• Added "Center Node" button to the Component Preview panel toolbar.
• Used a fitIcon for the "Center Nodet" button
• Centered the node and applied visual selection when clicking the "Center Node" button.
• Improved panel layout and spacing to match JupyterLab's native styling.
• Cleaned up redundant local states previously used in the component list node.

Pull Request Type

• Xircuits Core (Jupyterlab Related changes)
• Xircuits Canvas (Custom RD Related changes)
• Xircuits Component Library
• Xircuits Project Template
• Testing Automation
• Documentation
• Others (Please Specify)

Type of Change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Tests

1. Launch Binder (or run locally).

2. Drag any component into the canvas.

3. Click the ℹ︎ icon on the node.

   • The right sidebar should expand and show the component name and docstring.

4. Click the same ℹ︎ again → the sidebar collapses.

5. Click ℹ︎ on a different component → the sidebar swaps to the new docstring.

Tested on? Specify Version.

• Windows
• Linux Fedora
• Mac
• Others (State here -> xxx )

[github-actions]

👈 Launch a binder notebook on branch rabea-al/xircuits/right-side-br

[rabea-al]

What’s new in this PR:

• Added navigation arrows to move between directly connected nodes (excluding Start and Finish).
• Automatically centers the selected node when navigating.
• Added a button to open the script of the selected component node.
• Added a button to center the current node manually.
• Added a special button to open the full workflow (.xircuits) if the current node is of type xircuits_workflow.
• This button is conditionally shown only when the node is of that type.

[MFA-X-AI]

Thanks for the PR! This is a big feature, so here's a longer review:

• The sidebar preview has quite a large minimum sized window. I think it should follow the minimum width as the other sidebars.

sidebar.width.mp4

• The previous and next node logic shouldn't go to Literals and Arguments.

sidebar.previous.and.next.mp4

I think you should allow it to go to Start and Finish and display a simple message like, "This is the start or end of your workflow!"

• The component preview doesn't switch context when another canvas is active. I think it should just reset once a new workflow is opened.

canvas.active.mp4

• This does mean it might be complex if there is 2 active workflows for whatever reason. If that's the case, you might need to display on the component preview which component is this workflow coming from. I think that's a good thing to have anyways. Maybe under the Component preview header.

• I think we can improve the current preview for blank canvas. I'll pass you a placeholder image.

• workflow components doesn't seem to have an i button yet. I guess that's something we haven't added.

Since this is a info docstring PR, could you add it in?

• The handling for the previous and next node for branch component might be a bit more complex. I think the best way is go to the top paths only.

branch.handling.mp4

okay, that's some things to do for now. Thanks a bunch.

[rabea-al]

Final Changes Implemented Based on Review Feedback:

Sidebar Width

• Adjusted the sidebar preview to follow the minimum width like other sidebars for consistent layout.

Previous/Next Navigation

• Skipped navigation to Literal and Argument nodes.

• Allowed navigation to Start and Finish nodes, with message:

  • “This is the start of your workflow.”
  • “This is the end of your workflow.”

• Handled navigation logic in branch components by only traversing the top path, as suggested.

Canvas Switching

• When switching to a different canvas, the component preview now resets and collapses automatically to prevent confusion.

Workflow Components

• Added the ℹ (info) toggle button to workflow components, enabling preview for sub-workflows.
• If the workflow is a Python file, clicking "Open workflow" now tries to open the .xircuits version.

[MFA-X-AI]

Working very well! I've pushed a string update for the empty panel preview, since I realized we do need the users to click on the i icon.
I'll merge it, thanks for the PR!