### File

`src/app/workflow/workflow-dag/workflow-dag.component.ts`

### Implements

`OnInit` `AfterViewInit`

### Metadata

selector | `hi-workflow-dag`
styleUrls | `./workflow-dag.component.scss`
templateUrl | `./workflow-dag.component.html`

### Index

###### Properties
curve data graph jobNameToId view
###### Methods
Protected loadJobs ngAfterViewInit ngOnInit
###### Inputs
workflow

### Constructor

`constructor(el: ElementRef)`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:32
Parameters :
Name | Type | Optional
el | `ElementRef` | No

### Inputs

workflow
Type : `Workflow`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:22

### Methods

Protected loadJobs
`loadJobs()`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:45
Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:40
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:36
Returns : `void`

### Properties

curve
Type : `any`
Default value : `shape.curveLinear`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:23

data
Type : `object`
Default value : `{ nodes: [], links: [], }`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:25

graph
Decorators : `@ViewChild('graph', {static: true})`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:32

jobNameToId
Type : `object`
Default value : `{}`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:29

view
Type : `[]`
Default value : `[800, 600]`
Defined in src/app/workflow/workflow-dag/workflow-dag.component.ts:24

    import {
      Component,
      OnInit,
      Input,
      ElementRef,
      AfterViewInit,
      ViewChild,
    } from '@angular/core';

    import * as shape from 'd3-shape';
    import * as _ from 'lodash';

    import { Workflow, Job } from '../shared/workflow.model';

    @Component({
      selector: 'hi-workflow-dag',
      templateUrl: './workflow-dag.component.html',
      styleUrls: ['./workflow-dag.component.scss'],
    })
    export class WorkflowDagComponent implements OnInit, AfterViewInit {
      @Input()
      workflow: Workflow;
      curve: any = shape.curveLinear;
      view = [800, 600];
      data = {
        nodes: [],
        links: [],
      };
      jobNameToId = {};

      @ViewChild('graph', { static: true })
      graph;

      constructor(protected el: ElementRef) {}

      ngOnInit() {
        this.loadJobs();
      }

      ngAfterViewInit() {
        // console.log(this.el);
        // console.log(this.graph);
      }

      protected loadJobs() {
        // process nodes
        _.forEach(this.workflow.jobs, (job: Job) => {
          const newId = (this.data.nodes.length + 1).toString();

          this.data.nodes.push({
            id: newId,
            label: job.name,
            description: job.rawName,
            state: job.state,
          });
          this.jobNameToId[job.name] = newId;
        });

        // process edges/links
        _.forEach(this.workflow.jobs, (job: Job) => {
          _.forEach(job.parents, (parentName) => {
            this.data.links.push({
              source: this.jobNameToId[parentName],
              target: this.jobNameToId[job.name],
            });
          });
        });
      }
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <ngx-graph
      #graph
      class="chart-container"
      [view]="[(graph.graphDims.width * 2) / 3, graph.graphDims.height]"
      [links]="data.links"
      [nodes]="data.nodes"
      [curve]="curve"
      orientation="TB"
      [autoZoom]="false"
      [panningEnabled]="false"
      [draggingEnabled]="false"
      [minZoomLevel]="1"
      [maxZoomLevel]="1"
    >
      <ng-template #defsTemplate>
        <svg:marker
          id="arrow"
          viewBox="0 -5 10 10"
          refX="8"
          refY="0"
          markerWidth="4"
          markerHeight="4"
          orient="auto"
        >
          <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
        </svg:marker>
      </ng-template>

      <ng-template #nodeTemplate let-node>
        <svg:g
          class="node"
          ngx-tooltip
          [tooltipPlacement]="'top'"
          [tooltipType]="'tooltip'"
          [tooltipTitle]="node.description"
        >
          <svg:rect
            [attr.width]="node.width"
            [attr.height]="node.height"
            [attr.fill]="node.options.color"
          />
          <svg:text
            alignment-baseline="central"
            [attr.x]="10"
            [attr.y]="node.height / 2"
          >
            {{ node.label }}
          </svg:text>
          <svg:text
            alignment-baseline="hanging"
            [attr.x]="node.width - 100"
            [attr.y]="node.height + 10"
            [ngClass]="'state-default state-' + node.state"
          >
            {{ node.state }}
          </svg:text>
        </svg:g>
      </ng-template>

      <ng-template #linkTemplate let-link>
        <svg:g class="edge">
          <svg:path
            class="line"
            stroke-width="2"
            marker-end="url(#arrow)"
          ></svg:path>
          <svg:text class="edge-label" text-anchor="middle">
            <textPath
              class="text-path"
              [attr.href]="'#' + link.id"
              [style.dominant-baseline]="link.dominantBaseline"
              startOffset="50%"
            >
              {{ link.label }}
            </textPath>
          </svg:text>
        </svg:g>
      </ng-template>
    </ngx-graph>

`./workflow-dag.component.scss`

    @use '@angular/material' as mat;

    .state-default {
      fill: mat.get-color-from-palette(
        mat.define-palette(mat.$deep-orange-palette)
      );
    }

    .state-COMPLETED {
      fill: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
    }

    .state-PENDING {
      fill: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""