Refactor force-directed graph (#5691)

* Refactor and add props to Force Directed Graph

* update label and enable renderTrigger

superset/assets/src/explore/controls.jsx

@@ -838,6 +838,7 @@ export const controls = {
 
   link_length: {
     type: 'SelectControl',
+    renderTrigger: true,
     freeForm: true,
     label: t('Link Length'),
     default: '200',
@@ -847,6 +848,7 @@ export const controls = {
 
   charge: {
     type: 'SelectControl',
+    renderTrigger: true,
     freeForm: true,
     label: t('Charge'),
     default: '-500',

superset/assets/src/explore/visTypes.jsx

@@ -1398,7 +1398,7 @@ export const visTypes = {
   },
 
   directed_force: {
-    label: t('Directed Force Layout'),
+    label: t('Force-directed Graph'),
     controlPanelSections: [
       {
         label: t('Query'),

superset/assets/src/visualizations/directed_force.js

@@ -1,18 +1,34 @@
 /* eslint-disable no-param-reassign */
 import d3 from 'd3';
+import PropTypes from 'prop-types';
+import './directed_force.css';
 
-require('./directed_force.css');
+const propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    source: PropTypes.string,
+    target: PropTypes.string,
+    value: PropTypes.number,
+  })),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  linkLength: PropTypes.number,
+  charge: PropTypes.number,
+};
 
 /* Modified from http://bl.ocks.org/d3noob/5141278 */
-const directedForceVis = function (slice, json) {
-  const div = d3.select(slice.selector);
-  const width = slice.width();
-  const height = slice.height();
-  const fd = slice.formData;
-  const linkLength = fd.link_length || 200;
-  const charge = fd.charge || -500;
+function ForceDirectedGraph(element, props) {
+  PropTypes.checkPropTypes(propTypes, props, 'prop', 'ForceDirectedGraph');
 
-  const links = json.data;
+  const {
+    data,
+    width,
+    height,
+    linkLength = 200,
+    charge = -500,
+  } = props;
+  const div = d3.select(element);
+
+  const links = data;
   const nodes = {};
   // Compute the distinct nodes from the links.
   links.forEach(function (link) {
@@ -160,9 +176,21 @@ const directedForceVis = function (slice, json) {
   node.append('text')
     .attr('x', 6)
     .attr('dy', '.35em')
-  .text(function (d) {
-    return d.name;
-  });
-};
+    .text(d => d.name);
+}
 
-module.exports = directedForceVis;
+function adaptor(slice, payload) {
+  const { selector, formData } = slice;
+  const { link_length: linkLength, charge } = formData;
+  const element = document.querySelector(selector);
+
+  return ForceDirectedGraph(element, {
+    data: payload.data,
+    width: slice.width(),
+    height: slice.height(),
+    linkLength,
+    charge,
+  });
+}
+
+export default adaptor;