diff --git a/src/components/fields/TraceSelector.js b/src/components/fields/TraceSelector.js
index 48c02e958..00270429c 100644
--- a/src/components/fields/TraceSelector.js
+++ b/src/components/fields/TraceSelector.js
@@ -118,6 +118,7 @@ class TraceSelector extends Component {
handleClick={() =>
this.context.openModal(TraceTypeSelector, {
...props,
+ traceTypesConfig: this.context.traceTypesConfig,
glByDefault: this.context.glByDefault,
})
}
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index 7a5883065..d249d19b2 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -138,12 +138,10 @@ class TraceTypeSelector extends Component {
renderCategories() {
const {fullValue} = this.props;
+ const {mapBoxAccess, localize: _, chartHelp} = this.context;
const {
traceTypesConfig: {traces, categories, complex},
- mapBoxAccess,
- localize: _,
- chartHelp,
- } = this.context;
+ } = this.props;
return categories(_).map((category, i) => {
let items = traces(_)
@@ -156,14 +154,11 @@ class TraceTypeSelector extends Component {
const MAX_ITEMS = 4;
- let columnClasses = 'trace-grid__column';
-
- if (
+ const columnClasses =
(items.length > MAX_ITEMS && !category.maxColumns) ||
(category.maxColumns && category.maxColumns > 1)
- ) {
- columnClasses += ' trace-grid__column--double';
- }
+ ? 'trace-grid__column trace-grid__column--double'
+ : 'trace-grid__column';
return (
@@ -192,43 +187,34 @@ class TraceTypeSelector extends Component {
renderSingleBlock() {
const {fullValue} = this.props;
+ const {localize: _} = this.context;
const {
traceTypesConfig: {traces, complex},
- localize: _,
- } = this.context;
-
- const items = traces(_).map(item => (
-
- this.selectAndClose(item.value)}
- style={{display: 'inline-block'}}
- />
- ));
+ } = this.props;
return (
-
- {items}
+
+ {traces(_).map(item => (
+ - this.selectAndClose(item.value)}
+ style={{display: 'inline-block'}}
+ />
+ ))}
);
}
render() {
+ const {localize: _} = this.context;
const {
traceTypesConfig: {categories},
- localize: _,
- } = this.context;
+ } = this.props;
return (
@@ -243,9 +229,9 @@ TraceTypeSelector.propTypes = {
fullValue: PropTypes.string,
fullContainer: PropTypes.object,
glByDefault: PropTypes.bool,
+ traceTypesConfig: PropTypes.object,
};
TraceTypeSelector.contextTypes = {
- traceTypesConfig: PropTypes.object,
handleClose: PropTypes.func,
localize: PropTypes.func,
mapBoxAccess: PropTypes.bool,
diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss
index ab2de3427..6a77f6288 100644
--- a/src/styles/components/widgets/_trace-type-selector.scss
+++ b/src/styles/components/widgets/_trace-type-selector.scss
@@ -4,6 +4,13 @@ $label-height: 34px;
$row-height: $image-size + $label-height + $default-half-spacing-unit +
$default-quarter-spacing-unit;
+.trace-grid-single-block {
+ max-width: 460px;
+ display: flex;
+ flex-flow: wrap;
+ padding: var(--spacing-quarter-unit);
+}
+
.trace-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);