Netview review feedback

client/app/scripts/charts/node-networks-overlay.js

@@ -5,26 +5,32 @@ import { getNodeColor } from '../utils/color-utils';
 import { isContrastMode } from '../utils/contrast-utils';
 
 
-const h = 5;
+const barHeight = 5;
+const barMarginTop = 6;
+const labelHeight = 32;
+// Gap size between bar segments.
 const padding = 0.05;
 const rx = 1;
 const ry = rx;
-const labelOffset = 38;
+const x = d3.scale.ordinal();
 
-function NodeNetworksOverlay({size, stack, networks = makeList()}) {
-  const r = size * 0.5;
-  const offset = r + labelOffset;
-  const w = Math.max(size, (size / 4) * networks.size);
-  const x = d3.scale.ordinal()
-    .domain(networks.map((n, i) => i).toJS())
-    .rangeBands([w * -0.5, w * 0.5], padding, 0);
+function NodeNetworksOverlay({labelOffsetY, size, stack, networks = makeList()}) {
+  const offset = labelOffsetY + labelHeight + barMarginTop;
+
+  // Min size is about a quarter of the width, feels about right.
+  const minBarWidth = (size / 4);
+  const barWidth = Math.max(size, minBarWidth * networks.size);
+
+  // Update singleton scale.
+  x.domain(networks.map((n, i) => i).toJS());
+  x.rangeBands([barWidth * -0.5, barWidth * 0.5], padding, 0);
 
   const bars = networks.map((n, i) => (
     <rect
       x={x(i)}
       y={offset}
       width={x.rangeBand()}
-      height={h}
+      height={barHeight}
       rx={rx}
       ry={ry}
       className="node-network"

client/app/scripts/charts/node.js

@@ -99,6 +99,7 @@ class Node extends React.Component {
 
     const labelClassName = classnames('node-label', { truncate });
     const subLabelClassName = classnames('node-sublabel', { truncate });
+    const matchedResultsStyle = showingNetworks ? { marginTop: 6 } : null;
 
     const NodeShapeType = getNodeShape(this.props);
     const useSvgLabels = exportingGraph;
@@ -120,7 +121,8 @@ class Node extends React.Component {
               <div className={subLabelClassName}>
                 <MatchedText text={subLabel} match={matches.get('sublabel')} />
               </div>
-              {!blurred && <MatchedResults matches={matches.get('metadata')} />}
+              {!blurred && <MatchedResults matches={matches.get('metadata')}
+                style={matchedResultsStyle} />}
             </div>
           </foreignObject>}
 
@@ -131,8 +133,8 @@ class Node extends React.Component {
             {...this.props} />
         </g>
 
-        {showingNetworks && <NodeNetworksOverlay id={this.props.id} size={size}
-          networks={networks} stack={stack} />}
+        {showingNetworks && <NodeNetworksOverlay labelOffsetY={labelOffsetY}
+          size={size} networks={networks} stack={stack} />}
       </g>
     );
   }

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

@@ -56,7 +56,7 @@ function mapStateToProps(state) {
     searchNodeMatches: state.getIn(['searchNodeMatches', currentTopologyId]),
     searchQuery: state.get('searchQuery'),
     selectedNetwork: state.get('selectedNetwork'),
-    selectedNetworkNodes: state.get('networkNodes').get(state.get('selectedNetwork'), makeList()),
+    selectedNetworkNodes: state.getIn(['networkNodes', state.get('selectedNetwork')], makeList()),
     selectedNodeId: state.get('selectedNodeId'),
   };
 }

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

@@ -13,7 +13,7 @@ const DEFAULT_MARGINS = {top: 0, left: 0};
 const DEFAULT_SCALE = val => val * 2;
 const NODE_SIZE_FACTOR = 1;
 const NODE_SEPARATION_FACTOR = 3.0;
-const RANK_SEPARATION_FACTOR = 2.5;
+const RANK_SEPARATION_FACTOR = 3.0;
 let layoutRuns = 0;
 let layoutRunsTrivial = 0;
 

client/app/scripts/components/matched-results.js

@@ -25,7 +25,7 @@ class MatchedResults extends React.Component {
   }
 
   render() {
-    const { matches } = this.props;
+    const { matches, style } = this.props;
 
     if (!matches) {
       return null;
@@ -42,7 +42,7 @@ class MatchedResults extends React.Component {
     }
 
     return (
-      <div className="matched-results">
+      <div className="matched-results" style={style}>
         {matches.keySeq().take(SHOW_ROW_COUNT).map(fieldId => this.renderMatch(matches, fieldId))}
         {moreFieldMatches && <div className="matched-results-more" title={moreFieldMatchesTitle}>
           {`${moreFieldMatches.size} more matches`}

client/app/scripts/components/networks-selector.js

@@ -33,7 +33,7 @@ class NetworkSelector extends React.Component {
     });
 
     const style = {
-      borderBottomColor: 'transparent'
+      borderBottomColor: showingNetworks ? '#A2A0B3' : 'transparent'
     };
 
     return (

client/app/scripts/reducers/root.js

@@ -6,6 +6,7 @@ import { fromJS, is as isDeepEqual, List as makeList, Map as makeMap,
 import ActionTypes from '../constants/action-types';
 import { EDGE_ID_SEPARATOR } from '../constants/naming';
 import { applyPinnedSearches, updateNodeMatches } from '../utils/search-utils';
+import { getNetworkNodes, getAvailableNetworks } from '../utils/network-view-utils';
 import { longestCommonPrefix } from '../utils/string-utils';
 import { findTopologyById, getAdjacentNodes, setTopologyUrlsById,
   updateTopologyIds, filterHiddenTopologies } from '../utils/topology-utils';
@@ -82,24 +83,6 @@ function processTopologies(state, nextTopologies) {
   return state.mergeDeepIn(['topologies'], immNextTopologies);
 }
 
-function getNetworkNodes(nodes) {
-  const networks = {};
-  nodes.forEach(node => (node.get('networks') || makeList()).forEach(n => {
-    const networkId = n.get('id');
-    networks[networkId] = (networks[networkId] || []).concat([node.get('id')]);
-  }));
-  return fromJS(networks);
-}
-
-function getAvailableNetworks(nodes) {
-  return nodes
-    .valueSeq()
-    .flatMap(node => node.get('networks') || makeList())
-    .toSet()
-    .toList()
-    .sortBy(m => m.get('label'));
-}
-
 function setTopology(state, topologyId) {
   state = state.set('currentTopology', findTopologyById(
     state.get('topologies'), topologyId));

client/app/styles/main.less

@@ -1145,6 +1145,7 @@ h2 {
     padding: 3px 12px;
     cursor: pointer;
     display: inline-block;
+    background-color: @background-color;
 
     &-selected, &:hover {
       color: @text-darker-color;