Add horizontal scrolling with caret buttons for gene card list

[murtuza777]

Feature Description

This pull request adds horizontal scrolling functionality with caret buttons to the gene card list.

Changes Made

• Added left and right caret buttons to the gene cards container
• Implemented scrolling functionality when clicking the caret buttons
• Added state management to enable/disable buttons based on scroll position
• Added CSS for the caret buttons and container
• Added custom chevron icons
• Made the scrolling behavior smooth for better user experience
• Removed scrollbar visually while maintaining scrolling functionality

Testing

Tested on multiple resolutions with varying numbers of gene cards to ensure smooth scrolling and appropriate button visibility/functionality.

Related Issue

This addresses the feature request for horizontal scrolling of gene cards using caret buttons.

[maxkfranz]

I'll leave this to @jvwong to review generally, but I'll add this:

You shouldn't be using px units to size things like divs. It's proper to use em or sometimes rem units.

[jvwong]

Great - thanks for this PR! I ran it locally to see how it behaves, and had a few observations:

a. Case: 3 or fewer items

I wouldn't expect to see arrows here (since there's nothing to scroll).

b. Case: > 3 items

i. The arrows obscure/block the item information on each end, which may not be the best use of limited space.

ii. Clicking the arrows moves to the next (1) item. I would expect to see the next set (e.g. 3)

[murtuza777]

@jvwong, thank you for your valuable suggestions. I will address these issues and submit the PR again. If you have any additional feedback whether related to the scrolling button or any other improvements.I would be happy to work on them. Looking forward to your thoughts!

[murtuza777]

@jvwong Sir, I've been working on the suggested changes and will raise the PR again for the horizontal scroll buttons soon. I'm also working on my gsoc proposal could you help me with it? I can send you the draft via email for guidance. Thanks!

[murtuza777]

Hi @jvwong,

I’ve been working on the suggested improvements over the past few days. However, I noticed that the site was down on some days, and currently, when I search for genes, the gene card no longer appears—instead, it returns a list of genes. I wanted to check if the gene card component has been removed or replaced.

Also, I’d like to mention that I have applied for GSoC 2025 with a proposal for the Pathway Commons project. I would be truly grateful if you could kindly consider my application. I’m genuinely excited about the opportunity to work on this project—I’ve become familiar with the repository and continue to analyze the codebase to deepen my understanding, even while waiting for potential project selection.

If the gene card component is no longer in use, I’d be happy to shift my focus and contribute to other open issues. Please let me know which one you’d recommend I work on next.

Thank you again for your time and guidance.

[jvwong]

Hi @jvwong,

I’ve been working on the suggested improvements over the past few days. However, I noticed that the site was down on some days, and currently, when I search for genes, the gene card no longer appears—instead, it returns a list of genes. I wanted to check if the gene card component has been removed or replaced.

Nice catch - #1479. I'll have to look into it ASAP.

Also, I’d like to mention that I have applied for GSoC 2025 with a proposal for the Pathway Commons project. I would be truly grateful if you could kindly consider my application. I’m genuinely excited about the opportunity to work on this project—I’ve become familiar with the repository and continue to analyze the codebase to deepen my understanding, even while waiting for potential project selection.

The GSOC evaluation process is in progress. We can take this topic offline via email.

[murtuza777]

Thanks so much for the response, @jvwong!

Got it—I'll keep an eye on issue #1479 and hold off on further changes to the gene card for now. Meanwhile, I’ll start looking into other open issues to continue contributing.

I’d be happy to continue our GSoC conversation over email as suggested. You can reach me at [email protected]. Could you also please share the best email ID I should reach out to you at?

Looking forward to your guidance and really appreciate your time and support!