Customize nodes with JSX views

sandbox/data/custom-node/CustomNode.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import './res/styles/custom-node.css';
+
+const ICON_PATH = './data/custom-node/res/images/';
+
+const ICON_TYPES = {
+    MAN: ICON_PATH + 'man.svg',
+    WOMAN: ICON_PATH + 'girl.svg',
+    CAR: ICON_PATH + 'car.svg',
+    BIKE: ICON_PATH + 'bike.svg'
+};
+
+/**
+ * Component that renders a person's name and gender, along with icons
+ * representing if they have a driver license for bike and / or car.
+ */
+function CustomNode({ person }) {
+    const isMale = person.gender === 'male';
+
+    return (
+        <div className={`flex-container person-node ${isMale ? 'male' : 'female'}`}>
+            <div className="name">{person.name}</div>
+
+            <div className="flex-container fill-space flex-container-row">
+                <div className="fill-space">
+                    <div
+                        className="icon"
+                        style={{ backgroundImage: `url('${isMale ? ICON_TYPES.MAN : ICON_TYPES.WOMAN}')` }}
+                    />
+                </div>
+
+                <div className="icon-bar">
+                    {person.hasBike && (
+                        <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.BIKE}')` }} />
+                    )}
+                    {person.hasCar && <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.CAR}')` }} />}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CustomNode;

sandbox/data/custom-node/custom-node.config.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import CustomNode from './CustomNode';
+
+module.exports = {
+    automaticRearrangeAfterDropNode: false,
+    collapsible: false,
+    height: 400,
+    highlightDegree: 1,
+    highlightOpacity: 0.2,
+    linkHighlightBehavior: true,
+    maxZoom: 8,
+    minZoom: 0.1,
+    nodeHighlightBehavior: true,
+    panAndZoom: false,
+    staticGraph: false,
+    width: 800,
+    node: {
+        color: '#d3d3d3',
+        fontColor: 'black',
+        fontSize: 12,
+        fontWeight: 'normal',
+        highlightColor: 'red',
+        highlightFontSize: 12,
+        highlightFontWeight: 'bold',
+        highlightStrokeColor: 'SAME',
+        highlightStrokeWidth: 1.5,
+        labelProperty: 'name',
+        mouseCursor: 'pointer',
+        opacity: 1,
+        renderLabel: false,
+        size: 700,
+        strokeColor: 'none',
+        strokeWidth: 1.5,
+        svg: '',
+        symbolType: 'circle',
+        viewGenerator: node => <CustomNode person={node} />
+    },
+    link: {
+        color: '#d3d3d3',
+        opacity: 1,
+        semanticStrokeWidth: false,
+        strokeWidth: 4,
+        highlightColor: 'blue'
+    }
+};

sandbox/data/custom-node/custom-node.data.js

@@ -0,0 +1,50 @@
+module.exports = {
+    links: [
+        {
+            source: 1,
+            target: 2
+        },
+        {
+            source: 1,
+            target: 3
+        },
+        {
+            source: 1,
+            target: 4
+        },
+        {
+            source: 3,
+            target: 4
+        }
+    ],
+    nodes: [
+        {
+            id: 1,
+            name: 'Mary',
+            gender: 'female',
+            hasCar: false,
+            hasBike: false
+        },
+        {
+            id: 2,
+            name: 'Roy',
+            gender: 'male',
+            hasCar: false,
+            hasBike: true
+        },
+        {
+            id: 3,
+            name: 'Frank',
+            gender: 'male',
+            hasCar: true,
+            hasBike: true
+        },
+        {
+            id: 4,
+            name: 'Melanie',
+            gender: 'female',
+            hasCar: true,
+            hasBike: false
+        }
+    ]
+};