#484 highlight task connections on mous hover

Signed-off-by: Yevhen Vydolob <yvydolob@redhat.com>
redhat-developer · Jan 22, 2021 · 8f8d4da · 8f8d4da
1 parent 4399ae7
commit 8f8d4da
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 2 deletions.
diff --git a/src/webview/pipeline-preview/index.ts b/src/webview/pipeline-preview/index.ts
@@ -24,6 +24,8 @@ if (previousState) {
   restore(previousState);
 }
 
+let highlightedSourceEdges: cytoscape.Collection;
+let highlightedTargetEdges: cytoscape.Collection;
 
 window.addEventListener('message', event => {
 
@@ -79,6 +81,36 @@ function startUpdatingState(): void {
       });
     }
   });
+
+  cy.on('mouseover', 'node', (e) => {
+    const node = e.target;
+    const sourceEdges = node.connectedEdges(`edge[source = "${node.data().id}"]`);
+    const targetEdges = node.connectedEdges(`edge[target = "${node.data().id}"]`);
+    const theme = getTheme();
+    sourceEdges.select();
+    highlightedSourceEdges = sourceEdges;
+    highlightedTargetEdges = targetEdges;
+    sourceEdges.style('line-color', theme.sourceEdgesColor);
+    sourceEdges.style('target-arrow-color', theme.sourceEdgesColor);
+    sourceEdges.style('z-index', '100');
+
+    targetEdges.style('line-color', theme.targetEdgesColor);
+    targetEdges.style('target-arrow-color', theme.targetEdgesColor);
+    targetEdges.style('z-index', '100');
+  });
+
+  cy.on('mouseout', 'node', () => {
+    if (highlightedSourceEdges) {
+      highlightedSourceEdges.removeStyle('line-color');
+      highlightedSourceEdges.removeStyle('z-index');
+      highlightedSourceEdges.removeStyle('target-arrow-color');
+    }
+    if (highlightedTargetEdges) {
+      highlightedTargetEdges.removeStyle('line-color');
+      highlightedTargetEdges.removeStyle('z-index');
+      highlightedTargetEdges.removeStyle('target-arrow-color');
+    }
+  });
 }
 
 function restore(state: object): void {
@@ -124,7 +156,8 @@ function getTheme(): CyTheme {
   result.fontSize = getComputedStyle(document.body).getPropertyValue('font-size');
   result.fontFamily = getComputedStyle(document.body).getPropertyValue('font-family');
   result.arrowColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-selectionBackground');
-
+  result.targetEdgesColor = getComputedStyle(document.body).getPropertyValue('--vscode-charts-yellow');
+  result.sourceEdgesColor = getComputedStyle(document.body).getPropertyValue('--vscode-charts-green');
   return result;
 }
 
@@ -139,9 +172,13 @@ function getStyle(style: CyTheme): cytoscape.Stylesheet[] {
         'font-family': style.fontFamily,
         'font-size': style.fontSize,
         'curve-style': 'taxi',
+        'taxi-direction': 'downward',
+        'taxi-turn': '50px',
+        'taxi-turn-min-distance': 1,
+        'edge-distances': 'node-position',
         'target-arrow-shape': 'triangle',
         'target-arrow-color': style.arrowColor,
-      }
+      } as unknown,
     },
     {
       selector: 'edge[state = "Cancelled"]',

diff --git a/src/webview/pipeline-preview/model.ts b/src/webview/pipeline-preview/model.ts
@@ -31,4 +31,6 @@ export interface CyTheme {
   fontSize: string;
   labelColor: string;
   fontFamily: string;
+  targetEdgesColor: string;
+  sourceEdgesColor: string;
 }
diff --git a/src/yaml-support/tkn-yaml.ts b/src/yaml-support/tkn-yaml.ts
@@ -528,6 +528,21 @@ function collectRunAfter(taskNode: YamlMap, name: string): string[] {
     }
   }
 
+  const params = findNodeByKey<YamlSequence>('params', taskNode);
+  if (params) {
+    for (const param of params.items){
+      const val = findNodeByKey<YamlNode>('value', param as YamlMap);
+      if (val){
+        const inputVal = _.trim(val.raw, '"');
+        const task = extractTaskName(inputVal);
+        if (task){
+          result.push(...task.map( v => v[0]));
+        }
+
+      }
+    }
+  }
+
   if (!conditions && !whens) {
     const runAfter = getTaskRunAfter(taskNode);
     result.push(...runAfter);

diff --git a/test/yaml-support/tkn-yaml.test.ts b/test/yaml-support/tkn-yaml.test.ts
@@ -324,6 +324,33 @@ suite('Tekton yaml', () => {
       expect(result).equal('file-exists');
     });
 
+    test('task should have other task in runAfter if task use output value from other task', async ()=> {
+      const yaml = `
+      apiVersion: tekton.dev/v1alpha1
+      kind: Pipeline
+      metadata:
+        name: pipeline-with-parameters
+      spec:
+        tasks:
+          - name: foo-task
+            taskRef:
+              name: build
+          - name: build-skaffold-web
+            taskRef:
+              name: build-push
+            params:
+              - name: pathToDockerFile
+                value: Dockerfile
+              - name: pathToContext
+                value: "$(tasks.foo-task.results.product)"
+      `
+      const docs = tektonYaml.getTektonDocuments({ getText: () => yaml, version: 1, uri: vscode.Uri.parse('file:///tasks/with/variables/pipeline.yaml') } as vscode.TextDocument, TektonYamlType.Pipeline);
+      const tasks = pipelineYaml.getPipelineTasks(docs[0]);
+      expect(tasks).is.not.empty;
+      const task = tasks.find(t => t.name === 'build-skaffold-web');
+      expect(task.runAfter).to.be.deep.equal(['foo-task']);
+    });
+
   });
 
   suite('PipelineRun', () => {