Skip to content

Carson/feature/plotly crosstalk #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

Carson/feature/plotly crosstalk #281

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a73eea6
Implement crosstalk filtering
jcheng5 Jun 3, 2016
b6192e3
Support multiple layers per crosstalk key; support selection highligh…
jcheng5 Jun 8, 2016
54c2e36
Add crosstalk dependencies on the fly
jcheng5 Jun 8, 2016
bd79aaa
Fix crosstalk bugs; implement path highlighting
jcheng5 Jun 8, 2016
d58c369
Fix crosstalk breakage
jcheng5 Jun 16, 2016
786f1b1
Crosstalk selection can have zero length when inactive
jcheng5 Jun 23, 2016
5f2efaf
coloring of transient selections is working
cpsievert Aug 26, 2016
56eb3ec
get persistent selection working
cpsievert Aug 26, 2016
da91b64
handle 2D array selections (nested keys)
cpsievert Oct 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion DESCRIPTION
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,5 +52,6 @@ Suggests:
R6,
RJSONIO
Remotes:
rstudio/crosstalk
rstudio/crosstalk,
jcheng5/plotly@joe/feature/crosstalk
RoxygenNote: 5.0.1
Copy link
Contributor Author

@cpsievert cpsievert Aug 26, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is here just for the time being since we need to access plotly's "global" crosstalk options, as I'm getting here

50 changes: 29 additions & 21 deletions inst/htmlwidgets/leaflet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,10 +745,12 @@ var LayerManager = function () {
for (var i = 0; i < groupKeys.length; i++) {
var key = groupKeys[i];
var _layerInfo3 = _this._byStamp[ctg[key]];
var opts = _layerInfo3.layer.options;
_layerInfo3.layer.options.ctColor = opts.origColor;
_layerInfo3.layer.options.ctFillColor = opts.origFillColor;
_this._setOpacity(_layerInfo3, 1.0);
// reset the crosstalk style params
_layerInfo3.layer.options.ctOpacity = undefined;
_layerInfo3.layer.options.ctFillOpacity = undefined;
_layerInfo3.layer.options.ctColor = undefined;
_layerInfo3.layer.options.ctFillColor = undefined;
_this._setStyle(_layerInfo3);
}
} else {
var selectedKeys = {};
Expand All @@ -758,16 +760,22 @@ var LayerManager = function () {
var _groupKeys2 = Object.keys(ctg);
// for compatability with plotly's ability to colour selections
// https://github.com/jcheng5/plotly/blob/71cf8a/R/crosstalk.R#L96-L100
var selectionColour = crosstalk.var("selectionColour").get();
console.log(selectionColour);
var selectionColour = crosstalk.var("plotlySelectionColour").get();
var ctOpts = crosstalk.var("plotlyCrosstalkOpts").get() || { opacityDim: 0.2 };
var persist = ctOpts.persistent === true;
for (var _i4 = 0; _i4 < _groupKeys2.length; _i4++) {
var _key2 = _groupKeys2[_i4];
var _layerInfo4 = _this._byStamp[ctg[_key2]];
var _opts = _layerInfo4.layer.options;
var selected = selectedKeys[_groupKeys2[_i4]];
_layerInfo4.layer.options.ctColor = selected ? selectionColour || _opts.origColor : _opts.origColor;
_layerInfo4.layer.options.ctFillColor = selected ? selectionColour || _opts.origFillColor : _opts.origFillColor;
_this._setOpacity(_layerInfo4, selected ? 1.0 : 0.2);
var opts = _layerInfo4.layer.options;

// remember "old" selection colors if this is persistent selection
_layerInfo4.layer.options.ctColor = selected ? selectionColour : persist ? opts.ctColor : opts.origColor;
_layerInfo4.layer.options.ctFillColor = selected ? selectionColour : persist ? opts.ctFillColor : opts.origFillColor;

_layerInfo4.layer.options.ctOpacity = selected ? opts.origOpacity : persist && opts.origOpacity == opts.ctOpacity ? opts.origOpacity : ctOpts.opacityDim * opts.origOpacity;

_this._setStyle(_layerInfo4);
}
}
};
Expand Down Expand Up @@ -804,18 +812,18 @@ var LayerManager = function () {
}
}
}, {
key: "_setOpacity",
value: function _setOpacity(layerInfo, opacity) {
if (layerInfo.layer.setOpacity) {
layerInfo.layer.setOpacity(opacity);
} else if (layerInfo.layer.setStyle) {
layerInfo.layer.setStyle({
opacity: opacity * layerInfo.layer.options.origOpacity,
fillOpacity: opacity * layerInfo.layer.options.origFillOpacity,
color: layerInfo.layer.options.ctColor,
fillColor: layerInfo.layer.options.ctFillColor
});
key: "_setStyle",
value: function _setStyle(layerInfo) {
var opts = layerInfo.layer.options;
if (!layerInfo.layer.setStyle) {
return;
}
layerInfo.layer.setStyle({
opacity: opts.ctOpacity || opts.origOpacity,
fillOpacity: opts.ctFillOpacity || opts.origFillOpacity,
color: opts.ctColor || opts.origColor,
fillColor: opts.ctFillColor || opts.origFillColor
});
}
}, {
key: "getLayer",
Expand Down
58 changes: 35 additions & 23 deletions javascript/src/layer-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ export default class LayerManager {
// Need to save this info so we know what to set opacity to later
layer.options.origOpacity = typeof(layer.options.opacity) !== "undefined" ? layer.options.opacity : 0.5;
layer.options.origFillOpacity = typeof(layer.options.fillOpacity) !== "undefined" ? layer.options.fillOpacity : 0.2;
layer.options.origColor = typeof layer.options.color !== "undefined" ? layer.options.color : "#03F";
layer.options.origFillColor = typeof layer.options.fillColor !== "undefined" ? layer.options.fillColor : layer.options.origColor;
layer.options.origColor = typeof(layer.options.color) !== "undefined" ? layer.options.color : "#03F";
layer.options.origFillColor = typeof(layer.options.fillColor) !== "undefined" ? layer.options.fillColor : layer.options.origColor;
}

let ctg = this._byCrosstalkGroup[ctGroup];
Expand Down Expand Up @@ -134,11 +134,12 @@ export default class LayerManager {
for (let i = 0; i < groupKeys.length; i++) {
let key = groupKeys[i];
let layerInfo = this._byStamp[ctg[key]];
let opts = layerInfo.layer.options;
layerInfo.layer.options.ctColor = opts.origColor;
layerInfo.layer.options.ctFillColor = opts.origFillColor;
this._setOpacity(layerInfo, 1.0);

// reset the crosstalk style params
layerInfo.layer.options.ctOpacity = undefined;
layerInfo.layer.options.ctFillOpacity = undefined;
layerInfo.layer.options.ctColor = undefined;
layerInfo.layer.options.ctFillColor = undefined;
this._setStyle(layerInfo);
}
} else {
let selectedKeys = {};
Expand All @@ -148,18 +149,29 @@ export default class LayerManager {
let groupKeys = Object.keys(ctg);
// for compatability with plotly's ability to colour selections
// https://github.com/jcheng5/plotly/blob/71cf8a/R/crosstalk.R#L96-L100
let selectionColour = crosstalk.var("selectionColour").get();
console.log(selectionColour);
let selectionColour = crosstalk.var("plotlySelectionColour").get();
let ctOpts = crosstalk.var("plotlyCrosstalkOpts").get() || {opacityDim: 0.2};
let persist = ctOpts.persistent === true;
for (let i = 0; i < groupKeys.length; i++) {
let key = groupKeys[i];
let layerInfo = this._byStamp[ctg[key]];
let opts = layerInfo.layer.options;
let selected = selectedKeys[groupKeys[i]];
let opts = layerInfo.layer.options;

// remember "old" selection colors if this is persistent selection
layerInfo.layer.options.ctColor =
selected ? selectionColour || opts.origColor : opts.origColor;
selected ? selectionColour :
persist ? opts.ctColor : opts.origColor;
layerInfo.layer.options.ctFillColor =
selected ? selectionColour || opts.origFillColor : opts.origFillColor;
this._setOpacity(layerInfo, selected ? 1.0 : 0.2);
selected ? selectionColour :
persist ? opts.ctFillColor : opts.origFillColor;

layerInfo.layer.options.ctOpacity =
selected ? opts.origOpacity :
(persist && opts.origOpacity == opts.ctOpacity) ? opts.origOpacity :
ctOpts.opacityDim * opts.origOpacity;

this._setStyle(layerInfo);
}
}
};
Expand Down Expand Up @@ -195,17 +207,17 @@ export default class LayerManager {
}
}

_setOpacity(layerInfo, opacity) {
if (layerInfo.layer.setOpacity) {
layerInfo.layer.setOpacity(opacity);
} else if (layerInfo.layer.setStyle) {
layerInfo.layer.setStyle({
opacity: opacity * layerInfo.layer.options.origOpacity,
fillOpacity: opacity * layerInfo.layer.options.origFillOpacity,
color: layerInfo.layer.options.ctColor,
fillColor: layerInfo.layer.options.ctFillColor
});
_setStyle(layerInfo) {
let opts = layerInfo.layer.options;
if (!layerInfo.layer.setStyle) {
return;
}
layerInfo.layer.setStyle({
opacity: opts.ctOpacity || opts.origOpacity,
fillOpacity: opts.ctFillOpacity || opts.origFillOpacity,
color: opts.ctColor || opts.origColor,
fillColor: opts.ctFillColor || opts.origFillColor
});
}

getLayer(category, layerId) {
Expand Down