[KED-1729] Add minimap

package.json

@@ -36,6 +36,7 @@
     "batching-toposort": "^1.2.0",
     "classnames": "^2.2.6",
     "d3-fetch": "^1.2.0",
+    "d3-interpolate": "^1.3.2",
     "d3-interpolate-path": "^2.1.0",
     "d3-scale": "^3.2.1",
     "d3-selection": "^1.4.1",

src/actions/index.js

@@ -117,6 +117,19 @@ export function updateChartSize(chartSize) {
   };
 }
 
+export const UPDATE_ZOOM = 'UPDATE_ZOOM';
+
+/**
+ * Store the zoom
+ * @param {Object} zoom The zoom transform
+ */
+export function updateZoom(zoom) {
+  return {
+    type: UPDATE_ZOOM,
+    zoom
+  };
+}
+
 export const UPDATE_FONT_LOADED = 'UPDATE_FONT_LOADED';
 
 /**
@@ -130,6 +143,19 @@ export function updateFontLoaded(fontLoaded) {
   };
 }
 
+export const TOGGLE_MINIMAP = 'TOGGLE_MINIMAP';
+
+/**
+ * Toggle mini map
+ * @param {string} visible Visibility status
+ */
+export function toggleMiniMap(visible) {
+  return {
+    type: TOGGLE_MINIMAP,
+    visible
+  };
+}
+
 export const CHANGE_FLAG = 'CHANGE_FLAG';
 
 /**

src/components/app/app.scss

@@ -10,4 +10,16 @@
   .kui-theme--dark & {
     fill: #fff;
   }
+
+  .pipeline-icon--stroke & {
+    .kui-theme--light & {
+      fill: none;
+      stroke: #333;
+    }
+
+    .kui-theme--dark & {
+      fill: none;
+      stroke: #fff;
+    }
+  }
 }

src/components/flowchart/draw.js

@@ -7,7 +7,7 @@ import icon from './icon';
 /**
  * Render layer bands
  */
-const drawLayers = function() {
+export const drawLayers = function() {
   const { layers, visibleLayers } = this.props;
 
   this.el.layers = this.el.layerGroup
@@ -33,7 +33,7 @@ const drawLayers = function() {
 /**
  * Render layer name labels
  */
-const drawLayerNames = function() {
+export const drawLayerNames = function() {
   const {
     chartSize: { sidebarWidth = 0 },
     layers,
@@ -74,7 +74,7 @@ const drawLayerNames = function() {
 /**
  * Render node icons and name labels
  */
-const drawNodes = function() {
+export const drawNodes = function() {
   const {
     centralNode,
     linkedNodes,
@@ -170,7 +170,7 @@ const drawNodes = function() {
 /**
  * Render edge lines
  */
-const drawEdges = function() {
+export const drawEdges = function() {
   const { edges, centralNode, linkedNodes } = this.props;
 
   this.el.edges = this.el.edgeGroup
@@ -222,15 +222,3 @@ const drawEdges = function() {
       return interpolatePath(previous, current);
     });
 };
-
-/**
- * Render chart to the DOM with D3
- */
-const draw = function() {
-  drawLayers.call(this);
-  drawLayerNames.call(this);
-  drawEdges.call(this);
-  drawNodes.call(this);
-};
-
-export default draw;

src/components/flowchart/flowchart.test.js

@@ -63,6 +63,7 @@ describe('FlowChart', () => {
     const expectedResult = {
       centralNode: null,
       chartSize: expect.any(Object),
+      chartZoom: expect.any(Object),
       edges: expect.any(Array),
       graphSize: expect.any(Object),
       layers: expect.any(Array),
@@ -72,8 +73,7 @@ describe('FlowChart', () => {
       nodes: expect.any(Array),
       textLabels: expect.any(Boolean),
       visibleLayers: expect.any(Boolean),
-      visibleSidebar: expect.any(Boolean),
-      zoom: expect.any(Object)
+      visibleSidebar: expect.any(Boolean)
     };
     expect(mapStateToProps(mockState.animals)).toEqual(expectedResult);
   });