Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Add annotation markers to the Anomaly Swimlane axis #97202

Merged
merged 17 commits into from
Apr 20, 2021
Merged

[ML] Add annotation markers to the Anomaly Swimlane axis #97202

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2101c11
[ML] Add annotation
qn895 Apr 14, 2021
af34336
[ML] Clean up
qn895 Apr 14, 2021
e942924
[ML] Clean up load all annotations
qn895 Apr 15, 2021
d28c594
Merge upstream/master into branch
qn895 Apr 15, 2021
df8f981
Fix allAnnotations
qn895 Apr 15, 2021
7a5bedf
Remove unrelated change
qn895 Apr 15, 2021
bc00e98
[ML] Add annotation border, label text, rename allAnnotations -> over…
qn895 Apr 15, 2021
85401ba
[ML] Update annotation label styling
qn895 Apr 15, 2021
f213802
[ML] Fix swimlane embeddable broken
qn895 Apr 15, 2021
1a8cee3
[ML] Re-enable tests
qn895 Apr 19, 2021
a0c887d
Merge remote-tracking branch 'upstream/master' into ml-annotations-sw…
qn895 Apr 20, 2021
985fced
[ML] Fix markers overflowing beyond the start and ending time range
qn895 Apr 20, 2021
229b4fa
[ML] Make styling more consistent with SMV
qn895 Apr 20, 2021
ce159b0
[ML] Renable tests
qn895 Apr 20, 2021
49d3a8e
[ML] Fix model snapshot annotation missing
qn895 Apr 20, 2021
c65cd32
[ML] Fix model snapshot annotation missing
qn895 Apr 20, 2021
55b5362
[ML] Fix duration to account for contextXRangeStart
qn895 Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const ANNOTATION_HEIGHT = 12;
export const Y_AXIS_LABEL_WIDTH = 170;
export const Y_AXIS_LABEL_PADDING = 8;
export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
const ANNOTATION_RECT_MARGIN = 2;
const ANNOTATION_MIN_WIDTH = 5;

interface SwimlaneAnnotationContainerProps {
chartWidth: number;
Expand All @@ -41,8 +43,10 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
const chartElement = d3.select(canvasRef.current);
chartElement.selectAll('*').remove();

const dimensions = canvasRef.current.getBoundingClientRect();

const startingXPos = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
const endingXPos = startingXPos + chartWidth - Y_AXIS_LABEL_PADDING;
const endingXPos = dimensions.width - 2 * Y_AXIS_LABEL_PADDING - 4;

const svg = chartElement
.append('svg')
Expand Down Expand Up @@ -79,14 +83,19 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =

// Add annotation marker
annotationsData.forEach((d) => {
peteharverson marked this conversation as resolved.
Show resolved Hide resolved
const annotationWidth = d.end_timestamp ? xScale(d.end_timestamp) - xScale(d.timestamp) : 0;
const annotationWidth = d.end_timestamp
? xScale(Math.min(d.end_timestamp, domain.max)) - xScale(d.timestamp)
peteharverson marked this conversation as resolved.
Show resolved Hide resolved
: ANNOTATION_MIN_WIDTH;

svg
.append('rect')
.classed('mlAnnotationRect', true)
.attr('x', xScale(d.timestamp))
.attr('x', d.timestamp >= domain.min ? xScale(d.timestamp) : startingXPos)
.attr('y', 0)
.attr('height', ANNOTATION_HEIGHT)
.attr('width', Math.max(annotationWidth, 5))
.attr('width', annotationWidth)
.attr('rx', ANNOTATION_RECT_MARGIN)
.attr('ry', ANNOTATION_RECT_MARGIN)
.on('mouseover', function () {
const startingTime = formatHumanReadableDateTimeSeconds(d.timestamp);
const endingTime =
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const LEGEND_HEIGHT = 34;

const Y_AXIS_HEIGHT = 24;

export const SWIM_LANE_LABEL_WIDTH = 200;
export const SWIM_LANE_LABEL_WIDTH = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;

export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData {
return arg && arg.hasOwnProperty('cardinality');
Expand Down