From bc7f28d32c6d9dea2cbd027fd6b0f3ddf3ae9057 Mon Sep 17 00:00:00 2001
From: Joe Farro <tiffon@users.noreply.github.com>
Date: Wed, 13 Sep 2017 22:10:04 -0700
Subject: [PATCH] Mouseover span name shows full text in timeline (#71)

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
---
 .../ListView/__snapshots__/index.test.js.snap | 20 ----------
 .../TraceTimelineViewer/ListView/index.js     |  3 +-
 .../TracePage/TraceTimelineViewer/SpanBar.css |  1 +
 .../TraceTimelineViewer/SpanBarRow.css        | 38 ++++++++++++-------
 .../TraceTimelineViewer/SpanBarRow.js         |  9 +----
 .../TraceTimelineViewer/SpanDetailRow.css     |  5 +--
 .../TraceTimelineViewer/SpanDetailRow.js      | 20 +++++-----
 .../TracePage/TraceTimelineViewer/Ticks.js    | 29 +++++++-------
 .../VirtualizedTraceView.css                  |  4 ++
 .../VirtualizedTraceView.js                   |  2 +-
 10 files changed, 60 insertions(+), 71 deletions(-)

diff --git a/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap b/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap
index b889b23fba..fb07e256a6 100644
--- a/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap
+++ b/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap
@@ -42,7 +42,6 @@ ShallowWrapper {
                 style={
                     Object {
                         "height": 2,
-                        "overflow": "hidden",
                         "position": "absolute",
                         "top": 0,
                       }
@@ -53,7 +52,6 @@ ShallowWrapper {
                 style={
                     Object {
                         "height": 4,
-                        "overflow": "hidden",
                         "position": "absolute",
                         "top": 2,
                       }
@@ -66,7 +64,6 @@ ShallowWrapper {
                 style={
                     Object {
                         "height": 6,
-                        "overflow": "hidden",
                         "position": "absolute",
                         "top": 6,
                       }
@@ -79,7 +76,6 @@ ShallowWrapper {
                 style={
                     Object {
                         "height": 8,
-                        "overflow": "hidden",
                         "position": "absolute",
                         "top": 12,
                       }
@@ -92,7 +88,6 @@ ShallowWrapper {
                 style={
                     Object {
                         "height": 10,
-                        "overflow": "hidden",
                         "position": "absolute",
                         "top": 20,
                       }
@@ -138,7 +133,6 @@ ShallowWrapper {
                         style={
                               Object {
                                     "height": 2,
-                                    "overflow": "hidden",
                                     "position": "absolute",
                                     "top": 0,
                                   }
@@ -149,7 +143,6 @@ ShallowWrapper {
                         style={
                               Object {
                                     "height": 4,
-                                    "overflow": "hidden",
                                     "position": "absolute",
                                     "top": 2,
                                   }
@@ -162,7 +155,6 @@ ShallowWrapper {
                         style={
                               Object {
                                     "height": 6,
-                                    "overflow": "hidden",
                                     "position": "absolute",
                                     "top": 6,
                                   }
@@ -175,7 +167,6 @@ ShallowWrapper {
                         style={
                               Object {
                                     "height": 8,
-                                    "overflow": "hidden",
                                     "position": "absolute",
                                     "top": 12,
                                   }
@@ -188,7 +179,6 @@ ShallowWrapper {
                         style={
                               Object {
                                     "height": 10,
-                                    "overflow": "hidden",
                                     "position": "absolute",
                                     "top": 20,
                                   }
@@ -402,7 +392,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 2,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 0,
                                                           }
@@ -413,7 +402,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 4,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 2,
                                                           }
@@ -426,7 +414,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 6,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 6,
                                                           }
@@ -439,7 +426,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 8,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 12,
                                                           }
@@ -452,7 +438,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 10,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 20,
                                                           }
@@ -498,7 +483,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 2,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 0,
                                                           }
@@ -509,7 +493,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 4,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 2,
                                                           }
@@ -522,7 +505,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 6,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 6,
                                                           }
@@ -535,7 +517,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 8,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 12,
                                                           }
@@ -548,7 +529,6 @@ ShallowWrapper {
                                         style={
                                                   Object {
                                                             "height": 10,
-                                                            "overflow": "hidden",
                                                             "position": "absolute",
                                                             "top": 20,
                                                           }
diff --git a/src/components/TracePage/TraceTimelineViewer/ListView/index.js b/src/components/TracePage/TraceTimelineViewer/ListView/index.js
index 572b375739..18516d4d19 100644
--- a/src/components/TracePage/TraceTimelineViewer/ListView/index.js
+++ b/src/components/TracePage/TraceTimelineViewer/ListView/index.js
@@ -358,7 +358,7 @@ export default class ListView extends React.Component<ListViewProps> {
       // (likely not transferable to other contexts, and instead is specific to
       // how we have the items rendered)
       const measureSrc: Element = node.firstElementChild || node;
-      const observed = measureSrc.scrollHeight;
+      const observed = measureSrc.clientHeight;
       const known = this._knownHeights.get(itemKey);
       if (observed !== known) {
         this._knownHeights.set(itemKey, observed);
@@ -437,7 +437,6 @@ export default class ListView extends React.Component<ListViewProps> {
         position: 'absolute',
         top: this._yPositions.ys[i],
         height: this._yPositions.heights[i],
-        overflow: 'hidden',
       };
       const itemKey = getKeyFromIndex(i);
       const attrs = { 'data-item-key': itemKey };
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBar.css b/src/components/TracePage/TraceTimelineViewer/SpanBar.css
index 1c88ab01d1..5d9cc54d1a 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanBar.css
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.css
@@ -29,6 +29,7 @@ THE SOFTWARE.
   top: 0;
   overflow: hidden;
   opacity: 0.5;
+  z-index: 0;
 }
 
 .span-row.is-expanded .SpanBar--wrapper,
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
index 5b4ee63a71..0c3bbd4595 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
@@ -21,19 +21,14 @@ THE SOFTWARE.
 */
 
 .span-name-column {
-  background: #fafafa;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
+  z-index: 1;
 }
 
-.span-row:hover .span-name-column {
-  background: #f8f8f8;
-}
-
-.span-row.is-expanded .span-name-column {
-  background: #f0f0f0;
-  outline: 1px solid #ddd;
+.span-name-column:hover {
+  z-index: 1;
 }
 
 .span-row.clipping-left .span-name-column::before {
@@ -47,19 +42,35 @@ THE SOFTWARE.
 }
 
 .span-name-wrapper {
+  background: #fafafa;
+  border-right: 1px solid #bbb;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.span-name-wrapper:hover {
+  float: left;
+  min-width: 100%;
+  overflow: visible;
+}
+
+.span-row:hover .span-name-wrapper {
+  background: #f8f8f8;
+  background: linear-gradient(90deg, #fafafa, #f8f8f8 75%, #eee);
+}
+
+.span-row.is-expanded .span-name-wrapper {
+  background: #f0f0f0;
+  outline: 1px solid #ddd;
+}
+
 .span-name {
-  outline: none;
-  color: #000;
   border-left: 4px solid;
+  color: #000;
   cursor: pointer;
   display: inline;
-}
-.span-name.is-detail-expanded {
-  display: inline-block;
+  outline: none;
+  padding-right: 0.25em;
 }
 
 .endpoint-name {
@@ -87,6 +98,7 @@ THE SOFTWARE.
 
 .span-row:hover .span-view {
   background-color: #f5f5f5;
+  outline: 1px solid #ddd;
 }
 
 .span-row.is-expanded .span-view {
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
index 7a2bd5b091..656d6dcb58 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
@@ -59,13 +59,6 @@ export default function SpanBarRow(props) {
     longLabel = `${label} | ${labelDetail}`;
     hintSide = 'right';
   }
-
-  let title = serviceName;
-  if (rpc) {
-    title += ` → ${rpc.serviceName}::${rpc.operationName}`;
-  } else {
-    title += `::${operationName}`;
-  }
   return (
     <TimelineRow
       className={`
@@ -76,7 +69,7 @@ export default function SpanBarRow(props) {
       `}
     >
       <TimelineRow.Left className="span-name-column">
-        <div className="span-name-wrapper" title={title}>
+        <div className="span-name-wrapper">
           <SpanTreeOffset
             level={depth + 1}
             hasChildren={isParent}
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
index 458cb376c9..2ba9299638 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
+++ b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
@@ -22,8 +22,7 @@ THE SOFTWARE.
 
 
 .detail-row-name-column {
-  position: absolute;
-  height: 100%;
+  border-right: 1px solid #bbb;
 }
 
 .detail-row-expanded-accent {
@@ -63,7 +62,7 @@ THE SOFTWARE.
 .detail-info-wrapper {
   background: #f5f5f5;
   border: 1px solid #d3d3d3;
-  border-left-color: #bbb;
+  border-left: none;
   border-top: 3px solid;
   box-shadow:
     inset 0 16px 20px -20px rgba(0,0,0,0.45),
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
index 8e77ef788b..fd1c97e4f5 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
+++ b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
@@ -58,17 +58,15 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
   } = props;
   return (
     <TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
-      <TimelineRow.Left>
-        <div className="detail-row-name-column">
-          <SpanTreeOffset level={span.depth + 1} />
-          <span>
-            <span
-              className="detail-row-expanded-accent"
-              onClick={detailToggle}
-              style={{ borderColor: color }}
-            />
-          </span>
-        </div>
+      <TimelineRow.Left className="detail-row-name-column">
+        <SpanTreeOffset level={span.depth + 1} />
+        <span>
+          <span
+            className="detail-row-expanded-accent"
+            onClick={detailToggle}
+            style={{ borderColor: color }}
+          />
+        </span>
       </TimelineRow.Left>
       <TimelineRow.Right>
         <div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>
diff --git a/src/components/TracePage/TraceTimelineViewer/Ticks.js b/src/components/TracePage/TraceTimelineViewer/Ticks.js
index c9601c5d45..943fa7770e 100644
--- a/src/components/TracePage/TraceTimelineViewer/Ticks.js
+++ b/src/components/TracePage/TraceTimelineViewer/Ticks.js
@@ -28,19 +28,22 @@ export default function Ticks(props) {
 
   return (
     <div>
-      {ticks.map((tick, i) =>
-        <div
-          key={tick}
-          className="span-row-tick"
-          style={{
-            left: `${tick * 100}%`,
-          }}
-        >
-          {labels &&
-            <span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
-              {labels[i]}
-            </span>}
-        </div>
+      {ticks.map(
+        (tick, i) =>
+          i
+            ? <div
+                key={tick}
+                className="span-row-tick"
+                style={{
+                  left: `${tick * 100}%`,
+                }}
+              >
+                {labels &&
+                  <span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
+                    {labels[i]}
+                  </span>}
+              </div>
+            : null
       )}
     </div>
   );
diff --git a/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css b/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css
index e909c66e62..8859d09f8e 100644
--- a/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css
+++ b/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css
@@ -30,6 +30,10 @@ THE SOFTWARE.
   z-index: 2;
 }
 
+.VirtualizedTraceView--labelHeader {
+  border-right: 1px solid #bbb;
+}
+
 .VirtualizedTraceView--spans {
   padding-top: 40px;
   position: relative;
diff --git a/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js b/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
index 8b944a7366..484a1ed1f5 100644
--- a/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
+++ b/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
@@ -344,7 +344,7 @@ class VirtualizedTraceView extends React.PureComponent<VirtualizedTraceViewProps
       <div className="">
         <TimelineRow className="VirtualizedTraceView--headerRow">
           <TimelineRow.Left>
-            <h3 className="m0 p1">Span Name</h3>
+            <h3 className="m0 p1 VirtualizedTraceView--labelHeader">Service &amp; Operation</h3>
           </TimelineRow.Left>
           <TimelineRow.Right>
             <Ticks