[KED-1417] Add new node/data/param icons (#141)

Also update node font-size and padding

src/components/flowchart/draw.js

@@ -32,7 +32,7 @@ const drawNodes = function() {
     .append('text')
     .text(node => node.name)
     .attr('text-anchor', 'middle')
-    .attr('dy', 3.5)
+    .attr('dy', 5)
     .attr('dx', node => node.textOffset);
 
   this.el.nodes

src/components/flowchart/icon.js

@@ -3,15 +3,16 @@ import { select } from 'd3-selection';
 const paths = {
   // database icon
   data: [
-    'M12 1c4.3 0 7.8 1.5 8 3.4v15.1c0 2-3.6 3.5-8 3.5s-8-1.6-8-3.5V4.4C4.2 2.5 7.7 1 12 1zm0 17a14 14 0 01-6-1.2v3a14 14 0 006 1.2 14 14 0 006-1.2v-3a14 14 0 01-6 1.2zm0-5a14 14 0 01-6-1.2v3a14 14 0 006 1.2 14 14 0 006-1.2v-3a14 14 0 01-6 1.2zm0-5a14 14 0 01-6-1.2v3a14 14 0 006 1.2 14 14 0 006-1.2v-3A14 14 0 0112 8zm.3-5H12c-3.3 0-6 .7-6 1.5S8.7 6 12 6s6-.7 6-1.5S15.5 3 12.3 3z'
+    'M6 7.5C6 5.5 8.7 4 12 4c3.2 0 5.9 1.5 6 3.3V17c0 .2 0 .4-.2.6-1.1 1.6-3 2.3-5.8 2.3s-4.7-.7-5.8-2.3A1 1 0 016 17V7.5zm6 8c-1.6 0-3-.4-4-1v2.2c.7.8 2 1.2 4 1.2s3.3-.4 4-1.2v-2.2c-1 .6-2.4 1-4 1zm0-4.5c-1.5 0-3-.3-4-.9v1.6c.8 1.2 2 1.7 4 1.7s3.3-.5 4-1.7v-1.6c-1 .6-2.5.9-4 .9zm0-5c-1.3 0-2.4.3-3.2.8-.6.3-.8.6-.8.7s.2.4.8.7c.8.5 2 .8 3.2.8s2.4-.3 3.2-.8c.6-.3.8-.6.8-.7s-.2-.4-.8-.7c-.8-.5-2-.8-3.2-.8z'
   ],
-  // cogs icon
+  // function icon
   task: [
-    'M6.05.75L7.857.332a1.236 1.236 0 011.445.792l.039.134.22.95c.789.079 1.557.295 2.271.638l.303.154.714-.666a1.236 1.236 0 011.647-.036l.1.097 1.266 1.357c.432.466.437 1.176.032 1.647l-.093.097-.715.666c.33.722.529 1.496.589 2.286l.017.34.933.284c.61.187.97.801.854 1.413l-.033.131-.542 1.774a1.236 1.236 0 01-1.408.855l-.136-.034-.935-.285a6.755 6.755 0 01-1.682 1.65l-.285.185.221.956a1.236 1.236 0 01-.797 1.448l-.135.038-1.806.417a1.236 1.236 0 01-1.445-.792l-.039-.134-.22-.95a6.863 6.863 0 01-2.273-.636l-.302-.154-.715.665a1.236 1.236 0 01-1.647.035l-.1-.096L1.934 14.2a1.236 1.236 0 01-.035-1.647l.097-.1.715-.667a6.75 6.75 0 01-.588-2.285l-.018-.34-.933-.285A1.236 1.236 0 01.32 7.468l.033-.135.543-1.771a1.236 1.236 0 011.408-.855l.136.034.935.285a6.75 6.75 0 011.682-1.65l.285-.185-.221-.956A1.236 1.236 0 015.914.788L6.05.75zm1.875 4.004a4.333 4.333 0 101.95 8.444 4.333 4.333 0 00-1.95-8.444zm.549 2.375a1.896 1.896 0 11.852 3.694 1.896 1.896 0 01-.852-3.694zM19.02 13.214l1.123.218a.76.76 0 01.615.773l-.013.12-.115.588c.416.237.787.543 1.099.905l.15.185.569-.196a.76.76 0 01.919.362l.048.11.371 1.08a.761.761 0 01-.375.924l-.095.04-.569.196c.004.466-.07.928-.218 1.367l-.098.261.453.394c.29.253.343.677.138.99l-.063.083-.749.862a.76.76 0 01-.976.146l-.097-.071-.454-.395a4.157 4.157 0 01-1.33.502l-.235.038-.116.593a.76.76 0 01-.776.616l-.12-.014-1.12-.218a.76.76 0 01-.615-.773l.013-.119.115-.589a4.223 4.223 0 01-1.073-.874l-.178-.215-.568.195a.76.76 0 01-.92-.362l-.047-.11-.372-1.08a.76.76 0 01.362-.918l.11-.048.57-.196c-.005-.465.07-.927.218-1.366l.098-.26-.453-.395a.76.76 0 01-.147-.977l.071-.097.749-.86a.76.76 0 01.977-.146l.096.071.455.395a4.154 4.154 0 011.33-.501l.235-.038.115-.593a.76.76 0 01.774-.617l.12.014zm.053 2.721a2.667 2.667 0 10-1.017 5.235 2.667 2.667 0 001.017-5.235zm-.286 1.472a1.167 1.167 0 11-.445 2.29 1.167 1.167 0 01.445-2.29z'
+    'M19.46 4.3l.18.14-1.28 1.54c-2.06-1.71-3.52-1.1-4.55 2.52H16v2h-2.66c-.09.43-.17.89-.25 1.37l-.1.68c-1.2 8.23-4.11 11.46-8.41 8.34l-.19-.14 1.22-1.59c2.58 1.97 4.25.32 5.3-6.22l.1-.68.3-1.76H8v-2h3.78c1.48-5.36 4.12-7.04 7.68-4.2z'
   ],
   // sliders icon
   parameters: [
-    'M11.2 18a3 3 0 0 0 0 2H3v-2h8.2zm9.8 0v2h-4.2a3 3 0 0 0 0-2H21zM5.2 11a3 3 0 0 0 0 2H3v-2h2.2zM21 11v2H10.8a3 3 0 0 0 0-2H21zm-9-6c0 .4 0 .7.2 1H3V4h9.2a3 3 0 0 0-.2 1zm9-1v2h-3.2a3 3 0 0 0 0-2H21zM14 17a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-6-7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm7-7a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'
+    'M8 14v1.5h13v2H8V19H6v-1.5H4v-2h2V14z',
+    'M18.5 5v1.5H21v2h-2.5V10h-2V8.5H4v-2h12.5V5z'
   ]
 };
 

src/components/flowchart/styles/_node.scss

@@ -5,6 +5,7 @@
 
   text {
     font-weight: 600;
+    font-size: 1.4em;
     transition: all ease 0.1s;
     pointer-events: none;
 

src/selectors/nodes.js

@@ -157,7 +157,10 @@ export const getNodeTextWidth = createSelector(
  */
 export const getPadding = (showLabels, isTask) => {
   if (showLabels) {
-    return { x: 16, y: 10 };
+    if (isTask) {
+      return { x: 16, y: 10 };
+    }
+    return { x: 20, y: 10 };
   }
   if (isTask) {
     return { x: 14, y: 14 };
@@ -172,7 +175,7 @@ export const getNodeSize = createSelector(
   [getNodeIDs, getNodeTextWidth, getTextLabels, getNodeType],
   (nodeIDs, nodeTextWidth, textLabels, nodeType) =>
     arrayToObject(nodeIDs, nodeID => {
-      const iconSize = textLabels ? 14 : 24;
+      const iconSize = textLabels ? 24 : 28;
       const padding = getPadding(textLabels, nodeType[nodeID] === 'task');
       const textWidth = textLabels ? nodeTextWidth[nodeID] : 0;
       const textGap = textLabels ? 6 : 0;

src/selectors/nodes.test.js

@@ -190,25 +190,38 @@ describe('Selectors', () => {
       );
     });
 
-    it('returns x=16 & y=10 if text labels are enabled', () => {
-      expect(getPadding(true, true).x).toBe(16);
-      expect(getPadding(true, true).y).toBe(10);
-      expect(getPadding(true, false).x).toBe(16);
-      expect(getPadding(true, false).y).toBe(10);
-    });
+    describe('if text labels are enabled', () => {
+      it('returns x=16 & y=10 for task icons', () => {
+        expect(getPadding(true, true)).toEqual({ x: 16, y: 10 });
+      });
 
-    it('returns identical x & y values if text labels are disabled', () => {
-      expect(getPadding(false, true).x).toBe(getPadding(false, true).y);
-      expect(getPadding(false, false).x).toBe(getPadding(false, false).y);
+      it('returns x=20 & y=10 for database icons', () => {
+        expect(getPadding(true, false)).toEqual({ x: 20, y: 10 });
+      });
     });
 
-    it('returns smaller padding values for task icons', () => {
-      expect(getPadding(false, true).x).toBeLessThan(
-        getPadding(false, false).x
-      );
-      expect(getPadding(false, true).y).toBeLessThan(
-        getPadding(false, false).y
-      );
+    describe('if text labels are disabled', () => {
+      it('returns x=16 & y=10 for task icons', () => {
+        expect(getPadding(false, true)).toEqual({ x: 14, y: 14 });
+      });
+
+      it('returns x=20 & y=10 for database icons', () => {
+        expect(getPadding(false, false)).toEqual({ x: 16, y: 16 });
+      });
+
+      it('returns identical x & y values', () => {
+        expect(getPadding(false, true).x).toBe(getPadding(false, true).y);
+        expect(getPadding(false, false).x).toBe(getPadding(false, false).y);
+      });
+
+      it('returns smaller padding values for task icons than database icons', () => {
+        expect(getPadding(false, true).x).toBeLessThan(
+          getPadding(false, false).x
+        );
+        expect(getPadding(false, true).y).toBeLessThan(
+          getPadding(false, false).y
+        );
+      });
     });
   });