synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
219 lines (218 loc) • 7.56 kB
JavaScript
import { jsxs as C, Fragment as P, jsx as a } from "react/jsx-runtime";
import { LargeButton as G } from "../styled/LargeButton.js";
import * as X from "../../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 Z } from "../../utils/functions/SqlFunctions.js";
import "../../utils/functions/EntityTypeUtils.js";
import { BUNDLE_MASK_QUERY_RESULTS as $ } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as c, useEffect as tt } from "react";
import { useSynapseContext as et } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { useTheme as st, Box as D } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import "@sage-bionetworks/synapse-types";
import "../../utils/types/IsType.js";
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 ot from "../LoadingScreen/LoadingScreen.js";
import "react-router";
import { ReactComponent as rt } from "../../assets/illustrations/diagonalLinePattern.svg.js";
import at, { extractSets as nt, generateCombinations as it } from "@upsetjs/react";
import { getColorPalette as lt } from "../ColorGradient/ColorGradient.js";
import { ErrorBanner as pt } from "../error/ErrorBanner.js";
import { useMeasure as ct } from "@react-hookz/web";
function Yt({
sql: m,
variant: k,
rgbIndex: v,
maxBarCount: E,
setName: L,
combinationName: B,
height: F = 700,
summaryLinkText: w,
summaryLink: b,
onClick: N,
customPlotColor: q,
selectionOpacity: M
}) {
const { accessToken: R } = et(), [T, u] = c(), [f, H] = c(), [_, j] = c(), [W, I] = c(null), o = st(), [O, Q] = ct(), d = {
default: {
'text[class^="sChartTextStyle-upset-"], text[class^= "cChartTextStyle-upset-"]': {
textTransform: "uppercase"
}
},
ampals: {
width: "100%",
"& .selectionHint-upset-": {
stroke: "transparent !important"
},
'& [class^="selectionHint-upset-"]': {
stroke: "transparent !important"
},
'& g[class^="interactive-upset-"]:hover line[class^="upsetLine-"]': {
stroke: o.palette.primary.main,
strokeWidth: "4px",
strokeOpacity: 1
},
'& g[class^="interactive-upset-"]:hover circle[class^="fillNotMember-upset-"]': {
opacity: 0.2
},
'& line[class^="upsetLine-"]': {
strokeOpacity: 0
},
'& rect[class^="fillPrimary-upset-"]': {
fill: "url(#diagonalLinePattern)",
stroke: o.palette.grey[700],
strokeWidth: 2
},
'& circle[class^="fillNotMember-upset-"]': {
stroke: o.palette.grey[600],
strokeWidth: 2
},
'& text[class^="sChartTextStyle-upset-"], & text[class^="cChartTextStyle-upset-"]': {
fontWeight: 700,
fill: o.palette.grey[800],
lineHeight: "150%"
},
'& text[class^="cChartTextStyle-upset-"]': {
transform: "translate(-60px, 190px) rotate(-90deg)"
},
'& text[class^="sChartTextStyle-upset-"]': {
transform: "translate(-10px, 100px) rotate(-90deg)"
}
}
};
let h, y;
if (v != null) {
const { colorPalette: r } = lt(v, 2);
h = r[0], y = r[0];
} else
h = o.palette.grey[700], y = q || o.palette.primary.main;
const V = {
setLabel: "14px"
};
return tt(() => {
let r = !1;
return (async () => {
u(!0);
try {
const i = Z(m), z = {
partMask: $,
concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
entityId: i,
query: {
sql: m
}
}, { queryResult: A } = await X.getFullQueryTableResults(
z,
R
), t = {}, g = {};
for (const p of A?.queryResults.rows ?? [])
for (let n = 1; n < p.values.length; n += 1) {
const x = p.values;
x.some((S) => S === null) && console.warn("Row has null value(s) when no nulls expected");
const e = x[0];
let s = x[n];
t[e] = t[e] || {}, t[e].name = e, t[e].sets = t[e].sets || [], !t[e].sets.find((S) => S == s) && s && (g[s.toUpperCase()] ? s = g[s.toUpperCase()] : g[s.toUpperCase()] = s, t[e].sets.push(s));
}
const J = Object.values(t), U = nt(J), K = U.sort((p, n) => ("" + n.name).localeCompare(p.name)), Y = it(K, {
type: "intersection",
min: 1,
limit: E,
order: "cardinality:desc"
});
r || (H({ sets: U, combinations: Y }), u(!1));
} catch (i) {
if (!r) {
u(!1);
let l = i.reason;
l || (console.error(i), l = "Error retrieving data"), j(l);
}
}
})(), () => {
r = !0;
};
}, [m, R]), /* @__PURE__ */ C(P, { children: [
T && ot,
!T && f && /* @__PURE__ */ C(P, { children: [
d.ampals && // Render DiagonalLinePattern so UpsetPlot can use `fill: url(#diagonalLinePattern)`.
// The SVG element must be added to the DOM so we can reference its ID (which is set in the SVG file) in the `fill` style
// Ideally, we would reference the asset URL imported by Vite, but this isn't working.
/* @__PURE__ */ a(
D,
{
sx: {
"& path": {
stroke: "#D9D9D9 !important"
},
width: 0,
height: 0,
position: "absolute"
},
children: /* @__PURE__ */ a(rt, {})
}
),
/* @__PURE__ */ C(
D,
{
className: "UpsetPlot",
sx: k ? d[k] : d.default,
ref: Q,
children: [
/* @__PURE__ */ a(
at,
{
sets: f.sets,
combinations: f.combinations,
width: O?.width || 800,
height: F,
onHover: I,
onClick: N,
selection: W,
color: h,
selectionColor: y,
hoverHintColor: "orange",
hasSelectionOpacity: M || 0.3,
setName: L,
combinationName: B,
fontFamily: "'DM Sans', sans-serif",
fontSizes: V,
exportButtons: !1,
notMemberColor: "transparent"
}
),
b && w && /* @__PURE__ */ a("div", { className: "UpsetPlot__summary", children: /* @__PURE__ */ a(
G,
{
color: "secondary",
variant: "contained",
href: b,
children: w
}
) })
]
}
)
] }),
/* @__PURE__ */ a(pt, { error: _ })
] });
}
export {
Yt as UpsetPlot,
Yt as default
};
//# sourceMappingURL=UpsetPlot.js.map