synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
216 lines (215 loc) • 6.5 kB
JavaScript
import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { createElement as R } from "react";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { parseEntityIdFromSqlStatement as k } from "../../utils/functions/SqlFunctions.js";
import "../../utils/functions/EntityTypeUtils.js";
import { BUNDLE_MASK_QUERY_SELECT_COLUMNS as L, BUNDLE_MASK_QUERY_RESULTS as T } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { FileHandleAssociateType as w } from "@sage-bionetworks/synapse-types";
import { Box as f, GridLegacy as y, Skeleton as U, Card as C, Link as E, Typography as q, CardMedia as v } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { Link as F } from "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import B from "../../synapse-queries/entity/useGetQueryResultBundle.js";
import { useGetStablePresignedUrl as _ } from "../../synapse-queries/file/useFiles.js";
import { getFieldIndex as c } from "../../utils/functions/queryUtils.js";
import D from "@mui/icons-material/ArrowForwardIos";
import j from "../PortalSectionHeader/PortalSectionHeader.js";
const h = "6px", A = ({
card: o,
isLoading: i,
linkColumnIndex: a,
linkTextColumnIndex: p,
entityId: m,
fileId: n,
columnCount: r = 3,
heightPx: s = 245
}) => {
const t = {
associateObjectId: m,
associateObjectType: w.TableEntity,
fileHandleId: n ?? ""
}, d = _(t, !1, {
enabled: !!n
})?.dataUrl, l = {
xs: 12,
sm: r === 1 ? 12 : 6,
md: 12 / r
};
return /* @__PURE__ */ R(
y,
{
item: !0,
...l,
key: o.rowId,
sx: {
height: `${s}px`,
paddingTop: "24px",
paddingLeft: "24px"
}
},
i ? /* @__PURE__ */ e(U, { variant: "rectangular", height: s - 20, width: "100%" }) : /* @__PURE__ */ e(
C,
{
raised: !1,
sx: {
height: "100%",
position: "relative",
borderRadius: h,
border: "none",
transform: "scale(1)",
transition: ".3s ease-in-out",
"&:hover": {
transform: "scale(1.05)",
boxShadow: "0px 4px 15px rgba(0, 0, 0, 0.2)"
}
},
children: /* @__PURE__ */ u(E, { component: F, to: o.values[a] || "", children: [
/* @__PURE__ */ u(
f,
{
sx: {
display: "flex",
alignItems: "center",
gap: "10px",
position: "absolute",
backgroundColor: "#FFFF",
borderRadius: `0px 0px ${h} 0px`,
textDecoration: "none",
"&:hover": {
textDecoration: "none"
},
padding: "6px 10px"
},
children: [
/* @__PURE__ */ e(
q,
{
variant: "headline2",
sx: {
color: "grey.1000",
fontSize: "16px"
},
children: o.values[p]
}
),
/* @__PURE__ */ e(
D,
{
style: {
color: "unset",
width: 16,
height: 16
}
}
)
]
}
),
/* @__PURE__ */ e(
v,
{
component: "img",
image: d,
style: {
height: "100%",
width: "100%",
objectFit: "cover"
}
}
)
] })
}
)
);
};
function Ie(o) {
const { sql: i, title: a, summaryText: p, columnCount: m, heightPx: n } = o, r = k(i), s = {
partMask: L | T,
concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
entityId: r,
query: {
sql: i
}
}, { data: t, isLoading: g } = B(s), d = c(
"Image",
t
), l = t?.queryResult.queryResults.rows ?? [], b = c("Link", t), I = c(
"LinkText",
t
);
return /* @__PURE__ */ u(
f,
{
sx: {
display: "grid",
gridTemplateColumns: { xs: "1fr", md: "1fr 3fr" },
gap: { xs: "38px", md: "80px" },
padding: { xs: "40px", lg: "80px" }
},
children: [
/* @__PURE__ */ e(
j,
{
title: a,
summaryText: p,
sx: {
h2: { fontSize: "24px", paddingTop: "26px", width: "100%" },
"& p": { fontSize: "16px", lineHeight: "24px" }
}
}
),
/* @__PURE__ */ e(
y,
{
container: !0,
spacing: 2.5,
sx: {
order: { xs: 1, md: 0 }
},
children: l.map((x) => {
const S = x.values[d];
return /* @__PURE__ */ e(
A,
{
card: x,
linkColumnIndex: b,
linkTextColumnIndex: I,
fileId: S,
entityId: r,
isLoading: g,
columnCount: m,
heightPx: n
},
x.rowId
);
})
}
)
]
}
);
}
export {
Ie as default
};
//# sourceMappingURL=ImageCardGridWithLinks.js.map