Skip to content

Commit

Permalink
[ML] Add UI test for feature importance features (elastic#82677)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
@qn895 @kibanamachine
qn895 and kibanamachine committed Nov 17, 2020
1 parent 222cbaa commit e92456c
Show file tree
Hide file tree
Showing 9 changed files with 367 additions and 80 deletions.
102 changes: 52 additions & 50 deletions ...ins/ml/public/application/components/data_grid/feature_importance/decision_path_chart.tsx
View file
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
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
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
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
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
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

0 comments on commit e92456c

Please sign in to comment.