w2v-server: use DataTables
diff --git a/templates/index.html.ep b/templates/index.html.ep
index c4e0d9f..719cb5a 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -4,11 +4,35 @@
<title>DeReKo-Word-Vector-Distances: <%= $word %></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
+ <script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+ <script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script>
+$(document).ready(function() {
+ $("#tabs").tabs( {
+ "show": function(event, ui) {
+ var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
+ if ( oTable.length > 0 ) {
+ oTable.fnAdjustColumnSizing();
+ }
+ }
+ } );
+
+ $('#firsttable').DataTable({
+ "sScrollY": "800px",
+ "bScrollCollapse": true,
+ "bPaginate": false,
+ "bJQueryUI": true,
+ "dom": '<"top">rt<"bottom"flp><"clear">',
+ "aoColumnDefs": [
+ { "sWidth": "10%", "aTargets": [ -1 ] }
+ ]
+ } );
+});
$(function() {
$( document ).tooltip({
content: function() {
@@ -16,6 +40,7 @@
}}
)
})
+
</script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/derekovecs/js/tsne.js"></script>
@@ -58,7 +83,15 @@
color: red;
fill: red;
}
-
+
+table.display {
+ width: 40% important!;
+ margin: 0; /* <- works for me this way ****/
+}
+table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
+ padding: 2px 2px;
+// border-bottom: 1px solid #111;
+}
#collocators {
margin-bottom: 15px;
}
@@ -339,21 +372,24 @@
<span> </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
</form>
<br>
+ <div id="mytable"/>
% if($lists && (@$lists) > 0 && (@$lists)[0]) {
<div id="wrapper">
- <table id="first">
+ <div id="first" style="width:400px">
+ <table class="display compact nowrap" id="firsttable">
+ <thead>
<tr>
<th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
% if($collocators) {
- <th title="The window around the target word that is considered for summation.">w'</th>
- <th align="center" title="Raw (max.) activation of the collocator in the output layers.">a</th>
- <th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability."align="center">Σp</th>
-<!--
+ <th align="right" title="The window around the target word that is considered for summation.">w'</th>
+ <th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
+ <th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
<th align="right">Σp/|w|</th>
--->
<th title="c" align="left">collocator</th>
% }
</tr>
+ </thead>
+ <tbody>
% my $j=0; my @words; my @vecs; my @ranks; my @marked;
% for my $list (@$lists) {
% my $i=0; while($list) {
@@ -402,13 +438,10 @@
<td align="right">
<%= sprintf("%.3e", $c->{norm}) %>
</td>
-<!--
<td align="right">
<%= sprintf("%.3e", $c->{sum}) %>
</td>
--->
<td align="left">
-<!-- <a href="<%= url_with->query([word => $c->{word}]) =%>" -->
<a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
title="freq. rank: <%= $c->{rank} =%>">
<%= $c->{word} %>
@@ -417,13 +450,17 @@
<td colspan="5"/>
% }
</tr>
+ % last if($i >= 100);
% }
% }
+ </tbody>
</table>
+</div>
<script>
% use Mojo::ByteStream 'b';
% my $urlprefix = url_with->query([word=>'']);
$(window).load(function() {
+ showTable(<%= b(Mojo::JSON::to_json([@$collocators])) %>);
showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
});
</script>