Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

add clear_on_doubleclick prop for clearing clickData #193

Closed
wants to merge 2 commits into from
Closed

add clear_on_doubleclick prop for clearing clickData #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ee676a
add clear_on_doubleclick prop for clearing clickData
cpsievert Apr 26, 2018
d00621f
clear on deselect events as well
cpsievert Apr 30, 2018
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
11 changes: 11 additions & 0 deletions dash_core_components/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -920,6 +920,17 @@
"computed": false
}
},
"clear_on_doubleclick": {
"type": {
"name": "bool"
},
"required": false,
"description": "If True, `clear_on_doubleclick` will clear the `clickData` property\nwhen the user double clicks.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"hoverData": {
"type": {
"name": "object"
Expand Down
21 changes: 20 additions & 1 deletion src/components/Graph.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default class PlotlyGraph extends Component {
}

bindEvents() {
const {id, fireEvent, setProps, clear_on_unhover} = this.props;
const {id, fireEvent, setProps, clear_on_unhover, clear_on_doubleclick} = this.props;

const gd = document.getElementById(id);

Expand Down Expand Up @@ -130,6 +130,10 @@ export default class PlotlyGraph extends Component {
gd.on('plotly_deselect', () => {
if (setProps) setProps({selectedData: null});
if (fireEvent) fireEvent({event: 'selected'});
if (clear_on_doubleclick) {
if (setProps) setProps({clickData: null});
if (fireEvent) fireEvent({event: 'unclick'});
}
});
gd.on('plotly_relayout', (eventData) => {
const relayoutData = filterEventData(gd, eventData, 'relayout');
Expand All @@ -144,6 +148,13 @@ export default class PlotlyGraph extends Component {
if (fireEvent) fireEvent({event: 'unhover'});
}
});
gd.on('plotly_doubleclick', () => {
if (clear_on_doubleclick) {
if (setProps) setProps({clickData: null});
if (fireEvent) fireEvent({event: 'unclick'});
}
})

}

componentDidMount() {
Expand Down Expand Up @@ -212,6 +223,12 @@ PlotlyGraph.propTypes = {
*/
clickData: PropTypes.object,

/**
* If True, `clear_on_doubleclick` will clear the `clickData` property
* when the user double clicks.
*/
clear_on_doubleclick: PropTypes.bool,

/**
* Data from latest hover event
*/
Expand All @@ -225,6 +242,7 @@ PlotlyGraph.propTypes = {
*/
clear_on_unhover: PropTypes.bool,


/**
* Data from latest select event
*/
Expand Down Expand Up @@ -481,6 +499,7 @@ PlotlyGraph.defaultProps = {
ease: 'cubic-in-out'
}
},
clear_on_doubleclick: false,
clear_on_unhover: false,
config: {
staticPlot: false,
Expand Down