Update UGAtlas site with the menu allowing viewing of canopy dashboards

[akahure]

In the UGAtlas site, we are looking to update the menu on the left side with the options to view the Canopy dashboards. The desired view is shown below

if we can achieve the other icon functionality, this would be beneficial i.e. Split view, Client Icon, homepage view. But for now we should target the dashboards integration at minimum.

The client will be having subsequent meetings with the Ministry of Health and other donors to review the dashboards and the map data. The ideal scenario would be that the data is consolidated on the same platform rather than having two different platforms.

The objective thus is to have the entire site present only one front for the dashboards and the map data, they will be integrated from https://discover.ona.io/superset/dashboard/244/?preselect_filters=%7B%2211253%22%3A%20%7B%22financial_year%22%3A%20%5B%222018/19%22%5D%7D%7D

Some queries we need to look into i.e.

• Can this be done
• If so what is the estimated Level of effort required and tasks
• Final approval needs to come from Erick/ Dickson before work can commence

Stage URL: https://stage-ugatlas.onalabs.org/

[cKellyDesign]

@akahure Is the data/dashboard public or private? 👀

If the data/dashboards are set up with the public role (which they are not) then we should be good to open the Superset Dashboard via an iFrame, without authentication. 🎉

If the data/dashboard is to be private then we will need to add an custom oAuth2 flow to authenticate the user, which would add a tremendous load. 🏋️‍♂️

Then there is the same issue we have been facing, which is that Gisida doesn't currently have any way to tell if the user is logged in. @ciremusyoka can you touch base with @kahummer on the method he and I discussed to try and get around this issue? I think it was still theory but maybe we can rapid prototype it here in UG Atlas? 🤔

[akahure]

@cKellyDesign @ciremusyoka anything on a mockup

[ciremusyoka]

@akahure we don't have a mockup building something similar to what we usually have except for the menu. The toggle button will be added on the existing menu.

[ciremusyoka]

@akahure the page should look like this without the side bar

[ciremusyoka]

@akahure @cKellyDesign below are the pages.

[cKellyDesign]

@ciremusyoka - great work! Just a few nit-picks about the icon from my end:

1. Can we use an icon that uses outline style (like the map explorer icon) rather than the current knockout style?
2. When viewing the superset iframe, can we change the icon to a map icon to indicate that clicking it will take the user back to the main map?

[ciremusyoka]

@ciremusyoka - great work! Just a few nit-picks about the icon from my end:

1. Can we use an icon that uses outline style (like the map explorer icon) rather than the current knockout style?
2. When viewing the superset iframe, can we change the icon to a map icon to indicate that clicking it will take the user back to the main map?

@cKellyDesign will make the changes

[cKellyDesign]

As per this thread, we should make sure the icons also have alt and title tags for screen-readers and browser-native tooltips.

@akahure What should we title this new button? Is it specific to Polio? Or should it be something generic like Dashboard View?

[ciremusyoka]

As per this thread, we should make sure the icons also have alt and title tags for screen-readers and browser-native tooltips.

@akahure What should we title this new button? Is it specific to Polio? Or should it be something generic like Dashboard View?

@cKellyDesign No it is not specific to polio that is a dashboard i used for testing and will be updated when @akahure provides the actual dashboard links.

[cKellyDesign]

No it is not specific to polio that is a dashboard i used for testing and will be updated when @akahure provides the actual dashboard links.

Ah ok cool thanks @ciremusyoka!

@akahure do we have those dashboard links? I'll assign this ticket to you until we get those posted here, unless there's someone else we should be looping in?

[cKellyDesign]

@ciremusyoka here are some icons we can use: icons_white.zip

[cKellyDesign]

Some feedback from a convo w/ @rowo

The positioning of the icons feels a little strange given their hierarchy (aka - this little icon hiding over on the right navigates to a completely different experience). Because of this it may make more sense for these icons to live between the site title and the first dropdown of layers.

It also may make sense to show both map and chart icons at the same time, and simply highlight the one which is active.

[cKellyDesign]

@ciremusyoka here are some screens incorporating Roger's feedback using the icons zipped above, in these screens i'm just dropping the opacity of the icon to 80% but you might try 75%.

[cKellyDesign]

As for the Map Explorer button, maybe we could position it fixed and make it look like one of the map control buttons (the button lives outside of the React components which is why we can't just migrate it into the gisida-private branch). Though maybe that should be lower priority than getting the iframes working.

[ciremusyoka]

@cKellyDesign Adding the two icons at once will make it impossible to achieve responsiveness on smaller screen.

[ciremusyoka]

@cKellyDesign Have opted to show the two icons only dashboard page is active

[ciremusyoka]

@akahure Have deployed the changes to stage.

[cKellyDesign]

@cKellyDesign Have opted to show the two icons only dashboard page is active

@ciremusyoka why?

[cKellyDesign]

@ciremusyoka When we have two icons showing like this, one of them should have their opacity dropped to around .7 to indicate it's not the active view.

[ciremusyoka]

@cKellyDesign Have opted to show the two icons only dashboard page is active

@ciremusyoka why?

Because of the responsiveness on smaller devices.

[cKellyDesign]

@cKellyDesign Have opted to show the two icons only dashboard page is active

@ciremusyoka why?

Because of the responsiveness on smaller devices.

Ah ok that makes sense. Maybe then we can just toggle the two icons in the same place (so show the chart icon when on the map and show the map icon when on the dashboard)?

[ciremusyoka]

@cKellyDesign Have opted to show the two icons only dashboard page is active

@ciremusyoka why?

Because of the responsiveness on smaller devices.

Ah ok that makes sense. Maybe then we can just toggle the two icons in the same place (so show the chart icon when on the map and show the map icon when on the dashboard)?

@cKellyDesign This can work too.

[cKellyDesign]

@akahure are the Superset dashboards completely set up for this? The dashboard we have in there currently looks to be private.