[ML] Data Frame Analytics Wizard: ensure includes updated correctly on dependent variable change (#116381)

* ensure included fields not overwritten + reduce unnecessary renders.

* ensure editor validation works

* ensure depVar always in includes

* ensure selected runtimeField depVar option is shown
This commit is contained in:
Melissa Alvarez 2021-10-29 13:48:42 -04:00 committed by GitHub
parent 4492a107bd
commit 40fd867b65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 176 additions and 161 deletions

View file

@ -7,6 +7,7 @@
import React, { FC, Fragment, useEffect, useState } from 'react';
import { EuiCallOut, EuiFormRow, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
import { isEqual } from 'lodash';
// @ts-ignore no declaration
import { LEFT_ALIGNMENT, CENTER_ALIGNMENT, SortableProperties } from '@elastic/eui/lib/services';
import { i18n } from '@kbn/i18n';
@ -90,7 +91,8 @@ export const AnalysisFieldsTable: FC<{
tableItems: FieldSelectionItem[];
unsupportedFieldsError?: string;
setUnsupportedFieldsError: React.Dispatch<React.SetStateAction<any>>;
}> = ({
}> = React.memo(
({
dependentVariable,
includes,
setFormState,
@ -99,7 +101,7 @@ export const AnalysisFieldsTable: FC<{
tableItems,
unsupportedFieldsError,
setUnsupportedFieldsError,
}) => {
}) => {
const [sortableProperties, setSortableProperties] = useState();
const [currentPaginationData, setCurrentPaginationData] = useState<{
pageIndex: number;
@ -116,7 +118,12 @@ export const AnalysisFieldsTable: FC<{
});
setFormState({ includes: includedFields });
} else if (includes.length > 0) {
setFormState({ includes });
setFormState({
includes:
dependentVariable && includes.includes(dependentVariable)
? includes
: [...includes, dependentVariable],
});
}
setMinimumFieldsRequiredMessage(undefined);
}, [tableItems]);
@ -253,4 +260,13 @@ export const AnalysisFieldsTable: FC<{
<EuiSpacer />
</Fragment>
);
};
},
(prevProps, nextProps) => {
return (
prevProps.dependentVariable === nextProps.dependentVariable &&
isEqual(prevProps.includes, nextProps.includes) &&
isEqual(prevProps.tableItems, nextProps.tableItems) &&
prevProps.unsupportedFieldsError === nextProps.unsupportedFieldsError
);
}
);

View file

@ -88,7 +88,6 @@ function getRuntimeDepVarOptions(jobType: AnalyticsJobType, runtimeMappings: Run
if (isRuntimeField(field) && shouldAddAsDepVarOption(id, field.type, jobType)) {
runtimeOptions.push({
label: id,
key: `runtime_mapping_${id}`,
});
}
});

View file

@ -144,7 +144,7 @@ export const validateNumTopFeatureImportanceValues = (
};
export const validateAdvancedEditor = (state: State): State => {
const { jobIdEmpty, jobIdValid, jobIdExists, jobType, createIndexPattern, includes } = state.form;
const { jobIdEmpty, jobIdValid, jobIdExists, jobType, createIndexPattern } = state.form;
const { jobConfig } = state;
state.advancedEditorMessages = [];
@ -160,6 +160,8 @@ export const validateAdvancedEditor = (state: State): State => {
const destinationIndexPatternTitleExists =
state.indexPatternsMap[destinationIndexName] !== undefined;
const analyzedFields = jobConfig?.analyzed_fields?.includes || [];
const resultsFieldEmptyString =
typeof jobConfig?.dest?.results_field === 'string' &&
jobConfig?.dest?.results_field.trim() === '';
@ -189,12 +191,10 @@ export const validateAdvancedEditor = (state: State): State => {
) {
const dependentVariableName = getDependentVar(jobConfig.analysis) || '';
dependentVariableEmpty = dependentVariableName === '';
if (
!dependentVariableEmpty &&
includes !== undefined &&
includes.length > 0 &&
!includes.includes(dependentVariableName)
analyzedFields.length > 0 &&
!analyzedFields.includes(dependentVariableName)
) {
includesValid = false;