[DISCUSSION] UI Improvements

[meren]

I’m starting this issue to document problems with the revamped anvi’o interactive interface here for @metehaansever's consideration.

The changes are in the branch ui-improvements. If you are using anvio-dev, please consider switching to the ui-improvements branch,

cd ~/github/anvio
git checkout ui-improvements

Update your submodules,

git submodule update --init

Then, run any anvi'o project that works with the interactive interface, and report your observations under this thread.

---

You can always switch back to your regular main branch to back to how things were,

cd ~/github/anvio
git checkout master
git submodule update --init

[meren]

This is how the detailed taxonomy estimation panel looked like in the original version:

And how it looks like now (not very pretty, is it):

---

This is what happened when someone clicked on a bin in that window:

And this is what happens now (i.e., nothing :)):

[meren]

When there are no legends to be shown, under the legends section, in light gray, it should say,

"There are no legends to edit in this display."

It currently looks empty and confusing:

[meren]

Show grids button doesn't work (as in, you click on it, but grids are not shown for selections):

Plus, the color picker in the same control doesn't respond when clicked.

[metehaansever]

I'm on it! Thank you Meren

[meren]

This is the font-face in the original interface:

And this is how it is in the ui-improvements:

[meren]

ABORT ABORT. Please don't make any changes for this one and ignore everything below this line :)

---

Please remove these two items from the options panel,

And make custom margins turned on by default in the main panel as the following:

There are multiple reasons for this. Options is a new panel, and this change affects the structure of the main panel, which is not what people are looking at when the button is clicked (in the old design it was under additional settings in the main panel, so it made it more intuitive). Now we have more space in the main panel, so there is no reason to not have them turned on by default.

[meren]

Please expand the width of the dropbox so the text fits (and replace 'leaf' with 'item' in the text):

[metehaansever]

This is the font-face in the original interface:

And this is how it is in the ui-improvements:

Actually I did that in purpose. I replaced every font with "Montserrat", with some exceptions. The reason for this was to have the same typography everywhere.

[meren]

Actually I did that in purpose. I replaced every font with "Montserrat", with some exceptions. The reason for this was to have the same typography everywhere.

And yet it is not working. This is how it looks on my interface right now:

And this is how it would have looked like if it was in Montserrat:

I'm not sure if it may be because MacOS is missing Montserrat in its default font collection? You can probably solve it by including Montserrat with the anvi'o distribution, but I think it would be much better to not do that and use Helvetica as we did before. Because people will download SVGs to work with anvi'o outputs, and then every font in the SVG will be replaced with Times New Roman just because they don't have Montserrat in their collection.

[meren]

It is "anvi'o" (and not capitalized when it occurs in mid-sentence like a regular word). I saw this in multiple places in the interface, and I thought I'd point it it out :)

[meren]

In the pangenome, gene cluster functions window looked like this when one clicked on the button in the bins panel:

And it looks like this now:

I think the content is much less readable. Please adjust the window and font size to have a comparable view.

[meren]

The link here is broken and goes to pull requests page:

[meren]

"Search gene clusters using filters" should have the same size with every other header on this page.

And this section is mean to serve all three search options, but it is not clear anymore:

I'm not sure how to make it obvious now we are not collapsing individual search strategies :/

[metehaansever]

Show grids button doesn't work (as in, you click on it, but grids are not shown for selections):

when I test Show Width color and width works for me.

[metehaansever]

Actually I did that in purpose. I replaced every font with "Montserrat", with some exceptions. The reason for this was to have the same typography everywhere.

And yet it is not working. This is how it looks on my interface right now:

And this is how it would have looked like if it was in Montserrat:

I'm not sure if it may be because MacOS is missing Montserrat in its default font collection? You can probably solve it by including Montserrat with the anvi'o distribution, but I think it would be much better to not do that and use Helvetica as we did before. Because people will download SVGs to work with anvi'o outputs, and then every font in the SVG will be replaced with Times New Roman just because they don't have Montserrat in their collection.

I wasn't consider that and Montserrat wasnt one of the default font so I switched all font-family to Helvetica.

[metehaansever]

@meren Meren, I fixed every bug in here. I'll run anvio tutorials tomorrow and update here with newer bugs. :feelsgood:

[xvazquezc]

Given that you are dealing with fonts, worth mentioning that Helvetica is only included in Mac, it isn't standard with any other OS due to licensing. If the issue is folks not having the font in the system for the SVGs, the font can be embeded in them - likely a very small increase in size in comparison with the whole SVG

[meren]

That's a great point, @xvazquezc. @metehaansever, can you please look into this and figure out if we can display and export SVG images regardless of the font collection on the user side?

Although my top choice among all the open-source fonts similar to Helvetica is Inter, it doesn't have italicised alternative for black 900 (which has been a huge problem for us forever as it is the case with Helvetica). So I think we should go with Roboto. Can you please make the necessary changes and see if you can display and export SVGs to work with inkscape on them, including on computers without Roboto installed?

[metehaansever]

@meren Helvetica is default font for Unix and Macos actually. I tried to Svg export and Helvetica works on my Ubuntu 22.04. I'll try to embed font-family inside SVG and if its work, i'll update rest with Roboto.

[metehaansever]

"Search gene clusters using filters" should have the same size with every other header on this page.

And this section is mean to serve all three search options, but it is not clear anymore:

I'm not sure how to make it obvious now we are not collapsing individual search strategies :/

Default:

Search With expression:

Search Functions:

And gene cluster version will be yellow :)

[xvazquezc]

@metehaansever maybe other Unix, but definitely not Linux. I've been running Ubuntu by default since 16.04 and it was already missing back then. Definitely still not in 22.04.1... and I prob have more fonts than any sane person.

Note that even if you tell to use Helvetica, most programs, CSS... will use something else if not available. That's why a good website/CSS normally have a few fonts listed as fallback to limit the differences in appearance if the main font is not available

[ivagljiva]

hey @metehaansever , just a small issue I wanted to bring to your attention :)

Issue with tabs for SCG charts in anvi-display-contigs-stats

The program anvi-display-contigs-stats shows a chart of single-copy core gene hits at the top, and is a tab for each chart that you can click on to see the data for a specific set of SCGs. Here is how it looks in v8:

(note that the Protista tab is darker in this screenshot because I had my mouse hovering over it)

But in the new interface, those tabs have been replaced with links, and it is not obvious which one you are currently looking at:

[metehaansever]

hey @metehaansever , just a small issue I wanted to bring to your attention :)

Issue with tabs for SCG charts in anvi-display-contigs-stats

The program anvi-display-contigs-stats shows a chart of single-copy core gene hits at the top, and is a tab for each chart that you can click on to see the data for a specific set of SCGs. Here is how it looks in v8:

(note that the Protista tab is darker in this screenshot because I had my mouse hovering over it) But in the new interface, those tabs have been replaced with links, and it is not obvious which one you are currently looking at:

Thank you sharing Iva! I got the problem, i'll fix it asap :)

[Ge0rges]

On the left tool bar there is overlapping elements as shown.

Also, could it be an option to have the data tab open on the right as it was before? It was useful to look at Completion/redundancy of a bin along with the data when refining.

[Ge0rges]

Also the zoom gesture is very buggy, sometimes it zooms the window, and sometimes the content (and when it does the content it is very fast). Using gestures to pan around also sometimes zoom. This is on the latest version of chrome.

[metehaansever]

On the left tool bar there is overlapping elements as shown.

Also, could it be an option to have the data tab open on the right as it was before? It was useful to look at Completion/redundancy of a bin along with the data when refining.

Hello @Ge0rges, I'm wondering what device you use Anvio on. I would like to fix this issue, if you share your resolution. So do you have any suggestions regarding Anvio's Zoom behavior? Do you think keeping the old zoom in and zoom out buttons is a solution for a better experience?

[metehaansever]

hey @metehaansever , just a small issue I wanted to bring to your attention :)

Issue with tabs for SCG charts in anvi-display-contigs-stats

The program anvi-display-contigs-stats shows a chart of single-copy core gene hits at the top, and is a tab for each chart that you can click on to see the data for a specific set of SCGs. Here is how it looks in v8:

(note that the Protista tab is darker in this screenshot because I had my mouse hovering over it) But in the new interface, those tabs have been replaced with links, and it is not obvious which one you are currently looking at:

I just fixed it @ivagljiva , I'll merge with 2206-bug-nucleotide branch :)

[Ge0rges]

Hi @metehaansever, I am on a 13" MacBook Pro the full screen resolution is 2560 x 1600. Ok so I played around more wit the zoom and what I figured out was I was doing the "pinch to zoom" gesture which I'm used to in other applications and on the phone, where as I think anvio is using the "scroll to zoom" gesture. Using the latter works fine but was not immediately intuitive to me, perhaps others expect that though. I think supporting natural gestures is better than the buttons or a slider.

[Ge0rges]

Hi @metehaansever, another suggestion or perhaps more of a question even. Is it possible, (or would it be logical to implement) the option to have this Bin side panel (or the side panel generally) be narrower? In this screenshot for example it's taking up a lot of precious screen real estate.

[meren]

Hey @Ge0rges,

Making this panel narrower will make other panels to not fit :/ My solution to that is to use the 'S' key to open and close the left panel all the time without having to click around.

[Ge0rges]

Good shortcut thank you!

[metehaansever]

@Ge0rges Actually we have more than S key, if you wanna take a look at it: https://anvio.org/help/main/artifacts/interactive/

[Ge0rges]

I've noticed that sometimes when no splits are selected for a bin, parts of the tree still appear as selected which could be confusing to someone new to Anvi'o.

[metehaansever]

I've noticed that sometimes when no splits are selected for a bin, parts of the tree still appear as selected which could be confusing to someone new to Anvi'o.

That is not default behaviour. If you give me reproducible example i can test. For example:

[Ge0rges]

So I just took a random contigs DB and then did this:

• Create a bin
• Add everything to the bin
• By selecting the branches, deselect everything

I could try to make a GIF of this if you can't reproduce.

[metehaansever]

So I just took a random contigs DB and then did this:

• Create a bin
• Add everything to the bin
• By selecting the branches, deselect everything

I could try to make a GIF of this if you can't reproduce.

I did but its not the case for me. I'll appreciate it f you make a GIF. :smile:

[Ge0rges]

Ok I should have specified this was in anvi-refine here's the video.

https://github.com/merenlab/anvio/assets/3957136/33ba5947-fd10-45e8-86c0-5d19719c97a9

[metehaansever]

Ok I should have specified this was in anvi-refine here's the video.

Screen.Recording.2024-03-26.at.13.12.18.mov

It looks like a bug. Probably, if you remove all Bins under Bin Menu > Delete icon it will remove them. I'll test it anvi-refine with mouse-events. By the way, it works for anvi-interactive. Thanks for catching @Ge0rges :)

[Ge0rges]

Yeah I can also deselect it manually and it works. it shows 0 splits in the bin in any case.

[Ge0rges]

Potentially another bug @metehaansever, I wonder if you experience this as well. In anvi-refine:

• Draw
• Pan plot around (works)
• In Main > Data switch to Mean coverage Q2Q3
• Draw
• Pan around doesn't work (although mouse cursor symbol changes)
• Switching data back and redrawing doesn't help.

[Ge0rges]

@metehaansever I think a very recent update caused anvi-summarize to produce tables with smaller fonts.

[metehaansever]

@metehaansever I think a very recent update caused anvi-summarize to produce tables with smaller fonts.

I recently adjusted tables in Anvi-Summarize to fit the screen without scrolling. Weird thing is Buttons instead of font-size.