Species pages and mapping functionality

[Sam-Amy]

Following our discussion (20.04.22) about iRecord data visualisation tools produced by Rich Burkmar, re: linking the new species mapping functionality with the existing species page containing info/photo.

Issues with current species page layout (e.g. https://irecord.org.uk/species-details?taxon_meaning_id=71446):

• Very hard to find (must go via species record at present); can this be made easier to navigate to using a url containing some more easily referenceable identifier such as TVK?

• Doesn't show full info on left hand side (cropped by photos).

• Photos are displayed vertically; is a gallery view possible?

• Some have huge lists of common names; could these displayed only on request via a button/pop-up?

In terms off implementing the mapping functionality, would a BSBI-type format work, with a page for species info with static inset Atlas-style image, and a link above this to interactive mapping (e.g. https://www.brc.ac.uk/plantatlas/plant/orchis-mascula)?

Raised here as an issue for discussion in next iRecord prioritisation meeting.

[johnvanbreda]

A couple of extra notes for discussion:

• You can also access the species page via the Species tab on the Explore pages. But, I agree if the page was improved, then it makes sense to make it more widely accessible from other places where species names are shown.
• The page's styling didn't get done when it was copied from Drupal 7 I think - this would be an easy fix.
• The page is often very slow to load but I think that is because it tries to load a full set of photos. Photos should be paginated and it would be nice if some prioritisation based on quality of the image could be applied.

Making it work from TVK is definitely possible.

[burkmarr]

The page's styling didn't get done when it was copied from Drupal 7 I think - this would be an easy fix.

@johnvanbreda - where would the CSS for the page have been stored?

[burkmarr]

I guess it could have been in a file referred to in the Additional CSS files to include section on the form. @BirenRathod - is there still a version of the Drupal 7 site available where I can check this out?

[BirenRathod]

@burkmarr I send you email about it.

[BirenRathod]

@burkmarr it stores in node.xx.css. On drupal 9 -> sites/default/files/indicia/css On drupal 7 -> client_helpers\prebuilt_forms\css

[BirenRathod]

The page's styling didn't get done when it was copied from Drupal 7 I think - this would be an easy fix.

• where would the CSS for the page have been stored? @burkmarr which file or page are you after?

[johnvanbreda]

I don't think it's missing styling from Drupal 7 that's the problem, but the species details page outputs the gallery incorrectly. If you compare record_details_2.php with species_details, you will see 2 differences. Record_details_2.php outputs a wrapper div under the title:

<div class="$options[class]">

Also, the items are further wrapped inside a <ul> element. On species_details.php the items are not wrapped correctly in the list, nor is the 'class' option actually used (even though the default is set). So the build in gallery CSS in the Indicia default stylesheets is not being triggered.

[burkmarr]

@johnvanbreda - thanks for the tip about comparing to record_details_2.php. That also helped with figuring out that the tabulation problems can be fixed by replacing this line:

'bands' => array(array('content'=>$indicia_templates['dataValue'])),

with this:

'bands' => array(array('content' => str_replace(['{class}'], '', $indicia_templates['dataValue']))),

Your notes on the image markup sorted out their basic formatting. With those two fixes the page looks like the image below on my dev setup (for species-details?taxon_meaning_id=89659).

Neither these images or those displayed by the record_details_2.php have the nice formatting previously used on the Drupal 7 site (see second image below for comparison). In the D7 theme there was CSS for the .gallery-item class that provided this formatting (/sites/all/themes/irecord/css/irecord.css) which doesn't appear to have been moved into the D9 project. @BirenRathod - is that something that you can sort out?

Images from the old D7 site:

[burkmarr]

Forgot to mention a problem which I can't resolve with the page title. The title for the taxon above looks like this:

It looks like Drupal 9 doesn't interpret HTML tags in the title. I looked at the iform_preprocess_page_title hook in iform.module and researched the problem on Google, but couldn't find a way to fix it. The only option seems to be to strip out the <em> tags in species_details.php so it looks like this:

Not ideal, but I can't see an alternative.

[kitenetter]

This is a side-issue, but I'm not convinced that it is a good idea to display all the Pantheon data unless we can provide quite a lot more context and links to the Pantheon help pages. The ones that do make sense without further context are:

• adult guild
• larval guild
• broad biotope
• habitat

Similar questions arise for the plant taxon attributes.

[BirenRathod]

@burkmarr Here is css.

.gallery-item, .gallery li, .summary-report { text-align: center; padding: 0.5em; margin: 0.5em; display: inline-block; vertical-align: middle; vertical-align: auto; zoom: 1; *display: inline; list-style-type: none; background: none; -moz-box-shadow: silver 3px 3px 6px; -webkit-box-shadow: silver 3px 3px 6px; box-shadow: silver 3px 3px 6px; border: solid silver 1px; }

.gallery li button { overflow: hidden; }

[burkmarr]

@BirenRathod - yes I saw that. But where's the best place for it? I'm not sure about the theme architecture of the new site.

[burkmarr]

@kitenetter

I'm not convinced that it is a good idea to display all the Pantheon data...

Mabey that can be fixed via the report it runs - I'll take a look tomorrow.

[BirenRathod]

yes I saw that. But where's the best place for it? I'm not sure about the theme architecture of the new site.

@burkmarr you can add it to themes\custom\irecord\css\style.css. If it is inidicia node specific then you can create node.x.css (x is number of that node) and upload via sftp into files/indicia/css folder.

[burkmarr]

@kitenetter

I'm not convinced that it is a good idea to display all the Pantheon data...

Mabey that can be fixed via the report it runs - I'll take a look tomorrow.

My mistake - fields can be excluded at the form configuration level, so that was easier to take care of than I thought.

[burkmarr]

@kitenetter - on closer inspection, the custom attributes are different for each taxon (for example compare https://irecord.org.uk/species-details?taxon_meaning_id=89659 to https://irecord.org.uk/species-details?taxon_meaning_id=71446) so it's not so straight-forward. There are three form configuration controls that have a bearing on custom attribute display:

• A flag that can be used to turn off the display of all custom attributes
• An option to list fields that should be excluded from the display
• An option to list fields that should be included in the display

The second and third of these are exclusive. So unless you have a small list of custom attributes that should be displayed (if present) for all taxa, then this will be hard to manage.

[burkmarr]

@johnvanbreda

The page is often very slow to load but I think that is because it tries to load a full set of photos. Photos should be paginated and it would be nice if some prioritisation based on quality of the image could be applied.

It looks like the slowness was due to the @noGeoserver option for the map control being set to true causing the page to download a vector representation of all the records which is too slow for common taxa. I've changed the value to false to use GeoServer - which prevents the hang but there is a delay before the map is displayed. I'm not sure why that is - there's very little delay on the species-maps pages which also use GeoServer - so I'll try to track the difference down.

There is already a @itemsPerPage option on the photos control whose default is 20, but no pagination control is displayed. Is there another page that has paginated images that I can look at?

[burkmarr]

@kitenetter - there's a fourth option. You can include/exclude custom attributes based on their system function rather than the attribute name which might help.

[johnvanbreda]

@burkmarr looking at the formatting of the Species Details section, I can see that there is a replacement token in the HTML template {class} which is not being replaced. This causes the browser to not interpret the <dd> elements correctly, breaking the layout. The equivalent code for the 'bands' parameter to the freeform report in record_details_2.php looks like this, which fixes the issue:

  'bands' => [['content' => str_replace(['{class}'], '', $indicia_templates['dataValue'])]],

Looking through the list of attributes, many of the Pantheon ones might be of interest (larval, adult guild etc) and there are lots of attributes from other systems as well, so maybe we need to create a list of generally useful attributes and only show those.

There is no pagination control on photos because the code also sets limit to 20. I think the intention here was to prevent a full count on the server-side which might be slow. Is there really a need to paginate back through all the images? In the absence of a quality based prioritisation or similar, maybe just showing a bunch of recent example images is enough?

[burkmarr]

@johnvanbreda - I had already found the {class} problem (see https://github.com/BiologicalRecordsCentre/iRecord/issues/1286#issuecomment-1152521355).

Looking through the list of attributes, many of the Pantheon ones might be of interest (larval, adult guild etc) and there are lots of attributes from other systems as well, so maybe we need to create a list of generally useful attributes and only show those.

@kitenetter - would you be able to come up with such a list?

Is there really a need to paginate back through all the images?

Not from me John - I just made the assumption that it was a feature because I misinterpreted the name of the option itemsPerPage. Suggest we that as it is for now. I'd like to get the page working as initially intended in order that @kitenetter and @Sam-Amy can better evaluate it before we decide how to enhance it.

[burkmarr]

there is a delay before the map is displayed. I'm not sure why that is - there's very little delay on the species-maps pages which also use GeoServer - so I'll try to track the difference down.

This turned out to be because the distribution layer feature type was set to indicia:cache_occurrences - changing it to indicia:cache_occurrences_functional speeds it up.

[burkmarr]

@johnvanbreda - there are a few small changes to fix the immediate formatting and performance issues with the page that affect these two files:

• web/modules/custom/iform/client_helpers/prebuilt_forms/species_details.php
• web/themes/custom/irecord/css/style.css

I'm uncertain of the workflows now that we've moved to Pantheon. For the theme update, shall I just push that on the Pantheon repo? And for the client_helpers update, should I just do what I used to do with the Drupal 7 site - i.e. branch from dev and push to GitHub for you to review and merge as you see fit?

[BirenRathod]

@burkmarr for style.css, yes just push the code on Pantheon repo.

[johnvanbreda]

@burkmarr are the changes to the theme style.css actually iRecord theme specific, or would the Indicia code generally benefit from them?

For the other changes, as these are actually fixes rather than developments, they should be hotfixed (i.e. branch off master, then merge into master and develop). If you would like me to review them then you can do a pull request on the master branch but if you are comfortable that the changes are non-controversial you can just merge directly.

Once the hotfix is merged to master, the affected files can be updated on the brc-irecord Pantheon repository.

[kitenetter]

@burkmarr are we aiming for one list of species attributes for all species, or can we have different attributes for different taxon groups (as we currently do, e.g. in your examples of leafhopper vs plant).

And I'm not sure what the full list of potential attributes would be. Candidates appear to be:

1. The conservation statuses listed in taxon_designations (do you also need this linked to taxa_taxon_designations?)
2. taxa_taxon_list_attributes

Can we use both of those sets of attributes? What do you need, a list of IDs from one of these tables?

[burkmarr]

are the changes to the theme style.css actually iRecord theme specific, or would the Indicia code generally benefit from them?

@johnvanbreda they provide a border for images where class media-gallery is specified as happens in a number of client_helper forms (5 that I can see).

This:

to this:

[burkmarr]

@kitenetter

are we aiming for one list of species attributes for all species, or can we have different attributes for different taxon groups (as we currently do, e.g. in your examples of leafhopper vs plant).

This works on a per page basis and we just have a single page so that would need a single list. As an alternative approach, what if we hide all the custom attributes by default but have a simple toggle on the page which can be used to hide/show all the custom attributes for a taxon. So by default the page is uncluttered, but if the user really wants to see custom attributes they can quickly see them all. Makes less assumptions about what a user wants too.

[kitenetter]

Okay, so if we want one list for all taxa I'd suggest

• synonyms
• adult guild
• larval guild
• broad biotope
• habitat

And I was going to add some suggestions from the plant attributes as well but it's difficult to know what to select without seeing how they appear on the page. One answer might be to provide a link to the species page on the plant atlas, where the Ellenberg info is displayed in a more helpful context?

The plant example has what seems to me to be an unhelpfully long list of vernacular names. I'd prefer to see one English name, and perhaps a toggle for "show all other vernacular names", but not sure if the species dictionary enables a 'best' English name to be separated out.

Sorry, not sure I'm helping much here, but the more I think about this the less I like the idea of throwing out lots of attributes that happen to be in the database without providing enough context to make them understandable. I think we either need to spend time developing a page that will provide enough context, or leave them out.

Happy to have a zoom chat if it helps. Or if I'm just over-complicating things, and the priority is to get a page working, then I guess we can just display all the attributes under a "more info" toggle and leave it there until such time as we can improve the display.

[burkmarr]

@kitenetter - yes there's a lot to consider so maybe that should come within the context of the further development or redevelopment of the page. So let's get the page - as it currently stands - looking right and then think about where it needs to go. I need to do some thinking/investigation about the best way forward technically with integrating the new visualisations.

[burkmarr]

@johnvanbreda - I applied the hotfix as you described. Is the workflow now to update the iRecord pantheon site with the new client_helpers master branch? If so, shall I do that?

[BirenRathod]

@johnvanbreda Can you also include the amendments you done for species details page with this hotfix?

[johnvanbreda]

@BirenRathod which amendments? I think the species details page on iRecord should be up to date apart from applying Rich's hotfix.

@burkmarr yes, you can do that, but if applying all the files I like to double check all the changes before committing and pushing them. In theory there won't be any other changes, but line ending issues have made this very tricky to check in the past, though hopefully these have been sorted now. As this hotfix is isolated, you might prefer to just manually patch the changed lines of code which theoretically has the same end result.

[BirenRathod]

@johnvanbreda Below link is the one which done last week. https://github.com/Indicia-Team/client_helpers/commit/1950c6a6ca22593d54af306bb08abb608eea0127

[burkmarr]

@kitenetter and @Sam-Amy the species details page is now displaying much more as originally designed. I'm going to investigate mapping options etc and I suggest we pick this up again once I've done that.

[Sam-Amy]

Thanks Rich – it looks much better already! I am awe of all your skills @burkmarrhttps://github.com/burkmarr and @johnvanbredahttps://github.com/johnvanbreda, I must admit most of what you have been discussing has gone way over my head, but fascinating none-the-less!

I’m sure this is part of everything you are already looking at, but in case it is more of a problem on the tiny laptop I’m working on today…many of the species detail headings are cut off (e.g. ‘Ellenberg indicator v…’) rendering the associated numbers meaningless (screenshot below). I guess a separate page to click/open up from the main species/map page would give more room and rectify this?

@.***

From: Rich Burkmar @.> Sent: 14 June 2022 10:53 To: BiologicalRecordsCentre/iRecord @.> Cc: Sam Amy @.>; Mention @.> Subject: Re: [BiologicalRecordsCentre/iRecord] Species pages and mapping functionality (Issue #1286)

CAUTION: This email originated from outside of the organisation. Do not click links or open attachments unless you recognise the sender and know the content is safe.

@kitenetterhttps://github.com/kitenetter and @Sam-Amyhttps://github.com/Sam-Amy the species details page is now displaying much more as originally designed. I'm going to investigate mapping options etc and I suggest we pick this up again once I've done that.

— Reply to this email directly, view it on GitHubhttps://github.com/BiologicalRecordsCentre/iRecord/issues/1286#issuecomment-1154969190, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AY2SJ5FBTBBDFHC5ZPRSPWDVPBI7RANCNFSM5T7LVXRQ. You are receiving this because you were mentioned.Message ID: @.**@.>>

This email and any attachments are intended solely for the named recipients and are confidential. If you are not the intended recipient, please reply to the email to highlight the error and delete this email from your system; you must not use, disclose, copy, or distribute this email or any of its attachments. UK Centre for Ecology & Hydrology (UKCEH) has taken reasonable precautions to minimise risk of this email or any attachments containing viruses or malware, but the recipient should carry out its own virus and malware checks before opening the attachments. UKCEH does not accept any liability for any losses or damages which the recipient may sustain due to presence of any viruses. Opinions, conclusions or other information in this message and attachments that are not related directly to UKCEH business are solely those of the author and do not represent the views of UKCEH. We process your personal data in accordance with our Privacy Notice, available on the UKCEH website. https://www.ceh.ac.uk/privacy-notice Registered office address; Maclean Building Benson Lane, Crowmarsh Gifford, Wallingford, Oxfordshire, United Kingdom, OX10 8BB Companies Registered Name; UK Centre for Ecology & Hydrology Place of Registration; England Registered Company Number; 11314957

[johnvanbreda]

@BirenRathod you can commit the changes for the redirect control to master and develop using a hotfix and then to the iRecord repository if you are waiting for it. That's separate to the species details changes though.

[BirenRathod]

Thanks @johnvanbreda, I will do it. Although I tested on my machine and code hasn't picked up when I access below url without login into website (it is localhost in my case). e.g. https://irecord.org.uk/record-details?occurrence_id=1200001

[burkmarr]

@Sam-Amy

I’m sure this is part of everything you are already looking at, but in case it is more of a problem on the tiny laptop I’m working on today…many of the species detail headings are cut off (e.g. ‘Ellenberg indicator v…’) rendering the associated numbers meaningless (screenshot below).

Noted - if we end up displaying these attributes, we'll have to address this in some way. (It's a problem on my desktop screen too.)

[BirenRathod]

@Sam-Amy & @burkmarr Can you both share some screenshot here please? I don't see any screenshot here. I need to figure out the problem od general styles of iRecord and indicia.

[Sam-Amy]

Have pasted my screenshot here on github (replied by email earlier)- hopefully you can see this?

[BirenRathod]

Thanks, @Sam-Amy.

[burkmarr]

@johnvanbreda - I want to either change a report (https://github.com/Indicia-Team/warehouse/blob/master/reports/library/taxa/taxon_names.xml) or create a new version, e.g. taxon_names_2.xml, that allows a search on external key (tvk) as a further alternative to searching on taxon_meaning_id or taxa_taxon_list_id and also return the default_common_name field. I have created it (library/taxa/taxon_names_2.xml) on the dev warehouse and it's working fine. I have two questions:

1. Which approach is best - update the existing report or create the new version? I don't think that the changes would break anything which already uses the report.
2. Whatever your answer to 1, what is a good workflow for me to deploy it to the live warehouse?

[burkmarr]

@kitenetter @Sam-Amy - the species details form was not eliminating duplicates from either the common names or synonym arrays. Once I've taken care of that and also identified the default_common_name, the top section for Early-purple orchid looks like this:

instead of this:

That looks okay to me without doing anything flashy like hiding other common names unless selected. Do you agree?

I'm going to delve a bit more into the custom attributes to see what possible approaches there might be to deal with them.

[Sam-Amy]

Looks good to me too.

[kitenetter]

Agree, that's much easier to interpret.

[johnvanbreda]

@burkmarr I think the correct approach is a hotfeature branch off master, then merge into master and develop. Let me know if you need more details.

[burkmarr]

@kitenetter and @Sam-Amy - I've done some work on this based on previous comments in the thread. These are implemented in a new prebuilt form (species_details_2) which I've deployed on a Pantheon branch and used in a new species details page (species-details2) e.g:

https://burkmar-brc-irecord.pantheonsite.io/species-details2?taxon_meaning_id=71446

It can be compared to the current version which is still available (species-details) e.g:

https://burkmar-brc-irecord.pantheonsite.io/species-details?taxon_meaning_id=71446

We can use this branch to test ideas and guide the development. The branch is using the dev warehouse in order to pick up a new report required for the new page. Unfortunately many of the images are not available there - so don't worry about the image thumbnails not appearing as expected.

Some notes to help you evaluate:

• Duplicate names removed from common names and synonyms.
• The 'default' common name is listed as 'common name' separately from 'other common names'.
• In the example above, I've utilized the existing form feature to list only specified custom attributes (see below for more info).
• If custom attributes with long names are included, the names are word-wrapped instead of being truncated (see below).
• I've added an external_key (TVK) URL parameter to the existing taxon_meaning_id and taxa_taxon_list_id parameters so that the page can be reached by specifying a TVK in the URL.
• I've added three new mapping controls - [hectadmap], [exploremap] and [dualmap]. The [exploremap] control just uses the existing leaflet grid map deployed on other pages such as the explore all records page. The [dualmap] control displays both the [hectadmap] and [exploremap] control with a switch to toggle between them.
• I've added a new '[recsbyyear]` control to show the temporal distribution of records.

I couldn't think of a way to improve on the existing methods of limiting the custom attributes displayed. If you want to experiment with this, edit the form and alter the attributes in the form configuration section marked FIELDS FOR SPECIES DETAILS. In the form as currently configured you need to add the attribute caption to the list there in order to display it for any taxon. If the attribute is not present for any particular taxon, the caption is not shown.

[johnvanbreda]

@burkmarr looks good to me. A couple of thoughts:

1. Remove duplicate attribute labels when there are multiple values of the same attribute (BR Habitats in this case).
2. As well as the temporal distribution chart by year, a phenology of month in year would be good?
3. As the map is static, consider the proxyCacheTimeout option (https://indicia-docs.readthedocs.io/en/latest/site-building/iform/helpers/elasticsearch-report-helper.html#advanced-options).
4. Do we need the Explore map?

[DavidRoy]

Thanks @burkmarr

2. I agree that a phenology chart would be a good addition
3. also agree with this as the page has an explore records link

The species name looks odd with a double authority? Orchis mascula (L.) L.

[Sam-Amy]

Looks great @burkmarr. Apologies if I'm missing something obvious or already mentioned, but why are there so few records showing on the 'Explore records' map, compared with the map on the original page here: https://burkmar-brc-irecord.pantheonsite.io/species-details?taxon_meaning_id=71446 ?