From 304f3b4863fb4c5f0025289aa162229084fc92b4 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Sep 2025 15:38:36 +0200 Subject: [PATCH 1/3] fix: Bouncing chart when opening metadata panel in edit mode --- app/components/chart-shared.tsx | 6 +++--- app/components/metadata-panel.tsx | 18 ++++++++++++------ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx index 94b6a3b1c..f11793b00 100644 --- a/app/components/chart-shared.tsx +++ b/app/components/chart-shared.tsx @@ -144,8 +144,8 @@ export const ChartControls = ({ {showFilters && } {metadataPanelProps ? ( - - + ) : null} {showFilters && } diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx index d4099e062..ffe536e72 100644 --- a/app/components/metadata-panel.tsx +++ b/app/components/metadata-panel.tsx @@ -312,6 +312,17 @@ export const MetadataPanel = ({ }; }, [setOpen, reset, router.events]); + const slideProps = useMemo(() => { + if (container) { + return { + onEnter: () => setEnableTransition(false), + onEntered: () => setEnableTransition(true), + onExit: () => setEnableTransition(false), + onExited: () => setEnableTransition(true), + }; + } + }, [setEnableTransition, container]); + return ( <> {renderToggle && ( @@ -326,12 +337,7 @@ export const MetadataPanel = ({ disableEnforceFocus ModalProps={{ container }} PaperProps={{ style: { position: "absolute" } }} - SlideProps={{ - onEnter: () => setEnableTransition(false), - onEntered: () => setEnableTransition(true), - onExit: () => setEnableTransition(false), - onExited: () => setEnableTransition(true), - }} + SlideProps={slideProps} >
From 6571039ec15f466650ec06a3e4623a990f49c1d0 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Sep 2025 16:10:33 +0200 Subject: [PATCH 2/3] fix: Remove refs --- app/charts/shared/annotation-utils.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/app/charts/shared/annotation-utils.ts b/app/charts/shared/annotation-utils.ts index 3a85dcf44..20b5b0439 100644 --- a/app/charts/shared/annotation-utils.ts +++ b/app/charts/shared/annotation-utils.ts @@ -1,4 +1,4 @@ -import { useCallback, useRef } from "react"; +import { useCallback } from "react"; import { useInteraction } from "@/charts/shared/use-interaction"; import { @@ -26,14 +26,10 @@ export const useIsEditingAnnotation = () => { export const useGetAnnotationRenderState = () => { const [interaction] = useInteraction(); - const interactionRef = useRef(interaction); - interactionRef.current = interaction; const [state] = useConfiguratorState(); const chartConfig = getChartConfig(state); const { activeField } = chartConfig; const isEditing = useIsEditingAnnotation(); - const annotationsRef = useRef(chartConfig.annotations); - annotationsRef.current = chartConfig.annotations; const getAnnotationRenderState = useCallback( ( @@ -48,7 +44,7 @@ export const useGetAnnotationRenderState = () => { ) => { let annotation: Annotation | undefined; - for (const a of annotationsRef.current) { + for (const a of chartConfig.annotations) { const matches = matchesAnnotationTarget(observation, a.targets); if (matches) { @@ -63,14 +59,14 @@ export const useGetAnnotationRenderState = () => { color = annotation.color; } - const currentInteraction = interactionRef.current; + const currentInteraction = interaction; const interactionMatches = currentInteraction.type === "annotation" && currentInteraction.visible && currentInteraction.observation?.[`${axisComponentId}/__iri__`] === axisValue; - const targetsOtherAnnotations = annotationsRef.current.some( + const targetsOtherAnnotations = chartConfig.annotations.some( (a) => a.key !== activeField && matchesAnnotationTarget(observation, a.targets) @@ -80,6 +76,7 @@ export const useGetAnnotationRenderState = () => { let focused = isEditing && ((interactionMatches && !targetsOtherAnnotations) || isActive); + console.log("focused", focused); return { color, @@ -87,7 +84,7 @@ export const useGetAnnotationRenderState = () => { isActive, }; }, - [activeField, isEditing] + [activeField, chartConfig.annotations, interaction, isEditing] ); return getAnnotationRenderState; From d07fb1084df3c84c32a9ae0c93d6a7552312a8e5 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Sep 2025 16:14:35 +0200 Subject: [PATCH 3/3] fix: Rendering keys, interactive filters are not needed --- CHANGELOG.md | 2 ++ app/charts/bar/bars-grouped-state-props.ts | 1 - app/charts/bar/bars-stacked-state-props.ts | 1 - app/charts/bar/bars-state-props.ts | 1 - .../column/columns-grouped-state-props.ts | 1 - .../column/columns-stacked-state-props.ts | 1 - app/charts/column/columns-state-props.ts | 1 - .../combo/combo-line-column-state-props.ts | 3 +-- app/charts/pie/pie-state-props.ts | 3 +-- .../scatterplot/scatterplot-state-props.ts | 3 +-- app/charts/shared/rendering-utils.ts | 21 ++----------------- 11 files changed, 7 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6aa9f961..a861ec00c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ You can also check the - It's no longer possible to clear the filter selection in shared, single dashboard filter - It's now possible to share filters between tables in dashboards + - Charts are not animating in and out anymore when interacting with UI in some + rare cases - Styles - Added missing paddings in details panel autocomplete component and in banner component for smaller breakpoints diff --git a/app/charts/bar/bars-grouped-state-props.ts b/app/charts/bar/bars-grouped-state-props.ts index 5e5cac240..77eeb1ec0 100644 --- a/app/charts/bar/bars-grouped-state-props.ts +++ b/app/charts/bar/bars-grouped-state-props.ts @@ -108,7 +108,6 @@ export const useBarsGroupedStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/bar/bars-stacked-state-props.ts b/app/charts/bar/bars-stacked-state-props.ts index 2262656e4..382db20d6 100644 --- a/app/charts/bar/bars-stacked-state-props.ts +++ b/app/charts/bar/bars-stacked-state-props.ts @@ -98,7 +98,6 @@ export const useBarsStackedStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/bar/bars-state-props.ts b/app/charts/bar/bars-state-props.ts index 232871654..0f87d590d 100644 --- a/app/charts/bar/bars-state-props.ts +++ b/app/charts/bar/bars-state-props.ts @@ -107,7 +107,6 @@ export const useBarsStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/column/columns-grouped-state-props.ts b/app/charts/column/columns-grouped-state-props.ts index 2e18803d8..5438f3458 100644 --- a/app/charts/column/columns-grouped-state-props.ts +++ b/app/charts/column/columns-grouped-state-props.ts @@ -108,7 +108,6 @@ export const useColumnsGroupedStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/column/columns-stacked-state-props.ts b/app/charts/column/columns-stacked-state-props.ts index 7ff1bbe93..f9790d17b 100644 --- a/app/charts/column/columns-stacked-state-props.ts +++ b/app/charts/column/columns-stacked-state-props.ts @@ -98,7 +98,6 @@ export const useColumnsStackedStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/column/columns-state-props.ts b/app/charts/column/columns-state-props.ts index 14217b514..224d61bc3 100644 --- a/app/charts/column/columns-state-props.ts +++ b/app/charts/column/columns-state-props.ts @@ -107,7 +107,6 @@ export const useColumnsStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/combo/combo-line-column-state-props.ts b/app/charts/combo/combo-line-column-state-props.ts index d1b8d18d1..039afec62 100644 --- a/app/charts/combo/combo-line-column-state-props.ts +++ b/app/charts/combo/combo-line-column-state-props.ts @@ -64,7 +64,7 @@ export const useComboLineColumnStateVariables = ( observations, }); const interactiveFiltersVariables = useInteractiveFiltersVariables( - chartConfig.interactiveFiltersConfig, + interactiveFiltersConfig, { dimensionsById } ); @@ -135,7 +135,6 @@ export const useComboLineColumnStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, undefined ); diff --git a/app/charts/pie/pie-state-props.ts b/app/charts/pie/pie-state-props.ts index 7276be8bb..78974a2ed 100644 --- a/app/charts/pie/pie-state-props.ts +++ b/app/charts/pie/pie-state-props.ts @@ -31,7 +31,7 @@ export const usePieStateVariables = ( dimensionsById, measuresById, } = props; - const { fields, interactiveFiltersConfig } = chartConfig; + const { fields } = chartConfig; const { y, segment, animation } = fields; const filters = useChartConfigFilters(chartConfig); @@ -47,7 +47,6 @@ export const usePieStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/scatterplot/scatterplot-state-props.ts b/app/charts/scatterplot/scatterplot-state-props.ts index b7a516fe0..6cb445c2e 100644 --- a/app/charts/scatterplot/scatterplot-state-props.ts +++ b/app/charts/scatterplot/scatterplot-state-props.ts @@ -34,7 +34,7 @@ export const useScatterplotStateVariables = ( dimensionsById, measuresById, } = props; - const { fields, interactiveFiltersConfig } = chartConfig; + const { fields } = chartConfig; const { x, y, segment, animation } = fields; const filters = useChartConfigFilters(chartConfig); @@ -53,7 +53,6 @@ export const useScatterplotStateVariables = ( const getRenderingKey = useRenderingKeyVariable( dimensions, filters, - interactiveFiltersConfig, animation ); diff --git a/app/charts/shared/rendering-utils.ts b/app/charts/shared/rendering-utils.ts index 70bf7cde5..558dfce47 100644 --- a/app/charts/shared/rendering-utils.ts +++ b/app/charts/shared/rendering-utils.ts @@ -2,11 +2,7 @@ import { select, Selection } from "d3-selection"; import { Transition } from "d3-transition"; import { useCallback, useMemo } from "react"; -import { - AnimationField, - Filters, - InteractiveFiltersConfig, -} from "@/configurator"; +import { AnimationField, Filters } from "@/configurator"; import { Component, isStandardErrorDimension, @@ -20,7 +16,6 @@ import { TransitionStore } from "@/stores/transition"; export const useRenderingKeyVariable = ( dimensions: Component[], filters: Filters, - interactiveFiltersConfig: InteractiveFiltersConfig, animationField: AnimationField | undefined ) => { const filterableDimensionKeys = useMemo(() => { @@ -30,18 +25,6 @@ export const useRenderingKeyVariable = ( .filter((d) => d[1].type === "single") .map((d) => d[0]); - if (interactiveFiltersConfig) { - const { dataFilters, legend } = interactiveFiltersConfig; - - if (dataFilters.componentIds.length > 0) { - keysToRemove.push(...dataFilters.componentIds); - } - - if (legend.componentId) { - keysToRemove.push(legend.componentId); - } - } - if (animationField) { keysToRemove.push(animationField.componentId); } @@ -50,7 +33,7 @@ export const useRenderingKeyVariable = ( .filter((d) => !isStandardErrorDimension(d)) .map((d) => d.id) .filter((d) => !keysToRemove.includes(d)); - }, [dimensions, filters, interactiveFiltersConfig, animationField]); + }, [dimensions, filters, animationField]); /** Optionally provide an option to pass a segment to the key. * This is useful for stacked charts, where we can't easily