path: root/scripts/ems/web/sgviz.js

var xmlns="http://www.w3.org/2000/svg";
var RECOMBINED = 0;
var FROM = 1;
var TO = 2;
var OUTPUT = 3;
var ALIGNMENT = 4;
var CHILDREN = 5;
var RULE_SCORE = 6;
var HEURISTIC_RULE_SCORE = 7;
var HYP_SCORE = 8;
var LHS = 9;
var DERIVATION_SCORE = 10;
var CHART_WIDTH  = window.innerWidth * 0.8;
var CHART_HEIGHT = window.innerHeight;
var CELL_WIDTH = CHART_WIDTH/input.length;
var CELL_HEIGHT = CHART_HEIGHT/(input.length+1);
var CELL_MARGIN = 4;
var CELL_BORDER = 2;
var CELL_PADDING = 2;
if (input.length < 6) { CELL_MARGIN = 5; CELL_BORDER = 3; CELL_PADDING = 3; }
if (input.length > 10) { CELL_MARGIN = 1; CELL_BORDER = 1; CELL_PADDING = 2; }
if (input.length > 20) { CELL_MARGIN = 0; CELL_BORDER = 0; CELL_PADDING = 1; }
var BUTTON_WIDTH = 170;
var BUTTON_HEIGHT = 30;
var OPTION_WIDTH = 60;
var OPTION_HEIGHT = BUTTON_HEIGHT;
var CELL_HIGHLIGHT_COLOR = "#c0ffc0";
var CELL_REGULAR_COLOR = "#ffff80";
var INPUT_HIGHLIGHT_COLOR = "#c0c0c0";
var INPUT_REGULAR_COLOR = "#ffffff";
var SORT_OPTION = 2;
var ZOOM = 0;
var ZOOM_FROM = 0;
var ZOOM_TO = input.length+1;
var ZOOM_WIDTH = input.length;

var length = input.length;
var chart = document.getElementById("chart");
var reachable = new Array();
var cell_hyps = new Array(length);
var cell_derivation_score = Array();

// init basic layout
draw_chart();
draw_menu();
draw_options();

// process hypotheses
function process_hypotheses() {
  index_hypotheses_by_cell();
  find_reachable_hypotheses();
  compute_best_derivation_scores();
}

//
// INITIALIZATION
//

function index_hypotheses_by_cell() {
  // init edge_lists
  var from, to, id;
  for(from=0; from<length; from++) {
    cell_hyps[from] = new Array(length);
    for(to=0; to<length; to++) {
      cell_hyps[from][to] = new Array();
    }
  }
  // populate
  for (id in edge) {
    from = edge[id][FROM];
    to = edge[id][TO];
    edge[id][FROM] = parseInt(from);
    edge[id][TO] = parseInt(to);
    edge[id][RULE_SCORE] = parseFloat(edge[id][RULE_SCORE]);
    edge[id][HEURISTIC_RULE_SCORE] = parseFloat(edge[id][HEURISTIC_RULE_SCORE]);
    edge[id][HYP_SCORE] = parseFloat(edge[id][HYP_SCORE]);
    edge[id][DERIVATION_SCORE] = parseFloat(edge[id][DERIVATION_SCORE]);
    cell_hyps[from][to].push(id);
  }
}

function find_reachable_hypotheses() {
  var i;
  for (i=0;i<cell_hyps[0][length-1].length;i++) {
    id = cell_hyps[0][length-1][i];
    find_reachable_hypotheses_recursive( id );
  }
}

function find_reachable_hypotheses_recursive( id ) {
  var children, c;
  if (!(reachable[id] === undefined)) { return; }
  reachable[id] = 1;
  children = get_children( id );
  for(c=0;c<children.length;c++) {
    find_reachable_hypotheses_recursive( children[c] );
  }
}

function compute_best_derivation_scores() {
  var from, to, width, cell_max_score, i, id, c;
  for(from=0; from<length; from++ ) {
    cell_derivation_score[from] = Array();
  }
  for(width=length-1; width>=0; width-- ) {
    for(from=0; from<length-width; from++ ) {
      to = from+width;
      cell_max_score = -9.9e9;
      for (i=0;i<cell_hyps[from][to].length;i++) {
        id = cell_hyps[from][to][i];
        if (width == length-1) {
          edge[id][DERIVATION_SCORE] = edge[id][HYP_SCORE];
        }
        if (edge[id][DERIVATION_SCORE] != null) {
          var children = get_children(id);
          for(c=0;c<children.length;c++) {
            if (edge[children[c]][DERIVATION_SCORE] == null ||
                edge[children[c]][DERIVATION_SCORE] < edge[id][DERIVATION_SCORE]) {
              edge[children[c]][DERIVATION_SCORE] = edge[id][DERIVATION_SCORE];
            }
          }
        }
        if (edge[id][DERIVATION_SCORE] != null &&
            edge[id][DERIVATION_SCORE] > cell_max_score) {
          cell_max_score = edge[id][DERIVATION_SCORE];
        }
      }
      cell_derivation_score[from][to] = cell_max_score;
    }
  }
}

//
// MENU
//

function draw_menu() {
  draw_menu_button(1,"Best Derivation");
  draw_menu_button(2,"Number of Hypotheses");
  draw_menu_button(3,"Number of Rule Cubes");
  draw_menu_button(4,"Derivation Score");
  draw_menu_button(5,"Non-Terminals");
  draw_menu_button(6,"Hypotheses");
}
var MENU_POSITION_HYPOTHESES = 6; // where is "Hypotheses" in the menu?

var current_menu_selection = 0;
var menu_processing = 0;
function click_menu( id, force_flag ) {
  if (!force_flag && (menu_processing || current_menu_selection == id)) {
    return;
  }
  menu_processing = 1;

  if (current_menu_selection == 1) { best_derivation(0); }
  if (current_menu_selection == 2) { unannotate_cells(); }
  if (current_menu_selection == 3) { unannotate_cells(); }
  if (current_menu_selection == 4) { unannotate_cells(); }
  if (current_menu_selection == 5) { remove_non_terminal_treemap(0); }
  if (current_menu_selection == 6 && SORT_OPTION != 3) { remove_hypothesis_overview(); }
  if (current_menu_selection == 6 && SORT_OPTION == 3) { remove_hypothesis_overview(); remove_non_terminal_treemap(); }
  if (current_menu_selection > 0) {
    highlight_menu_button( current_menu_selection, 0 );
  }

  if (id == 1) { best_derivation(1); }
  if (id == 2) { annotate_cells_with_hypcount(); }
  if (id == 3) { annotate_cells_with_rulecount(); }
  if (id == 4) { annotate_cells_with_derivation_score(); }
  if (id == 5) { non_terminal_treemap(); }
  if (id == 6 && SORT_OPTION != 3) { hypothesis_overview(); }
  if (id == 6 && SORT_OPTION == 3) { draw_hypothesis_sort_buttons(); non_terminal_treemap(1); }
  highlight_menu_button( id, 1 );
  current_menu_selection = id;
  menu_processing = 0;
}

function draw_menu_button( id, label ) {
  var button = document.createElementNS(xmlns,"rect");
  button.setAttribute("id", "button-" + id);
  button.setAttribute("x", 5);
  button.setAttribute("y", 5 + BUTTON_HEIGHT*(id-1));
  button.setAttribute("rx", 3);
  button.setAttribute("ry", 3);
  button.setAttribute("width", BUTTON_WIDTH-10);
  button.setAttribute("height", BUTTON_HEIGHT-10);
  //button.setAttribute("opacity",.75);
  button.setAttribute("fill", "#c0c0ff");
  button.setAttribute("stroke", "black");
  button.setAttribute("stroke-width", "1");
  button.setAttribute("onclick","click_menu(" + id + ",0);");
  chart.appendChild( button );

  var button_label = document.createElementNS(xmlns,"text");
  button_label.setAttribute("x", BUTTON_WIDTH/2);
  button_label.setAttribute("y", 4+BUTTON_HEIGHT/2 + BUTTON_HEIGHT*(id-1));
  button_label.setAttribute("style", "font-size: 12; font-family: Verdana, Arial;");
  button_label.setAttribute("text-anchor", "middle");
  button_label.setAttribute("pointer-events", "none");
  var content = document.createTextNode( label );
  button_label.appendChild( content );
  button_label.setAttribute("onclick","click_menu(" + id + ",0);");

  chart.appendChild( button_label );
}

function highlight_menu_button( id, on_off ) {
  var button = document.getElementById("button-" + id);
  if (on_off) {
    button.setAttribute("fill", "#8080ff");
  }
  else {
    button.setAttribute("fill", "#c0c0ff");
  }
}

// OPTIONS

function draw_options() {
  draw_option_button(0,1,"score");
  draw_option_button(0,2,"deriv.");
  draw_option_button(0,3,"id");
}

function draw_rule_options() {
  draw_option_button(1,1,"score");
  draw_option_button(1,2,"deriv.");
  draw_option_button(1,3,"zoom");
  highlight_option_button(1,1,show_hyp_score);
  highlight_option_button(1,2,show_derivation_score);
}

function draw_option_button( rule_option, id, label ) {
  var button = document.createElementNS(xmlns,"rect");
  button.setAttribute("id", (rule_option?"rule-":"") + "option-" + id);
  button.setAttribute("x", rule_option ? CHART_WIDTH-BUTTON_WIDTH-OPTION_WIDTH : BUTTON_WIDTH+10);
  button.setAttribute("y", 5 + OPTION_HEIGHT*(id-1));
  button.setAttribute("rx", 3);
  button.setAttribute("ry", 3);
  button.setAttribute("width", OPTION_WIDTH-10);
  button.setAttribute("height", OPTION_HEIGHT-10);
  button.setAttribute("fill", "#fdd017");
  button.setAttribute("stroke", "black");
  button.setAttribute("stroke-width", "1");
  button.setAttribute("onclick","click_"+(rule_option?"rule_":"")+"option(" + id + ");");
  chart.appendChild( button );

  var button_label = document.createElementNS(xmlns,"text");
  var distance_from_side = BUTTON_WIDTH+5+OPTION_WIDTH/2;
  button_label.setAttribute("id", (rule_option?"rule-":"") + "option-label-" + id);
  button_label.setAttribute("x", rule_option ? CHART_WIDTH-distance_from_side : distance_from_side);
  button_label.setAttribute("y", 4+OPTION_HEIGHT/2 + OPTION_HEIGHT*(id-1));
  button_label.setAttribute("style", "font-size: 12; font-family: Verdana, Arial;");
  button_label.setAttribute("text-anchor", "middle");
  button_label.setAttribute("pointer-events", "none");
  var content = document.createTextNode( label );
  button_label.appendChild( content );

  chart.appendChild( button_label );
}

function draw_sort_button( id, label ) {
  var BASE_X = 5 + id/SORT_BUTTON_COUNT * (BUTTON_WIDTH-10+5);
  var BASE_Y = -5 + BUTTON_HEIGHT * MENU_POSITION_HYPOTHESES;
  var WIDTH = ((BUTTON_WIDTH-10+5)/SORT_BUTTON_COUNT)-5;

  var button = document.createElementNS(xmlns,"rect");

  button.setAttribute("id", "sort-" + id);
  button.setAttribute("x", BASE_X);
  button.setAttribute("y", BASE_Y);
  button.setAttribute("width", WIDTH);
  button.setAttribute("height", BUTTON_HEIGHT-12);
  if (id==0) {
    button.setAttribute("fill", "none");
  }
  else {
    button.setAttribute("rx", 3);
    button.setAttribute("ry", 3);
    if (SORT_OPTION == id) {
      button.setAttribute("fill", "#6080ff");
    }
    else {
      button.setAttribute("fill", "#a0c0ff");
    }
    button.setAttribute("onclick","click_sort(" + id + ");");
    button.setAttribute("stroke", "black");
    button.setAttribute("stroke-width", "1");
  }
  chart.appendChild( button );

  var button_label = document.createElementNS(xmlns,"text");
  button_label.setAttribute("id", "sort-label-" + id);
  button_label.setAttribute("x", BASE_X + WIDTH/2);
  button_label.setAttribute("y", BASE_Y + 12);
  button_label.setAttribute("style", "font-size: 10; font-family: Verdana, Arial;");
  button_label.setAttribute("text-anchor", "middle");
  button_label.setAttribute("pointer-events", "none");
  var content = document.createTextNode( label );
  button_label.appendChild( content );

  chart.appendChild( button_label );
}

function click_sort( id ) {
  if (SORT_OPTION == 3) {
    remove_non_terminal_treemap(1);
  }
  remove_hypothesis_overview();

  SORT_OPTION = id;

  if (SORT_OPTION == 3) {
    non_terminal_treemap(1);
    draw_hypothesis_sort_buttons();
  }
  else {
    hypothesis_overview();
  }
}

var show_scores = 0;
var show_id = 0;
var show_derivation = 0;
function click_option( id ) {
  if (id == 1) {
    show_scores = !show_scores;
    highlight_option_button( 0, 1, show_scores );
  }
  if (id == 2) {
    show_derivation = !show_derivation;
    color_cells();
    highlight_option_button( 0, 2, show_derivation );
  }
  if (id == 3) {
    show_id = !show_id;
    highlight_option_button( 0, 3, show_id );
  }
  if (current_menu_selection > 0) {
    click_menu( current_menu_selection, 1 );
  }
}

var show_hyp_score = 0;
var show_derivation_score = 0;
function click_rule_option( id ) {
  if (id == 1) {
    show_hyp_score = !show_hyp_score;
    highlight_option_button( 1, 1, show_hyp_score );
  }
  if (id == 2) {
    show_derivation_score = !show_derivation_score;
    highlight_option_button( 1, 2, show_derivation_score );
  }
  if (id == 3) {
    if (ZOOM > 0) {
      ZOOM = 0;
    }
    else {
      ZOOM = 0.3;
    }
    assign_chart_coordinates();
    highlight_option_button( 1, 3, ZOOM );
  }
  draw_rule_cube(current_z_pos_string);
}

function highlight_option_button( rule_option, id, on_off ) {
  var button = document.getElementById((rule_option?"rule-":"") + "option-" + id);
  if (on_off) {
    button.setAttribute("fill", "#cd853f");
  }
  else {
    button.setAttribute("fill", "#fdd017");
  }
}

// INITIALIZE THE CHART

function draw_chart() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;

      // logical container
      var container = document.createElementNS(xmlns,"svg");
      container.setAttribute("id", "cell-container-" + from + "-" + to);
      chart.appendChild( container );
      var transform = document.createElementNS(xmlns,"g");
      transform.setAttribute("id", "cell-" + from + "-" + to);
      container.appendChild( transform );

      // yellow box for the cell
      var cell = document.createElementNS(xmlns,"rect");
      cell.setAttribute("id", "cellbox-" + from + "-" + to);
      cell.setAttribute("x", CELL_MARGIN);
      cell.setAttribute("y", CELL_MARGIN);
      cell.setAttribute("rx", CELL_BORDER);
      cell.setAttribute("ry", CELL_BORDER);
      cell.setAttribute("width", CELL_WIDTH-2*CELL_MARGIN);
      cell.setAttribute("height", CELL_HEIGHT-2*CELL_MARGIN);
      cell.setAttribute("opacity", .75);
      cell.setAttribute("fill", get_cell_color(from,to));
      cell.setAttribute("stroke", "black");
      cell.setAttribute("stroke-width", "1");
      cell.setAttribute("onmouseover","hover_cell(" + from + "," + to + ");")
      cell.setAttribute("onclick","click_cell(" + from + "," + to + ");")
      transform.appendChild( cell );
    }

    // box for the input word
    var input_box = document.createElementNS(xmlns,"rect");
    input_box.setAttribute("id", "inputbox-" + from);
    input_box.setAttribute("x", CELL_MARGIN+from*CELL_WIDTH);
    input_box.setAttribute("y", CELL_MARGIN+(length)*CELL_HEIGHT);
    input_box.setAttribute("rx", 3);
    input_box.setAttribute("ry", 3);
    input_box.setAttribute("width", CELL_WIDTH-2*CELL_MARGIN);
    input_box.setAttribute("height", CELL_HEIGHT/2);
    //cell.setAttribute("opacity", .75);
    input_box.setAttribute("fill", INPUT_REGULAR_COLOR);
    chart.appendChild( input_box );

    // input word
    input_word = document.createElementNS(xmlns,"text");
    input_word.setAttribute("id", "input-" + from);
    input_word.setAttribute("x", (from+0.5)*CELL_WIDTH);
    input_word.setAttribute("y", 10+(length+0.25)*CELL_HEIGHT);
    input_word.setAttribute("style", "font-size:18;");
    input_word.setAttribute("text-anchor", "middle");
    var content = document.createTextNode( input[from] );
    input_word.appendChild( content );
    chart.appendChild( input_word );
  }
  assign_chart_coordinates();
}

function assign_chart_coordinates() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;

      var x = from*CELL_WIDTH + (width-1)*CELL_WIDTH/2;
      var y = (length-width)*CELL_HEIGHT*(1-ZOOM);
      //alert("(x,y) = (" + length + "," + width + "), width = " + ZOOM + ", height = " + (1-ZOOM));
      var cell_width = CELL_WIDTH;
      var cell_height = CELL_HEIGHT;
      if (ZOOM > 0) {
        // adjust (x,y)
        if (width > ZOOM_WIDTH) { // above
        }
        else if (width == ZOOM_WIDTH) { // same level
          x = from*CELL_WIDTH*(1-ZOOM) + (width-1)*CELL_WIDTH*(1-ZOOM)/2
          if (from < ZOOM_FROM) { // left
            y += (CHART_HEIGHT-2*CELL_HEIGHT)*ZOOM/2;
          }
          else if (from == ZOOM_FROM) { // the focus
          }
          else { // right
            x += CHART_WIDTH*ZOOM;
            y += (CHART_HEIGHT-2*CELL_HEIGHT)*ZOOM/2;
          }
        }
        else { // below
          y += CHART_HEIGHT*ZOOM-CELL_HEIGHT*(1-ZOOM);
        }

        // adjust width and height
        if (width == ZOOM_WIDTH) { // same level
          cell_width *= 1-ZOOM;
          if (from < ZOOM_FROM) { // left
          }
          else if (from == ZOOM_FROM) { // the focus
            cell_width += CHART_WIDTH*ZOOM;
            cell_height = CHART_HEIGHT*ZOOM;
          }
        }
        else {
          cell_height *= 1-ZOOM;
        }
      }

      var container = document.getElementById("cell-container-" + from + "-" + to);
      container.setAttribute("x", x);
      container.setAttribute("y", y);
      var transform = document.getElementById("cell-" + from + "-" + to);
      transform.setAttribute("transform", "scale(" + (cell_width/CELL_WIDTH) + "," + (cell_height/CELL_HEIGHT) + ")");
    }
  }
}

function remove_chart() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      var container = document.getElementById("cell-" + from + "-" + to);
      chart.removeChild(container);
      var cell = document.getElementById("cellbox-" + from + "-" + to);
      chart.removeChild(cell);
    }
    var input_word = document.getElementById("input-" + from);
    chart.removeChild(input_word);
    var input_box = document.getElementById("inputbox-" + from);
    chart.removeChild(input_box);
  }
}

var current_from = -1;
var current_to;
function hover_cell( from, to ) {
  if (current_from >= 0) {
    highlight_input( current_from, current_to, 0)
  }
  highlight_input( from, to, 1)
  current_from = from;
  current_to = to;
}

function click_cell( from, to ) {
  if (from == current_rule_from && to == current_rule_to) {
    unshow_rules();
    current_rule_from = -1;
    ZOOM = 0;
  }
  else {
    show_rules( from, to );
    ZOOM_FROM = current_rule_from;
    ZOOM_TO = current_rule_to;
    ZOOM_WIDTH = to-from+1;
  }
  assign_chart_coordinates();
}

function highlight_input( from, to, on_off ) {
  for(var i=from; i<=to; i++) {
    var input_box = document.getElementById("inputbox-" + i);
    input_box.setAttribute("fill", on_off ? INPUT_HIGHLIGHT_COLOR : INPUT_REGULAR_COLOR);
  }
}

//
// VISUALIZATION OF CHART CELLS
//

// BASIC ANNOTATION WITH NUMBERS

function annotate_cells_with_hypcount() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      annotate_cell( from, to, cell_hyps[from][to].length, 20 )
    }
  }
}

function annotate_cells_with_rulecount() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      var rule_hash = Array();
      var rule_count = 0;
      for (var i=0;i<cell_hyps[from][to].length;i++) {
        var rule = get_rule( cell_hyps[from][to][i] );
        if (rule_hash[rule] === undefined) {
          rule_hash[rule] = 1;
          rule_count++;
        }
      }
      annotate_cell( from, to, rule_count, 20 )
    }
  }
}

function annotate_cells_with_derivation_score() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      var score = cell_derivation_score[from][to];
      if (score < -9e9) { score = "dead end"; }
      annotate_cell( from, to, score, 15 )
    }
  }
}

function annotate_cell( from, to, label, font_size ) {
  var cell_label_group = document.createElementNS(xmlns,"svg");
  cell_label_group.setAttribute("id", "celllabel-" + from + "-" + to);
  cell_label_group.setAttribute("x", 0);
  cell_label_group.setAttribute("y", -3);
  cell_label_group.setAttribute("pointer-events", "none");

  label = "" + label; // make it a string, if not already
  var line = label.split("<br>");
  for(var i=0; i<line.length; i++) {
    var cell_label = document.createElementNS(xmlns,"text");
    cell_label.setAttribute("id", "celllabelline-" + from + "-" + to + "-" + i);
    cell_label.setAttribute("x", CELL_WIDTH/2);
    cell_label.setAttribute("y", CELL_HEIGHT/2 + font_size * (1 - line.length/2 + i));
    cell_label.setAttribute("style", "font-size: " + font_size + ";font-family: Verdana, Arial;");
    cell_label.setAttribute("pointer-events", "none");
    cell_label.setAttribute("text-anchor", "middle");
    var content = document.createTextNode(line[i]);
    cell_label.appendChild( content );
    cell_label_group.appendChild( cell_label );
  }

  var cell = document.getElementById("cell-" + from + "-" + to);
  cell.appendChild( cell_label_group );
}

function unannotate_cells() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      unannotate_cell( from, to );
    }
  }
}

function unannotate_cell( from, to ) {
  var cell = document.getElementById("cell-" + from + "-" + to);
  var cell_label = document.getElementById("celllabel-" + from + "-" + to);
  cell.removeChild(cell_label);
}

// NON-TERMINAL TREEMAP

function non_terminal_treemap( with_hyps ) {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      // get nt counts
      var lhs = new Array();
      var lhs_list = new Array();
      for (var i=0;i<cell_hyps[from][to].length;i++) {
        var id = cell_hyps[from][to][i];
        var nt = edge[id][LHS];
        if (lhs[nt] === undefined) {
          lhs[nt] = 1;
          lhs_list.push(nt);
        }
        else {
          lhs[nt]++;
        }
      }
      // sort
      function sortByCount(a,b) {
        return lhs[b] - lhs[a];
      }
      lhs_list.sort(sortByCount);
      treemap_squarify( from, to, lhs_list, lhs, cell_hyps[from][to].length, with_hyps );
    }
  }
}

function remove_non_terminal_treemap()  {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      var cell = document.getElementById("cell-" + from + "-" + to);
      var done = false;
      var j=0;
      while(!done) {
        var rect = document.getElementById("rect-" + from + "-" + to + "-" + j);
        if (rect == null) {
          done = true;
        }
        else {
          cell.removeChild(rect);
          var rect_label = document.getElementById("rect-label-" + from + "-" + to + "-" + j);
          if (rect_label != null) {
            cell.removeChild(rect_label);
          }
        }
        j++;
      }
    }
  }
}

function treemap_cell( from, to, label, count, total, with_hyps ) {
  var cell = document.getElementById("cell-" + from + "-" + to);
  var x = CELL_MARGIN;
  var y = CELL_MARGIN;
  var width = CELL_WIDTH - 2*CELL_MARGIN;
  var height = CELL_HEIGHT - 2*CELL_MARGIN;
  // TO DO
  for (var i=0;i<label.length;i++) {
    var rect = document.createElementNS(xmlns,"rect");
    rect.setAttribute("id", "-" + id);
    rect.setAttribute("x", x);
    rect.setAttribute("y", y);
    rect.setAttribute("width", width * count[label[i]] / total);
    rect.setAttribute("height", height);
    rect.setAttribute("opacity",.75);
    rect.setAttribute("fill", "#c0c0ff");
    rect.setAttribute("stroke", "black");
    rect.setAttribute("stroke-width", "0.5");
    rect.setAttribute("onclick","click_menu(" + id + ",0);")
    cell.appendChild( rect );
    x += width * count[label[i]] / total;
  }
}

function treemap_squarify( from, to, label, count, total, with_hyps ) {
  var cell = document.getElementById("cell-" + from + "-" + to);
  // conversion of counts to area
  var width = CELL_WIDTH - 2*CELL_MARGIN;
  var height = CELL_HEIGHT - 2*CELL_MARGIN;
  var area_factor = width*height / total;
  var scale_factor = Math.sqrt( area_factor );
  width /= scale_factor;
  height /= scale_factor;
  var offset_x = 0;
  var offset_y = 0;

  // main algorithm
  var extend = Math.min(width,height);
  var current_worst = squarify_worst( label, count, 0, 0, extend );
  var start = 0;
  for(var i=1; i<=label.length; i++) {
    // add to sequence or start new one?
    var next_worst = 0;
    if (i != label.length) {
      next_worst = squarify_worst( label, count, start, i, extend );
    }
    if (i != label.length && current_worst >= next_worst) {
      current_worst = next_worst; // ... and keep going
    }
    else {
      // compute rectangles...
      var sum = 0;
      for(var j=start; j<i; j++) {
        sum += count[label[j]];
      }
      var cum_x = 0;
      var cum_y = 0;
      var remaining_ratio = sum / ((width - offset_x) * (height - offset_y));
      var this_width  = (width  - offset_x) * remaining_ratio;
      var this_height = (height - offset_y) * remaining_ratio;
      var adding_on_left = height-offset_y < width-offset_x;
      for(var j=start; j<i; j++) {
        if (adding_on_left) { this_height = count[label[j]] / sum * (height - offset_y); }
        else                {  this_width = count[label[j]] / sum *  (width - offset_x); }
        // rectangle
        var rect = document.createElementNS(xmlns,"rect");
        rect.setAttribute("id", "rect-" + from + "-" + to + "-" + j);
        rect.setAttribute("x", CELL_MARGIN + (offset_x + cum_x) * scale_factor);
        rect.setAttribute("y", CELL_MARGIN + (offset_y + cum_y) * scale_factor);
        rect.setAttribute("width", this_width * scale_factor);
        rect.setAttribute("height", this_height * scale_factor);
        rect.setAttribute("fill-opacity",0);
        rect.setAttribute("pointer-events", "none");
        rect.setAttribute("stroke", "black");
        rect.setAttribute("stroke-width", "0.5");
        cell.appendChild( rect );
        // hypotheses
        if (with_hyps) {
          var hyp_list = Array();
          for(var k=0; k<cell_hyps[from][to].length; k++) {
            var id = cell_hyps[from][to][k];
            var nt = edge[id][LHS];
            if (nt == label[j]) {
              hyp_list.push( id );
            }
          }
          hypothesis_in_rect( this_width * scale_factor - 2,
                              this_height * scale_factor - 2,
                              CELL_MARGIN + (offset_x + cum_x) * scale_factor + 1,
                              CELL_MARGIN + (offset_y + cum_y) * scale_factor + 1,
                              cell, hyp_list );
        }
        // label
        var font_size = Math.min( Math.round(this_width * scale_factor / label[j].length * 1.3),
                                  Math.round(this_height * scale_factor ));
        if (font_size > 20) { font_size = 20; }
        if (font_size >= 3) {
          var rect_label = document.createElementNS(xmlns,"text");
          rect_label.setAttribute("id", "rect-label-" + from + "-" + to + "-" + j);
          rect_label.setAttribute("x", CELL_MARGIN + (offset_x + cum_x + this_width/2) * scale_factor);
          rect_label.setAttribute("y", CELL_MARGIN + (offset_y + cum_y + this_height/2) * scale_factor + font_size/2 -2);
          rect_label.setAttribute("style", "font-size: " + font_size + "; font-family: Verdana, Arial; font-weight:900;");
          rect_label.setAttribute("fill", "#00f");
          rect_label.setAttribute("opacity", .3);
          rect_label.setAttribute("text-anchor", "middle");
          rect_label.setAttribute("pointer-events", "none");
          var content = document.createTextNode( label[j] );
          rect_label.appendChild( content );
          cell.appendChild( rect_label );
        }
        if (adding_on_left) { cum_y += this_height; }
        else                { cum_x += this_width; }
      }
      if (adding_on_left) { offset_x += this_width; }
      else                { offset_y += this_height; }

      // move to next sequence
      if (i != label.length) {
        start = i;
        extend = Math.min( width-offset_x, height-offset_y );
        current_worst = squarify_worst( label, count, i, i, extend );
      }
    }
  }
}

function squarify_worst( label, count, start, end, extend ) {
  var sum = 0;
  for(var i=start; i<=end; i++) {
    sum += count[label[i]];
  }
  var max_ratio = 0;
  for(var i=start; i<=end; i++) {
    var ratio = count[label[i]] * extend*extend /sum/sum;
    if (ratio < 1) { ratio = 1/ratio; }
    max_ratio = Math.max( ratio, max_ratio );
  }
  return max_ratio;
}

// HIGHLIGHT BEST DERIVATION

function best_derivation( on_off ) {
  var best_score = -9e9;
  var best_id = -1;
  for (var i=0;i<cell_hyps[0][length-1].length;i++) {
    id = cell_hyps[0][length-1][i];
    if (edge[id][HYP_SCORE] > best_score) {
      best_score = edge[id][HYP_SCORE];
      best_id = id;
    }
  }
  best_derivation_recurse( best_id, on_off, -1, -1, 0 );
}

function best_derivation_recurse( id, on_off, parent_from, parent_to, child_pos ) {
  var from = edge[id][FROM];
  var to = edge[id][TO];

  // highlight cell and annotate with rule
  highlight_cell( from, to, on_off );
  if (on_off) {
    var annotation = "";
    if (show_id) { annotation += id + "<br>";  }
    annotation += edge[id][LHS] + "\u2192";
    annotation += edge[id][OUTPUT];
    if (show_scores) { annotation += "<br>" + edge[id][HYP_SCORE];  }
    annotate_cell( from, to, annotation, 10 );
  }
  else {
    unannotate_cell( from, to );
  }

  // highlight hyp
  highlight_hyp( id, on_off );

  // arrow to parent
  if (parent_from >= 0) {
    if (on_off) {
      make_arrow( id, parent_from, parent_to, from, to, 0, child_pos );
    }
    else {
      var arrow = document.getElementById("arrow-" + id);
      chart.removeChild(arrow);
    }
  }

  var child_order = Array();
  if (edge[id][ALIGNMENT] != "") {
    var alignment = edge[id][ALIGNMENT].split(" ");
    // sorting: array position is source nonterminal pos
    alignment.sort();
    // alignment target sympol pos -> source nonterminal pos
    var reversed_alignment = Array();
    for(var i=0; i<alignment.length; i++) {
      var source_target = alignment[i].split("-");
      reversed_alignment.push(source_target[1]+"-"+i);
    }
    // sorting by symbols pos: array position is nonterminal pos
    reversed_alignment.sort();
    // mapping child -> target nonterminal pos
    for(var i=0; i<reversed_alignment.length; i++) {
      var target_source = reversed_alignment[i].split("-");
      child_order[target_source[1]] = i;
    }
  }

  // recurse
  var covered = new Array;
  var children = get_children( id );
  for(var c=0;c<children.length;c++) {
    var child = children[c];
    for( var i=edge[child][FROM]; i<=edge[child][TO]; i++ ) {
      covered[i] = 1;
    }
    best_derivation_recurse( child, on_off, from, to, children.length == 1 ? 0.5 : child_order[c]/(children.length-1.0) );
  }

  // arrows to words
  for( var i=from; i<=to; i++ ) {
    if (covered[i] === undefined) {
      if (on_off) {
        make_arrow( "word-" + i, from, to, i, i, 1, 0.5 );
      }
      else {
        var arrow = document.getElementById("arrow-word-" + i);
        chart.removeChild(arrow);
      }
    }
  }
}

function make_arrow( id, parent_from, parent_to, from, to, word_flag, position ) {
  var arrow = document.createElementNS(xmlns,"line");
  arrow.setAttribute("id", "arrow-" + id);

  var parent = get_cellbox_coordinates( parent_from, parent_to );
  arrow.setAttribute("x1", parent.x+(0.5+position)/2*CELL_WIDTH*parent.scale_x);
  arrow.setAttribute("y1", parent.y+(CELL_HEIGHT-CELL_MARGIN)*parent.scale_y);

  if (word_flag) {
    arrow.setAttribute("x2", (from+.5)*CELL_WIDTH);
    arrow.setAttribute("y2", CELL_MARGIN+length*CELL_HEIGHT);
  }
  else {
    var child = get_cellbox_coordinates( from, to );
    arrow.setAttribute("x2", child.x+child.scale_x*CELL_WIDTH/2);
    arrow.setAttribute("y2", child.y+child.scale_y*CELL_MARGIN+word_flag*(CELL_HEIGHT+5));
  }

  arrow.setAttribute("stroke", word_flag ? "#808080" : "#008000");
  arrow.setAttribute("stroke-width", "3");
  chart.appendChild( arrow );
}

function get_cellbox_coordinates(from, to) {
  var container = document.getElementById("cell-container-" + from + "-" + to);
  var transform = document.getElementById("cell-" + from + "-" + to);
  var scale = transform.getAttribute("transform").split(/[\(\),]/g);
  var scale_x = scale[1];
  var scale_y = scale[2];
  return { x: Math.round(container.getAttribute("x")),
           y: Math.round(container.getAttribute("y")),
           scale_x: scale[1],
           scale_y: scale[2]
         }
}

function highlight_cell( from, to, on_off ) {
  var cell = document.getElementById("cellbox-" + from + "-" + to);
  cell.setAttribute("fill", on_off ? CELL_HIGHLIGHT_COLOR : get_cell_color(from,to) );
}

function color_cells() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from+width-1;
      highlight_cell(from,to,0);
    }
  }
}

function get_cell_color( from, to ) {
  if (!show_derivation) {
    return CELL_REGULAR_COLOR;
  }
  var score_diff = cell_derivation_score[from][to] - cell_derivation_score[0][length-1];
  var dec = 128 - (score_diff*8);
  if (dec>255) { dec = 255; }
  var color = Math.round(dec).toString(16);
  return "#ffff"+color;
}

function get_children( id ) {
  if (edge[id][CHILDREN] == "") {
    return [];
  }
  return edge[id][CHILDREN].split(" ");
}

// OVERVIEW ALL HYPOTHESES
function hypothesis_overview() {
  for (var from=0;from<length;from++) {
    for(var width=1; width<=length-from; width++) {
      var to = from + width - 1;
      hypothesis_overview_cell( from, to );
    }
  }
  draw_hypothesis_sort_buttons();
}

function draw_hypothesis_sort_buttons() {
  // draw sort buttons
  draw_sort_button(0,"sort by");
  draw_sort_button(1,"id");
  draw_sort_button(2,"score");
  draw_sort_button(3,"lhs");
}
var SORT_BUTTON_COUNT = 4; // how many in total (incl. "sort by")?

function hypothesis_overview_cell( from, to ) {
  var width = CELL_WIDTH-2*(CELL_BORDER+CELL_MARGIN+CELL_PADDING);
  var height = CELL_HEIGHT-2*(CELL_BORDER+CELL_MARGIN+CELL_PADDING);
  var cell = document.getElementById("cell-" + from + "-" + to);
  hypothesis_in_rect( width, height, CELL_BORDER+CELL_MARGIN+CELL_PADDING, CELL_BORDER+CELL_MARGIN+CELL_PADDING, cell, cell_hyps[from][to] );
}

function hypothesis_in_rect( width, height, offset_x, offset_y, parent_element, hyp_list ) {

  // diameter, based on perfect fill
  var diameter = Math.sqrt( width * height / hyp_list.length );
  // if it does not fit the discrete objects, increase
  while( Math.floor( width/diameter ) * Math.floor( height/diameter ) < hyp_list.length ) {
    diameter = Math.max(  width / Math.ceil(  width/diameter + 0.0001 ),   // fitting one more in row
                         height / Math.ceil( height/diameter + 0.0001 ) ); // fitting one more in column
  }
  var row_size = Math.floor( width / diameter );
  var column_size = Math.floor( height / diameter );

  // sort hypotheses
  function sortByScore(a,b) {
    return edge[b][HYP_SCORE] - edge[a][HYP_SCORE];
  }
  function sortById(a,b) {
    return a-b;
  }
  if (SORT_OPTION == 1) {
    hyp_list.sort(sortById);
  }
  else {
    hyp_list.sort(sortByScore);
  }

  // draw hypothesis
  var x=0
  var y=0;
  var column = 0;

  for (var i=0; i<hyp_list.length;i++) {
    id = hyp_list[i];

    //alert("adding circle (" + (x + diameter/2) + "," + (y + diameter/2) + ") - " + (diameter/2) );
    var hyp = document.createElementNS(xmlns,"circle");
    hyp.setAttribute("id", "hyp-" + id);
    hyp.setAttribute("cx", x + diameter/2 + offset_x);
    hyp.setAttribute("cy", y + diameter/2 + offset_y);
    hyp.setAttribute("r", diameter/2);
    hyp.setAttribute("fill", hyp_color(id, 0));
    hyp.setAttribute("onmouseover","hover_hyp(" + id + ");")
    hyp.setAttribute("onmouseout","unhover_hyp(" + id + ");")
    parent_element.appendChild( hyp );

    x += diameter;
    if (++column >= row_size) {
      column = 0;
      y += diameter;
      x = 0;
    }
  }
}

function remove_hypothesis_overview() {
  for (var id in edge) {
    var cell = document.getElementById("cell-" + edge[id][FROM] + "-" + edge[id][TO]);
     var hyp = document.getElementById("hyp-" + id);
    cell.removeChild(hyp);
  }
  // remove sort buttons
  for(var i=0; i<4; i++) {
    var old = document.getElementById("sort-" + i);
    chart.removeChild( old );
    var old = document.getElementById("sort-label-" + i);
    chart.removeChild( old );
  }
}

function hover_hyp( id ) {
  best_derivation_recurse( id, 1, -1, -1 );
}

function unhover_hyp( id ) {
  best_derivation_recurse( id, 0, -1, -1 );
}

function hover_rule_hyp( id ) {
  highlight_rule_hyp( id, 1 );
  if (current_menu_selection == 1) {
    best_derivation( 0 );
  }
  if (current_menu_selection <= 2) {
    best_derivation_recurse( id, 1, -1, -1 );
  }
}

function unhover_rule_hyp( id ) {
  highlight_rule_hyp( id, 0 );
  if (current_menu_selection <= 2) {
    best_derivation_recurse( id, 0, -1, -1 );
  }
  if (current_menu_selection == 1) {
    best_derivation( 1 );
  }
}

function highlight_hyp( id, on_off ) {
  var hyp = document.getElementById("hyp-" + id);
  if (hyp == null) { return; }
  hyp.setAttribute("fill", hyp_color(id, on_off));
}

function highlight_rule_hyp( id, on_off ) {
  var hyp = document.getElementById("rule-hyp-" + id);
  if (hyp == null) { return; }
  hyp.setAttribute("fill", rule_hyp_color(id, on_off));
}

function hyp_color( id, on_off ) {
  if (on_off) {
    var color = "#ff0000";
    if (edge[id][RECOMBINED]>0) { color = "#808080"; }
    else if (id in reachable) { color = "#00c000"; }
    return color;
  }
  var color = "#ffc0c0";
  if (edge[id][RECOMBINED]>0) { color = "#c0c0c0"; }
  else if (id in reachable) { color = "#80ff80"; }
  return color;
}

// RULES

function get_rule( id ) {
  // get non-terminal labels
  if (edge[id] === undefined) { alert("unknown edge "+id); return ""; }
  var output = edge[id][OUTPUT].split(" ");
  var alignment = edge[id][ALIGNMENT].split(" ");
  alignment.sort();
  var nt_label = Array();
  for(var i=0;i<alignment.length;i++) {
    var source_target = alignment[i].split("-");
    nt_label.push(output[source_target[1]]);
  }

  var rule = edge[id][LHS]+"\u2192";
  var children = get_children(id);
  var pos = edge[id][FROM];
  for (var i=0; i<children.length; i++) {
    if (pos != edge[id][FROM]) { rule += " "; }
    var child = children[i];
    for(;pos<edge[child][FROM];pos++) {
      rule += (input[pos].length <= 10) ? input[pos] : input[pos].substr(0,8) + ".";
      rule += " ";
    }
    rule += nt_label[i];
    rule += (edge[child][FROM] == edge[child][TO]) ?
      "[" + edge[child][FROM] + "]" :
      "[" + edge[child][FROM] + "-" + edge[child][TO] + "]";
    pos = edge[child][TO]+1;
  }
  for(;pos<=edge[id][TO];pos++) {
    if (pos != edge[id][FROM]) { rule += " "; }
    rule += (input[pos].length <= 10) ? input[pos] : input[pos].substr(0,8) + ".";
  }

  return rule;
}

var rule_list;
var edge2rule;
var current_rule_from = -1;
var current_rule_to;
var RULE_HEIGHT;
var RULE_FONT_SIZE;
var best_hyp_score;
var best_derivation_score;
function show_rules( from, to ) {
  unshow_rules();
  var cell = document.getElementById("cellbox-" + from + "-" + to);
  cell.setAttribute("stroke", "#800000");
  cell.setAttribute("stroke-width", "3");
  current_rule_from = from;
  current_rule_to = to;

  best_hyp_score = -9e9;
  best_derivation_score = cell_derivation_score[from][to];

  var rule_hash = Array();
  var rule_count = Array();
  rule_list = Array();
  edge2rule = Array();
  for (var i=0;i<cell_hyps[from][to].length;i++) {
    var id = cell_hyps[from][to][i];
    var rule = get_rule( id );
    if (rule_hash[rule] === undefined) {
      rule_hash[rule] = rule_list.length;
      rule_count[rule_list.length] = 1;
      rule_list.push(rule);
    }
    else {
      rule_count[rule_hash[rule]]++;
    }
    edge2rule[id] = rule_hash[rule];

    if (edge[id][HYP_SCORE] > best_hyp_score) {
      best_hyp_score = edge[id][HYP_SCORE];
    }
  }
  function sortByRuleCount( a, b ) {
    return rule_count[rule_hash[b]] - rule_count[rule_hash[a]];
  }
  rule_list = rule_list.sort(sortByRuleCount);

  RULE_HEIGHT = 15;
  RULE_FONT_SIZE = 11;
  // squeeze if too many rules
  if (rule_list.length * RULE_HEIGHT > (CHART_HEIGHT-50)) {
    var factor = (CHART_HEIGHT-50)/rule_list.length/RULE_HEIGHT;
    RULE_HEIGHT = Math.floor( RULE_HEIGHT * factor );
    RULE_FONT_SIZE = Math.ceil( RULE_FONT_SIZE * factor );
  }

  draw_rule_options();
  for(var i=-1; i<rule_list.length; i++) {
    draw_rule(from, to, i);
  }
  if (rule_list.length > 0) {
    click_rule( from, to, 0 );
  }
}

function unshow_rules() {
  if (current_rule_from >= 0) {
    var cell = document.getElementById("cellbox-" + current_rule_from + "-" + current_rule_to);
    cell.setAttribute("stroke", "black");
    cell.setAttribute("stroke-width", "1");
  }
  var finished = 0;
  for(var i=-1; !finished; i++) {
    var old = document.getElementById("rule-" + i);
    if (old != null) { chart.removeChild( old ); }
    else { finished = 1; }
  }
  var old = document.getElementById("rule-message");
  if (old != null) { chart.removeChild( old ); }
  old = document.getElementById("rule-cube");
  if (old != null) { chart.removeChild( old ); }
  finished = 0;
  for(var i=1; !finished; i++) {
    var old = document.getElementById("rule-option-" + i);
    if (old != null) {
      chart.removeChild( old );
      var old = document.getElementById("rule-option-label-" + i);
      chart.removeChild( old );
    }
    else { finished = 1; }
  }
}

function draw_rule( from, to, rule_id ) {
  var rule_label = document.createElementNS(xmlns,"text");
  rule_label.setAttribute("id", "rule-" + rule_id);
  rule_label.setAttribute("x", CHART_WIDTH-120);
  rule_label.setAttribute("y", 10 + RULE_HEIGHT*(rule_id+1));
  rule_label.setAttribute("text-anchor", "middle");
  if (rule_id>-1) {
    rule_label.setAttribute("style", "font-size: "+RULE_FONT_SIZE+"; font-family: Verdana, Arial;");
    rule_label.setAttribute("onclick","click_rule(" + from + "," + to + "," + rule_id + ");");
    var content = document.createTextNode( rule_list[rule_id] );
    rule_label.appendChild( content );
  }
  else {
    rule_label.setAttribute("style", "font-size: "+(RULE_FONT_SIZE-2)+"; font-family: Verdana, Arial; font-weight: bold;");
    var content = document.createTextNode( rule_list.length == 0 ? "NO RULES" : "RULES" );
    rule_label.appendChild( content );
  }
  chart.appendChild( rule_label );
}

function draw_rule_message( message ) {
  var old = document.getElementById("rule-message");
  if (old != null) { chart.removeChild( old ); }

  var rule_message_group = document.createElementNS(xmlns,"svg");
  rule_message_group.setAttribute("id","rule-message");
  rule_message_group.setAttribute("x", 0);
  rule_message_group.setAttribute("y", 250);
  var line = message.split("<br>");
  for(var i=0;i<line.length;i++) {
    var line_label = document.createElementNS(xmlns,"text");
    line_label.setAttribute("id", "rule-message-line" + id);
    line_label.setAttribute("x", 0);
    line_label.setAttribute("y", RULE_HEIGHT*(i+1));
    line_label.setAttribute("style", "font-size: 9; font-family: Verdana, Arial;");
    var content = document.createTextNode( line[i] );
    line_label.appendChild( content );
    rule_message_group.appendChild( line_label );
  }
  chart.appendChild( rule_message_group );
}

var output_list;
var children_list;
var current_edge;
var current_rule_id = -1;
var axis;
var dimension_order;
var RULE_CUBE_HYP_SIZE;
var RULE_CUBE_FONT_SIZE;
function click_rule( from, to, rule_id ) {
  // highlight current rule
  if (current_rule_id>=0) {
    var rule_label = document.getElementById("rule-"+current_rule_id);
    rule_label.setAttribute("style", "font-size: "+RULE_FONT_SIZE+"; font-family: Verdana, Arial;");
  }
  var rule_label = document.getElementById("rule-"+rule_id);
  rule_label.setAttribute("style", "font-size: "+RULE_FONT_SIZE+"; font-family: Verdana, Arial; font-weight: bold;");
  current_rule_id = rule_id;

  // first get all the data
  output_list = Array();
  var output_hash = Array();
  children_list = Array();
  var children_hash = Array();
  current_edge = Array();
  for (var i=0;i<cell_hyps[from][to].length;i++) {
    var id = cell_hyps[from][to][i];
    var rule = get_rule( id );
    if (rule == rule_list[rule_id]) {
      current_edge.push( id );
      // create index for output (target rhs)
      var output = edge[id][OUTPUT]+"|"+edge[id][HEURISTIC_RULE_SCORE];
      if (output_hash[output] === undefined) {
        output_hash[output] = output_list.length;
        output_list.push(output);
      }
      // create index for children
      var children = get_children( id );
      for(var j=0;j<children.length;j++) {
        // init children indices if needed
        if (j > children_list.length-1) {
          children_hash.push([]);
          children_list.push([]);
        }
        // build index
        var child = ""+children[j];
        if (children_hash[j][child] === undefined) {
          children_hash[j][child] = children_list[j].length;
          children_list[j].push(parseInt(child));
        }
      }
    }
  }

  // sort
  function sortBySecond(a,b) {
    asplit = a.split("|");
    bsplit = b.split("|");
    return bsplit[1] - asplit[1];
  }
  output_list = output_list.sort(sortBySecond);

  function sortHypByScore(a,b) {
    return edge[b][HYP_SCORE] - edge[a][HYP_SCORE];
  }
  for(var i=0;i<children.length;i++) {
    children_list[i].sort(sortHypByScore);
  }

  // select dimensions of rule cube
  axis = Array();
  axis.push(output_list);
  for(var i=0;i<children_list.length;i++) {
    axis.push(children_list[i]);
  }

  // determine order
  var dimension_size = Array();
  for(var i=0;i<axis.length;i++) {
    dimension_size.push(i+"|"+(axis[i].length - i/10));
  }
  dimension_size.sort(sortBySecond);
  dimension_order = Array();
  for(var i=0;i<dimension_size.length;i++) {
    id_size = dimension_size[i].split("|");
    dimension_order.push(id_size[0]);
  }

  var z_pos = Array();
  for(i=2;i<axis.length;i++) { z_pos.push(0); }
  var z_pos_string = z_pos.join(",");
  draw_rule_cube(z_pos.join(","));
}

var current_z_pos_string = "";
function draw_rule_cube(z_pos_string) {
  current_z_pos_string = z_pos_string;
  var z_pos = Array();
  if (z_pos_string != "") {
    z_pos = z_pos_string.split(",");
  }

  // draw rube cube
  var old = document.getElementById("rule-cube");
  if (old != null) { chart.removeChild( old ); }

  // dimensions of the 2x2 view
  var max_length = axis[dimension_order[0]].length;
  //if (axis.length>1 && axis[dimension_order[1]].length > max_length) {
  //  max_length = axis[dimension_order[1]].length;
  //}

  // space for additional dimensions
  var z_dimension_length = 0;
  if (dimension_order.length > 2) {
    z_dimension_length = -2;
    for(var i=2; i<dimension_order.length; i++ ) {
      z_dimension_length += axis[dimension_order[i]].length + 2;
      max_length += axis[dimension_order[i]].length + 2;
    }
  }
  //if (dimension_order.length > 2) {
  //  for(var i=2; i<dimension_order.length; i++ ) {
  //    if (axis[dimension_order[i]].length > max_z_dimension_length) {
  //      max_z_dimension_length = axis[dimension_order[i]].length;
  //    }
  //  }
  //}
  //if (max_z_dimension_length > 10) {
  //  max_z_dimension_length = 10;
  //}
  //var y_length = axis[dimension_order[0]].length;
  //if (max_z_dimension_length > 0) {
  //  y_length += max_z_dimension_length + 2;
  //  if (y_length > max_length) {
  //    max_length = y_length;
  //  }
  //}

  // calculate table cell and font size
  if (max_length+8 <= CHART_HEIGHT/15) {
    RULE_CUBE_HYP_SIZE = 15;
    RULE_CUBE_FONT_SIZE = 11;
  }
  else if (max_length+8 > CHART_HEIGHT/9) {
    RULE_CUBE_HYP_SIZE = 9;
    RULE_CUBE_FONT_SIZE = 7;
  }
  else {
    RULE_CUBE_HYP_SIZE = CHART_HEIGHT/(max_length+8);
    RULE_CUBE_FONT_SIZE = (RULE_CUBE_HYP_SIZE * 12/15).toFixed(0);
  }
  var Z_HEIGHT = 0;
  if (dimension_order.length > 2) {
    Z_HEIGHT = (z_dimension_length + 2) * RULE_CUBE_HYP_SIZE;
  }

  var rule_cube = document.createElementNS(xmlns,"svg");
  rule_cube.setAttribute("id","rule-cube");
  rule_cube.setAttribute("x", CHART_WIDTH - 30);
  rule_cube.setAttribute("y", 0);
  chart.appendChild( rule_cube );

  // draw y axis
  var label = get_rule_axis_name(dimension_order[0]);
  draw_rule_row(-1,label);
  for(var y=0; y<axis[dimension_order[0]].length; y++) {
    var label = get_rule_axis_label(dimension_order[0], y);
    draw_rule_row(y,label);
  }
  if (axis[dimension_order[0]].length > (CHART_HEIGHT-Z_HEIGHT)/9-10) {
    draw_rule_row(Math.ceil(CHART_HEIGHT/9-10),"(more, "+axis[dimension_order[0]].length+" total)");
  }

  // draw x axis
  if (axis.length > 1) {
    var label = get_rule_axis_name(dimension_order[1]);
    draw_rule_column(-1,label);
    for(var x=0; x<axis[dimension_order[1]].length && x<CHART_HEIGHT/9-10; x++) {
      var label = get_rule_axis_label(dimension_order[1], x);
      draw_rule_column(x,label);
    }
    if (axis[dimension_order[1]].length > CHART_HEIGHT/9-10) {
      draw_rule_column(Math.ceil(CHART_HEIGHT/9-10),"(more, "+axis[dimension_order[1]].length+" total)");
    }
  }

  // draw hyps
  for(var y=0; y<axis[dimension_order[0]].length && y<(CHART_HEIGHT-Z_HEIGHT)/9-10; y++) {
    if (axis.length == 1) {
      var hyp = find_hyp_by_rule([y],dimension_order);
      draw_rule_hyp(0,y,hyp);
    }
    else {
      for(var x=0; x<axis[dimension_order[1]].length && x<CHART_HEIGHT/9-10; x++) {
        var hyp = find_hyp_by_rule([y,x].concat(z_pos),dimension_order);
        draw_rule_hyp(x,y,hyp);
      }
    }
  }


  // draw z-axes
  var pos_offset = axis[dimension_order[0]].length+2;
  for(var z=2;z<dimension_order.length;z++) {
    var label = get_rule_axis_name(dimension_order[z]);
    draw_rule_z(z-2,dimension_order.length-2, z_pos, -1, pos_offset, label);
    for(var i=0;i<axis[dimension_order[z]].length && i<z_dimension_length; i++) {
      var label = get_rule_axis_label(dimension_order[z], i);
      draw_rule_z(z-2,dimension_order.length-2, z_pos, i, pos_offset, label);
    }
    pos_offset += axis[dimension_order[z]].length+2;
  }

  // report summary statistics
  var message = output_list.length + " output phrases";
  message += "<br>DEBUG: " + axis.length;
  message += "<br>" + dimension_order.length;
  for(var i=0;i<children_list.length;i++) {
    message += "<br>" + children_list[i].length + " hyps for NT" + (i+1);
  }
  //draw_rule_message(message);
}

function find_hyp_by_rule(position, dimension_order) {
  for(var e=0;e<current_edge.length;e++) {
    var id = current_edge[e];
    var children = get_children( id );
    var match = 1;
    for(var p=0; p<position.length; p++) {
      if (dimension_order[p] == 0) {
        if (output_list[position[p]] != edge[id][OUTPUT]+"|"+edge[id][HEURISTIC_RULE_SCORE]) {
          match = 0;
        }
      }
      else {
        var nt_number = dimension_order[p]-1;
        if (children_list[nt_number][position[p]] != children[nt_number]) {
          match = 0;
        }
      }
    }
    if (match) { return id; }
  }
  return -1;
}

function get_rule_axis_label( dimension, i ) {
  if (dimension == 0) {
    var output_score = output_list[i].split("|");
    var score = 1 * output_score[1];
    return output_score[0]+" "+score.toFixed(1);
  }
  var id = children_list[dimension-1][i];
  return get_display_output( id ) + " " + edge[id][HYP_SCORE].toFixed(1);
}

function get_rule_axis_name( dimension ) {
  if (dimension == 0) {
    return "TARGET";
  }
  return "NT" + dimension;
}


function get_display_output( id ) {
  var output_string = get_full_output( id );
  var output = output_string.split(" ");
  if (output.length <= 2) {
    return output_string;
  }
  else {
    return output[0] + "\u203B" + output[output.length-1];
  }
}

function get_full_output( id ) {
  var output = edge[id][OUTPUT].split(" ");

  var alignment = edge[id][ALIGNMENT].split(" ");
  var children = get_children( id );
  alignment.sort();
  var nonterminal = Array();
  for(var i=0; i<alignment.length; i++) {
    var source_target = alignment[i].split("-");
    nonterminal[source_target[1]] = children[i];
  }

  var full_output = "";
  for(var i=0;i<output.length;i++) {
    if (nonterminal[i] === undefined) {
      full_output += " " + output[i];
    }
    else {
      full_output += " " + get_full_output( nonterminal[i] );
    }
  }
  return full_output.substr(1);
}

function draw_rule_row( pos, label ) {
  var rule_label = document.createElementNS(xmlns,"text");
  rule_label.setAttribute("id", "rule-row-" + pos);
  rule_label.setAttribute("y", RULE_CUBE_FONT_SIZE*10 + RULE_CUBE_HYP_SIZE*pos);
  if (pos>=0) {
    rule_label.setAttribute("style", "font-size: "+RULE_CUBE_FONT_SIZE+"; font-family: Verdana, Arial;");
    rule_label.setAttribute("x", RULE_CUBE_FONT_SIZE*10+5);
  }
  else {
    rule_label.setAttribute("style", "font-size: "+(RULE_CUBE_FONT_SIZE-2)+"; font-family: Verdana, Arial; font-weight: bold;");
    rule_label.setAttribute("x", RULE_CUBE_FONT_SIZE*10-30);
  }
  rule_label.setAttribute("text-anchor", "end");
  var content = document.createTextNode( label );
  rule_label.appendChild( content );
  var rule_cube = document.getElementById("rule-cube");
  rule_cube.appendChild( rule_label );
}

function draw_rule_column( pos, label ) {
  var rule_label = document.createElementNS(xmlns,"text");
  rule_label.setAttribute("id", "rule-column-" + pos);
  rule_label.setAttribute("x", RULE_CUBE_FONT_SIZE*10 -3 + RULE_CUBE_HYP_SIZE*(1+pos) );
  rule_label.setAttribute("y", RULE_CUBE_FONT_SIZE*10 -12);
  rule_label.setAttribute("transform", "rotate(60 "+ (RULE_CUBE_FONT_SIZE*10-3+RULE_CUBE_HYP_SIZE*(1+pos)) +" "+(RULE_CUBE_FONT_SIZE*10 - 12)+")")
  if (pos>=0) {
    rule_label.setAttribute("style", "font-size: "+RULE_CUBE_FONT_SIZE+"; font-family: Verdana, Arial;");
  }
  else {
    rule_label.setAttribute("style", "font-size: "+(RULE_CUBE_FONT_SIZE-2)+"; font-family: Verdana, Arial; font-weight: bold;");
  }
  rule_label.setAttribute("text-anchor", "end");
  var content = document.createTextNode( label );
  rule_label.appendChild( content );
  var rule_cube = document.getElementById("rule-cube");
  rule_cube.appendChild( rule_label );
}

function draw_rule_z( z,total_z, z_pos, pos,pos_offset, label ) {
  var rule_label = document.createElementNS(xmlns,"text");
  rule_label.setAttribute("id", "rule-z-" + z + "-" + pos);
  //rule_label.setAttribute("x", RULE_CUBE_FONT_SIZE*10+10 + CHART_HEIGHT*z/(total_z+1) );
  rule_label.setAttribute("x", RULE_CUBE_FONT_SIZE*10+10 );
  rule_label.setAttribute("y", RULE_CUBE_FONT_SIZE*10 + RULE_CUBE_HYP_SIZE*(pos+pos_offset));
  if (pos >= 0) {
    rule_label.setAttribute("style", "font-size: "+RULE_CUBE_FONT_SIZE+"; font-family: Verdana, Arial;"
      +((z_pos[z] == pos)?" font-weight: bold;":""));
    z_pos_copy = z_pos.join(",").split(",");
    z_pos_copy[z] = pos;
    rule_label.setAttribute("onclick","draw_rule_cube(\"" + z_pos_copy.join(",") + "\");");
  }
  else {
    rule_label.setAttribute("style", "font-size: "+(RULE_CUBE_FONT_SIZE-2)+"; font-family: Verdana, Arial; font-weight: bold;");
  }

  var content = document.createTextNode( label );
  rule_label.appendChild( content );
  var rule_cube = document.getElementById("rule-cube");
  rule_cube.appendChild( rule_label );
}

function draw_rule_hyp( xpos, ypos, id ) {
  if (id == -1) { return; }
  var diameter = RULE_CUBE_HYP_SIZE-2;
  var hyp = document.createElementNS(xmlns,"circle");
  hyp.setAttribute("id", "rule-hyp-" + id);
  hyp.setAttribute("cx", RULE_CUBE_FONT_SIZE*10+10 + RULE_CUBE_HYP_SIZE*xpos + diameter/2);
  hyp.setAttribute("cy", RULE_CUBE_FONT_SIZE*10-2  + RULE_CUBE_HYP_SIZE*(ypos-0.5) + diameter/2);
  hyp.setAttribute("r", diameter/2);
  hyp.setAttribute("fill", rule_hyp_color(id, 0));
  //hyp.setAttribute("opacity",.5);
  hyp.setAttribute("onmouseover","hover_rule_hyp(" + id + ");")
  hyp.setAttribute("onmouseout","unhover_rule_hyp(" + id + ");")
  var rule_cube = document.getElementById("rule-cube");
  rule_cube.appendChild( hyp );
}

function rule_hyp_color( id, on_off ) {
  if (!show_hyp_score && !show_derivation_score) {
    return hyp_color( id, on_off );
  }
  var inactive_color = on_off ? "80" : "00";
  var hyp_score_color = inactive_color;
  var derivation_score_color = inactive_color;
  if (show_hyp_score) {
    hyp_score_color = get_score_from_color(best_hyp_score-edge[id][HYP_SCORE]);
  }
  if (show_derivation_score) {
    if (edge[id][DERIVATION_SCORE] == null) {
      derivation_score_color = "00";
    }
    else {
      derivation_score_color = get_score_from_color(best_derivation_score-edge[id][DERIVATION_SCORE]);
    }
  }
  return "#" + inactive_color + derivation_score_color + hyp_score_color;
}

function get_score_from_color( score, on_off ) {
  if (score == null) { return "00"; }
  var dec = 255 - 255 * (score/8);
  if (dec < 0) { dec = 0; }
  if (on_off) { dec = dec/2+128; }
  dec = Math.floor(dec/16)*16+15;
  var color = dec.toString(16);
  if (dec < 16) { color = "0"+color; }
  return color;
}