Polished all the resource view components

client/app/scripts/actions/app-actions.js

@@ -351,22 +351,33 @@ export function clickResumeUpdate() {
   };
 }
 
+function updateTopology(dispatch, getState) {
+  const state = getState();
+  updateRoute(getState);
+  // update all request workers with new options
+  resetUpdateBuffer();
+  // NOTE: This is currently not needed for our static resource
+  // view,but we'll need it here later and it's simpler to just
+  // keep it than to redo the nodes delta updating logic.
+  getNodesDelta(
+    getCurrentTopologyUrl(state),
+    activeTopologyOptionsSelector(state),
+    dispatch
+  );
+  // Update the nodes for all topologies that appear in the current resource view.
+  if (isResourceViewModeSelector(state)) {
+    getResourceViewNodesSnapshot(getState, dispatch);
+  }
+}
+
 export function clickShowTopologyForNode(topologyId, nodeId) {
   return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE,
       topologyId,
       nodeId
     });
-    updateRoute(getState);
-    // update all request workers with new options
-    resetUpdateBuffer();
-    const state = getState();
-    getNodesDelta(
-      getCurrentTopologyUrl(state),
-      activeTopologyOptionsSelector(state),
-      dispatch
-    );
+    updateTopology(dispatch, getState);
   };
 }
 
@@ -376,15 +387,7 @@ export function clickTopology(topologyId) {
       type: ActionTypes.CLICK_TOPOLOGY,
       topologyId
     });
-    updateRoute(getState);
-    // update all request workers with new options
-    resetUpdateBuffer();
-    const state = getState();
-    getNodesDelta(
-      getCurrentTopologyUrl(state),
-      activeTopologyOptionsSelector(state),
-      dispatch
-    );
+    updateTopology(dispatch, getState);
   };
 }
 
@@ -732,8 +735,7 @@ export function route(urlState) {
     // nodes for the current topology, but also the nodes of all the topologies that make
     // the layers in the resource view.
     if (isResourceViewModeSelector(state)) {
-      // Get all the nodes for the current resource view layout in the next run-cycle.
-      setTimeout(() => { getResourceViewNodesSnapshot(getState, dispatch); }, 0);
+      getResourceViewNodesSnapshot(getState, dispatch);
     }
   };
 }

client/app/scripts/charts/node.js

@@ -97,7 +97,6 @@ class Node extends React.Component {
       exportingGraph, showingNetworks, stack, id, metric } = this.props;
     const { hovered } = this.state;
 
-    // console.log(metric && metric.toJS());
     const color = getNodeColor(rank, label, pseudo);
     const truncate = !focused && !hovered;
     const labelOffsetY = (showingNetworks && networks) ? 40 : 28;

client/app/scripts/charts/nodes-chart.js

@@ -7,52 +7,53 @@ import CachableZoomWrapper from '../components/cachable-zoom-wrapper';
 import { clickBackground } from '../actions/app-actions';
 
 
+const EdgeMarkerDefinition = ({ selectedNodeId }) => {
+  const markerOffset = selectedNodeId ? '35' : '40';
+  const markerSize = selectedNodeId ? '10' : '30';
+  return (
+    <defs>
+      <marker
+        className="edge-marker"
+        id="end-arrow"
+        viewBox="1 0 10 10"
+        refX={markerOffset}
+        refY="3.5"
+        markerWidth={markerSize}
+        markerHeight={markerSize}
+        orient="auto">
+        <polygon className="link" points="0 0, 10 3.5, 0 7" />
+      </marker>
+    </defs>
+  );
+};
+
 class NodesChart extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     this.handleMouseClick = this.handleMouseClick.bind(this);
   }
 
-  render() {
-    // TODO: What to do with empty?
-    const { isEmpty, selectedNodeId } = this.props;
-    const markerOffset = selectedNodeId ? '35' : '40';
-    const markerSize = selectedNodeId ? '10' : '30';
-    const svgClassNames = isEmpty ? 'hide' : '';
+  handleMouseClick() {
+    if (this.props.selectedNodeId) {
+      this.props.clickBackground();
+    }
+  }
 
+  render() {
+    const { selectedNodeId } = this.props;
     return (
       <div className="nodes-chart">
-        <svg
-          width="100%" height="100%" id="nodes-chart-canvas"
-          className={svgClassNames} onClick={this.handleMouseClick}>
-          <defs>
-            <marker
-              className="edge-marker"
-              id="end-arrow"
-              viewBox="1 0 10 10"
-              refX={markerOffset}
-              refY="3.5"
-              markerWidth={markerSize}
-              markerHeight={markerSize}
-              orient="auto">
-              <polygon className="link" points="0 0, 10 3.5, 0 7" />
-            </marker>
-          </defs>
+        <svg id="canvas" width="100%" height="100%" onClick={this.handleMouseClick}>
           <Logo transform="translate(24,24) scale(0.25)" />
-          <CachableZoomWrapper disabled={selectedNodeId}>
+          <EdgeMarkerDefinition selectedNodeId={selectedNodeId} />
+          <CachableZoomWrapper svg="canvas" disabled={selectedNodeId}>
             <NodesChartElements />
           </CachableZoomWrapper>
         </svg>
       </div>
     );
   }
-
-  handleMouseClick() {
-    if (this.props.selectedNodeId) {
-      this.props.clickBackground();
-    }
-  }
 }
 
 

client/app/scripts/charts/nodes-grid.js

@@ -105,6 +105,7 @@ class NodesGrid extends React.Component {
       paddingLeft: canvasMargins.left,
       paddingRight: canvasMargins.right,
     };
+    // TODO: What are 24 and 18? Use a comment or extract into constants.
     const tbodyHeight = height - 24 - 18;
     const className = 'scroll-body';
     const tbodyStyle = {

client/app/scripts/components/app.js

@@ -112,7 +112,6 @@ class App extends React.Component {
       showingMetricsSelector, showingNetworkSelector, showingTroubleshootingMenu } = this.props;
     const isIframe = window !== window.top;
 
-    // TODO: Remove 'grid', 'topo' constants.
     return (
       <div className="scope-app">
         {showingDebugToolbar() && <DebugToolbar />}

client/app/scripts/components/cachable-zoom-wrapper.js

@@ -7,6 +7,7 @@ import { event as d3Event, select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
 import { cacheZoomState } from '../actions/app-actions';
+import { transformToString } from '../utils/transform-utils';
 import { activeLayoutZoomSelector } from '../selectors/zooming';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/topology';
 import {
@@ -42,8 +43,7 @@ class CachableZoomWrapper extends React.Component {
   componentDidMount() {
     this.zoomRestored = false;
     this.zoom = zoom().on('zoom', this.zoomed);
-    // TODO: Make this correct
-    this.svg = select('.nodes-chart svg');
+    this.svg = select(`svg#${this.props.svg}`);
 
     this.setZoomTriggers(!this.props.disabled);
     this.restoreCachedZoom(this.props);
@@ -77,13 +77,15 @@ class CachableZoomWrapper extends React.Component {
   }
 
   render() {
+    // `forwardTransform` says whether the zoom transform is forwarded to the child
+    // component. The advantage of that is more control rendering control in the
+    // children, while the disadvantage is that it's slower, as all the children
+    // get updated on every zoom/pan action.
     const { children, forwardTransform } = this.props;
-    const { translateX, translateY, scaleX, scaleY } = this.state;
-    const transform = `translate(${translateX},${translateY}) scale(${scaleX},${scaleY})`;
+    const transform = forwardTransform ? '' : transformToString(this.state);
 
-    // Not passing transform into child components by default for perf reasons.
     return (
-      <g className="zoom-container" transform={forwardTransform ? '' : transform}>
+      <g className="cachable-zoom-wrapper" transform={transform}>
         {forwardTransform ? children(this.state) : children}
       </g>
     );
@@ -97,7 +99,12 @@ class CachableZoomWrapper extends React.Component {
     }
   }
 
+  // Decides which part of the zoom state is cachable depending
+  // on the horizontal/vertical degrees of freedom.
   cachableState(state = this.state) {
+    // TODO: Probably shouldn't cache the limits if the layout can
+    // change a lot. However, before removing them from here, we have
+    // to make sure we can always get them from the default zooms.
     let cachableFields = [
       'minTranslateX', 'maxTranslateX',
       'minTranslateY', 'maxTranslateY',
@@ -116,30 +123,38 @@ class CachableZoomWrapper extends React.Component {
     this.props.cacheZoomState(fromJS(this.cachableState()));
   }
 
+  // Restore the zooming settings
   restoreCachedZoom(props) {
     if (!props.layoutZoom.isEmpty()) {
       const zoomState = props.layoutZoom.toJS();
 
-      // Restore the zooming settings
+      // Scaling limits are always set.
       this.zoom = this.zoom.scaleExtent([zoomState.minScale, zoomState.maxScale]);
 
+      // Translation limits are optional.
       if (props.bounded) {
         this.zoom = this.zoom
+          // Translation limits are only set if explicitly demanded (currently we are using them
+          // in the resource view, but not in the graph view, although I think the idea would be
+          // to use them everywhere).
           .translateExtent([
             [zoomState.minTranslateX, zoomState.minTranslateY],
             [zoomState.maxTranslateX, zoomState.maxTranslateY],
           ])
+          // This is to ensure that the translation limits are properly
+          // centered, so that the canvas margins are respected.
           .extent([
             [props.canvasMargins.left, props.canvasMargins.top],
             [props.canvasMargins.left + props.width, props.canvasMargins.top + props.height]
           ]);
       }
 
+      // After the limits have been set, update the zoom.
       this.svg.call(this.zoom.transform, zoomIdentity
         .translate(zoomState.translateX, zoomState.translateY)
         .scale(zoomState.scaleX, zoomState.scaleY));
 
-      // Update the state variables
+      // Update the state variables.
       this.setState(zoomState);
       this.zoomRestored = true;
     }

client/app/scripts/components/help-panel.js

@@ -149,10 +149,10 @@ function renderFieldsPanel(currentTopologyName, searchableFields) {
 }
 
 
-function HelpPanel({currentTopologyName, searchableFields, onClickClose}) {
+function HelpPanel({ currentTopologyName, searchableFields, onClickClose, canvasMargins }) {
   return (
     <div className="help-panel-wrapper">
-      <div className="help-panel" style={{marginTop: this.props.canvasMargins.top}}>
+      <div className="help-panel" style={{marginTop: canvasMargins.top}}>
         <div className="help-panel-header">
           <h2>Help</h2>
         </div>