Skip to content

Searchable graph tabs#24

Merged
yoavst merged 8 commits into
yoavst:masterfrom
yonlif:feature/searchable_graph_tab_bar
Dec 7, 2025
Merged

Searchable graph tabs#24
yoavst merged 8 commits into
yoavst:masterfrom
yonlif:feature/searchable_graph_tab_bar

Conversation

@yonlif

@yonlif yonlif commented Dec 5, 2025

Copy link
Copy Markdown
Contributor

Added search and scroll to the tabs bar:
image
image

One problem worth mentioning - Dividers act a bit weird when in search, I didn't want to remove the option for tab dragging - so now it shows only dividers that are before visible tabs. This creates the fun problem that filtering on one item only and dragging it to it's right - sends it to the end of the list:
image
image
Also if there are two results in the search dragging the left one to the middle will clip it to the right in the real list but the other way around will do nothing.

Another thing is that I used :not(:placeholder-shown) that according to caniuse.com has an ok-ish support:
https://caniuse.com/?search=%3Aplaceholder-shown
https://caniuse.com/?search=%3Anot

I can remove then in exchange for more JS code or a less friendly UX for searching tabs.

Would be happy to change anything as needed.
Yonlif

@yoavst

yoavst commented Dec 5, 2025

Copy link
Copy Markdown
Owner

The scroll does not seem to work for me.
Also, we should probably change the search icon if it is active or not so people would know if they have no tabs or it is because of a search result

@yonlif

yonlif commented Dec 5, 2025

Copy link
Copy Markdown
Contributor Author

I added visual color change for the search icon as you suggested.
As for the scrolling - "It works on my machine" - MacOS Chrome 142.0.7444.177. I removed some not commonly supported css styling. Is it working now?

image image

@yoavst

yoavst commented Dec 6, 2025

Copy link
Copy Markdown
Owner
image It does work. Do you think it will better if it will have a collapse button that will toggle between this behavior and the old one? Because I think both of them has their cons and pros

Comment thread frontends/web/scripts/TabsController.js Outdated
const tabsScrollBtn = document.getElementsByClassName("tab-expand-button")[0];
if (!tabsScrollBtn || !this.tabsView) return;

console.log("Initiating tab arrow visibility controller");

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be removed

@yoavst

yoavst commented Dec 7, 2025

Copy link
Copy Markdown
Owner

Remove the console log and I'll merge

@yonlif

yonlif commented Dec 7, 2025

Copy link
Copy Markdown
Contributor Author

Hi, I think you didn't review the latest commit. The console.log doesn't exist anymore.

@yonlif

yonlif commented Dec 7, 2025

Copy link
Copy Markdown
Contributor Author

Fixed a very minor bug. Images for fun:
image
image

@yoavst yoavst merged commit 4cb412f into yoavst:master Dec 7, 2025
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants