fix: Bouncing charts

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

app/charts/bar/bars-grouped-state-props.ts

@@ -108,7 +108,6 @@ export const useBarsGroupedStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

app/charts/bar/bars-stacked-state-props.ts

@@ -98,7 +98,6 @@ export const useBarsStackedStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

app/charts/bar/bars-state-props.ts

@@ -107,7 +107,6 @@ export const useBarsStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

app/charts/column/columns-grouped-state-props.ts

@@ -108,7 +108,6 @@ export const useColumnsGroupedStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

app/charts/column/columns-stacked-state-props.ts

@@ -98,7 +98,6 @@ export const useColumnsStackedStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

app/charts/column/columns-state-props.ts

@@ -107,7 +107,6 @@ export const useColumnsStateVariables = (
   const getRenderingKey = useRenderingKeyVariable(
     dimensions,
     filters,
-    interactiveFiltersConfig,
     animation
   );
 

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
   );
 

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
   );
 

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
   );
 

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,14 +76,15 @@ export const useGetAnnotationRenderState = () => {
       let focused =
         isEditing &&
         ((interactionMatches && !targetsOtherAnnotations) || isActive);
+      console.log("focused", focused);
 
       return {
         color,
         focused,
         isActive,
       };
     },
-    [activeField, isEditing]
+    [activeField, chartConfig.annotations, interaction, isEditing]
   );
 
   return getAnnotationRenderState;

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

app/components/chart-shared.tsx

@@ -144,8 +144,8 @@ export const ChartControls = ({
         {showFilters && <ChartDataFiltersToggle {...chartFiltersState} />}
       </Box>
       {metadataPanelProps ? (
-        <Box
-          sx={{
+        <div
+          style={{
             display: "flex",
             justifyContent: "flex-end",
             gridArea: "metadataToggle",
@@ -157,7 +157,7 @@ export const ChartControls = ({
             dashboardFilters={dashboardFilters}
             {...metadataPanelProps}
           />
-        </Box>
+        </div>
       ) : null}
       <Box sx={{ gridArea: "filtersList" }}>
         {showFilters && <ChartDataFiltersList {...chartFiltersState} />}

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}
       >
         <Header onClose={handleToggle} />
         <TabContext value={activeSection}>