[FEAT] in ngrams table, new maplist/stoplist checkboxes

static/css/jquery.dynatable.css

@@ -69,4 +69,4 @@ th a:hover {
 .dynatable-disabled-page:hover {
   background: none;
   color: #999;
-}
+}
\ No newline at end of file

static/js/NGrams_dyna_chart_and_table.js

-
+/**
+ * @fileoverview
+ * Manages behavior of the terms view (at: project/PID/corpus/CID/terms)
+ *   - the ngrams table with normal/keep/delete states
+ *   - the ngrams groupings
+ *   - the score chart
+ * 
+ * Main_test() is the entry point. A dynatable is the main UI element.
+ * 
+ * Dynatable uses <thead> for columns and ulWriter() for row formatting.
+ * 
+ * Here, the user can modify DB lists by toggling Ngrams states and 
+ * save to DB via the API in the functions SaveLocalChanges() and CRUD()
+ * 
+ * Local persistence of states is in AjaxRecord[tableId].state
+ *   (access by table ids, *not* ngram ids)
+ * 
+ * Their values are initialized in the functions AfterAjax() and Refresh().
+ * 
+ * The stateIds are described by the System object.
+ *   - columns use stateId [0..2]  (miam aka normal, map aka keep, stop aka delete)
+ *   - stateId 3 is for grouped items (TODO clarify use)
+ * 
+ * @author
+ *   Samuel Castillo (original 2015 work)
+ *   Romain Loth (minor 2016 modifications + doc)
+ *
+ * @version 1.0 beta
+ * 
+ * @requires jquery.dynatable
+ * @requires d3
+ */
 
 
 function pr(msg) {
-    // rl dbg
-    console.log("\nFUN pr()")
     console.log(msg)
 }
 
 function getCookie(name) {
-    // rl dbg
-    console.log("\nFUN getCookie()")
     var cookieValue = null;
     if (document.cookie && document.cookie != '') {
         var cookies = document.cookie.split(';');
@@ -54,7 +81,7 @@ var System = {
 	// },
 	0: {
 		"states" : [ "normal" , "keep" , "delete" , "group"] ,
-		"statesD" : {} ,
+		"statesD" : {} , // will be inverted map of states
 		"dict" : {
 			"normal": {
 			  "id":"normal",
@@ -81,11 +108,19 @@ var System = {
 	
 }
 
+
+// States : [ "normal" , "keep" , "delete"]
+
+
+/**
+ * inverted mapping useful for state_id lookup
+ * 
+ * System[GState]["statesD"] = {'normal':0,'keep':1,'delete':2,'group':3}
+ */
 for(var i in System[GState]["states"] ) {
 	System[GState]["statesD"][ System[GState]["states"][i] ] = Number(i)
 }
 
-
 var FlagsBuffer = {}
 for(var i in System[GState]["states"]) {
   FlagsBuffer[System[GState]["states"][i]] = {}
@@ -103,8 +138,6 @@ var volumeChart = dc.barChart("#monthly-volume-chart");
 
 // Get all projects and corpuses of the user
 function GetUserPortfolio() {
-    // rl dbg
-    console.log("\nFUN GetUserPortfolio()")
     //http://localhost:8000/api/corpusintersection/1a50317a50145
     var project_id = getIDFromURL("project")
     var corpus_id =  getIDFromURL("corpus")
@@ -175,8 +208,6 @@ function GetUserPortfolio() {
 
 //Getting a corpusB-list and intersecting it with current corpusA-miamlist. 
 function printCorpuses() {
-    // rl dbg
-    console.log("\nFUN printCorpuses()")
     console.log( "!!!!!!!! in printCorpuses() !!!!!!!! " )
     pr(corpusesList)
 
@@ -247,8 +278,6 @@ function printCorpuses() {
 
 
 function Push2Buffer( NewVal ) {
-    // rl dbg
-    console.log("\nFUN Push2Buffer()")
     if ( TheBuffer == false) {
         if( ! NewVal ) {
             var limits = [ oldest , latest ];
@@ -285,8 +314,8 @@ function Push2Buffer( NewVal ) {
 }
 
 function Final_UpdateTable( action ) {
-    // rl dbg
-    console.log("\nFUN Final_UpdateTable()")
+    // debug
+    // console.log("\nFUN Final_UpdateTable()")
     // (1) Identifying if the button is collapsed:   
     var isCollapsed=false;
     var accordiontext = $("#collapseOne").attr("class")
@@ -297,8 +326,8 @@ function Final_UpdateTable( action ) {
     var UpdateTable = false
     if ( (action == "click" && !isCollapsed) || (action=="changerange" && isCollapsed) ) {
         UpdateTable = true;
-        $("#corpusdisplayer").html("Close Folder")
-    } else $("#corpusdisplayer").html("Open Folder")
+        $("#corpusdisplayer").html("Close Term List")
+    } else $("#corpusdisplayer").html("Show Term List")
 
     pr("update table??: "+UpdateTable)
 
@@ -343,21 +372,15 @@ function Final_UpdateTable( action ) {
 }
 
 function getRecord(rec_id) {
-    // rl dbg
-    console.log("\nFUN getRecord()")
   return MyTable.data('dynatable').settings.dataset.originalRecords[rec_id];
   // return AjaxRecords[rec_id]
 }
 
 function getRecords() {
-    // rl dbg
-    console.log("\nFUN getRecords()")
   return MyTable.data('dynatable').settings.dataset.originalRecords;
 }
 
 function save_groups() {
-    // rl dbg
-    console.log("\nFUN save_groups()")
 	var groupdiv = "#group_box"
 	var gcontent = groupdiv+"_content"
 	var count = 0
@@ -394,8 +417,6 @@ function save_groups() {
 }
 
 function cancel_groups() {
-    // rl dbg
-    console.log("\nFUN cancel_groups()")
 	var groupdiv = "#group_box"
 	var gcontent = groupdiv+"_content"
 	$(gcontent).children('span').each(function () {
@@ -411,8 +432,6 @@ function cancel_groups() {
 }
 
 function add2groupdiv( elem_id ) {
-    // rl dbg
-    console.log("\nFUN add2groupdiv()")
 	$('<span/>', {
 		"data-id":AjaxRecords[elem_id].id,
 		"data-stuff": elem_id,
@@ -440,9 +459,6 @@ function add2groupdiv( elem_id ) {
 }
 // new
 function add2group ( elem ) {
-    // rl dbg
-    console.log("\nFUN add2group()")
-
 	if( $("#group_box").length==0 ) {
 		var div_name = "#my-ajax-table > thead > tr > th:nth-child(1)"
 		var prctg = $(div_name).width()// / $(div_name).parent().width() * 100;
@@ -469,90 +485,135 @@ function add2group ( elem ) {
 	MyTable.data('dynatable').dom.update();
 }
 
-// new
-// click red, click keep, click normal...
+/**
+ * click red, click keep, click normal...
+ * 
+ * @param elem - the table row that contains the term cell
+ */
 function clickngram_action ( elem ) {
-    // rl dbg
-    console.log("\nFUN clickngram_action() !!!!")
-	var elem_id = $( elem ).data("stuff")
+    // local id
+	var elem_id = $( elem ).data("stuff") ;
+    console.log("click: state before: "+ AjaxRecords[elem_id].state) ;
+    
+    // cycle the statuses (omitting status 3 = group)
 	AjaxRecords[elem_id].state = (AjaxRecords[elem_id].state==(System[0]["states"].length-2))?0:(AjaxRecords[elem_id].state+1);
-
+    
+    // State <=> term color <=> checked colums
+    
+    console.log("\n\nRECORD visible on click --- " + JSON.stringify(AjaxRecords[elem_id])) ;
+    
+    var ngramId = AjaxRecords[elem_id].id ;
+        
+    console.log("click: state after: "+ AjaxRecords[elem_id].state) ;
 	MyTable.data('dynatable').dom.update();
 }
 
-// modified
 /**
- * @param rec_id - an id to an ngram record in AjaxRecords
+ * Works for ulWriter. Connects a record's state with table UI outcome.
+ * 
+ * @param rec_id - the local id for this ngram record in AjaxRecords
  */
 function transformContent(rec_id) {
-  // rl dbg
-  console.log("\nFUN transformContent() !!!!")
-	var elem = AjaxRecords[rec_id];
+  // debug
+  // console.log("\nFUN transformContent() !!!!")
+	var ngram_info = AjaxRecords[rec_id];
   
-  // ex: elem = {
+  // ex: ngram_info = {
   //             "id":2349,"name":"failure","score":1,"flag":false,
   //             "group_plus":true,"group_blocked":false,"state":0
   //            }
-  //~ console.log(
-    //~ "transformContent got elem no " + rec_id + ": " 
-    //~ + JSON.stringify(elem)
-    //~ )
+  
+  // console.log(
+  //  "transformContent got ngram_info no " + rec_id + ": " 
+  //  + JSON.stringify(ngram_info)
+  //  )
+    
+    
+    // result {} contains instanciated column html for dynatables
 	var result = {}
-	var atts = System[0]["dict"][ System[0]["states"][elem.state] ]
+	var atts = System[0]["dict"][ System[0]["states"][ngram_info.state] ]
 	var plus_event = ""
-	if(GState==0 && elem.state!=System[0]["statesD"]["delete"] ) // if deleted, no + button
+    
+    
+    // GState = 1 if previously had add_group
+    // it influences state lookup
+	if(GState==0 && ngram_info.state!=System[0]["statesD"]["delete"] ) // if deleted, no + button
 		plus_event = " <a class=\"plusclass\" onclick=\"add2group(this.parentNode.parentNode)\">(+)</a>"
 	if(GState==1 ) {
-		if(elem.state!=System[0]["statesD"]["delete"] && elem.state!=System[0]["statesD"]["group"]) { // if deleted and already group, no Up button
+		if(ngram_info.state!=System[0]["statesD"]["delete"] && ngram_info.state!=System[0]["statesD"]["group"]) { // if deleted and already group, no Up button
 			plus_event = " <a class=\"plusclass\" onclick=\"add2group(this.parentNode.parentNode)\">(▲)</a>"
 		}
 	}
-	result["id"] = elem["id"]
-	// rl simple tests for additional columns ----
-  result["add_to_map"] = elem["add_to_map"]
-	result["add_to_stop"] = elem["add_to_stop"]
-  // -------------------------------------------
-	result["score"] = '<span class="'+atts.id+'">'+elem["score"]+'</span>'
+	
+    // uncomment if column tableId
+    // result['rec_id'] = rec_id ;
+    
+    // uncomment if column ngramId
+    // result["ngramId"] = ngram_info["id"] ;
+    
+    // uncomment if column state
+    // result["state"] = AjaxRecords[rec_id].state
+    
+    // -------------------------------------------
+    // check box state columns 'will_be_map' and 'will_be_stop'
+    
+    map_flag = (AjaxRecords[rec_id].state == 1) ;    // 1 = System[0]["statesD"]["keep"]
+    stop_flag = (AjaxRecords[rec_id].state == 2) ;   // 2 = System[0]["statesD"]["delete"]
+    
+    result["will_be_map"] = '<input type="checkbox" onclick="checkBox(\'keep\',this.parentNode.parentNode)" '
+                           +(map_flag?'checked':'')
+                           +'></input>'
+    result["will_be_stop"] = '<input type="checkbox" onclick="checkBox(\'delete\', this.parentNode.parentNode)" '
+                           +(stop_flag?'checked':'')
+                           +'></input>'
+    // possible todo: 3 way switch ?? 
+    // par exemple http://codepen.io/pamgriffith/pen/zcntm
+    // -------------------------------------------
+    
+    result["score"] = '<span class="'+atts.id+'">'+ngram_info["score"]+'</span>'
 	result["name"] = "<span class=\""+atts.id+
-					 "\" onclick=\"clickngram_action(this.parentNode.parentNode)\">"+elem["name"]+"</span>"+
+					 "\" onclick=\"clickngram_action(this.parentNode.parentNode)\">"+ngram_info["name"]+"</span>"+
 					 plus_event
 	return result;
 }
 
-// to delete
-// Affecting the tr element somehow
-function overRide(elem) {
-    // rl dbg
-    console.log("\nFUN overRide() !!!!")
-  var id = elem.id
-  var current_flag = $("input[type='radio'][name='radios']:checked").val()
-  var this_newflag = (current_flag==AjaxRecords[id]["flag"])?false:current_flag
-
-  console.log("striking: "+id+" | this-elem_flag: "+AjaxRecords[id]["flag"]+" | current_flag: "+current_flag)
-  console.log("\t so the new flag is: "+this_newflag)
-  // if(this_newflag)
-  //   FlagsBuffer[this_newflag][id] = true;
-  // else 
-  //   delete FlagsBuffer[ AjaxRecords[id]["flag"] ][id];
-
-  var sum__selected_elems = 0;
-  for(var i in FlagsBuffer)
-    sum__selected_elems += Object.keys(FlagsBuffer[i]).length;
-
-  console.log("")
-  console.log("Current Buffer size: "+sum__selected_elems)
-  console.log(FlagsBuffer)
-
-  if ( sum__selected_elems>0 )
-    $("#Clean_All, #Save_All").removeAttr("disabled", "disabled");
-  else 
-    $("#Clean_All, #Save_All").attr( "disabled", "disabled" );
-
-  MyTable.data('dynatable').dom.update();
 
+/**
+ * Click on a checkbox in a row
+ * 
+ * @boxType : 'keep' or 'delete' (resp. maplist and stoplist)
+ * @elem : entire element row with attribute 'data-stuff' (= rec_id)
+ */
+ 
+function checkBox(boxType, elem) {
+    console.log ('CLICK on check box') ;
+    
+    var elemId = elem.getAttribute("data-stuff") ;
+    var ngramId = AjaxRecords[elemId].id ;
+    var currentState = AjaxRecords[elemId].state ;
+    // alert('ELEMENT: ' + elemId + '\n'
+    //        + 'NGRAM: ' + ngramId + '\n'
+    //        + 'CURRENT STATE: ' + currentState) ;
+    
+    // find out which box
+    // if (boxType == 'keep') => affectedState = 1
+    // if (boxType == 'delete') => affectedState = 2
+    affectedState = System[0]["statesD"][boxType] ;
+    
+    // turn on if it's not already on
+    if (currentState != affectedState) {
+        targetState = affectedState
+    }
+    // otherwise turn the 2 boxes off
+    else {
+        targetState = 0 ;
+    }
+    
+    // set old state and color
+    AjaxRecords[elemId].state = targetState ;
+    MyTable.data('dynatable').dom.update();
 }
 
-
 /**
  * "generic enough"
  * 
@@ -577,103 +638,67 @@ function overRide(elem) {
  *                  ]
  */
 function ulWriter(rowIndex, record, columns, cellWriter) {
-  // rl dbg
-  console.log("\nFUN ulWriter()")
+  // debug
+  // console.log("\nFUN ulWriter()")
   var tr = '';
   var cp_rec = {}
-  //console.log("rowIndex:" + rowIndex)
-  console.log("record" + JSON.stringify(record))
-  console.log("columns" + JSON.stringify(columns))
-  
   
+  if( AjaxRecords[RecDict[record.id]].state < 0 ) {
+      return false;
+  }
   
-  if( AjaxRecords[RecDict[record.id]].state < 0 )
-  	return false;
-  
-  // £TODO add states as checkboxes
+  // Add cells content (values OR custom html) from record
+  // -----------------------------------------------------
   cp_rec = transformContent(RecDict[record.id])
   
+  // console.log("cp_rec" + JSON.stringify(cp_rec))
+  // console.log("\n----\nrecord" + JSON.stringify(record))
+  
   // grab the record's attribute for each column
   for (var i = 0, len = columns.length; i < len; i++) {
     tr += cellWriter(columns[i], cp_rec);
   }
-  console.log("tr" + tr)
+  
+  // we could directly use record.id (ngram_id) if store states separately
   var data_id = RecDict[record.id]
   return '<tr data-stuff='+data_id+'>' + tr + '</tr>';
 }
 
-function SelectAll( box ) {
-  // rl dbg
-  console.log("\nFUN SelectAll()")
-  var current_flag = $("input[type='radio'][name='radios']:checked").val()
+/**
+ * SelectAll: toggle all checkboxes in a row by changing state in System
+ * 
+ * (new version without the old Delete|Keep radio choice)
+ * @boxType : 'keep' or 'delete' (resp. maplist and stoplist)
+ * @elem : entire element row with attribute 'data-stuff' (= rec_id)
+ */
+ 
+function SelectAll(boxType, boxElem ) {
+  // debug
+  // console.log("\nFUN SelectAll()")
   $("tbody tr").each(function (i, row) {
-      var id = $(row).data('stuff')
-      if(box.checked) {
-      	AjaxRecords[id]["state_buff"] = AjaxRecords[id]["state"]
-      	AjaxRecords[id]["state"] = System[0]["statesD"][current_flag]
-      } else {
-      	AjaxRecords[id]["state"] = AjaxRecords[id]["state_buff"]
+      var rec_id = $(row).data('stuff') ;     // for old state system
+      var ngramId = AjaxRecords[rec_id].id ;  // for future state system (cols)
+      if(boxElem.checked) {
+        // stateId: 1 if boxType == 'keep'  
+        //          2 if boxType == 'delete'
+        var stateId = System[0]["statesD"][boxType] ;
+        
+        // buffer useful if restore
+        AjaxRecords[rec_id]["state_buff"] = AjaxRecords[rec_id]["state"]
+        AjaxRecords[rec_id]["state"] = stateId ;
+      } 
+      // restore previous states
+      else {
+        AjaxRecords[rec_id]["state"] = AjaxRecords[rec_id]["state_buff"] ;
       }
-      
   });
   MyTable.data('dynatable').dom.update();
 }
 
-function SaveGlobalChanges( delete_ ) {
-  // rl dbg
-  console.log("\nFUN SaveGlobalChanges()")
-  console.log( "iterating over global stop words:" )
-  $('.globalstopwords').each(function() {
-      console.log( $(this).data("id") )
-  });  
-  console.log( " - - - - -" )
-  console.log( "delete: "+delete_ )
-  if(!delete_) {
-    // SaveLocalChanges()
-  } else {
-    
-  }
-}
-
-function SaveGlobalChanges_Form( nodes2del) {
-  // rl dbg
-  console.log("\nFUN SaveGlobalChanges_Form()")
-  console.log( "In SaveGlobalChanges:" )
-  console.log( nodes2del )
-  //AjaxRecords[RecDict[1731]]
-  $("#stoplist_content").html("")
-  var html_globalstop = ""
-  for(var i in nodes2del) {
-    $('<span/>', {
-      "class": "globalstopwords",
-      "data-id":AjaxRecords[RecDict[nodes2del[i]]].id,
-      "data-stuff": RecDict[nodes2del[i]],
-        title: 'Click to remove',
-        text: AjaxRecords[RecDict[nodes2del[i]]].name,
-        css: {
-          "cursor":"pointer",
-          "border": "1px solid red",
-          "margin": "3px",
-          "padding": "3px",
-        }
-    })
-    .click(function() {
-        $(this).remove()
-        // if nothing in group div, then remove it
-        if( $("#stoplist_content").children().length==0 ) {
-          SaveLocalChanges()
-        }
-    })
-    .appendTo('#stoplist_content')
-
-  }
-  $("#pre_savechanges").modal("show")
-}
 
 // Save changes to all corpusA-lists 
 function SaveLocalChanges() {
-  // rl dbg
-  console.log("\nFUN SaveGlobalChanges()")
+  console.log("\nFUN SaveLocalChanges()")
   // console.clear()
   console.log("In SaveChanges()")
   var sum__selected_elems = 0;
@@ -721,10 +746,10 @@ function SaveLocalChanges() {
   }
   // [ = = = = / For deleting subforms = = = = ]
 
-  // console.log(" = = = = = = = = = == ")
-  // console.log("FlagsBuffer:")
-  // console.log(FlagsBuffer)
-
+  console.log(" = = = = = = = = = == ")
+  console.log("FlagsBuffer:")
+  console.log(JSON.stringify(FlagsBuffer))
+  
 
   var nodes_2del = Object.keys(FlagsBuffer["delete"]).map(Number)
   var nodes_2keep = Object.keys(FlagsBuffer["keep"]).map(Number)
@@ -732,21 +757,21 @@ function SaveLocalChanges() {
   var nodes_2inmap = $.extend({}, FlagsBuffer["inmap"])
   var nodes_2outmap = $.extend({}, FlagsBuffer["outmap"])
 
-  // console.log("")
-  // console.log("")
-  // console.log(" nodes_2del: ")
-  // console.log(nodes_2del)
-  // console.log(" nodes_2keep: ")
-  // console.log(nodes_2keep)
-  // console.log(" nodes_2group: ")
-  // console.log(nodes_2group)
-  // console.log(" nodes_2inmap: ")
-  // console.log(nodes_2inmap)
-  // console.log(" nodes_2outmap: ")
-  // console.log(nodes_2outmap)
-  // console.log("")
-  // console.log("")
-
+   console.log("")
+   console.log("")
+   console.log(" nodes_2del: ")
+   console.log(nodes_2del)
+   console.log(" nodes_2keep: ")
+   console.log(nodes_2keep)
+   console.log(" nodes_2group: ")
+   console.log(nodes_2group)
+   console.log(" nodes_2inmap: ")
+   console.log(nodes_2inmap)
+   console.log(" nodes_2outmap: ")
+   console.log(nodes_2outmap)
+   console.log("")
+   console.log("")
+  
   var list_id = $("#list_id").val()
   var corpus_id = getIDFromURL( "corpus" ) // not used
 
@@ -787,26 +812,17 @@ $("#Clean_All").click(function(){
 
 $("#Save_All").click(function(){
   SaveLocalChanges()
-  // var Elems_2Del = {};
-  // for(var id in AjaxRecords) {
-  //   if(AjaxRecords[id]["state"]==System[0]["statesD"]["delete"]) {
-  //     Elems_2Del[AjaxRecords[id].id] = true
-  //   }
-  // }
-  // if( Object.keys(Elems_2Del).length>0 ) {
-  //   SaveGlobalChanges_Form( Object.keys(Elems_2Del).map(Number) )
-  // } else {
-  //   // SaveLocalChanges() //At the end, reload!
-  // }
 });
 
 // For lists, all http-requests
 function CRUD( parent_id , action , nodes , args , http_method , callback) {
-  // rl dbg
-  console.log("\n!!!! FUN CRUD() !!!! ----------------")
 	var the_url = window.location.origin+"/api/node/"+parent_id+"/ngrams"+action+"/"+nodes.join("+");
 	the_url = the_url.replace(/\/$/, ""); //remove trailing slash
-	if(nodes.length>0 || Object.keys(args).length>0) {
+	
+    // debug
+    // console.log("CRUD AJAX => URL: " + the_url + " (" + http_method + ")")
+    
+    if(nodes.length>0 || Object.keys(args).length>0) {
 		$.ajax({
 		  method: http_method,
 		  url: the_url,
@@ -835,19 +851,23 @@ function CRUD( parent_id , action , nodes , args , http_method , callback) {
 /**
  * 1. Creates the html of the table
  *    => therefore thead for dynatable columns template
- * 2. Fills the AjaxRecords from data
+ * 2. Fills the AjaxRecords from data 
+ *    record.id, record.name, record.score... all except record.state
+ *    record.state is initalized in:
+ *       - AfterAjax for map items
+ *       - ??? for stop items
  * 3. Creates the scores distribution chart over table
- * 4. ???
- * 5. PROFIT!
+ * 4. Set up Search div
  * 
  * @param data: a response from the api/node/CID/ngrams/list/ routes
  * @param initial: initial score type "occs" or "tfidf"
  * @param search_filter: eg 'filter_all' (see SearchFilters.MODE)
- * 
- * minor modifications rloth 2016 (previous work: Samuel Castillo 2015)
  */
 function Main_test( data , initial , search_filter) {
-
+    
+    // debug
+    // alert("refresh main")
+    
 	console.log("")
 	console.log(" = = = = MAIN_TEST: = = = = ")
 	console.log("data:")
@@ -873,19 +893,60 @@ function Main_test( data , initial , search_filter) {
     //  div_table += "\t"+"\t"+"\t"+'<input type="checkbox" id="multiple_selection" onclick="SelectAll(this);" /> Select'+"\n"
     $("#div-table").html("")
     $("#div-table").empty();
+    
+    // ? TODO move this to terms.html template
+    // ----------------------------------------
     var div_table = '<p align="right">'+"\n"
       div_table += '<table id="my-ajax-table" class="table table-bordered table-hover">'+"\n"
       div_table += "\t"+'<thead>'+"\n"
-      // each <th> will affect "columns" template arg in ulWriter()
-      div_table += "\t"+"\t"+'<th data-dynatable-column="add_to_map">Add to map</th>'+"\n"
-      div_table += "\t"+"\t"+'<th data-dynatable-column="add_to_stop">Add to stop</th>'+"\n"
-      div_table += "\t"+"\t"+'<th data-dynatable-column="name">Terms</th>'+"\n"
-      div_table += "\t"+"\t"+'<th id="score_column_id" data-dynatable-sorts="score" data-dynatable-column="score">Score</th>'+"\n"
-      div_table += "\t"+"\t"+'</th>'+"\n"
-      div_table += "\t"+'</thead>'+"\n"
-      div_table += "\t"+'<tbody>'+"\n"
-      div_table += "\t"+'</tbody>'+"\n"
-      div_table += '</table>'+"\n"
+      div_table += "\t"+'<tr>'+"\n"
+      // ------------------------------------------------------------------
+      // Any <th> defined here will end up in the 'columns' arg of ulWriter
+      // ------------------------------------------------------------------
+      
+      // uncomment for column tableId
+      // div_table += "\t"+"\t"+'<th data-dynatable-column="rec_id" style="background-color:grey">local id</th>'+"\n";
+      
+      // uncomment for column ngramId
+      // div_table += "\t"+"\t"+'<th data-dynatable-column="ngramId" style="background-color:grey">ngramId</th>'+"\n";
+      
+      // uncomment for column stateId
+      // div_table += "\t"+"\t"+'<th data-dynatable-column="state" style="background-color:grey">State</th>'+"\n" ;
+      
+      div_table += "\t"+"\t"+'<th data-dynatable-column="name">Terms</th>'+"\n";
+      div_table += "\t"+"\t"+'<th id="score_column_id" data-dynatable-sorts="score" data-dynatable-column="score">Score</th>'+"\n";
+      div_table += "\t"+"\t"+'</th>'+"\n";
+      // selector columns... not sortable to allow 'click => check all'
+      div_table += "\t"+"\t"+'<th data-dynatable-column="will_be_map"'
+                            + ' data-dynatable-no-sort="true"'
+                            + ' title="Selected terms will appear in the map."'
+                            + ' style="width:3em;"'
+                            + '>'
+                            + 'Map'
+                            + '<p class="note">'
+                            + '<input type="checkbox"'
+                            + ' onclick="SelectAll(\'keep\',this)" title="Check to select all currently visible terms"></input>'
+                            + '<label>All</label>'
+                            + '</p>'
+                            + '</th>'+"\n" ;
+      div_table += "\t"+"\t"+'<th data-dynatable-column="will_be_stop"'
+                            + ' data-dynatable-no-sort="true"'
+                            + ' title="Selected terms will be removed from all lists."'
+                            + ' style="width:3em;"'
+                            + '>'
+                            + 'Del'
+                            + '<p class="note">'
+                            + '<input type="checkbox"'
+                            + ' onclick="SelectAll(\'delete\',this)" title="Check to select all currently visible terms"></input>'
+                            + '<label>All</label>'
+                            + '</p>'
+                            + '</th>'+"\n" ;
+      div_table += "\t"+'</tr>'+"\n";
+      div_table += "\t"+'</thead>'+"\n";
+      div_table += "\t"+'<tbody>'+"\n";
+      div_table += "\t"+"\t"+'<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'+"\n";
+      div_table += "\t"+'</tbody>'+"\n";
+      div_table += '</table>'+"\n";
       div_table += '</p>';
     $("#div-table").html(div_table)
 
@@ -900,8 +961,8 @@ function Main_test( data , initial , search_filter) {
     AjaxRecords = []
     for(var i in data.ngrams) {
     
-      var le_ngram = data.ngrams[i]
-
+      var le_ngram = data.ngrams[i] ;
+      
       var orig_id = le_ngram.id
       var arr_id = parseInt(i)
       RecDict[orig_id] = arr_id;
@@ -914,9 +975,9 @@ function Main_test( data , initial , search_filter) {
         "group_blocked": false,
         "state": (le_ngram.state)?le_ngram.state:0,
         
-        // rl: simple tests for new columns
-        "add_to_map": "hello",
-        "add_to_stop": false
+        // rl: 2 new columns showing 'state == map' and 'state == del'
+        "will_be_map": null,
+        "will_be_stop": null
       }
       AjaxRecords.push(node_info)
 
@@ -1040,7 +1101,7 @@ function Main_test( data , initial , search_filter) {
     LineChart.filterAll();
     volumeChart.filterAll();
     dc.redrawAll();
-
+    
     MyTable = []
     MyTable = $('#my-ajax-table').dynatable({
                 dataset: {
@@ -1055,17 +1116,7 @@ function Main_test( data , initial , search_filter) {
                   // _cellWriter: customCellWriter
                 }
               })
-              // .bind("dynatable:afterUpdate",  function(e, rows) {
-              //   $(e.target).children("tbody").children().each(function(i) {
-              //      $(this).click(function(){
-              //        var row_nodeid = $(this).data('stuff')
-              //        var elem = { "id":row_nodeid , "checked":false }
-              //        overRide(elem); //Select one row -> select one ngram
-
-              //       });
-              //   });
-              // });
-
+    
     // MyTable.data('dynatable').settings.dataset.records = []
     // MyTable.data('dynatable').settings.dataset.originalRecords = []
     // MyTable.data('dynatable').settings.dataset.originalRecords = AjaxRecords;
@@ -1074,6 +1125,7 @@ function Main_test( data , initial , search_filter) {
     MyTable.data('dynatable').sorts.add('score', 0) // 1=ASCENDING,
     MyTable.data('dynatable').process();
     MyTable.data('dynatable').paginationPage.set(1);
+    MyTable.data('dynatable').paginationPerPage.set(20);  // default:10
     // MyTable.data('dynatable').process();
     // MyTable.data('dynatable').sorts.clear();
     MyTable.data('dynatable').process();
@@ -1087,18 +1139,7 @@ function Main_test( data , initial , search_filter) {
     $(".dynatable-pagination-links").insertAfter(".imadiv")
 
 
-
-    var Div_PossibleActions = ""
-    for(var action in PossibleActions) {
-      var a = PossibleActions[action];
-      var ischecked = (Number(action)==0)?"checked":"";
-      Div_PossibleActions += '<input type="radio" id="radio'+action+'" name="radios"  value="'+a.id+'" '+ischecked+'>';
-      Div_PossibleActions += '<label style="color:'+a.color+';" for="radio'+action+'">'+a.name+'</label>';
-    }
-    var Div_SelectAll = ' <input type="checkbox" id="multiple_selection" onclick="SelectAll(this);" /> Select All'
-    $(".imadiv").html('<div style="float: left; text-align:left; input[type=radio] {display: none;}">'+Div_PossibleActions+Div_SelectAll+'</div><br>');
-
-
+    // Search
 	$("#filter_search").html( $("#filter_search").html().replace('selected="selected"') );
 	$("#"+search_filter).attr( "selected" , "selected" )
 	var the_content = $("#filter_search").html();
@@ -1108,8 +1149,6 @@ function Main_test( data , initial , search_filter) {
 
 
 function SearchFilters( elem ) {
-  // rl dbg
-  console.log("\nFUN SearchFilters()")
   var MODE = elem.value;
 
   if( MODE == "filter_all") {
@@ -1143,6 +1182,7 @@ function SearchFilters( elem ) {
     // MyTable.data('dynatable').sorts.add('score', 0) // 1=ASCENDING,
     // MyTable.data('dynatable').process();
   }
+    
 
   if( MODE == "filter_stop-list") {
   	console.log( NGrams["stop"] )
@@ -1152,9 +1192,13 @@ function SearchFilters( elem ) {
 			"scores": $.extend({}, NGrams["main"].scores)
 		}
 		for(var r in NGrams["stop"]) {
-			var a_ngram = NGrams["stop"][r]
-			a_ngram["state"] = System[0]["statesD"]["delete"]
+			var a_ngram = NGrams["stop"][r] ;
+            // deletestateId = 2
+            var deletestateId = System[0]["statesD"]["delete"] ;
+			a_ngram["state"] = deletestateId ;
+
 			sub_ngrams_data["ngrams"].push( a_ngram )
+            
 		}
 		var result = Main_test(sub_ngrams_data , NGrams["main"].scores.initial , MODE)
 		console.log( result )
@@ -1164,8 +1208,6 @@ function SearchFilters( elem ) {
 }
 
 function getIDFromURL( item ) {
-  // rl dbg
-  console.log("\nFUN getIDFromURL()")
 	var pageurl = window.location.href.split("/")
 	var cid;
 	for(var i in pageurl) {
@@ -1179,8 +1221,6 @@ function getIDFromURL( item ) {
 
 // For lists, only GET requests
 function GET_( url , callback ) {
-  // rl dbg
-  console.log("\nFUN GET_("+url+")")
     $.ajax({
         type: "GET",
         url: url,
@@ -1276,8 +1316,8 @@ GET_( url[0] , function(result) {
 
 
 function AfterAjax() {
-  // rl dbg
-  console.log("\nFUN AfterAjax()")
+  // debug
+  // console.log("\nFUN AfterAjax()")
 	// // Deleting subforms from the ngrams-table, clean start baby!
     if( Object.keys(NGrams["group"].links).length>0 ) {
 
@@ -1300,11 +1340,16 @@ function AfterAjax() {
     	}
     	NGrams["main"].ngrams = ngrams_data_;
     }
-
+    
+    
+    // initialize state of maplist items
     if( Object.keys(NGrams["map"]).length>0 ) {
     	for(var i in NGrams["main"].ngrams) {
-    		if(NGrams["map"][NGrams["main"].ngrams[i].id]) {
-    			NGrams["main"].ngrams[i]["state"] = System[0]["statesD"]["keep"]
+            myMiamNgram = NGrams["main"].ngrams[i]
+    		if(NGrams["map"][myMiamNgram.id]) {
+                // keepstateId = 1
+                keepstateId = System[0]["statesD"]["keep"]
+                myMiamNgram["state"] = keepstateId ;
     		}
     	}
     }

templates/corpus/terms.html

@@ -25,13 +25,34 @@
   -o-transition: height 0.1s;
   transition: height 0.1s;
 }
-th { color: #fff; }
+th { 
+  color: #fff;
+  font-weight: normal;
+  font-size: 0.9em;
+  vertical-align: top ;
+}
+
+/* specific selector to override equally specific bootstrap.css */
+.table > thead > tr > th { vertical-align: top ; }
 
 th a {
   color: #fff;
-  font-weight: normal;
   font-style: italic;
-  font-size: 0.9em;
+}
+
+th p.note {
+  color: #ccc;
+  font-size: 0.6em;
+  margin: 1em 0 0 0 ;
+}
+
+th p.note > input {
+  float: left;
+  margin: 0 .2em 0 0 ;
+}
+
+th p.note > label {
+  float: left;
 }
 
 tr:hover {
@@ -171,7 +192,7 @@ input[type=radio]:checked + label {
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-           <p id="corpusdisplayer" onclick='Final_UpdateTable("click")' class="btn btn-primary btn-lg" style="width:200px; margin:0 auto; display:block;">Open Folder</h2></p>
+           <p id="corpusdisplayer" onclick='Final_UpdateTable("click")' class="btn btn-primary btn-lg" style="width:200px; margin:0 auto; display:block;">Close Term List</h2></p>
         </a>
       </h4>
     </div>
@@ -247,66 +268,6 @@ input[type=radio]:checked + label {
     </div>
 
 
-    <div id="pre_savechanges" class="modal fade">
-
-      <div class="modal-dialog">
-
-        <div class="modal-content">
-          
-
-          <div class="modal-header">
-            <h3 class="modal-title">Do you want to apply these to the whole Project as well?:</h3>
-          </div>
-
-          <div class="modal-body">
-
-            <div id="stoplist_content">
-            </div>
-
-            <!-- 
-              <ul class="nav nav-tabs">
-                <li class="active"><a id="stoplist" href="#stoplist_content">Stop List</a></li>
-                <li><a id="maplist" href="#maplist_content">Map List</a></li>
-                <li><a id="grouplist" href="#grouplist_content">Group List</a></li>
-              </ul>
-
-              <div class="tab-content">
-                <div id="stoplist_content" class="tab-pane fade in active">
-                  <ul>
-                    <li>jiji01</li>
-                    <li>jiji02</li>
-                    <li>jiji03</li>
-                  </ul>
-                </div>
-
-                <div id="maplist_content" class="tab-pane fade">
-                  qowieuoqiwueowq
-                </div>
-
-                <div id="grouplist_content" class="tab-pane fade">
-                  asdhasjkdhasjdh
-                </div>
-
-              </div>
-            -->
-
-            <div class="modal-footer">
-              <button onclick="SaveGlobalChanges(false)" id="nope" type="button" class="btn btn-default" data-dismiss="modal">No</button>
-              <button onclick="SaveGlobalChanges(true)" id="yep" type="button" class="btn btn-primary">Yes</button>
-            </div>
-
-
-          </div>
-
-
-        </div>
-
-      </div>
-
-    </div>
-
-
-
 
 <div id="filter_search" style="visibility:hidden">
 <select id="example-single-optgroups" onchange="SearchFilters(this);">