fix(cubejs-playground): update query builder * 4

Author: tenphi

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

@@ -57,8 +57,8 @@ export function QueryBuilderChartResults({
         <ChartContainer
           ref={containerRef}
           style={{
-            maxHeight: `${MAX_HEIGHT}px`,
-            height: `${MAX_HEIGHT}px`,
+            maxHeight: MAX_HEIGHT,
+            height: MAX_HEIGHT,
             overflow,
           }}
         >

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

@@ -73,6 +73,7 @@ export function QueryBuilderSidePanel({
     setQuery,
     usedCubes,
     usedMembers,
+    queryStats,
     members,
     missingCubes,
     apiVersion,
@@ -109,19 +110,13 @@ export function QueryBuilderSidePanel({
       ? cubesOrViews.filter((cube) => usedCubes[0] === cube.name)
       : cubesOrViews.filter((cube) => joinableCubes.includes(cube));
 
-  const [openCubes, setOpenCubes] = useState<Set<string>>(
-    isQueryEmpty
-      ? cubesOrViews.length
-        ? new Set([cubesOrViews[0].name])
-        : new Set()
-      : new Set(usedCubes)
-  );
+  const [openCubes, setOpenCubes] = useState<Set<string>>(new Set());
 
   useLayoutEffect(() => {
     if (isQueryEmpty) {
       setOpenCubes(cubesOrViews.length === 1 ? new Set([cubesOrViews[0].name]) : new Set());
     }
-  }, [meta, cubesOrViews.length, selectedType]);
+  }, [cubesOrViews.length, selectedType]);
 
   const highlightedCubes = appliedFilterString ? usedCubes : [];
 
@@ -341,21 +336,29 @@ export function QueryBuilderSidePanel({
             />
           ))}
         {cubesOrViews
-          .filter((cube) => (appliedFilterString ? filteredCubes.includes(cube.name) : true))
-          .map((item) => (
+          .filter((cube) =>
+            appliedFilterString
+              ? // If filter is applied, show only filtered cubes
+                filteredCubes.includes(cube.name)
+              : viewMode === 'query'
+                ? // In query mode, show only used cubes
+                  usedCubes.includes(cube.name)
+                : true
+          )
+          .map((cube) => (
             <SidePanelCubeItem
-              key={item.name}
-              isNonJoinable={!allJoinableCubes.includes(item) && !usedCubes.includes(item.name)}
-              isOpen={openCubes.has(item.name)}
+              key={cube.name}
+              isNonJoinable={!allJoinableCubes.includes(cube) && !usedCubes.includes(cube.name)}
+              isOpen={openCubes.has(cube.name)}
               filterString={appliedFilterString}
-              cubeName={item.name}
+              cubeName={cube.name}
               mode={viewMode}
               rightIcon={isQueryEmpty ? 'arrow' : 'plus'}
               onToggle={(isOpen) => {
-                onCubeToggle(item.name, isOpen);
+                onCubeToggle(cube.name, isOpen);
               }}
               onMemberToggle={(name) => {
-                onMemberToggle(item.name, name);
+                onMemberToggle(cube.name, name);
               }}
               onHierarchyToggle={onHierarchyToggle}
             />
@@ -364,15 +367,11 @@ export function QueryBuilderSidePanel({
     );
   }, [
     viewMode,
-    meta,
+    queryStats,
     [...openCubes.values()].join(),
     appliedFilterString,
-    usedCubes.join(),
-    cubesOrViews.length,
     memberViewType,
     selectedType,
-    isQueryEmpty,
-    missingCubes.join(),
   ]);
 
   const onApplyQuery = useCallback(async (query) => {

packages/cubejs-playground/src/QueryBuilderV2/icons/ChevronIcon.tsx

@@ -1,5 +1,12 @@
-import { CubeIconProps, UpIcon } from '@cube-dev/ui-kit';
-import { memo, useEffect, useRef, useState } from 'react';
+import { CubeIconProps, tasty, UpIcon } from '@cube-dev/ui-kit';
+import { memo, useEffect, useState } from 'react';
+
+const StyledUpIcon = tasty(UpIcon, {
+  styles: {
+    transformOrigin: 'center',
+    transition: 'rotate linear 120ms, scale linear 120ms',
+  },
+});
 
 export type ChevronIconProps = {
   /**
@@ -12,59 +19,52 @@ export type ChevronIconProps = {
 type Direction = 'left' | 'right' | 'top' | 'bottom';
 
 const rotationByDirection: Record<Direction, number> = {
-  bottom: -180,
-  left: -90,
   top: 0,
   right: 90,
+  bottom: 180,
+  left: 270,
 };
 
-const rotationByFlippedDirection: Record<Direction, number> = {
-  bottom: 0,
-  left: 90,
-  top: -180,
-  right: -90,
-};
+function flipRotation(rotation: number) {
+  return (rotation + 180) % 360;
+}
 
 export const ChevronIcon = memo(function ChevronIcon(props: ChevronIconProps) {
   const { direction = 'bottom', color, ...iconProps } = props;
   const [rotate, setRotate] = useState(rotationByDirection[direction]);
   const [flipScale, setFlipScale] = useState(1); // Tracks flipping: 1 (normal) or -1 (flipped)
 
   useEffect(() => {
-    let nextRotate =
-      flipScale === 1 ? rotationByDirection[direction] : rotationByFlippedDirection[direction];
+    let nextRotate = rotationByDirection[direction];
+
+    if (flipScale === -1) {
+      nextRotate = flipRotation(nextRotate);
+    }
 
     // Check if the change is to the opposite direction
-    const isOpposite = Math.abs(rotate - nextRotate) === 180;
+    const isOpposite = Math.abs((rotate - nextRotate) % 360) === 180;
 
     if (isOpposite) {
       // Toggle the flip state
       setFlipScale((prev) => -prev); // Alternates between 1 and -1
     } else {
-      if (flipScale === -1) {
-        nextRotate = rotationByFlippedDirection[direction];
-      }
-
-      // Calculate the shortest rotation path
-      let adjustedNextRotate = nextRotate;
-      while (rotate - adjustedNextRotate > 180) {
-        adjustedNextRotate += 360;
+      while (rotate - nextRotate > 180) {
+        nextRotate += 360;
       }
-      while (rotate - adjustedNextRotate < -180) {
-        adjustedNextRotate -= 360;
+      while (rotate - nextRotate < -180) {
+        nextRotate -= 360;
       }
 
-      setRotate(adjustedNextRotate);
+      setRotate(nextRotate);
     }
   }, [direction]);
 
   return (
-    <UpIcon
+    <StyledUpIcon
       {...iconProps}
       style={{
-        transformOrigin: 'center',
-        transform: `rotate(${rotate}deg) scaleY(${flipScale})`,
-        transition: 'transform linear 120ms',
+        rotate: `${rotate}deg`,
+        scale: `1 ${flipScale}`,
       }}
     />
   );

packages/cubejs-playground/src/components/QueryTabs/QueryTabs.tsx

@@ -17,18 +17,44 @@ import { useChartRendererStateMethods } from './ChartRendererStateProvider';
 
 const { TabPane } = Tabs;
 
-const StyledTabs = styled(Tabs)`
+export const StyledTabs = styled(Tabs)`
+  margin-top: 0;
+  display: grid;
+  max-width: 100%;
+  grid-template-rows: min-content 1fr;
+  overflow: hidden;
+
   & .ant-tabs-nav {
-    background: #fff;
-    padding: 12px 16px 0;
+    padding: 0;
     margin: 0;
+    overflow: hidden;
+    background-color: white;
+  }
+
+  & .ant-tabs-nav-wrap {
+    padding: 8px 8px 0;
   }
 
   & .ant-tabs-extra-content {
-    margin-left: 32px;
+    padding: 8px;
+    place-self: start;
+  }
+
+  & .ant-tabs-tab {
+    margin: 0 24px 0 0;
+  }
+
+  & .ant-tabs-content-holder {
+    position: relative;
+    display: flex;
+  }
+
+  & .ant-tabs-tab {
+    border-radius: var(--radius) var(--radius) 0 0 !important;
   }
 `;
 
+
 type QueryTab = {
   id: string;
   query: Query;
@@ -246,7 +272,7 @@ export function QueryTabs({
       }),
     });
   }
-  
+
   function setTabName(tabId: string, name: string) {
     saveTabs({
       ...queryTabs,
@@ -327,7 +353,7 @@ export function QueryTabs({
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     setEditableTabId(undefined);
-                    
+
                     if (editableTabValue.trim()) {
                       setTabName(tab.id, editableTabValue.trim());
                       setEditableTabValue('');