Implement Homepage 2.2

[nasaownsky]

Description of the change

Implementing Homepage 2.2

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Configuration change (adjusts configuration to achieve some end related to functionality, development, performance, or security)

Related issues

Closes #522

Checklists

Development

These boxes should be checked by the submitter prior to merging:

• Manual testing against realistic data has been performed locally

Code review

These boxes should be checked by reviewers prior to merging:

• This pull request has a descriptive title and information useful to a reviewer
• This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
• Potential security implications or infrastructural changes have been considered, if relevant

[nasaownsky]

I personally think, that 5 seconds is not enough for user to try interact with preview. Maybe double it? Try it for yourself @hobuobi @terryttsai

[nasaownsky]

Also, @terryttsai maybe you know where to disable start animation of WindowedTimeSeries chart? It seems a bit clunky, and I think that we better should be using standard opacity transition in the preview. Thanks!

[hobuobi]

Awesome work! So exciting to see this implemented. A few comments here and there:

Major/Breaking

• The current implementation does not work with fewer than four visualizations (e.g., on Pennsylvania's homepage, it tries to rotate to an imaginary fourth visualization and shows nothing for five seconds).
• I noticed a strange bug on the other pages where the legends for the bubble charts seemed to overlap with the actual visualization... not sure why, but not seeing the same thing in staging or production!

Design Nits

• Use the typical body font for the text below the header (for ND, "At the department of corrections in North Dakota, we believe that sharing information builds greater accountability between us and the communities we serve.")
• Font size of the carousel labels ("Prison," "Racial Disparities," etc) could be larger. 1.5rem seemed like a possible good size on desktop.
• Button:
  • Font size of the button is too small; should be about the same size as the carousel labels (suggested 1.5rem).
  • Should add a shadow to the button. (Design spec is #006C67 at 0.3 opacity; Y-offset of 10; blur of 20px. Can play around with it a little!)
  • Ideal would be to have the button width flex based on its contents, rather than stay a static width.
• The margins seem inconsistent (wider) with the Narrative pages.
• Can we see what this would look like if we added the legends back?

This should cover almost everything I caught! Thanks again for the hard work.

[terryttsai]

Trying this out, when I wave my cursor over the right-most racial disparity segment, the popover is cut-off.

Also, is there supposed to be no popover in the parole breakdown by county?

[nasaownsky]

@hobuobi

I noticed a strange bug on the other pages where the legends for the bubble charts seemed to overlap with the actual visualization... not sure why, but not seeing the same thing in staging or production!

There's a comment in BubbleChart.tsx: /* circles that are very close to the edge might overlap by a couple of pixels, that's fine. don't clip them */

The margins seem inconsistent (wider) with the Narrative pages.

Not sure what you mean. Could you tell more specific?

Other changes was made as requested.

[hobuobi]

Awesome work! To wrap some of this up:

RESPONSES TO THE ABOVE

• re: chart overflow: @terryttsai already mentioned a possible solution to the bubble chart overflow issue. If that doesn't work or breaks other things, I think it's minor enough to skip.
• re: margins: the left and right margins for the homepage are slightly smaller than on the narrative pages. But also minor enough to skip, so I wouldn't worry about it if it's not a completely trivial fix!

DESIGN NITS

• Reduce the size of the header on mobile. 1.75rem seems to work well.
• Body text on mobile homepage looks like the right size, but is slightly too small on desktop. Would bump this up to be around 1.3rem on desktop.
• Is it possible to ease/transition the width of the button as it changes size? Lower priority, so if it’s hard to make it robust, no worries.
• Add "Data" after each section name to the button (e.g. "Explore Racial Disparities Data"). Please make sure the button still fits everywhere!
• Center the button on mobile.

FUNCTIONALITY

• We should implement a “pause” for the carousel: If the user interacting with a chart, the timer should pause and the carousel should not advance to the next section until the user stops interacting with the chart. “Interacting” means that they are hovering over the chart or the legend.
• Links should open in a new tab.

CONTENT

Please copy exactly as written.

US_ND

• Header: Our mission is to transform lives, influence change, and strengthen community.
• Body: At the North Dakota Department of Corrections and Rehabilitation, transparency is a critical element of our mission; sharing information builds greater accountability between the DOCR and the communities we serve.

US_PA

• Header: The Pennsylvania Department of Corrections (DOC) is committed to enhancing public safety.
• Body: The DOC's mission is to reduce criminal behavior by providing individualized treatment and education to incarcerated individuals, resulting in successful community reintegration through accountability and positive change.

US_ID (subject to change, but good placeholder)

• Header: Explore data from Idaho’s corrections system.
• Body: The Idaho Department of Corrections aims to protect the public, our staff, and those within our custody and supervision through safety, accountability, partnerships and providing opportunities for change.

US_TN (subject to change, but good placeholder)

• Header: Explore data from Tennessee’s corrections system.
• Body: The Tennessee Department of Correction has an inherent responsibility to provide those within our custody with opportunities to grow. Sharing information builds greater accountability between our department and the communities we serve.

[coveralls]

Pull Request Test Coverage Report for Build 2302413894

• 41 of 50 (82.0%) changed or added relevant lines in 7 files are covered.
• 6 unchanged lines in 2 files lost coverage.
• Overall coverage decreased (-0.5%) to 84.309%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx	4	5	80.0%
spotlight-client/src/OtherNarrativeLinksPreview/OtherNarrativeLinksPreview.tsx	20	28	71.43%

Files with Coverage Reduction	New Missed Lines	%
spotlight-client/src/MetricVizMapper/MetricVizMapper.tsx	3	73.68%
spotlight-client/src/OtherNarrativeLinksPreview/OtherNarrativeLinksPreview.tsx	3	66.67%

Totals
Change from base Build 2296619070:	-0.5%
Covered Lines:	2033
Relevant Lines:	2284

---

💛 - Coveralls

[nasaownsky]

I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in this case - but adjusts.

[hobuobi]

Thank you for addressing all of the comments! I think this is all good from a product/design POV; will leave it to @terryttsai to wrap up code review.
CC @agronomic in case he wants to check out the new design/functionality. :)

[terryttsai]

LGTM!