diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6aa9f9614..a861ec00c9 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 5e5cac240a..77eeb1ec0d 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 2262656e43..382db20d67 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 2328716543..0f87d590d5 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 2e18803d87..5438f34584 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 7ff1bbe93d..f9790d17bc 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 14217b5145..224d61bc37 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 d1b8d18d13..039afec626 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 7276be8bbc..78974a2ed2 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 b7a516fe03..6cb445c2ef 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/annotation-utils.ts b/app/charts/shared/annotation-utils.ts
index 3a85dcf44f..20b5b0439a 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;
diff --git a/app/charts/shared/rendering-utils.ts b/app/charts/shared/rendering-utils.ts
index 70bf7cde5a..558dfce471 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
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 94b6a3b1c0..f11793b009 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 d4099e062c..ffe536e72c 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}
>