Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

animation-on-data-change not firing on replacement of 'Node' array in oj-diagram

JSmydoNov 28 2021

Hi
I have an oj-diagram setup in oracle apex but am having issues getting the animation working when adding new nodes. The data for the nodes of the diagram consists of nested json objects so I figured that stringifying the current node json , making the changes to the string and then parsing the updated string as a JSON object would be a good way to simply replace the observable array - it doesn't work however. At the bottom of this page you will see the assignment made to replace the node observable array:
nodes(JSON.parse(nodeStr));
The array for the 'links' in the diagram is different though, any changes to that were made using the js 'push' method as the structure is much simpler:
links.push(ciLinks["links"][i]);
This does work and the new links are drawn. Is replacing the full observable array for the nodes completely the wrong approach? Are changes only registered through individual changes to the existing array?
The html of the diagram is as follows:
<div id='diagram-container' style="min-height:100%">
<oj-toolbar
chroming="outlined"
aria-controls="diagram-container2">
<oj-button class="t-button" id="addNodeButton" on-oj-action="[[addNodeButtonClick]]">Add CI Nodes</oj-button>
</oj-toolbar>

  \<oj-diagram style="height:1000px" id='diagram-container2'  
    animation-on-data-change='auto'  
    animation-on-display='auto'  
    node-data = '\[\[nodeDataProvider\]\]'  
    link-data = '\[\[linkDataProvider\]\]'  
    node-content.renderer = '\[\[nodeRendererFunc\]\]'   
    layout = '\[\[layoutFunc\]\]'  
    max-zoom = '5.0'  
    min-zoom = '0.1'  
    zooming = 'auto'  
    panning= 'auto'  
    promoted-link-behavior = 'full'  
    selection-mode = 'multiple'  
    expanded = '{{expandedNodes}}'>  
         
    \<template slot="nodeTemplate" data-oj-as="node">  
      \<oj-diagram-node  
        label='\[\[node.data.name\]\]'  
        icon.width='130'  
        icon.height='30'  
        icon.shape='rectangle'  
        icon.color='\[\[node.data.nodeColour\]\]'  
        icon.border-radius='1px'  
        icon.border-width='0.5'  
        icon.border-color='#444444'  
        short-desc='\[\["CI " + node.data.id\]\]'>  
        show-disclosure='{{node.data.showDisclosure}}'  
      \</oj-diagram-node>  
    \</template>  
    \<template slot="linkTemplate" data-oj-as="link">  
      \<oj-diagram-link  
      start-node="\[\[link.data.startNode\]\]"   
      end-node="\[\[link.data.endNode\]\]"  
      start-connector-type="circle"  
      end-connector-type="arrow"  
      short-desc='\[\[link.data.startNodeName + " " + link.data.relType + " " + link.data.endNodeName\]\]'>  
      \</oj-diagram-link>  
    \</template>  
  \</oj-diagram>  
 \</div>  

The constructor is:

class DiagramModel {
constructor() {

                this.data = JSON.parse(pData.CINodesAndLinks);  
                this.nodeValues = ko.observableArray(this.data.nodes);  
                this.linkValues = ko.observableArray(this.data.links);  
                this.nodeDataProvider = new ArrayTreeDataProvider(this.nodeValues, {  
                    keyAttributes: "id",  
                    childrenAttribute: "nodes",  
                });  
                this.linkDataProvider = new ArrayDataProvider(this.linkValues, {  
                    keyAttributes: "id",  
                });  

                this.expandedNodes = new ojknockout\_keyset\_1.ObservableKeySet().add(\["Top Level CIs", "Non-Parent CIs"\]);  
                debugger;  
                this.layoutFunc = layout.containerLayout;  

                /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*/  
                this.addNodeButtonClick = () => {  
                      
                    const nodes = this.data.nodes;  
                    const links = this.data.links;  
                     
                    let diagNodes = this.nodeValues;  
                    let diagLinks = this.linkValues;  

.....
diagLinks(links)
nodes(JSON.parse(nodeStr));
diagNodes(nodes);

This post has been answered by Natalia Balatskova-Oracle on Dec 6 2021
Jump to Answer

Comments

JohnGoodwin
Answer

When installing if you select "Financial Management Server" it will automatically select the database clients so you must have deselected them, they are selected for a reason, obviously if you were connecting to SQL Server you would not need them selected.

It is also possible to use an existing Oracle client - Using an Existing Oracle Database Client

Cheers

John

Marked as Answer by JanGLi · Sep 27 2020
JanGLi

Damn i even searched the shared document for database client maybe i didn't searched property.

Well any way i have already started the re-installation

Thanks for always helping

QA

@John Goodwin

Do we still need DB client, when we use/specify jdbc connection string during config?

Thanks

A

JohnGoodwin

1002763 wrote:

Do we still need DB client, when we use/specify jdbc connection string during config?

No you don't need a database client for the configuration.

1 - 4

Post Details

Added on Nov 28 2021
16 comments
386 views