Widget for testing Wikipediat-derived categories WCAT-4
authorJason Skomorowski <jason@indexdata.com>
Mon, 15 Dec 2014 19:04:22 +0000 (14:04 -0500)
committerJason Skomorowski <jason@indexdata.com>
Mon, 15 Dec 2014 19:04:22 +0000 (14:04 -0500)
examples/htdocs/mkws-widget-wikicat.js [new file with mode: 0644]
examples/htdocs/tester-wiki.html [new file with mode: 0644]

diff --git a/examples/htdocs/mkws-widget-wikicat.js b/examples/htdocs/mkws-widget-wikicat.js
new file mode 100644 (file)
index 0000000..8bb3901
--- /dev/null
@@ -0,0 +1,12 @@
+mkws.registerWidgetType('wikicategories', function() {
+  $.ajax({
+    url: mkws.pazpar2_url() + "?command=wiki&query=" + this.config.autosearch,
+    context: this
+  })
+  .done(function(data) {
+    outstr = new XMLSerializer().serializeToString(data.getElementsByTagName("targetcategories").item(0));
+    this.node.html(outstr.replace("targetcategories", "ul").replace(/targetcategory/g, "li"));
+  });
+});
+
+
diff --git a/examples/htdocs/tester-wiki.html b/examples/htdocs/tester-wiki.html
new file mode 100644 (file)
index 0000000..b49d255
--- /dev/null
@@ -0,0 +1,391 @@
+<!doctype html>
+<html>
+
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>MKWS demo: Reference & Credo, and popup widget, development</title>
+<link rel="stylesheet" type="text/css" href="tools/htdocs/mkws.css" />
+<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
+<link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
+
+<script type="text/javascript">
+  var mkws_config = {
+    sp_auth_url: "http://mkwsex.local/service-proxy/?command=auth&action=login&username=mkctest&password=mkctestallcon",
+    pazpar2_url: "http://mkwsex.local/service-proxy/"
+  };
+</script>
+
+<script type="text/javascript" src="tools/htdocs/jquery-1.10.0.min.js"></script>
+<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
+
+<script type="text/javascript" src="tools/htdocs/pz2.js"></script>
+<script type="text/javascript" src="tools/htdocs/handlebars-v2.0.0.js"></script>
+<script type="text/javascript" src="tools/htdocs/jquery.json-2.4.js"></script>
+<script type="text/javascript" src="tools/htdocs/jsnlog.min.js"></script>
+
+<script type="text/javascript" src="src/mkws-handlebars.js"></script>
+<script type="text/javascript" src="src/mkws-core.js"></script>
+<script type="text/javascript" src="src/mkws-team.js"></script>
+<script type="text/javascript" src="src/mkws-filter.js"></script>
+<script type="text/javascript" src="src/mkws-widget.js"></script>
+<script type="text/javascript" src="src/mkws-widget-main.js"></script>
+<script type="text/javascript" src="src/mkws-widget-facets.js"></script>
+<script type="text/javascript" src="src/mkws-widget-authname.js"></script>
+<script type="text/javascript" src="src/mkws-widget-categories.js"></script>
+<script type="text/javascript" src="src/mkws-widget-log.js"></script>
+<script type="text/javascript" src="src/mkws-widget-record.js"></script>
+<script type="text/javascript" src="src/mkws-widget-reference.js"></script>
+<script type="text/javascript" src="src/mkws-widget-builder.js"></script>
+<script type="text/javascript" src="src/mkws-templates.js"></script>
+<script type="text/javascript" src="src/mkws-popup.js"></script>
+
+<script type="text/javascript" src="mkws-widget-wikicat.js"></script>
+
+<style>
+.dialog > textarea {
+  height: 100%;
+  width: 100%;
+}
+html {
+  margin: 0;
+  height: 100%;
+}
+body {
+  background-color: #bbbbbb;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+header {
+  font-size: 1.3em;
+}
+header button, #note > input {
+  margin-left: 1em;
+  border-radius: 4px;
+  background-color: #4368a1;
+  color: #dbe9ff;
+  font: inherit;
+  font-weight: normal;
+  border: 1px solid #7492c3;
+  padding: 0.15em 0.25em;
+}
+header button:hover, header button:active, header button:focus {
+  background-color: #2f5591;
+}
+#top-bar, #current-bar, #note {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+#top-bar {
+  background-color: #002868;
+  color: white;
+}
+#current-bar {
+  background-color: #54d8a8;
+  color: #002868;
+}
+#note {
+  width: 100%;
+  padding: .5em;
+}
+#note > input {
+  flex: 1;
+  background-color: #7de3be;
+  border-color: #7ed6b6;
+  color: #002868;
+}
+#maybe {
+  background-color: #F0AD4E;
+  border-color: #EEA236;
+  color: #664009;
+  color: white;
+}
+#maybe:hover, #maybe:active, #maybe:focus {
+  background-color: #EC971F;
+  border-color: #D58512;
+}
+#yes {
+  background-color: #5CB85C;
+  border-color: #4CAE4C;
+  color: #214d21;
+  color: white;
+}
+#yes:hover, #yes:focus, #yes:active {
+  background-color: #449D44;
+  border-color: #398439;
+}
+#no {
+  background-color: #D9534F;
+  border-color: #D43F3A;
+  color: #4f1311;
+  color: white;
+}
+#no:hover, #no:focus, #no:active {
+  background-color: #C9302C;
+  border-color: #AC2925;
+}
+#query {
+  font-weight: bold;
+  font-size: 110%;
+}
+#settings, #judiciary {
+  padding: .5em;
+  display: flex;
+  align-items: center;
+}
+#results, #query-info {
+  padding: .5em;
+  display: flex;
+  text-align: right;
+  align-items: center;
+  justify-content: flex-end;
+}
+#count {
+  font-size: 120%;
+}
+#test-area {
+  flex: 1;
+  padding: 2em;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+#test-subject {
+  margin: auto;
+}
+#results-table {
+  flex: 1;
+  padding: 1em;
+  display: flex;
+  justify-content: center;
+}
+#results-table table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+#results-table td, #results-table th {
+  padding: .25em 1.25em;
+  font-size: .9em;
+}
+#results-table tr:first-child {
+  border-bottom: 1px solid black;
+}
+#results-table tr {
+  border-bottom: 1px dotted black;
+}
+#results-table tr:last-child {
+  border-bottom: none;
+}
+  
+</style>
+
+</head>
+
+<body>
+<header>
+  <div id="top-bar">
+    <span id="settings">
+      Settings:
+      <button id="widget-markup-button">Widget</button>
+      <button id="mkws-config-button">MKWS config</button>
+      <button id="queries-button">Queries</button>
+    </span>
+    <span id="results">
+      Results:
+      <button id="results-table-button">Table</button>
+      <button id="results-csv-button">| delimited</button>
+    </span>
+  </div>
+</header>
+
+<header id="current-bar">
+  <span id="judiciary">
+    Relevant to query <span id="query"></span>?
+    <button id="yes" class="judgement">Yes</button>
+    <button id="no" class="judgement">No</button>
+    <button id="maybe" class="judgement">Maybe</button>
+  </span>
+  <span id="query-info">
+    <span id="count"></span>
+  </span>
+  <span id="note">
+    Note: <input type="text"></input>
+  </span>
+</header>
+
+<div id="widget-markup" class="dialog" title="Widget markup">
+  <textarea></textarea>
+</div>
+<div id="mkws-config" class="dialog" title="MKWS configuration">
+  <textarea></textarea>
+</div>
+<div id="queries" class="dialog" title="Queries">
+  <textarea></textarea>
+</div>
+<div id="results-csv" class="dialog" title="| delimited results">
+  <textarea readonly></textarea>
+</div>
+<div id="results-table" class="dialog" title="Results as table">
+  <table></table>
+</div>
+
+<div id="test-area">
+  <div id="test-subject"></div>
+</div>
+
+<script>
+(function () { // wrapper
+// Initial data
+this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
+this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
+if (localStorage.getItem('mkwstest-queries')) {
+  this.queries = JSON.parse(localStorage.getItem('mkwstest-queries'));
+}
+if (localStorage.getItem('mkwstest-widget-markup')) {
+  this.widgetMarkup = localStorage.getItem('mkwstest-widget-markup');
+}
+if (localStorage.getItem('mkwstest-mkws-config')) {
+  mkws_config = JSON.parse(localStorage.getItem('mkwstest-mkws-config'));
+}
+$("#queries > textarea").html(this.queries.join("\n"));
+$("#widget-markup > textarea").html(this.widgetMarkup);
+$("#mkws-config > textarea").html(JSON.stringify(mkws_config));
+mkws.setMkwsConfig(mkws_config);
+mkws.authenticated = false;
+mkws.authenticating = false;
+
+this.results = {};
+var next = 0;
+if (localStorage.getItem('mkwstest-results')) {
+  this.results = JSON.parse(localStorage.getItem('mkwstest-results'));
+}
+if (localStorage.getItem('mkwstest-next') !== null) {
+  next = parseInt(localStorage.getItem('mkwstest-next'));
+}
+
+var context = this;
+
+var showNext = function () {
+  if (next <  this.queries.length) {
+    $('#note > input').val("");
+    $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
+    $('#query').html('"' + this.queries[next] + '"');
+    localStorage.setItem("mkwstest-next", next);
+    next++;
+    $('#count').html(next + " / " + this.queries.length);
+    mkws.init('#test-subject');
+  } else {
+    $("#results-table").dialog("open");
+  }
+} 
+var startEval = function () {
+  $(".dialog").dialog("close");
+  next = 0;
+  context.results = {};
+  showNext();
+}
+var judge = function (e) {
+  var query = $('#test-subject > div').attr('autosearch');
+  context.results[query] = {judgement: $(this).html(), note: $("#note > input").val() || ""};
+  localStorage.setItem("mkwstest-results", JSON.stringify(context.results));
+  showNext();
+}
+
+// Set up dialogs
+$(".dialog").dialog({
+  autoOpen: false,
+  height: 600,
+  width: 600,
+  modal: true,
+  open: function(event, ui) {
+    $(this).parent().css('position', 'fixed');
+  }
+});
+
+// Markup dialog
+var updateMarkup = function () {
+  context.widgetMarkup = $("#widget-markup > textarea").val();
+  localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
+  startEval();
+}
+$("#widget-markup-button").click(function () {
+  $("#widget-markup").dialog("open");
+});
+$("#widget-markup").dialog("option", "buttons", [
+  {text: "Start new evaluation", click: updateMarkup},
+  {text: "Cancel", click: function() { $(this).dialog("close"); }}   
+]);
+
+// MKWS config dialog
+var updateConfig = function () {
+  mkws.setMkwsConfig(JSON.parse($("#mkws-config > textarea").val()));
+  mkws.authenticated = false;
+  mkws.authenticating = false;
+  localStorage.setItem("mkwstest-mkws-config", $("#mkws-config > textarea").val());
+  startEval();
+}
+$("#mkws-config-button").click(function () {
+  $("#mkws-config").dialog("open");
+});
+$("#mkws-config").dialog("option", "buttons", [
+  {text: "Start new evaluation", click: updateConfig},
+  {text: "Cancel", click: function() { $(this).dialog("close"); }}   
+]);
+
+// Queries dialog
+var updateQueries = function () {
+  context.queries = $("#queries > textarea").val().split("\n");
+  localStorage.setItem("mkwstest-queries", JSON.stringify(context.queries));
+  startEval();
+}
+$("#queries-button").click(function () {
+  $("#queries").dialog("open");
+});
+$("#queries").dialog("option", "buttons", [
+  {text: "Start new evaluation", click: updateQueries},
+  {text: "Cancel", click: function() { $(this).dialog("close"); }}   
+]);
+
+// Results dialogs
+$("#results-table-button").click(function () {
+  $("#results-table").dialog("open");
+});
+$("#results-csv-button").click(function () {
+  $("#results-csv").dialog("open");
+});
+$("#results-table").dialog("option", "open", function () {
+  var html = "<tr><th>Query</th><th>Relevant?</th><th>Note</th><tr>";
+  for (var i = 0; i < context.queries.length; i++) {
+    var q = context.queries[i];
+    var r = context.results;
+    if (r[q]) {
+      html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td><td>" + r[q].note + "</td></tr>\n";
+    }
+  } 
+  $("#results-table > table").html(html);
+});
+$("#results-csv").dialog("option", "open", function () {
+  var csv = "Query|Relevant?|Note\n";
+  for (var i = 0; i < context.queries.length; i++) {
+    var q = context.queries[i];
+    var r = context.results;
+    if (r[q]) {
+      csv += [q, r[q].judgement, r[q].note].join("|") + "\n";
+    }
+  } 
+  $("#results-csv > textarea").html(csv);
+});
+
+$('button.judgement').click(judge);
+showNext();
+})();// wrapper
+</script>
+
+</body>
+</html>
+