synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
191 lines (190 loc) • 6.76 kB
JavaScript
import { jsx as d, Fragment as g, jsxs as C } from "react/jsx-runtime";
import { facetObjectMatchesDefinition as A } from "../../../utils/functions/queryUtils.js";
import { Box as M, Button as O } from "@mui/material";
import { Suspense as b, useState as v, useEffect as j, useMemo as k } from "react";
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 "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../../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 "@sage-bionetworks/synapse-client";
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 "../../../utils/types/IsType.js";
import "../../QueryContext/QueryContext.js";
import { useSuspenseGetQueryMetadata as B } from "../../QueryWrapper/useGetQueryMetadata.js";
import { useQueryVisualizationContext as E } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
import D from "../../QueryWrapperPlotNav/QueryWrapperSynapsePlot.js";
import V from "./FacetNavPanel.js";
import { PlotsContainerSkeleton as $ } from "./PlotsContainerSkeleton.js";
import R, { getFacets as G } from "./useFacetPlots.js";
const f = 2, m = (o, e) => "__custom" in e && "__custom" in o ? o.title == e.title : !("__custom" in e) && !("__custom" in o) ? A(o, e) : !1;
function Q(o) {
return o === "bar" ? "BAR" : "PIE";
}
const W = (o) => "__custom" in o.plotId ? `custom-${o.plotId.title}` : `facet-${o.plotId.columnName}-${o.plotId.jsonPath}`, z = (o, e) => !!e.find((l) => m(l.plotId, o)), I = (o) => ({ __custom: !0, title: o.title ?? "" }), q = (o = [], e = [], l) => [
...o.map((r, a) => ({
plotId: I(r),
isHidden: a >= f,
plotType: Q(r.type)
})),
...e.map((r, a) => ({
plotId: r.facetToPlot,
isHidden: a + o.length >= f,
plotType: l?.[r.facetToPlot.columnName] ?? N
}))
], K = (o, e, l) => e.some(
(r) => m(
I(r),
o.plotId
)
) || l.some(
(r) => m(r.facetToPlot, o.plotId)
), N = "PIE", Y = [], J = [];
function X(o) {
const {
facetsToPlot: e = Y,
customPlots: l = J,
initialPlotTypeByFacetColumnName: r
} = o, { data: a } = B(), { showPlots: w } = E(), [p, T] = v([]), u = R(e), x = (t) => p.find(
(s) => m(t, s.plotId)
)?.plotType ?? N;
j(() => {
const t = q(
l,
u,
r
);
T((n) => {
const s = t.filter((y) => !z(y.plotId, n));
return [...n.filter(
(y) => K(y, l, u)
), ...s];
});
}, [l, u, r]);
const H = (t) => {
T((n) => n.map((s, c) => t ? { ...s, isHidden: !1 } : { ...s, isHidden: c >= f }));
}, S = (t) => p.find(
(c) => m(t, c.plotId) && c.isHidden === !0
) !== void 0, P = k(() => (
// if at least one item is hidden
p.find((t) => t.isHidden === !0) ? "MORE" : p.length <= f ? "NONE" : "LESS"
), [p]), _ = (t) => {
h(t, "isHidden", !0);
}, F = (t, n) => {
h(t, "plotType", n);
}, h = (t, n, s) => {
T(
(c) => c.map(
(i) => m(t, i.plotId) ? { ...i, [n]: s } : i
)
);
}, L = (
// TODO: customPlots should use the color index
// additionally, it is unclear why this object is created
// We can probably just pass the index from `plotUiStateArray.map)
G(a, e).map((t, n) => ({
facet: { columnName: t.columnName, jsonPath: t.jsonPath },
colorIndex: n
}))
);
return /* @__PURE__ */ d(g, { children: p.length > 0 && /* @__PURE__ */ C(
"div",
{
className: `PlotsContainer ${w ? "" : "hidden"} ${P === "LESS" ? "less" : ""}`,
children: [
/* @__PURE__ */ d("div", { className: "PlotsContainer__row", role: "list", children: p.map((t) => {
const n = "__custom" in t.plotId, s = l.find(
(i) => m(
I(i),
t.plotId
)
), c = u.find(
(i) => m(i.facetToPlot, t.plotId)
);
return /* @__PURE__ */ C(
"div",
{
className: t.plotType === "BAR" ? "PlotsContainer__row__item--full-width" : void 0,
style: {
minWidth: "435px",
display: S(t.plotId) ? "none" : "block"
},
children: [
n && s && /* @__PURE__ */ d(
D,
{
...s,
onHide: () => _(t.plotId)
}
),
!n && c && /* @__PURE__ */ d(
V,
{
index: L.find(
(i) => m(i.facet, t.plotId)
)?.colorIndex,
onHide: () => _(t.plotId),
plotType: x(t.plotId),
onSetPlotType: (i) => F(t.plotId, i),
isModalView: !1,
...c
}
)
]
},
W(t)
);
}) }),
P !== "NONE" && /* @__PURE__ */ d(
M,
{
sx: {
display: "flex",
justifyContent: "center",
backgroundColor: "grey.100",
p: 2,
mt: 2
},
children: /* @__PURE__ */ d(
O,
{
variant: "contained",
color: "secondary",
onClick: () => H(P === "MORE"),
sx: { width: "150px" },
children: P === "LESS" ? "Hide Charts" : "View All Charts"
}
)
}
)
]
}
) });
}
function kt(o) {
const { showPlots: e } = E();
return /* @__PURE__ */ d(b, { fallback: e ? /* @__PURE__ */ d($, {}) : null, children: /* @__PURE__ */ d(X, { ...o }) });
}
export {
kt as default
};
//# sourceMappingURL=PlotsContainer.js.map