fix(explore): clean data when hidding control (#19039)

superset-frontend/src/explore/components/ControlRow.tsx

@@ -16,26 +16,34 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 
 const NUM_COLUMNS = 12;
 
 type Control = React.ReactElement | null;
 
 export default function ControlRow({ controls }: { controls: Control[] }) {
-  // ColorMapControl renders null and should not be counted
+  const isHiddenControl = useCallback(
+    (control: Control) =>
+      control?.props.type === 'HiddenControl' ||
+      control?.props.isVisible === false,
+    [],
+  );
+  // Invisible control should not be counted
   // in the columns number
   const countableControls = controls.filter(
-    control => !['ColorMapControl'].includes(control?.props.type),
+    control => !isHiddenControl(control),
   );
-  const colSize = NUM_COLUMNS / countableControls.length;
+  const colSize = countableControls.length
+    ? NUM_COLUMNS / countableControls.length
+    : NUM_COLUMNS;
   return (
     <div className="row">
       {controls.map((control, i) => (
         <div
           className={`col-lg-${colSize} col-xs-12`}
           style={{
-            display: control?.props.type === 'HiddenControl' ? 'none' : 'block',
+            display: isHiddenControl(control) ? 'none' : 'block',
           }}
           key={i}
         >