From c50375dfeafae623651b0e325360b3b8bc4654f0 Mon Sep 17 00:00:00 2001 From: chriddyp Date: Mon, 24 Jul 2017 15:47:42 -0400 Subject: [PATCH 1/4] Clear the selectedData if the selection box was cleared\nThis partially fixes https://github.com/plotly/dash/issues/97 but depends on https://github.com/plotly/plotly.js/issues/1911 getting fixed --- src/components/Graph.react.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js index 4ecd3197e..e4f064088 100644 --- a/src/components/Graph.react.js +++ b/src/components/Graph.react.js @@ -1,5 +1,5 @@ import React, {Component, PropTypes} from 'react'; -import {contains, filter, has, type} from 'ramda'; +import {contains, filter, has, isNil, type} from 'ramda'; /* global Plotly:true */ const filterEventData = (gd, eventData, event) => { @@ -7,6 +7,16 @@ const filterEventData = (gd, eventData, event) => { if (contains(event, ['click', 'hover', 'selected'])) { const points = []; + /* + * On unselect (double-clicking after selecting data), + * the eventData is just `undefined`. + * We're treating a graph with no selection data as having a + * selectionData of `null` to match the initial state of the graph. + */ + if (isNil(eventData)) { + return null; + } + /* * remove `data`, `layout`, `xaxis`, etc * objects from the event data since they're so big From 2f01fe0158a5ec1f4974bbdd8f5cebdb8daaaf71 Mon Sep 17 00:00:00 2001 From: chriddyp Date: Mon, 24 Jul 2017 16:06:44 -0400 Subject: [PATCH 2/4] use `deselect` instead --- src/components/Graph.react.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js index e4f064088..ef9870b46 100644 --- a/src/components/Graph.react.js +++ b/src/components/Graph.react.js @@ -7,12 +7,6 @@ const filterEventData = (gd, eventData, event) => { if (contains(event, ['click', 'hover', 'selected'])) { const points = []; - /* - * On unselect (double-clicking after selecting data), - * the eventData is just `undefined`. - * We're treating a graph with no selection data as having a - * selectionData of `null` to match the initial state of the graph. - */ if (isNil(eventData)) { return null; } @@ -101,12 +95,16 @@ export default class PlotlyGraph extends Component { gd.on('plotly_selected', (eventData) => { const selectedData = filterEventData(gd, eventData, 'selected'); if (setProps) setProps({selectedData}); + gd.on('plotly_deselect', () => { + if (setProps) setProps({selectedData: null}); if (fireEvent) fireEvent({event: 'selected'}); }); gd.on('plotly_relayout', (eventData) => { const relayoutData = filterEventData(gd, eventData, 'relayout'); - if (setProps) setProps({relayoutData}); - if (fireEvent) fireEvent({event: 'relayout'}); + if (!isNil(relayoutData)) { + if (setProps) setProps({relayoutData}); + if (fireEvent) fireEvent({event: 'relayout'}); + } }); gd.on('plotly_unhover', () => { if (clear_on_unhover) { From f1dd396093b25f7c7a471fc946666743dd4c3ae8 Mon Sep 17 00:00:00 2001 From: chriddyp Date: Mon, 24 Jul 2017 16:07:10 -0400 Subject: [PATCH 3/4] only event data if there are actual points --- src/components/Graph.react.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js index ef9870b46..130c0f8d8 100644 --- a/src/components/Graph.react.js +++ b/src/components/Graph.react.js @@ -84,17 +84,25 @@ export default class PlotlyGraph extends Component { gd.on('plotly_click', (eventData) => { const clickData = filterEventData(gd, eventData, 'click'); - if (setProps) setProps({clickData}); - if (fireEvent) fireEvent({event: 'click'}); + if (!isNil(clickData)) { + if (setProps) setProps({clickData}); + if (fireEvent) fireEvent({event: 'click'}); + } }); gd.on('plotly_hover', (eventData) => { const hoverData = filterEventData(gd, eventData, 'hover'); - if (setProps) setProps({hoverData}); - if (fireEvent) fireEvent({event: 'hover'}) + if (!isNil(hoverData)) { + if (setProps) setProps({hoverData}); + if (fireEvent) fireEvent({event: 'hover'}) + } }); gd.on('plotly_selected', (eventData) => { const selectedData = filterEventData(gd, eventData, 'selected'); - if (setProps) setProps({selectedData}); + if (!isNil(selectedData)) { + if (setProps) setProps({selectedData}); + if (fireEvent) fireEvent({event: 'selected'}); + } + }); gd.on('plotly_deselect', () => { if (setProps) setProps({selectedData: null}); if (fireEvent) fireEvent({event: 'selected'}); From 75d0079f6008c9a3d6e6e3627345c2c75e520b8b Mon Sep 17 00:00:00 2001 From: chriddyp Date: Mon, 24 Jul 2017 16:14:08 -0400 Subject: [PATCH 4/4] v0.7.1 --- CHANGELOG.md | 5 +++++ dash_core_components/version.py | 2 +- package.json | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7535790b3..4ea319b34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [0.7.1] - 2017-07-24 +### Fixed +- Clearing a Graph selection box sets the `selectedData` value to `None` (`null` in JavaScript). Before, it didn't change the `selectedData` property, preventing the user and the Dash developer from clearing selections. Fixes https://github.com/plotly/dash/issues/97, thanks to @pmbaumgartner for reporting. + + ## [0.7.0] - 2017-07-20 ### Added - The `clearable` property to the `Dropdown`, which toggles on and off the "x" on the side of the dropdown that clears the current selection. diff --git a/dash_core_components/version.py b/dash_core_components/version.py index a71c5c7f1..f0788a87a 100644 --- a/dash_core_components/version.py +++ b/dash_core_components/version.py @@ -1 +1 @@ -__version__ = '0.7.0' +__version__ = '0.7.1' diff --git a/package.json b/package.json index 401d31534..179324968 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dash-core-components", - "version": "0.7.0", + "version": "0.7.1", "description": "Core component suite for Dash", "repository": { "type": "git",