[ML] DF Analytics: Collapsable sections on results pages #76641
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .mlExpandableSection { | ||
| padding: 0 $euiSizeS $euiSizeS $euiSizeS; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import './expandable_section.scss'; | ||
|
|
||
| import React, { useState, FC, ReactNode } from 'react'; | ||
|
|
||
| import { EuiButtonEmpty, EuiPanel } from '@elastic/eui'; | ||
|
|
||
| interface ExpandableSectionProps { | ||
| content: ReactNode; | ||
| headerContent: ReactNode; | ||
| isExpanded?: boolean; | ||
| title: ReactNode; | ||
| } | ||
|
|
||
| export const ExpandableSection: FC<ExpandableSectionProps> = ({ | ||
| headerContent, | ||
| // For now we don't have a need for complete external control | ||
| // and just want to pass in a default value. If we wanted | ||
| // full external control we'd also need to add a onToggleExpanded() | ||
| // callback. | ||
| isExpanded: isExpandedDefault = true, | ||
| content, | ||
| title, | ||
| }) => { | ||
| const [isExpanded, setIsExpanded] = useState(isExpandedDefault); | ||
| const toggleExpanded = () => { | ||
| setIsExpanded(!isExpanded); | ||
| }; | ||
|
|
||
| return ( | ||
| <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel"> | ||
| <div className="mlExpandableSection"> | ||
| <EuiButtonEmpty | ||
| onClick={toggleExpanded} | ||
| iconType={isExpanded ? 'arrowUp' : 'arrowDown'} | ||
| size="l" | ||
| iconSide="right" | ||
| flush="left" | ||
| > | ||
| {title} | ||
| </EuiButtonEmpty> | ||
| {headerContent} | ||
| </div> | ||
| {isExpanded && content} | ||
| </EuiPanel> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| export { ExpandableSection } from './expandable_section'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,11 +4,23 @@ | |
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React, { useEffect, useState, FC } from 'react'; | ||
|
|
||
| import { i18n } from '@kbn/i18n'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
|
|
||
| import { | ||
| EuiBadge, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiHorizontalRule, | ||
| EuiLoadingContent, | ||
| EuiLoadingSpinner, | ||
| EuiSpacer, | ||
| EuiText, | ||
| } from '@elastic/eui'; | ||
|
|
||
| import type { DataFrameAnalysisConfigType } from '../../../../../../../common/types/data_frame_analytics'; | ||
|
|
||
| import { | ||
| useColorRange, | ||
|
|
@@ -19,13 +31,20 @@ import { ColorRangeLegend } from '../../../../../components/color_range_legend'; | |
| import { DataGrid } from '../../../../../components/data_grid'; | ||
| import { SavedSearchQuery } from '../../../../../contexts/ml'; | ||
| import { getToastNotifications } from '../../../../../util/dependency_cache'; | ||
| import { ml } from '../../../../../services/ml_api_service'; | ||
|
|
||
| import { defaultSearchQuery, useResultsViewConfig } from '../../../../common'; | ||
|
|
||
| import { isGetDataFrameAnalyticsStatsResponseOk } from '../../../analytics_management/services/analytics_service/get_analytics'; | ||
|
|
||
| import { | ||
| DataFrameAnalyticsListRow, | ||
| DATA_FRAME_MODE, | ||
| } from '../../../analytics_management/components/analytics_list/common'; | ||
| import { ExpandedRow } from '../../../analytics_management/components/analytics_list/expanded_row'; | ||
|
|
||
| import { ExpandableSection } from '../expandable_section'; | ||
| import { ExplorationQueryBar } from '../exploration_query_bar'; | ||
| import { IndexPatternPrompt } from '../index_pattern_prompt'; | ||
|
|
||
| import { getFeatureCount } from './common'; | ||
|
|
@@ -38,12 +57,7 @@ interface ExplorationProps { | |
| } | ||
|
|
||
| export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) => { | ||
| const { indexPattern, jobConfig, needsDestIndexPattern } = useResultsViewConfig(jobId); | ||
| const [searchQuery, setSearchQuery] = useState<SavedSearchQuery>(defaultSearchQuery); | ||
| const outlierData = useOutlierData(indexPattern, jobConfig, searchQuery); | ||
|
|
||
|
|
@@ -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 | ||
|
There was a problem hiding this comment. No need to pass undefined explicitly here, I don't think. |
||
| ); | ||
|
|
||
| const fetchStats = async () => { | ||
| const analyticsConfigs = await ml.dataFrameAnalytics.getDataFrameAnalytics(jobId); | ||
| const analyticsStats = await ml.dataFrameAnalytics.getDataFrameAnalyticsStats(jobId); | ||
|
|
||
| const config = analyticsConfigs.data_frame_analytics[0]; | ||
| const stats = isGetDataFrameAnalyticsStatsResponseOk(analyticsStats) | ||
| ? analyticsStats.data_frame_analytics[0] | ||
| : undefined; | ||
|
|
||
| if (stats === undefined) { | ||
| return; | ||
| } | ||
|
|
||
| const newExpandedRowItem: DataFrameAnalyticsListRow = { | ||
| checkpointing: {}, | ||
| config, | ||
| id: config.id, | ||
| job_type: Object.keys(config.analysis)[0] as DataFrameAnalysisConfigType, | ||
|
There was a problem hiding this comment. Suggestion to use |
||
| mode: DATA_FRAME_MODE.BATCH, | ||
| state: stats.state, | ||
| stats, | ||
| }; | ||
|
|
||
| setExpandedRowItem(newExpandedRowItem); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| fetchStats(); | ||
| }, [jobConfig?.id]); | ||
|
|
||
| return ( | ||
| <> | ||
| {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) && | ||
| indexPattern !== undefined && ( | ||
| <> | ||
| <ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} /> | ||
|
There was a problem hiding this comment. 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). There was a problem hiding this comment. 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. |
||
| <EuiSpacer size="m" /> | ||
| </> | ||
| )} | ||
|
|
||
| <ExpandableSection | ||
| content={ | ||
| <> | ||
| <EuiHorizontalRule size="full" margin="none" /> | ||
| {expandedRowItem === undefined && ( | ||
| <EuiText textAlign="center"> | ||
| <EuiSpacer size="l" /> | ||
| <EuiLoadingSpinner size="l" /> | ||
| <EuiSpacer size="l" /> | ||
| </EuiText> | ||
| )} | ||
| {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) && | ||
| indexPattern !== undefined && | ||
| jobConfig !== undefined && | ||
| columnsWithCharts.length > 0 && | ||
| tableItems.length > 0 && | ||
| expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />} | ||
| </> | ||
| } | ||
| headerContent={ | ||
|
There was a problem hiding this comment. 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. There was a problem hiding this comment. Good suggestion, I revisit it in the follow up that will also add the same section to regression and classification results pages. There was a problem hiding this comment. Nit: Might be worth breaking out the There was a problem hiding this comment. Good suggestion, refactored in 819cf7d. |
||
| <> | ||
| {expandedRowItem === undefined && <EuiLoadingContent lines={1} />} | ||
| {expandedRowItem !== undefined && ( | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs" color="subdued"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.analysisTypeLabel" | ||
| defaultMessage="Type" | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| <EuiBadge>{expandedRowItem.job_type}</EuiBadge> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs" color="subdued"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.analysisSourceIndexLabel" | ||
| defaultMessage="Source index" | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| <EuiBadge>{expandedRowItem.config.source.index}</EuiBadge> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs" color="subdued"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.analysisDestinationIndexLabel" | ||
| defaultMessage="Destination index" | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| <EuiBadge>{expandedRowItem.config.dest.index}</EuiBadge> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| )} | ||
| </> | ||
| } | ||
| isExpanded={false} | ||
| title={ | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle" | ||
| defaultMessage="Analysis" | ||
| /> | ||
| } | ||
| /> | ||
| <EuiSpacer size="m" /> | ||
| <ExpandableSection | ||
| content={ | ||
| <> | ||
| {jobConfig !== undefined && needsDestIndexPattern && ( | ||
| <IndexPatternPrompt destIndex={jobConfig.dest.index} /> | ||
| )} | ||
| {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) && | ||
| indexPattern !== undefined && ( | ||
| <> | ||
| <EuiSpacer size="s" /> | ||
| {columnsWithCharts.length > 0 && tableItems.length > 0 && ( | ||
| <DataGrid | ||
| {...outlierData} | ||
| dataTestSubj="mlExplorationDataGrid" | ||
| toastNotifications={getToastNotifications()} | ||
| /> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| } | ||
| headerContent={ | ||
| <> | ||
| {(columnsWithCharts.length === 0 || tableItems.length === 0) && ( | ||
| <EuiLoadingContent lines={1} /> | ||
| )} | ||
| {columnsWithCharts.length > 0 && tableItems.length > 0 && ( | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs" color="subdued"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.explorationTableTotalDocsLabel" | ||
| defaultMessage="Total docs" | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| <EuiBadge>{outlierData.rowCount}</EuiBadge> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <ColorRangeLegend | ||
| colorRange={colorRange} | ||
| title={i18n.translate( | ||
| 'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle', | ||
| { | ||
| defaultMessage: 'Feature influence score', | ||
| } | ||
| )} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| )} | ||
| </> | ||
| } | ||
| title={ | ||
| <FormattedMessage | ||
| id="xpack.ml.dataframe.analytics.exploration.explorationTableTitle" | ||
| defaultMessage="Results" | ||
| /> | ||
| } | ||
| /> | ||
| <EuiSpacer size="m" /> | ||
| </> | ||
| ); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this data-test-subject accurate?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! Fixed in 486511a.
ExpandableSectionnow takes in an ID to create a dynamicdata-test-subj.