synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
659 lines (658 loc) • 20.2 kB
JavaScript
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { BlinkingLiveIcon as y } from "../../assets/homepage/BlinkingLiveIcon.js";
import { backgroundInlineJpeg as f } from "../../assets/homepage/header-splash.js";
import v from "../../assets/homepage/image1.svg.js";
import w from "../../assets/icons/SageFullLogo.js";
import { titleSx as S, visuallyHidden as k, defaultHomepageText as p, homepageBodyText as o, sidePadding as x, h2Sx as i } from "./HomepageStyles.js";
import { DATA_CATALOG_PATH_SEGMENT as A, SAGE_OFFERINGS_HELP_URL as T } from "../../utils/SynapseConstants.js";
import { useTheme as C, useMediaQuery as d, Box as t, Typography as r, Button as l, Link as I } from "@mui/material";
import { useInView as W } from "react-intersection-observer";
import { TypeAnimation as H } from "react-type-animation";
import { SynapseByTheNumbers as z } from "./SynapseByTheNumbers.js";
import { SynapseFeaturedDatasets as P } from "./SynapseFeaturedDatasets.js";
import { SynapseFeatures as D } from "./SynapseFeatures.js";
import { SynapseHomepageChatSearch as B } from "./SynapseHomepageChatSearch.js";
import { SynapseHomepageNavBar as F } from "./SynapseHomepageNavBar.js";
import { SynapseHotDrops as j } from "./SynapseHotdrops.js";
import E from "./SynapseHotdropsBackground.js";
import { SynapseInAction as L } from "./SynapseInAction.js";
import { SynapsePartners as _ } from "./SynapsePartners.js";
import { SynapsePlans as M } from "./SynapsePlans.js";
import { SynapseSearchChips as V } from "./SynapseSearchChips.js";
import { SynapseTrendingProjects as N } from "./SynapseTrendingProjects.js";
const G = "syn61670075", R = "syn61597084", O = "syn61588123", $ = "syn61609402", ge = "syn61670515", q = "syn69855119";
function ue({ gotoPlace: a }) {
const m = C(), c = d("(max-width:385px)"), h = d(m.breakpoints.up("lg")), { ref: g, inView: u } = W({ triggerOnce: !0 }), s = [
"the next cure",
"the next diagnostic",
"the next preventive therapy"
];
return /* @__PURE__ */ n(t, { sx: { overflow: "hidden" }, children: [
/* @__PURE__ */ e(F, { gotoPlace: a }),
/* @__PURE__ */ e(
t,
{
sx: {
position: "relative",
pb: {
xs: "30px",
md: "80px"
}
},
children: /* @__PURE__ */ e(
t,
{
sx: {
position: "absolute",
background: `url(${f}) lightgray 50% / cover no-repeat`,
minHeight: {
xs: "550px",
sm: "400px",
md: "600px"
},
width: "100%",
height: "100%",
content: "''",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: -1,
clipPath: {
xs: "polygon(0 0, 100% 0, 100% 80%, 0% 100%)",
md: "polygon(0 0, 100% 0, 100% 65%, 0% 100%)"
}
},
children: " "
}
)
}
),
/* @__PURE__ */ e(
t,
{
sx: {
textAlign: "center",
p: {
xs: "20px",
lg: "80px 0px 0px 0px"
},
minHeight: c ? "390px" : {
xs: "330px",
sm: "215px",
md: "300px",
//larger font
lg: void 0
}
},
children: /* @__PURE__ */ n(r, { variant: "headline1", sx: S, children: [
"Explore the data ",
/* @__PURE__ */ e("br", {}),
"behind ",
/* @__PURE__ */ e(
H,
{
"aria-hidden": "true",
sequence: s.flatMap((b) => [b, 3e3]),
wrapper: "span",
speed: 20,
repeat: 1 / 0,
style: {
color: "#B5D3CE"
}
}
),
/* @__PURE__ */ e(t, { component: "span", sx: k, children: s.join(", ") })
] })
}
),
/* @__PURE__ */ e(
t,
{
sx: {
pt: { xs: "10px", md: "70px" },
pr: "15px",
maxWidth: "600px",
m: "auto"
},
children: /* @__PURE__ */ e(B, { gotoPlace: a })
}
),
/* @__PURE__ */ e(
t,
{
sx: {
display: "flex",
maxWidth: "1500px",
gap: "10px",
alignItems: "center",
justifyContent: "center",
mt: "30px",
flexWrap: "wrap",
ml: { xs: "5px", md: "auto" },
mr: { xs: "5px", md: "auto" }
},
children: /* @__PURE__ */ e(V, { gotoPlace: a })
}
),
/* @__PURE__ */ e(
t,
{
sx: {
backgroundColor: "#F5F9F9",
mt: { xs: "50px", md: "100px" }
},
children: /* @__PURE__ */ n(
t,
{
sx: {
display: { xs: "relative", lg: "grid" },
maxWidth: "1500px",
gridTemplateColumns: "50% 50%",
margin: "auto",
height: { lg: "608px" }
//force container to the same height as the image
},
children: [
/* @__PURE__ */ n(
t,
{
sx: {
p: { xs: "25px", lg: "70px 0px 25px 60px" },
svg: {
maxWidth: "100%"
},
display: "flex",
flexDirection: "column",
alignItems: {
xs: "center",
md: "flex-start"
}
},
ref: g,
children: [
/* @__PURE__ */ e(w, { width: 350 }),
/* @__PURE__ */ n(
r,
{
variant: "headline2",
sx: {
...p,
fontSize: {
xs: "24px",
md: "40px"
},
lineHeight: {
xs: "140%",
md: "60px"
},
maxWidth: "600px",
color: "secondary.600",
mt: "20px",
fontWeight: 400,
mb: "35px",
textAlign: {
xs: "center",
md: "left"
}
},
children: [
"Created by ",
/* @__PURE__ */ e("strong", { children: "Sage Bionetworks" }),
", Synapse empowers biomedical researchers with tools for open science and collaboration, forging a path to optimal human health."
]
}
),
/* @__PURE__ */ e(
l,
{
size: "large",
variant: "contained",
color: "secondary",
href: "https://www.sagebionetworks.org",
target: "_blank",
sx: {
p: "5px 25px",
width: {
xs: "100%",
md: "auto"
}
},
children: "About Sage Bionetworks"
}
)
]
}
),
h && /* @__PURE__ */ e(t, { sx: { height: "100%", justifySelf: "end" }, children: /* @__PURE__ */ e("img", { src: v, alt: "" }) })
]
}
)
}
),
u && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ n(t, { sx: { padding: { xs: "45px 40px", md: "80px 25px" } }, children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...p,
textAlign: "center",
mt: "100px",
fontSize: { xs: "32px", md: "40px" },
lineHeight: "42px",
mb: "30px"
},
children: "We partner with scientific leaders"
}
),
/* @__PURE__ */ e(t, { sx: { m: "auto", maxWidth: "750px" }, children: /* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...o,
textAlign: "center",
mb: "60px"
},
children: "Synapse is your ecosystem for responsible data sharing, innovative data reuse, and collaboration."
}
) }),
/* @__PURE__ */ e(_, {})
] }),
/* @__PURE__ */ e(
t,
{
sx: {
pb: {
xs: "100px",
md: "220px"
},
clipPath: "polygon(0 0, 100% 0, 100% 20%, 0% 100%)",
backgroundColor: "white",
zIndex: 100
}
}
),
/* @__PURE__ */ e(
t,
{
sx: {
...x,
backgroundColor: "#223549",
pt: {
xs: "90px",
md: "200px"
},
mt: {
xs: "-90px",
md: "-200px"
},
pb: "5px"
},
children: /* @__PURE__ */ n(
t,
{
sx: {
margin: "auto",
maxWidth: "1500px"
},
children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
textAlign: "center",
mt: "100px",
mb: "10px",
color: "white"
},
children: "Synapse by the numbers"
}
),
/* @__PURE__ */ n(
r,
{
variant: "body1",
sx: {
...o,
textAlign: "center",
mb: "70px",
color: "white"
},
children: [
/* @__PURE__ */ e(y, { sx: { pt: "7px" } }),
" Live"
]
}
),
/* @__PURE__ */ e(z, { metricsTable: O }),
/* @__PURE__ */ e(
r,
{
variant: "headline2",
sx: {
...p,
textAlign: "center",
fontSize: "36px",
lineHeight: "40px",
mt: "60px",
mb: "25px",
color: "white",
fontWeight: 400
},
children: "Projects trending last month"
}
),
/* @__PURE__ */ e(
N,
{
past30DaysDownloadMetricsTable: R
}
)
]
}
)
}
),
/* @__PURE__ */ e(
t,
{
sx: {
mt: "-3px",
pb: {
xs: "100px",
md: "220px"
},
clipPath: "polygon(0 0, 100% 2px, 0 100%, 0% 0%)",
backgroundColor: "#223549",
zIndex: 100
}
}
)
] }),
/* @__PURE__ */ n(t, { sx: { ml: { xs: "5px", md: "20px" } }, children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
textAlign: "center",
pt: { xs: "45px", md: "75px" },
pb: "30px"
},
children: "New & Trending"
}
),
/* @__PURE__ */ e(t, { sx: { m: "auto" }, children: /* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...o,
textAlign: "center",
mb: { xs: "30px", md: "60px" }
},
children: "A sample of public projects and datasets recently created on Synapse by researchers like you"
}
) }),
/* @__PURE__ */ n(t, { sx: { position: "relative", minHeight: "500px" }, children: [
/* @__PURE__ */ e(E, {}),
/* @__PURE__ */ e(j, { tableId: q })
] })
] }),
/* @__PURE__ */ e(
t,
{
sx: {
pb: {
xs: "100px",
md: "220px"
},
clipPath: "polygon(0 100%, 100% 0, 100% 100%, 0 100%)",
backgroundColor: "#172430",
zIndex: 100
}
}
),
/* @__PURE__ */ e(
t,
{
sx: {
...x,
backgroundColor: "#172430",
mt: "-1px",
pt: {
xs: "50px",
md: "20px"
}
},
children: /* @__PURE__ */ n(t, { sx: { m: "auto", maxWidth: "1500px" }, children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
color: "white",
maxWidth: "700px",
pb: {
xs: "20px",
sm: "100px"
},
textAlign: {
xs: "center",
md: "left"
}
},
children: "Made for biomedical data reuse and discovery"
}
),
/* @__PURE__ */ e(D, {})
] })
}
),
/* @__PURE__ */ n(t, { sx: { ml: { xs: "5px", md: "20px" } }, children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
textAlign: "center",
padding: { xs: "45px 0", md: "75px 0" }
},
children: "Featured datasets"
}
),
/* @__PURE__ */ e(P, { sourceTable: $ }),
/* @__PURE__ */ e(t, { sx: { p: "20px 10px" }, children: /* @__PURE__ */ e(
l,
{
size: "large",
variant: "contained",
color: "secondary",
onClick: () => {
a(`/${A}`);
},
sx: {
m: "auto",
display: "block",
p: "5px 25px",
width: {
xs: "100%",
md: "auto"
}
},
children: "View More Datasets"
}
) })
] }),
/* @__PURE__ */ e(
t,
{
sx: {
pb: {
xs: "100px",
md: "220px"
},
clipPath: "polygon(0 100%, 100% 0, 100% 100%, 0 100%)",
backgroundColor: "#f5f9f9",
zIndex: -100,
mt: {
xs: "-100px",
md: "-220px"
},
position: "relative"
}
}
),
/* @__PURE__ */ n(
t,
{
sx: {
backgroundColor: "#f5f9f9",
pb: { xs: "10px", md: "0px" }
},
children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
textAlign: "center",
pt: "75px",
position: "relative",
zIndex: 100,
backgroundColor: "rgba(245, 249, 249, .8)",
borderRadius: "12px",
ml: { xs: "5px", md: "20px" }
},
children: "Synapse in action"
}
),
/* @__PURE__ */ e(t, { sx: { m: "auto", maxWidth: "1100px" }, children: /* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...o,
textAlign: "center",
mt: "50px",
mb: "100px",
position: "relative",
zIndex: 100,
ml: "5px",
mr: "5px",
backgroundColor: "rgba(245, 249, 249, .8)",
borderRadius: "12px"
},
children: "Explore real-world case studies and success stories showcasing how researchers use Synapse to drive innovative biomedical discoveries and improve health outcomes."
}
) }),
/* @__PURE__ */ e(L, { tableId: G })
]
}
),
/* @__PURE__ */ e(
t,
{
sx: {
...x,
backgroundColor: "#223549",
pb: "200px",
position: "relative",
zIndex: 100
},
children: /* @__PURE__ */ n(
t,
{
sx: {
maxWidth: "1200px",
m: "auto"
},
children: [
/* @__PURE__ */ e(
r,
{
variant: "headline1",
sx: {
...i,
color: "white",
pt: "75px"
},
children: "Plans"
}
),
/* @__PURE__ */ e(
r,
{
variant: "body1",
sx: {
...o,
color: "white",
pt: "20px"
},
children: "Synapse is free and open source for all. We offer different plans to help you if you need extra storage or help with your data management."
}
),
/* @__PURE__ */ e(
I,
{
href: T,
target: "_blank",
sx: {
color: "white !important",
textDecorationColor: "white !important",
pt: "20px",
pb: "30px",
display: "block"
},
children: "Learn more about our plans"
}
),
/* @__PURE__ */ e(M, {})
]
}
)
}
),
/* @__PURE__ */ e(
t,
{
sx: {
pb: {
xs: "100px",
md: "220px"
},
clipPath: "polygon(0 100%, 100% 0, 100% 100%, 0 100%)",
backgroundColor: "#172430",
zIndex: 101,
mt: {
xs: "-100px",
md: "-220px"
},
position: "relative"
}
}
)
] })
] });
}
export {
ue as SynapseHomepageV2,
ue as default,
$ as featuredDatasetsTable,
O as generalStatsMetricsTable,
q as newAndTrendingTable,
R as past30DaysDownloadMetricsTable,
ge as searchAutocompleteTable,
G as synapseInActionTable
};
//# sourceMappingURL=SynapseHomepageV2.js.map