diff --git a/frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx b/frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx index ceded230b4d2949471e01e7f7c08d12df7bcd683..bd86e7ce76c1a2cc69e0b5b5f38246a0a213141d 100644 --- a/frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx +++ b/frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx @@ -317,11 +317,9 @@ function DashCardInner({ onAddSeries={() => onAddSeries(dashcard)} onRemove={() => onRemove(dashcard)} onReplaceCard={() => onReplaceCard(dashcard)} - onUpdateVisualizationSettings={settings => - onUpdateVisualizationSettings(dashcard.id, settings) - } - onReplaceAllVisualizationSettings={settings => - onReplaceAllVisualizationSettings(dashcard.id, settings) + onUpdateVisualizationSettings={onUpdateVisualizationSettings} + onReplaceAllVisualizationSettings={ + onReplaceAllVisualizationSettings } showClickBehaviorSidebar={handleShowClickBehaviorSidebar} onPreviewToggle={handlePreviewToggle} @@ -354,9 +352,7 @@ function DashCardInner({ isMobile={isMobile} isPublicOrEmbedded={isPublicOrEmbedded} showClickBehaviorSidebar={showClickBehaviorSidebar} - onUpdateVisualizationSettings={settings => - onUpdateVisualizationSettings(dashcard.id, settings) - } + onUpdateVisualizationSettings={onUpdateVisualizationSettings} onChangeCardAndRun={ navigateToNewCardFromDashboard ? changeCardAndRunHandler : null } diff --git a/frontend/src/metabase/dashboard/components/DashCard/DashCardActionsPanel/DashCardActionsPanel.tsx b/frontend/src/metabase/dashboard/components/DashCard/DashCardActionsPanel/DashCardActionsPanel.tsx index 554e177c285b963c5e10195e8abd40ad5faace9f..0f19a875c77061fe4f96c562e7f96b2d4a79f85c 100644 --- a/frontend/src/metabase/dashboard/components/DashCard/DashCardActionsPanel/DashCardActionsPanel.tsx +++ b/frontend/src/metabase/dashboard/components/DashCard/DashCardActionsPanel/DashCardActionsPanel.tsx @@ -1,5 +1,5 @@ import type { MouseEvent } from "react"; -import { useState } from "react"; +import { useCallback, useState } from "react"; import { t } from "ttag"; import { isActionDashCard } from "metabase/actions/utils"; @@ -9,6 +9,7 @@ import { getVisualizationRaw } from "metabase/visualizations"; import type { Dashboard, DashboardCard, + DashCardId, Series, VisualizationSettings, } from "metabase-types/api"; @@ -35,8 +36,12 @@ interface Props { onRemove: () => void; onAddSeries: () => void; onReplaceCard: () => void; - onReplaceAllVisualizationSettings: (settings: VisualizationSettings) => void; + onReplaceAllVisualizationSettings: ( + dashcardId: DashCardId, + settings: VisualizationSettings, + ) => void; onUpdateVisualizationSettings: ( + dashcardId: DashCardId, settings: Partial<VisualizationSettings>, ) => void; showClickBehaviorSidebar: () => void; @@ -73,6 +78,28 @@ export function DashCardActionsPanel({ const [isDashCardTabMenuOpen, setIsDashCardTabMenuOpen] = useState(false); + const handleOnUpdateVisualizationSettings = useCallback( + (settings: VisualizationSettings) => { + if (!dashcard) { + return; + } + + onUpdateVisualizationSettings(dashcard.id, settings); + }, + [dashcard, onUpdateVisualizationSettings], + ); + + const handleOnReplaceAllVisualizationSettings = useCallback( + (settings: VisualizationSettings) => { + if (!dashcard) { + return; + } + + onReplaceAllVisualizationSettings(dashcard.id, settings); + }, + [dashcard, onReplaceAllVisualizationSettings], + ); + if (dashcard) { buttons.push( <DashCardTabMenu @@ -103,14 +130,16 @@ export function DashCardActionsPanel({ } if (!isLoading && !hasError) { - if (onReplaceAllVisualizationSettings && !disableSettingsConfig) { + if (!disableSettingsConfig) { buttons.push( <ChartSettingsButton key="chart-settings-button" series={series} dashboard={dashboard} dashcard={dashcard} - onReplaceAllVisualizationSettings={onReplaceAllVisualizationSettings} + onReplaceAllVisualizationSettings={ + handleOnReplaceAllVisualizationSettings + } />, ); } @@ -183,7 +212,7 @@ export function DashCardActionsPanel({ <LinkCardEditButton key="link-edit-button" dashcard={dashcard} - onUpdateVisualizationSettings={onUpdateVisualizationSettings} + onUpdateVisualizationSettings={handleOnUpdateVisualizationSettings} />, ); } diff --git a/frontend/src/metabase/dashboard/components/DashCard/DashCardVisualization.tsx b/frontend/src/metabase/dashboard/components/DashCard/DashCardVisualization.tsx index e1c4c32a0de0b53a1bb13b3a44793f501cbd71fe..c4b70ec79bf89ea34105384eb00837ef020796c0 100644 --- a/frontend/src/metabase/dashboard/components/DashCard/DashCardVisualization.tsx +++ b/frontend/src/metabase/dashboard/components/DashCard/DashCardVisualization.tsx @@ -76,7 +76,10 @@ interface DashCardVisualizationProps { error?: { message?: string; icon?: IconName }; headerIcon?: IconProps; - onUpdateVisualizationSettings: (settings: VisualizationSettings) => void; + onUpdateVisualizationSettings: ( + id: DashCardId, + settings: VisualizationSettings, + ) => void; onChangeCardAndRun: DashCardOnChangeCardAndRunHandler | null; showClickBehaviorSidebar: (dashCardId: DashCardId | null) => void; onChangeLocation: (location: LocationDescriptor) => void; @@ -123,7 +126,14 @@ export function DashCardVisualization({ : null; }, [dashcard.card, metadata]); - const renderVisualizationOverlay = useCallback(() => { + const handleOnUpdateVisualizationSettings = useCallback( + (settings: VisualizationSettings) => { + onUpdateVisualizationSettings(dashcard.id, settings); + }, + [dashcard.id, onUpdateVisualizationSettings], + ); + + const visualizationOverlay = useMemo(() => { if (isClickBehaviorSidebarOpen) { const disableClickBehavior = getVisualizationRaw(series)?.disableClickBehavior; @@ -177,7 +187,7 @@ export function DashCardVisualization({ series, ]); - const renderActionButtons = useCallback(() => { + const actionButtons = useMemo(() => { if (!question) { return null; } @@ -251,10 +261,10 @@ export function DashCardVisualization({ isPreviewing={isPreviewing} isEditingParameter={isEditingParameter} isMobile={isMobile} - actionButtons={renderActionButtons()} - replacementContent={renderVisualizationOverlay()} + actionButtons={actionButtons} + replacementContent={visualizationOverlay} getExtraDataForClick={getExtraDataForClick} - onUpdateVisualizationSettings={onUpdateVisualizationSettings} + onUpdateVisualizationSettings={handleOnUpdateVisualizationSettings} onChangeCardAndRun={onChangeCardAndRun} onChangeLocation={onChangeLocation} />