synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
179 lines (178 loc) • 4.82 kB
JavaScript
import { jsxs as C, jsx as h } from "react/jsx-runtime";
import { OBSERVATION_CARD as R } from "../../utils/SynapseConstants.js";
import { Dialog as O, DialogContent as E } from "@mui/material";
import { ColumnSingleValueFilterOperator as F } from "@sage-bionetworks/synapse-types";
import x from "dayjs";
import { useState as y, useRef as $, useMemo as k } from "react";
import { CardContainerLogic as S } from "../CardContainerLogic/CardContainerLogic.js";
import { Plot as U } from "../Plot/Plot.js";
const j = (t, e, n, c) => {
let i = -1;
return {
timepoints: e.map((o, s) => {
const a = parseFloat(o.values[n.observationTime]), r = o.values[n.observationTimeUnits];
return o.rowId == c && (i = s), t.add(a, r);
}),
hoverOverIndex: i
};
}, H = (t) => t.length == 0 ? x().add(1, "days") : t.reduce(
(e, n) => !e || n.isAfter(e) ? n : e
), L = (t, e) => {
if (t.timepoints == null || t.timepoints.length == 0)
return [
{
x: [x().format()],
y: [0.5],
mode: "lines",
line: {
color: "blue",
width: 2
},
customdata: [],
hoverinfo: "none"
}
];
const n = t.timepoints.reduce(
(i, l, o) => {
const s = i;
return s[l.format()] || (s[l.format()] = []), s[l.format()].push(e[o]), i;
},
{}
);
return t.timepoints.map((i, l) => {
const o = i.format(), s = l == t.hoverOverIndex, r = n[o].map((u) => u.rowId);
return {
x: [o, o, o],
y: [0, 0.5, 1],
mode: "lines",
line: {
color: s ? "black" : "gray",
width: s ? 2 : 1
},
// Add event into in the customdata
customdata: [r, r, r],
// but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)
hoverinfo: "none"
};
});
}, N = (t, e, n, c, i, l) => {
const o = c.map((a) => a.x[0]), s = c.map((a) => {
const r = a.customdata[0];
if (r && r.length > 0) {
const u = r.length, d = i?.filter((f) => r[0] == f.rowId);
if (d && d.length > 0) {
const f = d[0], g = parseFloat(f.values[l.observationTime]), p = f.values[l.observationTimeUnits], v = u > 1 ? `(${u})` : "";
return `${g} ${p} ${v}`;
}
}
return "";
});
return {
hovermode: "closest",
dragmode: !1,
//disallow interaction
showlegend: !1,
xaxis: {
showgrid: !1,
showticklabels: !0,
showline: !1,
zeroline: !1,
tickvals: o,
ticktext: s,
tickangle: -45
},
yaxis: {
range: [0, 1.25],
showgrid: !1,
zeroline: !1,
showline: !1,
showticklabels: !1
},
// Each phase has a shape
shapes: [
{
type: "rect",
x0: t.subtract(e.diff(t) / 10).format(),
// add 10% to the left side of the graph
x1: e.add(e.diff(t) / 3).format(),
// add 33% to right side of the graph
y0: 0.25,
y1: 0.75,
fillcolor: n,
opacity: 0.8,
line: {
width: 0
}
}
],
margin: {
l: 0,
r: 0,
t: 60,
b: 60
}
// autosize: false,
};
}, W = ({
color: t,
rowData: e,
schema: n,
widthPx: c,
sql: i
}) => {
const [l, o] = y(), [s, a] = y(), [r, u] = y(1), d = x(), f = $(null), g = l?.points[0].customdata, p = e?.filter((m) => g?.includes(m.rowId)), v = s?.points[0].customdata, w = k(() => j(
d,
e,
n,
v?.length > 0 ? v[0] : void 0
), [v, e, n, d]), I = H(w.timepoints), b = k(() => L(w, e), [w, e]), T = p.map((m) => m.rowId);
return /* @__PURE__ */ C("div", { ref: f, style: { width: c }, children: [
/* @__PURE__ */ h(
U,
{
style: { width: c, height: "220px" },
data: b,
layout: N(d, I, t, b, e, n),
config: { displayModeBar: !1 },
useResizeHandler: !0,
onClick: (m) => {
o(m), a(void 0);
},
onDoubleClick: () => {
u(r + 1);
},
onHover: (m) => {
a(m);
},
onUnhover: () => {
a(void 0);
}
},
`Plot-${t}-${r}`
),
/* @__PURE__ */ h(
O,
{
onClose: () => o(void 0),
open: p && p.length > 0,
children: /* @__PURE__ */ h(E, { children: /* @__PURE__ */ h(
S,
{
topLevelEnumeratedFacetToFilter: { columnName: "observationType" },
sql: i,
searchParams: { ROW_ID: T.map(String).join(",") },
sqlOperator: F.IN,
lockedColumn: { columnName: "ROW_ID" },
cardConfiguration: { type: R },
initialLimit: 3
}
) })
}
)
] });
};
export {
W as default,
H as getMaxDate
};
//# sourceMappingURL=TimelinePhase.js.map