Moving aggregation-only transforms out of dev (#459)

* various adjustments for aggregation transforms

* move transforms out of dev

Author: nicolaskruchten

dev/App.js

@@ -6,7 +6,7 @@ import 'react-select/dist/react-select.css';
 import brace from 'brace'; // eslint-disable-line no-unused-vars
 import AceEditor from 'react-ace';
 import Select from 'react-select';
-import PlotlyEditor, {DefaultEditor, Panel, GraphTransformsPanel} from '../src';
+import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 import Inspector from 'react-inspector';
 import 'brace/mode/json';
 import 'brace/theme/textmate';
@@ -119,7 +119,6 @@ class App extends Component {
           showFieldTooltips
         >
           <DefaultEditor>
-            <GraphTransformsPanel group="Dev" name="Transforms" />
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select

package.json

@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.6.4",
     "plotly-icons": "latest",
-    "plotly.js": "^1.36.1",
+    "plotly.js": "1.37.1",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",

src/DefaultEditor.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {PanelMenuWrapper} from './components';
 import {
   GraphCreatePanel,
+  GraphTransformsPanel,
   StyleLayoutPanel,
   StyleAxesPanel,
   StyleLegendPanel,
@@ -21,6 +22,7 @@ class DefaultEditor extends Component {
     return (
       <PanelMenuWrapper>
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
+        <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
         <StyleNotesPanel group={_('Style')} name={_('Notes')} />

src/components/containers/TransformAccordion.js

@@ -31,23 +31,25 @@ class TransformAccordion extends Component {
         </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: _('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}]`;
-              updateContainer({[key]: {type}});
-            }
-          },
-        };
-      }),
+      label: _('Aggregation'),
+      handler: handlers[2].handler,
     };
 
     return (

src/components/fields/DataSelector.js

@@ -29,12 +29,15 @@ export class UnconnectedDataSelector extends Component {
     this.srcProperty = nestedProperty(props.container, this.srcAttr);
     this.fullValue = this.srcProperty.get();
 
-    this.is2D =
-      (props.attr === 'z' &&
-        ['contour', 'heatmap', 'surface', 'heatmapgl'].includes(
-          props.container.type
-        )) ||
-      (props.container.type === 'table' && props.attr !== 'columnorder');
+    this.is2D = false;
+    if (props.container) {
+      this.is2D =
+        (props.attr === 'z' &&
+          ['contour', 'heatmap', 'surface', 'heatmapgl'].includes(
+            props.container.type
+          )) ||
+        (props.container.type === 'table' && props.attr !== 'columnorder');
+    }
   }
 
   updatePlot(value) {

src/default_panels/GraphTransformsPanel.js

@@ -64,9 +64,7 @@ const GraphTransformsPanel = (props, {localize: _}) => {
 
         <DataSelector label={_('By')} attr="groups" />
 
-        <PlotlySection name={_('Aggregations')} attr="aggregations">
-          <Aggregations />
-        </PlotlySection>
+        <Aggregations />
       </TransformAccordion>
     </TraceAccordion>
   );

src/lib/connectAggregationToTransform.js

@@ -19,7 +19,7 @@ export default function connectAggregationToTransform(WrappedComponent) {
       const {aggregationIndex} = props;
       const {container, fullContainer} = context;
 
-      const aggregations = container.aggregations || [];
+      const aggregations = (container && container.aggregations) || [];
       const fullAggregations = fullContainer.aggregations || [];
       this.container = aggregations[aggregationIndex];
       this.fullContainer = fullAggregations[aggregationIndex];

src/styles/components/containers/_panel.scss

@@ -92,3 +92,10 @@
     padding: 0;
   }
 }
+
+.fold {
+  .panel {
+    overflow-y: initial;
+    overflow-x: initial;
+  }
+}

src/styles/components/widgets/_microtip.scss

@@ -26,6 +26,7 @@
   transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
+  display: none;
   will-change: transform;
   opacity: 0;
   pointer-events: none;
@@ -62,6 +63,7 @@
 [aria-label][role~='tooltip']:focus::after {
   opacity: 1;
   pointer-events: auto;
+  display: block;
 }
 
 /* ------------------------------------------------
@@ -143,7 +145,7 @@
 [role~='tooltip'][data-microtip-position|='bottom']::before {
   transform: translate3d(-50%, -10px, 0);
   bottom: auto;
-  left: 50%;
+  left: 10px;
   top: 100%;
 }
 
@@ -153,8 +155,8 @@
 
 [role~='tooltip'][data-microtip-position|='bottom']::after {
   transform: translate3d(-50%, -10px, 0);
+  left: 10px;
   top: 100%;
-  left: 50%;
 }
 
 [role~='tooltip'][data-microtip-position='bottom']:hover::after {
@@ -254,7 +256,7 @@
 
 [role~='tooltip'][data-microtip-size='medium']::after {
   white-space: initial;
-  width: 150px;
+  width: 140px;
 }
 
 [role~='tooltip'][data-microtip-size='large']::after {