Empty folds

package.json

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

src/DefaultEditor.js

@@ -16,6 +16,7 @@ import {
   StyleColorbarsPanel,
   StyleUpdateMenusPanel,
 } from './default_panels';
+import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
 import Logo from './components/widgets/Logo';
 import {TRANSFORMABLE_TRACES} from './lib/constants';
 
@@ -62,11 +63,7 @@ class DefaultEditor extends Component {
   }
 
   hasColorbars() {
-    return this.context.fullData.some(
-      d =>
-        (d.marker && d.marker.showscale !== undefined) || // eslint-disable-line no-undefined
-        d.showscale !== undefined // eslint-disable-line no-undefined
-    );
+    return this.context.fullData.some(d => traceHasColorbar({}, d));
   }
 
   render() {

src/components/containers/SubplotAccordion.js

@@ -17,7 +17,7 @@ const CartesianSubplotFold = connectCartesianSubplotToLayout(PlotlyFold);
 class SubplotAccordion extends Component {
   render() {
     const {data = [], layout = {}, localize: _} = this.context;
-    const {children, messageIfEmptyFold} = this.props;
+    const {children} = this.props;
     const subplotFolds = [];
 
     const allCartesianAxisCombinations = data.reduce((acc, curVal, inx) => {
@@ -54,7 +54,6 @@ class SubplotAccordion extends Component {
             key={d.index[0]}
             traceIndexes={d.index}
             canDelete={false}
-            messageIfEmpty={messageIfEmptyFold}
             xaxis={d.xaxis}
             yaxis={d.yaxis}
             name={`${d.xaxisName} | ${d.yaxisName}`}
@@ -116,7 +115,6 @@ class SubplotAccordion extends Component {
             key={layoutKey}
             traceIndexes={traceIndexes}
             canDelete={false}
-            messageIfEmpty={messageIfEmptyFold}
             subplot={layoutKey}
             name={subplotName}
           >
@@ -140,7 +138,6 @@ class SubplotAccordion extends Component {
             key={i}
             traceIndexes={[i]}
             canDelete={false}
-            messageIfEmpty={messageIfEmptyFold}
             name={
               d.type === 'pie'
                 ? `${_('Pie')} ${pieCounter > 1 ? pieCounter : ''}`
@@ -166,7 +163,6 @@ SubplotAccordion.contextTypes = {
 
 SubplotAccordion.propTypes = {
   children: PropTypes.node,
-  messageIfEmptyFold: PropTypes.string,
 };
 
 export default SubplotAccordion;

src/components/containers/TraceAccordion.js

@@ -23,19 +23,21 @@ class TraceAccordion extends Component {
   setLocals(props, context) {
     // we don't want to include analysis transforms when we're in the create panel
     const base = props.canGroup ? context.fullData : context.data;
+    const traceFilterCondition =
+      this.props.traceFilterCondition || (() => true);
 
-    this.filteredTracesFullDataPositions = [];
+    this.filteredTracesIndexes = [];
     this.filteredTraces = base.filter((t, i) => {
-      if (props.excludeFits) {
-        return !(t.transforms && t.transforms.every(tr => tr.type === 'fit'));
+      if (traceFilterCondition(t, context.fullData[i])) {
+        this.filteredTracesIndexes.push(i);
+        return true;
       }
-      this.filteredTracesFullDataPositions.push(i);
-      return true;
+      return false;
     });
   }
 
   renderGroupedTraceFolds() {
-    if (!this.filteredTraces.length || this.filteredTraces.length < 2) {
+    if (!this.filteredTraces.length || this.filteredTraces.length <= 1) {
       return null;
     }
 
@@ -55,61 +57,45 @@ class TraceAccordion extends Component {
 
       dataArrayPositionsByTraceType[traceType].push(trace.index);
       fullDataArrayPositionsByTraceType[traceType].push(
-        this.filteredTracesFullDataPositions[index]
+        this.filteredTracesIndexes[index]
       );
     });
 
-    return Object.keys(fullDataArrayPositionsByTraceType).map((type, index) => {
-      return (
-        <TraceFold
-          key={index}
-          traceIndexes={dataArrayPositionsByTraceType[type]}
-          name={traceTypes(_).find(t => t.value === type).label}
-          fullDataArrayPosition={fullDataArrayPositionsByTraceType[type]}
-        >
-          {this.props.children}
-        </TraceFold>
-      );
-    });
+    return Object.keys(fullDataArrayPositionsByTraceType).map((type, index) => (
+      <TraceFold
+        key={index}
+        traceIndexes={dataArrayPositionsByTraceType[type]}
+        name={traceTypes(_).find(t => t.value === type).label}
+        fullDataArrayPosition={fullDataArrayPositionsByTraceType[type]}
+      >
+        {this.props.children}
+      </TraceFold>
+    ));
   }
 
   renderUngroupedTraceFolds() {
-    if (!this.filteredTraces.length) {
-      return null;
-    }
-
-    return this.filteredTraces.map((d, i) => {
-      return (
-        <TraceFold
-          key={i}
-          traceIndexes={[d.index]}
-          canDelete={this.props.canAdd}
-          messageIfEmpty={this.props.messageIfEmptyFold}
-          fullDataArrayPosition={[this.filteredTracesFullDataPositions[i]]}
-        >
-          {this.props.children}
-        </TraceFold>
-      );
-    });
+    return this.filteredTraces.map((d, i) => (
+      <TraceFold
+        key={i}
+        traceIndexes={[d.index]}
+        canDelete={this.props.canAdd}
+        fullDataArrayPosition={[this.filteredTracesIndexes[i]]}
+      >
+        {this.props.children}
+      </TraceFold>
+    ));
   }
 
   renderTraceFolds() {
-    if (!this.filteredTraces.length) {
-      return null;
-    }
-
-    return this.filteredTraces.map((d, i) => {
-      return (
-        <TraceFold
-          key={i}
-          traceIndexes={[i]}
-          canDelete={this.props.canAdd}
-          messageIfEmpty={this.props.messageIfEmptyFold}
-        >
-          {this.props.children}
-        </TraceFold>
-      );
-    });
+    return this.filteredTraces.map((d, i) => (
+      <TraceFold
+        key={i}
+        traceIndexes={[this.filteredTracesIndexes[i]]}
+        canDelete={this.props.canAdd}
+      >
+        {this.props.children}
+      </TraceFold>
+    ));
   }
 
   render() {
@@ -178,8 +164,7 @@ TraceAccordion.propTypes = {
   canAdd: PropTypes.bool,
   canGroup: PropTypes.bool,
   children: PropTypes.node,
-  excludeFits: PropTypes.bool,
-  messageIfEmptyFold: PropTypes.string,
+  traceFilterCondition: PropTypes.func,
 };
 
 export default TraceAccordion;

src/components/containers/TransformAccordion.js

@@ -3,16 +3,12 @@ import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectTransformToTrace} from 'lib';
-import FoldEmpty from './FoldEmpty';
-import {PlotScatterIcon} from 'plotly-icons';
-import {TRANSFORMABLE_TRACES} from 'lib/constants';
 
 const TransformFold = connectTransformToTrace(PlotlyFold);
 
 class TransformAccordion extends Component {
   render() {
     const {
-      fullContainer,
       fullContainer: {transforms = []},
       localize: _,
       container,
@@ -27,15 +23,6 @@ class TransformAccordion extends Component {
       {label: _('Sort'), type: 'sort'},
     ];
 
-    if (!TRANSFORMABLE_TRACES.includes(fullContainer.type)) {
-      return (
-        <FoldEmpty
-          icon={PlotScatterIcon}
-          messagePrimary={_('No transforms available for this trace type')}
-        />
-      );
-    }
-
     const transformBy =
       container.transforms &&
       container.transforms.map(tr => {
@@ -97,6 +84,7 @@ class TransformAccordion extends Component {
 
               const payload = {type};
               if (type === 'filter') {
+                payload.target = [];
                 payload.targetsrc = null;
               } else {
                 payload.groupssrc = null;

src/default_panels/GraphCreatePanel.js

@@ -19,7 +19,12 @@ import {
 
 const GraphCreatePanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion canAdd excludeFits>
+    <TraceAccordion
+      canAdd
+      traceFilterCondition={t =>
+        !(t.transforms && t.transforms.every(tr => tr.type === 'fit'))
+      }
+    >
       <TraceSelector label={_('Type')} attr="type" show />
 
       <LocationSelector attr="type" />

src/default_panels/GraphTransformsPanel.js

@@ -11,6 +11,7 @@ import {
   FilterValue,
 } from '../components';
 import {connectAggregationToTransform} from '../lib';
+import {TRANSFORMABLE_TRACES} from 'lib/constants';
 
 const AggregationSection = connectAggregationToTransform(PlotlySection);
 
@@ -68,7 +69,9 @@ Aggregations.contextTypes = {
 
 const GraphTransformsPanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion>
+    <TraceAccordion
+      traceFilterCondition={t => TRANSFORMABLE_TRACES.includes(t.type)}
+    >
       <TransformAccordion>
         <Radio
           attr="enabled"

src/default_panels/StyleColorbarsPanel.js

@@ -16,11 +16,13 @@ import {
   VisibilitySelect,
 } from '../components';
 
+export const traceHasColorbar = (trace, fullTrace) =>
+  (fullTrace.marker && fullTrace.marker.showscale !== undefined) || // eslint-disable-line no-undefined
+  fullTrace.showscale !== undefined; // eslint-disable-line no-undefined
+
 const StyleColorBarsPanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion
-      messageIfEmptyFold={_('Need a color scale for a colorbar!')}
-    >
+    <TraceAccordion traceFilterCondition={traceHasColorbar}>
       {['', 'marker.'].map(prefix => {
         return (
           <VisibilitySelect

src/lib/constants.js

@@ -107,12 +107,14 @@ export const TRANSFORMS_LIST = ['filter', 'groupby', 'aggregate', 'sort'];
 
 export const TRANSFORMABLE_TRACES = [
   'scatter',
-  'bar',
   'scattergl',
-  'histogram',
-  'histogram2d',
   'box',
   'violin',
+  'bar',
+  'ohlc',
+  'candlestick',
+  'histogram',
+  'histogram2d',
 ];
 
 export const COLORS = {