Increase category field limit from 2 to 5 for time series splitting

Signed-off-by: Siddhartha Bingi <sidbingi@amazon.com>

Author: Siddhartha Bingi

public/pages/ConfigureModel/components/CategoryField/CategoryField.module.scss

@@ -0,0 +1,14 @@
+.categoryFieldComboBox {
+  // Ensure the combo box can handle multiple selections
+  .euiComboBoxPill {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .euiComboBox__inputWrap {
+    max-height: 150px; // Adjust height to accommodate more selections
+    overflow-y: auto;
+  }
+}

public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx

@@ -33,6 +33,7 @@ import {
   validateCategoryField,
 } from '../../../../utils/utils';
 import { ModelConfigurationFormikValues } from '../../models/interfaces';
+import './CategoryField.module.scss';
 
 interface CategoryFieldProps {
   isEdit: boolean;
@@ -74,7 +75,7 @@ export function CategoryField(props: CategoryFieldProps) {
           style={{ lineHeight: 'normal' }}
         >
           Split a single time series into multiple time series based on
-          categorical fields. You can select up to 2.{' '}
+          categorical fields. You can select up to 5.{' '}
           <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
             Learn more
           </EuiLink>
@@ -155,7 +156,7 @@ export function CategoryField(props: CategoryFieldProps) {
                     onChange={(options) => {
                       const selection = options.map((option) => option.label);
                       if (!isEmpty(selection)) {
-                        if (selection.length <= 2) {
+                        if (selection.length <= 5) {
                           form.setFieldValue('categoryField', selection);
                         }
                       } else {