hexagram: hexagram-6ae12361157c/hexagram/hexagram.js~ comparison

comparison hexagram-6ae12361157c/hexagram/hexagram.js~ @ 0:1407e3634bcf draft default tip

Uploaded r11 from test tool shed.

author	adam-novak
date	Tue, 22 Oct 2013 14:17:59 -0400
parents
children

comparison

equal deleted inserted replaced

--1:000000000000
+:1407e3634bcf
+// hexagram.js
+// Run the hexagram visualizer client.
+// Globals
+// This is a mapping from coordinates [x][y] in the global hex grid to signature
+// name
+var signature_grid = [];
+// This holds a global list of layer pickers in layer order. It is also the
+// authority on what layers are currently selected.
+var layer_pickers = [];
+// This holds a list of layer objects by name.
+// Layer objects have:
+// A downloading function "downloader"
+// A data object (from hex name to float) "data"
+// A magnitude "magnitude"
+// A boolean "selection" that specifies whether this is a user selection or not.
+// (This may be absent, which is the same as false.)
+// Various optional metadata fields
+var layers = {};
+// This is a list of layer names maintained in sorted order.
+var layer_names_sorted = [];
+// This is a list of the map-layour names mantained in order of entry
+var layout_names = [];
+// This holds an array of layer names that the user has added to the "shortlist"
+// They can be quickly selected for display.
+var shortlist = [];
+// This holds an object form shortlisted layer names to jQuery shortlist UI
+// elements, so we can efficiently tell if e.g. one is selected.
+var shortlist_ui = {};
+// This is a list of layer names whose intersection checkbox has been selected.
+var shortlist_intersection = [];
+//This is the number of intersection checkboxes that have been selected.
+var shortlist_intersection_num = 0;
+// This is a list of layer names whose union checkbox has been selected.
+var shortlist_union = [];
+//This is the number of union checkboxes that have been selected.
+var shortlist_union_num = 0;
+//This is a list of layer names whose set difference checkbox has been selected.
+var shortlist_set_difference = [];
+// This is the number of set difference checkboxes that have been selected.
+var shortlist_set_difference_num = 0;
+// This is a list of the layer names whose symmetric difference checkbox
+// has been selected.
+var shortlist_symmetric_difference = [];
+// This is the number of symmetric difference checkboxes that have been
+// selected.
+var shortlist_symmetric_difference_num = 0;
+// This is an array containing the layer whose absolute complement checkbox
+// has been selected.
+var shortlist_absolute_complement = [];
+// This is the number of absolute complement checkboxes that have been selected.
+var shortlist_absolute_complement_num = 0;
+// Records number of set-operation clicks
+var set_operation_clicks = 0;
+// Boolean stating whether this is the first time the set operation popup
+// has been created so that "Select Layer" Default is added only once
+var first_opening = true;
+// Boolean for Creating Layer from Filter
+var created = false;
+// Stores the Name of Current Layer Displayed
+var current_layout_name;
+// This holds colormaps (objects from layer values to category objects with a
+// name and color). They are stored under the name of the layer they apply to.
+var colormaps = {}
+// This holds an array of the available score matrix filenames
+var available_matrices = [];
+// This holds the Google Map that we use for visualization
+var googlemap = null;
+// This is the global Google Maps info window. We only want one hex to have its
+// info open at a time.
+var info_window = null;
+// This holds the signature name of the hex that the info window is currently
+// about.
+var selected_signature = undefined;
+// Which tool is the user currently using (string name or undefined for no tool)
+// TODO: This is a horrible hack, replace it with a unified tool system at once.
+var selected_tool = undefined;
+// This holds the grid of hexagon polygons on that Google Map.
+var polygon_grid = [];
+// This holds an object of polygons by signature name
+var polygons = {};
+// How big is a hexagon in google maps units? This gets filled in once we have
+// the hex assignment data. (This is really the side length.)
+var hex_size;
+// This holds a handle for the currently enqueued view redrawing timeout.
+var redraw_handle;
+// This holds all the currently active tool event listeners.
+// They are indexed by handle, and are objects with a "handler" and an "event".
+var tool_listeners = {};
+// This holds the next tool listener handle to give out
+var tool_listener_next_id = 0;
+// This holds the next selection number to use. Start at 1 since the user sees
+// these.
+var selection_next_id = 1;
+// This is a pool of statistics Web Workers.
+var rpc_workers = [];
+// This holds which RPC worker we ought to give work to next.
+// TODO: Better scheduling, and wrap all this into an RPC object.
+var next_free_worker = 0;
+// This holds how namy RPC jobs are currently running
+var jobs_running = 0;
+// This is the object of pending callbacks by RPC id
+var rpc_callbacks = {};
+// This is the next unallocated RPC id
+var rpc_next_id = 0;
+// How many statistics Web Workers should we start?
+var NUM_RPC_WORKERS = 10;
+// What's the minimum number of pixels that hex_size must represent at the
+// current zoom level before we start drawing hex borders?
+var MIN_BORDER_SIZE = 10;
+// And how thick should the border be when drawn?
+var HEX_STROKE_WEIGHT = 2;
+// How many layers do we know how to draw at once?
+var MAX_DISPLAYED_LAYERS = 2;
+// How many layer search results should we display at once?
+var SEARCH_PAGE_SIZE = 10;
+// How big is our color key in pixels?
+var KEY_SIZE = 100;
+// This is an array of all Google Maps events that tools can use.
+var TOOL_EVENTS = [
+"click",
+"mousemove"
+];
+// This is a global variable that keeps track of the current Goolge Map zoom
+// This is needed to keep viewing consistent across layouts
+var global_zoom = 0;
+function print(text) {
+// Print some logging text to the browser console
+if(console && console.log) {
+// We know the console exists, and we can log to it.
+console.log(text);
+}
+}
+function complain(text) {
+// Display a temporary error message to the user.
+$("#error-notification").text(text);
+$(".error").show().delay(1250).fadeOut(1000);
+if(console && console.error) {
+// Inform the browser console of this problem.as
+console.error(text);
+}
+}
+function make_hexagon(row, column, hex_side_length, grid_offset) {
+// Make a new hexagon representing the hexagon at the given grid coordinates.
+// hex_side_length is the side length of hexagons in Google Maps world
+// coordinate units. grid_offset specifies a distance to shift the whole
+// grid down and right from the top left corner of the map. This lets us
+// keep the whole thing away from the edges of the "earth", where Google
+// Maps likes to wrap.
+// Returns the Google Maps polygon.
+// How much horizontal space is needed per hex on average, stacked the
+// way we stack them (wiggly)?
+var hex_column_width = 3.0/2.0 * hex_side_length;
+// How tall is a hexagon?
+var hex_height = Math.sqrt(3) * hex_side_length;
+// How far apart are hexagons on our grid, horizontally (world coordinate units)?
+var hex_padding_horizontal = 0;
+// And vertically (world coordinate units)?
+var hex_padding_veritcal = 0;
+// First, what are x and y in 0-256 world coordinates fo this grid position?
+var x = column * (hex_column_width + hex_padding_horizontal);
+var y = row * (hex_height + hex_padding_veritcal);
+if(column % 2 == 1) {
+// Odd columns go up
+y -= hex_height / 2;
+}
+// Apply the grid offset to this hex
+x += grid_offset;
+y += grid_offset;
+// That got X and Y for the top left corner of the bounding box. Shift to
+// the center.
+x += hex_side_length;
+y += hex_height / 2;
+// Offset the whole thing so no hexes end up off the map when they wiggle up
+y += hex_height / 2;
+// This holds an array of all the hexagon corners
+var coords = [
+get_LatLng(x - hex_side_length, y),
+get_LatLng(x - hex_side_length / 2, y - hex_height / 2),
+get_LatLng(x + hex_side_length / 2, y - hex_height / 2),
+get_LatLng(x + hex_side_length, y),
+get_LatLng(x + hex_side_length / 2, y + hex_height / 2),
+get_LatLng(x - hex_side_length / 2, y + hex_height / 2),
+];
+// We don't know whether the hex should start with a stroke or not without
+// looking at the current zoom level.
+// Get the current zoom level (low is out)
+var zoom = googlemap.getZoom();
+// API docs say: pixelCoordinate = worldCoordinate * 2 ^ zoomLevel
+// So this holds the number of pixels that the global length hex_size
+// corresponds to at this zoom level.
+var hex_size_pixels = hex_size * Math.pow(2, zoom);
+// Construct the Polygon
+var hexagon = new google.maps.Polygon({
+paths: coords,
+strokeColor: "#000000",
+strokeOpacity: 1.0,
+// Only turn on the border if we're big enough
+strokeWeight: hex_size_pixels < MIN_BORDER_SIZE ? 0 : HEX_STROKE_WEIGHT,
+fillColor: "#FF0000",
+fillOpacity: 1.0
+});
+// Attach the hexagon to the global map
+hexagon.setMap(googlemap);
+// Set up the click listener to move the global info window to this hexagon
+// and display the hexagon's information
+google.maps.event.addListener(hexagon, "click", function(event) {
+if(selected_tool == undefined) {
+// The user isn't trying to use a tool currently, so we can use
+// their clicks for the infowindow.
+// Remove the window from where it currently is
+info_window.close();
+// Place the window in the center of this hexagon.
+info_window.setPosition(get_LatLng(x, y));
+// Record that this signature is selected now
+selected_signature = hexagon.signature;
+// Calculate the window's contents and make it display them.
+redraw_info_window();
+}
+});
+// Subscribe the tool listeners to events on this hexagon
+subscribe_tool_listeners(hexagon);
+return hexagon;
+}
+function set_hexagon_signature(hexagon, text) {
+// Given a polygon representing a hexagon, set the signature that the
+// hexagon represents.
+hexagon.signature = text;
+}
+function set_hexagon_color(hexagon, color) {
+// Given a polygon, set the hexagon's current background
+// color.
+hexagon.setOptions({
+fillColor: color
+});
+}
+function set_hexagon_stroke_weight(hexagon, weight) {
+// Given a polygon, set the weight of hexagon's border stroke, in number of
+// screen pixels.
+hexagon.setOptions({
+strokeWeight: weight
+});
+}
+function redraw_info_window() {
+// Set the contents of the global info window to reflect the currently
+// visible information about the global selected signature.
+if(selected_signature == undefined) {
+// No need to update anything
+return;
+}
+// Go get the infocard that goes in the info_window and, when it's
+// prepared, display it.
+with_infocard(selected_signature, function(infocard) {
+// The [0] is supposed to get the DOM element from the jQuery
+// element.
+info_window.setContent(infocard[0]);
+// Open the window. It may already be open, or it may be closed but
+// properly positioned and waiting for its initial contents before
+// opening.
+info_window.open(googlemap);
+});
+}
+function with_infocard(signature, callback) {
+// Given a signature, call the callback with a jQuery element representing
+// an "info card" about that signature. It's the contents of the infowindow
+// that we want to appear when the user clicks on the hex representing this
+// signature, and it includes things like the signature name and its values
+// under any displayed layers (with category names if applicable).
+// We return by callback because preparing the infocard requires reading
+// from the layers, which are retrieved by callback.
+// TODO: Can we say that we will never have to download a layer here and
+// just directly access them? Is that neater or less neat?
+// Using jQuery to build this saves us from HTML injection by making jQuery
+// do all the escaping work (we only ever set text).
+function row(key, value) {
+// Small helper function that returns a jQuery element that displays the
+// given key being the given value.
+// This holds the root element of the row
+var root = $("<div/>").addClass("info-row");
+// Add the key and value elements
+root.append($("<div/>").addClass("info-key").text(key));
+root.append($("<div/>").addClass("info-value").text(value));
+return root;
+}
+// This holds a list of the string names of the currently selected layers,
+// in order.
+// Just use everything on the shortlist.
+var current_layers = shortlist;
+// Obtain the layer objects (mapping from signatures/hex labels to colors)
+with_layers(current_layers, function(retrieved_layers) {
+// This holds the root element of the card.
+var infocard = $("<div/>").addClass("infocard");
+infocard.append(row("Name", signature).addClass("info-name"));
+for(var i = 0; i < current_layers.length; i++) {
+// This holds the layer's value for this signature
+var layer_value = retrieved_layers[i].data[signature];
+if(have_colormap(current_layers[i])) {
+// This is a color map
+// This holds the category object for this category number, or
+// undefined if there isn't one.
+var category = colormaps[current_layers[i]][layer_value];
+if(category != undefined) {
+// There's a specific entry for this category, with a
+// human-specified name and color.
+// Use the name as the layer value
+layer_value = category.name;
+}
+}
+if(layer_value == undefined) {
+// Let the user know that there's nothing there in this layer.
+layer_value = "<undefined>";
+}
+// Make a listing for this layer's value
+infocard.append(row(current_layers[i], layer_value));
+}
+// Return the infocard by callback
+callback(infocard);
+});
+}
+function add_layer_url(layer_name, layer_url, attributes) {
+// Add a layer with the given name, to be downloaded from the given URL, to
+// the list of available layers.
+// Attributes is an object of attributes to copy into the layer.
+// Store the layer. Just keep the URL, since with_layer knows what to do
+// with it.
+layers[layer_name] = {
+url: layer_url,
+data: undefined,
+magnitude: undefined
+};
+for(var name in attributes) {
+// Copy over each specified attribute
+layers[layer_name][name] = attributes[name];
+}
+// Add it to the sorted layer list.
+layer_names_sorted.push(layer_name);
+// Don't sort because our caller does that when they're done adding layers.
+}
+function add_layer_data(layer_name, data, attributes) {
+// Add a layer with the given name, with the given data to the list of
+// available layers.
+// Attributes is an object of attributes to copy into the layer.
+// Store the layer. Just put in the data. with_layer knows what to do if the
+// magnitude isn't filled in.
+layers[layer_name] = {
+url: undefined,
+data: data,
+magnitude: undefined
+};
+	var check_layer_exists = layers[layer_name];
+for(var name in attributes) {
+// Copy over each specified attribute
+layers[layer_name][name] = attributes[name];
+}
+// Add it to the sorted layer list and sort
+layer_names_sorted.push(layer_name);
+// Don't sort because our caller does that when they're done adding layers.
+}
+function with_layer(layer_name, callback) {
+// Run the callback, passing it the layer (object from hex label/signature
+// to float) with the given name.
+// This is how you get layers, and allows for layers to be downloaded
+// dynamically.
+// have_layer must return true for the given name.
+// First get what we have stored for the layer
+var layer = layers[layer_name];
+	var data_val = layer.data;
+if(layer.data == undefined) {
+// We need to download the layer.
+print("Downloading \"" + layer.url + "\"");
+// Go get it (as text!)
+$.get(layer.url, function(layer_tsv_data) {
+// This is the TSV as parsed by our TSV-parsing plugin
+var layer_parsed = $.tsv.parseRows(layer_tsv_data);
+// This is the layer we'll be passing out. Maps from
+// signatures to floats on -1 to 1.
+var layer_data = {};
+for(var j = 0; j < layer_parsed.length; j++) {
+// This is the label of the hex
+var label = layer_parsed[j][0];
+if(label == "") {
+// Skip blank lines
+continue;
+}
+// This is the heat level (-1 to 1)
+var heat = parseFloat(layer_parsed[j][1]);
+// Store in the layer
+layer_data[label] = heat;
+}
+// Save the layer data locally
+layers[layer_name].data = layer_data;
+// Now the layer has been properly downloaded, but it may not have
+// metadata. Recurse with the same callback to get metadata.
+with_layer(layer_name, callback);
+}, "text");
+} else if(layer.magnitude == undefined) {
+// We've downloaded it already, or generated it locally, but we don't
+// know the magnitude. Compute that and check if it's a colormap.
+// Grab the data, which we know is defined.
+var layer_data = layers[layer_name].data;
+// Store the maximum magnitude in the layer
+// -1 is a good starting value since this always comes out positive
+var magnitude = -1;
+// We also want to know if all layer entries are non-negative
+// integers (and it is thus valid as a colormap).
+// If so, we want to display it as a colormap, so we will add an
+// empty entry to the colormaps object (meaning we should
+// auto-generate the colors on demand).
+// This stores whether the layer is all integrs
+all_nonnegative_integers = true;
+for(var signature_name in layer_data) {
+// Take the new max if it's bigger (and thus not something silly
+// like NaN).
+// This holds the potential new max magnitude.
+var new_magnitude = Math.abs(layer_data[signature_name]);
+if(new_magnitude > magnitude) {
+magnitude = new_magnitude;
+}
+if(layer_data[signature_name] % 1 !== 0 ||
+layer_data[signature_name] < 0 ) {
+// If we have an illegal value for a colormap, record that
+// fact
+// See http://stackoverflow.com/a/3886106
+all_nonnegative_integers = false;
+}
+}
+// Save the layer magnitude for later.
+layer.magnitude = magnitude;
+if(!have_colormap(layer_name) && all_nonnegative_integers) {
+// Add an empty colormap for this layer, so that
+// auto-generated discrete colors will be used.
+// TODO: Provide some way to override this if you really do want
+// to see integers as a heatmap?
+// The only overlap with the -1 to 1 restricted actual layers
+// is if you have a data set with only 0s and 1s. Is it a
+// heatmap layer or a colormap layer?
+colormaps[layer_name] = {};
+print("Inferring that " + layer_name +
+" is really a colormap");
+}
+// Now layer metadata has been filled in. Call the callback.
+callback(layer);
+} else {
+// It's already downloaded, and already has metadata.
+// Pass it to our callback
+callback(layer);
+}
+}
+function with_layers(layer_list, callback) {
+// Given an array of layer names, call the callback with an array of the
+// corresponding layer objects (objects from signatures to floats).
+// Conceptually it's like calling with_layer several times in a loop, only
+// because the whole thing is continuation-based we have to phrase it in
+// terms of recursion.
+// See http://marijnhaverbeke.nl/cps/
+// "So, we've created code that does exactly the same as the earlier
+// version, but is twice as confusing."
+if(layer_list.length == 0) {
+// Base case: run the callback with an empty list
+callback([]);
+} else {
+// Recursive case: handle the last thing in the list
+with_layers(layer_list.slice(0, layer_list.length - 1),
+function(rest) {
+// We've recursively gotten all but the last layer
+// Go get the last one, and pass the complete array to our callback.
+with_layer(layer_list[layer_list.length - 1],
+function(last) {
+// Mutate the array. Shouldn't matter because it won't matter
+// for us if callback does it.
+rest.push(last);
+// Send the complete array to the callback.
+callback(rest);
+});
+});
+}
+}
+function have_layer(layer_name) {
+// Returns true if a layer exists with the given name, false otherwise.
+return layers.hasOwnProperty(layer_name);
+}
+function make_shortlist_ui(layer_name) {
+// Return a jQuery element representing the layer with the given name in the
+// shortlist UI.
+// This holds the root element for this shortlist UI entry
+var root = $("<div/>").addClass("shortlist-entry");
+root.data("layer", layer_name);
+// If this is a selection, give the layer a special class
+// TODO: Justify not having to use with_layer because this is always known
+// client-side
+if(layers[layer_name].selection) {
+root.addClass("selection");
+}
+// We have some configuration stuff and then the div from the dropdown
+// This holds all the config stuff
+var controls = $("<div/>").addClass("shortlist-controls");
+// Add a remove link
+var remove_link = $("<a/>").addClass("remove").attr("href", "#").text("X");
+controls.append(remove_link);
+// Add a checkbox for whether this is enabled or not
+var checkbox = $("<input/>").attr("type", "checkbox").addClass("layer-on");
+controls.append(checkbox);
+root.append(controls);
+var contents = $("<div/>").addClass("shortlist-contents");
+// Add the layer name
+contents.append($("<span/>").text(layer_name));
+// Add all of the metadata. This is a div to hold it
+var metadata_holder = $("<div/>").addClass("metadata-holder");
+// Fill it in
+fill_layer_metadata(metadata_holder, layer_name);
+contents.append(metadata_holder);
+	// Add a div to hold the filtering stuff so it wraps together.
+var filter_holder = $("<div/>").addClass("filter-holder");
+// Add an image label for the filter control.
+// TODO: put this in a label
+	var filter_image = $("<img/>").attr("src", "filter.svg");
+filter_image.addClass("control-icon");
+	filter_image.addClass("filter-image");
+filter_image.attr("title", "Filter on Layer");
+filter_image.addClass("filter");
+// Add a control for filtering
+var filter_control = $("<input/>").attr("type", "checkbox");
+filter_control.addClass("filter-on");
+filter_holder.append(filter_image);
+filter_holder.append(filter_control);
+// Add a text input to specify a filtering threshold for continuous layers
+var filter_threshold = $("<input/>").addClass("filter-threshold");
+// Initialize to a reasonable value.
+filter_threshold.val(0);
+filter_holder.append(filter_threshold);
+// Add a select input to pick from a discrete list of values to filter on
+var filter_value = $("<select/>").addClass("filter-value");
+	filter_holder.append(filter_value);
+	// Add a image for the save function
+	var save_filter = $("<img/>").attr("src", "save.svg");
+	save_filter.addClass("save-filter");
+	save_filter.attr("title", "Save Filter as Layer");
+	contents.append(filter_holder);
+	contents.append(save_filter);
+if(layers[layer_name].selection) {
+// We can do statistics on this layer.
+// Add a div to hold the statistics stuff so it wraps together.
+var statistics_holder = $("<div/>").addClass("statistics-holder");
+// Add an icon
+var statistics_image = $("<img/>").attr("src", "statistics.svg");
+statistics_image.addClass("control-icon");
+statistics_image.attr("title", "Statistics Group");
+statistics_holder.append(statistics_image);
+// Label the "A" radio button.
+var a_label = $("<span/>").addClass("radio-label").text("A");
+statistics_holder.append(a_label);
+// Add a radio button for being the "A" group
+var statistics_a_control = $("<input/>").attr("type", "radio");
+statistics_a_control.attr("name", "statistics-a");
+statistics_a_control.addClass("statistics-a");
+// Put the layer name in so it's easy to tell which layer is A.
+statistics_a_control.data("layer-name", layer_name);
+statistics_holder.append(statistics_a_control);
+// And a link to un-select it if it's selected
+var statistics_a_clear = $("<a/>").attr("href", "#").text("X");
+statistics_a_clear.addClass("radio-clear");
+statistics_holder.append(statistics_a_clear);
+// Label the "B" radio button.
+var b_label = $("<span/>").addClass("radio-label").text("B");
+statistics_holder.append(b_label);
+// Add a radio button for being the "B" group
+var statistics_b_control = $("<input/>").attr("type", "radio");
+statistics_b_control.attr("name", "statistics-b");
+statistics_b_control.addClass("statistics-b");
+// Put the layer name in so it's easy to tell which layer is A.
+statistics_b_control.data("layer-name", layer_name);
+statistics_holder.append(statistics_b_control);
+// And a link to un-select it if it's selected
+var statistics_b_clear = $("<a/>").attr("href", "#").text("X");
+statistics_b_clear.addClass("radio-clear");
+statistics_holder.append(statistics_b_clear);
+contents.append(statistics_holder);
+// Statistics UI logic
+// Make the clear links work
+statistics_a_clear.click(function() {
+statistics_a_control.prop("checked", false);
+});
+statistics_b_clear.click(function() {
+statistics_b_control.prop("checked", false);
+});
+}
+// Add a div to contain layer settings
+var settings = $("<div/>").addClass("settings");
+// Add a slider for setting the min and max for drawing
+var range_slider = $("<div/>").addClass("range range-slider");
+settings.append($("<div/>").addClass("stacker").append(range_slider));
+// And a box that tells us what we have selected in the slider.
+var range_display = $("<div/>").addClass("range range-display");
+range_display.append($("<span/>").addClass("low"));
+range_display.append(" to ");
+range_display.append($("<span/>").addClass("high"));
+settings.append($("<div/>").addClass("stacker").append(range_display));
+contents.append(settings);
+root.append(contents);
+// Handle enabling and disabling
+checkbox.change(function() {
+if($(this).is(":checked") && get_current_layers().length >
+MAX_DISPLAYED_LAYERS) {
+// Enabling this checkbox puts us over the edge, so un-check it
+$(this).prop("checked", false);
+// Skip the redraw
+return;
+}
+refresh();
+});
+// Run the removal process
+remove_link.click(function() {
+// Remove this layer from the shortlist
+shortlist.splice(shortlist.indexOf(layer_name), 1);
+// Remove this from the DOM
+root.remove();
+// Make the UI match the list.
+update_shortlist_ui();
+if(checkbox.is(":checked") || filter_control.is(":checked")) {
+// Re-draw the view since we were selected (as coloring or filter)
+// before removal.
+refresh();
+}
+});
+// Functionality for turning filtering on and off
+filter_control.change(function() {
+if(filter_control.is(":checked")) {
+// First, figure out what kind of filter settings we take based on
+// what kind of layer we are.
+with_layer(layer_name, function(layer) {
+if(have_colormap(layer_name)) {
+// A discrete layer.
+// Show the value picker.
+filter_value.show();
+// Make sure we have all our options
+if(filter_value.children().length == 0) {
+// No options available. We have to add them.
+// TODO: Is there a better way to do this than asking
+// the DOM?
+for(var i = 0; i < layer.magnitude + 1; i++) {
+// Make an option for each value.
+var option = $("<option/>").attr("value", i);
+if(colormaps[layer_name].hasOwnProperty(i)) {
+// We have a real name for this value
+option.text(colormaps[layer_name][i].name);
+} else {
+// No name. Use the number.
+option.text(i);
+}
+filter_value.append(option);
+}
+// Select the last option, so that 1 on 0/1 layers will
+// be selected by default.
+filter_value.val(
+filter_value.children().last().attr("value"));
+}
+} else {
+// Not a discrete layer, so we take a threshold.
+filter_threshold.show();
+}
+				save_filter.show ();
+				save_filter.button().click(function() {
+				// Configure Save Filter Buttons
+					// Get selected value
+					var selected = filter_value.prop("selectedIndex");
+					var value = filter_value.val();
+					var signatures = [];
+					// Gather Tumor-ID Signatures with value and push to "signatures"
+					for (hex in polygons){
+						if (layer.data[hex] == value){
+								signatures.push(hex);
+						}
+					}
+					// Create Layer
+					if (created == false) {
+						select_list (signatures, "user selection");
+						created = true;
+					}
+					created = false;
+				});
+				// Now that the right controls are there, assume they have
+refresh();
+});
+} else {
+			created = false;
+// Hide the filtering settings
+filter_value.hide();
+filter_threshold.hide();
+save_filter.hide();
+// Draw view since we're no longer filtering on this layer.
+refresh();
+}
+});
+// Respond to changes to filter configuration
+filter_value.change(refresh);
+// TODO: Add a longer delay before refreshing here so the user can type more
+// interactively.
+filter_threshold.keyup(refresh);
+// Configure the range slider
+// First we need a function to update the range display, which we will run
+// on change and while sliding (to catch both user-initiated and
+//programmatic changes).
+var update_range_display = function(event, ui) {
+range_display.find(".low").text(ui.values[0].toFixed(3));
+range_display.find(".high").text(ui.values[1].toFixed(3));
+}
+range_slider.slider({
+range: true,
+min: -1,
+max: 1,
+values: [-1, 1],
+step: 1E-9, // Ought to be fine enough
+slide: update_range_display,
+change: update_range_display,
+stop: function(event, ui) {
+// The user has finished sliding
+// Draw the view. We will be asked for our values
+refresh();
+}
+});
+// When we have time, go figure out whether the slider should be here, and
+// what its end values should be.
+reset_slider(layer_name, root)
+return root;
+}
+// ____________________________________________________________________________
+// Replacement Set Operation Code
+// ____________________________________________________________________________
+function get_set_operation_selection () {
+	// For the new dop-down GUI for set operation selection
+	// we neeed a function to determine which set operation is selected.
+	// This way we can display the appropriate divs.
+	// Drop Down List & Index for Selected Element
+	var drop_down = document.getElementById("set-operations-list");
+	var index = drop_down.selectedIndex;
+	var selection = drop_down.options[index];
+	return selection;
+}
+function show_set_operation_drop_down () {
+	// Show Set Operation Drop Down Menu
+	document.getElementsByClassName("set-operation-col")[0].style.visibility="visible";
+	document.getElementsByClassName("set-operation-panel-holder")[0].style.visibility="visible";
+	document.getElementsByClassName("set-operation-panel")[0].style.visibility="visible";
+	document.getElementById("set-operations").style.visibility="visible";
+	document.getElementsByClassName("set-operation-panel-title")[0].style.visibility="visible";
+	document.getElementsByClassName("set-operation-panel-contents")[0].style.visibility="visible";
+}
+function hide_set_operation_drop_down () {
+	// Hide Set Operation Drop Down Menu
+	document.getElementsByClassName("set-operation-col")[0].style.visibility="hidden";
+	document.getElementsByClassName("set-operation-panel-holder")[0].style.visibility="hidden";
+	document.getElementsByClassName("set-operation-panel")[0].style.visibility="hidden";
+	document.getElementById("set-operations").style.visibility="hidden";
+	document.getElementsByClassName("set-operation-panel-title")[0].style.visibility="hidden";
+	document.getElementsByClassName("set-operation-panel-contents")[0].style.visibility="hidden";
+	// Hide the Data Values for the Selected Layers
+	var drop_downs_layer_values = document.getElementsByClassName("set-operation-layer-value");
+	for (var i = 0; i < drop_downs_layer_values.length; i++) {
+				drop_downs_layer_values[i].style.visibility="hidden";
+	}
+	// Hide the Compute Button
+	var compute_button = document.getElementsByClassName("compute-button");
+	compute_button[0].style.visibility = "hidden";
+	// Set the "Select Layer" drop down to the default value
+	var list = document.getElementById("set-operations-list");
+	list.selectedIndex = 0;
+	var list_value = document.getElementsByClassName("set-operation-value");
+	list_value[0].selectedIndex = 0;
+	list_value[1].selectedIndex = 0;
+	// Remove all elements from drop downs holding the data values for the
+	// selected layers. This way there are no values presented when the user
+	// clicks on the set operation button to open it again.
+	var set_operation_layer_values = document.getElementsByClassName("set-operation-layer-value");
+	var length = set_operation_layer_values[0].options.length;
+	do{
+		set_operation_layer_values[0].remove(0);
+		length--;
+	}
+	while (length > 0);
+	var length = set_operation_layer_values[1].options.length;
+	do{
+		set_operation_layer_values[1].remove(0);
+		length--;
+	}
+	while (length > 0);
+}
+function create_set_operation_ui () {
+	// Returns a Jquery element that is then prepended to the existing
+	// set theory drop-down menu
+// This holds the root element for this set operation UI
+var root = $("<div/>").addClass("set-operation-entry");
+	// Add Drop Downs to hold the selected layers and and selected data values
+var set_theory_value1 = $("<select/>").addClass("set-operation-value");
+	var set_theory_layer_value1 = $("<select/>").addClass("set-operation-layer-value");
+	var set_theory_value2 = $("<select/>").addClass("set-operation-value");
+	var set_theory_layer_value2 = $("<select/>").addClass("set-operation-layer-value");
+	var compute_button = $("<input/>").attr("type", "button");
+	compute_button.addClass ("compute-button");
+	// Append to Root
+	root.append (set_theory_value1);
+	root.append (set_theory_layer_value1);
+	root.append (set_theory_value2);
+	root.append (set_theory_layer_value2);
+	root.append (compute_button);
+	return root;
+}
+function update_set_operation_drop_down () {
+	// This is the onchange command for the drop down displaying the
+	// different set operation functions. It is called whenever the user changes
+	// the selected set operation.
+	// Get the value of the set operation selection made by the user.
+	var selection = get_set_operation_selection();
+	var value = selection.value;
+	// Check if the selectin value is that of one of set operation functions
+	if (selection.value == 1 || selection.value == 2
+		|| selection.value == 3 || selection.value == 4
+		|| selection.value == 5){
+			// Make the drop downs that hold layer names and data values visible
+			var drop_downs = document.getElementsByClassName("set-operation-value");
+			var drop_downs_layer_values = document.getElementsByClassName("set-operation-layer-value");
+			for (var i = 0; i < drop_downs.length; i++) {
+				drop_downs[i].style.visibility="visible";
+			}
+			for (var i = 0; i < drop_downs_layer_values.length; i++) {
+				drop_downs_layer_values[i].style.visibility="visible";
+			}
+			var compute_button = document.getElementsByClassName("compute-button");
+			compute_button[0].style.visibility = "visible";
+			compute_button[0].value = "Compute Set Operation";
+			if (first_opening == true) {
+				// Set the default value for the drop down, holding the selected layers
+				var default_value = document.createElement("option");
+				default_value.text = "Select Layer 1";
+				default_value.value = 0;
+				drop_downs[0].add(default_value);
+				var default_value2 = document.createElement("option");
+				default_value2.text = "Select Layer 2";
+				default_value2.value = 0;
+				drop_downs[1].add(default_value2);
+				// Prevent from adding the default value again
+				first_opening = false;
+			}
+			// Hide the second set of drop downs if "Not:" is selected
+			if (selection.value == 5) {
+				drop_downs[1].style.visibility="hidden";
+				drop_downs_layer_values[1].style.visibility="hidden";
+			}
+	}
+	else {
+		// If the user has the default value selected, hide all drop downs
+		var drop_downs = document.getElementsByClassName("set-operation-value");
+		for (var i = 0; i < drop_downs.length; i++) {
+			drop_downs[i].style.visibility="hidden";
+		}
+		var drop_downs_layer_values = document.getElementsByClassName("set-operation-layer-value");
+		for (var i = 0; i < drop_downs_layer_values.length; i++) {
+				drop_downs_layer_values[i].style.visibility="hidden";
+		}
+		var compute_button = document.getElementsByClassName("compute-button");
+			compute_button[0].style.visibility = "hidden";
+	}
+}
+function update_set_operation_selections () {
+	// This function is called when the shorlist is changed.
+	// It appropriately updates the drop down containing the list of layers
+	// to match the layers found in the shortlist.
+	// Get the list of all layers
+	var layers = [];
+	$("#shortlist").children().each(function(index, element) {
+	 	// Get the layer name
+var layer_name = $(element).data("layer");
+		layers.push(layer_name);
+	});
+	// Get a list of all drop downs that contain layer names
+	var drop_downs = document.getElementsByClassName("set-operation-value");
+	// Remove all existing layer names from both dropdowns
+	var length = drop_downs[0].options.length;
+	do{
+		drop_downs[0].remove(0);
+		length--;
+	}
+	while (length > 0);
+	var length = drop_downs[1].options.length;
+	do{
+		drop_downs[1].remove(0);
+		length--;
+	}
+	while (length > 0);
+	// Add the default values that were stripped in the last step.
+	var default_value = document.createElement("option");
+	default_value.text = "Select Layer 1";
+	default_value.value = 0;
+	drop_downs[0].add(default_value);
+	var default_value2 = document.createElement("option");
+	default_value2.text = "Select Layer 2";
+	default_value2.value = 0;
+	drop_downs[1].add(default_value2);
+	first_opening = false;
+	// Add the layer names from the shortlist to the drop downs that store
+	// layer names.
+	for (var i = 0; i < drop_downs.length; i++){
+		for (var j = 0; j < layers.length; j++) {
+			var option = document.createElement("option");
+			option.text = layers[j];
+			option.value = j+1;
+			drop_downs[i].add(option);
+		}
+	}
+	// Remove all elements from drop downs holding the data values for the
+	// selected layers. This way there are no values presented when the user
+	// clicks on the set operation button to open it again.
+	var set_operation_layer_values = document.getElementsByClassName("set-operation-layer-value");
+	var length = set_operation_layer_values[0].options.length;
+	do{
+		set_operation_layer_values[0].remove(0);
+		length--;
+	}
+	while (length > 0);
+	var length = set_operation_layer_values[1].options.length;
+	do{
+		set_operation_layer_values[1].remove(0);
+		length--;
+	}
+	while (length > 0);
+	// Call the function containing onchange commands for these dropdowns.
+	// This way the data values are updated according the the selected layer.
+	update_set_operation_data_values ();
+}
+function update_set_operation_data_values () {
+	// Define the onchange commands for the drop downs that hold layer names.
+	// This way the data values are updated according the the selected layer.
+	// Get all drop down elements
+	var selected_function = document.getElementById ("set-operations-list");
+	var drop_downs = document.getElementsByClassName("set-operation-value");
+	var set_operation_layer_values = document.getElementsByClassName("set-operation-layer-value");
+	// The "Select Layer1" Dropdown onchange function
+	drop_downs[0].onchange = function(){
+		// Strip current values of the data value dropdown
+		var length = set_operation_layer_values[0].options.length;
+		do{
+			set_operation_layer_values[0].remove(0);
+			length--;
+		}
+		while (length > 0);
+		// Add the data values depending on the selected layer
+		var selectedIndex = drop_downs[0].selectedIndex;
+		var layer_name = drop_downs[0].options[selectedIndex].text;
+		var set_operation_data_value_select = set_operation_layer_values[0];
+		create_set_operation_pick_list(set_operation_data_value_select, layer_name);
+	};
+	// The "Select Layer2" Dropdown onchange function
+	drop_downs[1].onchange = function(){
+		// Strip current values of the data value dropdown
+		var length = set_operation_layer_values[1].options.length;
+		do{
+			set_operation_layer_values[1].remove(0);
+			length--;
+		}
+		while (length > 0);
+		// Add the data values depending on the selected layer
+		var selectedIndex = drop_downs[1].selectedIndex;
+		var layer_name = drop_downs[1].options[selectedIndex].text;
+		var set_operation_data_value_select = set_operation_layer_values[1];
+		create_set_operation_pick_list(set_operation_data_value_select, layer_name);
+	};
+}
+function create_set_operation_pick_list(value,layer_object) {
+	// We must create a drop down containing the data values for the selected
+	// layer.
+	// The Javascript "select" element that contains the data values
+	// is passed as "value" and the selected layer is passed as "layer_object".
+	// First, figure out what kind of filter settings we take based on
+	// what kind of layer we are.
+	with_layer(layer_object, function(layer) {
+// No options available. We have to add them.
+for(var i = 0; i < layer.magnitude + 1; i++) {
+	// Make an option for each value;
+				var option = document.createElement("option");
+				option.value = i;
+if(colormaps[layer_object].hasOwnProperty(i)) {
+	// We have a real name for this value
+option.text = (colormaps[layer_object][i].name);
+} else {
+// No name. Use the number.
+option.text = i;
+}
+value.add(option);
+// Select the last option, so that 1 on 0/1 layers will
+// be selected by default.
+				 var last_index = value.options.length - 1;
+value.selectedIndex = last_index;
+}
+// Now that the right controls are there, assume they have
+refresh();
+});
+}
+function update_shortlist_ui() {
+// Go through the shortlist and make sure each layer there has an entry in
+// the shortlist UI, and that each UI element has an entry in the shortlist.
+// Also make sure the metadata for all existing layers is up to date.
+// Clear the existing UI lookup table
+shortlist_ui = {};
+for(var i = 0; i < shortlist.length; i++) {
+// For each shortlist entry, put a false in the lookup table
+shortlist_ui[shortlist[i]] = false;
+}
+$("#shortlist").children().each(function(index, element) {
+if(shortlist_ui[$(element).data("layer")] === false) {
+// There's a space for this element: it's still in the shortlist
+// Fill it in
+shortlist_ui[$(element).data("layer")] = $(element);
+// Update the metadata in the element. It make have changed due to
+// statistics info coming back.
+fill_layer_metadata($(element).find(".metadata-holder"),
+$(element).data("layer"));
+} else {
+// It wasn't in the shortlist, so get rid of it.
+$(element).remove();
+}
+});
+for(var layer_name in shortlist_ui) {
+// For each entry in the lookup table
+if(shortlist_ui[layer_name] === false) {
+// If it's still false, make a UI element for it.
+shortlist_ui[layer_name] = make_shortlist_ui(layer_name);
+$("#shortlist").prepend(shortlist_ui[layer_name]);
+// Check it's box if possible
+shortlist_ui[layer_name].find(".layer-on").click();
+}
+}
+// Make things re-orderable
+// Be sure to re-draw the view if the order changes, after the user puts
+// things down.
+$("#shortlist").sortable({
+update: refresh,
+// Sort by the part with the lines icon, so we can still select text.
+handle: ".shortlist-controls"
+});
+	update_set_operation_selections ();
+}
+function uncheck_checkbox (checkbox_class) {
+	// Unchecks chekboxes after the function has been completed.
+	var checkboxArray = new Array ();
+	checkboxArray = document.getElementsByClassName(checkbox_class);
+	for (var i = 0; i < checkboxArray.length; i++)
+	{
+		checkboxArray[i].checked = false;
+	}
+}
+function hide_values (set_theory_function) {
+	// Hides pick lists for set theory functions after function has been
+	// completed.
+	var value_type = set_theory_function + '-value';
+	var values = new Array ();
+	values = document.getElementsByClassName(value_type);
+	var length = values.length;
+	for (var i = 0; i < length; i++)
+	{
+		values[i].style.display = 'none';
+	}
+	refresh();
+}
+function compute_intersection (values, intersection_layer_names, text) {
+	// A function that will take a list of layer names
+	// that have been selected for the intersection utility.
+	// Fetches the respective layers and list of tumor ids.
+	// Then compares data elements of the same tumor id
+	// between both layers. Adds these hexes to a new layer
+	// for visualization
+	//Array of signatures that intersect
+	var intersection_signatures = [];
+	with_layers (intersection_layer_names, function (intersection_layers) {
+		// Gather Tumor-ID Signatures.
+		for (hex in polygons)
+		{
+			if (intersection_layers[0].data[hex] == values[0] && intersection_layers[1].data[hex] == values[1]){
+				intersection_signatures.push(hex);
+			}
+		}
+	});
+	for (var i = 0; i < intersection_layer_names.length; i++){
+		intersection_layer_names[i] = intersection_layer_names[i] + " [" + text[i] + "]";
+	}
+	var intersection_function = "intersection";
+	select_list (intersection_signatures, intersection_function, intersection_layer_names);
+	uncheck_checkbox ('intersection-checkbox');
+	hide_values('intersection');
+}
+function compute_union (values, union_layer_names, text) {
+	// A function that will take a list of layer names
+	// that have been selected for the union utility.
+	// Fetches the respective layers and list of tumor ids.
+	// Then compares data elements of the same tumor id
+	// between both layers. Adds these hexes to a new layer
+	// for visualization
+	//Array of signatures
+	var union_signatures = [];
+	with_layers (union_layer_names, function (union_layers) {
+		// Gather Tumor-ID Signatures.
+		for (hex in polygons)
+		{
+			// Union Function
+			if (union_layers[0].data[hex] == values[0] || union_layers[1].data[hex] == values[1]){
+				union_signatures.push(hex);
+			}
+		}
+	});
+	for (var i = 0; i < union_layer_names.length; i++){
+		union_layer_names[i] = union_layer_names[i] + " [" + text[i] + "]";
+	}
+	var union_function = "union";
+	select_list (union_signatures, union_function, union_layer_names);
+	uncheck_checkbox ('union-checkbox');
+	hide_values('union');
+}
+function compute_set_difference (values, set_difference_layer_names, text) {
+	// A function that will take a list of layer names
+	// that have been selected for the set difference utility.
+	// Fetches the respective layers and list of tumor ids.
+	// Then compares data elements of the same tumor id
+	// between both layers. Adds these hexes to a new layer
+	// for visualization
+	//Array of signatures
+	var set_difference_signatures = [];
+	with_layers (set_difference_layer_names, function (set_difference_layers) {
+		// Gather Tumor-ID Signatures.
+		for (hex in polygons)
+		{
+			// Set Difference Function
+			if (set_difference_layers[0].data[hex] == values[0] &&
+				set_difference_layers[1].data[hex] != values[1]){
+				set_difference_signatures.push(hex);
+			}
+		}
+	});
+	for (var i = 0; i < set_difference_layer_names.length; i++){
+		set_difference_layer_names[i] = set_difference_layer_names[i] + " [" + text[i] + "]";
+	}
+	var set_difference_function = "set difference";
+	select_list (set_difference_signatures, set_difference_function, set_difference_layer_names);
+	uncheck_checkbox ('set-difference-checkbox');
+	hide_values('set-difference');
+}
+function compute_symmetric_difference (values, symmetric_difference_layer_names, text) {
+	// A function that will take a list of layer names
+	// that have been selected for the set difference utility.
+	// Fetches the respective layers and list of tumor ids.
+	// Then compares data elements of the same tumor id
+	// between both layers. Adds these hexes to a new layer
+	// for visualization
+	//Array of signatures
+	var symmetric_difference_signatures = [];
+	with_layers (symmetric_difference_layer_names, function (symmetric_difference_layers) {
+		// Gather Tumor-ID Signatures.
+		for (hex in polygons)
+		{
+			// Symmetric Difference Function
+			if (symmetric_difference_layers[0].data[hex] == values[0] &&
+				symmetric_difference_layers[1].data[hex] != values[1]){
+				symmetric_difference_signatures.push(hex);
+			}
+			if (symmetric_difference_layers[0].data[hex] != values[0] &&
+				symmetric_difference_layers[1].data[hex] == values[1]){
+				symmetric_difference_signatures.push(hex);
+			}
+		}
+	});
+	for (var i = 0; i < symmetric_difference_layer_names.length; i++){
+		symmetric_difference_layer_names[i] = symmetric_difference_layer_names[i] + " [" + text[i] + "]";
+	}
+	var symmetric_difference_function = "symmetric difference";
+	select_list (symmetric_difference_signatures, symmetric_difference_function, symmetric_difference_layer_names);
+	uncheck_checkbox ('symmetric-difference-checkbox');
+	hide_values('symmetric-difference');
+}
+function compute_absolute_complement (values, absolute_complement_layer_names, text) {
+	// A function that will take a list of layer names
+	// that have been selected for the set difference utility.
+	// Fetches the respective layers and list of tumor ids.
+	// Then compares data elements of the same tumor id
+	// between both layers. Adds these hexes to a new layer
+	// for visualization
+	//Array of signatures
+	var absolute_complement_signatures = [];
+	with_layers (absolute_complement_layer_names, function (absolute_complement_layers) {
+		// Gather Tumor-ID Signatures.
+		for (hex in polygons)
+		{
+			// Absolute Complement Function
+			if (absolute_complement_layers[0].data[hex] != values[0]) {
+				absolute_complement_signatures.push(hex);
+			}
+		}
+	});
+	for (var i = 0; i < absolute_complement_layer_names.length; i++){
+		absolute_complement_layer_names[i] = absolute_complement_layer_names[i] + " [" + text[i] + "]";
+	}
+	var absolute_complement_function = "absolute complement";
+	select_list (absolute_complement_signatures, absolute_complement_function, absolute_complement_layer_names);
+	uncheck_checkbox ('absolute-complement-checkbox');
+	hide_values('absolute-complement');
+}
+function layer_sort_order(a, b) {
+// A sort function defined on layer names.
+// Return <0 if a belongs before b, >0 if a belongs after
+// b, and 0 if their order doesn't matter.
+// Sort by selection status, then p_value, then clumpiness, then (for binary
+// layers that are not selections) the frequency of the less common value,
+// then alphabetically by name if all else fails.
+// Note that we can consult the layer metadata "n" and "positives" fields to
+// calculate the frequency of the least common value in binary layers,
+// without downloading them.
+if(layers[a].selection && !layers[b].selection) {
+// a is a selection and b isn't, so put a first.
+return -1;
+} else if(layers[b].selection && !layers[a].selection) {
+// b is a selection and a isn't, so put b first.
+return 1;
+}
+if(layers[a].p_value < layers[b].p_value) {
+// a has a lower p value, so put it first.
+return -1;
+} else if(layers[b].p_value < layers[a].p_value) {
+// b has a lower p value. Put it first instead.
+return 1;
+} else if(isNaN(layers[b].p_value) && !isNaN(layers[a].p_value)) {
+// a has a p value and b doesn't, so put a first
+return -1;
+} else if(!isNaN(layers[b].p_value) && isNaN(layers[a].p_value)) {
+// b has a p value and a doesn't, so put b first.
+return 1;
+}
+if(layers[a].clumpiness < layers[b].clumpiness) {
+// a has a lower clumpiness score, so put it first.
+return -1;
+} else if(layers[b].clumpiness < layers[a].clumpiness) {
+// b has a lower clumpiness score. Put it first instead.
+return 1;
+} else if(isNaN(layers[b].clumpiness) && !isNaN(layers[a].clumpiness)) {
+// a has a clumpiness score and b doesn't, so put a first
+return -1;
+} else if(!isNaN(layers[b].clumpiness) && isNaN(layers[a].clumpiness)) {
+// b has a clumpiness score and a doesn't, so put b first.
+return 1;
+}
+if(!layers[a].selection && !isNaN(layers[a].positives) && layers[a].n > 0 &&
+!layers[b].selection && !isNaN(layers[b].positives) &&
+layers[b].n > 0) {
+// We have checked to see each layer is supposed to be bianry layer
+// without downloading.  TODO: This is kind of a hack. Redesign the
+// whole system with a proper concept of layer type.
+// We've also verified they both have some data in them. Otherwise we
+// might divide by 0 trying to calculate frequency.
+// Two binary layers (not selections).
+// Compute the frequency of the least common value for each
+// This is the frequency of the least common value in a (will be <=1/2)
+var minor_frequency_a = layers[a].positives / layers[a].n;
+if(minor_frequency_a > 0.5) {
+minor_frequency_a = 1 - minor_frequency_a;
+}
+// And this is the same frequency for the b layer
+var minor_frequency_b = layers[b].positives / layers[b].n;
+if(minor_frequency_b > 0.5) {
+minor_frequency_b = 1 - minor_frequency_b;
+}
+if(minor_frequency_a > minor_frequency_b) {
+// a is more evenly split, so put it first
+return -1;
+} else if(minor_frequency_a < minor_frequency_b) {
+// b is more evenly split, so put it first
+return 1;
+}
+} else if (!layers[a].selection && !isNaN(layers[a].positives) &&
+layers[a].n > 0) {
+// a is a binary layer we can nicely sort by minor value frequency, but
+// b isn't. Put a first so that we can avoid intransitive sort cycles.
+// Example: X and Z are binary layers, Y is a non-binary layer, Y comes
+// after X and before Z by name ordering, but Z comes before X by minor
+// frequency ordering. This sort is impossible.
+// The solution is to put both X and Z in front of Y, because they're
+// more interesting.
+return -1;
+} else if (!layers[b].selection && !isNaN(layers[b].positives) &&
+layers[b].n > 0) {
+// b is a binary layer that we can evaluate based on minor value
+// frequency, but a isn't. Put b first.
+return 1;
+}
+// We couldn't find a difference in selection status, p-value, or clumpiness
+// score, or the binary layer minor value frequency, or whether each layer
+// *had* a binary layer minor value frequency, so use lexicographic ordering
+// on the name.
+return a.localeCompare(b);
+}
+function sort_layers(layer_array) {
+// Given an array of layer names, sort the array in place as we want layers
+// to appear to the user.
+// We should sort by p value, with NaNs at the end. But selections should be
+// first.
+layer_array.sort(layer_sort_order);
+}
+function fill_layer_metadata(container, layer_name) {
+// Empty the given jQuery container element, and fill it with layer metadata
+// for the layer with the given name.
+// Empty the container.
+container.html("");
+for(attribute in layers[layer_name]) {
+// Go through everything we know about this layer
+if(attribute == "data" || attribute == "url" ||
+attribute == "magnitude" || attribute == "selection") {
+// Skip built-in things
+// TODO: Ought to maybe have all metadata in its own object?
+continue;
+}
+// This holds the metadata value we're displaying
+var value = layers[layer_name][attribute];
+if(typeof value == "number" && isNaN(value)) {
+// If it's a numerical NaN (but not a string), just leave it out.
+continue;
+}
+// If we're still here, this is real metadata.
+// Format it for display.
+var value_formatted;
+if(typeof value == "number") {
+if(value % 1 == 0) {
+// It's an int!
+// Display the default way
+value_formatted = value;
+} else {
+// It's a float!
+// Format the number for easy viewing
+value_formatted = value.toExponential(2);
+}
+} else {
+// Just put the thing in as a string
+value_formatted = value;
+}
+// Do some transformations to make the displayed labels make more sense
+lookup = {
+n: "Number of non-empty values",
+positives: "Number of ones",
+inside_yes: "Ones in A",
+outside_yes: "Ones in background"
+}
+if(lookup[attribute]) {
+// Replace a boring short name with a useful long name
+attribute = lookup[attribute];
+}
+// Make a spot for it in the container and put it in
+var metadata = $("<div\>").addClass("layer-metadata");
+metadata.text(attribute + " = " + value_formatted);
+container.append(metadata);
+}
+}
+function make_toggle_layout_ui(layout_name) {
+// Returns a jQuery element to represent the layer layout the given name in
+// the toggle layout panel.
+// This holds a jQuery element that's the root of the structure we're
+// building.
+var root = $("<div/>").addClass("layout-entry");
+root.data("layout-name", layout_name);
+// Put in the layer name in a div that makes it wrap.
+root.append($("<div/>").addClass("layout-name").text(layout_name));
+return root;
+}
+function make_browse_ui(layer_name) {
+// Returns a jQuery element to represent the layer with the given name in
+// the browse panel.
+// This holds a jQuery element that's the root of the structure we're
+// building.
+var root = $("<div/>").addClass("layer-entry");
+root.data("layer-name", layer_name);
+// Put in the layer name in a div that makes it wrap.
+root.append($("<div/>").addClass("layer-name").text(layer_name));
+// Put in a layer metadata container div
+var metadata_container = $("<div/>").addClass("layer-metadata-container");
+fill_layer_metadata(metadata_container, layer_name);
+root.append(metadata_container);
+return root;
+}
+function update_browse_ui() {
+// Make the layer browse UI reflect the current list of layers in sorted
+// order.
+// Re-sort the sorted list that we maintain
+sort_layers(layer_names_sorted);
+// Close the select if it was open, forcing the data to refresh when it
+// opens again.
+$("#search").select2("close");
+}
+function get_slider_range(layer_name) {
+// Given the name of a layer, get the slider range from its shortlist UI
+// entry.
+// Assumes the layer has a shortlist UI entry.
+return shortlist_ui[layer_name].find(".range-slider").slider("values");
+}
+function reset_slider(layer_name, shortlist_entry) {
+// Given a layer name and a shortlist UI entry jQuery element, reset the
+// slider in the entry to its default values, after downloading the layer.
+// The default value may be invisible because we decided the layer should be
+// a colormap.
+// We need to set its boundaries to the min and max of the data set
+with_layer(layer_name, function(layer) {
+if(have_colormap(layer_name)) {
+// This is a colormap, so don't use the range slider at all.
+// We couldn't know this before because the colormap may need to be
+// auto-detected upon download.
+shortlist_entry.find(".range").hide();
+return;
+} else {
+// We need the range slider
+shortlist_entry.find(".range").show();
+// TODO: actually find max and min
+// For now just use + and - magnitude
+// This has the advantage of letting us have 0=black by default
+var magnitude = layer.magnitude;
+// This holds the limit to use, which should be 1 if the magnitude
+// is <1. This is sort of heuristic, but it's a good guess that
+// nobody wants to look at a layer with values -0.2 to 0.7 on a
+// scale of -10 to 10, say, but they might want it on -1 to 1.
+var range = Math.max(magnitude, 1.0)
+// Set the min and max.
+shortlist_entry.find(".range-slider").slider("option", "min",
+-range);
+shortlist_entry.find(".range-slider").slider("option", "max",
+range);
+// Set slider to autoscale for the magnitude.
+shortlist_entry.find(".range-slider").slider("values", [-magnitude,
+magnitude]);
+print("Scaled to magnitude " + magnitude);
+// Redraw the view in case this changed anything
+refresh();
+}
+});
+}
+function get_current_layers() {
+// Returns an array of the string names of the layers that are currently
+// supposed to be displayed, according to the shortlist UI.
+// Not responsible for enforcing maximum selected layers limit.
+// This holds a list of the string names of the currently selected layers,
+// in order.
+var current_layers = [];
+$("#shortlist").children().each(function(index, element) {
+// This holds the checkbox that determines if we use this layer
+var checkbox = $(element).find(".layer-on");
+if(checkbox.is(":checked")) {
+// Put the layer in if its checkbox is checked.
+current_layers.push($(element).data("layer"));
+}
+});
+// Return things in reverse order relative to the UI.
+// Thus, layer-added layers will be "secondary", and e.g. selecting
+// something with only tissue up behaves as you might expect, highlighting
+// those things.
+current_layers.reverse();
+return current_layers;
+}
+function get_current_filters() {
+// Returns an array of filter objects, according to the shortlist UI.
+// Filter objects have a layer name and a boolean-valued filter function
+// that returns true or false, given a value from that layer.
+var current_filters = [];
+$("#shortlist").children().each(function(index, element) {
+// Go through all the shortlist entries.
+// This function is also the scope used for filtering function config
+// variables.
+// This holds the checkbox that determines if we use this layer
+var checkbox = $(element).find(".filter-on");
+if(checkbox.is(":checked")) {
+// Put the layer in if its checkbox is checked.
+// Get the layer name
+var layer_name = $(element).data("layer");
+// This will hold our filter function. Start with a no-op filter.
+var filter_function = function(value) {
+return true;
+}
+// Get the filter parameters
+// This holds the input that specifies a filter threshold
+var filter_threshold = $(element).find(".filter-threshold");
+// And this the element that specifies a filter match value for
+// discrete layers
+var filter_value = $(element).find(".filter-value");
+// We want to figure out which of these to use without going and
+// downloading the layer.
+// So, we check to see which was left visible by the filter config
+// setup code.
+if(filter_threshold.is(":visible")) {
+// Use a threshold. This holds the threshold.
+var threshold = parseInt(filter_threshold.val());
+filter_function = function(value) {
+return value > threshold;
+}
+}
+if(filter_value.is(":visible")) {
+// Use a discrete value match instead. This hodls the value we
+// want to match.
+var desired = filter_value.val();
+filter_function = function(value) {
+return value == desired;
+}
+}
+// Add a filter on this layer, with the function we've prepared.
+current_filters.push({
+layer_name: layer_name,
+filter_function: filter_function
+});
+}
+});
+return current_filters;
+}
+function get_current_layers() {
+// Returns an array of the string names of the layers that are currently
+// supposed to be displayed, according to the shortlist UI.
+// Not responsible for enforcing maximum selected layers limit.
+// This holds a list of the string names of the currently selected layers,
+// in order.
+var current_layers = [];
+$("#shortlist").children().each(function(index, element) {
+// This holds the checkbox that determines if we use this layer
+var checkbox = $(element).find(".layer-on");
+if(checkbox.is(":checked")) {
+// Put the layer in if its checkbox is checked.
+current_layers.push($(element).data("layer"));
+}
+});
+// Return things in reverse order relative to the UI.
+// Thus, layer-added layers will be "secondary", and e.g. selecting
+// something with only tissue up behaves as you might expect, highlighting
+// those things.
+current_layers.reverse();
+return current_layers;
+}
+function get_current_set_theory_layers(function_type) {
+// Returns an array of layer names that have been selected.
+	// This function only looks at the layers that are listed on the shortlist.
+var current_set_theory_layers = [];
+	// Initialize global variables that hold the number of checkboxes selected
+	// for set theory functions to zero so that the new number is calculated
+	// each time this function is called.
+	if (function_type == "intersection"){
+	shortlist_intersection_num = 0;
+	}
+	if (function_type == "union"){
+	shortlist_union_num = 0;
+	}
+	if (function_type == "set difference"){
+	shortlist_set_difference_num = 0;
+	}
+	if (function_type == "symmetric difference"){
+	shortlist_symmetric_difference_num = 0;
+	}
+	if (function_type == "absolute complement"){
+	shortlist_absolute_complement_num = 0;
+	}
+$("#shortlist").children().each(function(index, element) {
+// Go through all the shortlist entries.
+// This holds the checkbox that determines if we use this layer
+		// The class name depends on the function_type.
+		// If intersection function look for intersection-checkbox.
+		if (function_type == "intersection"){
+		var checkbox = $(element).find(".intersection-checkbox");
+		}
+		// If union function look for union-checkbox.
+		if (function_type == "union"){
+		var checkbox = $(element).find(".union-checkbox");
+		}
+		// If set difference function look for set-difference-checkbox.
+		if (function_type == "set difference"){
+		var checkbox = $(element).find(".set-difference-checkbox");
+		}
+		// If symmetric difference function look for
+		// symmetric-difference-checkbox.
+		if (function_type == "symmetric difference"){
+		var checkbox = $(element).find(".symmetric-difference-checkbox");
+		}
+		if (function_type == "absolute complement"){
+		var checkbox = $(element).find(".absolute-complement-checkbox");
+		}
+if(checkbox.is(":checked")) {
+// Put the layer in if its checkbox is checked.
+// Get the layer name
+var layer_name = $(element).data("layer");
+// Add the layer_name to the list of current_set_theory_layers.
+current_set_theory_layers.push(layer_name);
+			// Add to the global "num" variables to keep track of the number
+			// of selected checkboxes.
+			if (function_type == "intersection"){
+				shortlist_intersection_num++;
+			}
+			if (function_type == "union"){
+				shortlist_union_num++;
+			}
+			if (function_type == "set difference"){
+				shortlist_set_difference_num++;
+			}
+			if (function_type == "symmetric difference"){
+				shortlist_symmetric_difference_num++;
+			}
+			if (function_type == "absolute complement"){
+				shortlist_absolute_complement_num++;
+			}
+}
+});
+return current_set_theory_layers;
+}
+function with_filtered_signatures(filters, callback) {
+// Takes an array of filters, as produced by get_current_filters. Signatures
+// pass a filter if the filter's layer has a value >0 for that signature.
+// Computes an  array of all signatures passing all filters, and passes that
+// to the given callback.
+// TODO: Re-organize this to do filters one at a time, recursively, like a
+// reasonable second-order filter.
+// Prepare a list of all the layers
+var layer_names = [];
+for(var i = 0; i < filters.length; i++) {
+layer_names.push(filters[i].layer_name);
+}
+with_layers(layer_names, function(filter_layers) {
+// filter_layers is guaranteed to be in the same order as filters.
+// This is an array of signatures that pass all the filters.
+var passing_signatures = [];
+for(var signature in polygons) {
+// For each signature
+// This holds whether we pass all the filters
+var pass = true;
+for(var i = 0; i < filter_layers.length; i++) {
+// For each filtering layer
+if(!filters[i].filter_function(
+filter_layers[i].data[signature])) {
+// If the signature fails the filter function for the layer,
+// skip the signature.
+pass = false;
+break;
+}
+}
+if(pass) {
+// Record that the signature passes all filters
+passing_signatures.push(signature);
+}
+}
+// Now we have our list of all passing signatures, so hand it off to the
+// callback.
+callback(passing_signatures);
+});
+}
+function select_list(to_select, function_type, layer_names) {
+// Given an array of signature names, add a new selection layer containing
+// just those hexes. Only looks at hexes that are not filtered out by the
+// currently selected filters.
+	// function_type is an optional parameter. If no variable is passed for the
+	// function_type undefined then the value will be undefined and the
+	// default "selection + #" title will be assigned to the shortlist element.
+	// If layer_names is undefined, the "selection + #" will also apply as a
+	// default. However, if a value i.e. "intersection" is passed
+	// for function_type, the layer_names will be used along with the
+	// function_type to assign the correct title.
+// Make the requested signature list into an object for quick membership
+// checking. This holds true if a signature was requested, undefined
+// otherwise.
+var wanted = {};
+for(var i = 0; i < to_select.length; i++) {
+wanted[to_select[i]] = true;
+}
+// This is the data object for the layer: from signature names to 1/0
+var data = {};
+// How many signatures will we have any mention of in this layer
+var signatures_available = 0;
+// Start it out with 0 for each signature. Otherwise we wil have missing
+// data for signatures not passing the filters.
+for(var signature in polygons) {
+data[signature] = 0;
+signatures_available += 1;
+}
+// This holds the filters we're going to use to restrict our selection
+var filters = get_current_filters();
+// Go get the list of signatures passing the filters and come back.
+with_filtered_signatures(filters, function(signatures) {
+// How many signatures get selected?
+var signatures_selected = 0;
+for(var i = 0; i < signatures.length; i++) {
+if(wanted[signatures[i]]) {
+// This signature is both allowed by the filters and requested.
+data[signatures[i]] = 1;
+signatures_selected++;
+}
+}
+		// Make up a name for the layer
+		var layer_name;
+		// Default Values for Optional Parameters
+		if (function_type == undefined && layer_names == undefined){
+	layer_name = "Selection " + selection_next_id;
+	selection_next_id++;
+		}
+		if (function_type == "user selection"){
+			 var text = prompt("Please provide a label for your selection",
+			 "Selection Label Text");
+			 if (text != null){
+			 	layer_name = text;
+			 }
+			 if (!text)
+			 {
+				return;
+			 }
+		}
+		// intersection for layer name
+		if (function_type == "intersection"){
+			layer_name = "(" + layer_names[0] + " ∩ " + layer_names[1] + ")";
+		}
+		// union for layer name
+		if (function_type == "union"){
+			layer_name = "(" + layer_names[0] + " U " + layer_names[1] + ")";
+		}
+		// set difference for layer name
+		if (function_type == "set difference"){
+			layer_name = "(" + layer_names[0] + " \\ " + layer_names[1] + ")";
+		}
+		// symmetric difference for layer name
+		if (function_type == "symmetric difference"){
+			layer_name = "(" + layer_names[0] + " ∆ " + layer_names[1] + ")";
+		}
+		// absolute complement for layer name
+		if (function_type == "absolute complement"){
+			layer_name = "Not: " + "(" + layer_names[0] + ")";
+		}
+		// saved filter for layer name
+		if (function_type == "save"){
+			layer_name =  "(" + layer_names[0] + ")";
+		}
+// Add the layer. Say it is a selection
+add_layer_data(layer_name, data, {
+selection: true,
+selected: signatures_selected, // Display how many hexes are in
+n: signatures_available // And how many have a value at all
+});
+// Update the browse UI with the new layer.
+update_browse_ui();
+// Immediately shortlist it
+shortlist.push(layer_name);
+update_shortlist_ui();
+});
+}
+function select_rectangle(start, end) {
+// Given two Google Maps LatLng objects (denoting arbitrary rectangle
+// corners), add a new selection layer containing all the hexagons
+// completely within that rectangle.
+// Only looks at hexes that are not filtered out by the currently selected
+// filters.
+// Sort out the corners to get the rectangle limits in each dimension
+var min_lat = Math.min(start.lat(), end.lat());
+var max_lat = Math.max(start.lat(), end.lat());
+var min_lng = Math.min(start.lng(), end.lng());
+var max_lng = Math.max(start.lng(), end.lng());
+// This holds an array of all signature names in our selection box.
+var in_box = [];
+// Start it out with 0 for each signature. Otherwise we wil have missing
+// data for signatures not passing the filters.
+for(var signature in polygons) {
+// Get the path for its hex
+var path = polygons[signature].getPath();
+// This holds if any points of the path are outside the selection
+// box
+var any_outside = false;
+path.forEach(function(point, index) {
+// Check all the points. Runs synchronously.
+if(point.lat() < min_lat || point.lat() > max_lat ||
+point.lng() < min_lng || point.lng() > max_lng) {
+// This point is outside the rectangle
+any_outside = true;
+}
+});
+// Select the hex if all its corners are inside the selection
+// rectangle.
+if(!any_outside) {
+in_box.push(signature);
+}
+}
+// Now we have an array of the signatures that ought to be in the selection
+// (if they pass filters). Hand it off to select_list.
+	var select_function_type = "user selection";
+select_list(in_box, select_function_type);
+}
+function recalculate_statistics(passed_filters) {
+// Interrogate the UI to determine signatures that are "in" and "out", and
+// run an appropriate statisical test for each layer between the "in" and
+// "out" signatures, and update all the "p_value" fields for all the layers
+// with the p values. Takes in a list of signatures that passed the filters,
+// and ignores any signatures not on that list.
+// Build an efficient index of passing signatures
+var passed = {};
+for(var i = 0; i < passed_filters.length; i++) {
+passed[passed_filters[i]] = true;
+}
+// Figure out what the in-list should be (statistics group A)
+var layer_a_name = $(".statistics-a:checked").data("layer-name");
+var layer_b_name = $(".statistics-b:checked").data("layer-name");
+print("Running statistics between " + layer_a_name + " and " +
+layer_b_name);
+if(!layer_a_name) {
+complain("Can't run statistics without an \"A\" group.");
+// Get rid of the throbber
+// TODO: Move this UI code out of the backend code.
+$(".recalculate-throbber").hide();
+$("#recalculate-statistics").show();
+return;
+}
+// We know the layers have data since they're selections, so we can just go
+// look at them.
+// This holds the "in" list: hexes from the "A" group.
+var in_list = [];
+for(var signature in layers[layer_a_name].data) {
+if(passed[signature] && layers[layer_a_name].data[signature]) {
+// Add all the signatures in the "A" layer to the in list.
+in_list.push(signature);
+}
+}
+if(in_list.length == 0) {
+complain("Can't run statistics with an empty \"A\" group.");
+// Get rid of the throbber
+// TODO: Move this UI code out of the backend code.
+$(".recalculate-throbber").hide();
+$("#recalculate-statistics").show();
+return;
+}
+// This holds the "out" list: hexes in the "B" group, or, if that's not
+// defined, all hexes. It's a little odd to run A vs. a set that includes
+// some members of A, but Prof. Stuart wants that and it's not too insane
+// for a Binomial test (which is the only currently implemented test
+// anyway).
+var out_list = [];
+if(layer_b_name) {
+// We have a layer B, so take everything that's on in it.
+for(var signature in layers[layer_b_name].data) {
+if(passed[signature] && layers[layer_b_name].data[signature]) {
+// Add all the signatures in the "B" layer to the out list.
+out_list.push(signature);
+}
+}
+} else {
+// The out list is all hexes
+for(var signature in polygons) {
+if(passed[signature]) {
+// Put it on the out list.
+out_list.push(signature);
+}
+}
+}
+// So now we have our in_list and our out_list
+for(var layer_name in layers) {
+// Do the stats on each layer between those lists. This only processes
+// layers that don't have URLs. Layers with URLs are assumed to be part
+// of the available matrices.
+recalculate_statistics_for_layer(layer_name, in_list, out_list,
+passed_filters);
+}
+// Now do all the layers with URLs. They are in the available score
+// matrices.
+for(var i = 0; i < available_matrices.length; i++) {
+recalculate_statistics_for_matrix(available_matrices[i], in_list,
+out_list, passed_filters);
+}
+print("Statistics jobs launched.");
+}
+function recalculate_statistics_for_layer(layer_name, in_list, out_list, all) {
+// Re-calculate the stats for the layer with the given name, between the
+// given in and out arrays of signatures. Store the re-calculated statistics
+// in the layer. all is a list of "all" signatures, from which we can
+// calculate pseudocounts.
+// All we do is send the layer data or URL (whichever is more convenient) to
+// the workers. They independently identify the data type and run the
+// appropriate test, returning a p value or NaN by callback.
+// This holds a callback for setting the layer's p_value to the result of
+// the statistics.
+var callback = function(results) {
+// The statistics code really sends back a dict of updated metadata for
+// each layer. Copy it over.
+for(var metadata in results) {
+layers[layer_name][metadata] = results[metadata];
+}
+if(jobs_running == 0) {
+// All statistics are done!
+// TODO: Unify this code with similar callback below.
+// Re-sort everything and draw all the new p values.
+update_browse_ui();
+update_shortlist_ui();
+// Get rid of the throbber
+$(".recalculate-throbber").hide();
+$("#recalculate-statistics").show();
+}
+};
+if(layers[layer_name].data != undefined) {
+// Already have this downloaded. A local copy to the web worker is
+// simplest, and a URL may not exist anyway.
+rpc_call("statistics_for_layer", [layers[layer_name].data, in_list,
+out_list, all], callback);
+} else if(layers[layer_name].url != undefined) {
+// We have a URL, so the layer must be in a matrix, too.
+// Skip it here.
+} else {
+// Layer has no data and no way to get data. Should never happen.
+complain("Layer " + layer_name + " has no data and no url.");
+}
+}
+function recalculate_statistics_for_matrix(matrix_url, in_list, out_list, all) {
+// Given the URL of one of the visualizer generator's input score matrices,
+// download the matrix, calculate statistics for each layer in the matrix
+// between the given in and out lists, and update the layer p values. all is
+// a list of "all" signatures, from which we can calculate pseudocounts.
+rpc_call("statistics_for_matrix", [matrix_url, in_list, out_list, all],
+function(result) {
+// The return value is p values by layer name
+for(var layer_name in result) {
+// The statistics code really sends back a dict of updated metadata
+// for each layer. Copy it over.
+for(var metadata in result[layer_name]) {
+layers[layer_name][metadata] = result[layer_name][metadata];
+}
+}
+if(jobs_running == 0) {
+// All statistics are done!
+// TODO: Unify this code with similar callback above.
+// Re-sort everything and draw all the new p values.
+update_browse_ui();
+update_shortlist_ui();
+// Get rid of the throbber
+$(".recalculate-throbber").hide();
+$("#recalculate-statistics").show();
+}
+});
+}
+function rpc_initialize() {
+// Set up the RPC system. Must be called before rpc_call is used.
+for(var i = 0; i < NUM_RPC_WORKERS; i++) {
+// Start the statistics RPC (remote procedure call) Web Worker
+var worker = new Worker("statistics.js");
+// Send all its messages to our reply processor
+worker.onmessage = rpc_reply;
+// Send its error events to our error processor
+worker.onerror = rpc_error;
+// Add it to the list of workers
+rpc_workers.push(worker);
+}
+}
+function rpc_call(function_name, function_args, callback) {
+// Given a function name and an array of arguments, send a message to a Web
+// Worker thread to ask it to run the given job. When it responds with the
+// return value, pass it to the given callback.
+// Allocate a new call id
+var call_id = rpc_next_id;
+rpc_next_id++;
+// Store the callback
+rpc_callbacks[call_id] = callback;
+// Launch the call. Pass the function name, function args, and id to send
+// back with the return value.
+rpc_workers[next_free_worker].postMessage({
+name: function_name,
+args: function_args,
+id: call_id
+});
+// Next time, use the next worker on the list, wrapping if we run out.
+// This ensures no one worker gets all the work.
+next_free_worker = (next_free_worker + 1) % rpc_workers.length;
+// Update the UI with the number of jobs in flight. Decrement jobs_running
+// so the callback knows if everything is done or not.
+jobs_running++;
+$("#jobs-running").text(jobs_running);
+// And the number of jobs total
+$("#jobs-ever").text(rpc_next_id);
+}
+function rpc_reply(message) {
+// Handle a Web Worker message, which may be an RPC response or a log entry.
+if(message.data.log != undefined) {
+// This is really a log entry
+print(message.data.log);
+return;
+}
+// This is really a job completion message (success or error).
+// Update the UI with the number of jobs in flight.
+jobs_running--;
+$("#jobs-running").text(jobs_running);
+if(message.data.error) {
+// The RPC call generated an error.
+// Inform the page.
+print("RPC error: " + message.data.error);
+// Get rid of the callback
+delete rpc_callbacks[message.data.id];
+return;
+}
+// Pass the return value to the registered callback.
+rpc_callbacks[message.data.id](message.data.return_value);
+// Get rid of the callback
+delete rpc_callbacks[message.data.id];
+}
+function rpc_error(error) {
+// Handle an error event from a web worker
+// See http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.h
+// tml#errorevent
+complain("Web Worker error: " + error.message);
+print(error.message + "\n at" + error.filename + " line " + error.lineno +
+" column " + error.column);
+}
+function initialize_view(initial_zoom) {
+// Initialize the global Google Map.
+// Configure a Google map
+var mapOptions = {
+// Look at the center of the map
+center: get_LatLng(128, 128),
+// Zoom all the way out
+zoom: initial_zoom,
+mapTypeId: "blank",
+// Don't show a map type picker.
+mapTypeControlOptions: {
+mapTypeIds: []
+},
+// Or a street view man that lets you walk around various Earth places.
+streetViewControl: false
+};
+// Create the actual map
+googlemap = new google.maps.Map(document.getElementById("visualization"),
+mapOptions);
+// Attach the blank map type to the map
+googlemap.mapTypes.set("blank", new BlankMapType());
+// Make the global info window
+info_window = new google.maps.InfoWindow({
+content: "No Signature Selected",
+position: get_LatLng(0, 0)
+});
+// Add an event to close the info window when the user clicks outside of any
+// hexagon
+google.maps.event.addListener(googlemap, "click", function(event) {
+info_window.close();
+// Also make sure that the selected signature is no longer selected,
+// so we don't pop the info_window up again.
+selected_signature = undefined;
+// Also un-focus the search box
+$("#search").blur();
+});
+// And an event to clear the selected hex when the info_window closes.
+google.maps.event.addListener(info_window, "closeclick", function(event) {
+selected_signature = undefined;
+});
+// We also have an event listener that checks when the zoom level changes,
+// and turns off hex borders if we zoom out far enough, and turns them on
+// again if we come back.
+google.maps.event.addListener(googlemap, "zoom_changed", function(event) {
+// Get the current zoom level (low is out)
+var zoom = googlemap.getZoom();
+// API docs say: pixelCoordinate = worldCoordinate * 2 ^ zoomLevel
+// So this holds the number of pixels that the global length hex_size
+// corresponds to at this zoom level.
+var hex_size_pixels = hex_size * Math.pow(2, zoom);
+if(hex_size_pixels < MIN_BORDER_SIZE) {
+// We're too small for borders
+for(var signature in polygons) {
+set_hexagon_stroke_weight(polygons[signature], 0);
+}
+} else {
+// We can fit borders on the hexes
+for(var signature in polygons) {
+set_hexagon_stroke_weight(polygons[signature],
+HEX_STROKE_WEIGHT);
+}
+}
+});
+// Subscribe all the tool listeners to the map
+subscribe_tool_listeners(googlemap);
+}
+function add_tool(tool_name, tool_menu_option, callback) {
+// Given a programmatic unique name for a tool, some text for the tool's
+// button, and a callback for when the user clicks that button, add a tool
+// to the tool menu.
+// This hodls a button to activate the tool.
+var tool_button = $("<a/>").attr("href", "#").addClass("stacker");
+tool_button.text(tool_menu_option);
+tool_button.click(function() {
+// New tool. Remove all current tool listeners
+clear_tool_listeners();
+// Say that the select tool is selected
+selected_tool = tool_name;
+callback();
+// End of tool workflow must set current_tool to undefined.
+});
+$("#toolbar").append(tool_button);
+}
+function add_tool_listener(name, handler, cleanup) {
+// Add a global event listener over the Google map and everything on it.
+// name specifies the event to listen to, and handler is the function to be
+// set up as an event handler. It should take a single argument: the Google
+// Maps event. A handle is returned that can be used to remove the event
+// listen with remove_tool_listener.
+// Only events in the TOOL_EVENTS array are allowed to be passed for name.
+// TODO: Bundle this event thing into its own object.
+// If "cleanup" is specified, it must be a 0-argument function to call when
+// this listener is removed.
+// Get a handle
+var handle = tool_listener_next_id;
+tool_listener_next_id++;
+// Add the listener for the given event under that handle.
+// TODO: do we also need to index this for O(1) event handling?
+tool_listeners[handle] = {
+handler: handler,
+event: name,
+cleanup: cleanup
+};
+return handle;
+}
+function remove_tool_listener(handle) {
+// Given a handle returned by add_tool_listener, remove the listener so it
+// will no longer fire on its event. May be called only once on a given
+// handle. Runs any cleanup code associated with the handle being removed.
+if(tool_listeners[handle].cleanup) {
+// Run cleanup code if applicable
+tool_listeners[handle].cleanup();
+}
+// Remove the property from the object
+delete tool_listeners[handle];
+}
+function clear_tool_listeners() {
+// We're starting to use another tool. Remove all current tool listeners.
+// Run any associated cleanup code for each listener.
+for(var handle in tool_listeners) {
+remove_tool_listener(handle);
+}
+}
+function subscribe_tool_listeners(maps_object) {
+// Put the given Google Maps object into the tool events system, so that
+// events on it will fire global tool events. This can happen before or
+// after the tool events themselves are enabled.
+for(var i = 0; i < TOOL_EVENTS.length; i++) {
+// For each event name we care about,
+// use an inline function to generate an event name specific handler,
+// and attach that to the Maps object.
+google.maps.event.addListener(maps_object, TOOL_EVENTS[i],
+function(event_name) {
+return function(event) {
+// We are handling an event_name event
+for(var handle in tool_listeners) {
+if(tool_listeners[handle].event == event_name) {
+// The handler wants this event
+// Fire it with the Google Maps event args
+tool_listeners[handle].handler(event);
+}
+}
+};
+}(TOOL_EVENTS[i]));
+}
+}
+function have_colormap(colormap_name) {
+// Returns true if the given string is the name of a colormap, or false if
+// it is only a layer.
+return !(colormaps[colormap_name] == undefined);
+}
+function get_range_position(score, low, high) {
+// Given a score float, and the lower and upper bounds of an interval (which
+// may be equal, but not backwards), return a number in the range -1 to 1
+// that expresses the position of the score in the [low, high] interval.
+// Positions out of bounds are clamped to -1 or 1 as appropriate.
+// This holds the length of the input interval
+var interval_length = high - low;
+if(interval_length > 0) {
+// First rescale 0 to 1
+score = (score - low) / interval_length
+// Clamp
+score = Math.min(Math.max(score, 0), 1);
+// Now re-scale to -1 to 1
+score = 2 * score - 1;
+} else {
+// The interval is just a point
+// Just use 1 if we're above the point, and 0 if below.
+score = (score > low)? 1 : -1
+}
+return score;
+}
+function refresh() {
+// Schedule the view to be redrawn after the current event finishes.
+// Get rid of the previous redraw request, if there was one. We only want
+// one.
+window.clearTimeout(redraw_handle);
+// Make a new one to happen as soon as this event finishes
+redraw_handle = window.setTimeout(redraw_view, 0);
+}
+function redraw_view() {
+// Make the view display the correct hexagons in the colors of the current
+// layer(s), as read from the values of the layer pickers in the global
+// layer pickers array.
+// All pickers must have selected layers that are in the object of
+// layers.
+// Instead of calling this, you probably want to call refresh().
+// This holds a list of the string names of the currently selected layers,
+// in order.
+var current_layers = get_current_layers();
+// This holds arrays of the lower and upper limit we want to use for
+// each layer, by layer number. The lower limit corresponds to u or
+// v = -1, and the upper to u or v = 1. The entries we make for
+// colormaps are ignored.
+// Don't do this inside the callback since the UI may have changed by then.
+var layer_limits = []
+for(var i = 0; i < current_layers.length; i++) {
+layer_limits.push(get_slider_range(current_layers[i]));
+}
+// This holds all the current filters
+var filters = get_current_filters();
+// Obtain the layer objects (mapping from signatures/hex labels to colors)
+with_layers(current_layers, function(retrieved_layers) {
+print("Redrawing view with " + retrieved_layers.length + " layers.");
+// Turn all the hexes the filtered-out color, pre-emptively
+for(var signature in polygons) {
+set_hexagon_color(polygons[signature], "black");
+}
+// Go get the list of filter-passing hexes.
+with_filtered_signatures(filters, function(signatures) {
+for(var i = 0; i < signatures.length; i++) {
+// For each hex passign the filter
+// This hodls its signature label
+var label = signatures[i];
+// This holds the color we are calculating for this hexagon.
+// Start with the missing data color.
+var computed_color = "grey";
+if(retrieved_layers.length >= 1) {
+// Two layers. We find a point in u, v cartesian space, map
+// it to polar, and use that to compute an HSV color.
+// However, we map value to the radius instead of
+// saturation.
+// Get the heat along u and v axes. This puts us in a square
+// of side length 2. Fun fact: undefined / number = NaN, but
+// !(NaN == NaN)
+var u = retrieved_layers[0].data[label];
+if(!have_colormap(current_layers[0])) {
+// Take into account the slider values and re-scale the
+// layer value to express its position between them.
+u = get_range_position(u, layer_limits[0][0],
+layer_limits[0][1]);
+}
+if(retrieved_layers.length >= 2) {
+// There's a second layer, so use the v axis.
+var v = retrieved_layers[1].data[label];
+if(!have_colormap(current_layers[1])) {
+// Take into account the slider values and re-scale
+// the layer value to express its position between
+// them.
+v = get_range_position(v, layer_limits[1][0],
+layer_limits[1][1]);
+}
+} else {
+// No second layer, so v axis is unused. Don't make it
+// undefined (it's not missing data), but set it to 0.
+var v = 0;
+}
+// Either of u or v may be undefined (or both) if the layer
+// did not contain an entry for this signature. But that's
+// OK. Compute the color that we should use to express this
+// combination of layer values. It's OK to pass undefined
+// names here for layers.
+computed_color = get_color(current_layers[0], u,
+current_layers[1], v);
+}
+// Set the color by the composed layers.
+set_hexagon_color(polygons[label], computed_color);
+}
+});
+// Draw the color key.
+if(retrieved_layers.length == 0) {
+// No color key to draw
+$(".key").hide();
+} else {
+// We do actually want the color key
+$(".key").show();
+// This holds the canvas that the key gets drawn in
+var canvas = $("#color-key")[0];
+// This holds the 2d rendering context
+var context = canvas.getContext("2d");
+for(var i = 0; i < KEY_SIZE; i++) {
+// We'll use i for the v coordinate (-1 to 1) (left to right)
+var v = 0;
+if(retrieved_layers.length >= 2) {
+v = i / (KEY_SIZE / 2) - 1;
+if(have_colormap(current_layers[1])) {
+// This is a color map, so do bands instead.
+v = Math.floor(i / KEY_SIZE *
+(retrieved_layers[1].magnitude + 1));
+}
+}
+for(var j = 0; j < KEY_SIZE; j++) {
+// And j spacifies the u coordinate (bottom to top)
+var u = 0;
+if(retrieved_layers.length >= 1) {
+u = 1 - j / (KEY_SIZE / 2);
+if(have_colormap(current_layers[0])) {
+// This is a color map, so do bands instead.
+// Make sure to flip sign, and have a -1 for the
+// 0-based indexing.
+u = Math.floor((KEY_SIZE - j - 1) / KEY_SIZE *
+(retrieved_layers[0].magnitude + 1));
+}
+}
+// Set the pixel color to the right thing for this u, v
+// It's OK to pass undefined names here for layers.
+context.fillStyle = get_color(current_layers[0], u,
+current_layers[1], v);
+// Fill the pixel
+context.fillRect(i, j, 1, 1);
+}
+}
+}
+if(have_colormap(current_layers[0])) {
+// We have a layer with horizontal bands
+// Add labels to the key if we have names to use.
+// TODO: Vertical text for vertical bands?
+// Get the colormap
+var colormap = colormaps[current_layers[0]]
+if(colormap.length > 0) {
+// Actually have any categories (not auto-generated)
+print("Drawing key text for " + colormap.length +
+" categories.");
+// How many pixels do we get per label, vertically
+var pixels_per_label = KEY_SIZE / colormap.length;
+// Configure for text drawing
+context.font = pixels_per_label + "px Arial";
+context.textBaseline = "top";
+for(var i = 0; i < colormap.length; i++) {
+// This holds the pixel position where our text goes
+var y_position = KEY_SIZE - (i + 1) * pixels_per_label;
+// Get the background color here as a 1x1 ImageData
+var image = context.getImageData(0, y_position, 1, 1);
+// Get the components r, g, b, a in an array
+var components = image.data;
+// Make a Color so we can operate on it
+var background_color = Color({
+r: components[0],
+g: components[1],
+b: components[2]
+});
+if(background_color.light()) {
+// This color is light, so write in black.
+context.fillStyle = "black";
+} else {
+// It must be dark, so write in white.
+context.fillStyle = "white";
+}
+// Draw the name on the canvas
+context.fillText(colormap[i].name, 0, y_position);
+}
+}
+}
+// We should also set up axis labels on the color key.
+// We need to know about colormaps to do this
+// Hide all the labels
+$(".label").hide();
+if(current_layers.length > 0) {
+// Show the y axis label
+$("#y-axis").text(current_layers[0]).show();
+if(!have_colormap(current_layers[0])) {
+// Show the low to high markers for continuous values
+$("#low-both").show();
+$("#high-y").show();
+}
+}
+if(current_layers.length > 1) {
+// Show the x axis label
+$("#x-axis").text(current_layers[1]).show();
+if(!have_colormap(current_layers[1])) {
+// Show the low to high markers for continuous values
+$("#low-both").show();
+$("#high-x").show();
+}
+}
+});
+// Make sure to also redraw the info window, which may be open.
+redraw_info_window();
+}
+function get_color(u_name, u, v_name, v) {
+// Given u and v, which represent the heat in each of the two currently
+// displayed layers, as well as u_name and v_name, which are the
+// corresponding layer names, return the computed CSS color.
+// Either u or v may be undefined (or both), in which case the no-data color
+// is returned. If a layer name is undefined, that layer dimension is
+// ignored.
+if(have_colormap(v_name) && !have_colormap(u_name)) {
+// We have a colormap as our second layer, and a layer as our first.
+// Swap everything around so colormap is our first layer instead.
+// Now we don't need to think about drawing a layer first with a
+// colormap second.
+// This is a temporary swapping variable.
+var temp = v_name;
+v_name = u_name;
+u_name = temp;
+temp = v;
+v = u;
+u = temp;
+}
+if(isNaN(u) || isNaN(v) || u == undefined || v == undefined) {
+// At least one of our layers has no data for this hex.
+return "grey";
+}
+if(have_colormap(u_name) && have_colormap(v_name) &&
+!colormaps[u_name].hasOwnProperty(u) &&
+!colormaps[v_name].hasOwnProperty(v) &&
+layers[u_name].magnitude <= 1 && layers[v_name].magnitude <= 1) {
+// Special case: two binary or unary auto-generated colormaps.
+// Use dark grey/red/blue/purple color scheme
+if(u == 1) {
+if(v == 1) {
+// Both are on
+return "#FF00FF";
+} else {
+// Only the first is on
+return "#FF0000";
+}
+} else {
+if(v == 1) {
+// Only the second is on
+return "#0000FF";
+} else {
+// Neither is on
+return "#545454";
+}
+}
+}
+if(have_colormap(u_name) && !colormaps[u_name].hasOwnProperty(u) &&
+layers[u_name].magnitude <= 1 && v_name == undefined) {
+// Special case: a single binary or unary auto-generated colormap.
+// Use dark grey/red to make 1s stand out.
+if(u == 1) {
+// Red for on
+return "#FF0000";
+} else {
+// Dark grey for off
+return "#545454";
+}
+}
+if(have_colormap(u_name)) {
+// u is a colormap
+if(colormaps[u_name].hasOwnProperty(u)) {
+// And the colormap has an entry here. Use it as the base color.
+var to_clone = colormaps[u_name][u].color;
+var base_color = Color({
+hue: to_clone.hue(),
+saturation: to_clone.saturationv(),
+value: to_clone.value()
+});
+} else {
+// The colormap has no entry. Assume we're calculating all the
+// entries. We do this by splitting the color circle evenly.
+// This holds the number of colors, which is 1 more than the largest
+// value used (since we start at color 0), which is the magnitude.
+// It's OK to go ask for the magnitude of this layer since it must
+// have already been downloaded.
+var num_colors = layers[u_name].magnitude + 1;
+// Calculate the hue for this number.
+var hsv_hue = u / (num_colors + 1) * 360;
+// The base color is a color at that hue, with max saturation and
+// value
+var base_color = Color({
+hue: hsv_hue,
+saturation: 100,
+value: 100
+})
+}
+// Now that the base color is set, consult v to see what shade to use.
+if(v_name == undefined) {
+// No v layer is actually in use. Use whatever is in the base
+// color
+// TODO: This code path is silly, clean it up.
+var hsv_value = base_color.value();
+} else if(have_colormap(v_name)) {
+// Do discrete shades in v
+// This holds the number of shades we need.
+// It's OK to go ask for the magnitude of this layer since it must
+// have already been downloaded.
+var num_shades = layers[v_name].magnitude + 1;
+// Calculate what shade we need from the nonnegative integer v
+// We want 100 to be included (since that's full brightness), but we
+// want to skip 0 (since no color can be seen at 0), so we add 1 to
+// v.
+var hsv_value = (v + 1) / num_shades * 100;
+} else {
+// Calculate what shade we need from v on -1 to 1
+var hsv_value = 50 + v * 50;
+}
+// Set the color's value component.
+base_color.value(hsv_value);
+// Return the shaded color
+return base_color.hexString();
+}
+// If we get here, we only have non-colormap layers.
+// This is the polar angle (hue) in degrees, forced to be
+// positive.
+var hsv_hue = Math.atan2(v, u) * 180 / Math.PI;
+if(hsv_hue < 0) {
+hsv_hue += 360;
+}
+// Rotate it by 60 degrees, so that the first layer is
+// yellow/blue
+hsv_hue += 60;
+if(hsv_hue > 360) {
+hsv_hue -= 360;
+}
+// This is the polar radius (value). We inscribe our square
+// of side length 2 in a circle of radius 1 by dividing by
+// sqrt(2). So we get a value from 0 to 1
+var hsv_value = (Math.sqrt(Math.pow(u, 2) +
+Math.pow(v, 2)) / Math.sqrt(2));
+// This is the HSV saturation component of the color on 0 to 1.
+// Just fix to 1.
+var hsv_saturation = 1.0;
+// Now scale saturation and value to percent
+hsv_saturation *= 100;
+hsv_value *= 100;
+// Now we have the color as HSV, but CSS doesn't support it.
+// Make a Color object and get the RGB string
+try {
+return Color({
+hue: hsv_hue,
+saturation: hsv_saturation,
+value: hsv_value,
+}).hexString();
+} catch(error) {
+print("(" + u + "," + v + ") broke with color (" + hsv_hue +
+"," + hsv_saturation + "," + hsv_value + ")");
+// We'll return an error color
+return "white";
+}
+}
+// Define a flat projection
+// See https://developers.google.com/maps/documentation/javascript/maptypes#Projections
+function FlatProjection() {
+}
+FlatProjection.prototype.fromLatLngToPoint = function(latLng) {
+// Given a LatLng from -90 to 90 and -180 to 180, transform to an x, y Point
+// from 0 to 256 and 0 to 256
+var point = new google.maps.Point((latLng.lng() + 180) * 256 / 360,
+(latLng.lat() + 90) * 256 / 180);
+return point;
+}
+FlatProjection.prototype.fromPointToLatLng = function(point, noWrap) {
+// Given a an x, y Point from 0 to 256 and 0 to 256, transform to a LatLng from
+// -90 to 90 and -180 to 180
+var latLng = new google.maps.LatLng(point.y * 180 / 256 - 90,
+point.x * 360 / 256 - 180, noWrap);
+return latLng;
+}
+// Define a Google Maps MapType that's all blank
+// See https://developers.google.com/maps/documentation/javascript/examples/maptype-base
+function BlankMapType() {
+}
+BlankMapType.prototype.tileSize = new google.maps.Size(256,256);
+BlankMapType.prototype.maxZoom = 19;
+BlankMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
+// This is the element representing this tile in the map
+// It should be an empty div
+var div = ownerDocument.createElement("div");
+div.style.width = this.tileSize.width + "px";
+div.style.height = this.tileSize.height + "px";
+div.style.backgroundColor = "#000000";
+return div;
+}
+BlankMapType.prototype.name = "Blank";
+BlankMapType.prototype.alt = "Blank Map";
+BlankMapType.prototype.projection = new FlatProjection();
+function get_LatLng(x, y) {
+// Given a point x, y in map space (0 to 256), get the corresponding LatLng
+return FlatProjection.prototype.fromPointToLatLng(
+new google.maps.Point(x, y));
+}
+function clearMap() {
+}
+function drl_values(layout_index) {
+	// Download the DrL position data, and make it into a layer
+$.get("drl"+ layout_index +".tab", function(tsv_data) {
+// This is an array of rows, which are arrays of values:
+// id, x, y
+// Only this time X and Y are Cartesian coordinates.
+var parsed = $.tsv.parseRows(tsv_data);
+// Compute two layers: one for x position, and one for y position.
+var layer_x = {};
+var layer_y = {};
+for(var i = 0; i < parsed.length; i++) {
+// Pull out the parts of the TSV entry
+var label = parsed[i][0];
+if(label == "") {
+// DrL ends its output with a blank line, which we skip
+// here.
+continue;
+}
+var x = parseFloat(parsed[i][1]);
+// Invert the Y coordinate since we do that in the hex grid
+var y = -parseFloat(parsed[i][2]);
+// Add x and y to the appropriate layers
+layer_x[label] = x;
+layer_y[label] = y;
+}
+// Register the layers with no priorities. By default they are not
+// selections.
+add_layer_data("DrL X Position", layer_x);
+add_layer_data("DrL Y Position", layer_y);
+// Make sure the layer browser has the up-to-date layer list
+update_browse_ui();
+}, "text");
+}
+function assignment_values (layout_index, spacing) {
+	// Download the signature assignments to hexagons and fill in the global
+// hexagon assignment grid.
+$.get("assignments" + layout_index +".tab", function(tsv_data) {
+// This is an array of rows, which are arrays of values:
+// id, x, y
+var parsed = $.tsv.parseRows(tsv_data);
+// This holds the maximum observed x
+var max_x = 0;
+// And y
+var max_y = 0;
+// Fill in the global signature grid and ploygon grid arrays.
+for(var i = 0; i < parsed.length; i++) {
+// Get the label
+var label = parsed[i][0];
+if(label == "") {
+// Blank line
+continue;
+}
+// Get the x coord
+var x = parseInt(parsed[i][1]);
+// And the y coord
+var y = parseInt(parsed[i][2]);
+			x = x * spacing;
+			y = y * spacing;
+// Update maxes
+max_x = Math.max(x, max_x);
+max_y = Math.max(y, max_y);
+// Make sure we have a row
+if(signature_grid[y] == null) {
+signature_grid[y] = [];
+// Pre-emptively add a row to the polygon grid.
+polygon_grid[y] = [];
+}
+// Store the label in the global signature grid.
+signature_grid[y][x] = label;
+}
+// We need to fit this whole thing into a 256x256 grid.
+// How big can we make each hexagon?
+// TODO: Do the algrbra to make this exact. Right now we just make a
+// grid that we know to be small enough.
+// Divide the space into one column per column, and calculate
+// side length from column width. Add an extra column for dangling
+// corners.
+var side_length_x = (256)/ (max_x + 2) * (2.0 / 3.0);
+print("Max hexagon side length horizontally is " + side_length_x);
+// Divide the space into rows and calculate the side length
+// from hex height. Remember to add an extra row for wggle.
+var side_length_y = ((256)/(max_y + 2)) / Math.sqrt(3);
+print("Max hexagon side length vertically is " + side_length_y);
+// How long is a hexagon side in world coords?
+// Shrink it from the biggest we can have so that we don't wrap off the
+// edges of the map.
+var hexagon_side_length = Math.min(side_length_x, side_length_y) / 2.0;
+// Store this in the global hex_size, so we can later calculate the hex
+// size in pixels and make borders go away if we are too zoomed out.
+hex_size = hexagon_side_length;
+// How far in should we move the whole grid from the top left corner of
+// the earth?
+// Let's try leaving a 1/4 Earth gap at least, to stop wrapping in
+// longitude that we can't turn off.
+// Since we already shrunk the map to half max size, this would put it
+// 1/4 of the 256 unit width and height away from the top left corner.
+grid_offset = (256) / 4;
+// Loop through again and draw the polygons, now that we know how big
+// they have to be
+for(var i = 0; i < parsed.length; i++) {
+// TODO: don't re-parse this info
+// Get the label
+var label = parsed[i][0];
+if(label == "") {
+// Blank line
+continue;
+}
+// Get the x coord
+var x = parseInt(parsed[i][1]);
+// And the y coord
+var y = parseInt(parsed[i][2]);
+			x = x * spacing;
+			y = y * spacing;
+// Make a hexagon on the Google map and store that.
+var hexagon = make_hexagon(y, x, hexagon_side_length, grid_offset);
+// Store by x, y in grid
+polygon_grid[y][x] = hexagon;
+// Store by label
+polygons[label] = hexagon;
+// Set the polygon's signature so we can look stuff up for it when
+// it's clicked.
+set_hexagon_signature(hexagon, label);
+}
+// Now that the ploygons exist, do the initial redraw to set all their
+// colors corectly. In case someone has messed with the controls.
+// TODO: can someone yet have messed with the controlls?
+refresh();
+}, "text");
+}
+// Function to create a new map based upon the the layout_name argument
+// Find the index of the layout_name and pass it as the index to the
+// drl_values and assignment_values functions as these files are indexed
+// according to the appropriate layout
+function recreate_map(layout_name, spacing) {
+	var layout_index = layout_names.indexOf(layout_name);
+	drl_values(layout_index);
+	assignment_values(layout_index, spacing);
+}
+$(function() {
+// Set up the RPC system for background statistics
+rpc_initialize();
+// Set up the Google Map
+initialize_view(0);
+// Set up the layer search
+$("#search").select2({
+placeholder: "Add Attribute...",
+query: function(query) {
+// Given a select2 query object, call query.callback with an object
+// with a "results" array.
+// This is the array of result objects we will be sending back.
+var results = [];
+// Get where we should start in the layer list, from select2's
+// infinite scrolling.
+var start_position = 0;
+if(query.context != undefined) {
+start_position = query.context;
+}
+for(var i = start_position; i < layer_names_sorted.length; i++) {
+// For each possible result
+if(layer_names_sorted[i].toLowerCase().indexOf(
+query.term.toLowerCase()) != -1) {
+// Query search term is in this layer's name. Add a select2
+// record to our results. Don't specify text: our custom
+// formatter looks up by ID and makes UI elements
+// dynamically.
+results.push({
+id: layer_names_sorted[i]
+});
+if(results.length >= SEARCH_PAGE_SIZE) {
+// Page is full. Send it on.
+break;
+}
+}
+}
+// Give the results back to select2 as the results parameter.
+query.callback({
+results: results,
+// Say there's more if we broke out of the loop.
+more: i < layer_names_sorted.length,
+// If there are more results, start after where we left off.
+context: i + 1
+});
+},
+formatResult: function(result, container, query) {
+// Given a select2 result record, the element that our results go
+// in, and the query used to get the result, return a jQuery element
+// that goes in the container to represent the result.
+// Get the layer name, and make the browse UI for it.
+return make_browse_ui(result.id);
+},
+// We want our dropdown to be big enough to browse.
+dropdownCssClass: "results-dropdown"
+});
+// Handle result selection
+$("#search").on("select2-selecting", function(event) {
+// The select2 id of the thing clicked (the layer's name) is event.val
+var layer_name = event.val;
+// User chose this layer. Add it to the global shortlist.
+// Only add to the shortlist if it isn't already there
+// Was it already there?
+var found = false;
+for(var j = 0; j < shortlist.length; j++) {
+if(shortlist[j] == layer_name) {
+found = true;
+break;
+}
+}
+if(!found) {
+// It's new. Add it to the shortlist
+shortlist.push(layer_name);
+// Update the UI to reflect this. This may redraw the view.
+update_shortlist_ui();
+}
+// Don't actually change the selection.
+// This keeps the dropdown open when we click.
+event.preventDefault();
+});
+$("#recalculate-statistics").button().click(function() {
+// Re-calculate the statistics between the currently filtered hexes and
+// everything else.
+// Put up the throbber instead of us.
+$("#recalculate-statistics").hide();
+$(".recalculate-throbber").show();
+// This holds the currently enabled filters.
+var filters = get_current_filters();
+with_filtered_signatures(filters, function(signatures) {
+// Find everything passing the filters and run the statistics.
+recalculate_statistics(signatures);
+});
+	});
+	// Temporary Inflate Button
+	$("#inflate").button().click(function() {
+		initialize_view (0);
+recreate_map(current_layout_name, 2);
+		refresh ();
+	});
+	// Create Pop-Up UI for Set Operations
+	$("#set-operations").prepend(create_set_operation_ui ());
+	// Action handler for display of set operation pop-up
+	$("#set-operation").button().click(function() {
+		set_operation_clicks++;
+		if (set_operation_clicks % 2 != 0){
+			show_set_operation_drop_down ();
+			}
+		else {
+			hide_set_operation_drop_down ();
+			var drop_downs = document.getElementsByClassName("set-operation-value");
+				for (var i = 0; i < drop_downs.length; i++) {
+					drop_downs[i].style.visibility="hidden";
+				}
+		}
+	});
+	// Coputation of Set Operations
+	var compute_button = document.getElementsByClassName ("compute-button");
+	compute_button[0].onclick = function () {
+		var layer_names = [];
+		var layer_values = [];
+		var layer_values_text = [];
+		var drop_down_layers = document.getElementsByClassName("set-operation-value");
+		var drop_down_data_values = document.getElementsByClassName("set-operation-layer-value");
+		var function_type = document.getElementById("set-operations-list");
+		var selected_function = function_type.selectedIndex;
+		var selected_index = drop_down_layers[0].selectedIndex;
+		layer_names.push(drop_down_layers[0].options[selected_index].text);
+		var selected_index = drop_down_data_values[0].selectedIndex;
+		layer_values.push(drop_down_data_values[0].options[selected_index].value);
+		layer_values_text.push(drop_down_data_values[0].options[selected_index].text);
+		if (selected_function != 5) {
+			var selected_index = drop_down_data_values[1].selectedIndex;
+			layer_values.push(drop_down_data_values[1].options[selected_index].value);
+			layer_values_text.push(drop_down_data_values[1].options[selected_index].text);
+			var selected_index = drop_down_layers[1].selectedIndex;
+			layer_names.push(drop_down_layers[1].options[selected_index].text);
+		}
+		switch (selected_function) {
+			case 1:
+				compute_intersection(layer_values, layer_names, layer_values_text);
+				break;
+			case 2:
+				compute_union(layer_values, layer_names, layer_values_text);
+				break;
+			case 3:
+				compute_set_difference(layer_values, layer_names, layer_values_text);
+				break;
+			case 4:
+				compute_symmetric_difference(layer_values, layer_names, layer_values_text);
+				break;
+			case 5:
+				compute_absolute_complement(layer_values, layer_names, layer_values_text);
+				break
+			default:
+				complain ("Set Theory Error");
+		}
+	};
+// Download the layer index
+$.get("layers.tab", function(tsv_data) {
+// Layer index is <name>\t<filename>\t<clumpiness>
+var parsed = $.tsv.parseRows(tsv_data);
+for(var i = 0; i < parsed.length; i++) {
+// Pull out the parts of the TSV entry
+// This is the name of the layer.
+var layer_name = parsed[i][0];
+if(layer_name == "") {
+// Skip any blank lines
+continue;
+}
+// This is the URL from which to download the TSV for the actual
+// layer.
+var layer_url = parsed[i][1];
+// This is the layer's clumpiness score
+var layer_clumpiness = parseFloat(parsed[i][2]);
+// This is the number of hexes that the layer has any values for.
+// We need to get it from the server so we don't have to download
+// the layer to have it.
+var layer_count = parseFloat(parsed[i][3]);
+// This is the number of 1s in a binary layer, or NaN in other
+// layers
+var layer_positives = parseFloat(parsed[i][4]);
+// Add this layer to our index of layers
+add_layer_url(layer_name, layer_url, {
+clumpiness: layer_clumpiness,
+positives: layer_positives,
+n: layer_count
+});
+}
+// Now we have added layer downloaders for all the layers in the
+// index. Update the UI
+update_browse_ui();
+}, "text");
+// Download full score matrix index, which we later use for statistics. Note
+// that stats won't work unless this finishes first. TODO: enforce this.
+$.get("matrices.tab", function(tsv_data) {
+// Matrix index is just <filename>
+var parsed = $.tsv.parseRows(tsv_data);
+for(var i = 0; i < parsed.length; i++) {
+// Pull out the parts of the TSV entry
+// This is the filename of the matrix.
+var matrix_name = parsed[i][0];
+if(matrix_name == "") {
+// Not a real matrix
+continue;
+}
+// Add it to the global list
+available_matrices.push(matrix_name);
+}
+}, "text");
+// Download color map information
+$.get("colormaps.tab", function(tsv_data) {
+// Colormap data is <layer name>\t<value>\t<category name>\t<color>
+// \t<value>\t<category name>\t<color>...
+var parsed = $.tsv.parseRows(tsv_data);
+for(var i = 0; i < parsed.length; i++) {
+// Get the name of the layer
+var layer_name = parsed[i][0];
+// Skip blank lines
+if(layer_name == "") {
+continue;
+}
+// This holds all the categories (name and color) by integer index
+var colormap = [];
+print("Loading colormap for " + layer_name);
+for(j = 1; j < parsed[i].length; j += 3) {
+// Store each color assignment.
+// Doesn't run if there aren't any assignments, leaving an empty
+// colormap object that just forces automatic color selection.
+// This holds the index of the category
+var category_index = parseInt(parsed[i][j]);
+// The colormap gets an object with the name and color that the
+// index number refers to. Color is stored as a color object.
+colormap[category_index] = {
+name: parsed[i][j + 1],
+color: Color(parsed[i][j + 2])
+};
+print( colormap[category_index].name + " -> " +
+colormap[category_index].color.hexString());
+}
+// Store the finished color map in the global object
+colormaps[layer_name] = colormap;
+}
+// We may need to redraw the view in response to having new color map
+// info, if it came particularly late.
+refresh();
+}, "text");
+// Download the Matrix Names and pass it to the layout_names array
+	$.get("matrixnames.tab", function(tsv_data) {
+// This is an array of rows, which are strings of matrix names
+var parsed = $.tsv.parseRows(tsv_data);
+for(var i = 0; i < parsed.length; i++) {
+// Pull out the parts of the TSV entry
+var label = parsed[i][0];
+			if(label == "") {
+// Skip any blank lines
+continue;
+}
+// Add layout names to global array of names
+layout_names.push(label);
+if(layout_names.length == 1) {
+// This is the very first layout. Pull it up.
+// TODO: We don't go through the normal change event since we
+// never change the dropdown value actually. But we duplicate
+// user selection hode here.
+var current_layout = "Current Layout: " + layout_names[0];
+		        $("#current-layout").text(current_layout);
+		        initialize_view (0);
+recreate_map(layout_names[0], 1);
+		        refresh ();
+		        current_layout_name = layout_names[0];
+}
+}
+}, "text");
+	$("#layout-search").select2({
+placeholder: "Select a Layout...",
+query: function(query) {
+// Given a select2 query object, call query.callback with an object
+// with a "results" array.
+// This is the array of result objects we will be sending back.
+var results = [];
+// Get where we should start in the layer list, from select2's
+// infinite scrolling.
+var start_position = 0;
+if(query.context != undefined) {
+start_position = query.context;
+}
+for(var i = start_position; i < layout_names.length; i++) {
+// For each possible result
+if(layout_names[i].toLowerCase().indexOf(
+query.term.toLowerCase()) != -1) {
+// Query search term is in this layer's name. Add a select2
+// record to our results. Don't specify text: our custom
+// formatter looks up by ID and makes UI elements
+// dynamically.
+results.push({
+id: layout_names[i]
+});
+if(results.length >= SEARCH_PAGE_SIZE) {
+// Page is full. Send it on.
+break;
+}
+}
+}
+// Give the results back to select2 as the results parameter.
+query.callback({
+results: results,
+// Say there's more if we broke out of the loop.
+more: i < layout_names.length,
+// If there are more results, start after where we left off.
+context: i + 1
+});
+},
+formatResult: function(result, container, query) {
+// Given a select2 result record, the element that our results go
+// in, and the query used to get the result, return a jQuery element
+// that goes in the container to represent the result.
+// Get the layer name, and make the browse UI for it.
+return make_toggle_layout_ui(result.id);
+},
+// We want our dropdown to be big enough to browse.
+dropdownCssClass: "results-dropdown"
+});
+	// Handle result selection
+$("#layout-search").on("select2-selecting", function(event) {
+// The select2 id of the thing clicked (the layout's name) is event.val
+var layout_name = event.val;
+		var current_layout = "Current Layout: " + layout_name;
+		document.getElementById('current-layout').innerHTML=current_layout;
+		initialize_view (0);
+recreate_map(layout_name, 1);
+		refresh ();
+// Don't actually change the selection.
+// This keeps the dropdown open when we click.
+event.preventDefault();
+		current_layout_name = layout_name;
+});
+	drl_values(layout_names[0]);
+	assignment_values (layout_names[0], 1);
+	current_layout_name = layout_names[0];
+});

Mercurial > repos > adam-novak > hexagram

comparison hexagram-6ae12361157c/hexagram/hexagram.js~ @ 0:1407e3634bcf draft default tip