Move DataSelector logic into shame

Author: VeraZab

src/EditorControls.js

@@ -7,7 +7,8 @@ import {
   shamefullyAdjustAxisRef,
   shamefullyAdjustGeo,
   shamefullyAddTableColumns,
-  shamefullyCreateSplitStyles,
+  shamefullyCreateSplitStyleProps,
+  shamefullyAdjustSplitStyleTargetContainers,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -67,6 +68,7 @@ class EditorControls extends Component {
         shamefullyClearAxisTypes(graphDiv, payload);
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);
+        shamefullyAdjustSplitStyleTargetContainers(graphDiv, payload);
 
         for (let i = 0; i < payload.traceIndexes.length; i++) {
           for (const attr in payload.update) {
@@ -79,7 +81,7 @@ class EditorControls extends Component {
             const value = payload.update[attr];
 
             if (splitTraceGroup) {
-              props = shamefullyCreateSplitStyles(
+              props = shamefullyCreateSplitStyleProps(
                 graphDiv,
                 attr,
                 traceIndex,

src/components/fields/DataSelector.js

@@ -84,39 +84,6 @@ export class UnconnectedDataSelector extends Component {
       }
     );
 
-    if (
-      this.props.container.type &&
-      this.props.container.type === 'groupby' &&
-      this.props.container.styles &&
-      !this.props.container.styles.length &&
-      data
-    ) {
-      const dedupedGroups = [];
-      data.forEach(group => {
-        if (!dedupedGroups.includes(group)) {
-          dedupedGroups.push(group);
-        }
-      });
-
-      const styles = dedupedGroups.map(groupEl => ({
-        target: groupEl,
-        value: {},
-      }));
-
-      update.styles = styles;
-    }
-
-    // When clearing the data selector of groupby transforms, we want to clear
-    // all the styles we've added
-    if (
-      this.props.container.type &&
-      this.props.container.type === 'groupby' &&
-      this.props.container.styles.length &&
-      value === null
-    ) {
-      update.styles = [];
-    }
-
     this.props.updateContainer(update);
   }
 

src/shame.js

@@ -113,7 +113,45 @@ export const shamefullyAddTableColumns = (graphDiv, {traceIndexes, update}) => {
   }
 };
 
-export const shamefullyCreateSplitStyles = (
+export const shamefullyAdjustSplitStyleTargetContainers = (
+  graphDiv,
+  {traceIndexes, update}
+) => {
+  for (const attr in update) {
+    if (attr && attr.startsWith('transforms') && attr.endsWith('groups')) {
+      const transformIndex = parseInt(attr.split('[')[1], 10);
+      const transform =
+        graphDiv.data[traceIndexes[0]].transforms[transformIndex];
+
+      if (transform && transform.type === 'groupby' && transform.styles) {
+        // Create style containers for all groups
+        if (!transform.styles.length && update[attr]) {
+          const dedupedGroups = [];
+          update[attr].forEach(group => {
+            if (!dedupedGroups.includes(group)) {
+              dedupedGroups.push(group);
+            }
+          });
+
+          const styles = dedupedGroups.map(groupEl => ({
+            target: groupEl,
+            value: {},
+          }));
+
+          update[`transforms[${transformIndex}].styles`] = styles;
+        }
+
+        // When clearing the data selector of groupby transforms, we want to clear
+        // all the styles we've added
+        if (transform.styles.length && !update[attr]) {
+          update[`transforms[${transformIndex}].styles`] = [];
+        }
+      }
+    }
+  }
+};
+
+export const shamefullyCreateSplitStyleProps = (
   graphDiv,
   attr,
   traceIndex,