Initial version of the resource view (#2296)

* Added resource view selector button

* Showing resource boxes in the resource view

* Crude CPU resource view prototype

* Improved the viewMode state logic

* Extracted zooming into a separate wrapper component

* Split the layout selectors between graph-view and resource-view

* Proper zooming logic for the resource view

* Moved all node networks utils to selectors

* Improved the zoom caching logic

* Further refactoring of selectors

* Added sticky labels to the resource boxes

* Added panning translation limits in the resource view

* Renamed GridModeSelector -> ViewModeSelector

* Polished the topology resource view selection logic

* Search bar hidden in the resource view

* Added per-layer topology names to the resource view

* Made metric selectors work for the resource view

* Adjusted the viewport selectors

* Renamed viewport selector to canvas (+ maximal zoom fix)

* Showing more useful metric info in the resource box labels

* Fetching only necessary nodes for the resource view

* Refactored the resource view layer component

* Addressed first batch UI comments (from the Scope meeting)

* Switch to deep zooming transform in the resource view to avoid SVG precision errors

* Renamed and moved resource view components

* Polished all the resource view components

* Changing the available metrics selection

* Improved and polished the state transition logic for the resource view

* Separated zoom limits from the zoom active state

* Renaming and bunch of comments

* Addressed all the UI comments (@davkal + @fons)

* Made graph view selectors independent from resource view selectors

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

@@ -8,15 +8,15 @@ import {
   selectedScaleSelector,
   layoutNodesSelector,
   layoutEdgesSelector
-} from '../selectors/nodes-chart-layout';
+} from '../selectors/graph-view/layout';
 
 
 class NodesChartElements extends React.Component {
   render() {
-    const { layoutNodes, layoutEdges, selectedScale, transform, isAnimated } = this.props;
+    const { layoutNodes, layoutEdges, selectedScale, isAnimated } = this.props;
 
     return (
-      <g className="nodes-chart-elements" transform={transform}>
+      <g className="nodes-chart-elements">
         <NodesChartEdges
           layoutEdges={layoutEdges}
           selectedScale={selectedScale}

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

@@ -1,176 +1,76 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { debounce, pick } from 'lodash';
-import { fromJS } from 'immutable';
-
-import { event as d3Event, select } from 'd3-selection';
-import { zoom, zoomIdentity } from 'd3-zoom';
 
 import Logo from '../components/logo';
 import NodesChartElements from './nodes-chart-elements';
-import { clickBackground, cacheZoomState } from '../actions/app-actions';
-import { activeLayoutZoomSelector } from '../selectors/nodes-chart-zoom';
-import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/topology';
-import { ZOOM_CACHE_DEBOUNCE_INTERVAL } from '../constants/timer';
+import ZoomWrapper from '../components/zoom-wrapper';
+import { clickBackground } from '../actions/app-actions';
+import {
+  graphZoomLimitsSelector,
+  graphZoomStateSelector,
+} from '../selectors/graph-view/zoom';
 
-
-const ZOOM_CACHE_FIELDS = [
-  'zoomScale',
-  'minZoomScale',
-  'maxZoomScale',
-  'panTranslateX',
-  'panTranslateY',
-];
+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.state = {
-      zoomScale: 0,
-      minZoomScale: 0,
-      maxZoomScale: 0,
-      panTranslateX: 0,
-      panTranslateY: 0,
-    };
-
-    this.debouncedCacheZoom = debounce(this.cacheZoom.bind(this), ZOOM_CACHE_DEBOUNCE_INTERVAL);
     this.handleMouseClick = this.handleMouseClick.bind(this);
-    this.zoomed = this.zoomed.bind(this);
   }
 
-  componentDidMount() {
-    // distinguish pan/zoom from click
-    this.isZooming = false;
-    this.zoomRestored = false;
-    this.zoom = zoom().on('zoom', this.zoomed);
-
-    this.svg = select('.nodes-chart svg');
-    this.svg.call(this.zoom);
-
-    this.restoreCachedZoom(this.props);
-  }
-
-  componentWillUnmount() {
-    // undoing .call(zoom)
-    this.svg
-      .on('mousedown.zoom', null)
-      .on('onwheel', null)
-      .on('onmousewheel', null)
-      .on('dblclick.zoom', null)
-      .on('touchstart.zoom', null);
-
-    this.debouncedCacheZoom.cancel();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const layoutChanged = nextProps.layoutId !== this.props.layoutId;
-
-    // If the layout has changed (either active topology or its options) or
-    // relayouting has been requested, stop pending zoom caching event and
-    // ask for the new zoom settings to be restored again from the cache.
-    if (layoutChanged || nextProps.forceRelayout) {
-      this.debouncedCacheZoom.cancel();
-      this.zoomRestored = false;
-    }
-
-    if (!this.zoomRestored) {
-      this.restoreCachedZoom(nextProps);
+  handleMouseClick() {
+    if (this.props.selectedNodeId) {
+      this.props.clickBackground();
     }
   }
 
   render() {
-    // Not passing transform into child components for perf reasons.
-    const { panTranslateX, panTranslateY, zoomScale } = this.state;
-    const transform = `translate(${panTranslateX}, ${panTranslateY}) scale(${zoomScale})`;
-    const svgClassNames = this.props.isEmpty ? 'hide' : '';
-    const markerOffset = this.props.selectedNodeId ? '35' : '40';
-    const markerSize = this.props.selectedNodeId ? '10' : '30';
-
+    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>
-          <g transform="translate(24,24) scale(0.25)">
-            <Logo />
-          </g>
-          <NodesChartElements transform={transform} />
+        <svg id="canvas" width="100%" height="100%" onClick={this.handleMouseClick}>
+          <Logo transform="translate(24,24) scale(0.25)" />
+          <EdgeMarkerDefinition selectedNodeId={selectedNodeId} />
+          <ZoomWrapper
+            svg="canvas" disabled={selectedNodeId}
+            zoomLimitsSelector={graphZoomLimitsSelector}
+            zoomStateSelector={graphZoomStateSelector}>
+            <NodesChartElements />
+          </ZoomWrapper>
         </svg>
       </div>
     );
   }
-
-  cacheZoom() {
-    const zoomState = pick(this.state, ZOOM_CACHE_FIELDS);
-    this.props.cacheZoomState(fromJS(zoomState));
-  }
-
-  restoreCachedZoom(props) {
-    if (!props.layoutZoom.isEmpty()) {
-      const zoomState = props.layoutZoom.toJS();
-
-      // Restore the zooming settings
-      this.zoom = this.zoom.scaleExtent([zoomState.minZoomScale, zoomState.maxZoomScale]);
-      this.svg.call(this.zoom.transform, zoomIdentity
-        .translate(zoomState.panTranslateX, zoomState.panTranslateY)
-        .scale(zoomState.zoomScale));
-
-      // Update the state variables
-      this.setState(zoomState);
-      this.zoomRestored = true;
-    }
-  }
-
-  handleMouseClick() {
-    if (!this.isZooming || this.props.selectedNodeId) {
-      this.props.clickBackground();
-    } else {
-      this.isZooming = false;
-    }
-  }
-
-  zoomed() {
-    this.isZooming = true;
-    // don't pan while node is selected
-    if (!this.props.selectedNodeId) {
-      this.setState({
-        panTranslateX: d3Event.transform.x,
-        panTranslateY: d3Event.transform.y,
-        zoomScale: d3Event.transform.k
-      });
-      this.debouncedCacheZoom();
-    }
-  }
 }
 
 
 function mapStateToProps(state) {
   return {
-    layoutZoom: activeLayoutZoomSelector(state),
-    layoutId: JSON.stringify(activeTopologyZoomCacheKeyPathSelector(state)),
     selectedNodeId: state.get('selectedNodeId'),
-    forceRelayout: state.get('forceRelayout'),
   };
 }
 
 
 export default connect(
   mapStateToProps,
-  { clickBackground, cacheZoomState }
+  { clickBackground }
 )(NodesChart);

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

@@ -7,7 +7,7 @@ import NodeDetailsTable from '../components/node-details/node-details-table';
 import { clickNode, sortOrderChanged } from '../actions/app-actions';
 import { shownNodesSelector } from '../selectors/node-filters';
 
-import { CANVAS_MARGINS } from '../constants/styles';
+import { canvasMarginsSelector, canvasHeightSelector } from '../selectors/canvas';
 import { searchNodeMatchesSelector } from '../selectors/search';
 import { getNodeColor } from '../utils/color-utils';
 
@@ -97,14 +97,15 @@ class NodesGrid extends React.Component {
   }
 
   render() {
-    const { nodes, height, gridSortedBy, gridSortedDesc,
+    const { nodes, height, gridSortedBy, gridSortedDesc, canvasMargins,
       searchNodeMatches, searchQuery } = this.props;
     const cmpStyle = {
       height,
-      marginTop: CANVAS_MARGINS.top,
-      paddingLeft: CANVAS_MARGINS.left,
-      paddingRight: CANVAS_MARGINS.right,
+      marginTop: canvasMargins.top,
+      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 = {
@@ -146,6 +147,8 @@ class NodesGrid extends React.Component {
 function mapStateToProps(state) {
   return {
     nodes: shownNodesSelector(state),
+    canvasMargins: canvasMarginsSelector(state),
+    height: canvasHeightSelector(state),
     gridSortedBy: state.get('gridSortedBy'),
     gridSortedDesc: state.get('gridSortedDesc'),
     currentTopology: state.get('currentTopology'),
@@ -153,7 +156,6 @@ function mapStateToProps(state) {
     searchNodeMatches: searchNodeMatchesSelector(state),
     searchQuery: state.get('searchQuery'),
     selectedNodeId: state.get('selectedNodeId'),
-    height: state.getIn(['viewport', 'height']),
   };
 }