[ML] DF Analytics: Collapsable sections on results pages #76641

walterra · 2020-09-03T14:45:19Z

Summary

Fixes cell color coding based on influence score for outlier detection results page data grid. (Part of [ML] Dataframe Analytics: Update feature_influence format #77046)
Introduces expandable sections (<ExpandableSection />). In contrast to plain accordions, the main idea of this component is that it should also provide some sort of useful summary when collapsed instead of just being an expandable title. For example, the "Analysis" section is collapsed by default, but still offers information like analysis type, source and destination index. This concept should allow us to keep the analytics results pages usable with more content (additional results, evaluations, visualizations) being added over time.
The "Analysis" section is a reuse of the expandable row from the analytics jobs list. Some design adjustments have been made to make it usable in both places.
This PR updates the outlier detection results page. Regression and Classification will be done in follow-ups.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility
This was checked for breaking API changes and was labeled appropriately

alvarezmelissa87 · 2020-09-10T14:09:39Z

Design looks great! 🙌 Happy to have you push on with this @walterra. 🎉 Excited for the new layout!
The evaluate panel for regression/classification can be a separate, collapsed section (initially) as well. 🤔

elasticmachine · 2020-09-30T15:15:00Z

Pinging @elastic/ml-ui (:ml)

peteharverson

This works well! Just left a couple of comments.

peteharverson · 2020-10-01T10:54:05Z

...analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

+              expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
+          </>
+        }
+        headerContent={


Might be worth adding description into the collapsed header (if it is non-blank), especially as there is normally a lot of available space in this section.

Good suggestion, I revisit it in the follow up that will also add the same section to regression and classification results pages.

peteharverson · 2020-10-01T10:58:57Z

...analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

-                    {
-                      defaultMessage: 'Feature influence score',
-                    }
+            <ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} />


Did you consider moving the query bar below the Analysis section? I can't decide where it fits best - on the one hand most views place the query bar at the top, but on the other hand the query bar would sit well directly above the panels on which it has an effect (in this view just the result table for now).

I thought about it during design phase and had a look at other plugin/kibana pages, most have them at the very top, even if some sections below it might not be in complete context of the search bar. There are also other plugins that keep the search bar pinned at the top when you scroll down the page which is an idea I'd like to explore but seemed overkill for this iteration. With these considerations I went for having it at the top for this PR.

qn895 · 2020-10-01T14:29:48Z

...analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

+      checkpointing: {},
+      config,
+      id: config.id,
+      job_type: Object.keys(config.analysis)[0] as DataFrameAnalysisConfigType,


Suggestion to use getAnalysisType here

Fixed in 819cf7d.

qn895 · 2020-10-01T14:37:05Z

Loving the new changes to this page. Code LGTM! Just left a minor suggestion.

alvarezmelissa87 · 2020-10-01T15:21:46Z

...e_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx

+  };
+
+  return (
+    <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">


Is this data-test-subject accurate?

Good catch! Fixed in 486511a. ExpandableSection now takes in an ID to create a dynamic data-test-subj.

alvarezmelissa87 · 2020-10-01T15:23:11Z

...analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

@@ -55,57 +69,182 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
    jobConfig !== undefined ? getFeatureCount(jobConfig.dest.results_field, tableItems) : 1
  );

+  const [expandedRowItem, setExpandedRowItem] = useState<DataFrameAnalyticsListRow | undefined>(
+    undefined


No need to pass undefined explicitly here, I don't think.

Fixed in b228018.

alvarezmelissa87 · 2020-10-01T15:26:51Z

...analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

+              expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
+          </>
+        }
+        headerContent={


Nit: Might be worth breaking out the headerContent into a separate component to keep this cleaner.

Good suggestion, refactored in 819cf7d.

…apsable-sections

alvarezmelissa87

Left a couple of small suggestions but other than that LGTM ⚡

kibanamachine · 2020-10-01T18:07:22Z

💚 Build Succeeded

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

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`ml`	1186	1215	+29

async chunks size

id	before	after	diff
`ml`	10.5MB	10.5MB	+43.2KB

History

💚 Build #78617 succeeded f6da6ed
💔 Build #78326 failed 583aef1
💔 Build #78300 failed d5d692b
💔 Build #77861 failed cdd66b4
💔 Build #72893 failed 32d1e0923aee2a7a27ce56ec111ee7bf1cd361b1

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

- Fixes cell color coding based on influence score for outlier detection results page data grid. (Part of elastic#77046) - Introduces expandable sections (<ExpandableSection />). In contrast to plain accordions, the main idea of this component is that it should also provide some sort of useful summary when collapsed instead of just being an expandable title. For example, the "Analysis" section is collapsed by default, but still offers information like analysis type, source and destination index. This concept should allow us to keep the analytics results pages usable with more content (additional results, evaluations, visualizations) being added over time. - The "Analysis" section is a reuse of the expandable row from the analytics jobs list. Some design adjustments have been made to make it usable in both places.

…aly-detection-partition-field * 'master' of github.com:elastic/kibana: (76 commits) Fix z-index of KQL Suggestions dropdown (elastic#79184) [babel] remove unused/unneeded babel plugins (elastic#79173) [Search] Fix timeout upgrade link (elastic#79045) Always Show Embeddable Panel Header in Edit Mode (elastic#79152) [Ingest]: add more test for transform index (elastic#79154) [ML] DF Analytics: Collapsable sections on results pages (elastic#76641) [Fleet] Fix agent policy change action migration (elastic#79046) [Ingest Manager] Match package spec `dataset`->`data_stream` and `config_templates`->`policy_templates` renaming (elastic#78699) Revert "[Metrics UI] Add ability to override datafeeds and job config for partition field (elastic#78875)" [ML] Update transform cloning to include description and new fields (elastic#78364) chore(NA): remove non existing plugin paths from case api integration tests (elastic#79127) [Ingest Manager] Ensure we trigger agent policy updated event when we bump revision. (elastic#78836) [Metrics UI] Display No Data context.values as [NO DATA] (elastic#78038) [Monitoring] Missing data alert (elastic#78208) [Lens] Fix embeddable title and description for reporting and dashboard tooltip (elastic#78767) [Lens] Consistent Drag and Drop styles (elastic#78674) [ML] Model management UI fixes and enhancements (elastic#79072) [Metrics UI] Add ability to override datafeeds and job config for partition field (elastic#78875) [Security Solution]Fix basepath used by endpoint telemetry tests (elastic#79027) update rum agent version which contains longtasks (elastic#79105) ...

…9188) - Fixes cell color coding based on influence score for outlier detection results page data grid. (Part of #77046) - Introduces expandable sections (<ExpandableSection />). In contrast to plain accordions, the main idea of this component is that it should also provide some sort of useful summary when collapsed instead of just being an expandable title. For example, the "Analysis" section is collapsed by default, but still offers information like analysis type, source and destination index. This concept should allow us to keep the analytics results pages usable with more content (additional results, evaluations, visualizations) being added over time. - The "Analysis" section is a reuse of the expandable row from the analytics jobs list. Some design adjustments have been made to make it usable in both places.

walterra self-assigned this Sep 17, 2020

walterra added :ml Feature:Data Frame Analytics ML data frame analytics features v7.10.0 release_note:enhancement labels Sep 17, 2020

walterra added 3 commits September 29, 2020 14:55

[ML] Accordion based outlier detection results page.

7fb7183

[ML] Collapsable sections.

13872ee

[ML] button groups

cdd66b4

walterra force-pushed the ml-analytics-collapsable-sections branch from 32d1e09 to cdd66b4 Compare September 29, 2020 13:41

walterra added 3 commits September 30, 2020 15:42

[ML] Cleanup, layout fixes, making dummy values dynamic. i18n.

fddf9c9

[ML] ExpandableSection component.

d5d692b

[ML] Fix cell colour coding.

583aef1

walterra marked this pull request as ready for review September 30, 2020 15:14

walterra requested review from a team as code owners September 30, 2020 15:14

walterra requested review from peteharverson, qn895 and alvarezmelissa87 September 30, 2020 15:15

[ML] Fix translations.

f6da6ed

peteharverson reviewed Oct 1, 2020

View reviewed changes

qn895 reviewed Oct 1, 2020

View reviewed changes

qn895 approved these changes Oct 1, 2020

View reviewed changes

alvarezmelissa87 reviewed Oct 1, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/master' into ml-analytics-coll…

7cc2ead

…apsable-sections

alvarezmelissa87 approved these changes Oct 1, 2020

View reviewed changes

walterra added 3 commits October 1, 2020 18:20

[ML] Refactor to improve code structure for expandable section.

819cf7d

[ML] Fix data-test-subj.

486511a

[ML] Remove unnecessary default value.

b228018

walterra mentioned this pull request Oct 1, 2020

[ML] Dataframe Analytics: Update feature_influence format #77046

Closed

2 tasks

walterra merged commit bad6eab into elastic:master Oct 1, 2020

walterra deleted the ml-analytics-collapsable-sections branch October 1, 2020 18:27

walterra mentioned this pull request Oct 1, 2020

[7.x] [ML] DF Analytics: Collapsable sections on results pages (#76641) #79188

Merged

walterra mentioned this pull request Oct 5, 2020

[ML] Data Frame Analytics: Expandable sections for classification and regression #79414

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] DF Analytics: Collapsable sections on results pages #76641

[ML] DF Analytics: Collapsable sections on results pages #76641

walterra commented Sep 3, 2020 •

edited

Loading

alvarezmelissa87 commented Sep 10, 2020 •

edited

Loading

elasticmachine commented Sep 30, 2020

peteharverson left a comment

peteharverson Oct 1, 2020

walterra Oct 1, 2020

peteharverson Oct 1, 2020

walterra Oct 1, 2020

qn895 Oct 1, 2020

walterra Oct 1, 2020

qn895 commented Oct 1, 2020

alvarezmelissa87 Oct 1, 2020

walterra Oct 1, 2020

alvarezmelissa87 Oct 1, 2020

walterra Oct 1, 2020

alvarezmelissa87 Oct 1, 2020

walterra Oct 1, 2020

alvarezmelissa87 left a comment

kibanamachine commented Oct 1, 2020

[ML] DF Analytics: Collapsable sections on results pages #76641

[ML] DF Analytics: Collapsable sections on results pages #76641

Conversation

walterra commented Sep 3, 2020 • edited Loading

Summary

Checklist

alvarezmelissa87 commented Sep 10, 2020 • edited Loading

elasticmachine commented Sep 30, 2020

peteharverson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qn895 commented Oct 1, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alvarezmelissa87 left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 1, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

History

walterra commented Sep 3, 2020 •

edited

Loading

alvarezmelissa87 commented Sep 10, 2020 •

edited

Loading