Merge pull request #705 from plotly/split-trace-fix

Split trace fix

Author: VeraZab

src/components/widgets/SymbolSelector.js

@@ -81,7 +81,10 @@ export default class SymbolSelector extends Component {
         <div
           className="symbol-selector__item"
           key={value}
-          onClick={() => this.props.onChange(value)}
+          onClick={() => {
+            this.props.onChange(value);
+            this.togglePanel();
+          }}
         >
           <svg
             width="28"

src/lib/connectTraceToPlot.js

@@ -125,6 +125,9 @@ export default function connectTraceToPlot(WrappedComponent) {
             )
           : null;
 
+        const containsAnSrc =
+          Object.keys(update).filter(a => a.endsWith('src')).length > 0;
+
         if (Array.isArray(update)) {
           update.forEach((u, i) => {
             this.context.onUpdate({
@@ -136,7 +139,7 @@ export default function connectTraceToPlot(WrappedComponent) {
               },
             });
           });
-        } else if (splitTraceGroup) {
+        } else if (splitTraceGroup && !containsAnSrc) {
           this.props.traceIndexes.forEach((t, i) => {
             this.context.onUpdate({
               type: EDITOR_ACTIONS.UPDATE_TRACES,

src/styles/components/containers/_modalbox.scss

@@ -30,3 +30,9 @@
     position: relative;
   }
 }
+
+.field .modalbox {
+  width: 100%;
+  left: -1px;
+  top: 100%;
+}

src/styles/components/widgets/_trace-type-selector.scss

@@ -171,6 +171,7 @@ $item-size: 90px;
   &__label {
     font-weight: var(--font-weight-semibold);
     width: $item-size * 0.8;
+    height: 34px;
     margin-top: var(--spacing-half-unit);
     color: var(--color-text-base);
     text-transform: capitalize;