Fix misc dashboard bugs

frontend/src/dashboard/components/DashboardGrid.jsx

@@ -137,12 +137,12 @@ export default class DashboardGrid extends Component {
     }
 
     // we need to track whether or not we're dragging so we can disable pointer events on action buttons :-/
-    onDrag(layout, oldItem, newItem, placeholder, e) {
+    onDrag() {
         if (!this.state.isDragging) {
             this.setState({ isDragging: true });
         }
     }
-    onDragStop(layout, oldItem, newItem, placeholder, e) {
+    onDragStop() {
         this.setState({ isDragging: false });
     }
 

frontend/src/dashboard/components/grid/GridItem.jsx

@@ -16,21 +16,26 @@ export default class GridItem extends Component {
     }
 
     onDragHandler(handlerName) {
-      return (e, {element, position}) => {
+        return (e, {element, position}) => {
+            // react-draggle seems to return undefined/NaN occasionally, which breaks things
+            if (isNaN(position.clientX) || isNaN(position.clientY)) {
+                return;
+            }
 
-        let { dragStartPosition } = this.state;
-        if (handlerName === "onDragStart") {
-            dragStartPosition = position;
-            this.setState({ dragStartPosition: position });
-        }
-        let pos = {
-            x: position.clientX - dragStartPosition.clientX,
-            y: position.clientY - dragStartPosition.clientY,
-        }
-        this.setState({ dragging: handlerName === "onDragStop" ? null : pos });
+            let { dragStartPosition } = this.state;
+            if (handlerName === "onDragStart") {
+                dragStartPosition = position;
+                this.setState({ dragStartPosition: position });
+            }
 
-        this.props[handlerName](this.props.i, {e, element, position: pos });
-      };
+            let pos = {
+                x: position.clientX - dragStartPosition.clientX,
+                y: position.clientY - dragStartPosition.clientY,
+            }
+            this.setState({ dragging: handlerName === "onDragStop" ? null : pos });
+
+            this.props[handlerName](this.props.i, {e, element, position: pos });
+        };
     }
 
     onResizeHandler(handlerName) {

frontend/src/dashboard/components/grid/GridLayout.jsx

@@ -42,7 +42,7 @@ export default class GridLayout extends Component {
     }
 
     onDragStart(i, { position }) {
-        this.setState({ dragging: true })
+        // this.setState({ dragging: true })
     }
 
     layoutsOverlap(a, b) {
@@ -59,7 +59,8 @@ export default class GridLayout extends Component {
             ...this.computeDraggedLayout(i, position),
             i: "placeholder"
         }
-        this.setState({ placeholderLayout: placeholderLayout });
+        this.setState({ dragging: true, placeholderLayout: placeholderLayout });
+        this.props.onDrag();
     }
 
     onDragStop(i, { position }) {
@@ -76,6 +77,7 @@ export default class GridLayout extends Component {
         if (newLayout) {
             this.props.onLayoutChange(newLayout);
         }
+        this.props.onDragStop();
     }
 
     computeDraggedLayout(i, position) {

frontend/src/visualizations/components/LegendHeader.jsx

@@ -74,13 +74,13 @@ const LegendItem = ({ card, index, showDots, showTitles, onSeriesHoverChange })
         onMouseLeave={() => onSeriesHoverChange && onSeriesHoverChange(null) }
     >
         <a href={Urls.card(card.id)} className={cx("no-decoration h3 text-bold flex align-center", { mr1: showTitles })} style={{ overflowX: "hidden", flex: "0 1 auto" }}>
-            {showDots && <div className="flex-no-shrink inline-block circular" style={{width: 13, height: 13, margin: 4, marginRight: 8, backgroundColor: COLORS[index % COLORS.length]}} />}
+            {showDots && <div className="flex-no-shrink inline-block circular" style={{width: 13, height: 13, margin: 4, marginRight: 8, backgroundColor: color}} />}
             {showTitles && <div style={{ overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{card.name}</div> }
         </a>
     </Tooltip>
 
 const AddSeriesItem = ({ onAddSeries, showTitles }) =>
-    <a className="h3 ml1 mr2 cursor-pointer flex align-center text-brand-hover" style={{ pointerEvents: "all" }} onClick={onAddSeries}>
+    <a className="h3 ml1 mr2 cursor-pointer flex align-center text-brand-hover" onClick={onAddSeries}>
         <span className="flex-no-shrink circular bordered border-brand flex layout-centered" style={{ width: 20, height: 20, marginRight: 8 }}>
             <Icon className="text-brand" name="add" width={10} height={10} />
         </span>