[6.2] Improve Opendata.swiss appearance

[sosiology]

Description

Opendata.swiss has improved the display of the harvested cubes from LINDAS:

They embed the resource, which appears in the CKAN endpoint under the name "visualize.admin.ch," as an iframe—this is just a working theory, as I’m currently in contact with Opendata.swiss to confirm if that’s really the case. The link used for this resource is the one for the cube’s preview. Unfortunately, this now means that the Visualize application could potentially be accessed via any dataset, which could confuse users—especially since the preview page also contains metadata displayed further down.

My suggestion would be for us to offer something along these lines:

A simplified version of this table, without the title, a reduced header and footer, and a limited selection of data—since it's a preview, displaying between 20 and 100 entries would probably suffice. This would be part of the Visualize API. This API call could then be used as a substitute for the link in the CKAN endpoint.

DOD

• [ ] Conceptualize an alternative approach on how to best integrate Visualize into Open Data Swiss

[sosiology]

@KerstinFaye @bprusinowski based on the discussion with Marco and BFS on 25.11.2024 here is the proposed scope of this task. Could you please add your estimates by the end of this week (29.11.2024)

• Develop a custom iframe for open data swiss. The iframe should include:

  • a table view of the dataset (analog the current preview)
  • The back to the datasets button should be removed
  • The metadata sidebar should be removed
  • The header should be removed, including the language selection
  • The download data option below the table should be removed.
  • A call to action button at the top of the table: "Visualierung auf Visualize mit diesen Datensatz erstellen"
  • The button should be prominent and inform the user that they will be directed to a new page
  • Clicking the button should open a new tab, the target is the preview of the data set in visualize

• The iframe should be dynamic in size, we are clarifying if it is possible to add a script tag see: https://gitlab.ldbar.ch/bafu/visualize/-/issues/709#note_17874

[bprusinowski]

@sosiology assuming the design will be mostly like dataset preview we have now (and that we don't add new UI embedding options, but e.g. simply a new URL with cube iri, like /preview/cube-iri), with some removed elements, it's not a big task – I'd say it shouldn't take more than 8-12h of development, but let's see how @KerstinFaye would like to approach this 👍

[sosiology]

Thank you @bprusinowski. Also worth mentioning, this first iteration should be kept low effort. At this time only adjustments on our side are feasible and not larger adjustments to the ckan harvester

[noahonyejese]

@sosiology is this the desired outcome? Do we want to remove the footer?

cc: @bprusinowski

---

ps: @bprusinowski do we want to resize the whole page? or just the table, or make the table the whole page? - let me know what you think 🙇🏽‍♂️

For now I made it fullscreen + allowed the table to also take up that space...

[bprusinowski]

@noahonyejese I think the logic should be the same as dynamic chart iframe, so the page takes the full width with horizontally scrollable table, and the height of the whole page is adjusted automatically when it's embedded 👍

[adintegra]

Thanks @noahonyejese 🎉 I have two observations:

• I think it would be good if the footer were removed
• Clicking on the button to create a new visualization opens within the iFrame itself; potentially, it may also be worth considering a shorter label for the button

Nice work!

[noahonyejese]

Thanks @noahonyejese 🎉 I have two observations:

• I think it would be good if the footer were removed
• Clicking on the button to create a new visualization opens within the iFrame itself; potentially, it may also be worth considering a shorter label for the button

Nice work!

Thanks @adintegra I removed the footer and optimized everything a bit, yeah the label is super long, seems like that was the clients request...

[sosiology]

@noahonyejese Thanks for preparing this. As discussed in our sync:

• We will try to reduce the text in the button with a shorter call to action. We discussed introducing the icon to show the user it is an external target (see screenshot of example button on open data swiss). And making the button background grey (to align with the new CI / CD) and also harmonize better with Open Data Swiss.
• In addition to the button adjustments, as proposed by @adintegra - I agree to remove the footer.

[KerstinFaye]

@noahonyejese @sosiology I made a quick design draft: https://www.figma.com/design/LrxKyljpgvadf7H0jlsqVb/visualize.admin.ch---design_NEW?node-id=9253-64058&t=Xn7Z2tKnUmE7iTxL-4

The button text in English can be "Create with Visualize.admin", German translation: "Mit Visualize.admin erstellen" and both with the external link arrow up right

[sosiology]

Thanks @KerstinFaye - design looks really nice in the new CI/CD. Re the button - I cannot remember what the reasoning was, but in the DOD the button to visualize should be placed at the top of the table (also see here: https://gitlab.ldbar.ch/bafu/visualize/-/issues/709#note_17873). If possible, I would keep it there.

[KerstinFaye]

Thanks @sosiology, Yes, I saw. I did it differently since I did not see any reason why and normally Call to Actions should be places underneath since the user would review the dataset and then decide to create with this. But I can place it above. But I would want to avoid that someone just wrote this without a conscious decision made. This would be with the button on top:

[noahonyejese]

@KerstinFaye & @sosiology not sure if it's clear what the button does, or is it clear that a Visualisation is meant? I think in order to keep the test short we should emphasise what the button does, and use the icon show that's it's external?

[sosiology]

@noahonyejese I think we should add the icon and keep the text you implemented "Create a Visualization"

[KerstinFaye]

@noahonyejese as far as I saw implemented on Opendata Swiss, maybe we could reduce the white space on the left side of the iframe to align it with the rest of the text at the page. Also I would keep the button right aligned since most of the other buttons on the page are also right aligned? Do you think this is feasible?