Skip to content

Commit

Permalink
[ML] ExpandableSection component.
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterra
walterra committed Sep 30, 2020
1 parent fddf9c9 commit d5d692b
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 118 deletions.
2 changes: 1 addition & 1 deletion ...lier_exploration/outlier_exploration.scss → ...xpandable_section/expandable_section.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.mlSectionPanel {
.mlExpandableSection {
padding: 0 $euiSizeS $euiSizeS $euiSizeS;
}
52 changes: 52 additions & 0 deletions ...nalytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
View file
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>
);
};
7 changes: 7 additions & 0 deletions ...n/data_frame_analytics/pages/analytics_exploration/components/expandable_section/index.ts
View file
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';
214 changes: 97 additions & 117 deletions ...lytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/

import './outlier_exploration.scss';

import React, { useEffect, useState, FC } from 'react';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

import {
EuiBadge,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiLoadingContent,
EuiLoadingSpinner,
EuiPanel,
EuiSpacer,
EuiText,
} from '@elastic/eui';
Expand Down Expand Up @@ -47,6 +43,7 @@ import {
} 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';

Expand Down Expand Up @@ -106,16 +103,6 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
fetchStats();
}, [jobConfig?.id]);

const [isExpandedAnalysisDetails, setIsExpandedAnalysisDetails] = useState(false);
const toggleExpandedAnalysisDetails = () => {
setIsExpandedAnalysisDetails(!isExpandedAnalysisDetails);
};

const [isExpandedResultsTable, setIsExpandedResultsTable] = useState(true);
const toggleExpandedResultsTable = () => {
setIsExpandedResultsTable(!isExpandedResultsTable);
};

return (
<>
{(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
Expand All @@ -126,60 +113,8 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
</>
)}

<EuiPanel paddingSize="none">
<div className="mlSectionPanel">
<EuiButtonEmpty
onClick={toggleExpandedAnalysisDetails}
iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
size="l"
iconSide="right"
flush="left"
>
<FormattedMessage
id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle"
defaultMessage="Analysis"
/>
</EuiButtonEmpty>
{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>
)}
</div>
{isExpandedAnalysisDetails && (
<ExpandableSection
content={
<>
<EuiHorizontalRule size="full" margin="none" />
{expandedRowItem === undefined && (
Expand All @@ -196,54 +131,60 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
tableItems.length > 0 &&
expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
</>
)}
</EuiPanel>
}
headerContent={
<>
{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" />
<EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
<div style={{ padding: '10px' }}>
<EuiButtonEmpty
onClick={toggleExpandedResultsTable}
iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
size="l"
iconSide="right"
flush="left"
>
<FormattedMessage
id="xpack.ml.dataframe.analytics.exploration.explorationTableTitle"
defaultMessage="Results"
/>
</EuiButtonEmpty>
{(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>
)}
</div>
{isExpandedResultsTable && (
<ExpandableSection
content={
<>
{jobConfig !== undefined && needsDestIndexPattern && (
<IndexPatternPrompt destIndex={jobConfig.dest.index} />
Expand All @@ -262,8 +203,47 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
</>
)}
</>
)}
</EuiPanel>
}
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" />
</>
);
Expand Down

0 comments on commit d5d692b

Please sign in to comment.