Change how customizer params are applied (#529)

* Only send customizer params when it's open

* Add customizer reset button and have two modes of customizer vs not

depending of if the customizer is open.

* Remove re-render on customizer open/close in project profile

app/web/src/components/Customizer/Customizer.tsx

@@ -14,12 +14,23 @@ import {
 } from './customizerConverter'
 
 const Customizer = () => {
-  const [open, setOpen] = React.useState(false)
   const [shouldLiveUpdate, setShouldLiveUpdate] = React.useState(false)
   const { state, thunkDispatch } = useIdeContext()
+  const isOpen = state.isCustomizerOpen
   const customizerParams = state?.customizerParams
   const currentParameters = state?.currentParameters || {}
   const handleRender = useRender()
+  const toggleOpen = () => {
+    thunkDispatch({ type: 'setCustomizerOpenState', payload: !isOpen })
+    if (state.viewerContext === 'ide') {
+      // don't re-render on open/close in the project profile
+      setTimeout(() => handleRender())
+    }
+  }
+  const handleReset = () => {
+    thunkDispatch({ type: 'resetCustomizer' })
+    setTimeout(() => handleRender(true))
+  }
 
   const updateCustomizerParam = (paramName: string, paramValue: any) => {
     const payload = {
@@ -33,20 +44,20 @@ const Customizer = () => {
   return (
     <div
       className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${
-        open ? 'h-full max-h-96' : ''
+        isOpen ? 'h-full max-h-96' : ''
       }`}
     >
       <div className="flex justify-between px-6 py-2 items-center">
         <div className="grid grid-flow-col-dense gap-6 items-center">
-          <button className="px-2" onClick={() => setOpen(!open)}>
+          <button className="px-2" onClick={toggleOpen}>
             <Svg
               name="chevron-down"
-              className={`h-8 w-8 ${!open && 'transform rotate-180'}`}
+              className={`h-8 w-8 ${!isOpen && 'transform rotate-180'}`}
             />
           </button>
           <div>Parameters</div>
         </div>
-        {open && (
+        {isOpen && (
           <>
             <div className="flex items-center">
               <div className="font-fira-sans text-sm mr-4">Auto Update</div>
@@ -66,11 +77,17 @@ const Customizer = () => {
                   } inline-block w-4 h-4 transform bg-white rounded-full`}
                 />
               </Switch>
+              <button
+                className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-600 mr-2"
+                onClick={handleReset}
+              >
+                Reset
+              </button>
               <button
                 className={`px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800 ${
                   shouldLiveUpdate && 'bg-opacity-30 cursor-default'
                 }`}
-                onClick={handleRender}
+                onClick={() => handleRender()}
                 disabled={shouldLiveUpdate}
               >
                 Update
@@ -79,7 +96,9 @@ const Customizer = () => {
           </>
         )}
       </div>
-      <div className={`${open ? 'h-full pb-32' : 'h-0'} overflow-y-auto px-12`}>
+      <div
+        className={`${isOpen ? 'h-full pb-32' : 'h-0'} overflow-y-auto px-12`}
+      >
         <div>
           {customizerParams.map((param, index) => {
             const otherProps = {