From b619c6019a31b3c21721b920ae89fc7b4a86a574 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 17 Dec 2018 10:35:37 +0300
Subject: [PATCH] problem timeline: resize with container

---
 .../components/ProblemTimeline.tsx            | 26 ++++++-------------
 src/sass/_panel-problems.scss                 |  1 -
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/ProblemTimeline.tsx
index 01748f1..44db47a 100644
--- a/src/panel-triggers/components/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/ProblemTimeline.tsx
@@ -20,7 +20,6 @@ interface ProblemTimelineState {
 }
 
 export default class ProblemTimeline extends PureComponent<ProblemTimelineProps, ProblemTimelineState> {
-  rootWidth: number;
   rootRef: any;
 
   static defaultProps = {
@@ -39,7 +38,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
 
   setRootRef = ref => {
     this.rootRef = ref;
-    const width = this.rootRef && this.rootRef.clientWidth || 0;
+    const width = ref && ref.clientWidth || 0;
     this.setState({ width });
   }
 
@@ -51,6 +50,13 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
     this.setState({ showEventInfo: false });
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.rootRef && prevState.width !== this.rootRef.clientWidth) {
+      const width = this.rootRef.clientWidth;
+      this.setState({ width });
+    }
+  }
+
   render() {
     if (!this.rootRef) {
       return <div className="event-timeline" ref={this.setRootRef} />;
@@ -95,22 +101,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
       );
     });
 
-    const eventsItems = events.map(event => {
-      const ts = Number(event.clock);
-      const posLeft = (ts - timeFrom) / range * width - EVENT_ITEM_SIZE / 2;
-      const eventColor = event.value === '1' ? this.props.problemColor : this.props.okColor;
-
-      return (
-        <TimelinePoint
-          key={event.eventid}
-          className="problem-event-item"
-          x={posLeft}
-          r={10}
-          color={eventColor}
-        />
-      );
-    });
-
     return (
       <div className="event-timeline" ref={this.setRootRef}>
         <TimelineInfoContainer className="timeline-info-container"
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 98dbd28..5dda4c0 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -338,7 +338,6 @@
       }
 
       .event-timeline {
-        display: flex;
         position: relative;
         margin-bottom: 0.6rem;
         padding-top: 1.6rem;