synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
269 lines (268 loc) • 7.49 kB
JavaScript
import { jsxs as p, jsx as e } from "react/jsx-runtime";
import C from "../../synapse-queries/entity/useGetQueryResultBundle.js";
import { formatDate as F } from "../../utils/functions/DateFormatter.js";
import { getFieldIndex as u } from "../../utils/functions/queryUtils.js";
import { parseEntityIdFromSqlStatement as L } from "../../utils/functions/SqlFunctions.js";
import { useImageUrl as b } from "../../utils/hooks/useImageUrlUtils.js";
import { BUNDLE_MASK_QUERY_SELECT_COLUMNS as M, BUNDLE_MASK_QUERY_RESULTS as _ } from "../../utils/SynapseConstants.js";
import { Box as c, Stack as h, Skeleton as k, Fade as w, CardMedia as D, Typography as f, Link as y } from "@mui/material";
import q from "dayjs";
import { useInView as E } from "react-intersection-observer";
import U from "../PortalSectionHeader/PortalSectionHeader.js";
const N = 400, Y = ({
research: t,
entityId: n,
publicationDateColIndex: o,
titleColIndex: x,
linkColIndex: r,
imageColIndex: a,
isLoading: s
}) => {
const l = t.values[a] ?? "", d = b(l ?? "", n);
return s ? /* @__PURE__ */ e(k, { variant: "rectangular", height: 142, width: "100%" }) : /* @__PURE__ */ p(
c,
{
sx: {
display: "flex",
gap: "30px",
borderBottom: "1px solid",
padding: "24px 0",
borderColor: "grey.300",
flexDirection: {
xs: "column",
sm: "row"
}
},
children: [
/* @__PURE__ */ p(
h,
{
useFlexGap: !0,
sx: {
gap: "10px"
},
children: [
/* @__PURE__ */ e(
f,
{
variant: "headline2",
sx: {
color: "gray.1000",
fontSize: "21px"
},
children: /* @__PURE__ */ e(
y,
{
href: t.values[r] ?? "",
target: "_blank",
sx: {
color: "grey.1000",
textDecoration: "none",
"&:hover": {
textDecoration: "none"
}
},
children: t.values[x]
}
)
}
),
/* @__PURE__ */ e(
f,
{
sx: {
lineHeight: "normal",
color: "grey.600"
},
children: t.values[o] && F(
q(Number(t.values[o])),
"MMMM, YYYY"
)
}
)
]
}
),
/* @__PURE__ */ e(
D,
{
component: "img",
image: d,
"aria-hidden": "true",
sx: {
flexShrink: 0,
width: "140px",
height: "93.8px",
borderRadius: "6px",
objectFit: "cover",
marginLeft: { xs: "initial", sm: "auto" }
}
}
)
]
}
);
}, j = ({
research: t,
entityId: n,
titleColIndex: o,
descriptionColIndex: x,
linkColIndex: r,
imageColIndex: a,
isLoading: s
}) => {
const [l, d] = E({ threshold: 0.3, triggerOnce: !0 }), m = t.values[a] ?? "", g = b(m || "", n);
return s ? /* @__PURE__ */ e(
k,
{
variant: "rectangular",
width: "100%",
sx: {
height: { xs: "250px", sm: "500px", md: "600px", lg: "800px" }
}
}
) : /* @__PURE__ */ p(c, { ref: l, children: [
/* @__PURE__ */ e(w, { in: d, timeout: N, children: /* @__PURE__ */ e(
D,
{
component: "img",
image: g,
"aria-hidden": "true",
sx: {
objectFit: "cover",
borderRadius: "10px",
marginBottom: "30px"
}
}
) }),
/* @__PURE__ */ p(
h,
{
useFlexGap: !0,
sx: {
gap: "16px"
},
children: [
/* @__PURE__ */ e(
f,
{
variant: "headline2",
sx: { color: "grey.1000", fontSize: { xs: "24px", md: "36px" } },
children: /* @__PURE__ */ e(
y,
{
href: t.values[r] ?? "",
target: "_blank",
sx: {
color: "grey.1000",
textDecoration: "none",
"&:hover": {
textDecoration: "none"
}
},
children: t.values[o]
}
)
}
),
/* @__PURE__ */ e(
f,
{
sx: {
fontSize: "18px",
lineHeight: "22.4px"
},
children: t.values[x] ?? ""
}
),
/* @__PURE__ */ e(y, { href: t.values[r] ?? "", target: "_blank", children: "Read more" })
]
}
)
] });
};
function X(t) {
const { sql: n } = t, o = L(n), x = {
partMask: M | _,
concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
entityId: o,
query: {
sql: n
}
}, { data: r, isLoading: a } = C(x), s = r?.queryResult.queryResults.rows ?? [];
let l;
((i) => {
i.TITLE = "title", i.DESCRIPTION = "description", i.PUBLICATION_DATE = "publicationDate", i.IMAGE = "image", i.LINK = "link";
})(l || (l = {}));
const d = u("title", r), m = u(
"description",
r
), g = u(
"publicationDate",
r
), R = u("image", r), v = u("link", r), I = s[0], T = s.slice(1), S = /* @__PURE__ */ e(
U,
{
title: "Featured Research",
sx: {
h2: { fontSize: "24px", paddingBottom: 0, width: "100%" }
}
}
);
return /* @__PURE__ */ p(
c,
{
sx: {
display: "grid",
gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
gap: { xs: "30px", md: "40px" },
padding: { xs: "40px", lg: "80px" }
},
children: [
/* @__PURE__ */ e(c, { sx: { display: { md: "none" } }, children: S }),
/* @__PURE__ */ e(c, { children: I && /* @__PURE__ */ e(
j,
{
entityId: o,
research: I,
titleColIndex: d,
isLoading: a,
descriptionColIndex: m,
publicationDateColIndex: g,
imageColIndex: R,
linkColIndex: v
}
) }),
/* @__PURE__ */ p(h, { children: [
/* @__PURE__ */ e(c, { sx: { display: { xs: "none", md: "block" } }, children: S }),
/* @__PURE__ */ e(
h,
{
sx: {
gap: "16px"
},
children: T.map((i, B) => /* @__PURE__ */ e(
Y,
{
entityId: o,
research: i,
isLoading: a,
titleColIndex: d,
descriptionColIndex: m,
publicationDateColIndex: g,
imageColIndex: R,
linkColIndex: v
},
B
))
}
)
] })
]
}
);
}
export {
X as default
};
//# sourceMappingURL=FeaturedResearch.js.map