[ML] DF Analytics: create classification jobs results view #52584

alvarezmelissa87 · 2019-12-09T23:36:45Z

Summary

NOTE: This will need to be updated to account for changes to the _evaluate endpoint introduced in elastic/ml-cpp#877 in which the .keyword suffix will no longer be needed for boolean or integer dependent variable fields. Once the ES build contains the change I'll be able to test it.
Added this to the meta issue to do in a follow-up: #51310
cc @peteharverson, @walterra

Related meta issue: #51310

enables View link in Analytics jobs list for classification jobs
results view displays confusion matrix result from _evaluate endpoint
results view displays a table containing data from the classification job destination index.
- filter by training/testing data
- can select additional columns
- can change sort order of columns
- can search the contents of the table - a search fetches another 1000 records

cell popover content reveals how the normalized value was calculated

_evaluate endpoint is rerun with search queries executed in the results table

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~- [ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

~~- [ ] This was checked for breaking API changes and was labeled appropriately~~
~~- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately~~

elasticmachine · 2019-12-09T23:36:48Z

Pinging @elastic/ml-ui (:ml)

walterra

Great update! I added some suggestions/questions mainly about types.

@walterra - thanks for taking a look! All type updates added here: f5bb0a7

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/common/analytics.ts

walterra · 2019-12-10T14:37:28Z

..._analytics/pages/analytics_exploration/components/classification_exploration/column_data.tsx

+    });
+  });
+
+  const columns: any = [


Could possibly be EuiDataGridColumn[] from https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

walterra · 2019-12-10T14:39:49Z

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

+  const [confusionMatrixData, setConfusionMatrixData] = useState<
+    ClassificationEvaluateResponse['classification']['multiclass_confusion_matrix']['confusion_matrix']
+  >([]);
+  const [columns, setColumns] = useState<any>([]);


Could use EuiDataGridColumn[] from https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts

walterra · 2019-12-10T14:43:45Z

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

+        },
+      });
+    }
+  }, [confusionMatrixData]);


To do a deep equal, maybe JSON.stringify(confusionMatrixData) is worth doing here similar to JSON.stringify(searchQuery) further down.

...nalytics/pages/analytics_exploration/components/classification_exploration/results_table.tsx

sophiec20 · 2019-12-10T14:57:35Z

Feedback on look and feel of the confusion matrix (but I don't think this should prevent the merge as it can be a follow up).

Using the full width for the confusion matrix table makes it hard to read for wide screens. It is useful to be able to compare adjacent row and column values. When stretched across the page, this becomes more difficult.

walterra · 2019-12-10T15:08:25Z

When resizing one of the confusion matrix columns, the data grid expands beyond the page width, this also then affects the results table below:

Might be related to this data grid issue: elastic/eui#2618

When resizing the page, the confusion matrix data grid also doesn't update it's width.

@walterra - looks like it is related to the data grid issue you linked above. I've added a fix for the column resize affecting the results table. I've set the evalute panel width to the results table width - this prevents the data grid resizing from affecting the results table and ensures the evalute panel has a fixed width (f0a909d)

The data grid ignoring the parent width issue is still seen but I'll do a bit more digging on that.

walterra · 2019-12-10T15:20:54Z

When clicking on the popover button of a cell in the confusion matrix, I'm getting this in the console:

Not sure if we're using EuiDataGrid not in the right way or if it's a bug with EuiDataGrid. When wrapping the setCellProps call in setTimeout the error doesn't trigger.

Heya @walterra - looks like this was being caused due to the setCellProps being called directly instead of from a lifecycle method. Fix is to wrap it in a useEffect as the renderCellValue is treated as a functional component behind the scenes. Fixed here: bf48412

walterra · 2019-12-10T15:29:30Z

The first time I run a search in the results table, I get this error in the console related to EuiDataGrid:

Looks like the same issue described above with calling setCellProps. When I used the setTimeout workaround I get this error though:

walterra · 2019-12-10T15:33:26Z

With some searches I end up with an empty page and errors like this:

It doesn't happen with every type of search. For example, note that the search worked with e.g. currency:EUR from the previous comment. The sceenshot was taken when I searched for customer_id:44 on a job based on the kibana ecommerce dataset.

@walterra - nice catch! This was occurring because there was an assumption that there would always be a correct class and incorrect class predicted. In some cases there is only the correctly predicted class in the confusion matrix. I've updated to check for that here 81e4b50

..._analytics/pages/analytics_exploration/components/classification_exploration/column_data.tsx

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/common/analytics.ts

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

alvarezmelissa87 · 2019-12-11T21:24:56Z

retest

walterra · 2019-12-12T08:40:31Z

Regarding setCellProps/useEffect: Linting complains that is doesn't recognize renderCellValue as a React component. If I change renderCellValue to the following linting doesn't complain anymore:

  const CellValue: FC<{
    rowIndex: number;
    columnId: string;
    setCellProps: any;
  }> = ({ rowIndex, columnId, setCellProps }) => {
    const cellValue = columnsData[rowIndex][columnId];
    useEffect(() => {
      setCellProps({
        style: {
          backgroundColor: `rgba(0, 179, 164, ${cellValue})`,
        },
      });
    }, [cellValue, setCellProps]);
    return (
      <span>{typeof cellValue === 'number' ? `${Math.round(cellValue * 100)}%` : cellValue}</span>
    );
  };

walterra

Latest changes LGTM, just added a suggestion above regarding the linting problem with useEffect().

peteharverson

Tested latest changes and all LGTM.

I prefer the confusion matrix not going full width. Looks better as the table only has the two columns.

…ove unused translation

…Effect

elasticmachine · 2019-12-12T18:04:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: a134796

History

💚 Build #14966 succeeded c78a293
💚 Build #14948 succeeded c78a293
💚 Build #14913 succeeded 55ae0f3
💚 Build #14857 succeeded 55728ea
💚 Build #14705 succeeded f0a909d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…2584) * wip: create classification results page + table and evaluate panel * enable view link for classification jobs * wip: fetch classification eval data * wip: display confusion matrix in datagrid * evaluate panel: add heatmap for cells and doc count * Update use of loadEvalData in expanded row component * Add metric type for evaluate endpoint and fix localization error * handle no incorrect prediction classes case for confusion matrix. remove unused translation * setCellProps needs to be called from a lifecycle method - wrap in useEffect * TypeScript improvements * fix datagrid column resize affecting results table * allow custom prediction field for classification jobs * ensure values are rounded correctly and add tooltip * temp workaroun for datagrid width issues

…52941) * wip: create classification results page + table and evaluate panel * enable view link for classification jobs * wip: fetch classification eval data * wip: display confusion matrix in datagrid * evaluate panel: add heatmap for cells and doc count * Update use of loadEvalData in expanded row component * Add metric type for evaluate endpoint and fix localization error * handle no incorrect prediction classes case for confusion matrix. remove unused translation * setCellProps needs to be called from a lifecycle method - wrap in useEffect * TypeScript improvements * fix datagrid column resize affecting results table * allow custom prediction field for classification jobs * ensure values are rounded correctly and add tooltip * temp workaroun for datagrid width issues

…2584) * wip: create classification results page + table and evaluate panel * enable view link for classification jobs * wip: fetch classification eval data * wip: display confusion matrix in datagrid * evaluate panel: add heatmap for cells and doc count * Update use of loadEvalData in expanded row component * Add metric type for evaluate endpoint and fix localization error * handle no incorrect prediction classes case for confusion matrix. remove unused translation * setCellProps needs to be called from a lifecycle method - wrap in useEffect * TypeScript improvements * fix datagrid column resize affecting results table * allow custom prediction field for classification jobs * ensure values are rounded correctly and add tooltip * temp workaroun for datagrid width issues

alvarezmelissa87 added release_note:enhancement :ml v8.0.0 Feature:Data Frame Analytics ML data frame analytics features v7.6.0 labels Dec 9, 2019

alvarezmelissa87 requested review from a team as code owners December 9, 2019 23:36

alvarezmelissa87 self-assigned this Dec 9, 2019

alvarezmelissa87 mentioned this pull request Dec 10, 2019

[ML] Meta - Classification UI #51310

Closed

22 tasks

alvarezmelissa87 requested review from peteharverson and walterra December 10, 2019 01:51

walterra reviewed Dec 10, 2019

View reviewed changes

peteharverson reviewed Dec 11, 2019

View reviewed changes

..._analytics/pages/analytics_exploration/components/classification_exploration/column_data.tsx Show resolved Hide resolved

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx Show resolved Hide resolved

peteharverson reviewed Dec 11, 2019

View reviewed changes

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/common/analytics.ts Show resolved Hide resolved

peteharverson reviewed Dec 11, 2019

View reviewed changes

...alytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx Outdated Show resolved Hide resolved

walterra approved these changes Dec 12, 2019

View reviewed changes

peteharverson approved these changes Dec 12, 2019

View reviewed changes

alvarezmelissa87 added 5 commits December 12, 2019 09:37

wip: create classification results page + table and evaluate panel

1bc03c3

enable view link for classification jobs

0f9dd7f

wip: fetch classification eval data

57f544c

wip: display confusion matrix in datagrid

bca4add

evaluate panel: add heatmap for cells and doc count

aca2333

alvarezmelissa87 added 9 commits December 12, 2019 09:37

Update use of loadEvalData in expanded row component

3c4ac9e

Add metric type for evaluate endpoint and fix localization error

91dc002

handle no incorrect prediction classes case for confusion matrix. rem…

f8dbb28

…ove unused translation

setCellProps needs to be called from a lifecycle method - wrap in use…

9dac653

…Effect

TypeScript improvements

4aedf06

fix datagrid column resize affecting results table

1c76d25

allow custom prediction field for classification jobs

cd469ed

ensure values are rounded correctly and add tooltip

e24a0df

temp workaroun for datagrid width issues

a134796

alvarezmelissa87 force-pushed the ml-classifications-results branch from c78a293 to a134796 Compare December 12, 2019 16:43

alvarezmelissa87 merged commit 0cd5bb0 into elastic:master Dec 12, 2019

alvarezmelissa87 mentioned this pull request Dec 12, 2019

[7.x] [ML] DF Analytics: create classification jobs results view (#52584) #52941

Merged

alvarezmelissa87 deleted the ml-classifications-results branch December 12, 2019 19:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] DF Analytics: create classification jobs results view #52584

[ML] DF Analytics: create classification jobs results view #52584

alvarezmelissa87 commented Dec 9, 2019 •

edited

Loading

elasticmachine commented Dec 9, 2019

walterra left a comment •

edited by alvarezmelissa87

Loading

walterra Dec 10, 2019

walterra Dec 10, 2019

walterra Dec 10, 2019

sophiec20 commented Dec 10, 2019 •

edited

Loading

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading

walterra commented Dec 10, 2019

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading

alvarezmelissa87 commented Dec 11, 2019

walterra commented Dec 12, 2019

walterra left a comment

peteharverson left a comment

elasticmachine commented Dec 12, 2019

[ML] DF Analytics: create classification jobs results view #52584

[ML] DF Analytics: create classification jobs results view #52584

Conversation

alvarezmelissa87 commented Dec 9, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Dec 9, 2019

walterra left a comment • edited by alvarezmelissa87 Loading

Choose a reason for hiding this comment

walterra Dec 10, 2019

Choose a reason for hiding this comment

walterra Dec 10, 2019

Choose a reason for hiding this comment

walterra Dec 10, 2019

Choose a reason for hiding this comment

sophiec20 commented Dec 10, 2019 • edited Loading

walterra commented Dec 10, 2019 • edited by alvarezmelissa87 Loading

walterra commented Dec 10, 2019 • edited by alvarezmelissa87 Loading

walterra commented Dec 10, 2019

walterra commented Dec 10, 2019 • edited by alvarezmelissa87 Loading

alvarezmelissa87 commented Dec 11, 2019

walterra commented Dec 12, 2019

walterra left a comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 12, 2019

💚 Build Succeeded

History

alvarezmelissa87 commented Dec 9, 2019 •

edited

Loading

walterra left a comment •

edited by alvarezmelissa87

Loading

sophiec20 commented Dec 10, 2019 •

edited

Loading

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading

walterra commented Dec 10, 2019 •

edited by alvarezmelissa87

Loading