merge changes

7 files changed, 993 insertions, 0 deletions

diff --git a/gn2/wqflask/templates/collections/add.html b/gn2/wqflask/templates/collections/add.html
new file mode 100644
index 00000000..478c80fb
--- /dev/null
+++ b/gn2/wqflask/templates/collections/add.html
@@ -0,0 +1,86 @@
+<div id="myModal">
+    <div class="modal-header">
+        <h2>Define or Add to Collection</h2>
+        <p>You have two choices: Name a new collection
+        or add to an existing collection.</p>
+    </div>
+    <div class="modal-body" style="margin-left: 20px;">
+      <form action="/collections/new"
+	    method="POST"
+	    target="_blank"
+	    data-validate="parsley"
+	    id="add_form"
+	    class="form-inline">
+            {% if traits is defined %}
+            <input type="hidden" name="traits" value="{{ traits }}" />
+            {% else %}
+            <input type="hidden" name="hash" value="{{ hash }}" />
+            {% endif %}
+            {% if collections|length > 0 %}
+            <fieldset>
+              <legend>1. Add to an existing collection</legend>
+              <div style="margin-left: 20px;">
+                <select name="existing_collection" class="form-control" style="width: 80%;">
+                {% for col in collections %}
+                    {% if loop.index == 1 %}
+                    <option value="{{ col.id }}:{{ col.name }}" selected>{{ col.name }}</option>
+                    {% else %}
+                    <option value="{{ col.id }}:{{ col.name }}">{{ col.name }}</option>
+                    {% endif %}
+                {% endfor %}
+                </select>
+                <input type="button" style="display: inline;" id="make_default" value="Make Default">
+              <br><br>
+              <button type="submit" name="add_to_existing" class="btn btn-primary">Add</button>
+              </div>
+            </fieldset>
+            {% endif %}
+            <hr />
+            <fieldset>
+              <legend>{% if collections|length > 0 %}2. {% else %}{% endif %}Create a new collection</legend>
+              <div style="margin-left: 20px;">
+                <input type="text" name="new_collection" placeholder=" Name of new collection..."
+                    data-trigger="change" data-minlength="5" data-maxlength="50" style="width: 100%">
+                <button type="submit" name="create_new" class="btn btn-primary" style="margin-top: 20px;">Create collection</button>
+                {% if uc is not defined %}
+                <span class="help-block">This collection will be saved to your computer for a year (or until you clear your cache).</span>
+                {% endif %}
+              </div>
+            </fieldset>
+        </form>
+    </div>
+</div>
+
+<script>
+  $('#add_form').parsley();
+  $('#add_form').on('submit', function(){
+    parent.jQuery.colorbox.close();
+  });
+
+  make_default = function() {
+    alert("The current collection is now your default collection.")
+    let uc_id = $('[name=existing_collection] option:selected').val().split(":")[0]
+    $.cookie('default_collection', uc_id, {
+        expires: 365,
+        path: '/'
+    });
+
+    let default_collection_id = $.cookie('default_collection');
+  };
+
+  $("#make_default").on("click", function(){
+    make_default();
+  });
+
+  apply_default = function() {
+    let default_collection_id = $.cookie('default_collection');
+    if (default_collection_id) {
+      let the_option = $('[name=existing_collection] option').filter(function() {
+        return ($(this).val().split(":")[0] == default_collection_id);
+      })
+      the_option.prop('selected', true);
+    }
+  }
+
+  apply_default();
+</script>
diff --git a/gn2/wqflask/templates/collections/add_anonymous.html b/gn2/wqflask/templates/collections/add_anonymous.html
new file mode 100644
index 00000000..2eb7525f
--- /dev/null
+++ b/gn2/wqflask/templates/collections/add_anonymous.html
@@ -0,0 +1,21 @@
+<div id="myModal">
+    <div class="modal-header">
+        <h3>Add to collection</h3>
+        <br />
+        <div>
+            <p>We can add this to a temporary collection for you.</p>
+            <p>For the most features you'll want to sign in or create an account.</p>
+        </div>
+    </div>
+    <div class="modal-body">
+        <form action="/collections/new" data-validate="parsley" id="add_form">
+            <input type="hidden" name="traits" value="{{ traits }}" />
+            <button type="submit" name="anonymous_add" class="btn btn-large btn-block btn-primary">Continue without signing in</button>
+            <button type="submit" name="sign_in" class="btn btn-large btn-block">Sign in or create an account</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    $('#add_form').parsley();
+</script>
diff --git a/gn2/wqflask/templates/collections/list.html b/gn2/wqflask/templates/collections/list.html
new file mode 100644
index 00000000..c553717f
--- /dev/null
+++ b/gn2/wqflask/templates/collections/list.html
@@ -0,0 +1,189 @@
+{% extends "base.html" %}
+{%from "oauth2/display_error.html" import display_error%}
+{% block title %}Your Collections{% endblock %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+{% endblock %}
+{% block content %}
+<!-- Start of body -->
+    <div class="container">
+      {{flash_me()}}
+
+      {% if g.user_session.logged_in %}
+        <h1>Collections owned by {% if g.user_session.user_name %}{{ g.user_session.user_name }}{% else %}{{ g.user_session.user_email }} {% endif %}</h1>
+        {% else %}
+        <h1>Your Collections</h1>
+        {% endif %}
+
+        <div>
+            <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
+            <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
+            <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
+            <button class="btn btn-danger" id="remove_collections" data-url="/collections/delete">Remove Collections</button>
+            <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+            <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
+            <br>
+            <form id="collections_form" action="javascript:void(0);" method="post" enctype="multipart/form-data">
+                <input type="hidden" name="uc_id" id="uc_id" value="" />
+                <div style="margin-top: 10px; display: inline-block;"><button class="btn btn-default" id="import_collection" data-url="/collections/import"> Import Collection</button>  <input type="file" name="import_file" id="import_file" size="20" style="display: inline-block;"></input></div>
+            </form>
+        </div>
+        <br>
+        <div id="collections_list" style="width:50%; margin-top: 10px; margin-bottom: 10px;">
+	  {%if anon_collections_error is defined%}
+	  {{display_error("Anonymous Collections", anon_collections_error)}}
+	  {%endif%}
+	  {%if anon_collections | length > 0%}
+	  <table class="table-hover table-striped cell-border" id='anon_trait_table'
+		 style="float: left;">
+	    <caption>Anonymous Collections</caption>
+            <thead>
+              <tr>
+                <th></th>
+                <th>Index</th>
+                <th>Name</th>
+                <th>Created</th>
+                <th>Last Changed</th>
+                <th># Records</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {% for uc in anon_collections %}
+              <tr class="collection_line">
+                <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td>
+                <td align="right">{{ loop.index }}
+                <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
+                <td>{{ uc.created_timestamp }}</td>
+                <td>{{ uc.changed_timestamp }}</td>
+                <td align="right">{{ uc.num_members }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+	  {%endif%}
+	  {% if collections|length > 0 %}
+          {% if (anon_collections | length > 0)  and (collections | length > 0) %}
+	  <hr />
+	  {%endif%}
+          <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
+	    <caption>User Collections</caption>
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>Index</th>
+                    <th>Name</th>
+                    <th>Created</th>
+                    <th>Last Changed</th>
+                    <th># Records</th>
+                </tr>
+            </thead>
+
+            <tbody>
+            {% for uc in collections %}
+            <tr class="collection_line">
+              <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td>
+              <td align="right">{{ loop.index }}
+              <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
+              <td>{{ uc.created_timestamp }}</td>
+              <td>{{ uc.changed_timestamp }}</td>
+              <td align="right">{{ uc.num_members }}</td>
+            </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+        {% else %}
+        You have no collections yet.
+        {% endif %}
+        </div>
+    </div>
+
+<!-- End of body -->
+
+{% endblock %}
+
+{% block js %}
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/timeago.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
+    <script>
+        $(document).ready( function () {
+            tableId = "trait_table";
+
+            columnDefs = [
+                { "type": "natural", "width": "3%", "targets": 0, "orderable": false},
+                { "type": "natural", "width": "8%", "targets": 1},
+                { "type": "natural", "width": "20%", "targets": 2},
+                { "type": "natural", "width": "25%", "targets": 3},
+                { "type": "natural", "width": "25%", "targets": 4},
+                { "type": "natural", "width": "15%", "targets": 5}
+            ];
+
+	    create_table("anon_trait_table", [], columnDefs)
+            create_table(tableId, [], columnDefs)
+
+            submit_special = function(url) {
+                $("#collections_form").attr("action", url);
+                return $("#collections_form").submit();
+            };
+
+            add_collection = function(trait_data, textStatus, jqXHR) {
+                var traits_hash = md5(trait_data.toString());
+
+                $.ajax({
+                    type: "POST",
+                    url: "/collections/store_trait_list",
+                    data: {
+                        hash: traits_hash,
+                        traits: trait_data.toString()
+                    }
+                });
+
+                return $.colorbox({
+                    href: "/collections/add?hash=" + traits_hash
+                });
+            }
+
+            $("#import_collection").on("click", function() {
+                var fd = new FormData();
+                var files = $('#import_file')[0].files;
+                if(files.length > 0){
+                    fd.append('import_file', files[0])
+                    $.ajax({
+                        type: "POST",
+                        url: "/collections/import",
+                        data: fd,
+                        dataType: "json",
+                        contentType: false,
+                        processData: false,
+                        success: add_collection
+                    });
+                } else {
+                    alert("No file selected")
+                }
+            });
+
+
+            $("#remove_collections").on("click", function() {
+                url = $(this).data("url")
+                collections = []
+                $(".trait_checkbox:checked").each(function() {
+                    collections.push($(this).val());
+                });
+                collections_string = collections.join(":")
+                $("input[name=uc_id]").val(collections_string)
+                return submit_special(url)
+            });
+
+        });
+
+    </script>
+{% endblock %}
diff --git a/gn2/wqflask/templates/collections/not_logged_in.html b/gn2/wqflask/templates/collections/not_logged_in.html
new file mode 100644
index 00000000..49b0e07d
--- /dev/null
+++ b/gn2/wqflask/templates/collections/not_logged_in.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% block title %}Your Collections{% endblock %}
+{% block content %}
+<!-- Start of body -->
+    {{ header("Not logged in") }}
+
+
+    <div id="collections_holder" class="container">
+        <div class="page-header">
+            <h1>Please log in in order to use this feature.</h1>
+        </div>
+    </div>
+
+<!-- End of body -->
+
+{% endblock %}
+
+{% block js %}
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/timeago.min.js') }}"></script>
+    <script>
+        $('body').timeago();
+    </script>
+{% endblock %}
diff --git a/gn2/wqflask/templates/collections/remove.html b/gn2/wqflask/templates/collections/remove.html
new file mode 100644
index 00000000..faee4f78
--- /dev/null
+++ b/gn2/wqflask/templates/collections/remove.html
@@ -0,0 +1,48 @@
+<div id="myModal">
+    <div class="modal-header">
+        <h3>Add to collection</h3>
+        <p>You have three choices: Use your default collection, create a new named collection,
+        or add the traits to an existing collection.</p>
+    </div>
+    <div class="modal-body">
+        <form action="/collections/new" data-validate="parsley" id="add_form">
+            <fieldset>
+                <legend>Use your default collection</legend>
+                <span class="help-block">Choose this if you're in a hurry or don't plan on using the collection again.</span>
+                <span class="help-block"><em></em>If you are unsure this is probably the option you want.</em></span>
+                <button type="submit" name="Default" class="btn">Continue</button>
+            </fieldset>
+            <hr />
+
+
+            <input type="hidden" name="traits" value="{{ traits }}" />
+            <fieldset>
+                <legend>Or create a new named collection</legend>
+                <label>New collection name</label>
+                <input type="text" name="new_collection" placeholder="Name of new collection..."
+                    data-trigger="change" data-minlength="5" data-maxlength="50">
+                <span class="help-block">Type the name of the new collection.</span>
+                <button type="submit" name="create_new" class="btn">Create and add traits</button>
+            </fieldset>
+
+            <hr />
+            <fieldset>
+                <legend>Or add to an existing collection</legend>
+                <label>Existing collection name</label>
+
+                <select name="existing_collection" class="form-control">
+                {% for col in user_collections %}
+                    <option value="{{ col.id }}">{{ col.name }}</option>
+                {% endfor %}
+                </select>
+                <br />
+
+                <button type="submit" name="add_to_existing" class="btn">Add to existing collection</button>
+            </fieldset>
+        </form>
+    </div>
+</div>
+
+<script>
+    $('#add_form').parsley();
+</script>
diff --git a/gn2/wqflask/templates/collections/view.html b/gn2/wqflask/templates/collections/view.html
new file mode 100644
index 00000000..c850e163
--- /dev/null
+++ b/gn2/wqflask/templates/collections/view.html
@@ -0,0 +1,483 @@
+{% extends "base.html" %}
+{% block title %}View Collection{% endblock %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
+    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
+{% endblock %}
+{% block content %}
+<!-- Start of body -->
+
+    <div class="container">
+      {{flash_me()}}
+        <h1>
+            <span id="collection_name">{{ uc.name }}</span>
+            <form id="frm-change-collection-name"
+		  method="POST"
+		  action="{{url_for('change_collection_name')}}"
+		  style="display:inline;">
+	      <input type="hidden" name="collection_id" value="{{uc.id}}" />
+	      <input type="text"
+		     name="new_collection_name"
+		     style="font-size: 20px; display: none; width: 500px;"
+		     class="form-control"
+		     placeholder="{{ uc.name }}" />
+	    </form>
+            <button class="btn btn-default" style="display: inline;" id="change_collection_name">Change Collection Name</button>
+            <button class="btn btn-default" style="display: inline;" id="make_default">Make Default</button>
+        </h1>
+        <h3>This collection has {{ '{}'.format(numify(trait_obs|count, "record", "records")) }}</h3>
+
+        <div class="tool-button-container">
+          <form id="collection_form" action="/loading" method="post">
+            <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+            <input type="hidden" name="collection_name" id="collection_name" value="{{ uc.name }}" />
+            <input type="hidden" name="tool_used" value="" />
+            <input type="hidden" name="form_url" value="" />
+            <input type="hidden" name="trait_list" id="trait_list" value= "
+            {% for this_trait in trait_obs %}
+                {{ this_trait.name }}:{{ this_trait.dataset.name }}:{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }},
+            {% endfor %}" >
+
+            {% include 'tool_buttons.html' %}
+
+          </form>
+        </div>
+        <div style="display: flex;">
+            <form id="heatmaps_form">
+                <button id="clustered-heatmap"
+                    class="btn btn-primary"
+                    data-url="{{heatmap_data_url}}"
+                    title="Generate heatmap from this collection" style="margin-top: 10px; margin-bottom: 10px;">
+                        Generate Heatmap
+                </button>
+                <br>
+                <div id="heatmap-options" style="display: none;">
+                    <div style="margin-bottom: 10px;">
+                        <b>Heatmap Orientation: </b>
+                        <br>
+                        Vertical
+                        <input id="heatmap-orient-vertical"
+                                type="radio"
+                                name="vertical"
+                                value="true" checked="checked"/>
+                        Horizontal
+                        <input id="heatmap-orient-horizontal"
+                                type="radio"
+                                name="vertical"
+                                value="false" />
+                    </div>
+                    <div style="margin-bottom: 10px;">
+                        <button id="clear-heatmap"
+                            class="btn btn-danger"
+                            title="Clear Heatmap">
+                            Clear Heatmap
+                        </button>
+                    </div>
+                </div>
+            </form>
+            &nbsp;
+        </div>
+
+        <div>
+            <div id="clustered-heatmap-image-area"></div>
+            <br />
+            <div class="collection-table-options">
+                <form id="export_form" method="POST" action="/export_traits_csv">
+                    <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button>
+                    <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-ok"></span> Invert</button>
+                    <button class="btn btn-success" id="add" type="button" disabled><i class="icon-plus-sign"></i> Copy</button>
+                    <input type="hidden" name="database_name" id="database_name" value="None">
+                    <input type="hidden" name="export_data" id="export_data" value="">
+                    <input type="hidden" name="file_name" id="file_name" value="collection_table">
+                    <input type="hidden" name="collection_name_export" value="{{ uc.name }}">
+                    <input type="hidden" name="user_email_export" value="{% if g.user_session.user_email %}{{ g.user_session.user_email }}{% else %}N/A{% endif %}">
+                    <button class="btn btn-default" id="export_traits">Download</button>
+                    <button class="btn btn-default" id="export_collection">Export Collection</button>
+                    <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Search Table For ...">
+                    <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Select Top ...">
+                    <button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button>
+                    <button id="remove" class="btn btn-danger" data-url="/collections/remove" type="button" disabled><i class="icon-minus-sign"></i> Remove</button>
+                </form>
+            </div>
+            <div style="margin-top: 10px; margin-bottom: 5px;" class="show-hide-container">
+                <b>Show/Hide Columns:&nbsp;&nbsp;</b>
+                <button class="toggle-vis" data-column="1">Index</button>
+                <button class="toggle-vis" data-column="2">Dataset</button>
+                <button class="toggle-vis" data-column="3">Record</button>
+                <button class="toggle-vis" data-column="4">Symbol</button>
+                <button class="toggle-vis" data-column="5">Description</button>
+                <button class="toggle-vis" data-column="6">Location</button>
+                <button class="toggle-vis" data-column="7">Mean</button>
+                <button class="toggle-vis" data-column="8">Peak -logP</button>
+                <button class="toggle-vis" data-column="9">Peak Location</button>
+                <button class="toggle-vis" data-column="10">Effect Size</button>
+            </div>
+            <div id="trait_table_container" style="width: 2000px; min-width: 1500px;">
+                <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
+                    <tbody>
+                        <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
+                    </tbody>
+                </table>
+            </div>
+            <br />
+        </div>
+    </div>
+
+<!-- End of body -->
+
+{% endblock %}
+
+{% block js %}
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
+
+    <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
+
+    <script type="text/javascript"
+	    src="/static/new/javascript/partial_correlations.js"></script>
+    <script type='text/javascript'>
+        var traitsJson = {{ traits_json|safe }};
+    </script>
+    <script language="javascript" type="text/javascript">
+        $(document).ready( function () {
+
+            tableId = "trait_table"
+
+            columnDefs = [
+                {
+                    'data': null,
+                    'width': "5px",
+                    'orderDataType': "dom-checkbox",
+                    'targets': 0,
+                    'render': function(data) {
+                        return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '" data-trait-info="' + data.trait_info_str + '">'
+                    }
+                },
+                {
+                    'title': "Index",
+                    'type': "natural",
+                    'width': "35px",
+                    'searchable': false,
+                    'orderable': false,
+                    'targets': 1,
+                    'render': function(data, type, row, meta) {
+                        return meta.row
+                    }
+                },
+                {
+                    'title': "Dataset",
+                    'type': "natural",
+                    'targets': 2,
+                    'data': "dataset"
+                },
+                {
+                    'title': "Record",
+                    'type': "natural-minus-na",
+                    'width': "120px",
+                    'targets': 3,
+                    'data': null,
+                    'render': function(data) {
+                        return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+                    }
+                },
+                {
+                    'title': "Symbol",
+                    'type': "natural",
+                    'targets': 4,
+                    'data': null,
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'symbol')){
+                            return data.symbol
+                        } else if (Object.hasOwn(data, 'name')){
+                            return data.name
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "Description",
+                    'type': "natural",
+                    'targets': 5,
+                    'data': null,
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'description')){
+                            try {
+                                return decodeURIComponent(escape(data.description))
+                            } catch(err){
+                                return escape(data.description)
+                            }
+                        } else if (Object.hasOwn(data, 'location')){
+                            return data.location
+                        } else if (Object.hasOwn(data, 'name')){
+                            return data.name
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Location</div>",
+                    'type': "natural-minus-na",
+                    'width': "125px",
+                    'targets': 6,
+                    'data': null,
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'location')){
+                            return data.location
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Mean</div>",
+                    'type': "natural-minus-na",
+                    'width': "60px",
+                    'data': null,
+                    'targets': 7,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'mean')){
+                            if (data.mean != 'N/A'){
+                                return data.mean.toFixed(3)
+                            } else {
+                                return "N/A"
+                            }
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "60px",
+                    'targets': 8,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'lrs_score')){
+                            return (data.lrs_score / 4.61).toFixed(3)
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Peak Location</div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "125px",
+                    'targets': 9,
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'lrs_location')){
+                            return data.lrs_location
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "85px",
+                    'targets': 10,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data) {
+                        if (Object.hasOwn(data, 'additive')){
+                            if (data.additive != "") {
+                                return data.additive.toFixed(3)
+                            } else {
+                                return "N/A"
+                            }
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                }
+            ]
+
+            tableSettings = {
+                "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                    $('td', row).eq(1).attr("align", "right");
+                    $('td', row).eq(1).attr('data-export', index+1);
+                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                    if ($('td', row).eq(5).text().length > 500) {
+                        $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 500));
+                        $('td', row).eq(5).text($('td', row).eq(5).text() + '...')
+                    }
+                    $('td', row).slice(6,11).attr("align", "right");
+                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+                    $('td', row).eq(10).attr('data-export', $('td', row).eq(9).text());
+                },
+                "order": [[1, "asc" ]],
+                {% if traits_json|length > 20 %}
+                "scroller": true
+                {% else %}
+                "scroller": false
+                {% endif %}
+            }
+
+            create_table(tableId, traitsJson, columnDefs, tableSettings)
+
+            submit_special = function(url) {
+                $("#collection_form").attr("action", url);
+                $("#collection_form").attr('target', '_blank').submit();
+                return false;
+            };
+
+            $("#delete").on("click", function() {
+                url = $(this).data("url")
+                $("#collection_form").attr("action", url);
+                return $("#collection_form").removeAttr('target').submit();
+            });
+
+            $("#remove").on("click", function() {
+                url = $(this).data("url")
+                traits = $("#trait_table input:checked").map(function() {
+                    return $(this).val();
+                }).get();
+                $("#trait_list").val(traits)
+                $("#collection_form").attr("action", url);
+                return $("#collection_form").removeAttr('target').submit();
+            });
+
+            $("#change_collection_name").on("click", function() {
+                if ($('input[name=new_collection_name]').css('display') == 'none') {
+                    $('input[name=new_collection_name]').css('display', 'inline');
+                    $('#collection_name').css('display', 'none');
+                } else {
+		    new_name = $('input[name=new_collection_name]').val();
+		    $('#frm-change-collection-name').submit();
+		    console.debug("We really should not get here, but, whatever...");
+                    $('input[name=new_collection_name]').css('display', 'none');
+                    $('input[name=collection_name]').val(new_name);
+                    $('#collection_name').text(new_name)
+                    $('#collection_name').css('display', 'inline');
+                }
+            });
+
+            make_default = function() {
+                alert("The current collection is now your default collection.")
+                let uc_id = $('#uc_id').val();
+                $.cookie('default_collection', uc_id, {
+                    expires: 365,
+                    path: '/'
+                });
+
+                let default_collection_id = $.cookie('default_collection');
+            };
+
+            $("#make_default").on("click", function(){
+                make_default();
+            });
+
+	    $("#heatmaps_form").submit(function(e) {
+		e.preventDefault();
+	    });
+
+	    function clear_heatmap_area() {
+		area = document.getElementById("clustered-heatmap-image-area");
+		area.querySelectorAll("*").forEach(function(child) {
+		    child.remove();
+		});
+	    }
+
+	    function generate_progress_indicator() {
+		count = 0;
+		default_message = "Computing"
+		return function() {
+		    message = default_message;
+		    if(count >= 10) {
+			count = 0;
+		    }
+		    for(i = 0; i < count; i++) {
+			message = message + " .";
+		    }
+		    clear_heatmap_area();
+		    $("#clustered-heatmap-image-area").append(
+			'<div class="alert alert-info"' +
+			    ' style="font-weigh: bold; font-size: 150%;">' +
+			    message + '</div>');
+		    count = count + 1;
+		};
+	    }
+
+	    function display_clustered_heatmap(heatmap_data) {
+		clear_heatmap_area();
+		image_area = document.getElementById("clustered-heatmap-image-area")
+		Plotly.newPlot(image_area, heatmap_data)
+	    }
+
+	    function process_clustered_heatmap_error(xhr, status, error) {
+		clear_heatmap_area()
+		$("#clustered-heatmap-image-area").append(
+		    $(
+			'<div class="alert alert-danger">ERROR: ' +
+			    xhr.responseJSON.message +
+			    '</div>'));
+	    }
+
+	    $("#clustered-heatmap").on("click", function() {
+		clear_heatmap_area();
+        $("#heatmap-options").show();
+		intv = window.setInterval(generate_progress_indicator(), 300);
+		vert_element = document.getElementById("heatmap-orient-vertical");
+		vert_true = vert_element == null ? false : vert_element.checked;
+		heatmap_url = $(this).attr("data-url")
+		traits = $(".trait_checkbox:checked").map(function() {
+		    return this.value
+		}).get();
+		$.ajax({
+		    type: "POST",
+		    url: heatmap_url,
+		    contentType: "application/json",
+		    data: JSON.stringify({
+			"traits_names": traits,
+			"vertical": vert_true
+		    }),
+		    dataType: "JSON",
+		    success: function(data, status, xhr) {
+			window.clearInterval(intv);
+			display_clustered_heatmap(data);
+		    },
+		    error: function(xhr, status, error) {
+			window.clearInterval(intv);
+			process_clustered_heatmap_error(xhr, status, error);
+		    }
+		});
+	    });
+
+        $("#clear-heatmap").on("click", function() {
+            clear_heatmap_area();
+            $("#heatmap-options").hide();
+        });
+
+        });
+    </script>
+
+
+{% endblock %}
+
diff --git a/gn2/wqflask/templates/collections/view_anonymous.html b/gn2/wqflask/templates/collections/view_anonymous.html
new file mode 100644
index 00000000..56323e10
--- /dev/null
+++ b/gn2/wqflask/templates/collections/view_anonymous.html
@@ -0,0 +1,143 @@
+{% extends "base.html" %}
+{% block title %}View Collection{% endblock %}
+{% block content %}
+<!-- Start of body -->
+    {% if uc %}
+        {{ header(uc.name,
+            'This collection has {}.'.format(numify(trait_obs|count, "record", "records"))) }}
+    {% else %}
+        {{ header('Your Collection',
+            'This collection has {}.'.format(numify(trait_obs|count, "record", "records"))) }}
+    {% endif %}
+    <div class="container">
+        <div class="page-header">
+            <h1>Your Collection</h1>
+            {% if uc %}
+            <h2>{{ uc.name }}</h2>
+            {% endif %}
+
+            <div class="form-group">
+            <form action="/collections/delete" method="post">
+                {% if uc %}
+                <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+                {% endif %}
+                <div class="col-xs-3 controls">
+                    <input type="submit" class="btn btn-danger" value="Delete this collection" />
+                </div>
+            </form>
+            <form action="/corr_matrix" method="post">
+                {% if uc %}
+                <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+                {% endif %}
+                <input type="hidden" name="trait_list" id="trait_list" value= "
+                {% for this_trait in trait_obs %}
+                    {{ this_trait.name }}:{{ this_trait.dataset.name }},
+                {% endfor %}" >
+                <div class="col-xs-2 controls">
+                    <input type="submit" class="btn btn-primary" value="Correlation Matrix" />
+                </div>
+            </form>
+            <form action="/heatmap" method="post">
+                {% if uc %}
+                <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+                {% endif %}
+                <input type="hidden" name="trait_list" id="trait_list" value= "
+                {% for this_trait in trait_obs %}
+                    {{ this_trait.name }}:{{ this_trait.dataset.name }},
+                {% endfor %}" >
+                <div class="col-xs-2 controls">
+                    <input type="submit" class="btn btn-primary" value="Heatmap" />
+                </div>
+            </form>
+            </div>
+
+            <!--
+            <form action="/corr_matrix" method="post">
+                {% if uc %}
+                <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+                {% endif %}
+                <input type="hidden" name="trait_list" id="trait_list" value= "
+                {% for this_trait in trait_obs %}
+                    {{ this_trait.name }}:{{ this_trait.dataset.name }},
+                {% endfor %}" >
+                <input type="submit"
+                       class="btn btn-small"
+                       value="Correlation Matrix" />
+            </form>
+            <form action="/heatmap" method="post">
+                {% if uc %}
+                <input type="hidden" name="uc_id" id="uc_id" value="{{ uc.id }}" />
+                {% endif %}
+                <input type="hidden" name="trait_list" id="trait_list" value= "
+                {% for this_trait in trait_obs %}
+                    {{ this_trait.name }}:{{ this_trait.dataset.name }},
+                {% endfor %}" >
+                <input type="submit"
+                       class="btn btn-small"
+                       value="Heatmap" />
+            </form>
+            -->
+        </div>
+
+
+
+        <div class="bs-docs-example">
+        <table class="table table-hover" id='trait_table'>
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>Record</th>
+                    <th>Description</th>
+                    <th>Location</th>
+                    <th>Mean</th>
+                    <th>Max LRS</th>
+                    <th>Max LRS Location</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {% for this_trait in trait_obs %}
+                <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}">
+                    <TD>
+                        <INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox"
+                               VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}">
+                    </TD>
+                    <TD>
+                        <a href="{{ url_for('show_trait_page',
+                                trait_id = this_trait.name,
+                                dataset = this_trait.dataset.name
+                                )}}">
+                            {{ this_trait.name }}
+                        </a>
+                    </TD>
+
+                    <TD>{{ this_trait.description_display }}</TD>
+                    <TD>{{ this_trait.location_repr }}</TD>
+                    <TD>{{ this_trait.mean }}</TD>
+                    <TD>{{ this_trait.LRS_score_repr }}</TD>
+                    <TD>{{ this_trait.LRS_location_repr }}</TD>
+
+                </TR>
+            {% endfor %}
+            </tbody>
+
+        </table>
+
+        <br />
+
+        <button class="btn" id="select_all"><i class="icon-ok"></i> Select All</button>
+        <button class="btn" id="deselect_all"><i class="icon-remove"></i> Deselect All</button>
+        <button class="btn" id="invert"><i class="icon-resize-vertical"></i> Invert</button>
+        <button class="btn" id="add" disabled="disabled"><i class="icon-plus-sign"></i> Add Record to Other Collection</button>
+        <button class="btn" id="remove" disabled="disabled"><i class="icon-minus-sign"></i> Remove Record</button>
+        <button class="btn btn-primary pull-right"><i class="icon-download icon-white"></i> Download Table</button>
+        </div>
+    </div>
+
+<!-- End of body -->
+
+{% endblock %}
+
+{% block js %}
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+{% endblock %}