<!DOCTYPE html>
<html>
  <head>
	  <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() {
    $("#xxxtabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

$(".selector").tabs({ active: 1 });
    $('#firsttable').DataTable({
        "sScrollY": "760px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "dom": '<"top">rt<"bottom"flp><"clear">',
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );


         $('#secondtable').DataTable({
        "sScrollY": "800px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "dom": '<"top">rt<"bottom"flp><"clear">',
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
});

    $( function() {
     $( "#tabs" ).tabs();
    } );

$(function() {
       $( document ).tooltip({
			   content: function() {
				   return $(this).attr('title');
			   }}
		   )
	   })

    </script>
	  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	  <script src="/derekovecs/js/tsne.js"></script>
	  <script src="/derekovecs/js/som.js"></script>
	  <script src="/derekovecs/js/labeler.js"></script>
    <style>
     body, input {
	     font-family: Arial, sans-serif;
	     font-size: 11pt;
     }

     .mono {
       font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, Courier;
     }

     .ui-tooltip-content {
	     font-size: 9pt;
	     color: #222222;
     }
     
     svg > .ui-tooltip-content {
	     font-size: 8pt;
	     color: #222222;
     }
     
     a.merged {
       color: green;
       fill: green;
     }
     
     #first a {
       text-decoration: none;
     }
     
     a.marked, #first a.marked {
       text-decoration: underline;
     }

     a.target {
       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;
     }
     
     #wrapper {
       width: 100%;
       //   border: 1px solid red; 
       overflow: hidden; /* will contain if #first is longer than #second */
     }
     #first {
       margin-right: 20px;
       float: left;
       //    border: 1px solid green;
     }
     #second {
       border: 1px solid #333;
       overflow: hidden; /* if you don't want #second to wrap below #first */
     }
     #som2 svg {
       border: 1px solid #333;
     }

     #cost {
	     font-size: 8pt;
	     color: #222222;
       margin-top: 4px;
       margin-bottom: 12px;
     }

     #sominfo1, #sominfo {
	     font-size: 8pt;
	     color: #222222;
       margin-top: 0px;
     }

     #somcolor1, #somcolor2, #somcolor3 {
       display: inline-block;
       height: 10px;
       width: 10px;
     }

     #third {
       border: 1px solid #333;
     }

    </style>
    <script>

     var opt = {epsilon: <%= $epsilon %>, perplexity: <%= $perplexity %>},
		     mapWidth = 800, // width map
		     mapHeight = 800,
		     jitterRadius = 7;

     var T = new tsnejs.tSNE(opt); // create a tSNE instance

     var Y;

     var data;
     var labeler;

     function applyJitter() {
       svg.selectAll('.tsnet')
          .data(labels)
          .transition()
          .duration(50)
          .attr("transform", function(d, i) {
            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) + ")";
          });
     }
     
     function updateEmbedding() {
       var Y = T.getSolution();
       svg.selectAll('.tsnet')
          .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) + ")"; });
     }

     var svg;
     var labels = [];
     var anchor_array = [];
     var text;

     function drawEmbedding() {
       $("#embed").empty();
       var div = d3.select("#embed");
	     
       // get min and max in each column of Y
       var Y = T.Y;
       
       svg = div.append("svg") // svg is global
					      .attr("width", mapWidth)
					      .attr("height", mapHeight);
	     
       var g = svg.selectAll(".b")
						      .data(data.words)
						      .enter().append("g")
						      .attr("class", "tsnet");
	     
       g.append("a")
	      .attr("xlink:href", function(word) {
          return (data.urlprefix+word);})
        .attr("class", function(d, i) {
          var res="";
          if(data.marked[i]) {
			      res="marked ";
          }
			    if(data.target.indexOf(" "+d+" ") >= 0) {
				    return res+"target";
			    } else if(data.ranks[i] < data.mergedEnd) {
			      return res+"merged";
			    } else {
				    return res;
			    }
	      })
	      .attr("title", function(d, i) {
		      if(data.mergedEnd > 0) {
            if(data.ranks[i] >= data.mergedEnd) {	
         	    return "rank: "+i +"  "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
         	    return "rank: "+i +"  "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
            }  
	        } else {
		        return "rank: "+i +"  "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		      }
	      })
		    .append("text")
        .attr("text-anchor", "top")
        .attr("font-size", 12)
        .text(function(d) { return d; });
	     
       var zoomListener = d3.behavior.zoom()
											      .scaleExtent([0.1, 10])
											      .center([0,0])
											      .on("zoom", zoomHandler);
       zoomListener(svg);
     }

     var tx=0, ty=0;
     var ss=1;
     var iter_id=-1;

     function zoomHandler() {
       tx = d3.event.translate[0];
       ty = d3.event.translate[1];
       ss = d3.event.scale;
       updateEmbedding();
     }

     var stepnum = 0;

     function stopStep() {
       clearInterval(iter_id);
	     text = svg.selectAll("text");
	     
       // jitter function needs different data and co-ordinate representation
	     labels = d3.range(data.words.length).map(function(i) {
         var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
         var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
		     anchor_array.push({x: x, y: y, r: jitterRadius});
		     return {
           x: x,
           y: y,
			     name: data.words[i]
		     };
	     });
       
       // get the actual label bounding boxes for the jitter function
	     var index = 0;
	     text.each(function() {
		     labels[index].width = this.getBBox().width;
		     labels[index].height = this.getBBox().height;
		     index += 1;
	     });

	     
       //	 setTimeout(updateEmbedding, 1);
       //	 setTimeout(
	     labeler =	 d3.labeler()
			               .label(labels)
			               .anchor(anchor_array)
			               .width(mapWidth)
			               .height(mapHeight)
			               .update(applyJitter);
       //         .start(1000);

       iter_id = setInterval(jitterStep, 1);
     }

     var jitter_i=0;

     function jitterStep() {
       if(jitter_i++ > 100) {
         clearInterval(iter_id);
       } else {
		     labeler.start2(10);
	       applyJitter();
       }
     }

     var last_cost=1000;

     function step() {
       var i = T.iter;
       
       if(i > <%= $no_iterations %>) {
		     stopStep();
       } else {
         var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
         $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
         if(i % 250 == 0 && cost >= last_cost) {
		       stopStep();
         } else {
           last_cost = cost;
           updateEmbedding();
         }
       }
     }

     function showMap(j) {
	     data=j;
       T.iter=0;
       T.initDataRaw(data.vecs); // init embedding
       drawEmbedding(); // draw initial embedding
	     
	     if(iter_id >= 0) {
		     clearInterval(iter_id);
	     }
       //T.debugGrad();
       iter_id = setInterval(step, 1);
       if(<%= $show_som %>) {
         makeSOM(j, <%= $no_iterations %>);
       }
     }
     var queryword;

     function onload() {
        queryword = document.getElementById('word');
     }

     function queryKorAP() {
         window.open('http://korap.ids-mannheim.de/kalamar/?q='+queryword.value, 'KorAP');
     }

     function queryKorAPCII(query) {
         window.open('http://korap.ids-mannheim.de/kalamar/?ql=cosmas2&q='+query, 'KorAP');
     }
    </script>
  </head>
  <body onload="onload()">
	  <form method="GET">
		  word(s): 
      <input id="word" type="text" name="word" size="20"  value="<%= $word %>" title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word."> 
			cut-off:
      <input id="cutoff" type="text" name="cutoff" size="10"  value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
      dedupe <input type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
		  % if($mergedEnd > 0) {
        backw. <input type="checkbox" name="sbf" value="1" <%= ($searchBaseVocabFirst ? "checked" : "") %> title="If checkecked base vocabulary will be searched first. Otherwise merged vocabulray will be searched first.">
      % }
		  max. neighbours: <input type="text" size="4" name="n" value="<%= $no_nbs %>">
		  max. iterations: <input type="text" name="N" size="4" value="<%= $no_iterations %>">
      SOM <input type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
		  % if($collocators) {
        <span>  </span>window/sort
        <select name="sort">
          <option value="0"  <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
          <option value="1"  <%= ($sort==1? "selected":"") %>>any single position</option>
          <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option>
        </select>
		  % }
      <span>  </span><input type="submit" value="Show">
      <span>  </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
	  </form>
	  <br>
	<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Semantics</a></li>
    <li><a href="#tabs-2">Syntagmatic (collocators)</a></li>
  </ul>
	<div id="tabs-1">
   <div id="mytable"/>
	  % if($lists && (@$lists) > 0 && (@$lists)[0]) {
	    <div id="wrapper">
        <div id="first" style="width:220px">
		    <table class="display compact nowrap" id="firsttable">
          <thead>
			    <tr>
				    <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
			    </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) {
			            % if(!grep{$_ eq $item->{word}} @words) {
                    %   push @vecs, $item->{vector};
			              %   push @words, $item->{word};
			              %   push @ranks, $item->{rank};
			              %   push @marked, ($marked->{$item->{word}}? 1 : 0);
                  % }
				          <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 >= 100);
			      % }
		      % }
          </tbody>
		    </table>
</div>
		    <script>
		     % use Mojo::ByteStream 'b';
         % my $urlprefix = url_with->query([word=>'']);
		     $(window).load(function() {
			     showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
		     });
        </script>
		% }  else  { # ($word && $word !~ /^\s*$/)
				<div id="wrapper">
					<p>
						ERROR: "<%= $word %>" not found in vocabluary.
					</p>
				</div>
		% }
		<div id="second" style="width:800px; height:800px; font-family: arial;">
			<div id="embed">
			</div>
		</div>
</div>
    <div id="cost"></div>
</div>
</div>
<div id="tabs-2">
         <div id="second" style="width:500px">
		    <table class="display compact nowrap" id="secondtable">
          <thead>
			    <tr>
            % if($collocators) {
            <th>#</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>
          % for(my $i=0; $i < 100; $i++) {
              % my $c = ($collocators? (@$collocators)[$i] : 0);
			        <tr>
				        <td align="right">
  				        <%= ++$i %>.
				        </td>
                % if($c) {
				          <td align="right">
                    <span class="mono"><%= bitvec2window($c->{pos}) %></span>
				          </td>
				          <td align="right">
  				          <%= sprintf("%.3f", $c->{dist}) %>
				          </td>
				          <td align="right">
  				          <%= sprintf("%.3e", $c->{norm}) %>
				          </td>
				          <td align="right">
  				          <%= sprintf("%.3e", $c->{sum}) %>
				          </td>
				          <td align="left">
  				          <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
                       title="freq. rank: <%= $c->{rank} =%>">
                      <%= $c->{word} %>
				          </td>
                % } else {
                  <td colspan="5"/>
                % }
			        </tr>
			      % }
          </tbody>
		    </table>
</div>
</div>
</div>
		% if($show_som) {
		  <div id="som2">
		  </div>
      <div id="sominfo1"><span id="somcolor1">   </span> <span id="somword1"> </span> <span id="somcolor2">   </span> <span id="somword2"> </span> <span id="somcolor3">   </span></div>
      <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
    % }
      </div>
      % if($training_args) {
        <p>
          Word vector model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters: <pre><%= $training_args %></pre>
        </p>
      % }
  </body>
</html>