[scpubgit/stemmaweb.git] / root / src / phylotrees.tt

[% WRAPPER header.tt
	pagetitle = "Stemmaweb - Phylogeny calculation tool"
	applicationjs = c.uri_for( 'js/phylotools.js' )
%]
    <script type="text/javascript">
var basepath = "[% c.uri_for( '/' ) %]";
var textid = "[% textid %]";
var editable = "[% editable %]"
var currSelected;
var stemmadot = [];
var stemmasvg = [];
var stemmata_added = {};

function getPhylogeny () {
	stemmadot = [];
	stemmasvg = [];
	var phylourl = basepath + textid;
    $('#textinfo_waitbox').show();
    $.getJSON( basepath + "phylocalc/" + textid, function (textdata) {
    	stemmadot = textdata.stemmadot;
    	stemmasvg = textdata.stemmasvg;
	    $('#textinfo_waitbox').hide();
	    load_stemma( 0 );
    }); // TODO error handling
}

function load_stemma( idx ) {
	// Load the stemma at idx
	currSelected = idx;
	show_stemmapager();
	if( idx > -1 ) {
		$('#stemma_graph').empty();
		$('#stemma_graph').append( stemmasvg[idx] );
		if( stemmadot[idx].substr('digraph') > -1 && stemmata_added[idx] != true ) {
			// It has a root, so we may add it to the tradition stemmata.
			$('#add_stemma_button').show();
		}
        setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 );
	}
}

function show_stemmapager () {
      $('.pager_left_button').unbind('click').addClass( 'greyed_out' );
      $('.pager_right_button').unbind('click').addClass( 'greyed_out' );
      if( currSelected > 0 ) {
              $('.pager_left_button').click( function () {
                      load_stemma( currSelected - 1 );
              }).removeClass( 'greyed_out' );
      }       
      if( selectedStemmaID + 1 < stemmata.length ) {
              $('.pager_right_button').click( function () {
                      load_stemma( currSelected + 1 );
              }).removeClass( 'greyed_out' );
      }
}

function add_selected_stemma () {
	var requrl = basepath + "stemma/" + textid + "/n";
	var reqparam = { 'dot': stemmadot[currSelected] };
	$.post( requrl, reqparam, function (data) {
		// Disable add for any stemma already added
		stemmata_added[currSelected] = true;
		$('#add_stemma_button').hide();
		// TODO maybe check on the server if the stemma exists?
	}, 'json' );
}

function rootStemma ( stemidx, root ) {
	// Send the stemmadot at stemidx to the server, along with the name of the
	// selected root node. Receive back a dot spec and an SVG, and enable the
	var rooturl = basepath + 'microservices/rootedstemma';
	var params = { 'dot': stemmadot[stemidx], 'root': root };
	$.post( rooturl, params, function (data) {
		stemmadot[stemidx] = data.stemmadot;
		stemmasvg[stemidx] = data.stemmasvg;
		load_stemma( stemidx );
	}); // TODO error handling
}

$(document).ready( function() {
	$('#stemma_graph').mousedown( function(evt) {
        evt.stopPropagation();
        $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
        $('body').mousemove( function(evt) {
            mouse_scale = 1; // for now, was:  mouse_scale = svg_root_element.getScreenCTM().a;
            dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
            dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
            $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
            var svg_root = $('#stemma_graph svg').svg().svg('get').root();
            var g = $('g.graph', svg_root).get(0);
            current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
            new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
            g.setAttribute( 'transform', new_transform );
            evt.returnValue = false;
            evt.preventDefault();
            return false;
        });
        $('body').mouseup( function(evt) {
            $('body').unbind('mousemove');
            $('body').unbind('mouseup');
        });
	});
	 
	$('#stemma_graph').mousewheel(function (event, delta) {
        event.returnValue = false;
        event.preventDefault();
        if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
        if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
        if( delta < -9 ) { delta = -9 }; 
        var z = 1 + delta/10;
        z = delta > 0 ? 1 : -1;
        var svg_root = $('#stemma_graph svg').svg().svg('get').root();
        var g = $('g.graph', svg_root).get(0);
        if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
            var scaleLevel = z/10;
            current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
            new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
            g.setAttribute( 'transform', new_transform );
        }
    });
    
    $('#stemma_root_cancel').hide();
    if( !editable ) {
    	$('#stemma_add_form').hide();
    }
    // call out to run the phylogeny calculation
	getPhylogeny();
	    
});
    </script>

[% END %]

    <div id="topbanner">
      <h1>Stemmaweb - [% algorithm_name %] calculation for [% text_name %]</h1>
      <span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> | [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
    </div>
    <div id="textinfo_container">
      <div id="textinfo_load_status"></div>
      <h2>Text <span class="texttitle">[% text_name %]</span></h2>
      <div id="textinfo_container_buttons">
          <form id="stemma_pager" action="" method="GET" name="stemma_pager">
            <div id="stemma_pager_buttons">
              <div class="pager_left_button" id="stemma_pager_left_button"></div>
              <div class="pager_right_button" id="stemma_pager_right_button"></div>
            </div>
          </form>
          <form id="stemma_root_form" action="" method="GET" name="start_root_stemma">
            <div class="button" id="stemma_root_button" 
            	onClick="TODO">
          	  <span>Choose a root for this stemma</span>
            </div>
          </form>
          <form id="stemma_root_cancel" action="" method="GET" name="stemma_root_cancel">
            <div class="button" id="stemma_root_cancel_button" 
            	onClick="TODO">
          	  <span>Cancel root selection</span>
            </div>
          </form>
          <form id="stemma_add_form" action="" method="GET" name="stemma_add_form">
            <div class="button" id="add_stemma_button" 
            	onClick="add_selected_stemma()">
          	  <span>Add this stemma to the tradition</span>
            </div>
          </form>
      </div>
      <div id="stemma_graph"></div>
    </div>

    <!-- Interim 'loading' message for directory box -->
    <div id="loading_message">
    	<h3>Calculating text phylogeny, please wait...</h3>
    	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
    </div>
        
[% PROCESS footer.tt %]
Commit	Line	Data
917bee1c	1	[% WRAPPER header.tt
	2	pagetitle = "Stemmaweb - Phylogeny calculation tool"
	3	applicationjs = c.uri_for( 'js/phylotools.js' )
	4	%]
	5	<script type="text/javascript">
	6	var basepath = "[% c.uri_for( '/' ) %]";
	7	var textid = "[% textid %]";
	8	var editable = "[% editable %]"
	9	var currSelected;
	10	var stemmadot = [];
	11	var stemmasvg = [];
	12	var stemmata_added = {};
	13
	14	function getPhylogeny () {
	15	stemmadot = [];
	16	stemmasvg = [];
	17	var phylourl = basepath + textid;
	18	$('#textinfo_waitbox').show();
	19	$.getJSON( basepath + "phylocalc/" + textid, function (textdata) {
	20	stemmadot = textdata.stemmadot;
	21	stemmasvg = textdata.stemmasvg;
	22	$('#textinfo_waitbox').hide();
	23	load_stemma( 0 );
	24	}); // TODO error handling
	25	}
	26
	27	function load_stemma( idx ) {
	28	// Load the stemma at idx
	29	currSelected = idx;
	30	show_stemmapager();
	31	if( idx > -1 ) {
	32	$('#stemma_graph').empty();
	33	$('#stemma_graph').append( stemmasvg[idx] );
	34	if( stemmadot[idx].substr('digraph') > -1 && stemmata_added[idx] != true ) {
	35	// It has a root, so we may add it to the tradition stemmata.
	36	$('#add_stemma_button').show();
	37	}
	38	setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 );
	39	}
	40	}
	41
	42	function show_stemmapager () {
	43	$('.pager_left_button').unbind('click').addClass( 'greyed_out' );
	44	$('.pager_right_button').unbind('click').addClass( 'greyed_out' );
	45	if( currSelected > 0 ) {
	46	$('.pager_left_button').click( function () {
	47	load_stemma( currSelected - 1 );
	48	}).removeClass( 'greyed_out' );
	49	}
	50	if( selectedStemmaID + 1 < stemmata.length ) {
	51	$('.pager_right_button').click( function () {
	52	load_stemma( currSelected + 1 );
	53	}).removeClass( 'greyed_out' );
	54	}
	55	}
	56
	57	function add_selected_stemma () {
	58	var requrl = basepath + "stemma/" + textid + "/n";
	59	var reqparam = { 'dot': stemmadot[currSelected] };
	60	$.post( requrl, reqparam, function (data) {
	61	// Disable add for any stemma already added
	62	stemmata_added[currSelected] = true;
	63	$('#add_stemma_button').hide();
	64	// TODO maybe check on the server if the stemma exists?
65	}, 'json' );
66	}
67
68	function rootStemma ( stemidx, root ) {
69	// Send the stemmadot at stemidx to the server, along with the name of the
70	// selected root node. Receive back a dot spec and an SVG, and enable the
71	var rooturl = basepath + 'microservices/rootedstemma';
72	var params = { 'dot': stemmadot[stemidx], 'root': root };
73	$.post( rooturl, params, function (data) {
74	stemmadot[stemidx] = data.stemmadot;
75	stemmasvg[stemidx] = data.stemmasvg;
76	load_stemma( stemidx );
77	}); // TODO error handling
78	}
79
80	$(document).ready( function() {
81	$('#stemma_graph').mousedown( function(evt) {
82	evt.stopPropagation();
83	$('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
84	$('body').mousemove( function(evt) {
85	mouse_scale = 1; // for now, was: mouse_scale = svg_root_element.getScreenCTM().a;
86	dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
87	dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
88	$('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
89	var svg_root = $('#stemma_graph svg').svg().svg('get').root();
90	var g = $('g.graph', svg_root).get(0);
91	current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
92	new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
93	g.setAttribute( 'transform', new_transform );
94	evt.returnValue = false;
95	evt.preventDefault();
96	return false;
97	});
98	$('body').mouseup( function(evt) {
99	$('body').unbind('mousemove');
100	$('body').unbind('mouseup');
101	});
102	});
103
104	$('#stemma_graph').mousewheel(function (event, delta) {
105	event.returnValue = false;
106	event.preventDefault();
107	if (!delta \|\| delta == null \|\| delta == 0) delta = event.originalEvent.wheelDelta;
108	if (!delta \|\| delta == null \|\| delta == 0) delta = -1 * event.originalEvent.detail;
109	if( delta < -9 ) { delta = -9 };
110	var z = 1 + delta/10;
111	z = delta > 0 ? 1 : -1;
112	var svg_root = $('#stemma_graph svg').svg().svg('get').root();
113	var g = $('g.graph', svg_root).get(0);
114	if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) \|\| (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
115	var scaleLevel = z/10;
116	current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
117	new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
118	g.setAttribute( 'transform', new_transform );
119	}
120	});
121
122	$('#stemma_root_cancel').hide();
123	if( !editable ) {
124	$('#stemma_add_form').hide();
125	}
126	// call out to run the phylogeny calculation
127	getPhylogeny();
128
129	});
130	</script>
131
132	[% END %]
133
134	<div id="topbanner">
135	<h1>Stemmaweb - [% algorithm_name %] calculation for [% text_name %]</h1>
136	<span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> \| [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> \| [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
137	</div>
138	<div id="textinfo_container">
139	<div id="textinfo_load_status"></div>
140	<h2>Text <span class="texttitle">[% text_name %]</span></h2>
141	<div id="textinfo_container_buttons">
142	<form id="stemma_pager" action="" method="GET" name="stemma_pager">
143	<div id="stemma_pager_buttons">
144	<div class="pager_left_button" id="stemma_pager_left_button"></div>
145	<div class="pager_right_button" id="stemma_pager_right_button"></div>
146	</div>
147	</form>
148	<form id="stemma_root_form" action="" method="GET" name="start_root_stemma">
149	<div class="button" id="stemma_root_button"
150	onClick="TODO">
151	<span>Choose a root for this stemma</span>
152	</div>
153	</form>
154	<form id="stemma_root_cancel" action="" method="GET" name="stemma_root_cancel">
155	<div class="button" id="stemma_root_cancel_button"
156	onClick="TODO">
157	<span>Cancel root selection</span>
158	</div>
159	</form>
160	<form id="stemma_add_form" action="" method="GET" name="stemma_add_form">
161	<div class="button" id="add_stemma_button"
162	onClick="add_selected_stemma()">
163	<span>Add this stemma to the tradition</span>
164	</div>
165	</form>
166	</div>
167	<div id="stemma_graph"></div>
168	</div>
169
170	<!-- Interim 'loading' message for directory box -->
171	<div id="loading_message">
172	<h3>Calculating text phylogeny, please wait...</h3>
173	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
174	</div>
175
176	[% PROCESS footer.tt %]