Skip to content

Commit

Permalink
Port /sars-cov-2/forecasts to App Router [#1125]
Browse files Browse the repository at this point in the history 
* Move styles into CSS module
* Refactor code for consistency with other App Router pages
* Switch abstract section from <FocusParagraph> to
  <FocusParagraphNarrow> for consistency with other pages
* Add Metadata export

NOTE: This changes the width of the "abstract" section of the page so
that it matches other pages on the site; previously, the "abstract"
section of the `/sars-cov-2/forecasts` was wider than the 640px
default used on other pages.

Having everything use a consistent layout is an obvious maintenance
win; I picked the 640px variation because that's more common across
all the existing site pages.
  • Loading branch information
@genehack
genehack committed Mar 6, 2025
1 parent 0ae4184 commit af42511
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 94 deletions.
178 changes: 84 additions & 94 deletions static-site/app/sars-cov-2/forecasts/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,97 @@
import React from "react";
import styled from "styled-components";
import {
SmallSpacer,
CenteredContainer,
HugeSpacer
} from "../layouts/generalComponents";
import GenericPage from "../layouts/generic-page";
import * as splashStyles from "../components/splash/styles";
import type { Metadata } from "next";

const gisaidLogo = require("../../static/logos/gisaid.png");
import FlexCenter from "../../../components/flex-center";
import { FocusParagraphNarrow } from "../../../components/focus-paragraph";
import { HugeSpacer, SmallSpacer } from "../../../components/spacers";

import gisaidLogo from "../../../static/logos/gisaid.png";

import styles from "./styles.module.css";

// Hard-coded content
// const disclaimer = "DISCLAIMER: This page is an alpha release of model results";
const title = "Nextstrain SARS-CoV-2 Forecasts";
const abstract = (
<>
<>Here we chart the change in frequency of SARS-CoV-2 variants over time. We use this change in
frequency to estimate the relative growth advantage or evolutionary fitness of different
variants. We apply a Multinomial Logistic Regression (MLR) model to estimate frequencies and
growth advantages using daily sequence counts. We apply this model independently across
different countries and partition SARS-CoV-2 variants by <a
href="https://nextstrain.org/blog/2022-04-29-SARS-CoV-2-clade-naming-2022">Nextstrain
clades</a> and separately by <a href="https://cov-lineages.org/">Pango lineages</a>.</>
<p/>
<>Further details on data preparation and analysis can be found in the <a
href="https://github.com/nextstrain/forecasts-ncov/">forecasts-ncov GitHub repo</a>, while
further details on the MLR model implementation can be found in the <a
href="https://www.github.com/blab/evofr">evofr GitHub repo</a>. Enabled by data from <a
href="https://gisaid.org/"><img alt="GISAID" src={gisaidLogo.default.src} width={70}/></a>.</>
<p/>
<>These analyses are the work of <a
href="https://bedford.io/team/marlin-figgins/">Marlin Figgins</a>, <a
href="https://bedford.io/team/jover-lee/">Jover Lee</a>, <a
href="https://bedford.io/team/james-hadfield/">James Hadfield</a> and <a
href="https://bedford.io/team/trevor-bedford/">Trevor Bedford</a>.</>
<p/>
<><i>Multinomial Logistic Regression is commonly used to model SARS-CoV-2 variant frequencies.
However, please apply caution in interpretation of these results.</i></>
</>
)
const acknowledgement = (
<>
We gratefully acknowledge the authors, originating and submitting laboratories of the genetic
sequences and metadata made available through GISAID on which this research is based.
</>
)

function Index() {
return (
<GenericPage>
<splashStyles.H1>{title}</splashStyles.H1>
<SmallSpacer />
export const metadata: Metadata = {
title,
};

<CenteredContainer>
<splashStyles.FocusParagraph>
{abstract}
</splashStyles.FocusParagraph>
</CenteredContainer>
/**
* React Server Component that wraps an <iframe> that displays
* information about Covid models
*/
export default function SarsCov2Forecasts(): React.ReactElement {
return (
<>
<HugeSpacer />
<HugeSpacer />

<IFrameContainer>
<ResponsiveIFrame src="https://nextstrain.github.io/forecasts-ncov/">
</ResponsiveIFrame>
</IFrameContainer>
<h1>{title}</h1>

<CenteredContainer>
<splashStyles.FocusParagraph>
{acknowledgement}
</splashStyles.FocusParagraph>
</CenteredContainer>
</GenericPage>
);
}
<SmallSpacer />

// not currently used, but may restore
// const DisclaimerBanner = () => {
// return (
// <splashStyles.FixedBanner $backgroundColor="#ffedcc">
// <splashStyles.StrongerText>
// {disclaimer}
// </splashStyles.StrongerText>
// </splashStyles.FixedBanner>
// )
// }
<FlexCenter>
<FocusParagraphNarrow>
Here we chart the change in frequency of SARS-CoV-2 variants over
time. We use this change in frequency to estimate the relative growth
advantage or evolutionary fitness of different variants. We apply a
Multinomial Logistic Regression (MLR) model to estimate frequencies
and growth advantages using daily sequence counts. We apply this model
independently across different countries and partition SARS-CoV-2
variants by{" "}
<a href="https://nextstrain.org/blog/2022-04-29-SARS-CoV-2-clade-naming-2022">
Nextstrain clades
</a>{" "}
and separately by{" "}
<a href="https://cov-lineages.org/">Pango lineages</a>.
<br />
<br />
Further details on data preparation and analysis can be found in the{" "}
<a href="https://github.com/nextstrain/forecasts-ncov/">
forecasts-ncov GitHub repo
</a>
, while further details on the MLR model implementation can be found
in the{" "}
<a href="https://www.github.com/blab/evofr">evofr GitHub repo</a>.
Enabled by data from{" "}
<a href="https://gisaid.org/">
<img alt="GISAID" src={gisaidLogo.src} width={70} />
</a>
.
<br />
<br />
These analyses are the work of{" "}
<a href="https://bedford.io/team/marlin-figgins/">
Marlin Figgins
</a>, <a href="https://bedford.io/team/jover-lee/">Jover Lee</a>,{" "}
<a href="https://bedford.io/team/james-hadfield/">James Hadfield</a>,{" "}
and{" "}
<a href="https://bedford.io/team/trevor-bedford/">Trevor Bedford</a>.
<br />
<br />
<i>
Multinomial Logistic Regression is commonly used to model SARS-CoV-2
variant frequencies. However, please apply caution in interpretation
of these results.
</i>
</FocusParagraphNarrow>
</FlexCenter>

// padding-top: 72% chosen so that at widescreen the iframe takes up basically the entire height of the window
// padding-top: 580px chosen so that at vertical mobile display the iframe takes up basically the entire height of the window
const IFrameContainer = styled.div`
position: relative;
overflow: hidden;
width: 100%;
padding-top: max(580px, 72%);
`;
<HugeSpacer />

const ResponsiveIFrame = styled.iframe`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 0px;
`;
<div className={styles.iframeContainer}>
<iframe
className={styles.iframeResponsive}
src="https://nextstrain.github.io/forecasts-ncov/"
></iframe>
</div>

export default Index;
<FlexCenter>
<FocusParagraphNarrow>
We gratefully acknowledge the authors, originating and submitting
laboratories of the genetic sequences and metadata made available
through GISAID on which this research is based.
</FocusParagraphNarrow>
</FlexCenter>
</>
);
}
19 changes: 19 additions & 0 deletions static-site/app/sars-cov-2/forecasts/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* padding-top: 72% chosen so that at widescreen the iframe takes up basically the entire height of the window */
/* padding-top: 580px chosen so that at vertical mobile display the iframe takes up basically the entire height of the window */
.iframeContainer {
overflow: hidden;
padding-top: max(580px, 72%);
position: relative;
width: 100%;
}

.iframeResponsive {
border: 0px;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}

0 comments on commit af42511

Please sign in to comment.