load a list of graphs from server

[michaelchin]

load the list of graphs from https://gws.gplates.org/mobile/get_graphs

[michaelchin]

similar to city data, after you fetch data from server, save the data into local storage. we can use the data from local storage if network is not available. See the code below.

gplates-app/src/functions/rasterMaps.ts

Lines 111 to 147 in 0a4bfae

	export const loadRasterMaps = (callback: Function) => {
	fetch(serverURL.replace(/\/+$/, '') + '/mobile/get_rasters')
	.then((response) => response.json())
	.then((jsonData) => {
	//console.log(json_data)
	rasterMaps.length = 0
	//rasterMaps.splice(0, rasterMaps.length)
	rasterMaps.push(...convertJsonToRasterMaps(jsonData))
	callback(false) //network fail=false
	//save the data to local storage
	getDefaultStore()
	.then((store) => {
	store.set('rasters', jsonData)
	})
	.catch((error) => {
	console.log(error)
	})
	})
	.catch(async (error) => {
	console.log(error)
	//network failed, not try local storage
	try {
	let store = await getDefaultStore()
	let localData = await store.get('rasters')
	console.log('localData')
	console.log(localData)
	if (localData) {
	rasterMaps.push(...convertJsonToRasterMaps(localData))
	} else {
	rasterMaps.push(...convertJsonToRasterMaps(failSafeRasterMaps))
	}
	} catch (err) {
	console.log(err)
	}
	callback(true) //network fail=true
	})
	}

[yiyanw]

@michaelchin this URL has a different security policy, I got the error on this URL when I use the same way to request it.

Access to fetch at 'https://gws.gplates.org/static/app-graphs.json' from origin 'http://127.0.0.1:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

the request code I used is:

let data: any = await fetch('https://gws.gplates.org/static/app-graphs.json')

[michaelchin]

try this one https://gws.gplates.org/mobile/get_graphs

[michaelchin]

@yiyanw could you please work on this one? See the comments below. I have added new graph data for test purpose. Meanwhile I will sort out the Cities.

gplates-app/src/components/GraphPanel.tsx

Lines 79 to 96 in 21bab14

	//TODO: The time data fetched from the server may not be arithmetic sequence
	//with 1Ma step, such as [0,4, 23,24,35...] is possible.
	//the code below needs improvement
	//Better to use linear interpolate on the data before cutting the range
	if (rasterMapAnimateRange.upper != 0) {
	DATA = data.slice(
	rasterMapAnimateRange.lower,
	rasterMapAnimateRange.upper
	)
	X_VALS = x_vals.slice(
	rasterMapAnimateRange.lower,
	rasterMapAnimateRange.upper
	)
	Y_VALS = y_vals.slice(
	rasterMapAnimateRange.lower,
	rasterMapAnimateRange.upper
	)
	}