Skip to content

Commit

Permalink
[ML] Change to step instead of slider in popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@qn895
qn895 committed Jul 18, 2022
1 parent cdafa5f commit f99264c
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 43 deletions.
199 changes: 158 additions & 41 deletions ...er/public/application/common/components/document_count_content/document_count_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,26 @@
* 2.0.
*/

import React, { FC } from 'react';
import { EuiCodeBlock, EuiRange, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { sortedIndex } from 'lodash';
import React, { FC, useCallback, useEffect, useState } from 'react';
import {
RANDOM_SAMPLER_PROBABILITIES,
RANDOM_SAMPLER_STEP,
} from '../../../index_data_visualizer/constants/random_sampler';
import { DocumentCountChart, DocumentCountChartPoint } from './document_count_chart';
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiToolTip,
EuiButtonIcon,
EuiPanel,
EuiSpacer,
EuiRadioGroup,
EuiCallOut,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { DocumentCountChartPoint } from './document_count_chart';
import { RANDOM_SAMPLER_PROBABILITIES } from '../../../index_data_visualizer/constants/random_sampler';
import { TotalCountHeader } from './total_count_header';
import { DocumentCountStats } from '../../../../../common/types/field_stats';
import type { DocumentCountStats } from '../../../../../common/types/field_stats';
import { DocumentCountChart } from './document_count_chart';

export interface Props {
documentCountStats?: DocumentCountStats;
totalCount: number;
Expand All @@ -28,6 +38,32 @@ export const DocumentCountContent: FC<Props> = ({
samplingProbability,
setSamplingProbability,
}) => {
const [showSamplingOptionsPopover, setShowSamplingOptionsPopover] = useState(false);
const [radioIdSelected, setRadioIdSelected] = useState(
`dv-random-sampler-option${samplingProbability ?? 1}`
);

const onChange = (optionId: string) => {
const closestProbability = parseFloat(optionId.slice(25, optionId.length));
if (setSamplingProbability) {
setSamplingProbability(closestProbability);
}
setRadioIdSelected(optionId);
};

const onShowSamplingOptions = useCallback(() => {
setShowSamplingOptionsPopover(!showSamplingOptionsPopover);
}, [showSamplingOptionsPopover]);

const closeSamplingOptions = useCallback(() => {
setShowSamplingOptionsPopover(false);
}, [setShowSamplingOptionsPopover]);

useEffect(() => {
if (samplingProbability !== parseFloat(radioIdSelected.slice(25, radioIdSelected.length))) {
setRadioIdSelected(`dv-random-sampler-option${samplingProbability ?? 1}`);
}
}, [samplingProbability, radioIdSelected]);
if (documentCountStats === undefined) {
return totalCount !== undefined ? <TotalCountHeader totalCount={totalCount} /> : null;
}
Expand All @@ -42,42 +78,123 @@ export const DocumentCountContent: FC<Props> = ({
chartPoints = Object.entries(buckets).map(([time, value]) => ({ time: +time, value }));
}

const approximate = documentCountStats.randomlySampled === true;
return (
<>
<EuiFlexGroup>
<TotalCountHeader
totalCount={totalCount}
approximate={documentCountStats.randomlySampled === true}
/>
<EuiFlexItem grow={true}>
<EuiRange
fullWidth
min={RANDOM_SAMPLER_STEP}
max={1}
value={samplingProbability ?? 1}
ticks={RANDOM_SAMPLER_PROBABILITIES.map((d) => ({
value: d,
label: d === 0.00001 || d === 0.05 || d >= 0.1 ? `${d * 100}%` : '',
}))}
onChange={(e) => {
const newProbability = Number(e.currentTarget.value);
const idx = sortedIndex(RANDOM_SAMPLER_PROBABILITIES, newProbability);
const closestPrev = RANDOM_SAMPLER_PROBABILITIES[idx - 1];
const closestNext = RANDOM_SAMPLER_PROBABILITIES[idx];
const closestProbability =
Math.abs(closestPrev - newProbability) < Math.abs(closestNext - newProbability)
? closestPrev
: closestNext;

if (setSamplingProbability) {
setSamplingProbability(closestProbability);
<EuiFlexGroup alignItems="center" gutterSize="xs">
<TotalCountHeader totalCount={totalCount} approximate={approximate} />
{approximate ? (
<EuiFlexItem grow={false} style={{ marginLeft: 'auto' }}>
<EuiPopover
id="dscSamplingOptions"
button={
<EuiToolTip
content={i18n.translate('xpack.dataVisualizer.samplingOptionsButton', {
defaultMessage: 'Sampling options',
})}
>
<EuiButtonIcon
size="xs"
iconType="gear"
onClick={onShowSamplingOptions}
data-test-subj="discoverSamplingOptionsToggle"
aria-label={i18n.translate('xpack.dataVisualizer.samplingOptionsButton', {
defaultMessage: 'Sampling options',
})}
/>
</EuiToolTip>
}
}}
showTicks
showRange={false}
step={RANDOM_SAMPLER_STEP}
/>
</EuiFlexItem>
isOpen={showSamplingOptionsPopover}
closePopover={closeSamplingOptions}
panelPaddingSize="none"
anchorPosition="downLeft"
>
<EuiPanel style={{ maxWidth: 400 }}>
<EuiFlexItem grow={true}>
<EuiCallOut
iconType="help"
size="s"
color={'primary'}
title={i18n.translate('xpack.dataVisualizer.randomSamplerInfoCalloutMessage', {
defaultMessage:
'Random sampler is being used for the total document count and the chart. Pick a higher percentage for better accuracy, or 100% for exact values without any sampling..',
})}
/>
</EuiFlexItem>
<EuiSpacer size="m" />
<EuiRadioGroup
options={RANDOM_SAMPLER_PROBABILITIES.map((d) => ({
id: `dv-random-sampler-option${d}`,
label: `${d * 100}%`,
}))}
idSelected={radioIdSelected}
onChange={(id) => onChange(id)}
/>
{/* @TODO: remove */}
{/* <EuiFlexItem grow={true}>*/}
{/* <EuiRange*/}
{/* fullWidth*/}
{/* min={RANDOM_SAMPLER_STEP}*/}
{/* max={1}*/}
{/* value={samplingProbability ?? 1}*/}
{/* ticks={RANDOM_SAMPLER_PROBABILITIES.map((d) => ({*/}
{/* value: d,*/}
{/* label: d === 0.00001 || d === 0.05 || d >= 0.1 ? `${d * 100}%` : '',*/}
{/* }))}*/}
{/* showValue*/}
{/* onChange={(e) => {*/}
{/* const newProbability = Number(e.currentTarget.value);*/}
{/* const idx = sortedIndex(RANDOM_SAMPLER_PROBABILITIES, newProbability);*/}
{/* const closestPrev = RANDOM_SAMPLER_PROBABILITIES[idx - 1];*/}
{/* const closestNext = RANDOM_SAMPLER_PROBABILITIES[idx];*/}
{/* const closestProbability =*/}
{/* Math.abs(closestPrev - newProbability) <*/}
{/* Math.abs(closestNext - newProbability)*/}
{/* ? closestPrev*/}
{/* : closestNext;*/}

{/* if (setSamplingProbability) {*/}
{/* setSamplingProbability(closestProbability);*/}
{/* }*/}
{/* }}*/}
{/* showTicks*/}
{/* showRange={false}*/}
{/* step={RANDOM_SAMPLER_STEP}*/}
{/* />*/}
{/* </EuiFlexItem>*/}
</EuiPanel>
</EuiPopover>
<EuiFlexItem>
{/* <EuiRange*/}
{/* fullWidth*/}
{/* min={RANDOM_SAMPLER_STEP}*/}
{/* max={1}*/}
{/* value={samplingProbability ?? 1}*/}
{/* ticks={RANDOM_SAMPLER_PROBABILITIES.map((d) => ({*/}
{/* value: d,*/}
{/* label: d === 0.00001 || d === 0.05 || d >= 0.1 ? `${d * 100}%` : '',*/}
{/* }))}*/}
{/* onChange={(e) => {*/}
{/* const newProbability = Number(e.currentTarget.value);*/}
{/* const idx = sortedIndex(RANDOM_SAMPLER_PROBABILITIES, newProbability);*/}
{/* const closestPrev = RANDOM_SAMPLER_PROBABILITIES[idx - 1];*/}
{/* const closestNext = RANDOM_SAMPLER_PROBABILITIES[idx];*/}
{/* const closestProbability =*/}
{/* Math.abs(closestPrev - newProbability) < Math.abs(closestNext - newProbability)*/}
{/* ? closestPrev*/}
{/* : closestNext;*/}

{/* if (setSamplingProbability) {*/}
{/* setSamplingProbability(closestProbability);*/}
{/* }*/}
{/* }}*/}
{/* showTicks*/}
{/* showRange={false}*/}
{/* step={RANDOM_SAMPLER_STEP}*/}
{/* />*/}
</EuiFlexItem>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<DocumentCountChart
chartPoints={chartPoints}
Expand Down
4 changes: 2 additions & 2 deletions ...alizer/public/application/common/components/document_count_content/total_count_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { EuiFlexItem, EuiIconTip, EuiText } from '@elastic/eui';
import { EuiFlexItem, EuiText, EuiIconTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React from 'react';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -47,7 +47,7 @@ export const TotalCountHeader = ({
<EuiIconTip
content={i18n.translate('xpack.dataVisualizer.searchPanel.randomSamplerMessage', {
defaultMessage:
'Random sampler is being used for the total document count and the chart. Values shown are estimated. Adjust the slider to a higher percentage for better accuracy, or 100% to exact values.',
'Random sampler is being used for the total document count and the chart. Values shown are estimated.',
})}
position="right"
type="iInCircle"
Expand Down

0 comments on commit f99264c

Please sign in to comment.