Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup enrichment from wikidata #31

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Popup enrichment from wikidata #31

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e097af6
prototype of popup enrichment from wikidata
jsanz Nov 6, 2020
7663457
.vscode to gitignore
jsanz Nov 20, 2020
fc82a21
Implemented localStorage cache for Wikidata entries
jsanz Nov 20, 2020
dbe7aa8
Changed the initializing of the application
jsanz Nov 20, 2020
703938f
Review feedback
jsanz Nov 20, 2020
279689d
Pop up refactoring, same design
jsanz Nov 20, 2020
18438a6
template rename
jsanz Nov 20, 2020
b94b74a
bigger popups and enriched by default
jsanz Nov 20, 2020
769e72f
removed map hash
jsanz Nov 20, 2020
8ab2cb6
controlling female popup height
jsanz Nov 20, 2020
ab6f56b
Refactored wikidata, fixed pop up width jump, added female placeholder
jsanz Nov 26, 2020
80b70ba
improve the query to avoid misses for wd entries without desc
jsanz Nov 27, 2020
ef74d99
promote wikidata over wikipedia links
jsanz Nov 27, 2020
20d6475
fix SPARQL query
jsanz Nov 27, 2020
fe2dda0
removed unnecessary log messages
jsanz Nov 30, 2020
177609a
Update src/styles.css
jsanz Dec 2, 2020
fd31a9a
Update src/styles.css
jsanz Dec 2, 2020
6f58994
Documenting the SPARQL queries
jsanz Dec 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 64 additions & 15 deletions src/services/GeojsonService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
SOURCE_TYPES_LIST,
} from './Constants';

import getWikdataDetails from './WikidataService';

export default class GeojsonMapService {
static loadGeojson(map, folder, isMobile, coords, lang, popupText) {
fetch(`${URL_DATA}/data/${folder}/final_tile.geojson`)
Expand All @@ -25,13 +27,49 @@ export default class GeojsonMapService {
}
}

static getHTMLWikipediaLink(link, popupText) {
if (link !== '') {
return `<p class=""><a class="btn btn-light" target="_blank" href='${link}'><i class="fab fa-wikipedia-w"></i></a></p>`;
static getHTMLWikipediaLink(link, popupText, data) {
jsanz marked this conversation as resolved.
Show resolved Hide resolved
if (link === '') {
return `<p class=""><a class="btn btn-light disabled" target="_blank" href='${link}'><i class="fab fa-wikipedia-w"></i></a></p>
<span class="badge badge-secondary"><i class="fas fa-exclamation"></i>&nbsp;${popupText}</span>`;
}

return `<p class=""><a class="btn btn-light disabled" target="_blank" href='${link}'><i class="fab fa-wikipedia-w"></i></a></p>
<span class="badge badge-secondary"><i class="fas fa-exclamation"></i>&nbsp;${popupText}</span>`;
let additionalData = '';

if (data) {
let birth;
try {
const birthDate = new Date(Date.parse(data.birth));
birth = birthDate ? birthDate.getFullYear() : undefined;
} catch (error) {
// eslint-disable-next-line no-console
console.warn(error);
}
let death;
try {
const deathDate = new Date(Date.parse(data.death));
death = deathDate ? deathDate.getFullYear() : undefined;
} catch (error) {
// eslint-disable-next-line no-console
console.warn(error);
}

const picture = data.picture ? ` <p class=""> <img src="${data.picture}"/></p>` : '';

const birthDates = birth || death ? ` <p class=""> ${birth} - ${death}</p>` : '';

const description = data.description ? ` <p class=""> ${data.description}</p>` : '';

const occupations = data.occupations ? ` <p class=""> ${data.occupations}</p>` : '';

additionalData = picture + birthDates + description + occupations;
}
return `
${additionalData}
<p class="">
<a class="btn btn-light" target="_blank" href='${link}'>
<i class="fab fa-wikipedia-w"></i>
</a>
</p>`;
}

static addGeojsonSource(
Expand Down Expand Up @@ -110,20 +148,31 @@ export default class GeojsonMapService {
const { name, gender } = e.features[0].properties;
const color = gender === FEMALE ? '#ffca3af2' : '#0e9686f2';
const popupType = gender === FEMALE ? 'popup-female' : 'popup-male';
const getHTML = this.getHTMLWikipediaLink;

const html = `<div class="row"><div class="col-sm"><div class="${popupType}"><p>${name}</p>
${gender === FEMALE ? this.getHTMLWikipediaLink(link, popupText) : ''}</div></div></div>`;
// eslint-disable-next-line no-console
getWikdataDetails(link).then((data) => {
jsanz marked this conversation as resolved.
Show resolved Hide resolved
const femaleText = gender === FEMALE ? getHTML(link, popupText, data) : '';
const html = `
<div class="row" >
<div class="col-sm">
<div class="${popupType}">
<p>${name}</p>
${femaleText}
</div>
</div>
</div>`;

popupClick.setLngLat(e.lngLat)
.setHTML(html)
.addTo(map);
const popUpContent = document.getElementsByClassName('mapboxgl-popup-content');
if (popUpContent.length !== 0) {
popUpContent[0].style.backgroundColor = color;
}
popupClick.setLngLat(e.lngLat)
.setHTML(html)
.addTo(map);
const popUpContent = document.getElementsByClassName('mapboxgl-popup-content');
if (popUpContent.length !== 0) {
popUpContent[0].style.backgroundColor = color;
}
});
});


if (!isMobile) {
map.on('mouseenter', `${sourcename}-${type}`, (e) => {
popupClick.remove();
Expand Down
35 changes: 35 additions & 0 deletions src/services/WikidataService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* eslint-disable no-console */

// eslint-disable-next-line max-len
const sparqlQueryTemplate = `SELECT%20%0A%20%20%3Fid%20%0A%20%20(%3FidLabel%20AS%20%3Fname)%20%0A%20%20(%3Fdesc%20as%20%3Fdescription)%20%0A%20%20(%3FgenderLabel%20AS%20%3Fgender)%0A%20%20(SAMPLE(%3Fbirths)%20AS%20%3Fbirth)%20%0A%20%20(SAMPLE(%3Fdeaths)%20AS%20%3Fdeath)%20%0A%20%20(SAMPLE(%3Fpic)%20AS%20%3Fpicture)%20%0A%20%20(GROUP_CONCAT(DISTINCT%20%3FoccupationsLabel%3B%20SEPARATOR%20%3D%20%22%2C%20%22)%20AS%20%3Foccupations)%20%0AWHERE%20%7B%0A%20%20VALUES%20%3FwikiTitle%20%7B%0A%20%20%20%20%22##NAME##%22%40es%0A%20%20%7D%0A%20%20%3Fwiki%20schema%3Aabout%20%3Fid%3B%0A%20%20%20%20schema%3AisPartOf%20%3Chttps%3A%2F%2Fes.wikipedia.org%2F%3E%3B%0A%20%20%20%20schema%3Aname%20%3FwikiTitle.%0A%20%20%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP21%20%3Fgender.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP569%20%3Fbirths.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP570%20%3Fdeaths.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP106%20%3Foccupations.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fid%20wdt%3AP18%20%3Fpic%20%7D.%0A%20%20OPTIONAL%20%7B%20%3Fid%20schema%3Adescription%20%3Fdesc%20%7D.%0A%20%20FILTER%20(LANG(%3Fdesc)%20%3D%20%22es%22)%20%0A%20%20%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%0A%20%20%20%20bd%3AserviceParam%20wikibase%3Alanguage%20%22es%22.%0A%20%20%20%20%3Fid%20rdfs%3Alabel%20%3FidLabel.%0A%20%20%20%20%3Fgender%20rdfs%3Alabel%20%3FgenderLabel.%0A%20%20%20%20%3Foccupations%20rdfs%3Alabel%20%3FoccupationsLabel.%0A%20%20%7D%0A%7D%0AGROUP%20BY%20%3Fid%20%3FidLabel%20%3Fdesc%20%3FgenderLabel%20%3Fwiki%0A%0A
jsanz marked this conversation as resolved.
Show resolved Hide resolved
`;

export default function getWikidataDetails(wikipediaLink) {
// Get the text part
const { length } = wikipediaLink;
const nameLink = wikipediaLink.substring(wikipediaLink.lastIndexOf('/') + 1, length).replace(/_/g, '%20');
const query = sparqlQueryTemplate.replace('##NAME##', nameLink);
const url = `https://query.wikidata.org/sparql?format=json&query=${query}`;
jsanz marked this conversation as resolved.
Show resolved Hide resolved
return new Promise((resolve, reject) => {
fetch(url)
.then((response) => response.json())
.then((data) => {
if ('results' in data && 'bindings' in data.results) {
jsanz marked this conversation as resolved.
Show resolved Hide resolved
const { bindings } = data.results;
if (bindings.length > 0) {
const binding = bindings[0];
const result = {};
Object.keys(binding).forEach((k) => {
result[k] = binding[k].value;
});
resolve(result);
} else {
resolve(undefined);
}
}
})
.catch((reason) => {
reject(reason);
});
});
}