From c7b14aaa015f8e09aebaa2017283780eb887d819 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 18 Dec 2018 23:27:31 +0300
Subject: [PATCH] problems timeline: highlight related points

---
 src/panel-triggers/components/ProblemTimeline.tsx | 9 +++++++--
 src/sass/_panel-problems.scss                     | 3 ++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/ProblemTimeline.tsx
index 4ce2731..1829067 100644
--- a/src/panel-triggers/components/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/ProblemTimeline.tsx
@@ -302,7 +302,11 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
       const ts = Number(event.clock);
       const posLeft = Math.round((ts - timeFrom) / range * width - pointR);
       const eventColor = event.value === '1' ? problemColor : okColor;
-      const highlighted = this.state.highlighted === index;
+      const highlighted = this.state.highlighted === index || (
+        this.state.highlighted !== null && index === this.state.highlighted + 1 && event.value !== '1'
+      ) || (
+        this.state.highlighted !== null && index === this.state.highlighted - 1 && event.value === '1'
+      );
 
       return (
         <TimelinePoint
@@ -364,10 +368,11 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
   }
 
   render() {
-    const { x, color, className } = this.props;
+    const { x, color } = this.props;
     const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r;
     const cx = x + this.props.r;
     const rInner = Math.round(r * INNER_POINT_SIZE);
+    const className = `${this.props.className || ''} ${this.state.highlighted ? 'highlighted' : ''}`;
     return (
       <g className={className}
         transform={`translate(${cx}, 0)`}
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 61c37e5..c1bba6b 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -382,7 +382,8 @@
             transition: all 0.2s ease-out;
           }
 
-          &:hover {
+          &:hover,
+          &.highlighted {
             circle.point-border {
               stroke: $zbx-text-highlighted;
               stroke-width: 1;