synapse-react-client/dist/components/widgets/facet-nav/FacetPlotLegendList.js

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

import { jsx as e, Fragment as i, jsxs as c } from "react/jsx-runtime";
import { Tooltip as x, Box as a, Typography as d } from "@mui/material";
function m(s) {
  const { labels: t, colors: p = [], isExpanded: n } = s;
  if (!t)
    return /* @__PURE__ */ e(i, {});
  const o = n ? Math.min(t.length, 9) : Math.min(t.length, 4);
  return o === 0 ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e(
    "div",
    {
      className: `FacetNavPanel__body__legend${n ? "--expanded" : ""}`,
      children: t.slice(0, o).map((l, r) => /* @__PURE__ */ e(
        x,
        {
          title: l.label,
          placement: "top",
          children: /* @__PURE__ */ c(
            a,
            {
              sx: {
                display: "grid",
                gridTemplateColumns: "20px auto 60px",
                alignItems: "center",
                gap: "10px"
              },
              children: [
                /* @__PURE__ */ e(
                  a,
                  {
                    sx: {
                      width: "14px",
                      height: "14px",
                      cursor: "default",
                      backgroundColor: p[r]
                    },
                    style: { cursor: "default" }
                  },
                  `legendLabel_${r}`
                ),
                /* @__PURE__ */ e(
                  d,
                  {
                    variant: "body2",
                    sx: {
                      display: "block",
                      width: "100%",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      fontSize: "14px"
                    },
                    children: l.label
                  }
                ),
                /* @__PURE__ */ e(
                  d,
                  {
                    variant: "body2",
                    sx: { color: "grey.600", fontSize: "14px" },
                    children: l.count.toLocaleString()
                  }
                )
              ]
            }
          )
        },
        l.label
      ))
    }
  );
}
export {
  m as FacetPlotLegendList
};
//# sourceMappingURL=FacetPlotLegendList.js.map