Use pedigree viewer with Angular applications

[buymel]

Hello @dauglyon ,

I am trying to import and use this tool inside Angular 7 application. In browser console, I have this error message concerning the use of "PedigreeViewer()" function:

ERROR TypeError: "Object(...) is not a function"
    ngOnInit genealogic-tree.component.ts:23
    Angular 5
        checkAndUpdateDirectiveInline
        checkAndUpdateNodeInline
        checkAndUpdateNode
        debugCheckAndUpdateNode
        debugCheckDirectivesFn
    View_GermplasmCardComponent_1 GermplasmCardComponent.html:778
    Angular 27
    RxJS 5
    Angular 11
GermplasmCardComponent.html:750:2
    View_GermplasmCardComponent_1 GermplasmCardComponent.html:750
    Angular 15
    RxJS 5
    Angular 11

I created a component genealogic-tree with the following file genealogic-tree.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { BrAPI } from '@solgenomics/brapijs';
import { PedigreeViewer } from '@solgenomics/brapi-pedigree-viewer';

import { BrapiGermplasm } from '../models/brapi.model';
import { BrapiService } from '../brapi.service';

@Component({
    selector: 'faidare-genealogic-tree',
    templateUrl: './genealogic-tree.component.html',
    styleUrls: ['./genealogic-tree.component.scss']
})
export class GenealogicTreeComponent implements OnInit {

    @Input() germplasmId: String;

    constructor(private brapiService: BrapiService) {
        this.germplasmId = 'aHR0cHM6Ly9kb2kub3JnLzEwLjE1NDU0L01FQVJBUw%3D%3D';
    }

    ngOnInit() {
        const pdg = PedigreeViewer(
            /*REQUIRED Server: BrAPI.js handle for target endpoint*/
            BrAPI('http://localhost:8380/faidare-dev/brapi/v1'),
            // this.brapiService,
            /*OPTIONAL a function which returns a link to a germplasm information page,*/
            function() {
                return 'http://localhost:4200/faidare-dev/germplasm?id=aHR0cHM6Ly9kb2kub3JnLzEwLjE1NDU0L01FQVJBUw%3D%3D';
            }
        );
        if (pdg != null) {
            pdg.newTree(
                // REQUIRED root germplasmDbId of germplasm which should be displayed on start (highlighted in pink)
                this.germplasmId
            );

            pdg.drawViewer(
                // REQUIRED selector for the parent node of the new viewer SVG element.
                'div#pdgv-wrap',
                // OPTIONAL width of viewer
                800,
                // OPTIONAL height of viewer
                400
            );
        }
    }
}

In genealogic-tree.component.html':

<div id="pdgv-wrap"></div>

And in the germplasm-card.component.html, I added a selector:

<div>
  <faidare-genealogic-tree [germplasmId]="germplasmGnpis.germplasmDbId"></faidare-genealogic-tree>
</div>

Thanks for your attention

Mélanie Buy

[buymel]

I have resolved the issue with including .js scripts in angular.json.

[KyraZhang777]

Hi Mélanie @buymel:

Thank you for your contribution! That was very helpful.

I am trying to change the pedigree viewer to Angular base and I am new to this area. Would you mind to share your experiences with Angular?

Thank you very much! Kyra Zhang