diff --git a/emperor/support_files/js/color-view-controller.js b/emperor/support_files/js/color-view-controller.js
index 6910c969..c80a4860 100644
--- a/emperor/support_files/js/color-view-controller.js
+++ b/emperor/support_files/js/color-view-controller.js
@@ -148,7 +148,7 @@ define([
// for rest if there are non numeric categories
if (plottables.length > 0) {
scope.setSlickGridDataset(
- [{category: 'Non-numeric values', value: '#64655d',
+ [{id: 0, category: 'Non-numeric values', value: '#64655d',
plottables: plottables}]);
}
else {
@@ -270,7 +270,8 @@ define([
*/
ColorViewController.prototype.isColoringContinuous = function() {
// the bodygrid can have at most one element (NA values)
- return this.$scaled.is(':checked') && this.bodyGrid.getData().length <= 1;
+ return (this.$scaled.is(':checked') &&
+ this.getSlickGridDataset().length <= 1);
};
/**
@@ -513,7 +514,7 @@ define([
var decompViewDict = this.getView();
if (this.$scaled.is(':checked')) {
// Get the current SlickGrid data and update with the saved color
- data = this.bodyGrid.getData();
+ data = this.getSlickGridDataset();
data[0].value = json.data['Non-numeric values'];
this.setPlottableAttributes(
decompViewDict, json.data['Non-numeric values'], data[0].plottables);
diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js
index 00390dd3..755078df 100644
--- a/emperor/support_files/js/controller.js
+++ b/emperor/support_files/js/controller.js
@@ -680,11 +680,11 @@ define([
name: 'Open in Vega Editor',
callback: function(key, opts) {
scope.exportToVega();
- },
+ }
}
}
- },
- },
+ }
+ }
});
// The context menu is only shown if there's a single right click. We
@@ -998,7 +998,7 @@ define([
var payload = {
mode: 'vega',
renderer: 'canvas',
- spec: JSON.stringify(spec),
+ spec: JSON.stringify(spec)
};
_postMessage(url, payload);
};
diff --git a/emperor/support_files/js/view-controller.js b/emperor/support_files/js/view-controller.js
index afab9fa3..9d1e0ec4 100644
--- a/emperor/support_files/js/view-controller.js
+++ b/emperor/support_files/js/view-controller.js
@@ -186,9 +186,9 @@ define([
scope.$searchBar.tooltip({
disabled: true,
// place the element with a slight offset at the bottom of the input
- position: { my: "center top+15", at: "center bottom" },
+ position: {my: 'center top+15', at: 'center bottom'},
// prevent the tooltip from disappearing when there's no matches
- close: function(){
+ close: function() {
if (scope.bodyGrid.getDataLength() === 0 &&
scope.$searchBar.val() !== '') {
$(this).tooltip('open');
@@ -383,7 +383,7 @@ define([
this.bodyGrid = new Slick.Grid(this.$gridDiv, dataView, columns,
gridOptions);
- this.$searchBar.on("input", function (e) {
+ this.$searchBar.on('input', function(e) {
dataView.refresh();
// show a message when no results are found
@@ -393,7 +393,7 @@ define([
scope.$searchBar.tooltip('option', 'disabled', false);
scope.$searchBar.tooltip('open');
}
- else{
+ else {
scope.$searchBar.attr('title', '');
scope.$searchBar.tooltip('option', 'disabled', true);
scope.$searchBar.tooltip('close');
@@ -401,19 +401,20 @@ define([
});
function substringFilter(item, args) {
- if(!searchString &&
- item.category.toLowerCase().indexOf(scope.$searchBar.val().toLowerCase()) === -1){
+ var val = scope.$searchBar.val();
+ if (!searchString && val &&
+ item.category.toLowerCase().indexOf(val.toLowerCase()) === -1) {
return false;
}
return true;
}
- dataView.onRowCountChanged.subscribe(function (e, args) {
+ dataView.onRowCountChanged.subscribe(function(e, args) {
scope.bodyGrid.updateRowCount();
scope.bodyGrid.render();
});
- dataView.onRowsChanged.subscribe(function (e, args) {
+ dataView.onRowsChanged.subscribe(function(e, args) {
scope.bodyGrid.invalidateRows(args.rows);
scope.bodyGrid.render();
});
@@ -462,7 +463,7 @@ define([
json.category = this.getMetadataField();
// Convert SlickGrid list of objects to single object
- var gridData = this.bodyGrid.getData();
+ var gridData = this.getSlickGridDataset();
var jsonData = {};
for (var i = 0; i < gridData.length; i++) {
jsonData[gridData[i].category] = gridData[i].value;
diff --git a/emperor/support_files/js/view.js b/emperor/support_files/js/view.js
index 9d07c240..ee6d5af9 100644
--- a/emperor/support_files/js/view.js
+++ b/emperor/support_files/js/view.js
@@ -855,7 +855,7 @@ DecompositionView.prototype._buildVegaSpec = function() {
Ring: 'circle',
Square: 'square',
Icosahedron: 'cross',
- Star: 'cross',
+ Star: 'cross'
};
function viewMarkersAsVegaDataset(markers) {
@@ -870,8 +870,8 @@ DecompositionView.prototype._buildVegaSpec = function() {
color: rgbColor(marker.material.color),
originalShape: marker.userData.shape,
shape: getShape[marker.userData.shape],
- scale: { x: marker.scale.x, y: marker.scale.y, },
- opacity: marker.material.opacity,
+ scale: { x: marker.scale.x, y: marker.scale.y },
+ opacity: marker.material.opacity
});
}
}
@@ -910,14 +910,14 @@ DecompositionView.prototype._buildVegaSpec = function() {
padding: 5,
background: scope.backgroundColor,
config: {
- axis: { labelColor: scope.axesColor, titleColor: scope.axesColor, },
- title: { color: scope.axesColor, },
+ axis: { labelColor: scope.axesColor, titleColor: scope.axesColor },
+ title: { color: scope.axesColor }
},
title: 'Emperor PCoA',
data: [
{
name: 'metadata',
- values: plottablesAsMetadata(model.plottable, model.md_headers),
+ values: plottablesAsMetadata(model.plottable, model.md_headers)
},
{
name: 'points', values: viewMarkersAsVegaDataset(scope.markers),
@@ -927,28 +927,28 @@ DecompositionView.prototype._buildVegaSpec = function() {
from: 'metadata',
key: model.md_headers[0],
fields: ['id'],
- as: ['metadata'],
+ as: ['metadata']
}
- ],
- },
+ ]
+ }
],
signals: [
{
name: 'width',
- update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))',
+ update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))'
},
{
name: 'height',
- update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))',
- },
+ update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))'
+ }
],
scales: [
{ name: 'xScale', range: 'width', domain: [rangeX[0], rangeX[1]] },
{ name: 'yScale', range: 'height', domain: [rangeY[0], rangeY[1]] }
],
axes: [
- { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX], },
- { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY], }
+ { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX] },
+ { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY] }
],
marks: [
{
@@ -956,19 +956,19 @@ DecompositionView.prototype._buildVegaSpec = function() {
from: {data: 'points'},
encode: {
enter: {
- fill: { field: 'color', },
- x: { scale: 'xScale', field: 'x', },
- y: { scale: 'yScale', field: 'y', },
- shape: { field: 'shape', },
- size: { signal: 'datum.scale.x * datum.scale.y * 100', },
- opacity: { field: 'opacity', },
+ fill: { field: 'color' },
+ x: { scale: 'xScale', field: 'x' },
+ y: { scale: 'yScale', field: 'y' },
+ shape: { field: 'shape' },
+ size: { signal: 'datum.scale.x * datum.scale.y * 100' },
+ opacity: { field: 'opacity' }
},
update: {
- tooltip: { signal: 'datum.metadata' },
- },
- },
- },
- ],
+ tooltip: { signal: 'datum.metadata' }
+ }
+ }
+ }
+ ]
};
};
diff --git a/tests/javascript_tests/index.html b/tests/javascript_tests/index.html
index c5319dd2..ffc6c67a 100644
--- a/tests/javascript_tests/index.html
+++ b/tests/javascript_tests/index.html
@@ -80,6 +80,7 @@
'slickgrid': './vendor/js/slick.grid.min',
'slickformatters': './vendor/js/slick.editors.min',
'slickeditors': './vendor/js/slick.formatters.min',
+ 'slickdataview': './vendor/js/slick.dataview.min',
/* Emperor's objects */
'animationdirector': './js/animate',
@@ -147,7 +148,7 @@
},
'slickcore': ['jqueryui'],
'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',
- 'slickeditors']
+ 'slickeditors', 'slickdataview']
}
});
diff --git a/tests/javascript_tests/test_color_view_controller.js b/tests/javascript_tests/test_color_view_controller.js
index 3b882068..440f28c4 100644
--- a/tests/javascript_tests/test_color_view_controller.js
+++ b/tests/javascript_tests/test_color_view_controller.js
@@ -103,6 +103,8 @@ requirejs([
// verify the color value is set properly
equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
equal(controller.$select.val(), null);
+ equal(controller.$searchBar.val(), '');
+ equal(controller.$searchBar.is(':hidden'), true);
equal(controller.$colormapSelect.is(':disabled'), true);
equal(controller.$scaled.is(':disabled'), true);
@@ -114,6 +116,7 @@ requirejs([
var controller = new ColorViewController(
container, this.sharedDecompositionViewDict);
+
equal(controller.title, 'Color');
equal(controller.isColoringContinuous(), false);
@@ -121,14 +124,16 @@ requirejs([
controller.setMetadataField('Mixed');
controller.$colormapSelect.val('Viridis').trigger('chosen:updated');
controller.$scaled.prop('checked', true).trigger('change');
+ equal(controller.$searchBar.is(':hidden'), true);
equal(controller.isColoringContinuous(), true);
controller.setMetadataField('DOB');
- controller.$colormapSelect.val('Viridis').trigger('chosen:updated');
- controller.$scaled.prop('checked', true).trigger('change');
+ controller.$colormapSelect.val('Dark2').trigger('chosen:updated');
+ controller.$scaled.prop('checked', false).trigger('change');
+ equal(controller.$searchBar.is(':hidden'), true);
- equal(controller.isColoringContinuous(), true);
+ equal(controller.isColoringContinuous(), false);
});
test('Test _nonNumericPlottables', function() {
@@ -576,7 +581,7 @@ requirejs([
var container = $('');
var controller = new ColorViewController(
- container, this.sharedDecompositionViewDict);
+ container, this.sharedDecompositionViewDict);
controller.fromJSON(json);
var idx = 0;
@@ -587,6 +592,8 @@ requirejs([
equal(controller.$select.val(), 'DOB');
equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
equal(controller.$scaled.is(':checked'), false);
+ equal(controller.$searchBar.val(), '');
+ equal(controller.$searchBar.prop('hidden'), false);
});
test('Testing fromJSON scaled', function() {
@@ -607,6 +614,8 @@ requirejs([
equal(controller.$colormapSelect.val(), 'Viridis');
equal(controller.$scaled.is(':checked'), true);
equal(controller.isColoringContinuous(), true);
+ equal(controller.$searchBar.val(), '');
+ equal(controller.$searchBar.prop('hidden'), true);
});
test('Testing toJSON (null)', function() {
@@ -642,6 +651,9 @@ requirejs([
equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
equal(controller.$scaled.is(':checked'), false);
equal(controller.isColoringContinuous(), false);
+ equal(controller.$searchBar.val(), '');
+ equal(controller.$searchBar.prop('hidden'), false);
+
});
test('Test getDiscretePaletteColor(map)', function() {
@@ -656,20 +668,17 @@ requirejs([
'#e5c494', '#b3b3b3']);
});
- asyncTest('Test setEnabled', function() {
+ test('Test setEnabled', function() {
var container = $('');
var controller = new ColorViewController(
container, this.sharedDecompositionViewDict);
- $(function() {
- // disable
- controller.setEnabled(false);
-
- equal(controller.$colormapSelect.is(':disabled'), true);
- equal(controller.$scaled.is(':disabled'), true);
+ // disable
+ controller.setEnabled(false);
- start(); // qunit
- });
+ equal(controller.$colormapSelect.is(':disabled'), true);
+ equal(controller.$scaled.is(':disabled'), true);
+ equal(controller.$searchBar.prop('hidden'), false);
});
/**
@@ -702,6 +711,8 @@ requirejs([
equal(attr.$select.is(':disabled'), false);
equal(attr.$colormapSelect.is(':disabled'), true);
equal(attr.$scaled.is(':disabled'), true);
+ equal(attr.$searchBar.val(), '');
+ equal(attr.$searchBar.is(':disabled'), true);
start(); // qunit
});
@@ -737,6 +748,8 @@ requirejs([
equal(attr.$select.is(':disabled'), false);
equal(attr.$colormapSelect.is(':disabled'), true);
equal(attr.$scaled.is(':disabled'), true);
+ equal(attr.$searchBar.val(), '');
+ equal(attr.$searchBar.is(':disabled'), true);
start(); // qunit
});
diff --git a/tests/javascript_tests/test_view_controller.js b/tests/javascript_tests/test_view_controller.js
index d9bb9c55..ced0b765 100644
--- a/tests/javascript_tests/test_view_controller.js
+++ b/tests/javascript_tests/test_view_controller.js
@@ -456,10 +456,11 @@ requirejs([
{'scatter': dv, 'biplot': dv}, {});
$(function() {
- attr.setSlickGridDataset([{'pc1': 1, 'pc2': 2, 'pc3': 3},
- {'pc1': 1, 'pc2': 1, 'pc3': 2}]);
- deepEqual(attr.getSlickGridDataset(), [{'pc1': 1, 'pc2': 2, 'pc3': 3},
- {'pc1': 1, 'pc2': 1, 'pc3': 2}]);
+ attr.setSlickGridDataset([{'id': 1, 'pc1': 1, 'pc2': 2, 'pc3': 3},
+ {'id': 2, 'pc1': 1, 'pc2': 1, 'pc3': 2}]);
+ deepEqual(attr.getSlickGridDataset(), [
+ {'id': 1, 'pc1': 1, 'pc2': 2, 'pc3': 3},
+ {'id': 2, 'pc1': 1, 'pc2': 1, 'pc3': 2}]);
start(); // qunit
});
@@ -510,6 +511,7 @@ requirejs([
equal(attr.enabled, false);
equal(attr.$select.is(':disabled'), true);
+ equal(attr.$searchBar.is(':disabled'), true);
equal(attr.bodyGrid.getOptions().editable, false);
// enable
@@ -517,6 +519,7 @@ requirejs([
equal(attr.enabled, true);
equal(attr.$select.is(':disabled'), false);
+ equal(attr.$searchBar.is(':disabled'), false);
equal(attr.bodyGrid.getOptions().editable, true);
start(); // qunit
@@ -537,12 +540,14 @@ requirejs([
// Controllers should be enabled
equal(attr.enabled, true);
equal(attr.$select.is(':disabled'), false);
+ equal(attr.$searchBar.is(':disabled'), false);
equal(attr.bodyGrid.getOptions().editable, true);
// and they should remain the same after "enabling" them again
attr.setEnabled(true);
equal(attr.enabled, true);
equal(attr.$select.is(':disabled'), false);
+ equal(attr.$searchBar.is(':disabled'), false);
equal(attr.bodyGrid.getOptions().editable, true);
start(); // qunit