synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
342 lines (341 loc) • 11.1 kB
JavaScript
import { jsxs as n, Fragment as z, jsx as r } from "react/jsx-runtime";
import { getFullQueryTableResults as U } 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 { resultToJson as T } from "../../utils/functions/SqlFunctions.js";
import "../../utils/functions/EntityTypeUtils.js";
import { BUNDLE_MASK_QUERY_RESULTS as A } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as y, useEffect as O } from "react";
import { useSynapseContext as V } 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 { Tooltip as Y } 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 H from "../LoadingScreen/LoadingScreen.js";
import "react-router";
import { unCamelCase as J } from "../../utils/functions/unCamelCase.js";
import B from "./BarPlot.js";
import b from "./DotPlot.js";
import K from "lodash-es/first";
import $ from "lodash-es/orderBy";
import W from "lodash-es/cloneDeep";
const f = {
displayModeBar: !1,
responsive: !0,
scrollZoom: !1,
editable: !1,
autosizable: !0
}, v = {
showlegend: !0,
dragmode: !1,
legend: {
font: {
size: 11
},
y: 1.1,
xanchor: "right",
x: 1,
orientation: "h"
},
xaxis: {
visible: !0,
fixedrange: !0,
zeroline: !1,
showgrid: !1,
showline: !0,
linecolor: "#ddd",
//bottom line
autotick: !0,
ticks: "outside",
tickcolor: "#ddd",
type: "log"
},
yaxis: {
fixedrange: !0,
zeroline: !1,
gridcolor: "#ddd",
//horizontal lines
automargin: !0
},
margin: {
pad: 20
},
hovermode: "closest"
}, M = {
barmode: "stack",
showlegend: !1,
dragmode: !1,
hovermode: "closest",
yaxis: { visible: !1, fixedrange: !0 },
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0
}
};
function x(e, { xField: t, yField: o, groupField: s, entityId: l, whereClause: d, infoField: c }) {
const h = `SELECT ${t} as "x", ${o} as "y", ${c ? c + ' as "info", ' : ""} ${s} as "group"
FROM ${l} ${d ? " WHERE " + d : ""}`;
return U({
concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
partMask: A,
entityId: l,
query: {
sql: h
}
}, e).then(
(p) => p.queryResult.queryResults
);
}
function C(e, t) {
const o = e.reduce((l, d) => (l[d[t]] = (d[t] in l ? Number(l[d[t]]) : 0) + Number(d.x), l), {}), s = [];
for (const l in o)
s.push({
[t]: l,
count: o[l]
});
return s;
}
const D = (e, t) => {
const o = e.points[0].data;
let s = o.y[0], l = o.name;
return t && ([s, l] = [l, s]), { facetValue: s, type: l, event: e.event };
}, X = (e, t) => /* @__PURE__ */ r("div", { className: "ThemesPlot__barPlotLegend", children: t.map((o, s) => /* @__PURE__ */ n("div", { style: { float: "left" }, children: [
/* @__PURE__ */ r(
"div",
{
className: "ThemesPlot__barPlotLegend__label",
style: {
backgroundColor: `${e ? e[o] : "transparent"}`
}
},
"topBar_label"
),
/* @__PURE__ */ r("div", { className: "ThemesPlot__barPlotLegend__graph", children: o }, "topBar_graph"),
" "
] }, `topBar_${s}`)) }), R = (e, t) => {
for (const o in e)
e[o] = e[o].replace(",1)", `, ${t})`).replace(",1.0)", `, ${t})`);
return e;
}, Z = (e, t) => K(e.filter((o) => o.y === t).map((o) => o.info));
function Re({
dotPlot: e,
topBarPlot: t,
sideBarPlot: o,
onPointClick: s,
onIndividualThemeBarPlotPointClick: l,
dotPlotYAxisLabel: d = "Research Themes"
}) {
const { accessToken: c } = V(), [h, N] = y(!1), [p, q] = y([]), [g, E] = y([]), [k, Q] = y([]);
O(() => {
const a = x(c, e), i = x(c, t), u = x(c, o);
return Promise.all([a, i, u]).then((m) => {
q(
T(
m[0].headers,
m[0].rows
)
), E(
T(
m[1].headers,
m[1].rows
)
), Q(
T(
m[2].headers,
m[2].rows
)
), N(!0);
}).catch((m) => {
throw m;
}), () => {
};
}, [c, e, t, o]);
let L = [], S = [], P = 0, w = [], _ = [];
return h && (_ = C(k, "y"), L = _.sort((a, i) => i.count - a.count).map((a) => a.y), P = Math.max(...p.map((a) => Number(a.x))), w = $(C(g, "y"), ["y"]), S = $(
C(g, "group"),
["group"]
).map((a) => a.group)), /* @__PURE__ */ n(z, { children: [
!h && H,
h && /* @__PURE__ */ n("div", { className: "ThemesPlot", children: [
/* @__PURE__ */ r("div", { className: "ThemesPlot__dotPlotLegend", children: /* @__PURE__ */ r(
b,
{
id: "head",
plotData: p,
isLegend: !0,
markerSymbols: e.markerSymbols,
style: { width: "100%", height: "100%" },
layoutConfig: v,
optionsConfig: {
...f,
responsive: !0,
staticPlot: !0
},
plotStyle: {
...e.plotStyle,
backgroundColor: "transparent"
}
}
) }),
t.colors && X(t.colors, S),
w.map((a, i) => /* @__PURE__ */ n("div", { className: "ThemesPlot__topBarPlot", children: [
/* @__PURE__ */ n("div", { className: "ThemesPlot__topBarPlot__label", children: [
a.count,
" ",
J(a.y)
] }),
/* @__PURE__ */ r("div", { className: "ThemesPlot__topBarPlot__plot", children: /* @__PURE__ */ r(
B,
{
style: { width: "100%", height: "100%" },
layoutConfig: W(M),
optionsConfig: { ...f },
plotData: g,
isTop: !0,
label: a.y,
xMax: a.count,
onClick: (u) => s(D(u, !0)),
colors: (
// we are not actually fading colors for now. But keeping implemenation in case it changes
i % 2 === 0 ? t.colors : R({ ...t.colors }, "1")
)
}
) })
] }, `topBarDiv_${i}`)),
/* @__PURE__ */ n("div", { style: { display: "flex", position: "relative" }, children: [
/* @__PURE__ */ r("div", { className: "ThemesPlot__dotPlotYLabel", children: d }),
/* @__PURE__ */ n("div", { className: "ThemesPlot__dotPlot", children: [
L.map((a, i) => /* @__PURE__ */ n(
"div",
{
className: "ThemesPlot__dotPlot__row",
style: {
backgroundColor: e.plotStyle?.backgroundColor
},
children: [
/* @__PURE__ */ r("div", { className: "ThemesPlot__dotPlot__barColumn", children: /* @__PURE__ */ r(
Y,
{
title: `${Z(p, a)} `,
placement: "right",
children: /* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ r("span", { className: "ThemesPlot__dotPlot__themeLabel", children: a }),
/* @__PURE__ */ r("br", {}),
/* @__PURE__ */ n("span", { className: "ThemesPlot__dotPlot__countLabel", children: [
_[i].count,
" ",
o.countLabel
] }),
/* @__PURE__ */ r("br", {}),
/* @__PURE__ */ r(
B,
{
style: { width: "100%" },
layoutConfig: M,
optionsConfig: f,
plotData: k,
isTop: !1,
xMax: _[i].count,
label: a,
colors: R({ ...t.colors }, "1"),
onClick: (u) => {
l && l(
D(u, !1)
);
}
}
)
] })
}
) }),
/* @__PURE__ */ r("div", { className: "ThemesPlot__dotPlot__dotPlotColumn", children: /* @__PURE__ */ r(
"div",
{
style: {
width: "100%",
backgroundColor: e.plotStyle?.backgroundColor
},
children: /* @__PURE__ */ r(
b,
{
id: `${i}`,
onClick: (u) => {
const { type: m, event: F } = D(u, !1);
s({ facetValue: a, type: m, event: F });
},
plotData: p,
plotStyle: e.plotStyle,
markerSymbols: e.markerSymbols,
xMax: P,
label: a,
layoutConfig: v,
optionsConfig: {
...f,
responsive: !1
}
}
)
}
) })
]
},
`plotDiv_${+i}`
)),
/* @__PURE__ */ n("div", { className: "ThemesPlot__dotPlot__row", children: [
/* @__PURE__ */ r(
"div",
{
className: "ThemesPlot__dotPlot__barColumn",
style: { textAlign: "right" },
children: "VOLUME:"
}
),
/* @__PURE__ */ r(
"div",
{
className: "ThemesPlot__dotPlot__dotPlotColumn",
style: { marginTop: "0px" },
children: /* @__PURE__ */ r(
b,
{
id: "footer",
plotData: p,
isXAxis: !0,
xMax: P,
layoutConfig: v,
optionsConfig: { ...f, responsive: !1 }
}
)
}
)
] })
] })
] }),
/* @__PURE__ */ r("div", {})
] })
] });
}
export {
Re as ThemesPlot,
Re as default
};
//# sourceMappingURL=ThemesPlot.js.map