feat(cubejs-playground): add support for ungrouped and offset options (#8719)

Author: tenphi

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilder.tsx

@@ -40,17 +40,13 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
   function queryValidator(query: Query) {
     const queryCopy = JSON.parse(JSON.stringify(query));
 
-    if (typeof queryCopy.limit !== 'number' || queryCopy.limit < 1 || queryCopy.limit > 50_000) {
-      queryCopy.limit = 5_000;
+    // add the last stored timezone if the query is empty
+    if (JSON.stringify(queryCopy) === '{}' && storedTimezones[0]) {
+      queryCopy.timezone = storedTimezones[0];
     }
 
-    /**
-     * @TODO: Add support for offset
-     */
-    delete queryCopy.offset;
-
-    if (!queryCopy.timezone && storedTimezones[0]) {
-      queryCopy.timezone = storedTimezones[0];
+    if (typeof queryCopy.limit !== 'number' || queryCopy.limit < 1 || queryCopy.limit > 50_000) {
+      queryCopy.limit = 5_000;
     }
 
     return queryCopy;

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderChart.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Badge,
   Button,
   Dialog,
   DialogTrigger,
@@ -26,6 +25,7 @@ import { useQueryBuilderContext } from './context';
 import { PivotAxes, PivotOptions } from './Pivot';
 import { ArrowIcon } from './icons/ArrowIcon';
 import { AccordionCard } from './components/AccordionCard';
+import { OutdatedLabel } from './components/OutdatedLabel';
 import { QueryBuilderChartResults } from './QueryBuilderChartResults';
 
 const CHART_HEIGHT = 400;
@@ -40,26 +40,21 @@ const ALLOWED_CHART_TYPES = ['table', 'line', 'bar', 'area'];
 
 export function QueryBuilderChart(props: QueryBuilderChartProps) {
   const [isVizardLoaded, setIsVizardLoaded] = useState(false);
-  const [isExpanded, setIsExpanded] = useLocalStorage(
-    'QueryBuilder:Chart:expanded',
-    false
-  );
+  const [isExpanded, setIsExpanded] = useLocalStorage('QueryBuilder:Chart:expanded', false);
   const { maxHeight = CHART_HEIGHT, onToggle } = props;
   let {
     query,
     isLoading,
-    isQueryTouched,
-    executedQuery,
     chartType,
     setChartType,
     pivotConfig,
     updatePivotConfig,
     resultSet,
     apiToken,
     apiUrl,
+    isResultOutdated,
     VizardComponent,
   } = useQueryBuilderContext();
-  const isOutdated = executedQuery && isQueryTouched;
   const containerRef = useRef<HTMLDivElement>(null);
 
   if (!ALLOWED_CHART_TYPES.includes(chartType || '')) {
@@ -146,8 +141,8 @@ export function QueryBuilderChart(props: QueryBuilderChartProps) {
           isExpanded ? (
             <LoadingOutlined />
           ) : undefined
-        ) : isOutdated ? (
-          <Badge type="disabled">OUTDATED</Badge>
+        ) : isResultOutdated ? (
+          <OutdatedLabel />
         ) : undefined
       }
       extra={
@@ -226,9 +221,7 @@ export function QueryBuilderChart(props: QueryBuilderChartProps) {
       }}
     >
       <>
-        {isLoading ? (
-          <Skeleton height={400} layout="chart" padding="0 1x 1x 1x" />
-        ) : undefined}
+        {isLoading ? <Skeleton height={400} layout="chart" padding="0 1x 1x 1x" /> : undefined}
         {chart}
       </>
     </AccordionCard>