diff --git a/web/ui/react-app/src/pages/graph/Panel.test.tsx b/web/ui/react-app/src/pages/graph/Panel.test.tsx
index 2b07f7edcc..3fc2072728 100644
--- a/web/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -65,9 +65,13 @@ describe('Panel', () => {
const className = tc.active ? 'active' : '';
expect(link.prop('className')).toEqual(className);
link.simulate('click');
- expect(results).toHaveLength(1);
- expect(results[0].type).toEqual(tc.panelType.toLowerCase());
- results.pop();
+ if (tc.active) {
+ expect(results).toHaveLength(0);
+ } else {
+ expect(results).toHaveLength(1);
+ expect(results[0].type).toEqual(tc.panelType.toLowerCase());
+ results.pop();
+ }
});
});
@@ -120,6 +124,23 @@ describe('Panel', () => {
});
});
+ describe('when clicking on current mode', () => {
+ [PanelType.Table, PanelType.Graph].forEach((mode: PanelType) => {
+ it(`${mode} keeps data`, () => {
+ const props = {
+ ...defaultProps,
+ options: { ...defaultProps.options, type: mode },
+ };
+ const panel = shallow();
+ const instance: any = panel.instance();
+ panel.setState({ data: 'somedata' });
+ expect(panel.state('data')).toEqual('somedata');
+ instance.handleChangeType(mode);
+ expect(panel.state('data')).toEqual('somedata');
+ });
+ });
+ });
+
describe('when changing query then time', () => {
it('executes the new query', () => {
const initialExpr = 'time()';
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 5bd38cf34e..ae153fdcb8 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -210,6 +210,10 @@ class Panel extends Component {
};
handleChangeType = (type: PanelType) => {
+ if (this.props.options.type === type) {
+ return;
+ }
+
this.setState({ data: null });
this.setOptions({ type: type });
};