File

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

Implements

OnInit AfterViewInit

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(el: ElementRef)
Parameters :
Name Type Optional
el ElementRef No

Inputs

workflow
Type : Workflow

Methods

Protected loadJobs
loadJobs()
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

curve
Type : any
Default value : shape.curveLinear
data
Type : object
Default value : { nodes: [], links: [], }
graph
Decorators :
@ViewChild('graph', {static: true})
jobNameToId
Type : object
Default value : {}
view
Type : []
Default value : [800, 600]
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 ""