search

gbif / hp-canadensys

0 stars 2 forks source link

Embed applications #1

Open CaroleSinou opened 1 year ago

CaroleSinou commented 1 year ago

Describe the solution you'd like On the current Canadensys website, three tools are embedded within pages (https://data.canadensys.net/tools/coordinates, https://data.canadensys.net/tools/dates and https://data.canadensys.net/vascan/search). Is it possible to embed these tools within the jekyll portal? If so, is there documentation or examples to explain how it works?

Describe alternatives you've considered If this is not a possibility, we could keep the current Canadensys pages for each tools, but we will need to modify the layout in order to keep the overall look and links to other content within the portal.

thomasstjerne commented 1 year ago

Hi @CaroleSinou It is possible to embed tools, and for tools that depend on backend services (like the vascan search) it is the only option. There is and example of a hosted portal page with an embedded tool here: https://legume.hp.gbif-staging.org/phylogeny-explorer/ And this is how it is embedded using an iFrame: https://raw.githubusercontent.com/gbif/hp-legume/4a7783146177154c4f675ddbee6683d0ee3e7593/phylogeny-explorer.md

CaroleSinou commented 1 year ago

Hi @thomasstjerne,

That's perfect! Now, I need to find the sources for the apps themselves. For now, I've used the curent pages on Canadensys as sources, but obviously it is not what I want.

MortenHofft commented 1 year ago

Another example https://hp-colombian-biodiversity.gbif-staging.org/buscar/gacetero/

styling https://github.com/gbif/hp-colombian-biodiversity/blob/27ef1eb89030f6f6aa3008faa747ce71a52381fc/_sass/_main.scss#L304

source https://github.com/gbif/hp-colombian-biodiversity/blob/27ef1eb89030f6f6aa3008faa747ce71a52381fc/_data/custom.yml#L1

MortenHofft commented 1 year ago

I've just looked at your tools. iframes are probably not the most natural way to do this I would say. It could work, but since you have an API for all those tools, it is more natural to have a little javascript that use the API. But of course it will require someone with developer experience to do so. The tools aren't iframes currently either

CaroleSinou commented 1 year ago

@MortenHofft, I'm continuing the thread instead of creating a new issue.

Question: How to integrate our Conversion tools (coordinates and dates) using the API.

I have tried a few things, based on tutorials available online, but it is obviously not working. I have insert a script in /tools/date-parsing.md, but I am not able to visualize anything on the page (probably because I have not done anything to visualize it...).

Are you aware of a resource I can use to learn how to use the API in that case? Or can you help me do it for the date and I will do it later for the coordinates?

Thanks!

MortenHofft commented 1 year ago

If you are not familiar with coding, then I would think it was too large a starting project to implement this all over. I assumed that there might be a software developer that could help with it.

The reason that what you have is failing is because the API isn't designed to be used by the browser. It doesn't have the required CORS headers. Essentially your API forbids anyone from using it from the browser.

Access to fetch at 'https://data.canadensys.net/tools/dates.json' from origin 'https://canadensys.hp.gbif-staging.org' 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.

I've created a simple iframe version as you can see here https://canadensys.hp.gbif-staging.org/tools/date-parsing/ Clearly that would require that you kept hosting/maintaining such a page, and that you removed menu, sidebars etc. So that it was just the tool.

CaroleSinou commented 1 year ago

Thanks Morten. In my last discussion with Jérémy, he was not sure he would have time to work on the API. The iframe is, in my view, a good idea, but I (or Jérémy) will need to modify the layout of the page to remove/modify the header and footer, as well as removing the menu on the right. The only issue I see is that this page is currently live, and I will need to have a test page to work on. I'll ask Jérémy if he can do something to help me with that.