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

Grafana Components Library

{"version":3,"file":"FacetedLabelsFilter.cjs","sources":["../../../../src/components/VizLegend/FacetedLabelsFilter.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useCallback, useState } from 'react';\n\nimport { FIELD_NAME_FACET_KEY, type GrafanaTheme2 } from '@grafana/data';\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Checkbox } from '../Forms/Checkbox';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FacetedLabelsFilterProps {\n  /** Map of label keys to their sorted unique values, from extractFacetedLabels */\n  labels: Record<string, string[]>;\n  /** Currently selected label values, keyed by label key */\n  selected: Record<string, string[]>;\n  /** Called when the selection changes */\n  onChange: (selected: Record<string, string[]>) => void;\n  /** When true the filter is dimmed to indicate the legend has taken precedence */\n  dimmed?: boolean;\n}\n\nexport function FacetedLabelsFilter({ labels, selected, onChange, dimmed }: FacetedLabelsFilterProps) {\n  const styles = useStyles2(getStyles);\n  const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});\n  const labelKeys = Object.keys(labels);\n\n  const toggleExpanded = useCallback((key: string) => {\n    setExpandedKeys((prev) => ({ ...prev, [key]: !prev[key] }));\n  }, []);\n\n  const toggleValue = useCallback(\n    (key: string, value: string) => {\n      const current = selected[key] ?? [];\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n\n      onChange({ ...selected, [key]: next });\n    },\n    [selected, onChange]\n  );\n\n  const toggleAllForKey = useCallback(\n    (key: string) => {\n      const values = labels[key];\n      if (!values) {\n        return;\n      }\n      const current = selected[key] ?? [];\n      const allSelected = current.length === values.length;\n      onChange({ ...selected, [key]: allSelected ? [] : [...values] });\n    },\n    [labels, selected, onChange]\n  );\n\n  const seriesValues = labels[FIELD_NAME_FACET_KEY];\n  const realLabelKeys = labelKeys.filter((key) => key !== FIELD_NAME_FACET_KEY);\n\n  if (!seriesValues && realLabelKeys.length === 0) {\n    return null;\n  }\n\n  const renderCheckboxList = (key: string, values: string[], className: string) => {\n    const selectedValues = selected[key] ?? [];\n    return (\n      <div className={className}>\n        {values.map((value) => (\n          <Checkbox\n            key={value}\n            label={value}\n            value={selectedValues.includes(value)}\n            onChange={() => toggleValue(key, value)}\n            className={styles.checkbox}\n          />\n        ))}\n        <button type=\"button\" className={styles.toggleAll} onClick={() => toggleAllForKey(key)}>\n          {selectedValues.length === values.length ? (\n            <Trans i18nKey=\"grafana-ui.viz-legend.faceted-deselect-all\">Deselect all</Trans>\n          ) : (\n            <Trans i18nKey=\"grafana-ui.viz-legend.faceted-select-all\">Select all</Trans>\n          )}\n        </button>\n      </div>\n    );\n  };\n\n  return (\n    <div className={cx(styles.container, dimmed && styles.dimmed)} data-testid=\"faceted-labels-filter\">\n      {seriesValues && (\n        <div className={styles.section}>\n          <span className={styles.sectionLabel}>\n            <Trans i18nKey=\"grafana-ui.viz-legend.faceted-by-name\">By name</Trans>\n          </span>\n          {renderCheckboxList(FIELD_NAME_FACET_KEY, seriesValues, styles.checkboxList)}\n        </div>\n      )}\n\n      {realLabelKeys.length > 0 && (\n        <div className={styles.section}>\n          <span className={styles.sectionLabel}>\n            <Trans i18nKey=\"grafana-ui.viz-legend.faceted-by-labels\">By labels</Trans>\n          </span>\n          {realLabelKeys.map((key) => {\n            const selectedValues = selected[key] ?? [];\n            const isExpanded = expandedKeys[key] ?? false;\n            return (\n              <div key={key} className={styles.labelGroup}>\n                <button type=\"button\" className={styles.labelKey} onClick={() => toggleExpanded(key)}>\n                  <Icon name={isExpanded ? 'angle-down' : 'angle-right'} size=\"sm\" />\n                  <span className={styles.keyName}>{key}</span>\n                  {selectedValues.length > 0 && <span className={styles.count}>{selectedValues.length}</span>}\n                </button>\n                {isExpanded && renderCheckboxList(key, labels[key], styles.checkboxListIndented)}\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nFacetedLabelsFilter.displayName = 'FacetedLabelsFilter';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'stretch',\n    minWidth: '150px',\n    padding: theme.spacing(1.5, 1, 1, 1),\n    gap: theme.spacing(1),\n  }),\n  dimmed: css({\n    opacity: 0.5,\n  }),\n  section: css({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  sectionLabel: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.colors.text.secondary,\n    marginBottom: theme.spacing(0.25),\n  }),\n  toggleAll: css({\n    all: 'unset',\n    cursor: 'pointer',\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.link,\n    marginTop: theme.spacing(0.25),\n    '&:hover': {\n      textDecoration: 'underline',\n    },\n  }),\n  labelGroup: css({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  labelKey: css({\n    all: 'unset',\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    cursor: 'pointer',\n    padding: theme.spacing(0.25, 0),\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.primary,\n    '&:hover': {\n      color: theme.colors.text.maxContrast,\n    },\n  }),\n  keyName: css({\n    fontWeight: theme.typography.fontWeightMedium,\n    fontFamily: theme.typography.fontFamilyMonospace,\n  }),\n  count: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.primary.text,\n    fontWeight: theme.typography.fontWeightMedium,\n  }),\n  checkboxList: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: theme.spacing(0.25),\n    padding: theme.spacing(0, 0, 0.5, 0.5),\n  }),\n  checkboxListIndented: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: theme.spacing(0.25),\n    padding: theme.spacing(0, 0, 0.5, 2.5),\n  }),\n  checkbox: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    fontFamily: theme.typography.fontFamilyMonospace,\n  }),\n});\n"],"names":["useStyles2","useState","useCallback","FIELD_NAME_FACET_KEY","jsxs","jsx","Checkbox","Trans","cx","Icon","css"],"mappings":"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"}