synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
253 lines (252 loc) • 8.95 kB
JavaScript
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import { useSynapseContext as k } from "../../utils/context/SynapseContext.js";
import { Paper as S, Typography as A, Box as c, Button as x, Divider as I, Skeleton as y } from "@mui/material";
import { useSuspenseQuery as B } from "@tanstack/react-query";
import { times as V } from "lodash-es";
import { Suspense as H, useMemo as C, Fragment as Q } from "react";
import { Plot as $ } from "../Plot/Plot.js";
import "@sage-bionetworks/synapse-types";
import "../../utils/PermissionLevelToAccessType.js";
import "../../utils/SynapseConstants.js";
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 "../../utils/functions/EntityTypeUtils.js";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "use-deep-compare-effect";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "@sage-bionetworks/synapse-client";
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 '../../style/components/_spinner.css';/* empty css */
import "react-router";
import "../QueryContext/QueryContext.js";
import { useSuspenseGetQueryMetadata as j } from "../QueryWrapper/useGetQueryMetadata.js";
import { useQueryVisualizationContext as q } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
import "../../assets/ArcusBioIcon.svg.js";
import "@mui/material/SvgIcon";
import "../../assets/icons/AccessPending.svg.js";
import "../../assets/icons/AccessPendingCloud.svg.js";
import "../../assets/icons/FileWithShield.svg.js";
import "../../assets/icons/MultiFile.svg.js";
import "../../assets/icons/UnpackagableFile.svg.js";
import "../../assets/icons/bioChemicalPhysical.svg.js";
import "../../assets/icons/computationalTool.svg.js";
import "../../assets/icons/dataReuse.svg.js";
import "../../assets/icons/inSilicoModel.svg.js";
import "../../assets/icons/modelSystem.svg.js";
import "../../assets/mui_components/PackagableFile.svg.js";
import "../../assets/icons/spatialProfiling.svg.js";
import "@mui/icons-material";
import "../../assets/icons/chart2.svg.js";
import "../../assets/icons/Data2.svg.js";
import "../../assets/icons/DNA_Two.svg.js";
import "../../assets/icons/file.svg.js";
import "../../assets/icons/institution.svg.js";
import "../../assets/icons/mouse.svg.js";
import "../../assets/icons/organizations.svg.js";
import "../../assets/icons/person.svg.js";
import "../../assets/icons/study-active.svg.js";
import "../../assets/icons/study-complete.svg.js";
import "../../assets/icons/translational.svg.js";
import "../../assets/icons/tree_horizontal.svg.js";
import "../../assets/icons/standardDataModel.svg.js";
import "../../assets/icons/Challenge.svg.js";
import K from "../ShowMore/ShowMore.js";
import "@mui/material/Skeleton";
import { SkeletonTable as Z } from "../Skeleton/SkeletonTable.js";
import { SkeletonParagraph as z } from "../Skeleton/SkeletonParagraph.js";
import { extractPlotDataArray as G, getPlotStyle as W } from "../widgets/facet-nav/FacetNavPanel.js";
import { FacetPlotLegendTable as J } from "../widgets/facet-nav/FacetPlotLegendTable.js";
import { getFacets as U } from "../widgets/facet-nav/useFacetPlots.js";
import { FACET_PLOTS_CARD_CLASSNAME as N, FacetPlotsCardTitleContainer as w, FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME as _, FacetPlotsCardPlotContainer as E, FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME as F } from "./FacetPlotsCardGrid.js";
import { useMeasure as X } from "@react-hookz/web";
const Y = {
showlegend: !1,
annotations: [],
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
yaxis: {
visible: !1,
showgrid: !1
},
xaxis: {
visible: !1,
showgrid: !1
}
};
function tt(a) {
const { numPlots: u } = a;
return /* @__PURE__ */ i(S, { className: N, children: [
/* @__PURE__ */ i(
w,
{
className: _,
children: [
/* @__PURE__ */ t(y, { width: "60%", height: "24px" }),
/* @__PURE__ */ t(z, { numRows: 5 }),
/* @__PURE__ */ t(y, { width: "40%", children: /* @__PURE__ */ t(x, { variant: "contained", children: "Explore" }) })
]
}
),
V(u).map((n) => /* @__PURE__ */ i(
E,
{
className: F,
sx: {
py: 3,
gridRow: `plot${n}`
},
children: [
/* @__PURE__ */ t(y, { width: "100%", height: "300px" }),
/* @__PURE__ */ t(Z, { numRows: 4, numCols: 2 })
]
},
n
))
] });
}
function rt(a) {
const {
title: u,
description: n,
facetsToPlot: e,
detailsPagePath: d,
plotType: s = "PIE"
} = a, { accessToken: v } = k(), { data: l } = j(), { getColumnDisplayName: g } = q(), [P, R] = X(), p = C(() => e ? U(l, e) : [], [e, l]), L = C(() => ({
...Y,
barmode: s === "STACKED_HORIZONTAL_BAR" ? "stack" : void 0
}), [s]), b = s === "STACKED_HORIZONTAL_BAR" ? 50 : 150, { data: T } = B({
queryKey: ["facetPlotDataArray", e, p],
queryFn: async () => {
if (!e)
return [];
const o = (r) => l.columnModels.find(
(m) => m.name === r.columnName
)?.columnType;
return Promise.all(
p.map(async (r, m) => await G(
r,
o(r),
m + 1,
//individual plot rgbIndex
s,
v
))
);
}
}), f = C(() => {
if (!e)
return "";
const o = l?.facets.map((r) => {
const m = r.facetValues;
if (m) {
const h = m.filter((O) => O.isSelected);
return h.length > 0 ? h[0] : void 0;
} else
return;
}).filter((r) => r !== void 0)[0];
return o && o.value ? o?.value : "";
}, [e, l?.facets]), M = T.length > 1, D = u ?? (M ? f : g(p[0].columnName));
return /* @__PURE__ */ i(S, { className: N, sx: { overflow: "hidden" }, children: [
/* @__PURE__ */ i(
w,
{
className: _,
children: [
/* @__PURE__ */ t(A, { variant: "headline1", children: D }),
n && /* @__PURE__ */ t(A, { variant: "body1", sx: { color: "grey.700", my: 2 }, children: /* @__PURE__ */ t(K, { summary: n, maxCharacterCount: 200 }) }),
d && f && /* @__PURE__ */ t(c, { sx: { my: 2 }, children: /* @__PURE__ */ i(
x,
{
variant: "contained",
href: d,
color: "secondary",
sx: (o) => ({
[o.breakpoints.down("sm")]: { width: "100%" }
}),
children: [
"Explore ",
f
]
}
) })
]
}
),
T.map((o, r) => /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ i(
E,
{
className: F,
sx: {
pt: r === 0 ? 5 : 0,
gridRow: `plot${r}`
},
children: [
r != 0 && /* @__PURE__ */ t(I, { sx: { mt: 2, mb: 4 } }),
/* @__PURE__ */ i(c, { sx: { minHeight: "130px" }, children: [
/* @__PURE__ */ t(
c,
{
ref: R,
sx: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: /* @__PURE__ */ t(
$,
{
layout: L,
data: o?.data ?? [],
style: W(
P?.width,
s,
b
),
config: { displayModeBar: !1 }
},
`${e[r]}-${P?.width}`
)
}
),
/* @__PURE__ */ t(c, { sx: { mt: 4, width: "100%" }, children: /* @__PURE__ */ t(
J,
{
facetName: g(
p[r].columnName
),
labels: o?.labels,
colors: o?.colors,
isExpanded: !1,
linkToFullQuery: d
}
) })
] })
]
},
r
) }, r))
] });
}
function Tr(a) {
return /* @__PURE__ */ t(
H,
{
fallback: /* @__PURE__ */ t(tt, { numPlots: (a.facetsToPlot ?? []).length }),
children: /* @__PURE__ */ t(rt, { ...a })
}
);
}
export {
Tr as default
};
//# sourceMappingURL=FacetPlotsCard.js.map