Fixup

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

@@ -35,6 +35,7 @@ import {
  } from '../constants/naming';
 
 const log = debug('scope:app-actions');
+// const MULTIPLE_TOPOLOGIES_FETCH_DELAY_MS = 1200;
 
 export function showHelp() {
   return {type: ActionTypes.SHOW_HELP};
@@ -367,6 +368,8 @@ export function clickShowTopologyForNode(topologyId, nodeId) {
       activeTopologyOptionsSelector(state),
       dispatch
     );
+    // Update the nodes for all topologies that appear in the current resource view.
+    getResourceViewNodesSnapshot(getState, dispatch);
   };
 }
 
@@ -385,6 +388,8 @@ export function clickTopology(topologyId) {
       activeTopologyOptionsSelector(state),
       dispatch
     );
+    // Update the nodes for all topologies that appear in the current resource view.
+    getResourceViewNodesSnapshot(getState, dispatch);
   };
 }
 
@@ -733,7 +738,7 @@ export function route(urlState) {
     // 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);
+      setTimeout(() => { getResourceViewNodesSnapshot(getState, dispatch); }, 100);
     }
   };
 }

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 className="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/components/cachable-zoom-wrapper.js

@@ -42,8 +42,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);

client/app/scripts/components/nodes-resources.js

@@ -21,12 +21,10 @@ class NodesResources extends React.Component {
 
   render() {
     return (
-      <div className="nodes-chart">
-        <svg
-          width="100%" height="100%"
-          id="nodes-chart-canvas">
+      <div className="nodes-resources">
+        <svg className="canvas" width="100%" height="100%">
           <Logo transform="translate(24,24) scale(0.25)" />
-          <CachableZoomWrapper bounded forwardTransform fixVertical>
+          <CachableZoomWrapper svg="canvas" bounded forwardTransform fixVertical>
             {transform => this.renderLayers(transform)}
           </CachableZoomWrapper>
         </svg>

client/app/scripts/components/nodes-resources/node-resources-metric-box.js

@@ -34,7 +34,7 @@ const transformedDimensions = (props) => {
   const xStart = Math.max(RESOURCES_LAYER_TITLE_WIDTH, x);
   const xEnd = Math.min(x + width, props.viewportWidth);
 
-  // Update the horizontal tranform with trimmed values.
+  // Update the horizontal transform with trimmed values.
   return {
     width: xEnd - xStart,
     height,
@@ -74,7 +74,7 @@ class NodeResourcesMetricBox extends React.Component {
     const { x, y, width } = this.state;
 
     const showInfo = width >= RESOURCES_LABEL_MIN_SIZE;
-    const showNode = width >= 1;
+    const showNode = width >= 1; // px
 
     // Don't display the nodes which are less than 1px wide.
     // TODO: Show `+ 31 nodes` kind of tag in their stead.

client/app/scripts/selectors/resource-view/layers.js

@@ -69,7 +69,8 @@ const decoratedNodesByTopologySelector = createSelector(
         .map(nodeResourceBoxDecorator)
         .map(nodeParentNodeDecorator);
       const filteredTopologyNodes = decoratedTopologyNodes
-        .filter(node => node.get('parentNodeId') || index === 0)
+        .filter(node => nodesByTopology.hasIn([lastLayerTopologyId, node.get('parentNodeId')])
+          || index === 0)
         .filter(node => node.get('width'));
 
       nodesByTopology = nodesByTopology.set(layerTopologyId, filteredTopologyNodes);
@@ -107,7 +108,7 @@ export const positionedNodesByTopologySelector = createSelector(
         const parentWidth = result.getIn([parentTopologyId, parentNodeId, 'width'], offset);
         const overhead = (offset - parentOffset) / parentWidth;
         if (overhead > 1) {
-          console.log(overhead);
+          // console.log(overhead);
           bucket.forEach((_, nodeId) => {
             const node = result.getIn([layerTopologyId, nodeId]);
             result = result.mergeIn([layerTopologyId, nodeId], makeMap({

client/app/styles/_base.scss

@@ -249,7 +249,7 @@
 
 }
 
-.nodes-chart {
+.nodes-chart, .nodes-resources {
 
   &-error, &-loading {
     @extend .hideable;
@@ -307,11 +307,6 @@
     transition: opacity .2s $base-ease;
     text-align: center;
 
-    .node-network {
-      // stroke: $background-lighter-color;
-      // stroke-width: 4px;
-    }
-
     .node-label {
       color: $text-color;
     }