fix(pipelines): prevent overlapping graph lines

spinnaker · Apr 8, 2017 · fd2dd6f · fd2dd6f
1 parent 609a649
commit fd2dd6f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/app/scripts/modules/core/pipeline/config/graph/pipeline.graph.component.ts b/app/scripts/modules/core/pipeline/config/graph/pipeline.graph.component.ts
@@ -4,6 +4,7 @@ import {ISCEService, module} from 'angular';
 import { IExecution, IPipeline } from 'core/domain/index';
 import { IPipelineValidationResults, PIPELINE_CONFIG_VALIDATOR, PipelineConfigValidator } from '../validation/pipelineConfig.validator';
 import { IExecutionViewState, IPipelineLink, IPipelineNode, PIPELINE_GRAPH_SERVICE, PipelineGraphService } from './pipelineGraph.service';
+import {UUIDGenerator} from 'core/utils/uuid.service';
 
 require('./pipelineGraph.less');
 
@@ -160,9 +161,46 @@ export class PipelineGraphController implements ng.IComponentController {
         sortedPhase.forEach((node: IPipelineNode, index: number) => { node.row = index; });
         this.$scope.nodes[phase] = sortedPhase;
       });
+      this.fixOverlaps();
     }
   }
 
+  // if any nodes in the same row as a parent node, but not in the immediately preceding phase, inject placeholder nodes
+  // so there are no overlapping links
+  private fixOverlaps(): void {
+    const allNodes = this.$scope.nodes;
+    allNodes.forEach((column: IPipelineNode[]) => {
+      column.forEach(node => {
+        const nonImmediateChildren = node.children.filter(c => c.phase - node.phase > 1 && c.row === node.row);
+        nonImmediateChildren.forEach(child => {
+          for (let phase = node.phase + 1; phase < child.phase; phase++) {
+            if (allNodes[phase].length >= node.row) {
+              allNodes[phase].splice(node.row, 0, this.createPlaceholderNode(node.row, phase));
+              allNodes[phase].forEach((n: IPipelineNode, index: number) => { n.row = index; });
+            }
+          }
+        });
+      });
+    });
+  }
+
+  private createPlaceholderNode(row: number, phase: number): IPipelineNode {
+    return {
+      placeholder: true,
+      id: UUIDGenerator.generateUuid(),
+      name: '',
+      parents: [],
+      parentIds: [],
+      children: [],
+      parentLinks: [],
+      childLinks: [],
+      isActive: false,
+      isHighlighted: false,
+      row: row,
+      phase: phase,
+    };
+  }
+
   /**
    * Sets the width of the graph and determines the width available for each label
    */
@@ -369,8 +407,8 @@ export class PipelineGraphController implements ng.IComponentController {
     if (this.shouldValidate) {
       this.$scope.$watch('$ctrl.pipeline', debounce(() => this.pipelineConfigValidator.validatePipeline(this.pipeline), 300), true);
     }
-    this.$scope.$watch('$ctrl.viewState', () => { this.updateGraph(true); }, true);
-    this.$scope.$watch('$ctrl.execution.graphStatusHash', () => this.updateGraph());
+    this.$scope.$watch('$ctrl.viewState', (_newVal: any, oldVal: any) => { if (oldVal) { this.updateGraph(true); } }, true);
+    this.$scope.$watch('$ctrl.execution.graphStatusHash', (_newVal: any, oldVal: any) => { if (oldVal) { this.updateGraph(); } });
     this.$(this.$window).bind('resize.pipelineGraph-' + graphId, handleWindowResize);
 
     this.$scope.$on('$destroy', () => {

diff --git a/app/scripts/modules/core/pipeline/config/graph/pipelineGraph.component.html b/app/scripts/modules/core/pipeline/config/graph/pipelineGraph.component.html
@@ -7,6 +7,7 @@
     </foreignobject>
   </g>
   <g ng-repeat="stage in allNodes"
+     ng-if="!stage.placeholder"
      ng-class="{'has-status': stage.status, active: stage.isActive, highlighted: stage.isHighlighted, warning: stage.hasWarnings}"
      ng-attr-transform="translate({{stage.x}},{{stage.y}})">
 
@@ -53,7 +54,10 @@
     </g>
   </g>
 
-  <g ng-repeat="stage in allNodes" ng-class="{'has-status': stage.status, active: stage.isActive, highlighted: stage.isHighlighted}" ng-attr-transform="translate({{::stage.x}},{{::stage.y}})">
+  <g ng-repeat="stage in allNodes"
+     ng-if="!stage.placeholder"
+     ng-class="{'has-status': stage.status, active: stage.isActive, highlighted: stage.isHighlighted}"
+     ng-attr-transform="translate({{::stage.x}},{{::stage.y}})">
     <foreignobject ng-attr-width="{{::maxLabelWidth}}" height="100"
                    ng-attr-transform="translate({{::labelOffsetX}}, {{::stage.leaf && !stage.executionStage ? -8 : labelOffsetY*-1}})">
       <div class="execution-stage-label clickable {{::stage.status.toLowerCase()}}"

diff --git a/app/scripts/modules/core/pipeline/config/graph/pipelineGraph.service.ts b/app/scripts/modules/core/pipeline/config/graph/pipelineGraph.service.ts
@@ -9,15 +9,15 @@ export interface IExecutionViewState {
   showStageDuration: boolean;
   section?: string;
   stageIndex?: number;
-};
+}
 
 export interface IPipelineLink {
   parent: IPipelineNode;
   child: IPipelineNode;
   line: string;
   isHighlighted?: boolean;
   linkClass?: string; // Added after the fact in PipelineGraphDirective
-};
+}
 
 export interface IPipelineNode {
   id: (string | number);
@@ -36,6 +36,7 @@ export interface IPipelineNode {
   row?: number; // Added after the fact in PipelineGraphDirective
   x?: number; // Added after the fact in PipelineGraphDirective
   y?: number; // Added after the fact in PipelineGraphDirective
+  placeholder?: boolean;
 
   // PipelineGraphDirective conflates the two node types, so adding as optional here
   // Config node parameters