Popup enrichment from wikidata

[jsanz]

This is a prototype since I don't have much knowledge about the display but it should be a good starting point if it's accepted.

Closes #30

[jsanz]

@jessisena let me know what you think

[jessisena]

@jsanz this is amazing! 👏 thanks! I've let some little comments in the code, but as you said I think is a great starter point.

I have only 2 concerns about the popup:

• the "flashing effect" while loading plus the popup changing size, and
• the best way to visualize the new data in small devices/screens

For the 1st one, I'm thinking that maybe is worth it to fill the popup from the beginning with some kind of placeholders where the final data should appear. And, in case eventually the data is not there, it's also a way to show this fact (the same way that the Wikipedia button is being shown disabled when there's no wikipedia link available).

Other ideas, opinions and/or suggestions are welcome 🙂

[jessisena]

@jsanz this is a request, but could you include a brief explanation (similar to the one in #30 ) about the sparql query inside our README? 🙏

[jsanz]

Thanks for the review @jessisena, I understand then this functionality is desirable.

• I'll definitely address your comments and study more the rest of the code to try to adapt to current practices.
• Sure, I will add a detailed explanation of the SPARQL query to the README as part of this PR. My idea is that this query is an intermediate solution since we could switch many of the current Wikipedia links in the generated data by Wikidata identifiers but that's a different task.

Regarding the UI:

• I will also handle the mobile use case
• I will work on a popup that has all the placeholders by default, and when the user clicks try to get filled, showing some notice about missing data. Notice that sometimes is OK to have missing data, like birth/death dates for goddesses, for example. I like the idea of also advocating on missing data in Wikidata directly on the site.
• I was thinking about maybe using the picture as a background for the full pop up, I will follow up with some proposals if I need your advice on different options.

Anything else I should take care of?

[jessisena]

Yes, this feature is absolutely desirable @jsanz 🚀 Thanks for addressing the comments and your willingness to add the SPARQL explanation.

And about the UI, I've just reviewed the popup (mobile and desktop) and actually I think we could increase and establish the same size for both without problems. For example, the width could be something between 240px or 200px, WDYT?

And about the design, my concern about adding the image as a background for the full popup is readability and visibility in general 🙄 but you can tell me better once you try it 👍

Actually, I was thinking about a full re-style of the popup to something like this horizontal design:

or another option is to keep the verticality (common style):

Although I personally prefer the 1st one 🙂

[jsanz]

I'll give the image as a background a try and if I see it readable I'll share it.

I like the common style option because we can use it both for mobile and desktop but it shouldn't hard to implement a responsive layout.

[jsanz]

@jessisena please take a look at the changes:

• Added a caching system to avoid repeated requests to wikidata
• Introduced Handlebars to manage the two templates used
• Pop ups are "enriched" on hover thanks to ☝️
• Bigger layout following your suggestion of having the picture on the left

It's not perfect and there are some cases still to handle like a better signaling when no data has been retrieved from wikidata, but I think it's ready for you to check

[jsanz]

@jessisena last commit ab6f56b added:

• Increased the popup height to avoid the small jump (it still may happen to extremely narrow images)

• Treats the case for when instead of wikipedia_link there is a wikidata field

• Splits the previous cache into two:

  1. One that stores the wikidata IDs corresponding to women names
  2. Another that stores the wikidata details based on wikidata IDs

  This way the pop up enrichment can be a one step if the geojson stores the wikidata ID or a two steps process when the input is a Wikipedia name: first it retrieves the wikidata ID and then it retrieves the rest of the details. This way we have a two level cache to deal with both scenarios and saving as many roundtrips to wikidata as possible.

The queries to Wikidata now are not encoded and easier to read. I still need to document them somewhere. I'll try to do this ASAP but the rest of the code is ready for proper review.

[jsanz]

BTW the caches are now for a single day, we may want to extend that a bit but totally up to you. At the end of the Constants.js file:

export const wikidataExpireCache = 1 * 24 * 3600 * 1000;

[jsanz]

Much better @jessisena, thanks for the suggestions. I've also added details about the queries in the README files. Let me know if there's anything else to improve.

About the Wikidata cache, is one day enough, or should we increase it? My reasoning for that figure is that the website is mostly visited by occasional users so saving repeated queries on a single session seems fine to me, but maybe you think it's better to increase the data retention 🤔