Disabled quantize byte size when the quantize type does not support it, also made disabled fields more obvious

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -2,6 +2,7 @@ import {
   DefaultButton,
   Dropdown,
   IDropdownOption,
+  ILabelStyleProps,
   IStyleFunctionOrObject,
   ITextFieldStyleProps,
   ITextFieldStyles,
@@ -18,6 +19,7 @@ import {
   getIndexTypeOptions,
   getQuantizerTypeOptions,
   supportsQuantization,
+  supportsQuantizationByteSize,
 } from "Explorer/Controls/VectorSearch/VectorSearchUtils";
 import { Keys, t } from "Localization";
 import React, { FunctionComponent, useState } from "react";
@@ -54,11 +56,13 @@ export interface VectorEmbeddingPolicyData {
 
 type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
 
-const labelStyles = {
+const labelStyles = (props: ILabelStyleProps) => {
+  return {
     root: {
       fontSize: 12,
-    color: "var(--colorNeutralForeground1)",
+      color: props.disabled ? "var(--colorNeutralForeground3)" : "var(--colorNeutralForeground1)",
     },
+  };
 };
 
 const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
@@ -260,12 +264,19 @@ export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddin
     } else {
       vectorEmbedding.quantizerType = undefined;
     }
+    if (!supportsQuantizationByteSize(vectorEmbedding.quantizerType)) {
+      vectorEmbedding.quantizationByteSize = undefined;
+    }
     setVectorEmbeddingPolicyData(vectorEmbeddings);
   };
 
   const onQuantizerTypeChange = (index: number, option: IDropdownOption): void => {
     const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index].quantizerType = option.key as VectorIndex["quantizerType"];
+    const quantizerType = option.key as VectorIndex["quantizerType"];
+    vectorEmbeddings[index].quantizerType = quantizerType;
+    if (!supportsQuantizationByteSize(quantizerType)) {
+      vectorEmbeddings[index].quantizationByteSize = undefined;
+    }
     setVectorEmbeddingPolicyData(vectorEmbeddings);
   };
 
@@ -434,30 +445,6 @@ export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddin
                         onVectorEmbeddingIndexTypeChange(index, option)
                       }
                     ></Dropdown>
-                    <Stack style={{ marginLeft: "10px" }}>
-                      <Label
-                        disabled={
-                          isExistingPolicy(vectorEmbeddingPolicy) ||
-                          !supportsQuantization(vectorEmbeddingPolicy.indexType)
-                        }
-                        styles={labelStyles}
-                      >
-                        {t(Keys.controls.vectorEmbeddingPolicies.quantizationByteSize)}
-                        <InfoTooltip>{getQuantizationByteSizeTooltipContent()}</InfoTooltip>
-                      </Label>
-                      <TextField
-                        disabled={
-                          isExistingPolicy(vectorEmbeddingPolicy) ||
-                          !supportsQuantization(vectorEmbeddingPolicy.indexType)
-                        }
-                        id={`vector-policy-quantizationByteSize-${index + 1}`}
-                        styles={textFieldStyles}
-                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                          onQuantizationByteSizeChange(index, event)
-                        }
-                      />
-                    </Stack>
                     <Stack style={{ marginLeft: "10px" }}>
                       <Label
                         disabled={
@@ -483,6 +470,32 @@ export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddin
                         }
                       />
                     </Stack>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label
+                        disabled={
+                          isExistingPolicy(vectorEmbeddingPolicy) ||
+                          !supportsQuantization(vectorEmbeddingPolicy.indexType) ||
+                          !supportsQuantizationByteSize(vectorEmbeddingPolicy.quantizerType)
+                        }
+                        styles={labelStyles}
+                      >
+                        {t(Keys.controls.vectorEmbeddingPolicies.quantizationByteSize)}
+                        <InfoTooltip>{getQuantizationByteSizeTooltipContent()}</InfoTooltip>
+                      </Label>
+                      <TextField
+                        disabled={
+                          isExistingPolicy(vectorEmbeddingPolicy) ||
+                          !supportsQuantization(vectorEmbeddingPolicy.indexType) ||
+                          !supportsQuantizationByteSize(vectorEmbeddingPolicy.quantizerType)
+                        }
+                        id={`vector-policy-quantizationByteSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onQuantizationByteSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
                     <Stack style={{ marginLeft: "10px" }}>
                       <Label
                         disabled={

src/Explorer/Controls/VectorSearch/VectorSearchUtils.ts

@@ -16,6 +16,9 @@ export const getQuantizerTypeOptions = (): IDropdownOption[] => [
 export const supportsQuantization = (indexType: VectorIndex["type"] | "none" | undefined): boolean =>
   indexType === "quantizedFlat" || indexType === "diskANN";
 
+export const supportsQuantizationByteSize = (quantizerType: VectorIndex["quantizerType"] | undefined): boolean =>
+  quantizerType === "product";
+
 function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
   return literals.map((value) => ({
     key: value,