Update graph styles

- Increase item height to 30px - Increase icon size to 20px - Update colours of edges, arrows, and default text / outlines - Update spacing of elements in node labels - Avoid duplicating the marker (arrow) definition - Update arrow definition to produce a cleaner shape when zoomed - Set fixed width for nodes at 200px - Switch to center truncation on long labels
tektoncd · Dec 6, 2019 · 288179b · 288179b
1 parent 0ea273a
commit 288179b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 48 deletions.
diff --git a/packages/components/src/components/Graph/Graph.js b/packages/components/src/components/Graph/Graph.js
@@ -49,7 +49,7 @@ export default class Graph extends Component {
         'org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers': isSubGraph
           ? 0
           : 40,
-        'org.eclipse.elk.padding': '[top=26,left=0,bottom=1,right=0]',
+        'org.eclipse.elk.padding': '[top=30,left=0,bottom=1,right=0]',
         'org.eclipse.elk.separateConnectedComponents': false,
         'org.eclipse.elk.spacing.nodeNode': isSubGraph ? 0 : 40
       }
@@ -83,20 +83,22 @@ export default class Graph extends Component {
         viewBox={`0 0 ${width} ${height}`}
         preserveAspectRatio="xMidYMin meet"
       >
-        <defs>
-          <marker
-            id="edge-arrow"
-            viewBox="0 -5 10 10"
-            markerUnits="strokeWidth"
-            markerWidth="8.4"
-            markerHeight="14"
-            orient="auto"
-            refY="0"
-            refX="10"
-          >
-            <path d="M0,-5L10,0L0,5" />
-          </marker>
-        </defs>
+        {!isSubGraph && (
+          <defs>
+            <marker
+              id="edge-arrow"
+              viewBox="0 0 100 100"
+              markerUnits="strokeWidth"
+              markerWidth="10"
+              markerHeight="14"
+              orient="auto"
+              refY="50"
+              refX="86"
+            >
+              <path d="M 0 0 L100 50 L 0 100" />
+            </marker>
+          </defs>
+        )}
         <VXGraph
           graph={{ links, nodes }}
           nodeComponent={c => (

diff --git a/packages/components/src/components/Graph/Graph.scss b/packages/components/src/components/Graph/Graph.scss
@@ -11,35 +11,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$edge-color: #979797;
+@import '~carbon-components/scss/globals/scss/vars';
 
 .graph {
   #edge-arrow path {
-    fill: $edge-color;
-    stroke: $edge-color;
+    fill: $ui-04;
+    stroke: $ui-04;
   }
 
   .vx-network-links path {
-    stroke: $edge-color;
+    stroke: $ui-04;
     marker-end: url(#edge-arrow);
   }
 
   .Task {
     rect {
       fill: #FFFFFF;
-      stroke: #979797;
+      stroke: $ui-04;
     }
 
     .label-hitbox {
       stroke: transparent;
     }
 
     text {
-      fill: #6F6F6F;
+      fill: $ui-04;
     }
 
-    .chevron {
-      fill: #565656;
+    .chevron, .status-icon {
+      fill: $ui-04;
     }
   }
 

diff --git a/packages/components/src/components/Graph/Graph.stories.js b/packages/components/src/components/Graph/Graph.stories.js
@@ -41,7 +41,7 @@ const taskProps = {
   type: 'Task',
   label: 'build-and-push',
   width: 160,
-  height: 26
+  height: 30
 };
 
 const expandedProps = {
@@ -51,14 +51,14 @@ const expandedProps = {
       id: '__step_build-and-push__build-image',
       label: 'build-image',
       width: 160,
-      height: 26
+      height: 30
     },
     {
       type: 'Step',
       id: '__step_build-and-push__push-image',
       label: 'push-image',
       width: 160,
-      height: 26
+      height: 30
     }
   ],
   edges: [],

diff --git a/packages/components/src/components/Graph/Node.js b/packages/components/src/components/Graph/Node.js
@@ -14,11 +14,11 @@ limitations under the License.
 import React, { Component } from 'react';
 import classNames from 'classnames';
 
-import CheckmarkFilled from '@carbon/icons-react/lib/checkmark--filled/16';
-import ChevronDown from '@carbon/icons-react/lib/chevron--down/16';
-import ChevronUp from '@carbon/icons-react/lib/chevron--up/16';
-import CloseFilled from '@carbon/icons-react/lib/close--filled/16';
-import Undefined from '@carbon/icons-react/lib/undefined/16';
+import CheckmarkFilled from '@carbon/icons-react/lib/checkmark--filled/20';
+import ChevronDown from '@carbon/icons-react/lib/chevron--down/20';
+import ChevronUp from '@carbon/icons-react/lib/chevron--up/20';
+import CloseFilled from '@carbon/icons-react/lib/close--filled/20';
+import Undefined from '@carbon/icons-react/lib/undefined/20';
 
 import Graph from './Graph'; // eslint-disable-line import/no-cycle
 import InlineLoading from './InlineLoading';
@@ -66,16 +66,21 @@ export default class Node extends Component {
       StatusIcon = <StatusIcon className="status-icon" x="8" y="5" />;
     }
 
-    const maxLabelLength = 24;
+    const maxLabelLength = 19;
     let labelText = label;
     if (label.length > maxLabelLength) {
-      labelText = `${label.substring(0, maxLabelLength)}\u2026`;
+      const charDisplay = maxLabelLength - 1;
+      const labelStart = label.substring(0, Math.ceil(charDisplay / 2));
+      const labelEnd = label.substring(
+        label.length - Math.floor(charDisplay / 2)
+      );
+      labelText = `${labelStart}\u2026${labelEnd}`;
     }
 
     let labelPosition = {
       textAnchor: 'start',
-      x: 30,
-      y: 18
+      x: 36,
+      y: 20
     };
 
     if (type === 'Start' || type === 'End') {
@@ -91,7 +96,7 @@ export default class Node extends Component {
       x: isSelected ? 0 : 1,
       y: isSelected ? 0 : 1,
       width: isSelected ? width : width - 2,
-      height: isSelected ? 26 : 24
+      height: isSelected ? 30 : 28
     };
 
     const Chevron = children ? ChevronUp : ChevronDown;
@@ -120,7 +125,7 @@ export default class Node extends Component {
             {StatusIcon}
             <text {...labelPosition}>{labelText}</text>
             {type === 'Task' && (
-              <Chevron className="chevron" x={width - 22} y="5" />
+              <Chevron className="chevron" x={width - 28} y="5" />
             )}
           </g>
           {children && (

diff --git a/packages/components/src/components/Graph/NodeLink.js b/packages/components/src/components/Graph/NodeLink.js
@@ -25,7 +25,7 @@ const NodeLink = ({ link }) => {
   path.moveTo(startX, startY);
   path.lineTo(startX, startY + (targetY - startY) * percent);
   path.lineTo(targetX, startY + (targetY - startY) * percent);
-  path.lineTo(targetX, targetY);
+  path.lineTo(targetX, targetY - 1); // stop short to prevent it showing around the arrow tip
 
   return (
     <path strokeWidth={1} fill="none" strokeOpacity={1} d={path.toString()} />

diff --git a/packages/utils/src/utils/buildGraphData.js b/packages/utils/src/utils/buildGraphData.js
@@ -13,8 +13,8 @@ limitations under the License.
 /* istanbul ignore file */
 import { getStatus } from './status';
 
-const defaultHeight = 26;
-const defaultCharWidth = 9;
+const defaultHeight = 30;
+const defaultWidth = 200;
 
 function getBaseNodes() {
   const graph = {
@@ -149,20 +149,14 @@ function addNodes({ expanded, graph, pipeline, pipelineRun, tasks }) {
       task.spec.steps &&
       task.spec.steps.length > 0
     ) {
-      const parentWidth = taskRef.name.length * defaultCharWidth + 40;
       const subgraph = {
         id: taskRef.name,
         label: taskRef.name,
         children: task.spec.steps.map(step => {
-          let stepWidth = step.name.length * defaultCharWidth + 40;
-          if (stepWidth < parentWidth) {
-            stepWidth = parentWidth;
-          }
-
           const stepNode = {
             id: `__step__${taskRef.name}__${step.name}`,
             label: step.name,
-            width: stepWidth,
+            width: defaultWidth,
             height: defaultHeight,
             nChildren: 0,
             nParents: 0,
@@ -190,7 +184,7 @@ function addNodes({ expanded, graph, pipeline, pipelineRun, tasks }) {
       node = {
         id: taskRef.name,
         label: taskRef.name,
-        width: taskRef.name.length * defaultCharWidth + 40,
+        width: defaultWidth,
         height: defaultHeight,
         nChildren: 0,
         nParents: 0,