fix: Show interactive filter in filters only if active field is segment

Author: ptbrowne

app/configurator/components/filters.tsx

@@ -83,7 +83,7 @@ import useEvent from "@/utils/use-event";
 
 import { interlace } from "../../utils/interlace";
 import { ConfiguratorState, GenericSegmentField } from "../config-types";
-import { useInteractiveLegendFiltersToggle } from "../interactive-filters/interactive-filters-config-state";
+import { useInteractiveFiltersToggle } from "../interactive-filters/interactive-filters-config-state";
 
 import { ControlSectionSkeleton } from "./chart-controls/section";
 
@@ -342,21 +342,23 @@ const MultiFilterContent = ({
     );
   }, [colorConfig?.colorMapping, dimensionIri, colorComponent]);
 
-  const interactiveFilterProps = useInteractiveLegendFiltersToggle();
+  const interactiveFilterProps = useInteractiveFiltersToggle("legend");
 
   return (
     <Box sx={{ position: "relative" }}>
       <Box mb={4}>
         <Box sx={{ justifyContent: "space-between", display: "flex" }}>
-          <FormControlLabel
-            componentsProps={{ typography: { variant: "caption" } }}
-            control={<Switch {...interactiveFilterProps} />}
-            label={
-              <Trans id="controls.filters.interactive.toggle">
-                Interactive
-              </Trans>
-            }
-          />
+          {config.activeField === "segment" ? (
+            <FormControlLabel
+              componentsProps={{ typography: { variant: "caption" } }}
+              control={<Switch {...interactiveFilterProps} />}
+              label={
+                <Trans id="controls.filters.interactive.toggle">
+                  Interactive
+                </Trans>
+              }
+            />
+          ) : null}
           <Button
             variant="contained"
             size="small"

app/configurator/interactive-filters/interactive-filters-config-state.tsx

@@ -13,14 +13,14 @@ import useEvent from "@/utils/use-event";
 
 import { FIELD_VALUE_NONE } from "../constants";
 
-export const useInteractiveLegendFiltersToggle = () => {
+export const useInteractiveFiltersToggle = (target: "legend") => {
   const [state, dispatch] = useConfiguratorState(isConfiguring);
   const onChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
     const newConfig = produce(
       state.chartConfig.interactiveFiltersConfig,
       (draft) => {
-        if (draft?.legend) {
-          draft.legend.active = e.currentTarget.checked;
+        if (draft?.[target]) {
+          draft[target].active = e.currentTarget.checked;
         }
 
         return draft;
@@ -35,12 +35,12 @@ export const useInteractiveLegendFiltersToggle = () => {
 
   const stateValue = get(
     state,
-    "chartConfig.interactiveFiltersConfig.legend.active"
+    `chartConfig.interactiveFiltersConfig.${target}.active`
   );
   const checked = stateValue ? stateValue : false;
 
   return {
-    name: "legend",
+    name: target,
     checked,
     onChange,
   };