Merge pull request #493 from plotly/fit-transform-adjustments

Fit transform adjustments

Author: VeraZab

scripts/translationKeys/combined-translation-keys.txt

@@ -11,6 +11,12 @@ export class Fold extends Component {
     this.foldVisible = true;
   }
 
+  getChildContext() {
+    return {
+      foldInfo: this.props.foldInfo ? this.props.foldInfo : null,
+    };
+  }
+
   render() {
     if (!this.foldVisible && !this.props.messageIfEmpty) {
       return null;
@@ -21,6 +27,7 @@ export class Fold extends Component {
       children,
       className,
       folded,
+      foldInfo,
       toggleFold,
       hideHeader,
       icon: Icon,
@@ -56,7 +63,7 @@ export class Fold extends Component {
           className="fold__top__delete js-fold__delete"
           onClick={e => {
             e.stopPropagation();
-            deleteContainer(e);
+            deleteContainer(foldInfo);
           }}
         >
           <CloseIcon />
@@ -105,13 +112,22 @@ Fold.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   folded: PropTypes.bool,
+  foldInfo: PropTypes.object,
   toggleFold: PropTypes.func,
   hideHeader: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   messageIfEmpty: PropTypes.string,
   name: PropTypes.string,
 };
 
+Fold.contextTypes = {
+  deleteContainer: PropTypes.func,
+};
+
+Fold.childContextTypes = {
+  foldInfo: PropTypes.object,
+};
+
 class PlotlyFold extends Fold {
   constructor(props, context) {
     super(props, context);

scripts/translationKeys/translation-keys.txt

@@ -37,6 +37,12 @@ export class Panel extends Component {
     this.toggleFold = this.toggleFold.bind(this);
   }
 
+  getChildContext() {
+    return {
+      deleteContainer: this.props.deleteAction ? this.props.deleteAction : null,
+    };
+  }
+
   componentDidCatch() {
     this.setState({hasError: true});
   }
@@ -124,10 +130,11 @@ export class Panel extends Component {
 }
 
 Panel.propTypes = {
-  children: PropTypes.node,
   addAction: PropTypes.object,
-  showExpandCollapse: PropTypes.bool,
+  children: PropTypes.node,
+  deleteAction: PropTypes.func,
   noPadding: PropTypes.bool,
+  showExpandCollapse: PropTypes.bool,
 };
 
 Panel.defaultProps = {
@@ -138,6 +145,10 @@ Panel.contextTypes = {
   localize: PropTypes.func,
 };
 
+Panel.childContextTypes = {
+  deleteContainer: PropTypes.func,
+};
+
 class PlotlyPanel extends Panel {}
 
 PlotlyPanel.plotly_editor_traits = {

src/components/containers/PlotlyFold.js

@@ -12,11 +12,25 @@ const TraceFold = connectTraceToPlot(PlotlyFold);
 class TraceAccordion extends Component {
   render() {
     const {data = [], localize: _} = this.context;
-    const {canAdd, canGroup, children, messageIfEmptyFold} = this.props;
+    const {
+      canAdd,
+      canGroup,
+      children,
+      messageIfEmptyFold,
+      excludeFits,
+    } = this.props;
+
+    // we don't want to include analysis transforms when we're in the create panel
+    const filteredData = data.filter(t => {
+      if (excludeFits) {
+        return !(t.transforms && t.transforms.every(tr => tr.type === 'fit'));
+      }
+      return true;
+    });
 
     const individualTraces =
-      data.length &&
-      data.map((d, i) => {
+      filteredData.length &&
+      filteredData.map((d, i) => {
         return (
           <TraceFold
             key={i}
@@ -46,7 +60,7 @@ class TraceAccordion extends Component {
         </PlotlyPanel>
       );
     }
-    const tracesByGroup = data.reduce((allTraces, nextTrace, index) => {
+    const tracesByGroup = filteredData.reduce((allTraces, nextTrace, index) => {
       const traceType = plotlyTraceToCustomTrace(nextTrace);
       if (!allTraces[traceType]) {
         allTraces[traceType] = [];
@@ -67,7 +81,7 @@ class TraceAccordion extends Component {
       );
     });
 
-    if (canGroup && data.length > 1 && groupedTraces.length > 0) {
+    if (canGroup && filteredData.length > 1 && groupedTraces.length > 0) {
       return (
         <TraceRequiredPanel noPadding>
           <Tabs>
@@ -102,9 +116,10 @@ TraceAccordion.contextTypes = {
 };
 
 TraceAccordion.propTypes = {
-  children: PropTypes.node,
   canAdd: PropTypes.bool,
   canGroup: PropTypes.bool,
+  children: PropTypes.node,
+  excludeFits: PropTypes.bool,
   messageIfEmptyFold: PropTypes.string,
 };
 

src/components/containers/PlotlyPanel.js

@@ -21,7 +21,7 @@ import {
 
 const GraphCreatePanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion canAdd>
+    <TraceAccordion canAdd excludeFits>
       <TextEditor label={_('Name')} attr="name" richTextOnly />
       <TraceSelector label={_('Type')} attr="type" show />
 

src/components/containers/TraceAccordion.js

@@ -32,7 +32,30 @@ export default function connectTraceToPlot(WrappedComponent) {
       let fullTrace = {};
       for (let i = 0; i < fullData.length; i++) {
         if (trace.uid === fullData[i]._fullInput._input.uid) {
+          /*
+           * Fit transforms are custom transforms in our custom plotly.js bundle,
+           * they are different from others as they create an extra trace in the
+           * data array. When plotly.js runs supplyTraceDefaults (before the
+           * transforms code executes) it stores the result in _fullInput,
+           * so that we have a reference to what the original, corrected input was.
+           * Then the transform code runs, our figure changes accordingly, but
+           * we're still able to use the original input as it's in _fullInput.
+           * This is the desired behaviour for our transforms usually,
+           * but it is not useful for fits, as the transform code adds some styles
+           * that are useful for the trace, so really for fits we'd like to read
+           * from _fullData, not _fullInput. Here we're setting _fullInput to
+           * _fullData as that is where the rest of our code expects to find its
+           * values.
+          */
+          if (
+            trace.transforms &&
+            trace.transforms.every(t => t.type === 'fit')
+          ) {
+            fullData[i]._fullInput = fullData[i];
+          }
+
           fullTrace = fullData[i]._fullInput;
+
           break;
         }
       }

src/default_panels/GraphCreatePanel.js

@@ -18,7 +18,7 @@
 .numeric-input__wrapper {
   line-height: 20px;
   max-width: 100%;
-  width: 100%;
+  flex: 1;
   display: flex;
   align-items: center;
   color: var(--color-text-base);