Make left column adjustable in trace detail (#74)

* Fix #63 Left column adjustable in trace detail

* Simplify span-name column drag code

* Remove unused hint styling

* Trace view Loading indicator, handle next trace

* Flow for remaining TraceTimelineViewer components

* Use lodash get to simplify property access

src/components/TracePage/TraceTimelineViewer/SpanBar.css

@@ -37,7 +37,6 @@ THE SOFTWARE.
   opacity: 1;
 }
 
-/* Add the hint related selector to override the hint styling (via specificity) */
 .SpanBar--bar {
   border-radius: 3px;
   min-width: 2px;

src/components/TracePage/TraceTimelineViewer/SpanBar.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,17 +20,32 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
 
 import './SpanBar.css';
 
-function toPercent(value) {
+type SpanBarProps = {
+  color: string,
+  hintSide: string,
+  label: string,
+  onClick: (SyntheticMouseEvent<any>) => void,
+  viewEnd: number,
+  viewStart: number,
+  rpc: {
+    viewStart: number,
+    viewEnd: number,
+    color: string,
+  },
+  setLongLabel: () => void,
+  setShortLabel: () => void,
+};
+
+function toPercent(value: number) {
   return `${value * 100}%`;
 }
 
-function SpanBar(props) {
+function SpanBar(props: SpanBarProps) {
   const { viewEnd, viewStart, color, label, hintSide, onClick, setLongLabel, setShortLabel, rpc } = props;
 
   return (
@@ -59,29 +76,6 @@ function SpanBar(props) {
   );
 }
 
-SpanBar.propTypes = {
-  rpc: PropTypes.shape({
-    viewStart: PropTypes.number,
-    viewEnd: PropTypes.number,
-    color: PropTypes.string,
-  }),
-  viewStart: PropTypes.number.isRequired,
-  viewEnd: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired,
-  hintSide: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  setLongLabel: PropTypes.func,
-  setShortLabel: PropTypes.func,
-};
-
-SpanBar.defaultProps = {
-  rpc: null,
-  onClick: null,
-  onMouseOver: null,
-  onMouseOut: null,
-};
-
 export default compose(
   withState('label', 'setLabel', props => props.shortLabel),
   withProps(({ setLabel, shortLabel, longLabel }) => ({

src/components/TracePage/TraceTimelineViewer/SpanBarRow.css

@@ -43,12 +43,12 @@ THE SOFTWARE.
 
 .span-name-wrapper {
   background: #fafafa;
-  border-right: 1px solid #bbb;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .span-name-wrapper:hover {
+  border-right: 1px solid #bbb;
   float: left;
   min-width: 100%;
   overflow: visible;
@@ -79,7 +79,6 @@ THE SOFTWARE.
 
 .span-name:hover > .endpoint-name {
   color: #000;
-  font-weight: bold;
 }
 
 .span-svc-name {

src/components/TracePage/TraceTimelineViewer/SpanBarRow.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,7 +21,6 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import TimelineRow from './TimelineRow';
 import SpanTreeOffset from './SpanTreeOffset';
@@ -28,10 +29,38 @@ import Ticks from './Ticks';
 
 import './SpanBarRow.css';
 
-export default function SpanBarRow(props) {
+type SpanBarRowProps = {
+  className: string,
+  color: string,
+  columnDivision: number,
+  depth: number,
+  isChildrenExpanded: boolean,
+  isDetailExapnded: boolean,
+  isFilteredOut: boolean,
+  isParent: boolean,
+  label: string,
+  onDetailToggled: () => void,
+  onChildrenToggled: () => void,
+  operationName: string,
+  numTicks: number,
+  rpc: ?{
+    viewStart: number,
+    viewEnd: number,
+    color: string,
+    operationName: string,
+    serviceName: string,
+  },
+  serviceName: string,
+  showErrorIcon: boolean,
+  viewEnd: number,
+  viewStart: number,
+};
+
+export default function SpanBarRow(props: SpanBarRowProps) {
   const {
     className,
     color,
+    columnDivision,
     depth,
     isChildrenExpanded,
     isDetailExapnded,
@@ -40,11 +69,11 @@ export default function SpanBarRow(props) {
     label,
     onDetailToggled,
     onChildrenToggled,
+    numTicks,
     operationName,
     rpc,
     serviceName,
     showErrorIcon,
-    ticks,
     viewEnd,
     viewStart,
   } = props;
@@ -68,7 +97,7 @@ export default function SpanBarRow(props) {
         ${isFilteredOut ? 'is-filtered-out' : ''}
       `}
     >
-      <TimelineRow.Left className="span-name-column">
+      <TimelineRow.Cell className="span-name-column" width={columnDivision}>
         <div className="span-name-wrapper">
           <SpanTreeOffset
             level={depth + 1}
@@ -101,9 +130,14 @@ export default function SpanBarRow(props) {
             </span>
           </a>
         </div>
-      </TimelineRow.Left>
-      <TimelineRow.Right className="span-view" style={{ cursor: 'pointer' }} onClick={onDetailToggled}>
-        <Ticks ticks={ticks} />
+      </TimelineRow.Cell>
+      <TimelineRow.Cell
+        className="span-view"
+        style={{ cursor: 'pointer' }}
+        width={1 - columnDivision}
+        onClick={onDetailToggled}
+      >
+        <Ticks numTicks={numTicks} />
         <SpanBar
           rpc={rpc}
           viewStart={viewStart}
@@ -113,37 +147,11 @@ export default function SpanBarRow(props) {
           longLabel={longLabel}
           hintSide={hintSide}
         />
-      </TimelineRow.Right>
+      </TimelineRow.Cell>
     </TimelineRow>
   );
 }
 
-SpanBarRow.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.string.isRequired,
-  depth: PropTypes.number.isRequired,
-  isChildrenExpanded: PropTypes.bool.isRequired,
-  isDetailExapnded: PropTypes.bool.isRequired,
-  isFilteredOut: PropTypes.bool.isRequired,
-  isParent: PropTypes.bool.isRequired,
-  label: PropTypes.string.isRequired,
-  onDetailToggled: PropTypes.func.isRequired,
-  onChildrenToggled: PropTypes.func.isRequired,
-  operationName: PropTypes.string.isRequired,
-  rpc: PropTypes.shape({
-    viewStart: PropTypes.number,
-    viewEnd: PropTypes.number,
-    color: PropTypes.string,
-    operationName: PropTypes.string,
-    serviceName: PropTypes.string,
-  }),
-  serviceName: PropTypes.string.isRequired,
-  showErrorIcon: PropTypes.bool.isRequired,
-  ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
-  viewEnd: PropTypes.number.isRequired,
-  viewStart: PropTypes.number.isRequired,
-};
-
 SpanBarRow.defaultProps = {
   className: '',
   rpc: null,

src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css

@@ -20,15 +20,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-
-.detail-row-name-column {
-  border-right: 1px solid #bbb;
-}
-
 .detail-row-expanded-accent {
   cursor: pointer;
-  position: absolute;
   height: 100%;
+  overflow: hidden;
+  position: absolute;
   width: 100%;
 }
 
@@ -62,7 +58,7 @@ THE SOFTWARE.
 .detail-info-wrapper {
   background: #f5f5f5;
   border: 1px solid #d3d3d3;
-  border-left: none;
+  border-left: 1px solid #bbb;
   border-top: 3px solid;
   box-shadow:
     inset 0 16px 20px -20px rgba(0,0,0,0.45),

src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js

@@ -32,6 +32,7 @@ import './SpanDetailRow.css';
 
 type SpanDetailRowProps = {
   color: string,
+  columnDivision: number,
   detailState: DetailState,
   detailToggle: string => void,
   isFilteredOut: boolean,
@@ -46,6 +47,7 @@ type SpanDetailRowProps = {
 export default function SpanDetailRow(props: SpanDetailRowProps) {
   const {
     color,
+    columnDivision,
     detailState,
     detailToggle,
     isFilteredOut,
@@ -58,7 +60,7 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
   } = props;
   return (
     <TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
-      <TimelineRow.Left className="detail-row-name-column">
+      <TimelineRow.Cell width={columnDivision}>
         <SpanTreeOffset level={span.depth + 1} />
         <span>
           <span
@@ -67,8 +69,8 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
             style={{ borderColor: color }}
           />
         </span>
-      </TimelineRow.Left>
-      <TimelineRow.Right>
+      </TimelineRow.Cell>
+      <TimelineRow.Cell width={1 - columnDivision}>
         <div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>
           <SpanDetail
             detailState={detailState}
@@ -80,7 +82,7 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
             traceStartTime={traceStartTime}
           />
         </div>
-      </TimelineRow.Right>
+      </TimelineRow.Cell>
     </TimelineRow>
   );
 }

src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,12 +20,19 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import './SpanTreeOffset.css';
 
-export default function SpanTreeOffset({ level, hasChildren, childrenVisible, onClick }) {
+type SpanTreeOffsetProps = {
+  level: number,
+  hasChildren: boolean,
+  childrenVisible: boolean,
+  onClick: ?() => void,
+};
+
+export default function SpanTreeOffset(props: SpanTreeOffsetProps) {
+  const { level, hasChildren, childrenVisible, onClick } = props;
   const className = hasChildren ? 'span-kids-toggle' : '';
   const icon = hasChildren
     ? <i className={`span-tree-toggle-icon icon square ${childrenVisible ? 'outline minus' : 'plus'}`} />
@@ -36,13 +45,6 @@ export default function SpanTreeOffset({ level, hasChildren, childrenVisible, on
   );
 }
 
-SpanTreeOffset.propTypes = {
-  level: PropTypes.number.isRequired,
-  hasChildren: PropTypes.bool,
-  childrenVisible: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
 SpanTreeOffset.defaultProps = {
   hasChildren: false,
   childrenVisible: false,