From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 4 Dec 2015 16:47:44 +0000 (+0100)
Subject: SONAR-7062 do not show tooltips for all snapshots
X-Git-Tag: 5.3-RC1~51
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=f26d8b452a0f2c5bb8a81067480ec9f70a10224f;p=sonarqube.git

SONAR-7062 do not show tooltips for all snapshots
---

diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
index 220aff4556a..7275a408e0b 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
@@ -33,10 +33,6 @@ export const DomainTimeline = React.createClass({
     };
   },
 
-  componentWillMount () {
-    this.handleScan = _.debounce(this.handleScan, 10, true);
-  },
-
   componentDidMount () {
     Promise.all([
       this.requestTimeMachineData(this.state.currentMetric, this.state.comparisonMetric),
@@ -93,10 +89,6 @@ export const DomainTimeline = React.createClass({
     return groupByDomain(this.props.metrics);
   },
 
-  handleScan(scanner) {
-    this.setState({ scanner });
-  },
-
   renderLoading () {
     return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}>
       <i className="spinner"/>
@@ -149,8 +141,6 @@ export const DomainTimeline = React.createClass({
                 formatValue={formatValue}
                 formatYTick={formatYTick}
                 leakPeriodDate={this.props.leakPeriodDate}
-                scanner={this.state.scanner}
-                onScan={this.handleScan}
                 padding={[25, 25, 25, 60]}/>
     </div>;
   },
diff --git a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
index c9783bdfc34..62610c2f190 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
@@ -26,7 +26,7 @@ export const Timeline = React.createClass({
   },
 
   getInitialState() {
-    return { width: this.props.width, height: this.props.height, scanner: 0 };
+    return { width: this.props.width, height: this.props.height };
   },
 
   getRatingScale(availableHeight) {
@@ -54,14 +54,12 @@ export const Timeline = React.createClass({
     }
   },
 
-  handleMouseMove(xScale, e) {
-    const x = e.pageX - this.refs.container.getBoundingClientRect().left;
-    const scanner = this.props.data
-        .reduce((previousValue, currentValue) => {
-          return Math.abs(xScale(currentValue.x) - x) < Math.abs(xScale(previousValue.x) - x) ?
-              currentValue : previousValue;
-        }, _.first(this.props.data));
-    this.props.onScan(scanner.x);
+  handleEventMouseEnter(event) {
+    $(`.js-event-circle-${event.date.getTime()}`).tooltip('show');
+  },
+
+  handleEventMouseLeave(event) {
+    $(`.js-event-circle-${event.date.getTime()}`).tooltip('hide');
   },
 
   renderHorizontalGrid (xScale, yScale) {
@@ -100,36 +98,6 @@ export const Timeline = React.createClass({
     return <g>{ticks}</g>;
   },
 
-  renderBackdrop (xScale, yScale) {
-    let opts = {
-      x: _.first(xScale.range()),
-      y: _.last(yScale.range()),
-      width: _.last(xScale.range()) - _.first(xScale.range()),
-      height: _.first(yScale.range()) - _.last(yScale.range()),
-      style: {
-        opacity: 0
-      }
-    };
-    return <rect {...opts} ref="container" onMouseMove={this.handleMouseMove.bind(this, xScale)}/>;
-  },
-
-  renderScanner (xScale, yScale) {
-    if (this.props.scanner == null) {
-      return null;
-    }
-    let snapshotIndex = this.props.data.findIndex(snapshot => {
-      return snapshot.x.getTime() === this.props.scanner.getTime();
-    });
-    $(this.refs[`snapshot${snapshotIndex}`]).tooltip('show');
-    return <line
-        style={{ opacity: 0 }}
-        className="line-chart-grid"
-        x1={xScale(this.props.scanner)}
-        y1={_.first(yScale.range())}
-        x2={xScale(this.props.scanner)}
-        y2={_.last(yScale.range())}/>;
-  },
-
   renderLeak (xScale, yScale) {
     if (!this.props.leakPeriodDate) {
       return null;
@@ -152,27 +120,6 @@ export const Timeline = React.createClass({
     return <path className="line-chart-path" d={path(this.props.data)}/>;
   },
 
-  renderTooltips(xScale, yScale) {
-    let points = this.props.data
-        .map(snapshot => {
-          let event = this.props.events.find(e => snapshot.x.getTime() === e.date.getTime());
-          return _.extend(snapshot, { event });
-        })
-        .map((snapshot, index) => {
-          let tooltipLines = [];
-          if (snapshot.event) {
-            tooltipLines.push(`<span class="nowrap">${snapshot.event.version}</span>`);
-          }
-          tooltipLines.push(`<span class="nowrap">${moment(snapshot.x).format('LL')}</span>`);
-          tooltipLines.push(`<span class="nowrap">${snapshot.y ? this.props.formatValue(snapshot.y) : '—'}</span>`);
-          let tooltip = tooltipLines.join('<br>');
-          return <circle key={index} ref={`snapshot${index}`} style={{ opacity: 0 }}
-                         r="4" cx={xScale(snapshot.x)} cy={yScale(snapshot.y)}
-                         data-toggle="tooltip" title={tooltip}/>;
-        });
-    return <g>{points}</g>;
-  },
-
   renderEvents(xScale, yScale) {
     let points = this.props.events
         .map(event => {
@@ -182,14 +129,21 @@ export const Timeline = React.createClass({
         .filter(event => event.snapshot)
         .map(event => {
           let key = `${event.date.getTime()}-${event.snapshot.y}`;
+          let className = `line-chart-point js-event-circle-${event.date.getTime()}`;
           let tooltip = [
             `<span class="nowrap">${event.version}</span>`,
             `<span class="nowrap">${moment(event.date).format('LL')}</span>`,
             `<span class="nowrap">${event.snapshot.y ? this.props.formatValue(event.snapshot.y) : '—'}</span>`
           ].join('<br>');
-          return <circle key={key} className="line-chart-point"
-                         r="4" cx={xScale(event.snapshot.x)} cy={yScale(event.snapshot.y)}
-                         data-toggle="tooltip" data-title={tooltip}/>;
+          return <circle key={key}
+                         className={className}
+                         r="4"
+                         cx={xScale(event.snapshot.x)}
+                         cy={yScale(event.snapshot.y)}
+                         onMouseEnter={this.handleEventMouseEnter.bind(this, event)}
+                         onMouseLeave={this.handleEventMouseLeave.bind(this, event)}
+                         data-toggle="tooltip"
+                         data-title={tooltip}/>;
         });
     return <g>{points}</g>;
   },
@@ -214,10 +168,7 @@ export const Timeline = React.createClass({
         {this.renderHorizontalGrid(xScale, yScale)}
         {this.renderTicks(xScale, yScale)}
         {this.renderLine(xScale, yScale)}
-        {this.renderTooltips(xScale, yScale)}
         {this.renderEvents(xScale, yScale)}
-        {this.renderScanner(xScale, yScale)}
-        {this.renderBackdrop(xScale, yScale)}
       </g>
     </svg>;
   }