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);