fix: pivot control

Author: vasilev-alex

packages/cubejs-api-gateway/index.js

@@ -458,6 +458,7 @@ class ApiGateway {
   }
 
   async getNormalizedQueries(query, context) {
+    query = this.parseQueryParam(query);
     let queryType = QUERY_TYPE.REGULAR_QUERY;
 
     if (!Array.isArray(query)) {

packages/cubejs-client-react/src/QueryBuilder.jsx

@@ -238,7 +238,8 @@ export default class QueryBuilder extends React.Component {
           sourceIndex,
           destinationIndex,
           sourceAxis,
-          destinationAxis
+          destinationAxis,
+          callback
         }) => {
           const nextPivotConfig = {
             ...pivotConfig,
@@ -257,6 +258,10 @@ export default class QueryBuilder extends React.Component {
           nextPivotConfig[sourceAxis].splice(sourceIndex, 1);
           nextPivotConfig[destinationAxis].splice(destinationIndex, 0, id);
 
+          if (callback) {
+            callback(nextPivotConfig);
+          }
+          
           this.updateVizState({
             pivotConfig: nextPivotConfig
           });
@@ -297,7 +302,7 @@ export default class QueryBuilder extends React.Component {
 
     let pivotQuery = {};
     let finalState = this.applyStateChangeHeuristics(state);
-    const { order: _, ...query } = finalState.query || {};
+    const { order: _, ...query } = finalState.query || stateQuery;
 
     if (QueryRenderer.isQueryPresent(query)) {
       try {
@@ -332,7 +337,6 @@ export default class QueryBuilder extends React.Component {
     const nextOrder = fromPairs(currentOrderMembers.map(({ id, order }) => (order !== 'none' ? [id, order] : false)).filter(Boolean));
 
     const nextQuery = {
-      ...stateQuery,
       ...query,
       order: nextOrder
     };

packages/cubejs-playground/src/QueryBuilder/TimeGroup.js

@@ -1,7 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { DatePicker, Menu } from 'antd';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React, { useState, Fragment } from 'react';
 import ButtonDropdown from './ButtonDropdown';
 import MemberDropdown from './MemberDropdown';
 import RemoveButtonGroup from './RemoveButtonGroup';
@@ -72,8 +72,8 @@ const TimeGroup = ({
 
   return (
     <>
-      {members.map((m) => (
-        <>
+      {members.map((m, index) => (
+        <Fragment key={index}>
           <RemoveButtonGroup onRemoveClick={() => updateMethods.remove(m)}>
             <MemberDropdown
               onClick={(updateWith) =>
@@ -128,7 +128,7 @@ const TimeGroup = ({
               m.dimension.granularities.find((g) => g.name === m.granularity)
                 .title}
           </ButtonDropdown>
-        </>
+        </Fragment>
       ))}
 
       {!members.length && (

packages/cubejs-playground/src/SchemaPage.js

@@ -225,7 +225,7 @@ class SchemaPage extends Component {
 
     return (
       <Layout style={{ height: '100%' }}>
-        <Sider width={300} className="schema-sidebar">
+        <Sider width={320} className="schema-sidebar">
           <Tabs
             activeKey={activeTab}
             onChange={(tab) => this.setState({ activeTab: tab })}

packages/cubejs-playground/src/components/Pivot/Axes.js

@@ -1,35 +1,43 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { DragDropContext } from 'react-beautiful-dnd';
 import { Row, Col, Divider } from 'antd';
 import DroppableArea from './DroppableArea';
 
 export default function Axes({ pivotConfig, onMove }) {
+  const [uiPivotConfig, setUIPivotConfig] = useState(pivotConfig);
+
+  useEffect(() => {
+    setUIPivotConfig(pivotConfig);
+  }, [pivotConfig]);
+
   return (
     <DragDropContext
-      onDragEnd={({ source, destination }) => {
+      onDragEnd={({ source, destination, ...props }) => {
         if (!destination) {
           return;
         }
-
         onMove({
           sourceIndex: source.index,
           destinationIndex: destination.index,
           sourceAxis: source.droppableId,
           destinationAxis: destination.droppableId,
+          callback(updatedPivotConfig) {
+            setUIPivotConfig(updatedPivotConfig);
+          },
         });
       }}
     >
       <Row>
         <Col span={11}>
-          <DroppableArea pivotConfig={pivotConfig} axis="x" />
+          <DroppableArea pivotConfig={uiPivotConfig} axis="x" />
         </Col>
 
         <Col span={2}>
           <Divider style={{ height: '100%' }} type="vertical" />
         </Col>
 
         <Col span={11}>
-          <DroppableArea pivotConfig={pivotConfig} axis="y" />
+          <DroppableArea pivotConfig={uiPivotConfig} axis="y" />
         </Col>
       </Row>
     </DragDropContext>

packages/cubejs-playground/src/index.css

@@ -4,6 +4,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #f8f8fb;
+  overflow-x: hidden;
 }
 
 code {