synapse-react-client/dist/components/SynapseSearchPageResults/SearchFacetPanel/SearchFacetPanel.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as l, jsxs as h } from "react/jsx-runtime";
import { useState as M } from "react";
import x from "./SearchFacetPanel.module.scss.js";
import D from "dayjs";
import { entityTypeToFriendlyName as I } from "../../../utils/functions/EntityTypeUtils.js";
import { Collapse as Y, Box as d, Button as N, Typography as T, Chip as R, Tooltip as v, RadioGroup as E, FormControlLabel as F, Radio as S } from "@mui/material";
import P from "@mui/icons-material/UTurnLeft";
import b from "@mui/icons-material/Close";
import { FacetTypeNames as z } from "@sage-bionetworks/synapse-types";
import { UserBadge as L } from "../../UserCard/UserBadge.js";
import { FACET_DISPLAY_ORDER as H, shouldRenderFacet as U, shouldShowFacetValue as w, isUserFacet as Q, formatTimeRangeDisplayValue as W, getFacetDisplayName as B, MAX_FACET_VALUES_SHOWN as C, getAllFacetLabel as O, getSelectedTimeRangeId as j, timeRanges as V } from "./SearchFacetPanelUtils.js";
function oe({
  query: e,
  setQuery: c,
  facets: s,
  disabled: o = !1,
  onAddFacet: m,
  onRemoveFacet: i,
  onSetRangeFacet: a,
  onRemoveRangeFacet: r,
  isRangeFacetApplied: t,
  getAppliedRangeFacet: p,
  expanded: y,
  onCollapse: u
}) {
  const g = e.booleanQuery && e.booleanQuery.length > 0 || e.rangeQuery && e.rangeQuery.length > 0;
  return /* @__PURE__ */ l(
    Y,
    {
      in: y,
      id: "filter-search-results-panel",
      "aria-labelledby": "filter-results-button-label",
      children: /* @__PURE__ */ h(d, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
        /* @__PURE__ */ h(d, { sx: { display: "flex", alignItems: "center" }, children: [
          g && /* @__PURE__ */ h(
            N,
            {
              onClick: () => {
                c({
                  ...e,
                  booleanQuery: [],
                  rangeQuery: [],
                  start: 0
                });
              },
              variant: "text",
              size: "small",
              className: x.resetFilterButton,
              disabled: o,
              children: [
                /* @__PURE__ */ l(P, { sx: { transform: "rotate(90deg)" } }),
                /* @__PURE__ */ l(T, { sx: { fontSize: "16px", fontWeight: 700 }, children: "Reset Filters" })
              ]
            }
          ),
          /* @__PURE__ */ l(
            b,
            {
              sx: { marginLeft: "auto", cursor: "pointer" },
              onClick: u,
              "aria-expanded": y,
              "aria-controls": "filter-search-results-panel"
            }
          )
        ] }),
        /* @__PURE__ */ l(
          d,
          {
            sx: {
              display: "flex",
              flexDirection: "row",
              gap: 3,
              flexWrap: "wrap"
            },
            children: H.map((n) => {
              const f = s.find(($) => $.name === n);
              return !f || !U(f) ? null : /* @__PURE__ */ l(
                G,
                {
                  disabled: o,
                  facet: f,
                  query: e,
                  onAddFacet: m,
                  onRemoveFacet: i,
                  onSetRangeFacet: a,
                  onRemoveRangeFacet: r,
                  isRangeFacetApplied: t,
                  getAppliedRangeFacet: p
                },
                f.name
              );
            })
          }
        )
      ] })
    }
  );
}
function G({
  facet: e,
  disabled: c = !1,
  query: s,
  onAddFacet: o,
  onRemoveFacet: m,
  onSetRangeFacet: i,
  onRemoveRangeFacet: a,
  isRangeFacetApplied: r,
  getAppliedRangeFacet: t
}) {
  const p = B(e.name);
  return /* @__PURE__ */ h(d, { sx: { display: "flex", flexDirection: "column", minWidth: "200px" }, children: [
    /* @__PURE__ */ l(T, { variant: "smallText2", className: x.displayName, children: p }),
    e.type === z.LITERAL ? /* @__PURE__ */ l(
      K,
      {
        disabled: c,
        facet: e,
        query: s,
        onAddFacet: o,
        onRemoveFacet: m
      }
    ) : /* @__PURE__ */ l(
      X,
      {
        disabled: c,
        facet: e,
        query: s,
        onSetRangeFacet: i,
        onRemoveRangeFacet: a,
        isRangeFacetApplied: r,
        getAppliedRangeFacet: t
      }
    )
  ] });
}
const A = "__all__";
function K({
  facet: e,
  query: c,
  disabled: s = !1,
  onAddFacet: o,
  onRemoveFacet: m
}) {
  const [i, a] = M(!1), r = c.booleanQuery?.filter((n) => n.key === e.name).map((n) => n.value) || [], t = r[0] ?? A, p = e.constraints.map((n) => n.value), u = Array.from(/* @__PURE__ */ new Set([...r, ...p])).filter(
    (n) => w(e.name, n)
  ), g = i ? u : u.slice(0, C), _ = (n) => {
    r.forEach((f) => m(e.name, f)), n !== A && o(e.name, n);
  };
  return /* @__PURE__ */ h(
    E,
    {
      name: `literal-facet-${e.name}`,
      value: t,
      onChange: (n) => _(n.target.value),
      children: [
        /* @__PURE__ */ l(
          F,
          {
            sx: { mb: "8px" },
            disabled: s,
            value: A,
            control: /* @__PURE__ */ l(S, { size: "small" }),
            label: /* @__PURE__ */ l(T, { variant: "smallText1", sx: { lineHeight: "20px" }, children: O(e.name) })
          }
        ),
        /* @__PURE__ */ l(
          d,
          {
            sx: {
              display: "flex",
              flexDirection: "column",
              ...i && { maxHeight: "280px", overflowY: "auto" }
            },
            children: g.map((n) => /* @__PURE__ */ l(
              F,
              {
                disabled: s,
                value: n,
                control: /* @__PURE__ */ l(S, { size: "small" }),
                label: Q(e.name) ? /* @__PURE__ */ l(L, { userId: n }) : /* @__PURE__ */ l(T, { variant: "smallText1", sx: { lineHeight: "20px" }, children: e.name === "node_type" && I(n) || n })
              },
              n
            ))
          }
        ),
        u.length > C && !i && /* @__PURE__ */ h(
          N,
          {
            disabled: s,
            onClick: () => a(!0),
            variant: "text",
            size: "small",
            sx: { alignSelf: "flex-start" },
            children: [
              "Show all ",
              u.length
            ]
          }
        )
      ]
    }
  );
}
function X({
  facet: e,
  disabled: c = !1,
  onSetRangeFacet: s,
  onRemoveRangeFacet: o,
  getAppliedRangeFacet: m
}) {
  const i = m(e.name), a = i?.min ? j(i.min) : "ANY_TIME", r = (t) => {
    if (!V.find((g) => g.id === t)?.range) {
      o(e.name);
      return;
    }
    const y = {
      PAST_HOUR: "hour",
      PAST_DAY: "day",
      PAST_WEEK: "week",
      PAST_MONTH: "month",
      PAST_YEAR: "year"
    }, u = String(D().subtract(1, y[t]).unix());
    s(e.name, u);
  };
  return /* @__PURE__ */ l(
    E,
    {
      name: `range-facet-${e.name}`,
      value: a,
      onChange: (t) => r(t.target.value),
      children: V.map((t) => /* @__PURE__ */ l(
        F,
        {
          disabled: c,
          value: t.id,
          control: /* @__PURE__ */ l(S, { size: "small" }),
          label: t.label,
          sx: { mb: 0.5 }
        },
        t.label
      ))
    }
  );
}
function ie({
  query: e,
  onRemoveFacet: c,
  onRemoveRangeFacet: s
}) {
  const o = e.booleanQuery || [], m = e.rangeQuery || [];
  return o.length > 0 || m.length > 0 ? /* @__PURE__ */ h(
    d,
    {
      sx: {
        display: "flex",
        flexWrap: "wrap",
        gap: 1,
        alignItems: "center"
      },
      children: [
        o.map((a, r) => w(a.key, a.value) ? /* @__PURE__ */ l(
          R,
          {
            className: x.chipStyles,
            deleteIcon: /* @__PURE__ */ l(b, { className: x.closeIcon }),
            onDelete: () => c(a.key, a.value),
            label: Q(a.key) ? /* @__PURE__ */ l(
              d,
              {
                sx: {
                  "& .MuiTypography-root": {
                    color: "var(--synapse-white)"
                  }
                },
                children: /* @__PURE__ */ l(L, { userId: a.value })
              }
            ) : /* @__PURE__ */ l(T, { variant: "smallText1", children: a.key === "node_type" && I(a.value) || a.value })
          },
          `${a.key}-${a.value}-${r}`
        ) : null),
        m.map((a, r) => {
          const t = W(a.min), p = D(parseInt(a.min) * 1e3).format("MMMM D, YYYY");
          return /* @__PURE__ */ l(
            v,
            {
              title: `Since ${p}`,
              arrow: !0,
              children: /* @__PURE__ */ l(
                R,
                {
                  className: x.chipStyles,
                  label: `${t}`,
                  deleteIcon: /* @__PURE__ */ l(b, { className: x.closeIcon }),
                  onDelete: () => s(a.key)
                }
              )
            },
            `${a.key}-${a.min}-${r}`
          );
        })
      ]
    }
  ) : null;
}
export {
  ie as AppliedFacetsChips,
  oe as SearchFacetPanel
};
//# sourceMappingURL=SearchFacetPanel.js.map