Unhandled json parse argument causes ui to break needing cache reset

[satyam281]

Describe the bug

Ratel UI GeoView bug

GeoVIew component's renderquery function tries to parse distance as json, if provided an invalid distance like 0, breaks and causes the page ui to turn white and unresponsive. It persists through site refreshes as ratel caches the last run query and tries to show its results again. The only solution after that is to clear the cache, resulting in the loss of all previous query history.

The reason is most likely that the circle around the center point with radius provided to near is re-rendered on the geoview tab without going through query validation.

To Reproduce

1. Run ratel with any dgraph instance
2. In query, write a near query with valid near value and run it.

{
  user(func:near(location,[25,25],100)){
		location{
			coordinates
  	       }
	}
}

3. Open the the geo tab
4. Now modify the near distance value to 0 or empty

Expected behavior

Ratel ui should ideally give a warning about invalid circle radius or just show a default 0 radius point on the map on the center

Screenshots

after modifying distance to be an invalid value after a succesfully ran near query.

Environment

• OS: win10,
• Version : latest from ratel ui at play.dgraph.io

Additional context

this happens because distance value in renderQuery function inside GeoView.js component is not validated before trying to parse it as JSON

It is fixed with a simple validation check on distance before JSON.parse and giving a default value (e.g 10 metres)

Results:

1. Valid Distance

2. Invalid Distance that is handled and logged

[linear]

DGR-877 Unhandled json parse argument causes ui to break needing cache reset