Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Add UI test for feature importance features #82677

Merged
merged 21 commits into from
Nov 17, 2020
Merged

[ML] Add UI test for feature importance features #82677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
d13ce49
[ML] Add UI test for total feature importance
qn895 Nov 5, 2020
110716b
[ML] Add check for decision path popover
qn895 Nov 5, 2020
2d83ab0
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 5, 2020
bb94753
[ML] Add check for decision path popover
qn895 Nov 5, 2020
3327bd5
[ML] Update descriptions
qn895 Nov 6, 2020
f8f982a
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 6, 2020
a2e631c
[ML] Update assertFeatureImportanceDecisionPathChartElementsExists
qn895 Nov 9, 2020
87def60
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 9, 2020
1294adc
[ML] Move job creation to the beginning
qn895 Nov 10, 2020
02d9e21
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 10, 2020
9f53804
[ML] Update training percentage to be higher
qn895 Nov 10, 2020
4875f5e
[ML] Update translations
qn895 Nov 11, 2020
eedd25a
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 11, 2020
b370025
[ML] Update trianing % to be 50%
qn895 Nov 11, 2020
8dd8191
[ML] Update training percentage 35%
qn895 Nov 11, 2020
006cf46
[ML] Fix performance issue with annotation/renderFocusChart on SMV
qn895 Nov 11, 2020
a73a162
[ML] Change to different job config and keep at 35%
qn895 Nov 12, 2020
94dbd2b
Merge remote-tracking branch 'upstream/master' into ml-feature-import…
qn895 Nov 12, 2020
442475d
Merge branch 'master' into ml-feature-importance-functional-tests
kibanamachine Nov 16, 2020
6549088
Merge branch 'master' into ml-feature-importance-functional-tests
kibanamachine Nov 16, 2020
1f04c2d
Merge branch 'master' into ml-feature-importance-functional-tests
kibanamachine Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 52 additions & 50 deletions ...ins/ml/public/application/components/data_grid/feature_importance/decision_path_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,57 +116,59 @@ export const DecisionPathChart = ({
const tickFormatter = useCallback((d) => formatSingleValue(d, '').toString(), []);

return (
<Chart
size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }}
>
<Settings theme={theme} rotation={90} />
{baselineData && (
<LineAnnotation
id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"
domainType={AnnotationDomainTypes.YDomain}
dataValues={baselineData}
style={baselineStyle}
marker={AnnotationBaselineMarker}
/>
)}

<Axis
id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxis'}
tickFormat={tickFormatter}
title={i18n.translate(
'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxisTitle',
{
defaultMessage: "Prediction for '{predictionFieldName}'",
values: { predictionFieldName },
}
<div data-test-subj="mlDFADecisionPathChart">
<Chart
size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }}
>
<Settings theme={theme} rotation={90} />
{baselineData && (
<LineAnnotation
id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"
domainType={AnnotationDomainTypes.YDomain}
dataValues={baselineData}
style={baselineStyle}
marker={AnnotationBaselineMarker}
/>
)}
showGridLines={false}
position={Position.Top}
showOverlappingTicks
domain={
minDomain && maxDomain
? {
min: minDomain,
max: maxDomain,
}
: undefined
}
/>
<Axis showGridLines={true} id="left" position={Position.Left} />
<LineSeries
id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathLine'}
name={i18n.translate(
'xpack.ml.dataframe.analytics.explorationResults.decisionPathLineTitle',
{
defaultMessage: 'Prediction',

<Axis
id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxis'}
tickFormat={tickFormatter}
title={i18n.translate(
'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxisTitle',
{
defaultMessage: "Prediction for '{predictionFieldName}'",
values: { predictionFieldName },
}
)}
showGridLines={false}
position={Position.Top}
showOverlappingTicks
domain={
minDomain && maxDomain
? {
min: minDomain,
max: maxDomain,
}
: undefined
}
)}
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[2]}
data={decisionPathData}
/>
</Chart>
/>
<Axis showGridLines={true} id="left" position={Position.Left} />
<LineSeries
id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathLine'}
name={i18n.translate(
'xpack.ml.dataframe.analytics.explorationResults.decisionPathLineTitle',
{
defaultMessage: 'Prediction',
}
)}
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[2]}
data={decisionPathData}
/>
</Chart>
</div>
);
};
1 change: 1 addition & 0 deletions ...blic/application/components/data_grid/feature_importance/decision_path_classification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export const ClassificationDecisionPath: FC<ClassificationDecisionPathProps> = (
</EuiTitle>
{options !== undefined && (
<EuiSuperSelect
data-test-subj="mlDFADecisionPathClassNameSelect"
compressed={true}
options={options}
valueOfSelected={currentClass}
Expand Down
5 changes: 3 additions & 2 deletions ...s/ml/public/application/components/data_grid/feature_importance/decision_path_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,12 @@ export const DecisionPathPopover: FC<DecisionPathPopoverProps> = ({
];

return (
<>
<div data-test-subj="mlDFADecisionPathPopover">
<div style={{ display: 'flex', width: 300 }}>
<EuiTabs size={'s'}>
{tabs.map((tab) => (
<EuiTab
data-test-subj={`mlDFADecisionPathPopoverTab-${tab.id}`}
isSelected={tab.id === selectedTabId}
onClick={() => setSelectedTabId(tab.id)}
key={tab.id}
Expand Down Expand Up @@ -146,6 +147,6 @@ export const DecisionPathPopover: FC<DecisionPathPopoverProps> = ({
{selectedTabId === DECISION_PATH_TABS.JSON && (
<DecisionPathJSONViewer featureImportance={featureImportance} />
)}
</>
</div>
);
};
58 changes: 31 additions & 27 deletions ...cs_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
) {
return (
<EuiCallOut
data-test-subj="mlTotalFeatureImportanceNotCalculatedCallout"
size="s"
title={
<FormattedMessage
Expand All @@ -223,6 +224,7 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
// or is it because the data is uniform
return (
<EuiCallOut
data-test-subj="mlNoTotalFeatureImportanceCallout"
size="s"
title={
<FormattedMessage
Expand Down Expand Up @@ -272,34 +274,36 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
noDataCallOut ? (
noDataCallOut
) : (
<Chart
size={{
width: '100%',
height: chartHeight,
}}
>
<Settings rotation={90} theme={theme} showLegend={showLegend} />
<div data-test-subj="mlTotalFeatureImportanceChart">
<Chart
size={{
width: '100%',
height: chartHeight,
}}
>
<Settings rotation={90} theme={theme} showLegend={showLegend} />

<Axis
id="x-axis"
title={i18n.translate(
'xpack.ml.dataframe.analytics.exploration.featureImportanceXAxisTitle',
{
defaultMessage: 'Feature importance average magnitude',
}
)}
position={Position.Bottom}
tickFormat={tickFormatter}
/>
<Axis id="y-axis" title="" position={Position.Left} />
<BarSeries
id="magnitude"
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
data={plotData}
{...barSeriesSpec}
/>
</Chart>
<Axis
id="x-axis"
title={i18n.translate(
'xpack.ml.dataframe.analytics.exploration.featureImportanceXAxisTitle',
{
defaultMessage: 'Feature importance average magnitude',
}
)}
position={Position.Bottom}
tickFormat={tickFormatter}
/>
<Axis id="y-axis" title="" position={Position.Left} />
<BarSeries
id="magnitude"
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
data={plotData}
{...barSeriesSpec}
/>
</Chart>
</div>
)
}
/>
Expand Down
12 changes: 11 additions & 1 deletion .../ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
unhighlightFocusChartAnnotation,
ANNOTATION_MIN_WIDTH,
} from './timeseries_chart_annotations';
import { distinctUntilChanged } from 'rxjs/operators';

const focusZoomPanelHeight = 25;
const focusChartHeight = 310;
Expand Down Expand Up @@ -570,6 +571,7 @@ class TimeseriesChartIntl extends Component {
}

renderFocusChart() {
console.log('renderFocusChart');
const {
focusAggregationInterval,
focusAnnotationData: focusAnnotationDataOriginalPropValue,
Expand Down Expand Up @@ -1798,7 +1800,15 @@ class TimeseriesChartIntl extends Component {
}

export const TimeseriesChart = (props) => {
const annotationProp = useObservable(annotation$);
const annotationProp = useObservable(
annotation$.pipe(
distinctUntilChanged((prev, curr) => {
// prevent re-rendering
return prev !== null && curr !== null;
})
)
);

if (annotationProp === undefined) {
return null;
}
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,7 @@ export class TimeSeriesExplorer extends React.Component {
this.previousShowForecast = showForecast;
this.previousShowModelBounds = showModelBounds;

console.log('Timeseriesexplorer rerendered');
return (
<TimeSeriesExplorerPage dateFormatTz={dateFormatTz} resizeRef={this.resizeRef}>
{fieldNamesWithEmptyValues.length > 0 && (
Expand Down
Loading