iframe for home page does not resize

[kloydrti]

Sample iframe is on https://www-dev.nih-cfde.org.
The iframe container is responsive, but the iframe source is not. The container will be anywhere from 290px to 864px wide, depending on the window size. It would be ideal for the iframe source to also resize according to window width.

Resizing the graph to fit on a mobile screen makes it very difficult to see anything of value. I wonder if we could create a much simpler graphic to summarize 3-5 important statistics about the dashboard instead of showing the graph. More of an infographic with big numbers saying "# total files" or "data from # CF Programs", plus a "visit the data portal to learn more" call to action. The statistics could still be tied to the data so they will update themselves, but we wouldn't have to fit a lot of graphic content into a small space.

[jonathancrabtree]

A simpler graphic sounds like a good idea. We have similar functionality in a simpler form already e.g., in the table in the top right-hand corner of the home page:

For now I've modified the graph on summary_graph.html to resize with its enclosing div. Here's what it looks like at 290 pixels wide:

At around 480 pixels wide it switches to the following layout, adding back the color legend and last updated caption, and putting the 3 dropdown menus back on one line:

The total counts at the top of the stacked bars will only appear if there's enough space for them. Here it is at the stated max width, 864 pixels wide (though it will expand further):

[kloydrti]

I'm not seeing those changes on https://app-dev-new.nih-cfde.org/summary_graph.html Do I have the right URL?

[jonathancrabtree]

I think you have the right URL, @kloydrti but it probably hasn't been updated from GitHub master in a while. @jrchudy, are you able to do that? Unless something else comes up I'm done making changes on master and have since moved over to a branch (epic2_202101) for the Epic 2 work.

[jrchudy]

@kloydrti @jonathancrabtree I have updated app-dev-new.nih-cfde.org with current master from dashboard repo.

[kloydrti]

It's looking better now, but the key text is getting cut off on the right side. Is there a way to make the text wrap? It looks like the key will never be less than 150px in width, so if the SVG can be output to that size it might work.

[jonathancrabtree]

Based on the discussion at the last UI meeting I've "ellipsized" the color legend labels, as shown here (and also moved things around a bit so that the color legend appears in exactly the same place regardless of chart type):

The problem with allowing the labels to wrap onto the next line is that you run the risk of converting a horizontal overflow problem into a vertical overflow problem. However, unless you're on a mobile platform you should be able to see the full term by mousing over the truncated one (though appearance will differ from platform to platform as it's just showing the title tag):

[jonathancrabtree]

I accidentally committed this on the epic2_202101 branch initially, but it's on master now along with the rest of the Epic 1 technical debt.

[jrchudy]

The server was updated today to add these changes to app-dev-new. These changes will make their way to staging sometime this week for further testing.

Truncation looks good though on www-dev.

[kloydrti]

This looks good. I updated the iframe to pull from app-dev instead of app-dev-new. @jonathancrabtree if you could remove the padding from the

component it should be perfect.

[jonathancrabtree]

Hi @kloydrti, padding has been removed - it's a couple of line addition to css/summary_graph.css to override the setting in style.css @jrchudy will have to update from master to see it on app-dev (plus maybe a shift-reload to clear the browser cache and reload CSS)

[jrchudy]

My understanding is that app-dev should be receiving daily updates now. These changes should be available to preview on app-dev.nih-cfde.org.

[jonathancrabtree]

Hi @kloydrti, I just remembered to check on the padding issue and found that indeed I hadn't committed the fix to the Epic2 branch (it was the earlier set of changes that I'd made in both places). Sorry about that, I think I was expecting there'd be a merge with master before we actually installed any of the Epic2 code. Instead app-dev is now set to pull from dashboard/epic2_202101 on a daily basis. I'm not sure what time this occurs, so it may be up to 24 hours before you actually see the change/correction on app-dev.

[jrchudy]

@jonathancrabtree @kloydrti do either of you have an update on this issue?

Sounds like this has been resolved we were just waiting for it to be tested/reviewed? If that's the case, can we close this issue after making sure it is behaving as expected.

This will later be attached to the acceptance testing issue to retest.

[kloydrti]

It looks good to me. When the page that has the iframe source code is pushed to production, I will update the production web portal site with the new home page.

[kloydrti]

Amanda saw this today and asked if we could remove the timestamp from the top right corner. Other than that it's good to go.

[jonathancrabtree]

Sorry, @kloydrti, it looks like I lied - the timestamp is still showing up for me in app-dev, it just took a couple of seconds to load. Investigating why...

[jonathancrabtree]

Looks like app-dev has not been updated from GitHub since the commit 3 days ago.

[jrchudy]

We have recently updated app-dev. I can see the timestamp no longer shows on dev now.