From ec1e667acb4ac836e9b871f66c9279da20555547 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Mon, 13 Aug 2018 22:25:32 -0400
Subject: [PATCH 1/2] fix colorpicker within fold within fold style

---
 src/styles/components/widgets/_colorpicker.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/styles/components/widgets/_colorpicker.scss b/src/styles/components/widgets/_colorpicker.scss
index 6e522ad40..8e1b9affc 100644
--- a/src/styles/components/widgets/_colorpicker.scss
+++ b/src/styles/components/widgets/_colorpicker.scss
@@ -95,3 +95,11 @@ $colorpicker-width: 185px;
     }
   }
 }
+
+.fold .fold {
+  .colorpicker__container {
+    width: calc(
+      $colorpicker-width - var(--spacing-half-unit) - var(--spacing-half-unit)
+    );
+  }
+}

From dbf8532867269b7e4def0d9489f23a60b86bf223 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Mon, 13 Aug 2018 23:05:56 -0400
Subject: [PATCH 2/2] fix aggregation section appearing when there are no
 aggregations

---
 src/default_panels/GraphTransformsPanel.js | 66 +++++++++++-----------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/default_panels/GraphTransformsPanel.js b/src/default_panels/GraphTransformsPanel.js
index fda3c3ab3..9b0deeea3 100644
--- a/src/default_panels/GraphTransformsPanel.js
+++ b/src/default_panels/GraphTransformsPanel.js
@@ -24,35 +24,39 @@ export class Aggregations extends Component {
       return null;
     }
 
-    return aggregations
-      .filter(
-        aggr =>
-          aggr.target && aggr.target.match(/transforms\[\d*\]\./gi) === null
-      )
-      .map(({target}, i) => (
-        <AggregationSection show key={i} aggregationIndex={i}>
-          <Dropdown
-            attr="func"
-            label={target}
-            options={[
-              {label: _('Count'), value: 'count'},
-              {label: _('Sum'), value: 'sum'},
-              {label: _('Average'), value: 'avg'},
-              {label: _('Median'), value: 'median'},
-              {label: _('Mode'), value: 'mode'},
-              {label: _('RMS'), value: 'rms'},
-              {label: _('Standard Deviation'), value: 'stddev'},
-              {label: _('Min'), value: 'min'},
-              {label: _('Max'), value: 'max'},
-              {label: _('First'), value: 'first'},
-              {label: _('Last'), value: 'last'},
-              {label: _('Change'), value: 'change'},
-              {label: _('Range'), value: 'range'},
-            ]}
-            clearable={false}
-          />
-        </AggregationSection>
-      ));
+    return (
+      <PlotlySection name={_('Aggregations')} attr="aggregations">
+        {aggregations
+          .filter(
+            aggr =>
+              aggr.target && aggr.target.match(/transforms\[\d*\]\./gi) === null
+          )
+          .map(({target}, i) => (
+            <AggregationSection show key={i} aggregationIndex={i}>
+              <Dropdown
+                attr="func"
+                label={target}
+                options={[
+                  {label: _('Count'), value: 'count'},
+                  {label: _('Sum'), value: 'sum'},
+                  {label: _('Average'), value: 'avg'},
+                  {label: _('Median'), value: 'median'},
+                  {label: _('Mode'), value: 'mode'},
+                  {label: _('RMS'), value: 'rms'},
+                  {label: _('Standard Deviation'), value: 'stddev'},
+                  {label: _('Min'), value: 'min'},
+                  {label: _('Max'), value: 'max'},
+                  {label: _('First'), value: 'first'},
+                  {label: _('Last'), value: 'last'},
+                  {label: _('Change'), value: 'change'},
+                  {label: _('Range'), value: 'range'},
+                ]}
+                clearable={false}
+              />
+            </AggregationSection>
+          ))}
+      </PlotlySection>
+    );
   }
 }
 
@@ -88,9 +92,7 @@ const GraphTransformsPanel = (props, {localize: _}) => {
           ]}
         />
 
-        <PlotlySection name={_('Aggregations')} attr="aggregations">
-          <Aggregations />
-        </PlotlySection>
+        <Aggregations />
       </TransformAccordion>
     </TraceAccordion>
   );