Skip to content

Commit

Permalink
[ML] button groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterra
walterra committed Sep 29, 2020
1 parent 13872ee commit cdd66b4
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 73 deletions.
71 changes: 69 additions & 2 deletions ...cs/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,15 @@

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

import { EuiButton, EuiCode, EuiFlexGroup, EuiFlexItem, EuiInputPopover } from '@elastic/eui';
import {
EuiButton,
EuiCheckboxGroup,
EuiCode,
EuiFlexGroup,
EuiFlexItem,
EuiInputPopover,
EuiPopover,
} from '@elastic/eui';

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

Expand All @@ -32,13 +40,15 @@ interface ExplorationQueryBarProps {
setSearchQuery: Dispatch<SetStateAction<SavedSearchQuery>>;
includeQueryString?: boolean;
defaultQueryString?: string;
options: any;
}

export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
indexPattern,
setSearchQuery,
includeQueryString = false,
defaultQueryString,
options,
}) => {
// The internal state of the input query bar updated on every key stroke.
const [searchInput, setSearchInput] = useState<Query>({
Expand Down Expand Up @@ -83,6 +93,52 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
}
};

const [isPopoverOpen, setIsPopoverOpen] = useState(false);

const onButtonClick = () => setIsPopoverOpen(() => !isPopoverOpen);
const closePopover = () => setIsPopoverOpen(false);

const featureButtons = [
{
id: `popoverAnalysis`,
label: 'Analysis',
},
{
id: `popoverResults`,
label: 'Results',
},
{
id: `popoverScatterplotMatrix`,
label: 'Scatterplot Matrix',
},
];
const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<Record<string, boolean>>({
popoverResults: true,
});
const onChangeMulti = (optionId: string) => {
const newToggleIdToSelectedMap = {
...toggleIdToSelectedMap,
...{
[optionId]: !toggleIdToSelectedMap[optionId],
},
};
setToggleIdToSelectedMap(newToggleIdToSelectedMap);
options.onChange(optionId.replace('popover', 'section'));
};

useEffect(() => {
if (options.checkboxIdToSelectedMap !== undefined) {
setToggleIdToSelectedMap(
Object.entries(options.checkboxIdToSelectedMap).reduce((p, c) => {
return {
...p,
[c[0].replace('section', 'popover')]: c[1],
};
}, {})
);
}
}, [options.checkboxIdToSelectedMap]);

return (
<EuiFlexGroup>
<EuiFlexItem>
Expand Down Expand Up @@ -124,7 +180,18 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
</EuiInputPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton>Refresh</EuiButton>
<EuiPopover
ownFocus
button={<EuiButton onClick={onButtonClick}>Options</EuiButton>}
isOpen={isPopoverOpen}
closePopover={closePopover}
>
<EuiCheckboxGroup
options={featureButtons}
idToSelectedMap={toggleIdToSelectedMap}
onChange={onChangeMulti}
/>
</EuiPopover>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
192 changes: 121 additions & 71 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 @@ -10,14 +10,14 @@ import { i18n } from '@kbn/i18n';

import {
EuiBadge,
EuiButtonIcon,
EuiButtonEmpty,
EuiButtonGroup,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';

import type { DataFrameAnalysisConfigType } from '../../../../../../../common/types/data_frame_analytics';
Expand Down Expand Up @@ -112,23 +112,80 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
setIsExpandedResultsTable(!isExpandedResultsTable);
};

const featureButtons = [
{
id: `sectionAnalysis`,
label: 'Analysis',
},
{
id: `sectionResults`,
label: 'Results',
},
{
id: `sectionScatterplotMatrix`,
label: 'Scatterplot Matrix',
},
];

const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<Record<string, boolean>>({
sectionResults: true,
});
const onChangeMulti = (optionId: string) => {
const newToggleIdToSelectedMap = {
...toggleIdToSelectedMap,
...{
[optionId]: !toggleIdToSelectedMap[optionId],
},
};
setToggleIdToSelectedMap(newToggleIdToSelectedMap);
};

return (
<>
<EuiButtonGroup
legend="Feature Button Group"
name="featureButtonGroup"
options={featureButtons}
idToSelectedMap={toggleIdToSelectedMap}
onChange={(id) => onChangeMulti(id)}
buttonSize="m"
type="multi"
color="primary"
/>

<EuiSpacer size="m" />

{(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
indexPattern !== undefined && (
<>
<ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} />
<ExplorationQueryBar
indexPattern={indexPattern}
setSearchQuery={setSearchQuery}
options={{
checkboxes: featureButtons,
checkboxIdToSelectedMap: toggleIdToSelectedMap,
onChange: (id: string) => {
onChangeMulti(id);
},
}}
/>
<EuiSpacer size="m" />
</>
)}

<EuiPanel paddingSize="none">
<div style={{ padding: '10px' }}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="s">
<h2>Analysis</h2>
</EuiTitle>
{toggleIdToSelectedMap.sectionAnalysis && (
<>
<EuiPanel paddingSize="none">
<div style={{ padding: '10px' }}>
<EuiButtonEmpty
onClick={toggleExpandedAnalysisDetails}
iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
size="l"
iconSide="right"
flush="left"
>
Analysis
</EuiButtonEmpty>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
Expand All @@ -149,38 +206,36 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
<EuiBadge>glass_outlier_detection</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={toggleExpandedAnalysisDetails}
iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
size="s"
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
{isExpandedAnalysisDetails && (
<>
<EuiHorizontalRule size="full" margin="none" />
{(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
indexPattern !== undefined &&
jobConfig !== undefined &&
columnsWithCharts.length > 0 &&
tableItems.length > 0 &&
expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
</>
)}
</EuiPanel>

<EuiSpacer size="m" />
</div>
{isExpandedAnalysisDetails && (
<>
<EuiHorizontalRule size="full" margin="none" />
{(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
indexPattern !== undefined &&
jobConfig !== undefined &&
columnsWithCharts.length > 0 &&
tableItems.length > 0 &&
expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
</>
)}
</EuiPanel>
<EuiSpacer size="m" />
</>
)}

<EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
<div style={{ padding: '10px' }}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="s">
<h2>Results</h2>
</EuiTitle>
{toggleIdToSelectedMap.sectionResults && (
<>
<EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
<div style={{ padding: '10px' }}>
<EuiButtonEmpty
onClick={toggleExpandedResultsTable}
iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
size="l"
iconSide="right"
flush="left"
>
Results
</EuiButtonEmpty>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
Expand Down Expand Up @@ -212,37 +267,32 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={toggleExpandedResultsTable}
iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
size="s"
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
{isExpandedResultsTable && (
<>
{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()}
/>
</div>
{isExpandedResultsTable && (
<>
{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()}
/>
)}
</>
)}
</>
)}
</>
)}
</EuiPanel>
</>
)}
</EuiPanel>
<EuiSpacer size="m" />
</>
)}
{toggleIdToSelectedMap.sectionScatterplotMatrix && <EuiPanel>SCATTERPLOT MATRIX</EuiPanel>}
</>
);
});

0 comments on commit cdd66b4

Please sign in to comment.