Iconic taxa cut off on project stats page

This is a very small bug, and probably easily fixable. On any project page, under the “Stats” view, the bottom (couple?) of elements in the key of the species pie-chart are being chopped off. See Screen shot of https://www.inaturalist.org/projects/hardy-county?tab=stats on Chrome 79.

1 Like

hello, welcome to the forum :)

1 Like

On my laptop and browser which is Chrome, the stats colour key has insects at the bottom of the key list and insects get chopped off sometimes completely and sometimes partially. The colour key then makes it appear that the most abundant order are the molluscs. I wonder how many other users experience the same problem. Ill call this the bugs bug ! here is the whole page I am referring to. I wonder how it appears on other browsers and screens. About 50 % of observations from Botswana are insects and there are very few molluscs here.

Thanks from Botswanabugs ( aka Tony Benn)

2 Likes

here is the link to the whole page I am referring to. in the post above.

https://www.inaturalist.org/projects/biodiversity-of-botswana?tab=stats

Botswanabugs

1 Like

The name right under mollusks in your screenshot should be insects, and I see everything normally in your link.

@alexis_orion perhaps it depends on which browser is used. I should try a different browser perhaps.
This is the only problem I observe with inat in my Chrome browser.
Thanks
Botswanabugs

1 Like

in firefox it looks better! (not perfect though)
firefoxBug

Hmm, I can’t replicate this in Chrome 79, on any project. Can you please open up the web console in your browser and send a screenshot of it? Here are instructions for how to open the console: https://support.airtable.com/hc/en-us/articles/232313848-How-to-open-the-developer-console

projects-show-webpack-a4c5f508fc4fbac9397e1d204a27f312.js:13 Deprecation warning: use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info.
warn @ projects-show-webpack-a4c5f508fc4fbac9397e1d204a27f312.js:13
js?v=3.35&key=AIzaSyDsHVgl1tZrI_tlyI8Rg6n6SUEvSHQjfkE&libraries=places,geometry,drawing:139 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://www.inaturalist.org/fonts/Whitney-Semibold-Pro.otf
util.js:231 Google Maps JavaScript API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version
Wy.i @ util.js:231
script.js:43 Loading extension
12A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
script.js:43 Loading extension

Dont know how to make screenshot of the console. Is a different font being loaded because the network is slow, which it is today. If a fallback font is used perhaps it has a slightly different size.

May be a fault of our Botswana Internet being slower than normal. Have just had this message from Botswana telecommunications BTC. Botswana Telecommunications Corporation - BTC

29 mins

PUBLIC NOTICE

COMPROMISED INTERNET QUALITY

Botswana Telecommunications Corporation Limited (BTC) informs its valued customers and the public that due to internet connectivity challenges experienced by our supplier BoFinet, some of our customers may be experiencing compromised internet service quality when accessing certain websites.

The internet connectivity challenges were caused by a double fibre cable break in the West Africa Cable System (WACS) and a cable break on a route into South Africa as communicated by BoFinet.

Customers may experience service degradation while our internet connectivity partner is working on stabilising services. BTC would like to apologise to its valued customers and the public for the inconvenience this may cause.

1 Like

Ok, here is a possible cause/ fix for this problem. The SVG container that keeps the aspect ratio of the pie chart constant is set at an absolute height and the overflow is hidden. This means that anything over the 330 pixel height gets cut off, which varies by browser. I am not an expert on web development, but changing that absolute height or allowing overflow should both fix the problem, though there could be repercussions in other browsers etc…

Console errors are the SameSite errors that @botswanabugs posted

Here is the inspect view of the problem.

And one possible solution by allowing overflow…

1 Like

i bet the cutting off of the last line happens for people who have non-100% zoom in their system display settings (see https://forum.inaturalist.org/t/header-identify-link-inaccessible-when-browser-is-small/4347). that’a probably why some are unable to reproduce. i think the issue is not tied to any specific browser.

Hmm, that’s interesting, but I don’t think that’s the full problem. My monitors are set to 100% zoom. But you’re right, it is interesting that its not reproducible on any specific browser.

1 Like

ok. you’re right. it’s probably not the system zoom per se. what i’m noticing is that if you slowly increase the width of the window, there’s a point at which a lot of the things on the page zoom up, and that’s the point at which things are cut off.

1 Like

Im using 100% in my settings. Today the word insects is completety cut.

1 Like

Why not make a third column and put the the most commonly observed orders like insects at the top and the more rarely observed orders like protozoa and chromista at the bottom, Could there be more variation of colours for vertebrates ? The blues are so similar and difficult to relate to the colour key.

2 Likes

I can see insects fully when I set the zoom to 125% but not at all at 100 or 110% or less. Using Chrome.

1 Like

I have exactly the same problem. It’s not related to any zoom setting either in the browser or on my monitor display (changed both several times both greater than 100% and less than 100% and it’s still cut off at exactly the same place).

It would be nice to have this fixed at the iNat server level. It seems to be an easy fix, just assign more space for that section on the page.

QUICK EDIT:

I tested this on my computers and on different models used by the folks in my office. We all have the same problem.

2 Likes