Move group and filter transforms to main

dev/App.js

@@ -7,7 +7,6 @@ import brace from 'brace'; // eslint-disable-line no-unused-vars
 import AceEditor from 'react-ace';
 import Select from 'react-select';
 import PlotlyEditor, {DefaultEditor, Panel} from '../src';
-import GraphTransformsPanel from '../src/default_panels/GraphTransformsPanelDev';
 import Inspector from 'react-inspector';
 import tips from './tips';
 import 'brace/mode/json';
@@ -43,38 +42,38 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
 const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 
 const traceTypesConfig = {
-    traces: _ => ([
-        {
-          value: 'scattergl',
-          icon: 'scatter',
-          label: _('Scatter'),
-        },
-        {
-          value: 'bar',
-          label: _('Bar'),
-        },
-        {
-          value: 'histogram',
-          label: _('Histogram'),
-        },
-        {
-          value: 'table',
-          label: _('Table'),
-        },
-        {
-          value: 'pie',
-          label: _('Pie'),
-        },
-        {
-          value: 'box',
-          label: _('Box'),
-        },
-        {
-          value: 'histogram2d',
-          label: _('Histogram 2D'),
-        },
-    ]),
-    complex: true
+  traces: _ => [
+    {
+      value: 'scattergl',
+      icon: 'scatter',
+      label: _('Scatter'),
+    },
+    {
+      value: 'bar',
+      label: _('Bar'),
+    },
+    {
+      value: 'histogram',
+      label: _('Histogram'),
+    },
+    {
+      value: 'table',
+      label: _('Table'),
+    },
+    {
+      value: 'pie',
+      label: _('Pie'),
+    },
+    {
+      value: 'box',
+      label: _('Box'),
+    },
+    {
+      value: 'histogram2d',
+      label: _('Histogram 2D'),
+    },
+  ],
+  complex: true,
 };
 
 class App extends Component {
@@ -160,7 +159,6 @@ class App extends Component {
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
         >
           <DefaultEditor>
-            <GraphTransformsPanel group="Dev" name="Transforms" />
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select

dev/mocks.json

@@ -1,6 +1,8 @@
 [
   "/mocks/aggregate.json",
   "/percy/panelTest.json",
+  "/percy/histogram.json",
+  "/percy/histogram2d.json",
   "0.json",
   "1.json",
   "10.json",

dev/percy/histogram.json

@@ -7,12 +7,9 @@
       "x": [
         1,
         2,
-        3,
-        4,
-        5,
-        6
+        3
       ],
-      "xsrc": "ints",
+      "xsrc": "x1",
       "autobinx": true,
       "xbins": {
         "start": -0.5,
@@ -21,13 +18,10 @@
       },
       "y": [
         2,
-        1,
         3,
-        5,
-        4,
-        6
+        4
       ],
-      "ysrc": "jagged ints",
+      "ysrc": "y1",
       "error_x": {
         "visible": true,
         "symmetric": true

dev/percy/histogram2d.json

@@ -9,13 +9,13 @@
         2,
         3
       ],
-      "xsrc": "ints",
+      "xsrc": "x1",
       "y": [
-        1,
         2,
-        3
+        3,
+        4
       ],
-      "ysrc": "ints",
+      "ysrc": "y1",
       "autobinx": false,
       "xbins": {
         "start": 0.5,

dev/percy/panelTest.json

@@ -16,6 +16,7 @@
       "transforms": [
         {
           "type": "aggregate",
+          "enabled": true,
           "groups": [
             1,
             2,
@@ -101,7 +102,26 @@
         "color": "#1f77b4",
         "thickness": 2,
         "width": 4
-      }
+      },
+      "transforms": [
+        {
+          "type": "groupby",
+          "groupssrc": "ints",
+          "groups": [],
+          "enabled": true
+        },
+        {
+          "enabled": true,
+          "type": "filter",
+          "target": "x",
+          "targetsrc": "ints",
+          "operation": "[]",
+          "value": [
+            "0",
+            "1"
+          ]
+        }
+      ]
     }
   ],
   "layout": {

src/__percy__/panels.percy.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import {TestEditor, plotly, setupGraphDiv} from 'lib/test-utils';
+import {TestEditor, setupGraphDiv, fixtures, plotly} from 'lib/test-utils';
 
 import {PanelMenuWrapper} from '../components';
 
@@ -19,10 +18,25 @@ const panelsToTest = {
   histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
 };
 
-const panelFixture = (Panel, group, name, data) => {
+window.URL.createObjectURL = function() {
+  return null;
+};
+
+const panelFixture = (Panel, group, name, figure) => {
+  const gd = setupGraphDiv(figure);
+  gd._context = plotly.setPlotConfig();
+  gd._context.setBackground = () => {
+    return null;
+  };
+
   return (
     <div className="plotly_editor">
-      <TestEditor plotly={plotly} graphDiv={setupGraphDiv(data)}>
+      <TestEditor
+        plotly={plotly}
+        graphDiv={gd}
+        dataSources={fixtures.scatter().dataSources}
+        dataSourceOptions={fixtures.scatter().dataSourceOptions}
+      >
         <PanelMenuWrapper>
           <Panel group={group} name={name} />
         </PanelMenuWrapper>

src/components/containers/TransformAccordion.js

@@ -14,6 +14,8 @@ class TransformAccordion extends Component {
       fullContainer,
       fullContainer: {transforms = []},
       localize: _,
+      container,
+      dataSourceOptions,
     } = this.context;
     const {children} = this.props;
 
@@ -23,7 +25,9 @@ class TransformAccordion extends Component {
       {label: _('Aggregate'), type: 'aggregate'},
     ];
 
-    if (['scatter', 'bar', 'scattergl'].indexOf(fullContainer.type) === -1) {
+    const transformableCharts = ['scatter', 'bar', 'scattergl'];
+
+    if (!transformableCharts.includes(fullContainer.type)) {
       return (
         <FoldEmpty
           icon={PlotScatterIcon}
@@ -32,39 +36,70 @@ class TransformAccordion extends Component {
       );
     }
 
+    const transformBy =
+      container.transforms &&
+      container.transforms.map(tr => {
+        let foldNameSuffix = '';
+        if (tr.groupssrc) {
+          const groupssrc =
+            dataSourceOptions &&
+            dataSourceOptions.find(d => d.value === tr.groupssrc);
+          foldNameSuffix = `: ${
+            groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc
+          }`;
+        } else if (tr.targetsrc) {
+          const targetsrc =
+            dataSourceOptions &&
+            dataSourceOptions.find(d => d.value === tr.targetsrc);
+          foldNameSuffix = `: ${
+            targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc
+          }`;
+        }
+        return foldNameSuffix;
+      });
+
     const filteredTransforms = transforms.filter(({type}) => Boolean(type));
     const content =
       filteredTransforms.length &&
       filteredTransforms.map((tr, i) => (
         <TransformFold
           key={i}
           transformIndex={i}
-          name={transformTypes.filter(({type}) => type === tr.type)[0].label}
+          name={`${
+            transformTypes.filter(({type}) => type === tr.type)[0].label
+          }${transformBy[i]}`}
           canDelete={true}
         >
           {children}
         </TransformFold>
       ));
 
-    const handlers = transformTypes.map(({label, type}) => {
-      return {
-        label,
-        handler: context => {
-          const {fullContainer, updateContainer} = context;
-          if (updateContainer) {
-            const transformIndex = Array.isArray(fullContainer.transforms)
-              ? fullContainer.transforms.length
-              : 0;
-            const key = `transforms[${transformIndex}]`;
-            updateContainer({[key]: {type}});
-          }
-        },
-      };
-    });
-
     const addAction = {
-      label: _('Aggregation'),
-      handler: handlers[2].handler,
+      label: _('Transform'),
+      handler: transformTypes.map(({label, type}) => {
+        return {
+          label,
+          handler: context => {
+            const {fullContainer, updateContainer} = context;
+            if (updateContainer) {
+              const transformIndex = Array.isArray(fullContainer.transforms)
+                ? fullContainer.transforms.length
+                : 0;
+              const key = `transforms[${transformIndex}]`;
+
+              const payload = {type};
+              const firstDataSource = dataSourceOptions[0].value;
+              if (type === 'filter') {
+                payload.targetsrc = firstDataSource;
+              } else {
+                payload.groupssrc = firstDataSource;
+              }
+
+              updateContainer({[key]: payload});
+            }
+          },
+        };
+      }),
     };
 
     return (
@@ -78,6 +113,8 @@ class TransformAccordion extends Component {
 TransformAccordion.contextTypes = {
   fullContainer: PropTypes.object,
   localize: PropTypes.func,
+  container: PropTypes.object,
+  dataSourceOptions: PropTypes.array,
 };
 
 TransformAccordion.propTypes = {