synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
458 lines (457 loc) • 15.5 kB
JavaScript
import { jsxs as s, jsx as n, Fragment as j } from "react/jsx-runtime";
import { Box as g, Typography as C, Link as re, TextField as te, InputAdornment as ne, Button as D, Badge as oe, Collapse as ae, IconButton as ie, Skeleton as se } from "@mui/material";
import { SynapseSearchResultsCard as le } from "./SynapseSearchResultsCard.js";
import Y from "@mui/icons-material/Search";
import ce from "@mui/icons-material/FilterAltOutlined";
import { useState as I, useEffect as L, useMemo as O, useCallback as f, Suspense as de } from "react";
import { useSearchInfinite as pe } from "../../synapse-queries/search/useSearch.js";
import { useDocumentMetadata as ue } from "../../utils/context/DocumentMetadataContext.js";
import { ArrowForward as me } from "@mui/icons-material";
import d from "./SynapseSearchPageResults.module.scss.js";
import { useSuggestion as ge } from "../../synapse-queries/search/useSuggestion.js";
import he from "./SearchPagePortalBanners.js";
import { SYNAPSE_ENTITY_ID_REGEX as fe } from "../../utils/functions/RegularExpressions.js";
import { DEFAULT_SEARCH_QUERY as h } from "../../utils/searchDefaults.js";
import { SearchFacetPanel as ye, AppliedFacetsChips as xe } from "./SearchFacetPanel/SearchFacetPanel.js";
import { shouldShowFacetValue as Se } from "./SearchFacetPanel/SearchFacetPanelUtils.js";
import { SkeletonInlineBlock as Fe } from "../Skeleton/SkeletonInlineBlock.js";
import "@mui/material/Skeleton";
import "lodash-es";
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 "@sage-bionetworks/synapse-types";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import { useSynapseContext as be } 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 "@sage-bionetworks/synapse-client";
import "../../utils/functions/EntityTypeUtils.js";
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 '../../style/components/_spinner.css';/* empty css */
import "react-router";
function Te(o, i, e) {
const t = o.booleanQuery || [];
return t.some(
(m) => m.key === i && m.value === e
) ? o : {
...h,
...o,
booleanQuery: [
...t,
{ key: i, value: e, not: !1 }
],
start: 0
// Reset to first page
};
}
function ve(o, i, e) {
const t = o.booleanQuery || [];
return {
...h,
...o,
booleanQuery: t.filter(
(u) => !(u.key === i && u.value === e)
),
start: 0
};
}
function Qe(o, i, e) {
const u = (o.rangeQuery || []).filter((S) => S.key !== i), m = String(Math.floor(Date.now() / 1e3));
return {
...h,
...o,
rangeQuery: [
...u,
{ key: i, min: e, max: m }
],
start: 0
};
}
function Re(o, i) {
const e = o.rangeQuery || [];
return {
...h,
...o,
rangeQuery: e.filter((t) => t.key !== i),
start: 0
};
}
function Ce(o, i) {
return (o.rangeQuery || []).some((t) => t.key === i);
}
function Ie(o, i) {
return (o.rangeQuery || []).find((t) => t.key === i);
}
function Sr(o) {
const { query: e, setQuery: t } = o, { peopleSearchPageUrl: u } = be(), [m, S] = I(!1);
ue({ title: `Search: ${e?.queryTerm?.join(" ")}` });
const [v, A] = I(
e?.queryTerm?.join(" ") || ""
);
L(() => {
A(e?.queryTerm?.join(" ") || "");
}, [e]);
const {
data: l,
isLoading: F,
error: k,
fetchNextPage: U,
hasNextPage: G,
isFetchingNextPage: w
} = pe(
e ? {
...h,
...e,
size: 50,
returnFields: ["path"]
} : { queryTerm: [], size: 50, returnFields: ["path"] },
{
enabled: !!e?.queryTerm?.[0]
}
), V = (r) => {
A(r.target.value);
}, z = () => {
if (t) {
const r = {
...h,
...e,
queryTerm: v ? v.split(" ").map((a) => a.trim()).filter(Boolean) : [],
start: 0
};
t(r);
}
}, { data: N } = ge(
{ searchTerm: e?.queryTerm },
{
enabled: !!e?.queryTerm?.[0]
}
), y = O(() => {
const r = N?.suggestions, a = e?.queryTerm || [];
if (!r) return null;
const c = /* @__PURE__ */ new Map();
let p = !1;
for (const x of r) {
const _ = x.key, R = Array.from(x.values ?? []).reduce(
(b, T) => T.score === void 0 || T.score < 0.75 ? b : !b || (T.frequency ?? 0) > (b.frequency ?? 0) ? T : b,
null
);
R?.term && R.term !== _ && (c.set(_, R.term), p = !0);
}
return p ? a.map(
(x) => c.get(x.toLowerCase()) || x
).join(" ") : null;
}, [N, e?.queryTerm]), H = O(() => {
if (!l?.pages || l.pages.length === 0)
return [];
const r = /* @__PURE__ */ new Set(), a = l.pages[0];
if (a?.hits) {
for (const p of a.hits)
if (p.id && r.add(p.id), p.path?.path)
for (const Q of p.path.path.slice(1))
Q.id && r.add(Q.id);
}
return Array.from(r);
}, [l]), W = () => {
if (t && y) {
const r = {
...h,
...e,
queryTerm: y.split(" ").map((a) => a.trim()).filter(Boolean),
start: 0
};
t(r);
}
}, E = l?.pages?.[0]?.hits?.length === 0, $ = fe.test(e?.queryTerm?.[0] || ""), [M, K] = I([]);
L(() => {
const r = l?.pages?.[0]?.facets;
r && K(r);
}, [l]);
const X = f(
(r, a) => {
t && e && t(Te(e, r, a));
},
[e, t]
), P = f(
(r, a) => {
t && e && t(ve(e, r, a));
},
[e, t]
), J = f(
(r, a) => {
t && e && t(Qe(e, r, a));
},
[e, t]
), q = f(
(r) => {
t && e && t(Re(e, r));
},
[e, t]
), Z = f(
(r) => e ? Ce(e, r) : !1,
[e]
), ee = f(
(r) => e ? Ie(e, r) : void 0,
[e]
), B = (e?.booleanQuery?.filter((r) => Se(r.key, r.value)).length || 0) + (e?.rangeQuery?.length || 0);
return /* @__PURE__ */ s(
g,
{
sx: {
display: "flex",
flexDirection: "column",
width: "100%",
p: "30px",
gap: "20px"
},
children: [
/* @__PURE__ */ s(
g,
{
sx: {
display: "flex",
flexDirection: "column",
height: "auto",
gap: "16px"
},
children: [
u && /* @__PURE__ */ s(C, { variant: "smallText1", children: [
"Searching for a user profile? Try our",
" ",
/* @__PURE__ */ n(re, { href: u, children: "People Search." })
] }),
/* @__PURE__ */ s(g, { className: d.searchContainer, children: [
/* @__PURE__ */ n(
te,
{
placeholder: "Search…",
sx: { flex: 1 },
value: v,
onChange: V,
onKeyDown: (r) => {
r.key === "Enter" && z();
},
slotProps: {
input: {
sx: {
borderRadius: "96px",
boxShadow: "0px 1px 4px var(--synapse-gray-500)",
backgroundColor: "var(--synapse-white)"
},
startAdornment: /* @__PURE__ */ n(ne, { position: "start", children: /* @__PURE__ */ n(Y, { sx: { color: "secondary.600" } }) })
}
}
}
),
/* @__PURE__ */ n(
D,
{
onClick: () => S(!0),
variant: "outlined",
startIcon: /* @__PURE__ */ n(ce, {}),
"aria-expanded": m,
"aria-controls": "filter-search-results-panel",
sx: {
color: (r) => r.palette.primary.dark
},
className: d.filterButton,
children: /* @__PURE__ */ s(
C,
{
sx: {
fontWeight: 700,
lineHeight: "16px",
display: "flex",
gap: "8px"
},
children: [
/* @__PURE__ */ n("span", { id: "filter-results-button-label", children: "Filter Search Results" }),
B > 0 && /* @__PURE__ */ n(
oe,
{
badgeContent: B,
color: "primary",
sx: {
"& .MuiBadge-badge": {
position: "static",
transform: "none",
height: "18px",
minWidth: "18px"
}
}
}
)
]
}
)
}
)
] }),
/* @__PURE__ */ n(g, { children: M.length > 0 && /* @__PURE__ */ n(
ae,
{
in: m,
id: "filter-search-results-panel",
"aria-labelledby": "filter-results-button-label",
children: /* @__PURE__ */ n(
g,
{
sx: {
border: "1px solid",
borderColor: "var(--synapse-gray-100)",
backgroundColor: "var(--synapse-white)",
padding: "25px",
boxShadow: "0 4px 16px 0 rgba(0, 0, 0, 0.04)",
pointerEvents: F ? "none" : "auto",
opacity: F ? 0.5 : 1
},
children: e && t && /* @__PURE__ */ n(
ye,
{
expanded: m,
onCollapse: () => S(!1),
disabled: F,
query: e,
setQuery: t,
facets: M,
onAddFacet: X,
onRemoveFacet: P,
onSetRangeFacet: J,
onRemoveRangeFacet: q,
isRangeFacetApplied: Z,
getAppliedRangeFacet: ee
}
)
}
)
}
) })
]
}
),
/* @__PURE__ */ s(j, { children: [
l && !$ && y && /* @__PURE__ */ s("div", { className: d.didYouMeanContainer, children: [
/* @__PURE__ */ n("div", { className: d.didYouMeanCurrentlyShowing, children: !E && /* @__PURE__ */ s(j, { children: [
"Currently showing results for",
" ",
/* @__PURE__ */ n("b", { children: e?.queryTerm?.join(" ") }),
"."
] }) }),
/* @__PURE__ */ s("div", { className: d.didYouMeanSuggestion, children: [
/* @__PURE__ */ n(
Y,
{
sx: { color: "grey.600" },
className: d.searchIcon
}
),
/* @__PURE__ */ s(C, { variant: "body1", className: d.didYouMeanText, children: [
"Search for ",
/* @__PURE__ */ n("b", { className: d.suggestionText, children: y }),
" ",
"instead?"
] }),
/* @__PURE__ */ n(
ie,
{
className: d.didYouMeanArrowContainer,
onClick: W,
"aria-label": `Search for ${y} instead`,
sx: {
borderColor: "primary.main",
svg: { color: "primary.main" }
},
children: /* @__PURE__ */ n(me, {})
}
)
] })
] }),
E && /* @__PURE__ */ s("div", { className: d.didYouMeanCurrentlyShowing, children: [
"No results found for ",
/* @__PURE__ */ n("b", { children: e?.queryTerm?.join(" ") }),
"."
] }),
/* @__PURE__ */ s(
g,
{
sx: {
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
gap: "20px"
},
children: [
F && Array.from({ length: 3 }, () => /* @__PURE__ */ n(se, { variant: "rectangular", width: "100%", height: "250px" })),
k && /* @__PURE__ */ s("div", { children: [
"Error: ",
k.message
] }),
/* @__PURE__ */ n(
de,
{
fallback: /* @__PURE__ */ n(Fe, { width: "100%", height: "150px" }),
children: /* @__PURE__ */ n(he, { entityIds: H })
}
),
e && /* @__PURE__ */ n(g, { sx: { alignSelf: "flex-start" }, children: /* @__PURE__ */ n(
xe,
{
query: e,
onRemoveFacet: P,
onRemoveRangeFacet: q
}
) }),
l && l.pages && l.pages.map(
(r, a) => r.hits.map((c) => {
const p = c.path?.path?.[1];
return /* @__PURE__ */ n(
le,
{
searchTerms: e?.queryTerm ?? [],
entityId: c.id,
name: c.name,
entityType: c.node_type,
modifiedOn: c.modified_on,
description: c.description,
locatedIn: p
},
c.id + "-" + a
);
})
),
G && /* @__PURE__ */ n(
D,
{
onClick: () => {
U();
},
loading: w,
variant: "contained",
sx: { mt: 2 },
children: w ? "Loading more..." : "Load More"
}
)
]
}
)
] })
]
}
);
}
export {
Sr as SynapseSearchPageResults
};
//# sourceMappingURL=SynapseSearchPageResults.js.map