feat(editor): support using relative CSV file URLs for Gist specs

[sehilyi]

This PR allows Editor users to specify relative file URLs of CSV data in Gist specs. This will work when files are located in the same Gist where the spec (i.e., gosling.js) is located.

• Example URL for Editor: http://localhost:3000/?gist=sehilyi/c7d3494ef35366e9ee77b570ffd9d184
• Example Gist URL: https://gist.github.com/sehilyi/c7d3494ef35366e9ee77b570ffd9d184

File structure:

GitHub Gist
ㄴ gosling.js    // spec
ㄴ example.csv   // file to be used

Original spec in Gist (gosling.js):

data: { ..., type: 'csv', 
   url: './example.csv'
}

The spec that is updated in the Editor before compiling:

data: { ..., type: 'csv', 
   url: 'https://gist.githubusercontent.com/sehilyi/c7d3494ef35366e9ee77b570ffd9d184/raw/NA_summits.bed'
}

[sehilyi]

We could expose more util functions here later.

[manzt]

Good to know! I wonder if we need to expose these currently to users.. We could treat these as private functions by importing from src:

// editor.tsx
import { traverseTracksAndView } from 'gosling.js/core/utils/spec-preprocess';

[sehilyi]

I assumed those functions would be useful for users to have, but I think it might be better to expose them when we find/hear actual needs from users. Let me make changes reflecting your suggestion!

[sehilyi]

Updates on this file are not directly related to this PR but are to just handle some cases that were not handled correctly (i.e., tracks in a track). These two functions were not properly updated previously after we had changed the grammar.

[manzt]

Nice! just a couple of minor comments.

[manzt]

Good to know! I wonder if we need to expose these currently to users.. We could treat these as private functions by importing from src:

// editor.tsx
import { traverseTracksAndView } from 'gosling.js/core/utils/spec-preprocess';

[manzt]

I wonder if we could make this an even more reusable:

/**
 * Convert relative CSV data URLs to absolute URLs.
 * (e.g., './example.csv' => 'https://gist.githubusercontent.com/{urlGist}/raw/example.csv')
 */
function resolveRelativeCsvUrls(spec: string, importMeta: URL) {
	const newSpec = JSON.parse(spec);
	// https://regex101.com/r/l87Q5q/1
	const relativePathRegex = /^[.\/]|^\.[.\/]|^\.\.[^\/]/
	gosling.traverseTracksAndViews(newSpec as gosling.GoslingSpec, (tv: any) => {
		if (tv.data&& tv.data.type === 'csv' && relativePathRegex.test(tv.data.url)) {
			tv.data.url = new URL(tv.data.url, importMeta).href;
		}
	});
	return stringify(newSpec);
}

and then:

    const specUrl = new URL(`https://gist.githubusercontent.com/${gist}/raw/${dataFile}`);
    const whenCode = fetch(specUrl.href).then(async response =>
        response.status === 200 ? resolveRelativeCsvUrls(await response.text(), specUrl) : null
    );

the second argument to URL is a base to resolve a path relative to.

[sehilyi]

Thank you for this suggestion, I really like it! Good to know that URL supports the relative URL using the second parameter. I will make the changes reflecting your comment.