Fixes

Recidiviz · Sep 8, 2021 · c05dd43 · c05dd43
1 parent cd49440
commit c05dd43
Show file tree

Hide file tree

Showing 18 changed files with 199 additions and 174 deletions.
diff --git a/spotlight-client/src/App.test.tsx b/spotlight-client/src/App.test.tsx
@@ -74,6 +74,14 @@ describe("navigation", () => {
     ).toBeVisible();
   });
 
+  test("tenant home", () => {
+    expect.hasAssertions();
+    const targetPath = "/us-nd";
+    const lookupArgs = ["heading", { name: /DOCR/, level: 1 }] as const;
+
+    return verifyWithNavigation({ targetPath, lookupArgs });
+  });
+
   test("single narrative page", () => {
     expect.hasAssertions();
     const targetPath = `/us-nd/${NarrativesSlug}/prison`;
@@ -134,9 +142,7 @@ describe("navigation", () => {
 
     fireEvent.click(tenantLink);
     await waitFor(async () =>
-      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
-        "Our mission is to transform lives, influence change, and strengthen community. Transparency is a critical element of our mission; sharing information builds greater accountability between the DOCR and the communities we serve."
-      )
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent("DOCR")
     );
 
     expect(

diff --git a/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx b/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx
@@ -23,6 +23,7 @@ import { animated, useSpring } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
 import { track } from "../analytics";
 import { TenantId } from "../contentApi/types";
+import SystemNarrative from "../contentModels/SystemNarrative";
 import { Narrative } from "../contentModels/types";
 import MetricVizMapper from "../MetricVizMapper";
 import getUrlForResource from "../routerUtils/getUrlForResource";
@@ -35,7 +36,9 @@ import Arrow from "../UiLibrary/Arrow";
 
 const Wrapper = styled.div`
   /* prevents the trailing grid gaps from pushing other stuff around */
-  overflow: hidden;
+  @media (max-width: ${breakpoints.tablet[0]}px) {
+    overflow: hidden;
+  }
 `;
 
 const LinkList = styled.ul`
@@ -61,7 +64,7 @@ const LinkListItem = styled.li`
   }
 
   @media (min-width: ${breakpoints.desktop[0]}px) {
-    width: calc(100% / 2);
+    width: calc(100% / 1);
   }
 
   @media (min-width: ${breakpoints.xl[0]}px) {
@@ -70,7 +73,6 @@ const LinkListItem = styled.li`
 
   a {
     border-top: 1px solid ${colors.rule};
-    border-bottom: 1px solid ${colors.rule};
     color: ${colors.text};
     display: block;
     padding-right: ${rem(8)};
@@ -79,6 +81,10 @@ const LinkListItem = styled.li`
     text-decoration: none;
     width: 100%;
   }
+
+  a:not(:last-child) {
+    border-bottom: 1px solid ${colors.rule};
+  }
 `;
 
 const LinkText = styled.span`
@@ -93,30 +99,38 @@ const ChartPreview = styled.div`
   padding-top: ${rem(16)};
 `;
 
+const ChartPreviewComponent: React.FC<{
+  narrative: SystemNarrative;
+}> = ({ narrative }) => {
+  if (narrative.preview)
+    return (
+      <>
+        <ChartTitle>{narrative.previewTitle}</ChartTitle>
+        <ChartPreview>
+          <MetricVizMapper
+            preview
+            metric={
+              narrative.sections.find(
+                (section) => section.metric.id === narrative.preview
+              )?.metric
+            }
+          />
+        </ChartPreview>
+      </>
+    );
+  return null;
+};
+
 const NarrativeLink: React.FC<{
   narrative: Narrative;
+  narrativeToPreview?: SystemNarrative;
   tenantId: TenantId;
-}> = observer(({ narrative, tenantId }) => {
+}> = observer(({ narrative, narrativeToPreview, tenantId }) => {
   const [animationStyles, setAnimationStyles] = useSpring(() => ({
     opacity: 0,
     from: { opacity: 0 },
   }));
 
-  const renderChartPreview = () => {
-    if (narrative.preview)
-      return (
-        <MetricVizMapper
-          preview
-          metric={
-            narrative.sections.find(
-              (section) => section.metric.id === narrative.preview
-            )?.metric
-          }
-        />
-      );
-    return null;
-  };
-
   return (
     <LinkListItem>
       <Link
@@ -140,8 +154,9 @@ const NarrativeLink: React.FC<{
           <Arrow color={colors.link} direction="right" />
         </animated.span>
       </Link>
-      <ChartTitle>{narrative.subtitle}</ChartTitle>
-      <ChartPreview>{renderChartPreview()}</ChartPreview>
+      {narrativeToPreview && (
+        <ChartPreviewComponent narrative={narrativeToPreview} />
+      )}
     </LinkListItem>
   );
 });
@@ -150,7 +165,9 @@ const NarrativeLink: React.FC<{
  * Produces a grid of links to available narratives for the current tenant.
  * If there is a current narrative selected, it will be excluded from the grid.
  */
-const OtherNarrativeLinks = (): React.ReactElement | null => {
+const OtherNarrativeLinks: React.FC<{
+  chartsPreview?: boolean;
+}> = ({ chartsPreview }): React.ReactElement | null => {
   const {
     tenant,
     tenantStore: { currentNarrativeTypeId },
@@ -160,23 +177,42 @@ const OtherNarrativeLinks = (): React.ReactElement | null => {
 
   const narrativesToDisplay = [
     ...Object.values(tenant.systemNarratives),
+    tenant.racialDisparitiesNarrative,
   ].filter((narrative): narrative is Narrative => {
     if (narrative === undefined) return false;
     return narrative.id !== currentNarrativeTypeId;
   });
 
+  const narrativesToPreview = [
+    ...Object.values(tenant.systemNarratives),
+  ].filter((narrative): narrative is SystemNarrative => {
+    if (narrative === undefined) return false;
+    return narrative.id !== currentNarrativeTypeId;
+  });
+
   return (
     <Wrapper>
       <LinkList>
-        {narrativesToDisplay.map((narrative) => {
-          return (
-            <NarrativeLink
-              key={narrative.id}
-              tenantId={tenant.id}
-              narrative={narrative}
-            />
-          );
-        })}
+        {chartsPreview
+          ? narrativesToPreview.map((narrative) => {
+              return (
+                <NarrativeLink
+                  key={narrative.id}
+                  tenantId={tenant.id}
+                  narrative={narrative}
+                  narrativeToPreview={narrative}
+                />
+              );
+            })
+          : narrativesToDisplay.map((narrative) => {
+              return (
+                <NarrativeLink
+                  key={narrative.id}
+                  tenantId={tenant.id}
+                  narrative={narrative}
+                />
+              );
+            })}
       </LinkList>
     </Wrapper>
   );

diff --git a/spotlight-client/src/PageTenant/PageTenant.tsx b/spotlight-client/src/PageTenant/PageTenant.tsx
@@ -65,7 +65,7 @@ const PageTenant: React.FC<RouteComponentProps> = () => {
         <Title>{HTMLReactParser(tenant.description)}</Title>
       </Introduction>
       <Links>
-        <OtherNarrativeLinks />
+        <OtherNarrativeLinks chartsPreview />
       </Links>
     </article>
   );

diff --git a/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.test.tsx b/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.test.tsx
@@ -108,5 +108,5 @@ test("renders charts", async () => {
   const charts = await screen.findAllByRole("group", {
     name: /\d+ bars in a bar chart/,
   });
-  expect(charts.length).toBe(24);
+  expect(charts.length).toBe(12);
 });
diff --git a/spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts b/spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts
@@ -19,7 +19,6 @@ import { TenantContent } from "../../contentApi/types";
 
 const content: TenantContent = {
   name: "Test Tenant",
-  landingPageTitle: "test landing page title",
   description: "test tenant description",
   coBrandingCopy: "test tenant co-branding",
   feedbackUrl: "https://example.com/feedback",
@@ -47,7 +46,8 @@ const content: TenantContent = {
   systemNarratives: {
     Parole: {
       title: "test parole narrative",
-      subtitle: "test parole subtitle",
+      previewTitle: "test parole subtitle",
+      preview: "ParolePopulationCurrent",
       introduction: "test parole introduction",
       sections: [
         {
@@ -64,7 +64,8 @@ const content: TenantContent = {
     },
     Sentencing: {
       title: "test sentencing narrative",
-      subtitle: "test sentencing subtitle",
+      previewTitle: "test sentencing subtitle",
+      preview: "SentencePopulationCurrent",
       introduction:
         'test sentencing introduction <a href="https://example.com">intro link</a>',
       sections: [

diff --git a/spotlight-client/src/SystemNarrativePage/constants.ts b/spotlight-client/src/SystemNarrativePage/constants.ts
@@ -17,3 +17,4 @@
 
 // eslint-disable-next-line import/prefer-default-export
 export const X_PADDING = 176;
+export const X_PADDING_TABLET = 80;
diff --git a/spotlight-client/src/UiLibrary/PageSection.ts b/spotlight-client/src/UiLibrary/PageSection.ts
@@ -18,7 +18,7 @@
 import { rem } from "polished";
 import styled from "styled-components/macro";
 import { NAV_BAR_HEIGHT } from "../constants";
-import { X_PADDING } from "../SystemNarrativePage/constants";
+import { X_PADDING, X_PADDING_TABLET } from "../SystemNarrativePage/constants";
 import breakpoints from "./breakpoints";
 
 /**
@@ -31,6 +31,10 @@ export const PageSection = styled.section`
   padding: 0 ${rem(16)};
 
   @media screen and (min-width: ${breakpoints.tablet[0]}px) {
+    padding: 0 ${rem(X_PADDING_TABLET)};
+  }
+
+  @media screen and (min-width: ${breakpoints.desktop[0]}px) {
     padding: 0 ${rem(X_PADDING)};
   }
 `;

diff --git a/spotlight-client/src/VizHistoricalPopulationBreakdown/VizHistoricalPopulationBreakdown.tsx b/spotlight-client/src/VizHistoricalPopulationBreakdown/VizHistoricalPopulationBreakdown.tsx
@@ -49,7 +49,8 @@ const VizHistoricalPopulationBreakdown: React.FC<{
   if (metric.dataSeries) {
     const viz = (
       <WindowedTimeSeries
-        preview={preview}
+        showMinimap={!preview}
+        showLegend={!preview}
         data={metric.dataSeries}
         setTimeRangeId={setWindowSizeId}
         defaultRangeEnd={defaultRangeEnd}

diff --git a/spotlight-client/src/charts/BubbleChart.tsx b/spotlight-client/src/charts/BubbleChart.tsx
@@ -134,15 +134,13 @@ export default function BubbleChart({
                     size={[width, height]}
                   />
                 </ResponsiveTooltipController>
-                {!preview ? (
-                  <LegendWrapper>
-                    <ColorLegend
-                      highlighted={highlighted}
-                      items={data}
-                      setHighlighted={setHighlighted}
-                    />
-                  </LegendWrapper>
-                ) : null}
+                <LegendWrapper>
+                  <ColorLegend
+                    highlighted={highlighted}
+                    items={data}
+                    setHighlighted={setHighlighted}
+                  />
+                </LegendWrapper>
               </>
             )}
           </BubbleChartWrapper>