Steps to Reproduce:

We have loaded some yangs using the CU/DU simulator in our setup(list of all the loaded yangs are attached below). After loading those yangs we found out that from GUI some yangs are not showing under his parent yangs. This issue can be reproducible  using one of the CU/DU simulator.

Following are the paths where modules are missing (one or multiple can be present)

• _3gpp-nr-nrm-desmanagementfunction is not displayed under Configuration > ManagedElement[id] > GNBCUCPFunction[id] 
• EP data is not displayed in GUI for ME/gnbcuup/EP* element inside '_3gpp-nr-nrm-ep.yang'
• o-ran_3gpp-nr-nrm-nrcelldu is not displayed under Configuration > {RAN Element} > Managed Element > GNBDU > NRCell DU > Attributes
• '_3gpp-nr-nrm-nrnetwork-commonbeamformingfunction' data is not visible under Configuration > ManagedElement[id] > GNBDUFunction[id] /NRSectorCarrier
• '_3gpp-nr-nrm-nrsectorcarrier.yang' contents not visible under Configuration > ManagedElement[id] > GNBDUFunction[id] 
•  

In the above screenshot you can see the _3gpp-nr-nrm-nrsectorcarrier.yang is missing under the GNBDUFunction

Cause:

• In UI how yang modules are loaded is written and managed from the file yangParser.ts and there it creates a tree of modules based on the dependencies and nested dependencies parsed from the root level yangs.
• It downloads the top level yang and parsing all the dependencies and sub-dependencies in async way. Now while building building the dependency graph issue was happening, mainly for two level down components.
• Due to the async nature of javascript , it was trying to build the component, while the parent component was not loaded

Solution:

• After loading all the modules first then sort based on their depth. The depth was calculated with the parts of path it has , same as we do for restful endpoint
• in 
  apps/configurationApp/src/yang/yangParser.ts under postProcess method before loading the yangs assigning execution order to them 

• • Object.keys(this.modules)
    .map(elem => { if(this.modules[elem].augments && Object.keys(this.modules[elem].augments).length>0) \{ const \{augments, ...rest}

    = this.modules[elem];
    constpartsOfKeys = Object.keys(augments).map((key) => (key.split("/").length - 1))
    this.modules[elem].executionOrder= Math.max(...partsOfKeys)
    } else

    { this.modules[elem].executionOrder=0; }

    })
     

• • Then replacing Object.keys(this.modules).forEach(modKey => 
    with 
    Object.keys(this.modules).sort((a, b) => this.modules[a].executionOrder! - this.modules[b].executionOrder!).forEach(modKey => {