hydrocode-de / integra-frontend

React frontend for INTEGRA
0 stars 1 forks source link

Add insects #158

Closed mmaelicke closed 1 month ago

mmaelicke commented 1 month ago

Far from perfect, more like a proof-of-concept.

The labels, hovers, sizes and colors are not yet tweaked, but insects are there now. @noobla11 @karpaddel if you think this version is better than not having insects at all tomorrow, I can merge this today evening. I am currently not sure if I can spent more time on this today.

would also close #133

github-actions[bot] commented 1 month ago

Visit the preview URL for this PR (updated for commit 526b7f5):

https://integra-223bf--pr158-add-insects-hv30h8uh.web.app

(expires Wed, 12 Jun 2024 14:55:40 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: ccb6d271698eb667c2f8f1dbd17a4a78744476bc

noobla11 commented 1 month ago

Thank you, that you tried, but as it is just leave it unmerged for now. I checked with Chris and Zoe just to be sure. The labelling has typos and needs to be changed.

We actually commented on #133 today, I don't know if you saw that.

mmaelicke commented 1 month ago

I am finally finished from my side with this PR. Sry, could not manage to finish this earlier.

@noobla11 , @karpaddel I took some liberty to place your text as a tooltip when hovering the info icon as it is really long. If you prefer another solution (shorter info text, collapsible text, etc), pls let me know. I add you as a reviewer. Let me know if there is more you want me to do on this one, otherwise you can accept this PR as soon as I am allowed to merge (maybe after the presentation?)

noobla11 commented 1 month ago

Thank you this looks already much better! Don't hate me please, but here are still some typos:

Insektentab_Typos

As mentioned in the last mail, there will probably be changes in the colour schemes, I hope this is not too time consuming later on. But this can wait. Otherwise I think this is ready to be merged :)

mmaelicke commented 1 month ago

interesting that the AI missed the typos in the code...

Concerning the colors: Changing the colors is usually not a problem. However, from my experience, color-changes usually also need to be tested on a wide variety of screens (I host a phalanx of 5+ different screens for that purpose in my office) and usually also turn out a bit different in the application. That makes it necessary to iterate a few times over the colors. Thus, I would not start too late on that end.

karpaddel commented 1 month ago

It looks really good, we think it can be merged (today already if possible).

Only two small comments:

mmaelicke commented 1 month ago
  • when hovering over the areas in the upper graph, it is saying "trace 1 (year | number)". This could be changed similar to the Biomass tab only with german instead of latin names, e.g. "Vogelkirsche nach 65 Jahren - Anzahl Larven: 1200"

Thanks, I missed that one!

  • in the lower graph, the word "Blühabdeckung" is cut off -> maybe both graphs could be a little slimmer?

I try to improve the label setting.

Should be done soon

mmaelicke commented 1 month ago

Should be better now, but I had to hardcode a margin to the lower graph as the plotting library will always prefer cutting long labels over making the plot too small.

Therefore I implemented a quite hacky solution, that will count the length of the label and switch two different margins. The smaller one is fine, the larger one is still not quite large enough for the 'Glänzende Düstersandbiene' and 'Luzerne-Blattschneiderbiene'. But if I further increase the margin, the Months cannot be read anymore from the x-axis. So, to make this perfect we either need to shorten the two labels if that is possible somehow, or accept two out of 14 labels being cut.

I will double check the labels on another screen and then merge

noobla11 commented 1 month ago

Uploaded the data for the last part in the insect tab in /Insektendaten/Abundance_wide.xlsx