Graph window stuck in an infinite loading state

[vaibhavkgiradkar]

After executing a query in Nebula Studio, I receive the results within a few seconds. However, when attempting to view the graph window, it remains stuck in an infinite loading state. Can anyone suggest what could be causing this issue?

[wey-gu]

Which version of studio/nebulagraph was used, please?

[vaibhavkgiradkar]

For Nebula-graph : 3.6.0
For Studio : 3.7.0

[wey-gu]

Any chance you could help provide the browser console log or other things that could help with the root cause analysis/ reproducing of the problem?

[wey-gu]

Please @huaxiabuluo help take a look at this, anything @vaibhavkgiradkar could help collect to help address it?

[vaibhavkgiradkar]

@wey-gu
One point to add when I'm executing with single step it is quick and working perfectly fine.

for logs: can you help me with steps to find it?

[wey-gu]

for the browser log, just open the dev tool window in studio view and then try reproduce it to see what it says in the console. normally it's the traceback log.

i.e in chrome:

console_log_browser.mov

[vaibhavkgiradkar]

Ok, I found something interesting here

=====ngqlSocket open
ContentScript.js:7 onPaste started
ContentScript.js:7 onPaste completed
app.047ef8d16d7f8fc67c25.js:1  **Uncaught (in promise) DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'consoleResults' exceeded the quota.**
    at http://internal-k8s-istiosys-istioalb.us-east-1.elb.amazonaws.com/app.047ef8d16d7f8fc67c25.js:1:698924
    at async q (http://internal-k8s-istiosys-istioa.us-east-1.elb.amazonaws.com/app.047ef8d16d7f8fc67c25.js:1:144229)
(anonymous) @ app.047ef8d16d7f8fc67c25.js:1
await in (anonymous) (async)
rn @ 712.5341b4c7541b645e94a3.js:1
Bt @ 74.55c350b185de8c9ff90f.js:2
Vt @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Ar @ 74.55c350b185de8c9ff90f.js:2
Nr @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Ft @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Or @ 74.55c350b185de8c9ff90f.js:2
Ke @ 74.55c350b185de8c9ff90f.js:2
Qe @ 74.55c350b185de8c9ff90f.js:2
t.unstable_runWithPriority @ 558.b5b22fed9ecab378354b.js:2
Ho @ 74.55c350b185de8c9ff90f.js:2
Tt @ 74.55c350b185de8c9ff90f.js:2
Ge @ 74.55c350b185de8c9ff90f.js:2
558.b5b22fed9ecab378354b.js:2  Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
u @ 558.b5b22fed9ecab378354b.js:2
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
app.047ef8d16d7f8fc67c25.js:1  **JSON.parse error** {name: 'SyntaxError', message: "Unexpected ''", at: 1, text: ''}at: 1message: "Unexpected ''"name: "SyntaxError"text: ""[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
f @ app.047ef8d16d7f8fc67c25.js:1
(anonymous) @ app.047ef8d16d7f8fc67c25.js:1

[vaibhavkgiradkar]

Is there any way to address
DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'consoleResults' exceeded the quota.

[wey-gu]

looks like

DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'consoleResults' exceeded the quota.

Refers to it exceeds quota of browser local storage?

@mizy @huaxiabuluo ?

[vaibhavkgiradkar]

@wey-gu
To further debug this I had monitored the Pods but they are also working fine
For Browser local storage I was checking the options to update but unable to find it

[huaxiabuluo]

Ok, I found something interesting here

=====ngqlSocket open
ContentScript.js:7 onPaste started
ContentScript.js:7 onPaste completed
app.047ef8d16d7f8fc67c25.js:1  **Uncaught (in promise) DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'consoleResults' exceeded the quota.**
    at http://internal-k8s-istiosys-istioalb.us-east-1.elb.amazonaws.com/app.047ef8d16d7f8fc67c25.js:1:698924
    at async q (http://internal-k8s-istiosys-istioa.us-east-1.elb.amazonaws.com/app.047ef8d16d7f8fc67c25.js:1:144229)
(anonymous) @ app.047ef8d16d7f8fc67c25.js:1
await in (anonymous) (async)
rn @ 712.5341b4c7541b645e94a3.js:1
Bt @ 74.55c350b185de8c9ff90f.js:2
Vt @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Ar @ 74.55c350b185de8c9ff90f.js:2
Nr @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Ft @ 74.55c350b185de8c9ff90f.js:2
(anonymous) @ 74.55c350b185de8c9ff90f.js:2
Or @ 74.55c350b185de8c9ff90f.js:2
Ke @ 74.55c350b185de8c9ff90f.js:2
Qe @ 74.55c350b185de8c9ff90f.js:2
t.unstable_runWithPriority @ 558.b5b22fed9ecab378354b.js:2
Ho @ 74.55c350b185de8c9ff90f.js:2
Tt @ 74.55c350b185de8c9ff90f.js:2
Ge @ 74.55c350b185de8c9ff90f.js:2
558.b5b22fed9ecab378354b.js:2  Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
u @ 558.b5b22fed9ecab378354b.js:2
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
requestAnimationFrame (async)
e @ 558.b5b22fed9ecab378354b.js:2
app.047ef8d16d7f8fc67c25.js:1  **JSON.parse error** {name: 'SyntaxError', message: "Unexpected ''", at: 1, text: ''}at: 1message: "Unexpected ''"name: "SyntaxError"text: ""[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
f @ app.047ef8d16d7f8fc67c25.js:1
(anonymous) @ app.047ef8d16d7f8fc67c25.js:1

this issue is caused by writing excessive data into sessionStorage (the execution of NGQL returned a large amount of data), and this is a feature point that needs optimization.

typically, the amount of data stored in sessionStorage should not exceed 5MB
Web Storage

besides the error Uncaught (in promise) DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'consoleResults' exceeded the quota., any other error messages thrown in the browser console?

[vaibhavkgiradkar]

@huaxiabuluo
Json Parse error:
app.047ef8d16d7f8fc67c25.js:1 JSON.parse error {name: 'SyntaxError', message: "Unexpected ''", at: 1, text: ''}at: 1message: "Unexpected ''"name: "SyntaxError"text: ""[[Prototype]]: Object
f @ app.047ef8d16d7f8fc67c25.js:1
(anonymous) @ app.047ef8d16d7f8fc67c25.js:1

Can we get the json string which is getting used here?

[huaxiabuluo]

@huaxiabuluo Json Parse error: app.047ef8d16d7f8fc67c25.js:1 JSON.parse error {name: 'SyntaxError', message: "Unexpected ''", at: 1, text: ''}at: 1message: "Unexpected ''"name: "SyntaxError"text: ""[[Prototype]]: Object f @ app.047ef8d16d7f8fc67c25.js:1 (anonymous) @ app.047ef8d16d7f8fc67c25.js:1

Can we get the json string which is getting used here?

yes, but we need to do some debugging.

aside from the graph visual anomalies, how large is the data returned by this execution result?

[vaibhavkgiradkar]

is there any way to add limit in this query?

[vaibhavkgiradkar]

Im getting one empty record in last row
....]","[]"

[huaxiabuluo]

is there any way to add limit in this query?

yeah, check this document https://docs.nebula-graph.io/3.6.0/3.ngql-guide/7.general-query-statements/7.get-subgraph/#syntax

// specify the edge type
GET SUBGRAPH 2 STEPS FROM "player101" BOTH serve YIELD VERTICES AS nodes, EDGES AS relationships;

// specify the filter
GET SUBGRAPH 2 STEPS FROM "player101" WHERE serve.start_year > 2010 YIELD VERTICES AS nodes, EDGES AS relationships;

i suspect an element data anomaly might have caused the parsing error. You can inspect the returned results using the following method

[vaibhavkgiradkar]

By implementing a filter clause and controlling the data volume to avert exceeding the storage capacity of the browser, I can successfully visualize data on the graph.