Skip to content

Commit

Permalink
fix(bi): fixed some of the query duplications (#19573)
Browse files Browse the repository at this point in the history 
Fixed some of the query duplications
  • Loading branch information
@Gilbert09
Gilbert09 authored Jan 3, 2024
1 parent 24b1cb6 commit 1b4733d
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 49 deletions.
4 changes: 1 addition & 3 deletions frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import { LemonButton, LemonLabel, LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'

import { dataNodeLogic } from '../../DataNode/dataNodeLogic'
import { dataVisualizationLogic } from '../dataVisualizationLogic'

export const SeriesTab = (): JSX.Element => {
const { columns, xData, yData } = useValues(dataVisualizationLogic)
const { responseLoading } = useValues(dataNodeLogic)
const { columns, xData, yData, responseLoading } = useValues(dataVisualizationLogic)
const { updateXSeries, updateYSeries, addYSeries, deleteYSeries } = useActions(dataVisualizationLogic)

const options = columns.map(({ name, label }) => ({
Expand Down
95 changes: 50 additions & 45 deletions frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,27 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
setQuery: props.setQuery,
cachedResults: props.cachedResults,
}
const builtDataVisualizationLogic = dataVisualizationLogic(dataVisualizationLogicProps)

const dataNodeLogicProps: DataNodeLogicProps = {
query: props.query.source,
key,
cachedResults: props.cachedResults,
}

return (
<BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
<BindLogic logic={dataVisualizationLogic} props={dataVisualizationLogicProps}>
<BindLogic logic={displayLogic} props={{ key: dataVisualizationLogicProps.key }}>
<InternalDataTableVisualization {...props} uniqueKey={key} />
</BindLogic>
</BindLogic>
</BindLogic>
)
}

function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX.Element {
const { query, visualizationType, showEditingUI, showResultControls, sourceFeatures, response, responseLoading } =
useValues(builtDataVisualizationLogic)
useValues(dataVisualizationLogic)

const setQuerySource = useCallback(
(source: HogQLQuery) => props.setQuery?.({ ...props.query, source }),
Expand All @@ -72,7 +83,7 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
} else if (visualizationType === ChartDisplayType.ActionsTable) {
component = (
<DataTable
uniqueKey={key}
uniqueKey={props.uniqueKey}
query={{ kind: NodeKind.DataTableNode, source: query.source }}
cachedResults={props.cachedResults}
context={{
Expand All @@ -89,48 +100,42 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
}

return (
<BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
<BindLogic logic={dataVisualizationLogic} props={dataVisualizationLogicProps}>
<BindLogic logic={displayLogic} props={{ key: dataVisualizationLogicProps.key }}>
<div className="DataVisualization flex flex-1">
<div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
{showEditingUI && (
<>
<HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />
{sourceFeatures.has(QueryFeature.dateRangePicker) && (
<div className="flex gap-4 items-center flex-wrap">
<DateRange
key="date-range"
query={query.source}
setQuery={(query) => {
if (query.kind === NodeKind.HogQLQuery) {
setQuerySource(query)
}
}}
/>
</div>
)}
</>
)}
{showResultControls && (
<>
<LemonDivider className="my-0" />
<div className="flex gap-4 justify-between flex-wrap">
<div className="flex gap-4 items-center">
<Reload />
<ElapsedTime />
</div>
<div className="flex gap-4 items-center">
<TableDisplay />
</div>
</div>
</>
)}
{component}
<div className="DataVisualization flex flex-1">
<div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
{showEditingUI && (
<>
<HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />
{sourceFeatures.has(QueryFeature.dateRangePicker) && (
<div className="flex gap-4 items-center flex-wrap">
<DateRange
key="date-range"
query={query.source}
setQuery={(query) => {
if (query.kind === NodeKind.HogQLQuery) {
setQuerySource(query)
}
}}
/>
</div>
)}
</>
)}
{showResultControls && (
<>
<LemonDivider className="my-0" />
<div className="flex gap-4 justify-between flex-wrap">
<div className="flex gap-4 items-center">
<Reload />
<ElapsedTime />
</div>
<div className="flex gap-4 items-center">
<TableDisplay />
</div>
</div>
</div>
</BindLogic>
</BindLogic>
</BindLogic>
</>
)}
{component}
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion frontend/src/queries/query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ async function executeQuery<N extends DataNode = DataNode>(
queryId?: string
): Promise<NonNullable<N['response']>> {
const queryAsyncEnabled = Boolean(featureFlagLogic.findMounted()?.values.featureFlags?.[FEATURE_FLAGS.QUERY_ASYNC])
const excludedKinds = ['HogQLMetadata', 'EventsQuery', 'DataVisualizationNode']
const excludedKinds = ['HogQLMetadata', 'EventsQuery']
const queryAsync = queryAsyncEnabled && !excludedKinds.includes(queryNode.kind)
const response = await api.query(queryNode, methodOptions, queryId, refresh, queryAsync)

Expand Down

0 comments on commit 1b4733d

Please sign in to comment.