Test the possibilities of d3js or {crosstalk} - Home Page

[statnmap]

• [x] Create an example maps datasets.
• [ ] Rmd first: Link area map / species / services table. (7h max for this exploration)
• [x] There can be one or multiple selection, the corresponding parts are highlighted
  • [x] Example: We can click on the map, it highlights related species on the map and services in table
  • [x] Example: We can click on one or two species, it highlights related areas on the map and services in table.
  • [x] Example: We can click on species + in table, it highlights areas on the map
• [ ] Do not forget translation in multiple languages
• [ ] Find a way for unit tests
• Example : http://bl.ocks.org/katossky/cc328e6aadf10c5bb035e7f48a50866a

If not possible considering time available, we use R to take care of reactivity but with more buttons to block reactivity when needed.

Proposition to explore.

[statnmap]

Colin:

• the current blockage is that {crosstalk} doesn't seem to be able to retrieve clicks on the map.
• There is no {crosstalk} widget from selectInput that could update itself when you click on the map or the {DT} (it doesn't communicate in that way).

At first glance, if we want to do what we want to do, we have two choices:

• implement everything in pure JS, which will be the "cleanest" and efficient in the long run, but it will take a longer development time (we're not hacking shiny)
• implement everything in shiny, which will be the fastest in terms of development because we'll have nothing to learn along the way

There is some mystery around {crosstalk}: For example, if I have a checkbox, a card, and a DT:

• When I use the checkbox, it filters the card and the DT
• When I select in the DT, it filters the card (but doesn't touch the checkbox)
• When I click on the map ... nothing happens

A possibility that do not take inputs from leaflet, but from other sources: https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html . Here, we cannot get information from the map

At first glance what we need is something like this with leaflet + D3js : http://osmuk.m.free.fr/d3js-web/final.php Here, there is an alert() when we click on a polygon that may be reachable using Javascript.

[statnmap]

After further exploration, using {crosstalk} does not seem to be a good idea as too limited for now.
It is better to go for a full D3js solution. The first page will thus be served as a static page, provided that the size of data included in the page does not prevent a correct loading time.
We also need to account for translation in this data visualization.

[statnmap]

ThinkR proposes to experiment the build a fluid home page using d3js. This will allow users to feel more welcome and potentially improve usage of the application.
However, this reduces time that will be allocated for other pages and functionalities.

@PMHLambert can you please validate this with a comment below. Thanks.

[statnmap]

Take into account cases where there is no data after filter on species and/or area.

Par @PMHLambert :

• The ecosystem services list already delivered will be updated in the next weeks but the structure will not change (possible merges of ecosystem services items, rename item). Links between expert knowledge and evidence surbey items need to be made.
• for some case studies some economic valuations will combine several species. Need to discuss the feasibility to downscale the result at the species scale.If not possible think how to present in the same tool species-specific and aggregted data
• The valuation will not be available for all the species in each case study.
• No listing or no valuation of ES for a species in a case study does mean the absence of ES. Need to think how to present this in the IWA

[ColinFay]

• Front is fully built using HTML, CSS and JS (no server rendering) for better performances -> https://github.com/inrae/diades.atlas/blob/ui-i18n/inst/app/www/main.html

I've switched to a combination of Leaflet + Datatable, which appear to be the most efficient for our use-case.

The logic for filtering is written contained here https://github.com/inrae/diades.atlas/blob/ui-i18n/inst/app/www/main.html#L46 and might need to be checked.

• Data is queried on the DB and turned to JSON, using https://github.com/inrae/diades.atlas/blob/ui-i18n/data-raw/db_to_json.R

• So far the translation for species & services have not been made (I'm not sure I'm perfectly fit to create them), but the UI has been translated and can switch from one to the other.

[statnmap]

@PMHLambert it's time for a first validation of the Home Page.
You can test the Home page here: https://connect.thinkr.fr/diadesatlasui18n/

Can you validate that:

• The presentation in 3 columns corresponds to your need.
• You can select in any of the 3 columns (separately), the outputs of the two other columns are updated as you expect considering intersection of tables (There is no misuse of datasets)
• We can let all these data available. Indeed, content of species, cices, ecosystem_service, basin_outlet, casestudy_basin and casestudy are stored openly in the git repository (JSON) and available on the application for advanced user with knowledge of Javascript.

=> After that, we will define how to translate this part.
=> We will add information to explain the user how to use this page.

By the way, we started a vignette to explore the database, but for now, it is not documented : https://inrae.github.io/diades.atlas/articles/aa-data-exploration-compiled.html

Please add your comments about this first validation below

[PMHLambert]

Good job!

The presentation in 3-columns is what I expected. It is already efficient to detect some discrepancies in the row data. No salmon in the Loire catchment when I select the species salmon.

The column-separately selection works fine. I do not understand what you mean by "There is no misuse of datasets". One concern of misunderstanding the results raises from the column-separately selection: If the Loire CS is selected, there is no salmon but cultural services. If I select traditional know-to-use, Loire and salmon are highlighted. Which is correct because of the OR request. But I probably would like to see for which species this ES is associated with the Loire. So a 2-column selection will be better. If not possible, we need to explain this limitation.

Does the third point mean that a user can have access to the code and the data to fix bugs or to update date ?

Some propositions of improvement in the 1-column selection (to be discussed according to the feasibility)

• Is there a possibility to center the map on the study area range? I travel to China and it was not obvious to find home ! The easiest solution was to reload the page
• Is there a possibility of multiple selections of ecosystem services? To see for example where are the cultural services whatever the division

[statnmap]

• First page implemented with 1 selection

• [ ] Multiple selection : Disable modalities after first selection

• [ ] Final version of economic data ?

• [ ] Faire comprendre / mettre en évidence l'utilisation des couleurs pour mettre en évidence ce qui a été sélectionné en premier

Contenu du tableau

• Note: Ce ne sont que des services écosystémiques. Les espèces ne sont pas forcément présentes.

  • [ ] Question à régler par les économistes
  • [ ] Première chose à lire : expert knowledge, service, division
  • Une colonne supplémentaire ?
    • Mauvaise idée, surtout si les chiffres sont à sommer enter BV / espèces
    • Plutôt à mettre sur le site web

• [ ] Textes de présentation à régler par les économistes

  • Titre de la page ?

• Régler le Zoom sur les BV ?

  • Dépend de chaque écran
  • Changer le centre ou mettre un bounding box à l'affichage ?
  • [ ] ThinkR

• [ ] Shapefile : Combiner les BV par cas d'étude ?

  • Inrae

• [ ] Nouvelle base de données à venir, sans les doublons

Double sélection ?

Expérience utilisateur

• Entrée BV

  • Pour une espèce, quels sont les services ?
  • Pour un service, quelles sont les espèces ?

• Entrée espèce

  • Pour un BV, quels sont les services ?
  • Pour un service, quels sont les bassins ?

• Faut-il griser ou retirer les filtres qui ne font pas partie de la sous-liste ?

• On bloque la 3eme sélection

  • [ ] ThinkR

• Je sélectionne 2 espèces, j'ai 2 services qui s'allument. Je filtre une ligne du tableau sur les 2

  • Si jamais le service retiré était associé à une espèce, est-ce que je dois retirer l'espèce qui n'est plus associée aux services ? En plus de filtrer les BV
  • La deuxième sélection a une influence sur la 3ème colonne, mais aussi potentiellement sur la première sélection

• [ ] Tableau - case à cocher

  • Qu'est-ce qui est unique ?
    • Expert * Service ou
    • Expert Service Division ?

[statnmap]

Filter choices were changed during meeting 2021-07-22.
There will not be accelerated first page using full JS, however output will be cached to get a quick presentation.