codeant-ai-for-open-source[bot] commented on code in PR #40449: URL: https://github.com/apache/superset/pull/40449#discussion_r3305709180
########## superset-frontend/src/components/Chart/DrillDown/DrillDownHost.tsx: ########## @@ -0,0 +1,209 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { ComponentType, useCallback, useMemo, useRef, useState, useEffect } from 'react'; +import { + QueryData, + QueryFormData, + BinaryQueryObjectFilterClause, +} from '@superset-ui/core'; +import { css } from '@apache-superset/core/theme'; +import { useDrillDownState } from './useDrillDownState'; +import { DrillDownBreadcrumb } from './DrillDownBreadcrumb'; +import type { ChartRendererProps } from '../ChartRenderer'; + +/** + * Hook payload contract: chart plugins call `onDrillDown(filters, label)` + * via the chart's hooks bag when the user clicks a data point and a + * drill-down hierarchy is configured. + */ +export type OnDrillDownHook = ( + filters: BinaryQueryObjectFilterClause[], + label: string, +) => void; + +interface DrillDownHostProps extends ChartRendererProps { + /** The wrapped renderer component */ + ChartRendererComponent: ComponentType< + ChartRendererProps & { onDrillDown?: OnDrillDownHook } + >; +} + +/** + * Wraps `<ChartRenderer>` with drill-down behavior. When the chart's + * form_data declares a `drilldown_hierarchy`, this host: + * + * 1. Tracks how deep the user has drilled (a stack of levels) + * 2. Computes "effective" form_data for the current level (replacing the + * groupby and adding accumulated filters) + * 3. Re-fetches chart data for that level + * 4. Renders a breadcrumb above the chart for navigating back up + * + * If the chart has no hierarchy, this is a thin pass-through. + */ +export function DrillDownHost({ + ChartRendererComponent, + ...rendererProps +}: DrillDownHostProps) { + const { formData, queriesResponse } = rendererProps; + + const { + isDrilling, + drillStack, + selectedLeaf, + hierarchy, + effectiveFormData, + effectiveQueriesResponse, + isLoading, + error, + hasHierarchy, + drillDown, + resetTo, + } = useDrillDownState({ + formData, + baseQueriesResponse: queriesResponse, + }); + + const onDrillDown = useMemo<OnDrillDownHook | undefined>(() => { + if (!hasHierarchy) { + return undefined; + } + return (filters, label) => { + drillDown(filters, label); + }; + }, [hasHierarchy, drillDown]); + + const overlayProps = useMemo<Partial<ChartRendererProps>>(() => { + if (!isDrilling) { + // Force re-render when returning to base level + return { triggerRender: true }; + } + return { + formData: effectiveFormData as QueryFormData, + queriesResponse: (effectiveQueriesResponse ?? null) as + | QueryData[] + | null, + chartStatus: isLoading ? 'loading' : 'rendered', + latestQueryFormData: effectiveFormData, + chartIsStale: false, + triggerRender: true, + }; + }, [isDrilling, effectiveFormData, effectiveQueriesResponse, isLoading]); + + const handleResetTo = useCallback( + (depth: number) => { + resetTo(depth); + // Update cross-filter to match the level we're jumping to + if (rendererProps.actions?.updateDataMask) { + if (depth === 0) { + // Going back to root — clear cross-filter entirely + rendererProps.actions.updateDataMask(rendererProps.chartId, { + extraFormData: { filters: [] }, + filterState: { value: null, selectedValues: null }, + }); + } else { + // Going to an intermediate level — set cross-filter to that level's filter + const targetLevel = drillStack[depth - 1]; + if (targetLevel) { + const filters = targetLevel.filters.map(f => ({ + col: f.col, + op: 'IN' as const, + val: [f.val] as (string | number | boolean)[], + })); + rendererProps.actions.updateDataMask(rendererProps.chartId, { + extraFormData: { filters }, + filterState: { + value: filters.length ? [targetLevel.label] : null, + selectedValues: filters.length ? [targetLevel.label] : null, + }, Review Comment: **🟠 Architect Review — HIGH** Breadcrumb jump-to-depth updates the dashboard data mask using only the target level's filters (e.g., just the region), while the drilled chart's own queries use the accumulated filters from all ancestor levels (e.g., country + region). After multi-level drilling, this causes other charts' cross-filters to diverge from the drilled chart's actual state when navigating via the breadcrumb. **Suggestion:** When handling breadcrumb navigation, rebuild the data mask filters from all DrillDownLevel entries up to the selected depth (mirroring effectiveFormData's accumulatedFilters), and set filterState to represent the full path, so the dashboard-wide cross-filter matches the drilled chart's query filters. [Fix in Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=da7cc7c101f54b7599163d24a07cef1a&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset) | [Fix in VSCode Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=da7cc7c101f54b7599163d24a07cef1a&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset) *(Use Cmd/Ctrl + Click for best experience)* <details> <summary><b>Prompt for AI Agent 🤖 </b></summary> ```mdx This is an **Architect / Logical Review** comment left during a code review. These reviews are first-class, important findings — not optional suggestions. Do NOT dismiss this as a 'big architectural change' just because the title says architect review; most of these can be resolved with a small, localized fix once the intent is understood. **Path:** superset-frontend/src/components/Chart/DrillDown/DrillDownHost.tsx **Line:** 120:133 **Comment:** *HIGH: Breadcrumb jump-to-depth updates the dashboard data mask using only the target level's filters (e.g., just the region), while the drilled chart's own queries use the accumulated filters from all ancestor levels (e.g., country + region). After multi-level drilling, this causes other charts' cross-filters to diverge from the drilled chart's actual state when navigating via the breadcrumb. Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise. If a suggested approach is provided above, use it as the authoritative instruction. If no explicit code suggestion is given, you MUST still draft and apply your own minimal, localized fix — do not punt back with 'no suggestion provided, review manually'. Keep the change as small as possible: add a guard clause, gate on a loading state, reorder an await, wrap in a conditional, etc. Do not refactor surrounding code or expand scope beyond the finding. Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix ``` </details> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
