Allow custom trace type selection

Author: VeraZab

src/EditorControls.js

@@ -118,7 +118,13 @@ class EditorControls extends Component {
         if (this.props.beforeAddTrace) {
           this.props.beforeAddTrace(payload);
         }
-        graphDiv.data.push({type: 'scatter', mode: 'markers'});
+
+        graphDiv.data.push(
+          this.props.useAsDefaultTrace
+            ? this.props.useAsDefaultTrace
+            : {type: 'scatter', mode: 'markers'}
+        );
+
         if (this.props.afterAddTrace) {
           this.props.afterAddTrace(payload);
         }
@@ -298,6 +304,7 @@ EditorControls.propTypes = {
   plotly: PropTypes.object,
   showFieldTooltips: PropTypes.bool,
   traceTypesConfig: PropTypes.object,
+  useAsDefaultTrace: PropTypes.object,
 };
 
 EditorControls.defaultProps = {

src/PlotlyEditor.js

@@ -26,6 +26,7 @@ class PlotlyEditor extends Component {
             dictionaries={this.props.dictionaries}
             showFieldTooltips={this.props.showFieldTooltips}
             srcConverters={this.props.srcConverters}
+            useAsDefaultTrace={this.props.useAsDefaultTrace}
           >
             {this.props.children}
           </EditorControls>
@@ -75,6 +76,7 @@ PlotlyEditor.propTypes = {
     toSrc: PropTypes.func.isRequired,
     fromSrc: PropTypes.func.isRequired,
   }),
+  useAsDefaultTrace: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {

src/components/widgets/TraceTypeSelector.js

@@ -121,11 +121,53 @@ class TraceTypeSelector extends Component {
     });
   }
 
+  renderGrid() {
+    return <div className="trace-grid">{this.renderCategories()}</div>;
+  }
+
+  renderSingleBlock() {
+    const {fullValue} = this.props;
+    const {
+      traceTypesConfig: {traces, complex},
+      localize: _,
+    } = this.context;
+
+    const items = traces(_).map(item => (
+      <Item
+        key={item.value}
+        complex={complex}
+        active={fullValue === item.value}
+        item={item}
+        actions={actions}
+        showActions={false}
+        handleClick={() => this.selectAndClose(item.value)}
+        style={{display: 'inline-block'}}
+      />
+    ));
+
+    return (
+      <div
+        style={{
+          maxWidth: '460px',
+          display: 'flex',
+          flexFlow: 'wrap',
+          padding: '5px',
+        }}
+      >
+        {items}
+      </div>
+    );
+  }
+
   render() {
-    const {localize: _} = this.context;
+    const {
+      traceTypesConfig: {categories},
+      localize: _,
+    } = this.context;
+
     return (
       <Modal title={_('Select Trace Type')}>
-        <div className="trace-grid">{this.renderCategories()}</div>
+        {categories ? this.renderGrid() : this.renderSingleBlock()}
       </Modal>
     );
   }

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

@@ -175,6 +175,7 @@ $item-size: 90px;
     color: var(--color-text-base);
     text-transform: capitalize;
     font-size: var(--font-size-small);
+    text-align: center;
   }
 }