## Issue Summary
The mind map diagram fails to load in non-local environments (dev/staging/prod)
but works correctly in the local environment.
## Root Cause Identified
Through line-by-line code comment testing, the issue has been isolated to:
this.diagram.data.parse(this.prepareDimensions(this.mindMapData));
Commenting out this line prevents the diagram from loading entirely, confirming
it is the sole entry point for diagram initialization and data rendering.
## prepareDimensions Method
private prepareDimensions(data: any[]): any[] {
return data.map(n => ({
...n,
type: n.type === 'endline' ? 'endline' : n.type || 'rectangle',
}));
}
This method works correctly in local but the behavior differs in other environments.
## Suspected Causes
- mindMapData is null or undefined at the time parse() is called (timing/async issue)
- diagram object not fully initialized before parse() is invoked
- Library version mismatch between local and deployed builds
- Environment-specific data causing an unhandled edge case
## Current Status
Investigation ongoing. Additional support or insights are welcome.
Hello @jxp0t9efpl,
Thank you for the detailed issue description and the provided code.
The problem highly likely happens because parse() is called before valid data (or before full editor readiness) in non-local environments.
In local setup, timing is usually faster/more stable, so this is not visible.
If you add a safe guard before parsing, something like follows:
private prepareDimensions(data: any[] | null | undefined): any[] {
return Array.isArray(data)
? data.map(n => ({
...n,
type: n?.type === "endline" ? "endline" : n?.type || "rectangle",
}))
: [];
}
private initMindMapData(): void {
if (!this.diagram?.data) return;
const prepared = this.prepareDimensions(this.mindMapData);
if (!prepared.length) {
console.warn("Mind map data is empty/invalid:", this.mindMapData);
return;
}
this.diagram.data.parse(prepared);
}
Also, it would be helpful if you test these checks in dev/staging/prod:
- log this.mindMapData right before parse()
- log this.diagram and this.diagram.data readiness
- compare loaded Diagram library version/build hash with local
This will confirm whether the root cause is data timing/shape mismatch or environment version mismatch.
Kind regards,
1 Like
Hi @Siarhei
Thanks you for the response .
Also I have made those changes but the its not working as expected thanks.
Hi @jxp0t9efpl,
As issue doesn’t occur locally, and only appers when you loading data from the backend, likely your backend sends data in different/corrupted/incorrect format.
Are there any issues in browser console? If so, could you please share some information about issues or screenshot with error messagtes?
Also could you please show what exactly comes to the .parse method as this.prepareDimensions(this.mindMapData)?
As it’s quite hard to suppose what exactly goes wrong without more details.
Warm regards,
Hi @Siarhei
Thank you for the response! There are no console errors in the browser. The data being used is the same — we are connecting to the development database both locally and in the dev environment, and it loads correctly when running locally.
Hi @Siarhei
Thank you for your response and suggestions.
To address your questions:
Console Errors: There are no errors visible in the browser console when the issue occurs in the dev environment. I’ve attached a screenshot for reference.
Data reaching .parse method: We’ve implemented the parseAndValidateData method as you recommended, which wraps the .parse call with validation. Here’s the current implementation:
TYPESCRIPT Code Block
private parseAndValidateData(data: any[], dataSource = 'mindMapData'): boolean {
const prepared = this.prepareDimensions(data);
if (!prepared.length) {
console.warn(`Mind map data is empty/invalid:`, dataSource === 'mindMapData' ? this.mindMapData : data);
return false;
}
this.diagram.data.parse(prepared);
this.ensureTextVisible();
return true;
}
The diagram renders correctly locally, but fails to load in the dev environment despite using the same data from the dev database. The prepared array does not appear to be empty (no warning is triggered), yet the diagram still does not render.
Could you advise on how we might further debug what the .parse method receives in the dev environment, or whether there could be a timing or environment-specific issue causing the failure?
Thank you for your continued support.
Hello @jxp0t9efpl,
Could you please provide more details about your dev environment, or send me(direct message) a simplified demo with only necessary files and install/run instructions, so I’ll try to check out what exactly goes wrong.
Could you advise on how we might further debug what the .parse method receives in the dev environment, or whether there could be a timing or environment-specific issue causing the failure?
It may be helpful if you just console log the data initial and prepared:
this.mindMapData- resuilt of
this.prepareDimensions(this.mindMapData);
Also you may try to manually re-parse(.parse) data and repaint(.paint) diagram on some timeout, just in case if it’s some timing issue.
Kind regards,
Hi @Siarhei ,
Please find the below data
this.mindMapData is below
[
{
“type”: “rectangle”,
“text”: “Man”,
“x”: 30,
“y”: 0,
“id”: 1,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “rectangle”,
“text”: “Material”,
“x”: 30,
“y”: 1010,
“id”: 2,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “rectangle”,
“text”: “Method”,
“x”: 460,
“y”: 0,
“id”: 3,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “rectangle”,
“text”: “Environment”,
“x”: 460,
“y”: 1010,
“id”: 4,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “rectangle”,
“text”: “Machine”,
“x”: 890,
“y”: 0,
“id”: 5,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “rectangle”,
“text”: “Measurement”,
“x”: 890,
“y”: 1010,
“id”: 6,
“strokeWidth”: 1,
“width”: 209,
“height”: 56,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#8792A7”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#FFFFFF”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”
},
{
“type”: “circle”,
“text”: “Problem”,
“x”: 1410,
“y”: 430,
“id”: 7,
“strokeWidth”: 3,
“width”: 200,
“height”: 200,
“fontSize”: 16,
“lineHeight”: 24,
“strokeDash”: “0”,
“fill”: “#FFFFFF”,
“stroke”: “#8792A7”,
“textAlign”: “center”,
“textVerticalAlign”: “center”,
“fontStyle”: “normal”,
“fontColor”: “#000000B3”,
“fixed”: false,
“editable”: true,
“strokeType”: “line”,
“parent”: 6
},
{
“type”: “line”,
“points”: [
{
“x”: 134.5,
“y”: 56
},
{
“x”: 375,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 1,
“to”: 7,
“fromSide”: “bottom”,
“toSide”: “left”,
“id”: 44,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 1275.5,
“height”: 474,
“x”: 134.5,
“y”: 56
},
{
“type”: “line”,
“points”: [
{
“x”: 134.5,
“y”: 1010
},
{
“x”: 375,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 2,
“to”: 7,
“fromSide”: “top”,
“toSide”: “left”,
“id”: 45,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 1275.5,
“height”: 480,
“x”: 134.5,
“y”: 1010
},
{
“type”: “line”,
“points”: [
{
“x”: 564.5,
“y”: 56
},
{
“x”: 808,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 3,
“to”: 7,
“fromSide”: “bottom”,
“toSide”: “left”,
“id”: 46,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 845.5,
“height”: 474,
“x”: 564.5,
“y”: 56
},
{
“type”: “line”,
“points”: [
{
“x”: 564.5,
“y”: 1010
},
{
“x”: 808,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 4,
“to”: 7,
“fromSide”: “top”,
“toSide”: “left”,
“id”: 47,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 845.5,
“height”: 480,
“x”: 564.5,
“y”: 1010
},
{
“type”: “line”,
“points”: [
{
“x”: 994.5,
“y”: 56
},
{
“x”: 1238,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 5,
“to”: 7,
“fromSide”: “bottom”,
“toSide”: “left”,
“id”: 48,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 415.5,
“height”: 474,
“x”: 994.5,
“y”: 56
},
{
“type”: “line”,
“points”: [
{
“x”: 994.5,
“y”: 1010
},
{
“x”: 1238,
“y”: 530,
“custom”: true
},
{
“x”: 1410,
“y”: 530
}
],
“from”: 6,
“to”: 7,
“fromSide”: “top”,
“toSide”: “left”,
“id”: 49,
“stroke”: “#2196F3”,
“connectType”: “elbow”,
“strokeType”: “line”,
“strokeWidth”: 2,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 415.5,
“height”: 480,
“x”: 994.5,
“y”: 1010
},
{
“id”: “line_1773817332212_3kav02eb8”,
“type”: “line”,
“from”: {
“x”: 500,
“y”: 505,
“id”: “main_line”
},
“to”: “cause_1773817332212_tv8aje750”,
“stroke”: “#9C27B0”,
“strokeWidth”: 2,
“points”: [
{
“x”: 500,
“y”: 505
},
{
“x”: 510,
“y”: 505
}
],
“connectType”: “elbow”,
“strokeType”: “line”,
“cornersRadius”: 0,
“backArrow”: “none”,
“forwardArrow”: “none”,
“width”: 10,
“height”: 0,
“x”: 500,
“y”: 505
},
{
“id”: “cause_1773817332212_tv8aje750”,
“type”: “endline”,
“cause”: “primary”,
“color”: “#9C27B0”,
“text”: “11111sdsds”,
“x”: 350,
“y”: 505,
“width”: 160,
“height”: 40,
“preview”: {
“scale”: 0.7
},
“fixed”: false,
“headerColor”: “”,
“editable”: true,
“parent”: {
“x”: 500,
“y”: 505,
“id”: “main_line”
}
},
{
“id”: “smallbone_1774158645222_5mxm17dl3”,
“text”: “Primary 1”,
“type”: “endline”,
“cause”: “primary”,
“color”: “#9C27B0”,
“from”: 1,
“width”: 140,
“height”: 90,
“headerColor”: “”,
“fixed”: false,
“editable”: true,
“preview”: {
“scale”: 0.7
},
“x”: 0,
“y”: 0
},
{
“type”: “endline”,
“cause”: “primary”,
“color”: “#6c757d”,
“text”: “Prim 1”,
“x”: 500,
“y”: 263,
“width”: 192,
“height”: 40,
“id”: “line_1774263461830_l38jhdbvm”,
“from”: 3,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “secondary”,
“color”: “#800080”,
“text”: “Sec 1”,
“x”: 430,
“y”: 213,
“width”: 140,
“height”: 40,
“id”: “line_1774263472079_cqhk2u4fw”,
“angle”: 63,
“from”: 3,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “tertiary”,
“color”: “#5BB0FF”,
“text”: “Tri 1”,
“x”: 455,
“y”: 68,
“width”: 125,
“height”: 40,
“id”: “line_1774263481830_5m95o2rgo”,
“from”: 3,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “primary”,
“color”: “#6c757d”,
“text”: “Prim 2”,
“x”: 930,
“y”: 263,
“width”: 192,
“height”: 40,
“id”: “line_1774263521626_nltj9402y”,
“from”: 5,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “primary”,
“color”: “#6c757d”,
“text”: “Prim 4”,
“x”: 910,
“y”: 767,
“width”: 192,
“height”: 40,
“id”: “line_1774263542724_nyg5d012y”,
“from”: 6,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “secondary”,
“color”: “#800080”,
“text”: “Sec 4”,
“x”: 840,
“y”: 717,
“width”: 140,
“height”: 40,
“id”: “line_1774263558316_pbcrtw1mx”,
“angle”: 63,
“from”: 6,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “secondary”,
“color”: “#800080”,
“text”: “sec 2”,
“x”: 940,
“y”: 198,
“width”: 140,
“height”: 60,
“id”: “line_1774327023643_sypngi5f6”,
“angle”: 63,
“from”: 5,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “tertiary”,
“color”: “#5BB0FF”,
“text”: “tri 3”,
“x”: 855,
“y”: 173,
“width”: 125,
“height”: 60,
“id”: “line_1774327030471_pyxisv82l”,
“from”: 5,
“preview”: {
“scale”: 0.7
},
“fixed”: false
},
{
“type”: “endline”,
“cause”: “primary”,
“color”: “#6c757d”,
“text”: “dcfdf”,
“x”: 47,
“y”: 767,
“width”: 192,
“height”: 60,
“id”: “line_1776070820081_dskwz7byf”,
“from”: 2,
“preview”: {
“scale”: 0.7
},
“fixed”: false
}
]
And Prepared data this.prepareDimensions(this.mindMapData); data is below
Array(25)0: {type: ‘rectangle’, text: ‘Man’, x: 30, y: 0, id: 1, …}1: {type: ‘rectangle’, text: ‘Material’, x: 30, y: 1010, id: 2, …}2: {type: ‘rectangle’, text: ‘Method’, x: 460, y: 0, id: 3, …}3: {type: ‘rectangle’, text: ‘Environment’, x: 460, y: 1010, id: 4, …}4: {type: ‘rectangle’, text: ‘Machine’, x: 890, y: 0, id: 5, …}5: {type: ‘rectangle’, text: ‘Measurement’, x: 890, y: 1010, id: 6, …}6: {type: ‘circle’, text: ‘Problem’, x: 1410, y: 430, id: 7, …}7: {type: ‘line’, points: Array(3), from: 1, to: 7, fromSide: ‘bottom’, …}8: {type: ‘line’, points: Array(3), from: 2, to: 7, fromSide: ‘top’, …}9: {type: ‘line’, points: Array(3), from: 3, to: 7, fromSide: ‘bottom’, …}10: {type: ‘line’, points: Array(3), from: 4, to: 7, fromSide: ‘top’, …}11: {type: ‘line’, points: Array(3), from: 5, to: 7, fromSide: ‘bottom’, …}12: {type: ‘line’, points: Array(3), from: 6, to: 7, fromSide: ‘top’, …}13: {id: ‘line_1773817332212_3kav02eb8’, type: ‘line’, from: {…}, to: ‘cause_1773817332212_tv8aje750’, stroke: ‘#9C27B0’, …}14: {id: ‘cause_1773817332212_tv8aje750’, type: ‘endline’, cause: ‘primary’, color: ‘#9C27B0’, text: ‘11111sdsds’, …}15: {id: ‘smallbone_1774158645222_5mxm17dl3’, text: ‘Primary 1’, type: ‘endline’, cause: ‘primary’, color: ‘#9C27B0’, …}16: {type: ‘endline’, cause: ‘primary’, color: ‘#6c757d’, text: ‘Prim 1’, x: 500, …}17: {type: ‘endline’, cause: ‘secondary’, color: ‘#800080’, text: ‘Sec 1’, x: 430, …}18: {type: ‘endline’, cause: ‘tertiary’, color: ‘#5BB0FF’, text: ‘Tri 1’, x: 455, …}19: {type: ‘endline’, cause: ‘primary’, color: ‘#6c757d’, text: ‘Prim 2’, x: 930, …}20: {type: ‘endline’, cause: ‘primary’, color: ‘#6c757d’, text: ‘Prim 4’, x: 910, …}21: {type: ‘endline’, cause: ‘secondary’, color: ‘#800080’, text: ‘Sec 4’, x: 840, …}22: {type: ‘endline’, cause: ‘secondary’, color: ‘#800080’, text: ‘sec 2’, x: 940, …}23: {type: ‘endline’, cause: ‘tertiary’, color: ‘#5BB0FF’, text: ‘tri 3’, x: 855, …}24: {type: ‘endline’, cause: ‘primary’, color: ‘#6c757d’, text: ‘dcfdf’, x: 47, …}length: 25[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()findLast: ƒ findLast()findLastIndex: ƒ findLastIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toReversed: ƒ toReversed()toSorted: ƒ toSorted()toSpliced: ƒ toSpliced()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()with: ƒ with()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {at: true, copyWithin: true, entries: true, fill: true, find: true, …}[[Prototype]]: Object
Let me know if you need more information thanks you .
Hello @jxp0t9efpl,
Thank you for an update.
The thing that I can see in dataset - the incorrect from property of the following item:
“id”: “line_1773817332212_3kav02eb8”,
“type”: “line”,
“from”: {
“x”: 500,
“y”: 505,
“id”: “main_line”
},
as from should contein id of item, not an object. So you can check out your data for items with incorrect from fields.
The endline is not a known type, so I can’t say for sure that it’s usage is correct, without looking at your code.
The this.prepareDimensions(this.mindMapData) outpup seems to be minified, in some places:
from: {…},
I can’t check it properly, as it’s better to write full output into specififc file.
You also can check the difference between local/prod by running JSON.stringify of the array right before parse in prod vs local, or log mindMapData.length and a list of ids to spot duplicates.
If the issue still persists, it may be helpful if you reproduce the exact config in our demo tool:
https://snippet.dhtmlx.com/e10t8jkg
(open the snippet => reproduce your config => click the save button => send me the new link).
Or it may be useful if you send me an archive with simplified demo with install/run instructions, that I will be able to run on my side and reproduce the issue.
Kind regards,