accurator/commit
Merged functions search into results and updated ids.
author | Chris Dijkshoorn |
---|---|
Mon Nov 30 17:48:16 2015 +0100 | |
committer | Chris Dijkshoorn |
Mon Nov 30 17:48:16 2015 +0100 | |
commit | 7a59f245a0abb5c118946d8a26a0c6573f00abac |
tree | dd376177da95b9ee85ec7d536b2e077696cf75ad |
parent | 8b982cca0bd8cb9127f56ea4a600e0b2e8898fe2 |
Diff style: patch stat
diff --git a/web/css/accurator.css b/web/css/accurator.css index 3b1b031..57723fc 100644 --- a/web/css/accurator.css +++ b/web/css/accurator.css @@ -206,7 +206,7 @@ Search results margin: auto; } -#results { +#resultsDiv { padding-top: 10px; padding-left: 10px; padding-right: 10px; diff --git a/web/html/results.html b/web/html/results.html index 112af79..ad3a07a 100644 --- a/web/html/results.html +++ b/web/html/results.html @@ -43,7 +43,7 @@ </div> <!-- Results --> - <div class="container" id="results"> + <div class="container" id="resultsDiv"> </div> <!-- Login modal --> diff --git a/web/js/accurator_annotate.js b/web/js/accurator_annotate.js index 5558044..3d1a592 100644 --- a/web/js/accurator_annotate.js +++ b/web/js/accurator_annotate.js @@ -5,7 +5,7 @@ Code for extending functionallity annotation page. var query, locale, experiment, domain, user, ui, uri; var annotateHdrFirst, annotateTxtFirst; -displayOptions = { +display = { showMetadata: true, showAnnotations: true, } @@ -133,7 +133,7 @@ function addClusterNavigationButtonEvents() { } function metadata() { - if(displayOptions.showMetadata){ + if(display.showMetadata){ // Get metadata from server $.getJSON("metadata", {uri:uri}) .done(function(metadata){ @@ -165,7 +165,7 @@ function appendMetadataWell(metadata) { function annotations() { // Get annotations from server - if(displayOptions.showAnnotations){ + if(display.showAnnotations){ $.getJSON("annotations", {uri:uri, type:"object"}) .done(function(annotations){ if(annotations.annotations.length > 0){ @@ -203,9 +203,9 @@ function maybeRunExperiment() { // Hide path if on annotate page $("#annotateDivNavigation").hide(); // Don't show metadata - displayOptions.showMetadata = false; + display.showMetadata = false; // Don't show annotations of others - displayOptions.showAnnotations = false; + display.showAnnotations = false; // Add big next button addExperimentNavigation(); } diff --git a/web/js/accurator_profile.js b/web/js/accurator_profile.js index 1681c86..59615f7 100644 --- a/web/js/accurator_profile.js +++ b/web/js/accurator_profile.js @@ -7,7 +7,7 @@ var locale, ui, domain, experiment, user, userName, realName; var recentItems; var initialClusters, enrichedClusters, clusters; -displayOptions = { +display = { numberDisplayedItems: 6, } diff --git a/web/js/accurator_results.js b/web/js/accurator_results.js index a7756df..a8de3bc 100644 --- a/web/js/accurator_results.js +++ b/web/js/accurator_results.js @@ -5,10 +5,10 @@ pagination.js and thumbnail.js *******************************************************************************/ var query = "", locale, experiment, ui, userName, realName; var resultsTxtRecommendationsFor, resultsHdrFirst, resultsTxtFirst; -var initialClusters = [], enrichedClusters = [], clusters = []; +var jsonResults, initialClusters = [], enrichedClusters = [], clusters = []; // Display options deciding how to results get rendered -displayOptions = { +display = { layout: "cluster", imageFilter: "onlyImages", numberDisplayedItems: 4, @@ -108,41 +108,103 @@ function results(query, userQuery, target) { } function search(query, target) { - console.log("Searching for: ", query); - statusMessage('Searching for ' + query); + //TODO: localize variables + var resultsTxtSearching = "Searching for "; + var resultsHdrResults = "Results for "; + var resultsTxtError = "Unfortunately an error has occured"; - onDone = function(data){ - $("#results").children().remove(); - controls(); - processJsonResults(data); - createResultClusters(); - $(document).prop('title', 'Results for ' + query); - }; + var request = {query:query}; + if(typeof target != 'undefined') request.target = target; - onFail = function(data){ - statusMessage('Unfortunately an error has occured', data.responseText); - }; + statusMessage(resultsTxtSearching + query); - //Get and process clusters - if (typeof target == 'undefined') { - $.getJSON("cluster_search_api", {query:query}) - .done(onDone) - .fail(onFail); + $.getJSON("cluster_search_api", request) + .done(function(data){ + // Make available for future changes of view + jsonResults = data; + populateResults(); + // Change title of page + $(document).prop('title', resultsHdrResults + query); + }) + .fail(function(data){ + statusMessage(resultsTxtError, data.responseText) + }); +} + +function populateResults() { + // Clear results div + $("#resultsDiv").children().remove(); + // Results layout is either cluster or list + if(display.layout === "cluster") { + populateClusters(); + } else if(display.layout === "list") { + //TODO: flatten results clusters + populateList(); + } + // Add control buttons + controls(); +} + +/******************************************************************************* +Cluster view +Show the results in clusters +*******************************************************************************/ +function populateClusters() { + console.log(jsonResults); + jsonToClusters(jsonResults); + createResultClusters(); +} + +function jsonToClusters(data) { + console.log(data); + // Convert json to initialClusters array + var sourceClusters = data.clusters; + var numberOfClusters = sourceClusters.length; + + for (var i=0;i<numberOfClusters;i++) { + // Get path uris and query for the labels + var path = sourceClusters[i].path; + var numberOfItems = sourceClusters[i].results; + var items = []; + + for (var j=0;j<numberOfItems;j++) { + var uri = sourceClusters[i].items[j].uri; + items[j] = new item(uri); + } + initialClusters[i] = new cluster(path, items); + } +} + +function createResultClusters() { + if(initialClusters.length == 0){ + // console.log('No results found for ', query); + $("#resultsDiv").append(noResultsHtml(query)); } else { - $.getJSON("cluster_search_api", {query:query, - target:target}) - .done(onDone) - .fail(onFail); + for(var i=0;i<initialClusters.length;i++) { + $("#resultsDiv").append(clusterContainer(i)); + // Append path to cluster container + addPath(i); + // Add enriched clusters and pagination + addItems(i); + } } } +/******************************************************************************* +List view +Show the results in one big list +*******************************************************************************/ +function populateList() { + console.log(jsonResults); +} + function recommendItems(target) { console.log("Recommending items"); $.getJSON("recommendation", {strategy:'expertise', target:target}) .done(function(data){ - $("#results").children().remove(); + $("#resultsDiv").children().remove(); showFilters(); processJsonResults(data); createResultClusters(); @@ -151,8 +213,8 @@ function recommendItems(target) { populateRandom(target, data.clusters.length); }) .fail(function(data, textStatus){ - $("#results").children().remove(); - $("#results").append(errorHtml(data, textStatus)); + $("#resultsDiv").children().remove(); + $("#resultsDiv").append(errorHtml(data, textStatus)); $(document).prop('title', 'Error on ' + query); }); } @@ -177,7 +239,7 @@ function randomItems(target) { } function populateRandom(target, clusterIndex) { - $("#results").append(clusterContainer(clusterIndex)); + $("#resultsDiv").append(clusterContainer(clusterIndex)); $.getJSON("recommendation", {strategy:'random', number:20, target:target}) @@ -217,15 +279,15 @@ function recommendExpertiseList(target) { addItemList(items); }) .fail(function(data, textStatus){ - $("#results").children().remove(); - $("#results").append(errorHtml(data, textStatus)); + $("#resultsDiv").children().remove(); + $("#resultsDiv").append(errorHtml(data, textStatus)); $(document).prop('title', 'Error on ' + query); }); } function controls() { - if(displayOptions.showControls) { - $("#results").append( + if(display.showControls) { + $("#resultsDiv").prepend( $.el.div({'class':'row'}, $.el.div({'class':'col-md-12 resultsDivControls'})) ); @@ -241,7 +303,7 @@ function resultLayoutButtons() { ); setLayoutButton(); $("#resultsBtnLayout").click(function() { - displayOptions.layout = (displayOptions.layout === "list") ? "cluster" : "list"; + display.layout = (display.layout === "list") ? "cluster" : "list"; setLayoutButton(); }); } @@ -251,7 +313,7 @@ function setLayoutButton() { var resultsLblCluster = "Cluster view"; var resultsLblList = "List view"; - if(displayOptions.layout === "list") { + if(display.layout === "list") { $("#resultsBtnLayout").html( $.el.span(resultsLblList + ' ', $.el.span({'class':'glyphicon glyphicon-th-large'})) @@ -265,10 +327,10 @@ function setLayoutButton() { } function statusMessage(header, text){ - $("#results").children().remove(); + $("#resultsDiv").children().remove(); $(document).prop('title', header); - $("#results").append( + $("#resultsDiv").append( $.el.div({'class':'row'}, $.el.div({'class':'col-lg-10 col-md-offset-1'}, $.el.h3(header)), @@ -303,7 +365,7 @@ function processListEnrichment(sourceItems) { var numberOfItems = sourceItems.length; var items = []; - // console.log("display", displayOptions.annotateLink); + // console.log("display", display.annotateLink); for (var i=0; i<numberOfItems; i++) { var uri = sourceItems[i].uri; var thumb = sourceItems[i].thumb; @@ -323,7 +385,7 @@ function thumbnailList(items) { for(var i=1; i<=numberOfRows; i++) { // Add row for thumbnails - $("#results").append( + $("#resultsDiv").append( $.el.div({'class':'row', 'id':'thumbnailRow' + i})); //Determine where to stop adding diff --git a/web/js/accurator_utilities.js b/web/js/accurator_utilities.js index 0b75bf9..5f70df1 100644 --- a/web/js/accurator_utilities.js +++ b/web/js/accurator_utilities.js @@ -257,7 +257,7 @@ function recommenderExperiment() { // Settings for recommender experiment if(experiment === "recommender") { // Set interface to list view - displayOptions.layout = "list"; + display.layout = "list"; // If running an recommender experiment choose A or B var AOrB = getAOrB(); diff --git a/web/js/search.js b/web/js/search.js index eaf6466..94f1c63 100644 --- a/web/js/search.js +++ b/web/js/search.js @@ -3,7 +3,7 @@ // var clusters = []; // var query = ""; -// displayOptions = { +// display = { // numberDisplayedItems: 4, // showFilters: true, // imageFilter: 'onlyImages', @@ -12,10 +12,10 @@ // function search(keyword, target) { // query = keyword; // $(document).prop('title', 'Searching for ' + query); -// $("#results").append(searchingHtml()); +// $("#resultsDiv").append(searchingHtml()); // // onDone = function(data){ -// $("#results").children().remove(); +// $("#resultsDiv").children().remove(); // showFilters(); // processJsonResults(data); // createResultClusters(); @@ -23,8 +23,8 @@ // }; // // onFail = function(data, textStatus){ -// $("#results").children().remove(); -// $("#results").append(errorHtml(data, textStatus)); +// $("#resultsDiv").children().remove(); +// $("#resultsDiv").append(errorHtml(data, textStatus)); // $(document).prop('title', 'Error on ' + query); // }; // @@ -66,49 +66,49 @@ function noFilterResultsHtml() { return $.el.h4('No results due to filter: ', $.el.span({'class':'text-danger'}, - displayOptions.imageFilter)); + display.imageFilter)); } // function showFilters() { -// // console.log('Showing filters:', displayOptions.showFilters); -// if(displayOptions.showFilters) { -// $("#results").append(filterAndRankButtons()); +// // console.log('Showing filters:', display.showFilters); +// if(display.showFilters) { +// $("#resultsDiv").append(filterAndRankButtons()); // } // } -function processJsonResults(data) { - // Convert json to initialClusters array - var sourceClusters = data.clusters; - var numberOfClusters = sourceClusters.length; - - for (var i=0;i<numberOfClusters;i++) { - // Get path uris and query for the labels - var path = sourceClusters[i].path; - var numberOfItems = sourceClusters[i].results; - var items = []; - - for (var j=0;j<numberOfItems;j++) { - var uri = sourceClusters[i].items[j].uri; - items[j] = new item(uri); - } - initialClusters[i] = new cluster(path, items); - } -} +// function processJsonResults(data) { +// // Convert json to initialClusters array +// var sourceClusters = data.clusters; +// var numberOfClusters = sourceClusters.length; +// +// for (var i=0;i<numberOfClusters;i++) { +// // Get path uris and query for the labels +// var path = sourceClusters[i].path; +// var numberOfItems = sourceClusters[i].results; +// var items = []; +// +// for (var j=0;j<numberOfItems;j++) { +// var uri = sourceClusters[i].items[j].uri; +// items[j] = new item(uri); +// } +// initialClusters[i] = new cluster(path, items); +// } +// } -function createResultClusters() { - if(initialClusters.length == 0){ - // console.log('No results found for ', query); - $("#results").append(noResultsHtml(query)); - } else { - for(var i=0;i<initialClusters.length;i++) { - $("#results").append(clusterContainer(i)); - // Append path to cluster container - addPath(i); - // Add enriched clusters and pagination - addItems(i); - } - } -} +// function createResultClusters() { +// if(initialClusters.length == 0){ +// // console.log('No results found for ', query); +// $("#resultsDiv").append(noResultsHtml(query)); +// } else { +// for(var i=0;i<initialClusters.length;i++) { +// $("#resultsDiv").append(clusterContainer(i)); +// // Append path to cluster container +// addPath(i); +// // Add enriched clusters and pagination +// addItems(i); +// } +// } +// } function clusterContainer(clusterId) { return $.el.div({'class':'well well-sm', @@ -251,13 +251,13 @@ function processEnrichment(data, clusterId) { function determineNumberOfPages (clusterId) { var numberOfPages = 0; var numberOfItems = clusters[clusterId].items.length; - var restPages = numberOfItems%displayOptions.numberDisplayedItems; + var restPages = numberOfItems%display.numberDisplayedItems; //Determine number of items in pagination if(restPages == 0) { - numberOfPages = numberOfItems/displayOptions.numberDisplayedItems; + numberOfPages = numberOfItems/display.numberDisplayedItems; } else { - numberOfPages = (numberOfItems-restPages)/displayOptions.numberDisplayedItems+1; + numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1; } return numberOfPages; } @@ -269,78 +269,78 @@ function determineNumberOfPages (clusterId) { // //rankButtons())); // } -function filterButtons() { - return $.el.div({'class':'btn-group'}, - $.el.button({'type':'button', - 'class':'btn btn-default dropdown-toggle', - 'data-toggle':'dropdown'}, - 'Image Filter ', - $.el.span({'class':'caret'})), - $.el.ul({'class':'dropdown-menu', - 'role':'menu'}, - $.el.li( - $.el.a({'href':'javascript:filterTrigger(\'onlyImages\')'}, - 'Only Images'), - $.el.a({'href':'javascript:filterTrigger(\'allObjects\')'}, - 'All Objects')))); -} - -function rankButtons() { - return $.el.div({'class':'btn-group'}, - $.el.button({'type':'button', - 'class':'btn btn-default dropdown-toggle', - 'data-toggle':'dropdown'}, - 'Cluster Abstraction ', - $.el.span({'class':'caret'})), - $.el.ul({'class':'dropdown-menu', - 'role':'menu'}, - $.el.li( - $.el.a({'href':'javascript:clusterAbstractionTrigger(\'instanceLevel\')'}, - 'Instance Level'), - $.el.a({'href':'javascript:clusterAbstractionTrigger(\'classLevel\')'}, - 'Class Level'), - $.el.a({'href':'javascript:clusterAbstractionTrigger(\'whatLevel\')'}, - 'Who What Where')))); -} - -function filterTrigger(type) { - var changeShownContent = false; - // console.log('Filtering type: ', type); - if(type == 'onlyImages' && !(displayOptions.imageFilter == 'onlyImages')) { - displayOptions.imageFilter = 'onlyImages'; - changeShownContent = true; - } - if(type == 'allObjects' && !(displayOptions.imageFilter == 'allObjects')) { - displayOptions.imageFilter = 'allObjects'; - changeShownContent = true; - } - // console.log('Should change something', changeShownContent); - if(changeShownContent) { - clusters = clone(enrichedClusters); - filter(); - updateClusters(); - } -} - -function clusterAbstractionTrigger(type) { - var changeClusterAbstraction = false; - if(type == 'instanceLevel' && !(displayOptions.imageFilter == 'instanceLevel')) { - displayOptions.imageFilter = 'instanceLevel'; - changeClusterAbstraction = true; - } - if(type == 'classLevel' && !(displayOptions.imageFilter == 'classLevel')) { - displayOptions.imageFilter = 'classLevel'; - changeClusterAbstraction = true; - } - if(type == 'whatLevel' && !(displayOptions.imageFilter == 'whatLevel')) { - displayOptions.imageFilter = 'whatLevel'; - changeClusterAbstraction = true; - } - if(changeClusterAbstraction) { - // console.log("Should be changing the Cluster Abstraction Level"); - updateClusters(); - } -} +// function filterButtons() { +// return $.el.div({'class':'btn-group'}, +// $.el.button({'type':'button', +// 'class':'btn btn-default dropdown-toggle', +// 'data-toggle':'dropdown'}, +// 'Image Filter ', +// $.el.span({'class':'caret'})), +// $.el.ul({'class':'dropdown-menu', +// 'role':'menu'}, +// $.el.li( +// $.el.a({'href':'javascript:filterTrigger(\'onlyImages\')'}, +// 'Only Images'), +// $.el.a({'href':'javascript:filterTrigger(\'allObjects\')'}, +// 'All Objects')))); +// } +// +// function rankButtons() { +// return $.el.div({'class':'btn-group'}, +// $.el.button({'type':'button', +// 'class':'btn btn-default dropdown-toggle', +// 'data-toggle':'dropdown'}, +// 'Cluster Abstraction ', +// $.el.span({'class':'caret'})), +// $.el.ul({'class':'dropdown-menu', +// 'role':'menu'}, +// $.el.li( +// $.el.a({'href':'javascript:clusterAbstractionTrigger(\'instanceLevel\')'}, +// 'Instance Level'), +// $.el.a({'href':'javascript:clusterAbstractionTrigger(\'classLevel\')'}, +// 'Class Level'), +// $.el.a({'href':'javascript:clusterAbstractionTrigger(\'whatLevel\')'}, +// 'Who What Where')))); +// } +// +// function filterTrigger(type) { +// var changeShownContent = false; +// // console.log('Filtering type: ', type); +// if(type == 'onlyImages' && !(display.imageFilter == 'onlyImages')) { +// display.imageFilter = 'onlyImages'; +// changeShownContent = true; +// } +// if(type == 'allObjects' && !(display.imageFilter == 'allObjects')) { +// display.imageFilter = 'allObjects'; +// changeShownContent = true; +// } +// // console.log('Should change something', changeShownContent); +// if(changeShownContent) { +// clusters = clone(enrichedClusters); +// filter(); +// updateClusters(); +// } +// } +// +// function clusterAbstractionTrigger(type) { +// var changeClusterAbstraction = false; +// if(type == 'instanceLevel' && !(display.imageFilter == 'instanceLevel')) { +// display.imageFilter = 'instanceLevel'; +// changeClusterAbstraction = true; +// } +// if(type == 'classLevel' && !(display.imageFilter == 'classLevel')) { +// display.imageFilter = 'classLevel'; +// changeClusterAbstraction = true; +// } +// if(type == 'whatLevel' && !(display.imageFilter == 'whatLevel')) { +// display.imageFilter = 'whatLevel'; +// changeClusterAbstraction = true; +// } +// if(changeClusterAbstraction) { +// // console.log("Should be changing the Cluster Abstraction Level"); +// updateClusters(); +// } +// } function updateClusters() { for(var i=0; i<clusters.length; i++) { @@ -360,7 +360,7 @@ function updateClusters() { } function filter() { - if(displayOptions.imageFilter == 'onlyImages') { + if(display.imageFilter == 'onlyImages') { // console.log('Filtering out objects without image'); // Remove all items without an image (read: with a stub) for(var i=0; i<clusters.length; i++) { @@ -370,7 +370,7 @@ function filter() { } function filterCluster(cluster) { - if(displayOptions.imageFilter == 'onlyImages') { + if(display.imageFilter == 'onlyImages') { // Remove all items without an image (read: with a stub) var items = cluster.items; // Check which items should be removed diff --git a/web/js/thumbnail.js b/web/js/thumbnail.js index 25c1060..6b637df 100644 --- a/web/js/thumbnail.js +++ b/web/js/thumbnail.js @@ -5,8 +5,8 @@ var boodstrapWitdth; function thumbnails(clusterId) { var items = clusters[clusterId].items; - var stop = displayOptions.numberDisplayedItems; - bootstrapWidth = parseInt(12/displayOptions.numberDisplayedItems, 10); + var stop = display.numberDisplayedItems; + bootstrapWidth = parseInt(12/display.numberDisplayedItems, 10); //Check if less results available then there are to be displayed if(items.length<stop){ @@ -24,7 +24,7 @@ function thumbnails(clusterId) { } function thumbnail(item) { - var bootstrapWidth = parseInt(12/displayOptions.numberDisplayedItems, 10); + var bootstrapWidth = parseInt(12/display.numberDisplayedItems, 10); var id = getId(item.uri); return $.el.div({'class':'col-md-' + bootstrapWidth}, @@ -47,8 +47,8 @@ function thumbnailTitle(item, bootstrapWidth) { function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) { var items = clusters[clusterId].items; - var start = (pageNumber - 1) * displayOptions.numberDisplayedItems; - var stop = start + displayOptions.numberDisplayedItems; + var start = (pageNumber - 1) * display.numberDisplayedItems; + var stop = start + display.numberDisplayedItems; var remove = 0; var headerType; @@ -59,7 +59,7 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) { // console.log("Should make " + remove + " invisible."); } - // console.log("start: " + start + " stop: " + stop + " page number: " + pageNumber + " current page: " + activePage + " cluster id: " + clusterId + " displayed: " + displayOptions.numberDisplayedItems + " remove: " + remove); + // console.log("start: " + start + " stop: " + stop + " page number: " + pageNumber + " current page: " + activePage + " cluster id: " + clusterId + " displayed: " + display.numberDisplayedItems + " remove: " + remove); var thumbIndex = 0; for (var i=start; i<stop; i++) { // console.log("Replacing thumb", thumbIndex); @@ -86,10 +86,10 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) { // If returning from a possible invisible situation, make everything visible again if(activePage == numberOfPages) { - var removed = numberOfPages * displayOptions.numberDisplayedItems - items.length; + var removed = numberOfPages * display.numberDisplayedItems - items.length; // console.log("Make " + removed + " thumbnail(s) visible again."); - var start = displayOptions.numberDisplayedItems - removed; - for(var i=start;i<displayOptions.numberDisplayedItems;i++) { + var start = display.numberDisplayedItems - removed; + for(var i=start;i<display.numberDisplayedItems;i++) { $("#cluster" + clusterId + " .col-md-" + bootstrapWidth).eq(i).show(); } }