Skip to content

Commit

Permalink
[ML] WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@darnautov
darnautov committed Jun 27, 2020
1 parent 76742ae commit a24cb41
Show file tree
Hide file tree
Showing 9 changed files with 106 additions and 97 deletions.
92 changes: 40 additions & 52 deletions x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import {
import { ExplorerState } from './reducers/explorer_reducer';
import { hasMatchingPoints } from './has_matching_points';
import { ExplorerNoInfluencersFound } from './components/explorer_no_influencers_found/explorer_no_influencers_found';
import { LoadingIndicator } from '../components/loading_indicator';
import { SwimlaneContainer } from './swimlane_container';
import { OverallSwimlaneData } from './explorer_utils';

Expand Down Expand Up @@ -169,11 +168,6 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
}
}, []);

const showOverallSwimlane =
overallSwimlaneData !== null &&
overallSwimlaneData.laneLabels &&
overallSwimlaneData.laneLabels.length > 0;

const showViewBySwimlane =
viewBySwimlaneData !== null &&
viewBySwimlaneData.laneLabels &&
Expand Down Expand Up @@ -295,56 +289,50 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
onMouseLeave={onSwimlaneLeaveHandler}
data-test-subj="mlAnomalyExplorerSwimlaneOverall"
>
{showOverallSwimlane && (
<SwimlaneContainer
filterActive={filterActive}
maskAll={maskAll}
timeBuckets={timeBuckets}
swimlaneCellClick={swimlaneCellClick}
swimlaneData={overallSwimlaneData as OverallSwimlaneData}
swimlaneType={'overall'}
selection={selectedCells}
swimlaneRenderDoneListener={swimlaneRenderDoneListener}
onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
/>
)}
<SwimlaneContainer
filterActive={filterActive}
maskAll={maskAll}
timeBuckets={timeBuckets}
swimlaneCellClick={swimlaneCellClick}
swimlaneData={overallSwimlaneData as OverallSwimlaneData}
swimlaneType={'overall'}
selection={selectedCells}
swimlaneRenderDoneListener={swimlaneRenderDoneListener}
onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
/>
</div>

{viewBySwimlaneOptions.length > 0 && (
<>
{showViewBySwimlane && (
<>
<EuiSpacer size="m" />
<div
className="ml-explorer-swimlane euiText"
onMouseEnter={onSwimlaneEnterHandler}
onMouseLeave={onSwimlaneLeaveHandler}
data-test-subj="mlAnomalyExplorerSwimlaneViewBy"
>
<SwimlaneContainer
filterActive={filterActive}
maskAll={
maskAll &&
!hasMatchingPoints({
filteredFields,
swimlaneData: viewBySwimlaneData,
})
}
timeBuckets={timeBuckets}
swimlaneCellClick={swimlaneCellClick}
swimlaneData={viewBySwimlaneData as OverallSwimlaneData}
swimlaneType={'viewBy'}
selection={selectedCells}
swimlaneRenderDoneListener={swimlaneRenderDoneListener}
onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
fromPage={viewByFromPage}
perPage={viewByPerPage}
/>
</div>
</>
)}

{viewBySwimlaneDataLoading && <LoadingIndicator />}
<>
<EuiSpacer size="m" />
<div
className="ml-explorer-swimlane euiText"
onMouseEnter={onSwimlaneEnterHandler}
onMouseLeave={onSwimlaneLeaveHandler}
data-test-subj="mlAnomalyExplorerSwimlaneViewBy"
>
<SwimlaneContainer
filterActive={filterActive}
maskAll={
maskAll &&
!hasMatchingPoints({
filteredFields,
swimlaneData: viewBySwimlaneData,
})
}
timeBuckets={timeBuckets}
swimlaneCellClick={swimlaneCellClick}
swimlaneData={viewBySwimlaneData as OverallSwimlaneData}
swimlaneType={'viewBy'}
selection={selectedCells}
swimlaneRenderDoneListener={swimlaneRenderDoneListener}
onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
fromPage={viewByFromPage}
perPage={viewByPerPage}
/>
</div>
</>

{!showViewBySwimlane &&
!viewBySwimlaneDataLoading &&
Expand Down
23 changes: 0 additions & 23 deletions x-pack/plugins/ml/public/application/explorer/explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import { DatePickerWrapper } from '../components/navigation_menu/date_picker_wra
import { InfluencersList } from '../components/influencers_list';
import { explorerService } from './explorer_dashboard_service';
import { AnomalyResultsViewSelector } from '../components/anomaly_results_view_selector';
import { LoadingIndicator } from '../components/loading_indicator/loading_indicator';
import { NavigationMenu } from '../components/navigation_menu';
import { CheckboxShowCharts } from '../components/controls/checkbox_showcharts';
import { JobSelector } from '../components/job_selector';
Expand Down Expand Up @@ -224,28 +223,6 @@ export class Explorer extends React.Component {
const noJobsFound = selectedJobs === null || selectedJobs.length === 0;
const hasResults = overallSwimlaneData.points && overallSwimlaneData.points.length > 0;

if (loading === true) {
return (
<ExplorerPage
jobSelectorProps={jobSelectorProps}
noInfluencersConfigured={noInfluencersConfigured}
influencers={influencers}
filterActive={filterActive}
filterPlaceHolder={filterPlaceHolder}
filterIconTriggeredQuery={this.state.filterIconTriggeredQuery}
indexPattern={indexPattern}
queryString={queryString}
updateLanguage={this.updateLanguage}
>
<LoadingIndicator
label={i18n.translate('xpack.ml.explorer.loadingLabel', {
defaultMessage: 'Loading',
})}
/>
</ExplorerPage>
);
}

if (noJobsFound) {
return (
<ExplorerPage jobSelectorProps={jobSelectorProps}>
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/ml/public/application/explorer/explorer_constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,5 @@ export const VIEW_BY_JOB_LABEL = i18n.translate('xpack.ml.explorer.jobIdLabel',
* aggregations on influencers values.
*/
export const ANOMALY_SWIM_LANE_HARD_LIMIT = 1000;

export const RESIZE_IGNORED_DIFF_PX = 20;
1 change: 1 addition & 0 deletions ...public/application/explorer/reducers/explorer_reducer/clear_influencer_filter_settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ export function clearInfluencerFilterSettings(state: ExplorerState): ExplorerSta
queryString: '',
tableQueryString: '',
...getClearedSelectedAnomaliesState(),
viewByFromPage: 1,
};
}
1 change: 1 addition & 0 deletions .../plugins/ml/public/application/explorer/reducers/explorer_reducer/job_selection_change.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const jobSelectionChange = (state: ExplorerState, payload: ActionPayload)
noInfluencersConfigured: getInfluencers(selectedJobs).length === 0,
overallSwimlaneData: getDefaultSwimlaneData(),
selectedJobs,
viewByFromPage: 1,
};

// clear filter if selected jobs have no influencers
Expand Down
5 changes: 5 additions & 0 deletions x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const explorerReducer = (state: ExplorerState, nextAction: Action): Explo
...state,
...getClearedSelectedAnomaliesState(),
loading: false,
viewByFromPage: 1,
selectedJobs: [],
};
break;
Expand Down Expand Up @@ -102,6 +103,8 @@ export const explorerReducer = (state: ExplorerState, nextAction: Action): Explo
...getClearedSelectedAnomaliesState(),
maskAll,
viewBySwimlaneFieldName,
viewBySwimlaneData: getDefaultSwimlaneData(),
viewByFromPage: 1,
};
break;

Expand Down Expand Up @@ -129,6 +132,8 @@ export const explorerReducer = (state: ExplorerState, nextAction: Action): Explo
case EXPLORER_ACTION.SET_VIEW_BY_PER_PAGE:
nextState = {
...state,
// reset current page on the page size change
viewByFromPage: 1,
viewByPerPage: payload,
};
break;
Expand Down
1 change: 1 addition & 0 deletions ...l/public/application/explorer/reducers/explorer_reducer/set_influencer_filter_settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,6 @@ export function setInfluencerFilterSettings(
filteredFields.includes(selectedViewByFieldName) === false,
viewBySwimlaneFieldName: selectedViewByFieldName,
viewBySwimlaneOptions: filteredViewBySwimlaneOptions,
viewByFromPage: 1,
};
}
61 changes: 46 additions & 15 deletions x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@
*/

import React, { FC, useCallback, useState } from 'react';
import { EuiResizeObserver, EuiText } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiLoadingChart,
EuiResizeObserver,
EuiText,
} from '@elastic/eui';

import { throttle } from 'lodash';
import {
Expand All @@ -15,7 +21,7 @@ import {

import { MlTooltipComponent } from '../../application/components/chart_tooltip';
import { SwimLanePagination } from './swimlane_pagination';
import { SWIMLANE_TYPE } from './explorer_constants';
import { RESIZE_IGNORED_DIFF_PX, SWIMLANE_TYPE } from './explorer_constants';
import { ViewBySwimLaneData } from './explorer_utils';

const RESIZE_THROTTLE_TIME_MS = 500;
Expand All @@ -36,12 +42,29 @@ export const SwimlaneContainer: FC<
const resizeHandler = useCallback(
throttle((e: { width: number; height: number }) => {
const labelWidth = 200;
setChartWidth(e.width - labelWidth);
onResize(e.width);
const resultNewWidth = e.width - labelWidth;
if (Math.abs(resultNewWidth - chartWidth) > RESIZE_IGNORED_DIFF_PX) {
setChartWidth(resultNewWidth);
onResize(resultNewWidth);
}
}, RESIZE_THROTTLE_TIME_MS),
[]
[chartWidth]
);

const showSwimlane =
props.swimlaneData !== null &&
props.swimlaneData.laneLabels &&
props.swimlaneData.laneLabels.length > 0;

const isPaginationVisible =
(props.swimlaneType === SWIMLANE_TYPE.VIEW_BY &&
isViewBySwimLaneData(props.swimlaneData) &&
fromPage &&
perPage &&
// only render pagination when there is more than 1 page
props.swimlaneData.cardinality > perPage * fromPage) ||
(fromPage && fromPage > 1);

return (
<>
<EuiResizeObserver onResize={resizeHandler}>
Expand All @@ -53,21 +76,29 @@ export const SwimlaneContainer: FC<
>
<div style={{ width: '100%' }}>
<EuiText color="subdued" size="s">
<MlTooltipComponent>
{(tooltipService) => (
<ExplorerSwimlane
chartWidth={chartWidth}
tooltipService={tooltipService}
{...props}
/>
)}
</MlTooltipComponent>
{showSwimlane ? (
<MlTooltipComponent>
{(tooltipService) => (
<ExplorerSwimlane
chartWidth={chartWidth}
tooltipService={tooltipService}
{...props}
/>
)}
</MlTooltipComponent>
) : (
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiLoadingChart size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
)}
</EuiText>
</div>
</div>
)}
</EuiResizeObserver>
{props.swimlaneType === SWIMLANE_TYPE.VIEW_BY && isViewBySwimLaneData(props.swimlaneData) && (
{isPaginationVisible && (
<SwimLanePagination
cardinality={props.swimlaneData.cardinality}
fromPage={fromPage}
Expand Down
17 changes: 10 additions & 7 deletions x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,13 +176,16 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
undefined;

useEffect(() => {
loadExplorerData({
...loadExplorerDataConfig,
swimlaneLimit:
explorerState?.viewBySwimlaneData &&
isViewBySwimLaneData(explorerState?.viewBySwimlaneData) &&
explorerState?.viewBySwimlaneData.cardinality,
});
if (explorerState && explorerState.swimlaneContainerWidth > 0) {
loadExplorerData({
...loadExplorerDataConfig,
swimlaneLimit:
explorerState?.viewBySwimlaneData &&
isViewBySwimLaneData(explorerState?.viewBySwimlaneData)
? explorerState?.viewBySwimlaneData.cardinality
: undefined,
});
}
}, [JSON.stringify(loadExplorerDataConfig)]);

if (explorerState === undefined || refresh === undefined || showCharts === undefined) {
Expand Down

0 comments on commit a24cb41

Please sign in to comment.