Skip to content
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.

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

feat(cubejs-playground): update query builder #9118

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 3 additions & 2 deletions packages/cubejs-playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"@apollo/client": "^3.11.4",
"@graphiql/toolkit": "^0.4.3",
"anser": "^2.1.1",
"best-effort-json-parser": "^1.1.2",
"camel-case": "^4.1.2",
"codesandbox-import-utils": "^2.1.1",
"cron-validator": "^1.2.1",
Expand Down Expand Up @@ -66,7 +67,7 @@
"devDependencies": {
"@ant-design/compatible": "^1.0.1",
"@ant-design/icons": "^5.3.5",
"@cube-dev/ui-kit": "0.38.0",
"@cube-dev/ui-kit": "0.52.3",
"@cubejs-client/core": "1.1.12",
"@cubejs-client/react": "1.1.12",
"@types/flexsearch": "^0.7.3",
Expand Down Expand Up @@ -97,7 +98,7 @@
},
"peerDependencies": {
"@ant-design/icons": ">=4.7.0",
"@cube-dev/ui-kit": ">=0.37.2",
"@cube-dev/ui-kit": ">=0.52.3",
"@cubejs-client/core": ">=0.30.0",
"@cubejs-client/react": ">=0.30.0",
"antd": ">=4.16.13",
Expand Down
37 changes: 26 additions & 11 deletions packages/cubejs-playground/src/QueryBuilderV2/QueryBuilder.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
import { useEffect, useMemo } from 'react';
import cube, { Query } from '@cubejs-client/core';
import { Alert, Block, Card, PrismCode, Title } from '@cube-dev/ui-kit';
import cube, { Query } from '@cubejs-client/core';
import { useEffect, useMemo } from 'react';

import { useLocalStorage } from './hooks';
import { QueryBuilderProps } from './types';
import { QueryBuilderContext } from './context';
import { useLocalStorage } from './hooks';
import { useQueryBuilder } from './hooks/query-builder';
import { QueryBuilderInternals } from './QueryBuilderInternals';
import { QueryBuilderProps } from './types';
import { useCommitPress } from './utils/use-commit-press';

export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl: string | null }) {
export function QueryBuilder(
props: Omit<QueryBuilderProps, 'apiUrl'> & {
displayPrivateItems?: boolean;
apiUrl: string | null;
disableLimitEnforcing?: boolean;
children?: React.ReactNode;
}
) {
const {
apiUrl,
apiToken,
Expand All @@ -22,9 +29,12 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
tracking,
isApiBlocked,
apiVersion,
memberViewType,
VizardComponent,
RequestStatusComponent,
openSqlRunner,
displayPrivateItems,
disableSidebarResizing,
} = props;

const cubeApi = useMemo(() => {
Expand All @@ -45,10 +55,6 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
queryCopy.timezone = storedTimezones[0];
}

if (typeof queryCopy.limit !== 'number' || queryCopy.limit < 1 || queryCopy.limit > 50_000) {
queryCopy.limit = 5_000;
}

return queryCopy;
}

Expand All @@ -72,8 +78,10 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
defaultPivotConfig,
schemaVersion,
onQueryChange,
memberViewType,
tracking,
queryValidator,
displayPrivateItems,
});

useEffect(() => {
Expand All @@ -86,7 +94,11 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
return runQuery();
}, true);

return apiToken && cubeApi && apiUrl ? (
if (!apiToken || !cubeApi || !apiUrl) {
return null;
}

return (
<QueryBuilderContext.Provider
value={{
runQuery,
Expand All @@ -108,6 +120,7 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
VizardComponent,
RequestStatusComponent,
openSqlRunner,
disableSidebarResizing,
...otherProps,
}}
>
Expand All @@ -122,9 +135,11 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
</Alert>
)}
</Block>
) : props.children ? (
props.children
) : (
<QueryBuilderInternals />
)}
</QueryBuilderContext.Provider>
) : null;
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { ChartType } from '@cubejs-client/core';
import { useLocalStorage } from './hooks';
import { useQueryBuilderContext } from './context';
import { PivotAxes, PivotOptions } from './Pivot';
import { ArrowIcon } from './icons/ArrowIcon';
import { ChevronIcon } from './icons/ChevronIcon';
import { AccordionCard } from './components/AccordionCard';
import { OutdatedLabel } from './components/OutdatedLabel';
import { QueryBuilderChartResults } from './QueryBuilderChartResults';
Expand Down Expand Up @@ -117,7 +117,7 @@ export function QueryBuilderChart(props: QueryBuilderChartProps) {
const pivotConfigurator = useMemo(() => {
return pivotConfig ? (
<DialogTrigger type="popover">
<Button size="small" rightIcon={<ArrowIcon direction="bottom" />}>
<Button size="small" rightIcon={<ChevronIcon direction="bottom" />}>
Pivot
</Button>
<Dialog border overflow="hidden" width="40x max-content 80x">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface QueryBuilderChartResultsProps {
containerRef?: RefObject<HTMLDivElement>;
}

const MAX_HEIGHT = 400;
const MAX_HEIGHT = 350;
const MAX_SERIES_LIMIT = 25;

const ChartContainer = tasty({
Expand Down Expand Up @@ -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,
}}
>
Expand All @@ -76,9 +76,9 @@ export function QueryBuilderChartResults({
return (
<Grid height={MAX_HEIGHT} columns="auto" placeContent="center" placeItems="center" gap="2x">
<Title level={3} gridArea={false}>
No data available
No results available
</Title>
<Paragraph>Query metrics and dimensions with results to see the chart.</Paragraph>
<Paragraph>Compose and run a query to see the results.</Paragraph>
</Grid>
);
}
Expand Down
Loading
Loading