diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index 74c0db35a8..4f0c04dc6d 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/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); } }; } diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index ab69437b94..84f3866def 100644 --- a/client/app/scripts/charts/node.js +++ b/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; diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index c825990b80..0b20b79e8e 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -7,6 +7,26 @@ 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 ( + + + + + + ); +}; + class NodesChart extends React.Component { constructor(props, context) { super(props, context); @@ -14,45 +34,26 @@ class NodesChart extends React.Component { 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 (
- - - - - - + - + +
); } - - handleMouseClick() { - if (this.props.selectedNodeId) { - this.props.clickBackground(); - } - } } diff --git a/client/app/scripts/components/cachable-zoom-wrapper.js b/client/app/scripts/components/cachable-zoom-wrapper.js index e0f6668d05..e3f80a3580 100644 --- a/client/app/scripts/components/cachable-zoom-wrapper.js +++ b/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); diff --git a/client/app/scripts/components/nodes-resources.js b/client/app/scripts/components/nodes-resources.js index c0c11a4e36..aaae29be0e 100644 --- a/client/app/scripts/components/nodes-resources.js +++ b/client/app/scripts/components/nodes-resources.js @@ -21,12 +21,10 @@ class NodesResources extends React.Component { render() { return ( -
- +
+ - + {transform => this.renderLayers(transform)} diff --git a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js index 082656bd2f..519b0b2e84 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js +++ b/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. diff --git a/client/app/scripts/selectors/resource-view/layers.js b/client/app/scripts/selectors/resource-view/layers.js index 4df733aca0..d7073947f6 100644 --- a/client/app/scripts/selectors/resource-view/layers.js +++ b/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({ diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index a0d5430abd..369d28ac7b 100644 --- a/client/app/styles/_base.scss +++ b/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; }