Skip to content

GitLab

M
morpheus.js
Commit 748ea21d authored by Joshua Gould's avatar Joshua Gould
Browse files
Options

scroll lens multi

parent f3122169
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 172 deletions
js/morpheus-latest.min.js
View file @ 748ea21d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/ui/heat_map.js
View file @ 748ea21d
...@@ -2148,6 +2148,30 @@ morpheus.HeatMap.prototype = { ...@@ -2148,6 +2148,30 @@ morpheus.HeatMap.prototype = {
toggleInfoWindow: function () { toggleInfoWindow: function () {
this.setTooltipMode(this.tooltipMode == 1 ? 0 : 1); this.setTooltipMode(this.tooltipMode == 1 ? 0 : 1);
}, },
_setTipText: function (tipText, tipFollowText, options) {
if (this.tooltipMode === 0) {
this.toolbar.$tip.html(tipText.join(''));
} else if (this.tooltipMode === 1) {
this.$tipInfoWindow.html(tipText.join(''));
}
if (tipFollowText.length > 0) {
this.tipFollowHidden = false;
this.$tipFollow.html('<span style="max-width:400px;">' + tipFollowText.join('') + '</span>');
this._updateTipFollowPosition(options);
} else {
this.tipFollowHidden = true;
this.$tipFollow.html('').css({
left: -1000,
top: -1000
});
}
this.trigger('change', {
name: 'setToolTip',
source: this,
arguments: arguments
});
},
setToolTip: function (rowIndex, columnIndex, options) { setToolTip: function (rowIndex, columnIndex, options) {
options = options || {}; options = options || {};
if (this.options.showSeriesNameInTooltip) { if (this.options.showSeriesNameInTooltip) {
...@@ -2156,184 +2180,225 @@ morpheus.HeatMap.prototype = { ...@@ -2156,184 +2180,225 @@ morpheus.HeatMap.prototype = {
if (options.heatMapLens) { if (options.heatMapLens) {
// don't draw lens if currently visible // don't draw lens if currently visible
// row lens // row lens
if (rowIndex >= 0 && (rowIndex >= this.heatmap.lastPosition.bottom || rowIndex < this.heatmap.lastPosition.top)) { var $wrapper = $('<div></div>');
var heatMapWidth = this.heatmap.getUnscaledWidth(); var wrapperHeight = 0;
var top = rowIndex; // Math.max(0, rowIndex - 1); var wrapperWidth = 0;
var bottom = rowIndex + 1; //Math.min(rowIndex + 1, this.heatmap.rowPositions.getLength()); var found = false;
var startPix = this.heatmap.rowPositions.getPosition(top); var inline = [];
var endPix = startPix + this.heatmap.rowPositions.getItemSize(top); if (rowIndex != null && rowIndex.length > 0) {
var heatMapHeight = endPix - startPix; for (var hoverIndex = 0; hoverIndex < rowIndex.length; hoverIndex++) {
var canvas = morpheus.CanvasUtil.createCanvas(); var row = rowIndex[hoverIndex];
var trackWidth = 0; if (row >= 0 && (row >= this.heatmap.lastPosition.bottom || row < this.heatmap.lastPosition.top)) {
for (var i = 0, ntracks = this.rowTracks.length; i < ntracks; i++) { found = true;
var track = this.rowTracks[i]; var heatMapWidth = this.heatmap.getUnscaledWidth();
if (track.isVisible()) { var top = row; // Math.max(0, rowIndex - 1);
trackWidth += track.getUnscaledWidth(); var bottom = row + 1; //Math.min(rowIndex + 1, this.heatmap.rowPositions.getLength());
} var startPix = this.heatmap.rowPositions.getPosition(top);
} var endPix = startPix + this.heatmap.rowPositions.getItemSize(top);
var canvasWidth = trackWidth + heatMapWidth + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS; var heatMapHeight = endPix - startPix;
canvas.width = canvasWidth * morpheus.CanvasUtil.BACKING_SCALE; var canvas = morpheus.CanvasUtil.createCanvas();
canvas.style.width = canvasWidth + 'px'; var trackWidth = 0;
canvas.height = heatMapHeight * morpheus.CanvasUtil.BACKING_SCALE; for (var i = 0, ntracks = this.rowTracks.length; i < ntracks; i++) {
canvas.style.height = heatMapHeight + 'px'; var track = this.rowTracks[i];
var context = canvas.getContext('2d'); if (track.isVisible()) {
morpheus.CanvasUtil.resetTransform(context); trackWidth += track.getUnscaledWidth();
context.save(); }
context.translate(-this.heatmap.lastClip.x, -startPix); }
context.rect(this.heatmap.lastClip.x, startPix, this.heatmap.lastClip.width, this.heatmap.lastClip.height);
context.clip(); var canvasWidth = trackWidth + heatMapWidth + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS;
this.heatmap._draw({ canvas.width = canvasWidth * morpheus.CanvasUtil.BACKING_SCALE;
left: this.heatmap.lastPosition.left, canvas.style.width = canvasWidth + 'px';
right: this.heatmap.lastPosition.right,
top: top, canvas.height = heatMapHeight * morpheus.CanvasUtil.BACKING_SCALE;
bottom: bottom, canvas.style.height = heatMapHeight + 'px';
context: context var context = canvas.getContext('2d');
}); morpheus.CanvasUtil.resetTransform(context);
context.restore();
context.translate(heatMapWidth + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS, -startPix);
trackWidth = 0;
for (var i = 0, ntracks = this.rowTracks.length; i < ntracks; i++) {
var track = this.rowTracks[i];
if (track.isVisible()) {
context.save(); context.save();
context.translate(trackWidth, 0); context.translate(-this.heatmap.lastClip.x, -startPix);
context.rect(0, startPix, track.getUnscaledWidth(), track.lastClip.height); context.rect(this.heatmap.lastClip.x, startPix, this.heatmap.lastClip.width, this.heatmap.lastClip.height);
context.clip(); context.clip();
track._draw({ this.heatmap._draw({
start: top, left: this.heatmap.lastPosition.left,
end: bottom, right: this.heatmap.lastPosition.right,
vector: track.getVector(), top: top,
context: context, bottom: bottom,
availableSpace: track.getUnscaledWidth() context: context
}); });
context.restore(); context.restore();
trackWidth += track.getUnscaledWidth(); context.translate(heatMapWidth + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS, -startPix);
trackWidth = 0;
for (var i = 0, ntracks = this.rowTracks.length; i < ntracks; i++) {
var track = this.rowTracks[i];
if (track.isVisible()) {
context.save();
context.translate(trackWidth, 0);
context.rect(0, startPix, track.getUnscaledWidth(), track.lastClip.height);
context.clip();
track._draw({
start: top,
end: bottom,
vector: track.getVector(),
context: context,
availableSpace: track.getUnscaledWidth()
});
context.restore();
trackWidth += track.getUnscaledWidth();
}
}
$(canvas).appendTo($wrapper);
canvas.style.top = wrapperHeight + 'px';
wrapperHeight += parseFloat(canvas.style.height);
wrapperWidth = parseFloat(canvas.style.width);
} else {
inline.push(row);
} }
} }
var $wrapper = $('<div></div>'); if (found) {
$wrapper.css({ $wrapper.css({
height: canvas.style.height, height: wrapperHeight,
width: parseFloat(canvas.style.width) width: wrapperWidth
}); });
$(canvas).appendTo($wrapper);
var rect = this.$parent[0].getBoundingClientRect();
this.$tipFollow.html($wrapper).css({
left: parseFloat(this.heatmap.canvas.style.left) - 1,
top: options.event.clientY - rect.top
});
return;
}
// column lens var rect = this.$parent[0].getBoundingClientRect();
if (columnIndex >= 0 && (columnIndex >= this.heatmap.lastPosition.right || columnIndex < this.heatmap.lastPosition.left)) { this.$tipFollow.html($wrapper).css({
var heatMapHeight = this.heatmap.getUnscaledHeight(); left: parseFloat(this.heatmap.canvas.style.left) - 1,
var left = columnIndex; // Math.max(0, rowIndex - 1); top: options.event.clientY - rect.top - wrapperHeight / 2
var right = columnIndex + 1; //Math.min(rowIndex + 1, this.heatmap.rowPositions.getLength()); });
var startPix = this.heatmap.columnPositions.getPosition(left); return;
var endPix = startPix + this.heatmap.columnPositions.getItemSize(left); } else {
var heatMapWidth = endPix - startPix; var tipText = [];
var canvas = morpheus.CanvasUtil.createCanvas(); var tipFollowText = [];
var trackHeight = 0; for (var hoverIndex = 0; hoverIndex < inline.length; hoverIndex++) {
for (var i = 0, ntracks = this.columnTracks.length; i < ntracks; i++) { this.tooltipProvider(this, inline[hoverIndex], -1,
var track = this.columnTracks[i]; options, this.tooltipMode === 0 ? '&nbsp;&nbsp;&nbsp;'
if (track.isVisible()) { : '<br />', false, tipText);
trackHeight += track.getUnscaledHeight(); if (this.options.inlineTooltip) {
this.tooltipProvider(this, inline[hoverIndex], -1,
options, '<br />', true, tipFollowText);
}
} }
this._setTipText(tipText, tipFollowText, options);
} }
var canvasHeight = trackHeight + heatMapHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS; }
canvas.width = heatMapWidth * morpheus.CanvasUtil.BACKING_SCALE; if (columnIndex != null && columnIndex.length > 0) {
canvas.style.width = heatMapWidth + 'px';
canvas.height = canvasHeight * morpheus.CanvasUtil.BACKING_SCALE; for (var hoverIndex = 0; hoverIndex < columnIndex.length; hoverIndex++) {
canvas.style.height = canvasHeight + 'px'; var column = columnIndex[hoverIndex];
var context = canvas.getContext('2d'); if (column >= 0 && (column >= this.heatmap.lastPosition.right || column < this.heatmap.lastPosition.left)) {
found = true;
context.translate(-startPix, 0); var heatMapHeight = this.heatmap.getUnscaledHeight();
context.save(); var left = column; // Math.max(0, rowIndex - 1);
context.rect(startPix, trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS, this.heatmap.lastClip.width, this.heatmap.lastClip.height + trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS); var right = column + 1; //Math.min(rowIndex + 1, this.heatmap.rowPositions.getLength());
context.clip(); var startPix = this.heatmap.columnPositions.getPosition(left);
context.translate(0, trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS - this.heatmap.lastClip.y); var endPix = startPix + this.heatmap.columnPositions.getItemSize(left);
var heatMapWidth = endPix - startPix;
this.heatmap._draw({ var canvas = morpheus.CanvasUtil.createCanvas();
top: this.heatmap.lastPosition.top, var trackHeight = 0;
bottom: this.heatmap.lastPosition.bottom, for (var i = 0, ntracks = this.columnTracks.length; i < ntracks; i++) {
left: left, var track = this.columnTracks[i];
right: right, if (track.isVisible()) {
context: context trackHeight += track.getUnscaledHeight();
}); }
context.restore(); }
trackHeight = 0; var canvasHeight = trackHeight + heatMapHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS;
for (var i = 0, ntracks = this.columnTracks.length; i < ntracks; i++) { canvas.width = heatMapWidth * morpheus.CanvasUtil.BACKING_SCALE;
var track = this.columnTracks[i]; canvas.style.width = heatMapWidth + 'px';
if (track.isVisible()) { canvas.height = canvasHeight * morpheus.CanvasUtil.BACKING_SCALE;
canvas.style.height = canvasHeight + 'px';
var context = canvas.getContext('2d');
morpheus.CanvasUtil.resetTransform(context);
context.translate(-startPix, 0);
context.save(); context.save();
context.translate(0, trackHeight); context.rect(startPix, trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS, this.heatmap.lastClip.width, this.heatmap.lastClip.height + trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS);
context.rect(startPix, 0, track.lastClip.width, track.getUnscaledHeight());
context.clip(); context.clip();
track._draw({ context.translate(0, trackHeight + morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS - this.heatmap.lastClip.y);
start: left,
end: right, this.heatmap._draw({
vector: track.getVector(), top: this.heatmap.lastPosition.top,
context: context, bottom: this.heatmap.lastPosition.bottom,
availableSpace: track.getUnscaledHeight(), left: left,
clip: { right: right,
x: track.lastClip.x, context: context
y: track.lastClip.y
}
}); });
context.restore(); context.restore();
trackHeight += track.getUnscaledHeight(); trackHeight = 0;
for (var i = 0, ntracks = this.columnTracks.length; i < ntracks; i++) {
var track = this.columnTracks[i];
if (track.isVisible()) {
context.save();
context.translate(0, trackHeight);
context.rect(startPix, 0, track.lastClip.width, track.getUnscaledHeight());
context.clip();
track._draw({
start: left,
end: right,
vector: track.getVector(),
context: context,
availableSpace: track.getUnscaledHeight(),
clip: {
x: track.lastClip.x,
y: track.lastClip.y
}
});
context.restore();
trackHeight += track.getUnscaledHeight();
}
}
canvas.style.left = wrapperWidth + 'px';
wrapperWidth += parseFloat(canvas.style.width);
wrapperHeight = parseFloat(canvas.style.height);
$(canvas).appendTo($wrapper);
} else {
inline.push(column);
} }
} }
var $wrapper = $('<div></div>'); if (found) {
$wrapper.css({ $wrapper.css({
width: canvas.style.width, height: wrapperHeight,
height: parseFloat(canvas.style.height) width: wrapperWidth
}); });
$(canvas).appendTo($wrapper);
var rect = this.$parent[0].getBoundingClientRect(); var rect = this.$parent[0].getBoundingClientRect();
this.$tipFollow.html($wrapper).css({ this.$tipFollow.html($wrapper).css({
top: parseFloat(this.heatmap.canvas.style.top) - trackHeight - morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS - 1, top: parseFloat(this.heatmap.canvas.style.top) - trackHeight - morpheus.HeatMap.SPACE_BETWEEN_HEAT_MAP_AND_ANNOTATIONS - 1,
left: (options.event.clientX - rect.left) - (parseFloat(canvas.style.width) / 2) left: (options.event.clientX - rect.left) - (wrapperWidth / 2)
}); });
return; return;
} else {
var tipText = [];
var tipFollowText = [];
for (var hoverIndex = 0; hoverIndex < inline.length; hoverIndex++) {
this.tooltipProvider(this, -1, inline[hoverIndex],
options, this.tooltipMode === 0 ? '&nbsp;&nbsp;&nbsp;'
: '<br />', false, tipText);
if (this.options.inlineTooltip) {
this.tooltipProvider(this, -1, inline[hoverIndex],
options, '<br />', true, tipFollowText);
}
}
this._setTipText(tipText, tipFollowText, options);
}
} }
// column lens
} }
// tooltipMode=0 top, 1=window, 2=inline // tooltipMode=0 top, 1=window, 2=inline
var tipText = this.tooltipProvider(this, rowIndex, columnIndex, var tipText = [];
this.tooltipProvider(this, rowIndex, columnIndex,
options, this.tooltipMode === 0 ? '&nbsp;&nbsp;&nbsp;' options, this.tooltipMode === 0 ? '&nbsp;&nbsp;&nbsp;'
: '<br />'); : '<br />', false, tipText);
var tipFollowText = ''; var tipFollowText = [];
if (this.options.inlineTooltip) { if (this.options.inlineTooltip) {
tipFollowText = this.tooltipProvider(this, rowIndex, columnIndex, this.tooltipProvider(this, rowIndex, columnIndex,
options, '<br />', true); options, '<br />', true, tipFollowText);
} }
this._setTipText(tipText, tipFollowText, options);
if (this.tooltipMode === 0) {
this.toolbar.$tip.html(tipText);
} else if (this.tooltipMode === 1) {
this.$tipInfoWindow.html(tipText);
}
if (tipFollowText !== '') {
this.tipFollowHidden = false;
this.$tipFollow.html('<span style="max-width:400px;">' + tipFollowText + '</span>');
this._updateTipFollowPosition(options);
} else {
this.tipFollowHidden = true;
this.$tipFollow.html('').css({
left: -1000,
top: -1000
});
}
this.trigger('change', {
name: 'setToolTip',
source: this,
arguments: arguments
});
} }
, ,
_updateTipFollowPosition: function (options) { _updateTipFollowPosition: function (options) {
......
src/ui/heat_map_tooltip_provider.js
View file @ 748ea21d
morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex, morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex,
options, separator, quick) { options, separator, quick, tipText) {
var dataset = heatMap.project.getSortedFilteredDataset(); var dataset = heatMap.project.getSortedFilteredDataset();
var tipText = [];
if (!quick) { if (!quick) {
if (options.value) { // key value pairs for custom tooltip if (options.value) { // key value pairs for custom tooltip
_.each(options.value, function (pair) { _.each(options.value, function (pair) {
...@@ -50,6 +49,21 @@ morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex, ...@@ -50,6 +49,21 @@ morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex,
separator); separator);
} }
} else if (quick) {
if (rowIndex !== -1) {
morpheus.HeatMapTooltipProvider._tracksToString(options,
heatMap.rowTracks.filter(function (t) {
return t.settings.inlineTooltip;
}), dataset.getRowMetadata(), rowIndex, tipText,
separator);
}
if (columnIndex !== -1) {
morpheus.HeatMapTooltipProvider._tracksToString(options,
heatMap.columnTracks.filter(function (t) {
return t.settings.inlineTooltip;
}), dataset.getColumnMetadata(), columnIndex, tipText,
separator);
}
} }
if (!quick) { if (!quick) {
...@@ -131,7 +145,7 @@ morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex, ...@@ -131,7 +145,7 @@ morpheus.HeatMapTooltipProvider = function (heatMap, rowIndex, columnIndex,
heatMap.columnDendrogram._selectedNodeColor, separator); heatMap.columnDendrogram._selectedNodeColor, separator);
} }
} }
return tipText.join('');
}; };
morpheus.HeatMapTooltipProvider._matrixValueToString = function (dataset, morpheus.HeatMapTooltipProvider._matrixValueToString = function (dataset,
......
src/ui/scented_search.js
View file @ 748ea21d
...@@ -13,20 +13,20 @@ morpheus.ScentedSearch = function (model, positions, isVertical, scrollbar, ...@@ -13,20 +13,20 @@ morpheus.ScentedSearch = function (model, positions, isVertical, scrollbar,
scrollbar.decorator = this; scrollbar.decorator = this;
var _this = this; var _this = this;
var mouseMove = function (e) { var mouseMove = function (e) {
var index = _this.getIndex(e); var indices = _this.getSearchIndices(e);
_this.mouseMovedIndex = index;
document.body.style.cursor = index < 0 ? 'default' : 'pointer'; document.body.style.cursor = indices.length === 0 ? 'default' : 'pointer';
scrollbar.canvas.style.cursor = index < 0 ? 'default' : 'pointer'; scrollbar.canvas.style.cursor = indices.length === 0 ? 'default' : 'pointer';
var tipOptions = { var tipOptions = {
event: e, event: e,
heatMapLens: index >= 0 heatMapLens: indices.length >= 0
}; };
if (isVertical) { if (isVertical) {
controller.setToolTip(index >= 0 ? _this.searchIndices[index] : -1, controller.setToolTip(indices.length >= 0 ? indices : null,
-1, tipOptions); -1, tipOptions);
} else { } else {
controller.setToolTip(-1, index >= 0 ? _this.searchIndices[index] controller.setToolTip(-1, indices.length >= 0 ? indices
: -1, tipOptions); : null, tipOptions);
} }
}; };
...@@ -48,6 +48,27 @@ morpheus.ScentedSearch.prototype = { ...@@ -48,6 +48,27 @@ morpheus.ScentedSearch.prototype = {
var val = pix[this.isVertical ? 'y' : 'x']; var val = pix[this.isVertical ? 'y' : 'x'];
return this.getIndexForPix(val); return this.getIndexForPix(val);
}, },
getSearchIndices: function (event) {
var pix = morpheus.CanvasUtil.getMousePos(event.target, event);
var val = pix[this.isVertical ? 'y' : 'x'];
return this.getSearchIndicesForPix(val);
},
getSearchIndicesForPix: function (pix) {
var indices = this.searchIndices;
if (indices == null) {
return [];
}
var scale = this.scale;
var tolerance = morpheus.ScentedSearch.LINE_HEIGHT;
var matches = [];
for (var i = 0, length = indices.length; i < length; i++) {
var midVal = this.positions.getPosition(indices[i]) * scale;
if (Math.abs(midVal - pix) <= tolerance) {
matches.push(indices[i]);
}
}
return matches;
},
getIndexForPix: function (pix) { getIndexForPix: function (pix) {
var indices = this.searchIndices; var indices = this.searchIndices;
if (indices == null) { if (indices == null) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment