Clear the selectedData if the selection box was cleared

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.

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.7.0'
+__version__ = '0.7.1'

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",

src/components/Graph.react.js

@@ -1,12 +1,16 @@
 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) => {
     let filteredEventData;
     if (contains(event, ['click', 'hover', 'selected'])) {
         const points = [];
 
+        if (isNil(eventData)) {
+            return null;
+        }
+
         /*
          * remove `data`, `layout`, `xaxis`, etc
          * objects from the event data since they're so big
@@ -80,23 +84,35 @@ 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'});
         });
         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) {