move transforms out of dev; fix transforms dropdown; remove Aggregate section heading from other transforms

Author: dmt0

src/DefaultEditor.js

@@ -26,7 +26,7 @@ class DefaultEditor extends Component {
       <PanelMenuWrapper>
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
-        <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
+        <GraphTransformsPanel group='Graph' name="Transforms" />
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
         <StyleNotesPanel group={_('Style')} name={_('Notes')} />

src/components/containers/PanelHeader.js

@@ -63,19 +63,20 @@ class PanelHeader extends Component {
                 label={addAction.label}
               />
               {this.state.addPanelOpen && (
-                <ModalBox onClose={this.togglePanel} relative>
+                <div className="Select"><div className="Select-menu-outer"><div className="Select-menu">
                   {addAction.handler.map(({label, handler}) => (
-                    <p
+                    <div
+                      className="Select-option"
                       key={label}
                       onClick={() => {
                         handler(this.context);
                         this.togglePanel();
                       }}
                     >
                       {label}
-                    </p>
+                  </div>
                   ))}
-                </ModalBox>
+                </div></div></div>
               )}
             </div>
           ) : null}

src/components/containers/TransformAccordion.js

@@ -34,25 +34,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: _('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}]`;
+              updateContainer({[key]: {type}});
+            }
+          },
+        };
+      }),
     };
 
     return (

src/default_panels/GraphTransformsPanel.js

@@ -47,6 +47,7 @@ export class Aggregations extends Component {
   }
 }
 
+Aggregations.plotly_editor_traits = {no_visibility_forcing: true};
 Aggregations.contextTypes = {
   fullContainer: PropTypes.object,
   localize: PropTypes.func,
@@ -66,7 +67,9 @@ const GraphTransformsPanel = (props, {localize: _}) => {
 
         <DataSelector label={_('By')} attr="groups" />
 
-        <Aggregations />
+        <PlotlySection name={_('Aggregations')} attr="aggregations">
+          <Aggregations />
+        </PlotlySection>
       </TransformAccordion>
     </TraceAccordion>
   );

src/styles/components/containers/_fold.scss

@@ -158,6 +158,12 @@
       border-width: 1px 1px 1px 1px;
     }
   }
+
+  // if the panel is within a fold, allow overflow for dropdown, etc.
+  .panel {
+    overflow-x: visible;
+    overflow-y: visible;
+  }
 }
 
 .fold + .fold {

src/styles/components/containers/_panel.scss

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