Merge pull request #122 from GoogleChromeLabs/quant-ui-fix

Quant fixes

src/components/App/index.tsx

@@ -159,7 +159,7 @@ export default class App extends Component<Props, State> {
     // options should always be correct for the type, but TypeScript isn't smart enough.
     const encoderState: EncoderState = {
       type,
-      options: options ? options : encoderMap[type].defaultOptions,
+      options: options || encoderMap[type].defaultOptions,
     } as EncoderState;
 
     images[index] = {

src/components/Options/index.tsx

@@ -81,10 +81,15 @@ export default class Options extends Component<Props, State> {
   onPreprocessorEnabledChange(event: Event) {
     const el = event.currentTarget as HTMLInputElement;
 
-    const preprocessorState = this.props.preprocessorState;
+    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;
-    const preprocessor = el.name.split('.')[0] as keyof typeof preprocessorState;
+
-    preprocessorState[preprocessor].enabled = el.checked;
+    this.props.onPreprocessorOptionsChange({
-    this.props.onPreprocessorOptionsChange(preprocessorState);
+      ...this.props.preprocessorState,
+      [preprocessor]: {
+        ...this.props.preprocessorState[preprocessor],
+        enabled: el.checked,
+      },
+    });
   }
 
   @bind
@@ -107,25 +112,27 @@ export default class Options extends Component<Props, State> {
 
     return (
       <div class={`${style.options}${className ? (' ' + className) : ''}`}>
-        <p>Quantization</p>
+        {encoderState.type !== 'identity' && (
-        <label>
+          <div>
-          <input
+            <p>Quantization</p>
-            name="quantizer.enable"
+            <label>
-            type="checkbox"
+              <input
-            checked={!!preprocessorState.quantizer.enabled}
+                name="quantizer.enable"
-            onChange={this.onPreprocessorEnabledChange}
+                type="checkbox"
-          />
+                checked={!!preprocessorState.quantizer.enabled}
-          Enable
+                onChange={this.onPreprocessorEnabledChange}
-        </label>
+              />
-        {preprocessorState.quantizer.enabled ? (
+              Enable
-          <QuantizerOptionsComponent
+            </label>
-            options={preprocessorState.quantizer}
+            {preprocessorState.quantizer.enabled &&
-            onChange={this.onQuantizerOptionsChange}
+              <QuantizerOptionsComponent
-          />
+                options={preprocessorState.quantizer}
-        ) : (
+                onChange={this.onQuantizerOptionsChange}
-          <div/>
+              />
+            }
+            <hr/>
+          </div>
         )}
-        <hr/>
         <label>
           Mode:
           {encoderSupportMap ?