Skip to content

Grouped Trace tabs #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 8, 2018
Merged

Grouped Trace tabs #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7911d0d
stubbing in tabs
nicolaskruchten Feb 6, 2018
6cb36ff
style tabs
aulneau Feb 6, 2018
9daa2a1
prevent tabs from scaling, added overflow to tab panel
aulneau Feb 6, 2018
a8a0eae
nested panels
nicolaskruchten Feb 7, 2018
9b528c7
minor css updates to help with panel tabs situation
aulneau Feb 7, 2018
9c3e5b9
update panel css, fix jump, remove panel css in _fold.scss
aulneau Feb 7, 2018
320aa6a
Group traces tab
nicolaskruchten Feb 8, 2018
1b212c1
CSS refactor
nicolaskruchten Feb 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"react-colorscales": "^0.4.2",
"react-dom": "^16.2.0",
"react-select": "^1.0.0-rc.10",
"react-tabs": "^2.2.1",
"tinycolor2": "^1.4.1"
},
"devDependencies": {
Expand Down
5 changes: 4 additions & 1 deletion src/components/containers/Panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,9 @@ class Panel extends Component {
);

return (
<div className={bem('panel')}>
<div
className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}
>
<PanelHeader
addAction={this.props.addAction}
allowCollapse={
Expand All @@ -125,6 +127,7 @@ Panel.propTypes = {
children: PropTypes.node,
addAction: PropTypes.object,
showExpandCollapse: PropTypes.bool,
noPadding: PropTypes.bool,
};

Panel.defaultProps = {
Expand Down
73 changes: 66 additions & 7 deletions src/components/containers/TraceAccordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,29 @@ import Panel from './Panel';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {EDITOR_ACTIONS} from 'lib/constants';
import {connectTraceToPlot, localize} from 'lib';
import {connectTraceToPlot, localize, plotlyTraceToCustomTrace} from 'lib';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';

const TraceFold = connectTraceToPlot(Fold);

class TraceAccordion extends Component {
render() {
const {data = []} = this.context;
const {canAdd, children, messageIfEmptyFold, localize: _} = this.props;
const {data = [], fullData = []} = this.context;
const {
canAdd,
canGroup,
children,
messageIfEmptyFold,
localize: _,
} = this.props;

const content =
const individualTraces =
data.length &&
data.map((d, i) => {
return (
<TraceFold
key={i}
traceIndex={i}
traceIndexes={[i]}
canDelete={canAdd}
messageIfEmpty={messageIfEmptyFold}
>
Expand All @@ -39,20 +46,72 @@ class TraceAccordion extends Component {
}
},
};
return <Panel addAction={addAction}>{content ? content : null}</Panel>;
return (
<Panel addAction={addAction}>
{individualTraces ? individualTraces : null}
</Panel>
);
}
return <TraceRequiredPanel>{content ? content : null}</TraceRequiredPanel>;
if (canGroup && data.length > 1) {
const tracesByGroup = data.reduce((allTraces, next, index) => {
const traceType = plotlyTraceToCustomTrace(
fullData.filter(trace => trace.index === index)[0]
);
if (!allTraces[traceType]) {
allTraces[traceType] = [];
}
allTraces[traceType].push(index);
return allTraces;
}, {});

const groupedTraces = Object.keys(tracesByGroup).map(
(traceType, index) => {
return (
<TraceFold
key={index}
traceIndexes={tracesByGroup[traceType]}
name={traceType}
>
{this.props.children}
</TraceFold>
);
}
);
return (
<TraceRequiredPanel noPadding>
<Tabs>
<TabList>
<Tab>{_('All Traces')}</Tab>
<Tab>{_('Individual')}</Tab>
</TabList>
<TabPanel>
<Panel>{groupedTraces ? groupedTraces : null}</Panel>
</TabPanel>
<TabPanel>
<Panel>{individualTraces ? individualTraces : null}</Panel>
</TabPanel>
</Tabs>
</TraceRequiredPanel>
);
}
return (
<TraceRequiredPanel>
{individualTraces ? individualTraces : null}
</TraceRequiredPanel>
);
}
}

TraceAccordion.contextTypes = {
fullData: PropTypes.array,
data: PropTypes.array,
};

TraceAccordion.propTypes = {
localize: PropTypes.func,
children: PropTypes.node,
canAdd: PropTypes.bool,
canGroup: PropTypes.bool,
messageIfEmptyFold: PropTypes.string,
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/containers/__tests__/Fold-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe('<Fold>', () => {
const withoutDelete = mount(
<TestEditor {...fixtures.scatter()}>
<Panel>
<Fold foldIndex={0}>
<Fold>
<Numeric attr="opacity" />
</Fold>
</Panel>
Expand All @@ -22,7 +22,7 @@ describe('<Fold>', () => {
const withDelete = mount(
<TestEditor {...fixtures.scatter()}>
<Panel>
<TraceFold traceIndex={0} canDelete={true} foldIndex={0}>
<TraceFold traceIndexes={[0]} canDelete={true}>
<Numeric attr="opacity" />
</TraceFold>
</Panel>
Expand All @@ -36,7 +36,7 @@ describe('<Fold>', () => {
mount(
<TestEditor {...fixtures.scatter()} beforeDeleteTrace={beforeDeleteTrace}>
<Panel>
<TraceFold traceIndex={0} canDelete={true} foldIndex={0}>
<TraceFold traceIndexes={[0]} canDelete={true}>
<Numeric attr="opacity" />
</TraceFold>
</Panel>
Expand Down
4 changes: 2 additions & 2 deletions src/components/containers/__tests__/Layout-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Layouts.forEach(Layout => {
const wrapper = mount(
<Editor {...fixtures.scatter({layout: {width: 100}})}>
<Panel>
<Layout foldIndex={0}>
<Layout>
<Numeric label="Width" min={100} step={10} attr="width" />
</Layout>
</Panel>
Expand All @@ -35,7 +35,7 @@ Layouts.forEach(Layout => {
{...fixtures.scatter({layout: {width: 100}})}
>
<Panel>
<Layout foldIndex={0}>
<Layout>
<Numeric label="Width" min={100} step={10} attr="width" />
</Layout>
</Panel>
Expand Down
24 changes: 12 additions & 12 deletions src/components/containers/__tests__/Section-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('Section', () => {
// mode is visible with scatter. Hole is not visible. Section should show.
const wrapper = mount(
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection traceIndex={0} name="test-section">
<TraceSection traceIndexes={[0]} name="test-section">
<Flaglist
attr="mode"
options={[
Expand Down Expand Up @@ -64,9 +64,9 @@ describe('Section', () => {
// pull and hole are not scatter attrs. Section should not show.
const wrapper = mount(
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection traceIndex={0} name="test-section">
<Numeric attr="pull" min={0} max={1} step={0.1} traceIndex={0} />
<Numeric attr="hole" min={0} max={1} step={0.1} traceIndex={0} />
<TraceSection traceIndexes={[0]} name="test-section">
<Numeric attr="pull" min={0} max={1} step={0.1} traceIndexes={[0]} />
<Numeric attr="hole" min={0} max={1} step={0.1} traceIndexes={[0]} />
</TraceSection>
</TestEditor>
)
Expand All @@ -85,8 +85,8 @@ describe('Section', () => {
const TraceSection = connectTraceToPlot(Section);
const wrapper = mount(
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection name="test-section" traceIndex={0}>
<Numeric attr="opacity" traceIndex={0} />
<TraceSection name="test-section" traceIndexes={[0]}>
<Numeric attr="opacity" traceIndexes={[0]} />
<MenuPanel show>
<Info>INFO</Info>
</MenuPanel>
Expand All @@ -106,8 +106,8 @@ describe('Section', () => {
const TraceSection = connectTraceToPlot(Section);
const wrapper = mount(
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection name="test-section" traceIndex={0}>
<Numeric attr="badattr" traceIndex={0} />
<TraceSection name="test-section" traceIndexes={[0]}>
<Numeric attr="badattr" traceIndexes={[0]} />
<MenuPanel show>
<Info>INFO</Info>
</MenuPanel>
Expand All @@ -123,8 +123,8 @@ describe('Section', () => {
const TraceSection = connectTraceToPlot(Section);
const wrapper = mount(
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection name="test-section" traceIndex={0}>
<Numeric attr="badattr" traceIndex={0} />
<TraceSection name="test-section" traceIndexes={[0]}>
<Numeric attr="badattr" traceIndexes={[0]} />
<Info>INFO</Info>
</TraceSection>
</TestEditor>
Expand All @@ -141,7 +141,7 @@ describe('TraceTypeSection', () => {
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection
name="test-section"
traceIndex={0}
traceIndexes={[0]}
traceTypes={['scatter']}
>
<Flaglist
Expand All @@ -164,7 +164,7 @@ describe('TraceTypeSection', () => {
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
<TraceSection
name="test-section"
traceIndex={0}
traceIndexes={[0]}
traceTypes={['heatmap']}
>
<Flaglist
Expand Down
5 changes: 4 additions & 1 deletion src/components/fields/TraceSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,14 @@ class TraceSelector extends Component {
} else {
this.traceOptions = [{label: _('Scatter'), value: 'scatter'}];
}
this.fullValue = plotlyTraceToCustomTrace(props.container);
if (props.container) {
this.fullValue = plotlyTraceToCustomTrace(props.container);
}
}

setTraceDefaults(container, fullContainer, updateContainer) {
if (
container &&
container.uid &&
!container.mode &&
fullContainer._fullInput.type === 'scatter'
Expand Down
4 changes: 2 additions & 2 deletions src/components/fields/__tests__/CanvasSize-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('CanvasSize', () => {
const wrapper = mount(
<TestEditor {...{...fixtureProps}}>
<LayoutPanel name="Layout">
<Fold name="Canvas" foldIndex={0}>
<Fold name="Canvas">
<CanvasSize attr="width" />
</Fold>
</LayoutPanel>
Expand All @@ -28,7 +28,7 @@ describe('CanvasSize', () => {
const wrapper = mount(
<TestEditor {...{...fixtureProps}}>
<LayoutPanel name="Layout">
<Fold name="Canvas" foldIndex={0}>
<Fold name="Canvas">
<CanvasSize attr="width" />
</Fold>
</LayoutPanel>
Expand Down
3 changes: 1 addition & 2 deletions src/components/fields/__tests__/DataSelector-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function render(overrides = {}, children) {
{children}
</TestEditor>
)
.find(`[traceIndex=1]`)
.find(`[attr="${attr}"]`)
.last();
}
Expand Down Expand Up @@ -64,7 +63,7 @@ describe('DataSelector', () => {
const wrapper = render(
{},
<TraceDataSelector
traceIndex={1}
traceIndexes={[0]}
label={{pie: 'hodor', '*': 'rodoh'}}
attr="x"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/fields/__tests__/Radio-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('<Radio>', () => {
it('enables <Field> centering by default', () => {
const wrapper = mount(
<TestEditor plotly={plotly} {...fixtures.area()}>
<Trace traceIndex={0}>
<Trace traceIndexes={[0]}>
<Radio
label="Connect Gaps"
attr="connectgaps"
Expand All @@ -31,7 +31,7 @@ describe('<Radio>', () => {
it('permits <Field> centering to be disabled', () => {
const wrapper = mount(
<TestEditor plotly={plotly} {...fixtures.area()}>
<Trace traceIndex={0}>
<Trace traceIndexes={[0]}>
<Radio
center={false}
label="Connect Gaps"
Expand Down
16 changes: 8 additions & 8 deletions src/components/fields/__tests__/TraceSelector-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -37,7 +37,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -59,7 +59,7 @@ describe('TraceSelector', () => {

const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -77,7 +77,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -95,7 +95,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -113,7 +113,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps} plotly={plotly}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -133,7 +133,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand All @@ -159,7 +159,7 @@ describe('TraceSelector', () => {
};
const wrapper = mount(
<TestEditor {...editorProps}>
<TraceSection traceIndex={0}>
<TraceSection traceIndexes={[0]}>
<TraceSelector attr="type" />
</TraceSection>
</TestEditor>
Expand Down
Loading