This is an automated email from the ASF dual-hosted git repository. kgabryje pushed a commit to branch what-if in repository https://gitbox.apache.org/repos/asf/superset.git
commit 2ae11fc2b820eb35c7d58d8bd2f6730acc2579ac Author: Kamil Gabryjelski <[email protected]> AuthorDate: Fri Dec 19 15:45:33 2025 +0100 Verbose col names --- .../WhatIfDrawer/ModificationsDisplay.tsx | 5 ++- .../components/WhatIfDrawer/WhatIfHeaderMenu.tsx | 3 +- .../dashboard/components/WhatIfDrawer/index.tsx | 14 +------ .../src/dashboard/components/WhatIfDrawer/types.ts | 2 + .../components/WhatIfDrawer/useWhatIfApply.ts | 45 +++++++++++++++----- .../WhatIfSimulationList/EditSimulationModal.tsx | 9 +++- .../src/pages/WhatIfSimulationList/index.tsx | 49 ++++++++++++++++++---- 7 files changed, 93 insertions(+), 34 deletions(-) diff --git a/superset-frontend/src/dashboard/components/WhatIfDrawer/ModificationsDisplay.tsx b/superset-frontend/src/dashboard/components/WhatIfDrawer/ModificationsDisplay.tsx index 825c1544b7..48f23a57b0 100644 --- a/superset-frontend/src/dashboard/components/WhatIfDrawer/ModificationsDisplay.tsx +++ b/superset-frontend/src/dashboard/components/WhatIfDrawer/ModificationsDisplay.tsx @@ -71,7 +71,7 @@ const ModificationsDisplay = memo(function ModificationsDisplay({ margin: 0; `} > - <span>{mod.column}</span> + <span>{mod.verboseName || mod.column}</span> {mod.isAISuggested && <AIBadge>{t('AI')}</AIBadge>} <span css={css` @@ -104,7 +104,8 @@ const ModificationsDisplay = memo(function ModificationsDisplay({ .map((mod, idx) => ( <AIReasoningItem key={idx}> <strong> - {mod.column} {formatPercentageChange(mod.multiplier, 0)} + {mod.verboseName || mod.column}{' '} + {formatPercentageChange(mod.multiplier, 0)} </strong> <div>{mod.reasoning}</div> </AIReasoningItem> diff --git a/superset-frontend/src/dashboard/components/WhatIfDrawer/WhatIfHeaderMenu.tsx b/superset-frontend/src/dashboard/components/WhatIfDrawer/WhatIfHeaderMenu.tsx index b4a9a0b2df..38e53c4730 100644 --- a/superset-frontend/src/dashboard/components/WhatIfDrawer/WhatIfHeaderMenu.tsx +++ b/superset-frontend/src/dashboard/components/WhatIfDrawer/WhatIfHeaderMenu.tsx @@ -217,10 +217,11 @@ const WhatIfHeaderMenu = ({ aria-label={t('More Options')} aria-haspopup="true" css={css` - padding: ${theme.sizeUnit}px; + padding: 0; display: flex; align-items: center; justify-content: center; + height: 20px; `} > <VerticalDotsTrigger /> diff --git a/superset-frontend/src/dashboard/components/WhatIfDrawer/index.tsx b/superset-frontend/src/dashboard/components/WhatIfDrawer/index.tsx index 13171daeb5..c865e294c4 100644 --- a/superset-frontend/src/dashboard/components/WhatIfDrawer/index.tsx +++ b/superset-frontend/src/dashboard/components/WhatIfDrawer/index.tsx @@ -20,7 +20,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { t } from '@superset-ui/core'; -import { css, Alert, useTheme } from '@apache-superset/core/ui'; +import { css, useTheme } from '@apache-superset/core/ui'; import { Select, Checkbox, @@ -162,7 +162,7 @@ const WhatIfPanel = ({ () => numericColumns.map(col => ({ value: col.columnName, - label: col.columnName, + label: col.verboseName || col.columnName, })), [numericColumns], ); @@ -474,16 +474,6 @@ const WhatIfPanel = ({ : t('See what if')} </ApplyButton> - {appliedModifications.length === 0 && ( - <Alert - type="info" - message={t( - 'Select a column above to simulate changes and preview how it would impact your dashboard in real-time.', - )} - showIcon - /> - )} - <ModificationsDisplay modifications={appliedModifications} /> {affectedChartIds.length > 0 && ( diff --git a/superset-frontend/src/dashboard/components/WhatIfDrawer/types.ts b/superset-frontend/src/dashboard/components/WhatIfDrawer/types.ts index 787b5b2d7f..0f399d835c 100644 --- a/superset-frontend/src/dashboard/components/WhatIfDrawer/types.ts +++ b/superset-frontend/src/dashboard/components/WhatIfDrawer/types.ts @@ -109,4 +109,6 @@ export interface ExtendedWhatIfModification { isAISuggested?: boolean; reasoning?: string; confidence?: 'high' | 'medium' | 'low'; + /** Human-readable column label for display */ + verboseName?: string | null; } diff --git a/superset-frontend/src/dashboard/components/WhatIfDrawer/useWhatIfApply.ts b/superset-frontend/src/dashboard/components/WhatIfDrawer/useWhatIfApply.ts index b595f21e88..c71069ee9c 100644 --- a/superset-frontend/src/dashboard/components/WhatIfDrawer/useWhatIfApply.ts +++ b/superset-frontend/src/dashboard/components/WhatIfDrawer/useWhatIfApply.ts @@ -108,12 +108,18 @@ export function useWhatIfApply({ const multiplier = 1 + sliderValue / 100; + // Find verbose name for the selected column + const selectedColumnInfo = numericColumns.find( + col => col.columnName === selectedColumn, + ); + // Base user modification with filters const userModification: ExtendedWhatIfModification = { column: selectedColumn, multiplier, isAISuggested: false, filters: filters.length > 0 ? filters : undefined, + verboseName: selectedColumnInfo?.verboseName, }; let allModifications: ExtendedWhatIfModification[] = [userModification]; @@ -145,14 +151,20 @@ export function useWhatIfApply({ // Add AI suggestions to modifications (with same filters as user modification) const aiModifications: ExtendedWhatIfModification[] = - suggestions.suggestedModifications.map(mod => ({ - column: mod.column, - multiplier: mod.multiplier, - isAISuggested: true, - reasoning: mod.reasoning, - confidence: mod.confidence, - filters: filters.length > 0 ? filters : undefined, - })); + suggestions.suggestedModifications.map(mod => { + const colInfo = numericColumns.find( + col => col.columnName === mod.column, + ); + return { + column: mod.column, + multiplier: mod.multiplier, + isAISuggested: true, + reasoning: mod.reasoning, + confidence: mod.confidence, + filters: filters.length > 0 ? filters : undefined, + verboseName: colInfo?.verboseName, + }; + }); allModifications = [...allModifications, ...aiModifications]; } catch (error) { @@ -232,7 +244,18 @@ export function useWhatIfApply({ // Increment counter to reset AI insights component setApplyCounter(c => c + 1); - setAppliedModifications(modifications); + // Populate verbose names for loaded modifications + const modificationsWithVerboseNames = modifications.map(mod => { + const colInfo = numericColumns.find( + col => col.columnName === mod.column, + ); + return { + ...mod, + verboseName: mod.verboseName || colInfo?.verboseName, + }; + }); + + setAppliedModifications(modificationsWithVerboseNames); // Collect all affected chart IDs from all modifications const allAffectedChartIds = new Set<number>(); @@ -250,7 +273,7 @@ export function useWhatIfApply({ // Set the what-if modifications in Redux state dispatch( setWhatIfModifications( - modifications.map(mod => ({ + modificationsWithVerboseNames.map(mod => ({ column: mod.column, multiplier: mod.multiplier, filters: mod.filters, @@ -266,7 +289,7 @@ export function useWhatIfApply({ // Set affected chart IDs to enable AI insights setAffectedChartIds(chartIdsArray); }, - [dispatch, columnToChartIds], + [dispatch, columnToChartIds, numericColumns], ); /** diff --git a/superset-frontend/src/pages/WhatIfSimulationList/EditSimulationModal.tsx b/superset-frontend/src/pages/WhatIfSimulationList/EditSimulationModal.tsx index 0d4bfc75c6..26855a66c7 100644 --- a/superset-frontend/src/pages/WhatIfSimulationList/EditSimulationModal.tsx +++ b/superset-frontend/src/pages/WhatIfSimulationList/EditSimulationModal.tsx @@ -36,12 +36,16 @@ import { SLIDER_TOOLTIP_CONFIG, } from 'src/dashboard/components/WhatIfDrawer/constants'; +/** Maps column name to verbose name for display */ +type ColumnVerboseNames = Record<string, string>; + interface EditSimulationModalProps { simulation: WhatIfSimulation | null; onHide: () => void; onSaved: () => void; addSuccessToast: (msg: string) => void; addDangerToast: (msg: string) => void; + columnVerboseNames: ColumnVerboseNames; } const ModificationRow = styled.div` @@ -137,6 +141,7 @@ function EditSimulationModal({ onSaved, addSuccessToast, addDangerToast, + columnVerboseNames, }: EditSimulationModalProps) { const theme = useTheme(); @@ -265,7 +270,9 @@ function EditSimulationModal({ modifications.map((mod, index) => ( <ModificationRow key={`${mod.column}-${index}`}> <ModificationHeader> - <ColumnName>{mod.column}</ColumnName> + <ColumnName> + {columnVerboseNames[mod.column] || mod.column} + </ColumnName> <div css={css` display: flex; diff --git a/superset-frontend/src/pages/WhatIfSimulationList/index.tsx b/superset-frontend/src/pages/WhatIfSimulationList/index.tsx index 5f4e768092..7b8a89d9d3 100644 --- a/superset-frontend/src/pages/WhatIfSimulationList/index.tsx +++ b/superset-frontend/src/pages/WhatIfSimulationList/index.tsx @@ -63,6 +63,9 @@ interface DashboardInfo { slug: string | null; } +/** Maps column name to verbose name for display */ +type ColumnVerboseNames = Record<string, string>; + const PageContainer = styled.div` padding: ${({ theme }) => theme.sizeUnit * 4}px; `; @@ -119,11 +122,15 @@ function formatFilterLabel(filter: WhatIfFilter): string { */ function ModificationTag({ modification, + columnVerboseNames, }: { modification: WhatIfModification; + columnVerboseNames: ColumnVerboseNames; }) { const theme = useTheme(); const hasFilters = modification.filters && modification.filters.length > 0; + const displayName = + columnVerboseNames[modification.column] || modification.column; const tagContent = ( <Tag @@ -134,7 +141,7 @@ function ModificationTag({ margin: 0; `} > - <span>{modification.column}</span> + <span>{displayName}</span> <span css={css` font-weight: ${theme.fontWeightStrong}; @@ -172,6 +179,8 @@ function WhatIfSimulationList({ const [dashboards, setDashboards] = useState<Record<number, DashboardInfo>>( {}, ); + const [columnVerboseNames, setColumnVerboseNames] = + useState<ColumnVerboseNames>({}); const [loading, setLoading] = useState(true); const [simulationCurrentlyDeleting, setSimulationCurrentlyDeleting] = useState<WhatIfSimulation | null>(null); @@ -188,17 +197,40 @@ function WhatIfSimulationList({ const dashboardIds = [...new Set(result.map(sim => sim.dashboardId))]; if (dashboardIds.length > 0) { const dashboardInfos: Record<number, DashboardInfo> = {}; + const verboseNames: ColumnVerboseNames = {}; + await Promise.all( dashboardIds.map(async id => { try { - const response = await SupersetClient.get({ - endpoint: `/api/v1/dashboard/${id}`, - }); + // Fetch dashboard info and datasets in parallel + const [dashboardResponse, datasetsResponse] = await Promise.all([ + SupersetClient.get({ + endpoint: `/api/v1/dashboard/${id}`, + }), + SupersetClient.get({ + endpoint: `/api/v1/dashboard/${id}/datasets`, + }), + ]); + dashboardInfos[id] = { id, - dashboard_title: response.json.result.dashboard_title, - slug: response.json.result.slug, + dashboard_title: dashboardResponse.json.result.dashboard_title, + slug: dashboardResponse.json.result.slug, }; + + // Extract column verbose names from all datasets + const datasets = datasetsResponse.json.result || []; + datasets.forEach( + (dataset: { + columns?: { column_name: string; verbose_name?: string }[]; + }) => { + (dataset.columns || []).forEach(col => { + if (col.verbose_name) { + verboseNames[col.column_name] = col.verbose_name; + } + }); + }, + ); } catch { dashboardInfos[id] = { id, @@ -209,6 +241,7 @@ function WhatIfSimulationList({ }), ); setDashboards(dashboardInfos); + setColumnVerboseNames(verboseNames); } } catch (error) { addDangerToast(t('Failed to load simulations')); @@ -336,6 +369,7 @@ function WhatIfSimulationList({ <ModificationTag key={`${mod.column}-${idx}`} modification={mod} + columnVerboseNames={columnVerboseNames} /> ))} </ModificationTagsRow> @@ -408,7 +442,7 @@ function WhatIfSimulationList({ disableSortBy: true, }, ], - [dashboards, history], + [dashboards, history, columnVerboseNames], ); const emptyState = { @@ -486,6 +520,7 @@ function WhatIfSimulationList({ onSaved={loadSimulations} addSuccessToast={addSuccessToast} addDangerToast={addDangerToast} + columnVerboseNames={columnVerboseNames} /> )} <ConfirmStatusChange
