React 15 compat & node label keys

node label key
catch no props custom mark
let facetcontroller accept a react15Wrapper because 15 doesn't support Fragments

Author: emeeks

src/components/FacetController.js

@@ -31,7 +31,8 @@ function validFrameProps(originalProps, frameType) {
 }
 
 type FacetControllerProps = {
-  children: Node
+  children: Node,
+  react15Wrapper: Element<*>
 }
 
 type Props = FacetControllerProps & OrdinalFrameProps & XYFrameProps
@@ -177,6 +178,16 @@ class FacetController extends React.Component<Props, State> {
   })
 
   render() {
+    const Wrapper = this.props.react15Wrapper
+
+    if (Wrapper) {
+      return React.cloneElement(
+        Wrapper,
+        undefined,
+        this.processFacetController(this.props, this.state)
+      )
+    }
+
     return (
       <React.Fragment>
         {this.processFacetController(this.props, this.state)}

src/components/NetworkFrame.js

@@ -1542,7 +1542,11 @@ class NetworkFrame extends React.Component<Props, State> {
         nodeSizeAccessor
       })
     } else if (d.type === "basic-node-label") {
-      return <g transform={`translate(${d.x},${d.y})`}>{d.element}</g>
+      return (
+        <g key={d.key} transform={`translate(${d.x},${d.y})`}>
+          {d.element}
+        </g>
+      )
     } else if (d.type === "react-annotation" || typeof d.type === "function") {
       return svgReactAnnotationRule({
         d,

src/components/svg/networkDrawing.js

@@ -345,6 +345,7 @@ export const drawEdges = ({
       })
       if (
         renderedCustomMark &&
+        renderedCustomMark.props &&
         (renderedCustomMark.props.markType !== "path" ||
           renderedCustomMark.props.d)
       ) {

src/components/visualizationLayerBehavior/general.js

@@ -94,6 +94,7 @@ export function createPoints({
 
     if (
       renderedCustomMark &&
+      renderedCustomMark.props &&
       !renderedCustomMark.props.markType &&
       (!canvasRender || canvasRender(d.data, i) !== true)
     ) {

src/docs/components/FacetControllerDocs.js

@@ -265,6 +265,9 @@ export default class FacetControllerDemo extends React.Component {
               pieceIDAccessor="color"
               sharedRExtent={true}
               axis={{ orient: "left" }}
+              react15Wrapper={
+                <div style={{ display: "flex", border: "2px solid gold" }} />
+              }
             >
               <OrdinalFrame data={orData} />
               <XYFrame