Skip to content

Instantly share code, notes, and snippets.

@LaurensRietveld

LaurensRietveld/README.md

Last active August 29, 2015 14:09
Show Gist options
  • Save LaurensRietveld/7d4ccee95a0d45e95865 to your computer and use it in GitHub Desktop.
Save LaurensRietveld/7d4ccee95a0d45e95865 to your computer and use it in GitHub Desktop.
Download ZIP
#YASR: Manipulate table visualization and merge columns
Raw
README.md

This gist shows how you can manipulate and combine columns of the table plugin. Instead of showing the URIs directly, this gist checks whether the SPARQL response contains a projection variable with the corresponding label for that URI. If this is the case, that label is used as text for this URI link. E.g., a SPARQL result with projection variables ?car and ?carLabel (where ?car is a URI), will hide the ?carLabel column in the table, and will use the ?carLabel as text for the ?car hyperlink.

ps. This feature is recently added to YASR as well (see the 'mergeLabelsWithUris' setting), though slightly different: for this gist the cell content changes on hover

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Combining projection variables in a datatable</title>
<link href='http://cdn.jsdelivr.net/g/[email protected](yasqe.min.css),[email protected](yasr.min.css)' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="yasr"></div>
<script src='http://cdn.jsdelivr.net/yasr/2.1/yasr.bundled.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js'></script>
<script src="init.js"></script>
</body>
Raw
init.js
/**
* First, make sure we do not draw the ...Label variables as column
*/
YASR.plugins.table.defaults.getColumns = function(yasr) {
var vars = yasr.results.getVariables();
yasr.results.getVariables().forEach(function(variable) {
var labelIndex = vars.indexOf(variable + "Label");
if (labelIndex >= 0) {
//ah, a label equivalent for this variable exists. remove it
vars.splice(labelIndex, 1);
}
});
//we've filtered the list. Now convert array to one that is used as input for the datatables plugin
var cols = [];
cols.push({"title": ""});//row numbers column
vars.forEach(function(variable) {
cols.push({"title": variable});
});
return cols;
};
/**
* Now, extend the original 'drawCellContent' function to use the label instead of the URI as text
*/
YASR.plugins.table.defaults.drawCellContent = (function(originalDrawContentFunction) {
return function extendDrawFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes) {
var cellContent = originalDrawContentFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes);
if (bindings[sparqlVar].type == "uri" && bindings[sparqlVar + "Label"] ) {
//ok, this is a URI, and we have a label equivalent. do the magic
//create the new label (and append lang tag if there is one
var newLabel = bindings[sparqlVar+"Label"].value;
if (bindings[sparqlVar+"Label"]["xml:lang"]) newLabel += "@" + bindings[sparqlVar+"Label"]["xml:lang"];
//replace the cell content text with the new label (we keep the href link to the original uri)
//also store the label as a data attribute (used for showing/hiding the label)
cellContent = $(cellContent).attr('toggleLabel', newLabel).text(newLabel).prop('outerHTML');
}
return cellContent;
}
})(YASR.plugins.table.defaults.drawCellContent);
/**
* Use data attribute assigned in the previous step ('toggleLabel'), to make sure the original URI shows on hover
*/
YASR.plugins.table.defaults.callbacks.onCellMouseEnter = function(tdEl) {
var toggleLabel = $(tdEl).find("[toggleLabel]");
toggleLabel.text(toggleLabel.attr("href"));
};
YASR.plugins.table.defaults.callbacks.onCellMouseLeave = function(tdEl) {
var toggleLabel = $(tdEl).find("[toggleLabel]");
toggleLabel.text(toggleLabel.attr("toggleLabel"));
};
/**
* Now, finally, initialize YASR, and fetch some example SPARQL results
*/
var yasr = YASR(document.getElementById("yasr"));
$.get('results.json', function(sparqlJson) {
yasr.setResponse(sparqlJson);
});
Raw
results.json
{ "head": { "link": [], "vars": ["sub", "released", "subLabel"] },
"results": { "distinct": false, "ordered": true, "bindings": [
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/007:_Licence_to_Kill" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1989-04-20+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "007: Licence to Kill" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Adieu_(C%C5%93ur_de_pirate_song)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2011-03-19+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Adieu (C\u0153ur de pirate song)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/April_Love_(film)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1957-11-27+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "April Love (film)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Arnel_Pineda_(album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1999" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Arnel Pineda (album)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2005-03-15+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (album)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(film)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1983" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (film)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(video_game)" } , "released": { "type": "literal", "xml:lang": "en", "value": "iOS: Jan 05, 2011" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (video game)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Azada_(video_game)" } , "released": { "type": "literal", "xml:lang": "en", "value": "June 2007 , August 2012" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Azada (video game)" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Blue_Daisy" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "2010" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Blue Daisy" }},
{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Break_It_Up_(Jemina_Pearl_album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2009-10-06+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Break It Up (Jemina Pearl album)" }} ] } }
Copy link

ghost commented Nov 19, 2014

Good

@LaurensRietveld
Copy link
Author

@EfraimToth: that was a quick comment?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment