[deck arcs] add JS hooks for sourceColor & targetColor

(cherry picked from commit 71866f6)

superset/assets/src/explore/controls.jsx

@@ -242,6 +242,14 @@ export const controls = {
     renderTrigger: true,
   },
 
+  target_color_picker: {
+    label: t('Target Color'),
+    description: t('Color of the target location'),
+    type: 'ColorPickerControl',
+    default: colorPrimary,
+    renderTrigger: true,
+  },
+
   legend_position: {
     label: t('Legend Position'),
     description: t('Choose the position of the legend'),
@@ -725,6 +733,7 @@ export const controls = {
     label: t('Stroke Width'),
     validators: [v.integer],
     default: null,
+    renderTrigger: true,
     choices: formatSelectOptions([1, 2, 3, 4, 5]),
   },
 

superset/assets/src/explore/visTypes.jsx

@@ -807,9 +807,9 @@ export const visTypes = {
       {
         label: t('Arc'),
         controlSetRows: [
-          ['color_picker', 'legend_position'],
+          ['color_picker', 'target_color_picker'],
           ['dimension', 'color_scheme'],
-          ['stroke_width', null],
+          ['stroke_width', 'legend_position'],
         ],
       },
       {

superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx

@@ -69,16 +69,13 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
   }
   addColor(data, fd) {
     const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
-    const fixedColor = [c.r, c.g, c.b, 255 * c.a];
-
     return data.map((d) => {
       let color;
       if (fd.dimension) {
         color = hexToRGB(getColorFromScheme(d.cat_color, fd.color_scheme), c.a * 255);
-      } else {
-        color = fixedColor;
+        return { ...d, color };
       }
-      return { ...d, color };
+      return d;
     });
   }
   getLayers(values) {

superset/assets/src/visualizations/deckgl/layers/arc.jsx

@@ -19,9 +19,13 @@ function getPoints(data) {
 }
 
 function getLayer(fd, data, slice) {
+  const sc = fd.color_picker;
+  const tc = fd.target_color_picker;
   return new ArcLayer({
     id: `path-layer-${fd.slice_id}`,
     data,
+    getSourceColor: d => d.sourceColor || d.color || [sc.r, sc.g, sc.b, 255 * sc.a],
+    getTargetColor: d => d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
     strokeWidth: (fd.stroke_width) ? fd.stroke_width : 3,
     ...common.commonLayerProps(fd, slice),
   });

superset/assets/src/visualizations/word_cloud.js

@@ -33,8 +33,6 @@ function wordCloud(element, props) {
     colorScheme,
   } = props;
 
-  console.log('data', data);
-
   const chart = d3.select(element);
   const size = [width, height];
   const rotationFn = ROTATION[rotation] || ROTATION.random;