Added graph complexity check on page load

client/app/scripts/components/__tests__/node-details-test.js

@@ -34,7 +34,8 @@ describe('NodeDetails', () => {
     details = {label: 'Node 1'};
     const c = TestUtils.renderIntoDocument(
       <Provider store={configureStore()}>
-        <NodeDetails nodes={nodes}
+        <NodeDetails topologyId="containers" nodes={nodes}
+
           nodeId={nodeId} details={details}
         />
       </Provider>

client/app/scripts/constants/naming.js

@@ -1,2 +1,3 @@
 
 export const EDGE_ID_SEPARATOR = '-';
+export const GRAPH_COMPLEXITY_THRESH = 500;

client/app/scripts/reducers/__tests__/root-test.js

@@ -1,5 +1,4 @@
-const is = require('immutable').is;
-
+import {is, fromJS} from 'immutable';
 // Root reducer test suite using Jasmine matchers
 
 describe('RootReducer', () => {
@@ -44,6 +43,34 @@ describe('RootReducer', () => {
     }
   };
 
+  const topologies = [{
+    hide_if_empty: true,
+    name: 'Processes',
+    rank: 1,
+    sub_topologies: [],
+    url: '/api/topology/processes',
+    fullName: 'Processes',
+    id: 'processes',
+    options: [
+      {
+        defaultValue: 'hide',
+        id: 'unconnected',
+        options: [
+          {
+            label: 'Unconnected nodes hidden',
+            value: 'hide'
+          }
+        ]
+      }
+    ],
+    stats: {
+      edge_count: 319,
+      filtered_nodes: 214,
+      node_count: 320,
+      nonpseudo_node_count: 320
+    }
+  }];
+
   // actions
 
   const ChangeTopologyOptionAction = {
@@ -468,4 +495,11 @@ describe('RootReducer', () => {
     nextState = reducer(nextState, { type: ActionTypes.CLICK_BACKGROUND });
     expect(nextState.get('showingHelp')).toBe(false);
   });
+  it('switches to grid mode when complexity is high', () => {
+    let nextState = initialState.set('currentTopology', fromJS(topologies[0]));
+    nextState = nextState.set('initialPageLoad', true);
+    nextState = reducer(nextState, {type: ActionTypes.SET_RECEIVED_NODES_DELTA});
+    expect(nextState.get('initialPageLoad')).toBe(false);
+    expect(nextState.get('gridMode')).toBe(true);
+  });
 });

client/app/scripts/reducers/root.js

@@ -4,11 +4,12 @@ import { fromJS, is as isDeepEqual, List as makeList, Map as makeMap,
   OrderedMap as makeOrderedMap, Set as makeSet } from 'immutable';
 
 import ActionTypes from '../constants/action-types';
-import { EDGE_ID_SEPARATOR } from '../constants/naming';
+import { EDGE_ID_SEPARATOR, GRAPH_COMPLEXITY_THRESH } from '../constants/naming';
 import { applyPinnedSearches, updateNodeMatches } from '../utils/search-utils';
 import { getNetworkNodes, getAvailableNetworks } from '../utils/network-view-utils';
 import { findTopologyById, getAdjacentNodes, setTopologyUrlsById, updateTopologyIds,
-  filterHiddenTopologies, addTopologyFullname, getDefaultTopology } from '../utils/topology-utils';
+  filterHiddenTopologies, addTopologyFullname, getDefaultTopology, graphExceedsComplexityThresh
+} from '../utils/topology-utils';
 
 const log = debug('scope:app-store');
 const error = debug('scope:error');
@@ -33,6 +34,7 @@ export const initialState = makeMap({
   gridSortedDesc: null,
   highlightedEdgeIds: makeSet(),
   highlightedNodeIds: makeSet(),
+  initialPageLoad: true,
   hostname: '...',
   mouseOverEdgeId: null,
   mouseOverNodeId: null,
@@ -501,6 +503,14 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.SET_RECEIVED_NODES_DELTA: {
+      // Turn on the table view if the graph is too complex
+      if (state.get('initialPageLoad')) {
+        const topoStats = state.get('currentTopology').get('stats');
+        state = state.set('initialPageLoad', false);
+        state = graphExceedsComplexityThresh(topoStats, GRAPH_COMPLEXITY_THRESH)
+          ? state.set('gridMode', true)
+          : state;
+      }
       return state.set('nodesLoaded', true);
     }
 

client/app/scripts/utils/topology-utils.js

@@ -175,3 +175,8 @@ export function getCurrentTopologyUrl(state) {
 export function isNodeMatchingQuery(node, query) {
   return node.get('label').includes(query) || node.get('subLabel').includes(query);
 }
+
+export function graphExceedsComplexityThresh(stats, thresh) {
+  // Check to see if complexity is high. Used to trigger table view on page load.
+  return (stats.get('node_count') + (2 * stats.get('edge_count'))) > thresh;
+}