62222a5e02c38a059c7e13af320d894e7cef8370
braney
  Wed Aug 2 15:30:18 2017 -0700
fixes in response to code review.  Allow creation of generic views

diff --git src/hg/js/hgCollection.js src/hg/js/hgCollection.js
index 0af0bad..02af0b8 100644
--- src/hg/js/hgCollection.js
+++ src/hg/js/hgCollection.js
@@ -1,251 +1,257 @@
+// hgCollection.js - Interactive features for GTEX Body Map version of GTEx Gene track UI page
 
-// build the tracks tree
-$("#tracks").treetable({expandable:true});
-$("#tracks").show();
+// Copyright (C) 2017 The Regents of the University of California
 
-// keep track of id of selected row
-var selectedNode = "collections";
 
-// record the names of all the tracks in the collections
-var names = [];
-$("#tracks  .user").each(function() {
-  //var name = this.cells[3].innerText;
-  var name = $(this).data("ttId");
-  names[name] = 1;
-});
+var collections = (function() {
+    var names = []; // a list of names that have been used
+    var selectedNode = "collections"; // keep track of id of selected row
+    var $tracks;  // the #tracks object
+
+    function errorHandler(request, textStatus) {
+    }
+
+    function updatePage(responseJson) {
+        if (!responseJson) {
+            return;
+        }
+        var message = responseJson.serverSays;
+        if (message) {
+            console.log('server says: ' + JSON.stringify(message));
+        }
+    }
 
     // make sure name is unique in track hub
     function getUniqueName(root) {
-    if (typeof names[root] == 'undefined') {
-        names[root] = 1;
+        if (!names.root) {
+            names.root = true;
             return root;
         } else {
             var counter = 1;
 
             for(;;counter++) {
                 var name  = root + counter;
-            if (typeof names[name] == 'undefined') {
-                names[name] = 1;
+                if (!names.name) {
+                    names.name = true;
                     return name;
                 }
             }
         }
     }
 
+    function init() {
+        // build the tracks tree
+        $tracks = $("#tracks");
+        $tracks.treetable({expandable:true});
+        $tracks.show();
+        //
+        // record the names of all the tracks in the collections
+        $("#tracks  .user").each(function() {
+            var name = $(this).data("ttId");
+            names[name] = 1;
+        });
+
         // color pickers
-var mathOpt = {
+        var viewOpt = {
             hideAfterPaletteSelect : true,
-    color : $('#mathColorInput').val(),
+            color : $('#viewColorInput').val(),
             showPalette: true,
             showInput: true,
             preferredFormat: "hex",
-    change: function() { var color = $("#mathColorPicker").spectrum("get"); $('#mathColorInput').val(color); },
+            change: function() { var color = $("#viewColorPicker").spectrum("get"); $('#viewColorInput').val(color); },
             };
-$("#mathColorPicker").spectrum(mathOpt);
+        $("#viewColorPicker").spectrum(viewOpt);
 
         var trackOpt = {
             hideAfterPaletteSelect : true,
             color : $('#trackColorInput').val(),
             showPalette: true,
             showInput: true,
             preferredFormat: "hex",
             change: function() { var color = $("#trackColorPicker").spectrum("get"); $('#trackColorInput').val(color); },
             };
         $("#trackColorPicker").spectrum(trackOpt);
 
         // Highlight selected row
         $("#tracks tbody").on("mousedown", "tr", function() {
-  $(".selected").not(this).removeClass("selected");
+            $("#tracks .selected").not(this).removeClass("selected");
             $(this).toggleClass("selected");
             selectedNode = this.getAttribute('data-tt-id');
             var name = this.cells[0].innerText;
             var description = this.cells[1].innerText;
             var visibility = $(this).data("visibility");
 
             if ($(this).hasClass("user")) {
-    if ($(this).hasClass("mathWig")) {
-        $("#MathWigOptions").show();
+                if ($(this).hasClass("view")) {
+                    $("#viewOptions").show();
                     $("#CustomCompositeOptions").hide();
                     $("#CustomTrackOptions").hide();
                     $("#TrackDbOptions").hide();
-      $("#mathWigName").val(name);
-      $("#mathWigDescription").val(description);
-      $("#mathWigVis").val(visibility);
-    $("#mathWigTracks").treetable({expandable:true});
+                    $("#viewName").val(name);
+                    $("#viewDescription").val(description);
+                    $("#viewVis").val(visibility);
                 } else if ($(this).hasClass("ui-droppable")) {
                     $("#CustomCompositeOptions").show();
-        $("#MathWigOptions").hide();
+                    $("#viewOptions").hide();
                     $("#CustomTrackOptions").hide();
                     $("#TrackDbOptions").hide();
                     $("#collectionName").val(name);
                     $("#collectionDescription").val(description);
                     $("#collectionVis").val(visibility);
                 } else {
                     $("#CustomTrackOptions").show();
                     $("#CustomCompositeOptions").hide();
                     $("#TrackDbOptions").hide();
-        $("#MathWigOptions").hide();
+                    $("#viewOptions").hide();
                     $("#customName").val(name);
                     $("#customDescription").val(description);
                     $("#customVis").val(visibility);
                 }
             } else {
                 $("#CustomCompositeOptions").hide();
                 $("#CustomTrackOptions").hide();
                 $("#TrackDbOptions").show();
             }
-
         });
 
         // Drag & Drop 
         $("#tracks .file, #tracks .folder").draggable({
             helper: "clone",
             opacity: 0.75,
             refreshPositions: true,
             revert: "invalid",
             revertDuration: 300,
             scroll: true
         });
 
         $("#tracks .folder").each(function() {
             $(this).parents("#tracks tr").droppable({
                 accept: ".file, .folder",
                 drop: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     $("#tracks").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
                     $(droppedEl).addClass("user");
                 },
                 hoverClass: "accept",
                 over: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     if(this != droppedEl[0] && !$(this).is(".expanded")) {
                         $("#tracks").treetable("expandNode", $(this).data("ttId"));
                     }
                 }
             });
         });
 
-function errorHandler(request, textStatus)
-{
-}
-
-function updatePage(responseJson)
-{
-    if (!responseJson) {
-        return;
-    }
-    var message = responseJson.serverSays;
-    if (message) {
-        console.log('server says: ' + JSON.stringify(message));
-    }
-}
-
-$('body').on('click','#createMathWig',function(){
+        $('body').on('click','#createView',function(){
             var composite = $("#tracks").treetable("node", selectedNode);
-    var name = "MathWig";
-    var description = "Description of MathWig";
-    var thisNodeId = getUniqueName("MathWig");
-    var contents = "<tr data-tt-id=" + thisNodeId + " data-tt-parent-id=\"collections\"  class=\"user ui-droppable mathWig\"><td> <span class='folder'>" + name + "</td><td>" + description +"</td></tr>";
+            var name = "View";
+            var description = "Description of View";
+            var thisNodeId = getUniqueName("View");
+            var contents = "<tr data-tt-id=" + thisNodeId + " data-tt-parent-id=\"collections\"  class=\"user ui-droppable view\"><td> <span class='folder'>" + name + "</td><td>" + description +"</td></tr>";
             $("#tracks").treetable("loadBranch", composite, contents);
             var newNode =  $("#tracks").treetable("node", thisNodeId);
             $("#tracks").treetable("move", thisNodeId, selectedNode);
             var newNodeTr =  newNode.row;
             $(newNodeTr).data("visibility","squish");
             newNodeTr.droppable({
                 accept: ".file, .folder",
                 drop: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     $("#tracks").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
                     $(droppedEl).addClass("user");
                 },
                 hoverClass: "accept",
                 over: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     if(this != droppedEl[0] && !$(this).is(".expanded")) {
                         $("#tracks").treetable("expandNode", $(this).data("ttId"));
                     }
                 }
             });
         });
 
         $("#newCollection").click ( function () {
             var collections = $("#tracks").treetable("node", "collections");
             var name = "Collection";
             var description = "Description of Collection";
             var thisNodeId = getUniqueName("collection");
             var contents = "<tr data-tt-id=" + thisNodeId + " data-tt-parent-id=\"collections\"  class=\"user ui-droppable\"><td><span class='folder'>" + name + "</td><td>" + description +"</td></tr>";
             $("#tracks").treetable("loadBranch", collections, contents);
             var newNode =  $("#tracks").treetable("node", thisNodeId);
             var newNodeTr =  newNode.row;
             $(newNodeTr).data("visibility","squish");
             newNodeTr.droppable({
                 accept: ".file, .folder",
                 drop: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     $("#tracks").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
                     $(droppedEl).addClass("user");
                 },
                 hoverClass: "accept",
                 over: function(e, ui) {
                     var droppedEl = ui.draggable.parents("tr");
                     if(this != droppedEl[0] && !$(this).is(".expanded")) {
                         $("#tracks").treetable("expandNode", $(this).data("ttId"));
                     }
                 }
             });
         });
 
         $("#propsSave").click ( function () {
             window.location.reload();
         });
 
         $("#propsDiscard").click ( function () {
             window.location.reload();
         });
 
         $("#discardChanges").click ( function () {
             window.location.reload();
         });
 
         $("#saveCollections").click ( function () {
             var ii = 0;
             var values = [];
             $("#tracks  .user").each(function() {
                 var jj = 0;
                 var id = $(this).data("ttId");
                 values[ii] = [];
                 values[ii][jj] = $(this).data("ttParentId");
 
                 jj++;
                 $(this).find('td').each(function(){
-            var selected = $(this).find(":selected").text();
-            if (selected === "")
                     values[ii][jj] = $(this).text();
-            else
-                values[ii][jj] = selected;
                     jj++;
                 });
+
                 values[ii][jj] = $(this).data("ttId");
                 jj++;
+
                 values[ii][jj] = $(this).data("visibility");
-        if (typeof values[ii][jj] == 'undefined') {
+                if (!values[ii][jj]) {
                     values[ii][jj] = "hide";
                 }
                 jj++;
-
-
                 ii++;
             });
-    //console.log(values);
             requestData = 'jsonp=' + JSON.stringify(values);
             $.ajax({
                 data:  requestData ,
                 async: false,
                 dataType: "JSON",
                 type: "PUT",
                 url: "hgCollection?cmd=saveCollection",
                 trueSuccess: updatePage,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
             });
         });
+    }
+
+    return {
+            init: init
+           };
+}());
+
+// initialize everything
+collections.init();