synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
347 lines (346 loc) • 10.8 kB
JavaScript
import { jsx as n, jsxs as p, Fragment as D } from "react/jsx-runtime";
import { StyledFormControl as N } from "../../styled/StyledFormControl.js";
import * as R 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 { ColumnTypeEnum as y } from "@sage-bionetworks/synapse-types";
import "../../../utils/functions/EntityTypeUtils.js";
import { VALUE_NOT_SET as L, FRIENDLY_VALUE_NOT_SET as _ } from "../../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../../utils/PermissionLevelToAccessType.js";
import { useState as F, useMemo as M } from "react";
import { useSynapseContext as V } from "../../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { useQuery as O } from "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { Stack as k, InputLabel as P, Tooltip as $, Box as H, Select as K, MenuItem as B } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import { getCorrespondingColumnForFacet as T } from "../../../utils/functions/queryUtils.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 j from "../../LoadingScreen/LoadingScreen.js";
import "react-router";
import "../../../utils/types/IsType.js";
import { InfoOutlined as Z } from "@mui/icons-material";
import { getContrastColorPalette as q } from "../../ColorGradient/ColorGradient.js";
import { ConfirmationDialog as Q } from "../../ConfirmationDialog/ConfirmationDialog.js";
import { Plot as U } from "../../Plot/Plot.js";
import G from "../../Plot/PlotPanelHeader.js";
import "../../QueryContext/QueryContext.js";
import { useGetQueryMetadata as Y } from "../../QueryWrapper/useGetQueryMetadata.js";
import { useQueryVisualizationContext as z } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
import { EnumFacetFilter as J } from "../query-filter/EnumFacetFilter/EnumFacetFilter.js";
import { FacetPlotLegendList as W } from "./FacetPlotLegendList.js";
import { truncate as X } from "./FacetPlotLegendUtils.js";
import { useMeasure as ee } from "@react-hookz/web";
const te = 19, ae = {
showlegend: !1,
annotations: [],
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
yaxis: {
visible: !1,
showgrid: !1
},
xaxis: {
visible: !1,
showgrid: !1
}
};
async function oe(o, m, i, t, c) {
const a = q(
// Use only the odd palette, using the same offset for all plots until palettes are improved.
// See PORTALS-2916
"odd",
// index % 2 === 0 ? 'even' : 'odd',
0,
// Math.floor(index / 2),
o.facetValues.length
), d = async (e, r, u) => {
const s = /* @__PURE__ */ new Map();
s.set(
L,
_
);
const b = e.map((l) => l.value).filter((l) => l !== L);
if (r === y.ENTITYID || r === y.ENTITYID_LIST) {
const l = await R.getEntityHeadersByIds(
b,
u
);
for (const I of l.results)
s.set(I.id, I.name);
} else if (r === y.USERID || r === y.USERID_LIST) {
const l = await R.getGroupHeadersBatch(
b,
u
);
for (const I of l.children)
s.set(I.ownerId, I.userName);
}
return e.map((l) => ({
facet: l,
label: A(l, !1, s),
truncatedLabel: A(l, !0, s),
count: l.count
}));
}, A = (e, r, u) => {
let s = u.get(e.value) ?? e.value;
return r && (s = X(s, te)), s;
}, f = await d(
o.facetValues,
m,
c
), g = f.map((e) => e.truncatedLabel), S = o.facetValues.some(
(e) => e.isSelected
), x = S ? o.facetValues.map(
(e, r) => e.isSelected ? a[r] : a[r].replace("rgb(", "rgba(").replace(")", ", 0.25)")
) : a, v = o.facetValues.map(
(e) => e.count
);
let C;
t === "BAR" ? C = o.facetValues.map(
(e) => f.find((r) => r.facet === e)?.label ?? e.value
) : t === "STACKED_HORIZONTAL_BAR" && (C = v);
let E;
t === "BAR" ? E = o.facetValues.map((e) => e.count) : t === "STACKED_HORIZONTAL_BAR" && (E = Array(C?.length).fill("Proportional"));
const h = {
values: t === "PIE" ? v : void 0,
labels: f.map((e) => e.label),
text: g,
x: C,
y: E,
orientation: t === "STACKED_HORIZONTAL_BAR" ? "h" : "v",
// @ts-expect-error
facetEnumerationValues: o.facetValues.map(
(e) => e.value
),
name: o.columnName,
textposition: t === "STACKED_HORIZONTAL_BAR" || t === "BAR" ? "none" : "inside",
hovertemplate: t === "PIE" ? "<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>" : "<b>%{text}: </b><br>%{value} <br><extra></extra>",
textinfo: "none",
type: t === "PIE" ? "pie" : "bar",
pull: t === "PIE" ? o.facetValues.map(
(e) => e.isSelected ? 0.1 : 0
) : void 0,
selectedpoints: S ? o.facetValues.map((e, r) => e.isSelected ? r : -1).filter((e) => e !== -1) : void 0,
selected: { marker: { opacity: 1 } },
unselected: { marker: { opacity: 0.25 } },
marker: {
colors: t === "PIE" ? x : void 0,
color: t === "PIE" ? void 0 : x
}
};
return {
data: [h],
labels: f,
colors: t === "PIE" ? h.marker?.colors : h.marker?.color
};
}
const re = (o, m, i) => {
if (o.points && o.points[0]) {
const t = o.points[0], c = t.data.facetEnumerationValues[t.pointNumber], a = m.facetValues.find(
(d) => d.value === c
);
i(
m,
a,
!a.isSelected
);
}
};
function ne(o, m, i) {
if (o != null) {
let t = 1;
switch (m) {
case "BAR":
t = 0.8;
break;
case "PIE":
t = 0.6;
break;
case "STACKED_HORIZONTAL_BAR":
t = 1;
break;
}
const c = o ? o * t : 200;
let a = m === "PIE" ? c : c / 3;
return a > i && (a = i), {
width: `${c}px`,
height: `${a}px`
};
}
return {
width: "100%",
height: `${i}px`
};
}
function ie(o) {
const {
onHide: m,
isModalView: i,
applyChangesToGraphSlice: t,
index: c,
facetToPlot: a,
plotType: d,
onSetPlotType: A
} = o, { accessToken: f } = V(), { data: g, isLoading: S } = Y(), [x, v] = ee(), { getColumnDisplayName: C } = z(), [E, h] = F(!1), w = C(
a.columnName,
a.jsonPath
), e = M(
() => T(
a,
g?.columnModels ?? []
),
[g?.columnModels, a]
), r = e?.columnType, { data: u } = O({
queryKey: [
"extractPlotDataArray",
a,
r,
c,
d,
f
],
queryFn: () => oe(
a,
r,
c,
d,
f
),
enabled: !!a
}), s = /* @__PURE__ */ p(N, { fullWidth: !0, children: [
/* @__PURE__ */ n(P, { children: "Chart Type" }),
/* @__PURE__ */ p(
K,
{
value: d,
onChange: (b) => {
A(b.target.value);
},
children: [
/* @__PURE__ */ n(B, { value: "BAR", children: "Bar Chart" }),
/* @__PURE__ */ n(B, { value: "PIE", children: "Pie Chart" })
]
}
)
] });
return !g && S || !a || !e ? /* @__PURE__ */ n("div", { className: "SRC-loadingContainer SRC-centerContentColumn", children: j }) : /* @__PURE__ */ p(D, { children: [
/* @__PURE__ */ n(
Q,
{
open: E,
onCancel: () => h(!1),
title: w ?? "",
content: /* @__PURE__ */ n(ie, { ...o, isModalView: !0 }),
hasCancelButton: !1,
confirmButtonProps: { children: "Apply Filters" },
onConfirm: () => h(!1),
maxWidth: "md"
}
),
/* @__PURE__ */ p(
"div",
{
role: "figure",
className: `FacetNavPanel${i ? "--expanded" : ""}`,
children: [
!i && /* @__PURE__ */ n(
G,
{
data: g,
isLoading: S,
title: w,
facetToPlot: a,
onHide: m,
setShowModal: h
}
),
i && /* @__PURE__ */ p(
k,
{
sx: {
gap: 2
},
children: [
/* @__PURE__ */ p(N, { children: [
/* @__PURE__ */ p(
P,
{
sx: { display: "flex", alignItems: "center", gap: 0.5 },
children: [
/* @__PURE__ */ n("span", { children: "Filter All Data By" }),
/* @__PURE__ */ n($, { title: "Selecting items in this dropdown will affect all facets on the Explore page.", children: /* @__PURE__ */ n(Z, { className: "SRC-hand-cursor SRC-secondary-text-color" }) })
]
}
),
/* @__PURE__ */ n(
J,
{
facet: a,
containerAs: "Dropdown",
dropdownType: "SelectBox"
}
)
] }),
s
]
}
),
/* @__PURE__ */ p(
H,
{
sx: {
display: "grid",
gridTemplateColumns: "50% 50%",
alignItems: "center"
},
role: "graphics-object",
className: "FacetNavPanel__body",
children: [
/* @__PURE__ */ n("div", { ref: v, children: /* @__PURE__ */ n(
U,
{
layout: ae,
data: u?.data ?? [],
style: ne(
x?.width,
d,
i ? 300 : 150
),
config: { displayModeBar: !1 },
onClick: (b) => re(b, a, t)
},
`${a.columnName}-${a.jsonPath}-${d}-${x?.width}`
) }),
/* @__PURE__ */ n(
W,
{
labels: u?.labels,
colors: u?.colors,
isExpanded: i
}
)
]
}
)
]
}
)
] });
}
export {
ie as default,
oe as extractPlotDataArray,
ne as getPlotStyle
};
//# sourceMappingURL=FacetNavPanel.js.map