w2v-server: build similars table on the client side
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 6fa4210..da66918 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -40,19 +40,6 @@
});
});
- $('#firsttable').DataTable({
- "sScrollY": "780px",
- "bScrollCollapse": true,
- "bPaginate": false,
- "bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
- "aoColumnDefs": [
- { "sWidth": "10%", "aTargets": [ -1 ] }
- ]
- } );
-
- $( "#first" ).clone().prependTo( "#tabs-2" );
-
function changeCharColor(txt, heat) {
var newText = "";
for (var i=0, l=txt.length; i<l; i++) {
@@ -74,6 +61,56 @@
return changeCharColor(str, heat);
}
+ % use Mojo::ByteStream 'b';
+ % my $urlprefix = url_with->query([word=>'']);
+ var paraResults = <%= b(Mojo::JSON::to_json($lists)) %>;
+ var urlprefix = new URLSearchParams(window.location.search);
+ if (paraResults.length > 0) {
+ var nvecs = [],
+ nwords = [],
+ nranks = [],
+ nmarked = [];
+ for(var i = 0; i < paraResults.length; i++) {
+ nwords = nwords.concat(paraResults[i].map(function(a){return a.word;}));
+ nvecs = nvecs.concat(paraResults[i].map(function(a){return a.vector;}));
+ nranks = nranks.concat(paraResults[i].map(function(a){return a.rank;}));
+ nmarked = nmarked.concat(paraResults[i].map(function(a){return a.marked;}));
+ }
+ showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked, urlprefix: "?"+urlprefix} );
+ var t = $('#firsttable').DataTable({
+ data: paraResults[0],
+ "sScrollY": "780px",
+ "bScrollCollapse": true,
+ "bPaginate": false,
+ "bJQueryUI": true,
+ "dom": '<"top">rt<"bottom"flp><"clear">',
+ "columns": [
+ { "data": "rank", type: "allnumeric" },
+ { "data": "dist", render: function ( data, type, row ) {return data.toFixed(3) }},
+ { "data": "word", render: function ( data, type, row ) {urlprefix.set("word", data); return '<a href="?' + urlprefix + '">' + data + '</a>' }}
+ ],
+ "columnDefs": [
+ { className: "dt-right", "targets": [0,1] },
+ { "searchable": false,
+ "orderable": false,
+ "targets": 0
+ },
+ { "orderSequence": [ "desc" ], "targets": [ 1 ] },
+ { "orderSequence": [ "asc", "desc" ], "targets": [ 2 ] },
+ ],
+ "order": [[ 1, 'desc' ]],
+ } );
+
+ t.on( 'order.dt search.dt', function () {
+ t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
+ cell.innerHTML = i+1;
+ } );
+ } ).draw();
+
+ $( "#first" ).clone().prependTo( "#tabs-2" );
+
+ }
+
var collocatorData = <%= b(Mojo::JSON::to_json($collocators)) %>;
var maxHeat; // = Math.max.apply(Math,collocatorData.map(function(o){return o.cprob;}))
@@ -81,7 +118,7 @@
maxHeat = Math.max.apply(Math,collocatorData.map(function(o){return Math.max.apply(Math,o.heat);}))
var t = $('#secondtable').DataTable({
data: collocatorData,
- "sScrollY": "800px",
+ "sScrollY": "780px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
@@ -457,8 +494,8 @@
T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
return "translate(" +
- (d.x) + "," +
- (d.y) + ")";
+ (d.x) + "," +
+ (d.y) + ")";
});
}
@@ -468,8 +505,8 @@
.data(data.words)
.attr("transform", function(d, i) {
return "translate(" +
- ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
- ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
+ ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
+ ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
}
var svg;
@@ -704,65 +741,17 @@
</tr>
</thead>
<tbody>
- % my $j=0; my @words; my @vecs; my @ranks; my @marked;
- % for my $list (@$lists) {
- % my $i=0; while($list) {
- % my $item = (@$list)[$i];
- % my $c = ($collocators? (@$collocators)[$i] : 0);
- % last if(!$c && !$item);
- <tr>
- <td align="right">
- <%= ++$i %>.
- </td>
- % if($item) {
- <td align="right">
- <%= sprintf("%.3f", $item->{dist}) %>
- </td>
- <td>
- % my $class = ($marked->{$item->{word}}? "marked " : "");
- % my $r = $item->{rank};
- % if($r < $mergedEnd) {
- % $class .= "merged";
- % $r .= " (merged vocab)";
- % } elsif($mergedEnd!=0 && $r > $mergedEnd) {
- % $r -= $mergedEnd;
- % }
- <a class="<%= $class =%>"
- title="freq. rank: <%= $r =%>"
- href="<%= url_with->query([word => $item->{word}]) =%>">
- <%= $item->{word} =%>
- </a>
- </td>
- % } else {
- <td colspan="2"/>
- % }
- </tr>
- % last if($i >= $no_nbs);
- % }
- % }
+ <tr>
+ <td align="right">
+ </td>
+ <td align="right">
+ </td>
+ <td></td>
+ </tr>
</tbody>
</table>
</div>
<script>
- % use Mojo::ByteStream 'b';
- % my $urlprefix = url_with->query([word=>'']);
- $(window).load(function() {
- var result = <%= b(Mojo::JSON::to_json($lists)) %>;
- var nvecs = [],
- nwords = [],
- nranks = [],
- nmarked = [];
- for(var i = 0; i < result.length; i++) {
- nwords = nwords.concat(result[i].map(function(a){return a.word;}));
- nvecs = nvecs.concat(result[i].map(function(a){return a.vector;}));
- nranks = nranks.concat(result[i].map(function(a){return a.rank;}));
- nmarked = nmarked.concat(result[i].map(function(a){return a.marked;}));
- }
- var urlprefix = new URLSearchParams(window.location.search);
- urlprefix.set("word","");
- showMap({target: " "+urlParams.get('word')+" ", mergedEnd: 0, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked, urlprefix: "?"+urlprefix} );
- // showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => "?"+$urlprefix})); %>);
- });
</script>
<div id="second">
<div id="embed">
@@ -771,14 +760,14 @@
</div>
</div>
</div>
- % } elsif($word !~ /^\s*$/) {
- <div id="wrapper">
- <div id="not-found-dialog" title="Not found">
- <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
- <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
- </div>
- <script>
- $( function() {
+ % } elsif($word !~ /^\s*$/) {
+ <div id="wrapper">
+ <div id="not-found-dialog" title="Not found">
+ <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
+ <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
+ </div>
+ <script>
+ $( function() {
$( "#not-found-dialog" ).dialog({
autoOpen: true,
modal: true,
@@ -837,10 +826,9 @@
</td>
<td align="right">
</td>
- <td align="right">
- </td>
- <td align="left">
- </td>
+<script
+ src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+ </td>
</tr>
</tbody>
</table>