[KED-1650] New graphing algorithm & feature flags

package.json

@@ -41,6 +41,7 @@
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.7.3",
     "dagre": "git+https://github.com/richardwestenra/dagre.git#manual-ranking",
+    "kiwi.js": "^1.1.2",
     "konami-code": "^0.2.1",
     "react-custom-scrollbars": "^4.2.1",
     "react-flip-toolkit": "^7.0.7",

src/actions/actions.test.js

@@ -1,5 +1,6 @@
 import animals from '../utils/data/animals.mock';
 import {
+  CHANGE_FLAG,
   RESET_DATA,
   TOGGLE_LAYERS,
   TOGGLE_EXPORT_MODAL,
@@ -8,6 +9,7 @@ import {
   TOGGLE_THEME,
   UPDATE_CHART_SIZE,
   UPDATE_FONT_LOADED,
+  changeFlag,
   resetData,
   toggleLayers,
   toggleExportModal,
@@ -174,4 +176,13 @@ describe('actions', () => {
     };
     expect(updateFontLoaded(fontLoaded)).toEqual(expectedAction);
   });
+
+  it('should create an action to change a flag', () => {
+    const expectedAction = {
+      type: CHANGE_FLAG,
+      name: 'testFlag',
+      value: true
+    };
+    expect(changeFlag('testFlag', true)).toEqual(expectedAction);
+  });
 });

src/actions/index.js

@@ -116,3 +116,18 @@ export function updateFontLoaded(fontLoaded) {
     fontLoaded
   };
 }
+
+export const CHANGE_FLAG = 'CHANGE_FLAG';
+
+/**
+ * Change the given feature flag
+ * @param {string} name The flag name
+ * @param {value} value The value to set
+ */
+export function changeFlag(name, value) {
+  return {
+    type: CHANGE_FLAG,
+    name,
+    value
+  };
+}

src/components/app/app.test.js

@@ -4,6 +4,7 @@ import App from './index';
 import getRandomPipeline from '../../utils/random-data';
 import animals from '../../utils/data/animals.mock';
 import loremIpsum from '../../utils/data/lorem-ipsum.mock';
+import { Flags } from '../../utils/flags';
 
 describe('App', () => {
   describe('renders without crashing', () => {
@@ -35,6 +36,14 @@ describe('App', () => {
     });
   });
 
+  describe('feature flags', () => {
+    it('it announces flags', () => {
+      const announceFlags = jest.spyOn(App.prototype, 'announceFlags');
+      shallow(<App data={loremIpsum} />);
+      expect(announceFlags).toHaveBeenCalledWith(Flags.defaults());
+    });
+  });
+
   describe('throws an error', () => {
     it('when data prop is empty', () => {
       expect(() => shallow(<App />)).toThrow();

src/components/app/index.js

@@ -8,6 +8,7 @@ import Wrapper from '../wrapper';
 import getInitialState from '../../store/initial-state';
 import loadData from '../../store/load-data';
 import normalizeData from '../../store/normalize-data';
+import { getFlagsMessage } from '../../utils/flags';
 import '@quantumblack/kedro-ui/lib/styles/app.css';
 import './app.css';
 
@@ -19,6 +20,7 @@ class App extends React.Component {
     super(props);
     const initialState = getInitialState(props);
     this.store = configureStore(initialState);
+    this.announceFlags(initialState.flags);
   }
 
   componentDidMount() {
@@ -32,6 +34,17 @@ class App extends React.Component {
     }
   }
 
+  /**
+   * Shows a console message regarding the given flags
+   */
+  announceFlags(flags) {
+    const message = getFlagsMessage(flags);
+
+    if (message && typeof jest === 'undefined') {
+      console.info(message);
+    }
+  }
+
   /**
    * Load data asynchronously from a JSON file then update the store
    */

src/config.js

@@ -8,3 +8,11 @@ export const sidebarWidth = {
   open: 400,
   closed: 60
 };
+
+export const flags = {
+  newgraph: {
+    description: 'Improved graphing algorithm',
+    default: false,
+    icon: '📈'
+  }
+};

src/reducers/flags.js

@@ -0,0 +1,16 @@
+import { CHANGE_FLAG } from '../actions';
+
+function flagsReducer(flagsState = {}, action) {
+  switch (action.type) {
+    case CHANGE_FLAG: {
+      return Object.assign({}, flagsState, {
+        [action.name]: action.value
+      });
+    }
+
+    default:
+      return flagsState;
+  }
+}
+
+export default flagsReducer;

src/reducers/index.js

@@ -3,6 +3,7 @@ import node from './nodes';
 import tag from './tags';
 import nodeType from './node-type';
 import visible from './visible';
+import flags from './flags';
 import {
   RESET_DATA,
   TOGGLE_TEXT_LABELS,
@@ -46,6 +47,7 @@ const combinedReducer = combineReducers({
   nodeType,
   tag,
   visible,
+  flags,
   edge: (state = {}) => state,
   id: (state = null) => state,
   layer: (state = {}) => state,

src/reducers/reducers.test.js

@@ -4,6 +4,7 @@ import { mockState } from '../utils/state.mock';
 import reducer from './index';
 import normalizeData from '../store/normalize-data';
 import {
+  CHANGE_FLAG,
   RESET_DATA,
   TOGGLE_LAYERS,
   TOGGLE_SIDEBAR,
@@ -194,4 +195,15 @@ describe('Reducer', () => {
       expect(newState.fontLoaded).toBe(true);
     });
   });
+
+  describe('CHANGE_FLAG', () => {
+    it('should update the state when a flag is changed', () => {
+      const newState = reducer(mockState.lorem, {
+        type: CHANGE_FLAG,
+        name: 'testFlag',
+        value: true
+      });
+      expect(newState.flags.testFlag).toBe(true);
+    });
+  });
 });

src/selectors/flags.js

@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect';
+
+const getFlagsState = state => state.flags;
+
+/**
+ * Get current flag status from state
+ */
+export const getCurrentFlags = createSelector(
+  [getFlagsState],
+  flags => ({ ...flags })
+);

src/selectors/flags.test.js

@@ -0,0 +1,10 @@
+import { getCurrentFlags } from './flags';
+
+describe('getCurrentFlags function', () => {
+  it('should return the current flags from state', () => {
+    const flags = getCurrentFlags({
+      flags: { mockFlagA: true, mockFlagB: false }
+    });
+    expect(flags).toEqual({ mockFlagA: true, mockFlagB: false });
+  });
+});

src/selectors/layers.js

@@ -10,41 +10,35 @@ const getLayerName = state => state.layer.name;
 export const getLayers = createSelector(
   [getLayoutNodes, getVisibleLayerIDs, getLayerName, getGraphSize],
   (nodes, layerIDs, layerName, { width }) => {
-    // Get list of layer Y positions from nodes
-    const layerY = nodes.reduce((layerY, node) => {
-      if (!layerY[node.layer]) {
-        layerY[node.layer] = [];
-      }
-      layerY[node.layer].push(node.y);
-      return layerY;
-    }, {});
+    const bounds = {};
 
-    /**
-     * Determine the y position and height of a layer band
-     * @param {number} id
-     */
-    const calculateYPos = (layerID, prevID, nextID) => {
-      const yMin = Math.min(...layerY[layerID]);
-      const yMax = Math.max(...layerY[layerID]);
-      const prev = layerY[prevID];
-      const next = layerY[nextID];
-      const topYGap = prev && yMin - Math.max(...prev);
-      const bottomYGap = next && Math.min(...next) - yMax;
-      const yGap = (topYGap || bottomYGap) / 2;
-      const y = yMin - yGap;
-      const height = yMax + yGap - y;
-      return { y, height };
-    };
+    for (const node of nodes) {
+      const bound =
+        bounds[node.layer] || (bounds[node.layer] = [Infinity, -Infinity]);
+      if (node.y - node.height < bound[0]) bound[0] = node.y - node.height;
+      if (node.y + node.height > bound[1]) bound[1] = node.y + node.height;
+    }
 
     return layerIDs.map((id, i) => {
-      const prevID = layerIDs[i - 1];
-      const nextID = layerIDs[i + 1];
+      const currentBound = bounds[id];
+      const prevBound = bounds[layerIDs[i - 1]] || [
+        currentBound[0],
+        currentBound[0]
+      ];
+      const nextBound = bounds[layerIDs[i + 1]] || [
+        currentBound[1],
+        currentBound[1]
+      ];
+      const start = (prevBound[1] + currentBound[0]) / 2;
+      const end = (currentBound[1] + nextBound[0]) / 2;
+
       return {
         id,
         name: layerName[id],
         x: -width / 2,
+        y: start,
         width: width * 2,
-        ...calculateYPos(id, prevID, nextID)
+        height: end - start
       };
     });
   }

src/selectors/layers.test.js

@@ -34,24 +34,30 @@ describe('Selectors', () => {
         return layers;
       }, {});
 
-      expect(
-        nodes.every(node => {
-          // we don't need to check y/height positions if the layer isn't there.
-          if (node.layer === null) {
-            return true;
-          }
-          const i = layerIDs.indexOf(node.layer);
-          const prevLayer = layersObj[layerIDs[i - 1]];
-          const thisLayer = layersObj[node.layer];
-          const nextLayer = layersObj[layerIDs[i + 1]];
-          return (
-            (!prevLayer || node.y > prevLayer.y + prevLayer.height) &&
-            node.y > thisLayer.y &&
-            node.y + node.height < thisLayer.y + thisLayer.height &&
-            (!nextLayer || node.y + node.height < nextLayer.y)
-          );
-        })
-      ).toBe(true);
+      nodes.forEach(node => {
+        // we don't need to check y/height positions if the layer isn't there.
+        if (node.layer === null) {
+          return;
+        }
+
+        const i = layerIDs.indexOf(node.layer);
+        const prevLayer = layersObj[layerIDs[i - 1]];
+        const thisLayer = layersObj[node.layer];
+        const nextLayer = layersObj[layerIDs[i + 1]];
+
+        if (prevLayer) {
+          expect(node.y).toBeGreaterThanOrEqual(prevLayer.y + prevLayer.height);
+        }
+
+        expect(node.y).toBeGreaterThanOrEqual(thisLayer.y);
+        expect(node.y + node.height).toBeLessThanOrEqual(
+          thisLayer.y + thisLayer.height
+        );
+
+        if (nextLayer) {
+          expect(node.y + node.height).toBeLessThanOrEqual(nextLayer.y);
+        }
+      });
     });
   });
 });