@grafana/ui/dist/cjs/components/VizLegend/FacetedLabelsFilter.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Checkbox = require('../Forms/Checkbox.cjs');
var Icon = require('../Icon/Icon.cjs');

"use strict";
function FacetedLabelsFilter({ labels, selected, onChange, dimmed }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const [expandedKeys, setExpandedKeys] = React.useState({});
  const labelKeys = Object.keys(labels);
  const toggleExpanded = React.useCallback((key) => {
    setExpandedKeys((prev) => ({ ...prev, [key]: !prev[key] }));
  }, []);
  const toggleValue = React.useCallback(
    (key, value) => {
      var _a;
      const current = (_a = selected[key]) != null ? _a : [];
      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
      onChange({ ...selected, [key]: next });
    },
    [selected, onChange]
  );
  const toggleAllForKey = React.useCallback(
    (key) => {
      var _a;
      const values = labels[key];
      if (!values) {
        return;
      }
      const current = (_a = selected[key]) != null ? _a : [];
      const allSelected = current.length === values.length;
      onChange({ ...selected, [key]: allSelected ? [] : [...values] });
    },
    [labels, selected, onChange]
  );
  const seriesValues = labels[data.FIELD_NAME_FACET_KEY];
  const realLabelKeys = labelKeys.filter((key) => key !== data.FIELD_NAME_FACET_KEY);
  if (!seriesValues && realLabelKeys.length === 0) {
    return null;
  }
  const renderCheckboxList = (key, values, className) => {
    var _a;
    const selectedValues = (_a = selected[key]) != null ? _a : [];
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
      values.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
        Checkbox.Checkbox,
        {
          label: value,
          value: selectedValues.includes(value),
          onChange: () => toggleValue(key, value),
          className: styles.checkbox
        },
        value
      )),
      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles.toggleAll, onClick: () => toggleAllForKey(key), children: selectedValues.length === values.length ? /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.viz-legend.faceted-deselect-all", children: "Deselect all" }) : /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.viz-legend.faceted-select-all", children: "Select all" }) })
    ] });
  };
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.container, dimmed && styles.dimmed), "data-testid": "faceted-labels-filter", children: [
    seriesValues && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.sectionLabel, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.viz-legend.faceted-by-name", children: "By name" }) }),
      renderCheckboxList(data.FIELD_NAME_FACET_KEY, seriesValues, styles.checkboxList)
    ] }),
    realLabelKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.sectionLabel, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.viz-legend.faceted-by-labels", children: "By labels" }) }),
      realLabelKeys.map((key) => {
        var _a, _b;
        const selectedValues = (_a = selected[key]) != null ? _a : [];
        const isExpanded = (_b = expandedKeys[key]) != null ? _b : false;
        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.labelGroup, children: [
          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: styles.labelKey, onClick: () => toggleExpanded(key), children: [
            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: isExpanded ? "angle-down" : "angle-right", size: "sm" }),
            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.keyName, children: key }),
            selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.count, children: selectedValues.length })
          ] }),
          isExpanded && renderCheckboxList(key, labels[key], styles.checkboxListIndented)
        ] }, key);
      })
    ] })
  ] });
}
FacetedLabelsFilter.displayName = "FacetedLabelsFilter";
const getStyles = (theme) => ({
  container: css.css({
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    minWidth: "150px",
    padding: theme.spacing(1.5, 1, 1, 1),
    gap: theme.spacing(1)
  }),
  dimmed: css.css({
    opacity: 0.5
  }),
  section: css.css({
    display: "flex",
    flexDirection: "column"
  }),
  sectionLabel: css.css({
    fontSize: theme.typography.bodySmall.fontSize,
    fontWeight: theme.typography.fontWeightMedium,
    color: theme.colors.text.secondary,
    marginBottom: theme.spacing(0.25)
  }),
  toggleAll: css.css({
    all: "unset",
    cursor: "pointer",
    fontSize: theme.typography.bodySmall.fontSize,
    color: theme.colors.text.link,
    marginTop: theme.spacing(0.25),
    "&:hover": {
      textDecoration: "underline"
    }
  }),
  labelGroup: css.css({
    display: "flex",
    flexDirection: "column"
  }),
  labelKey: css.css({
    all: "unset",
    display: "flex",
    alignItems: "center",
    gap: theme.spacing(0.5),
    cursor: "pointer",
    padding: theme.spacing(0.25, 0),
    fontSize: theme.typography.bodySmall.fontSize,
    color: theme.colors.text.primary,
    "&:hover": {
      color: theme.colors.text.maxContrast
    }
  }),
  keyName: css.css({
    fontWeight: theme.typography.fontWeightMedium,
    fontFamily: theme.typography.fontFamilyMonospace
  }),
  count: css.css({
    fontSize: theme.typography.bodySmall.fontSize,
    color: theme.colors.primary.text,
    fontWeight: theme.typography.fontWeightMedium
  }),
  checkboxList: css.css({
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: theme.spacing(0.25),
    padding: theme.spacing(0, 0, 0.5, 0.5)
  }),
  checkboxListIndented: css.css({
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: theme.spacing(0.25),
    padding: theme.spacing(0, 0, 0.5, 2.5)
  }),
  checkbox: css.css({
    fontSize: theme.typography.bodySmall.fontSize,
    fontFamily: theme.typography.fontFamilyMonospace
  })
});

exports.FacetedLabelsFilter = FacetedLabelsFilter;
//# sourceMappingURL=FacetedLabelsFilter.cjs.map