{"version":3,"file":"ValueSelector.mjs","sources":["../../../../src/components/metrics-browser/ValueSelector.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FixedSizeList } from 'react-window';\n\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\nimport { BrowserLabel as PromLabel, Input, Label, useStyles2, Spinner } from '@grafana/ui';\n\nimport { LIST_ITEM_SIZE } from '../../constants';\n\nimport { useMetricsBrowser } from './MetricsBrowserContext';\nimport { getStylesMetricsBrowser, getStylesValueSelector } from './styles';\n\nexport function ValueSelector() {\n  const styles = useStyles2(getStylesValueSelector);\n  const sharedStyles = useStyles2(getStylesMetricsBrowser);\n\n  const [valueSearchTerm, setValueSearchTerm] = useState('');\n  const { labelValues, selectedLabelValues, isLoadingLabelValues, onLabelValueClick, onLabelKeyClick } =\n    useMetricsBrowser();\n  const [filteredLabelValues, setFilteredLabelValues] = useState<Record<string, string[]>>({ ...labelValues });\n\n  useEffect(() => {\n    const filtered: Record<string, string[]> = {};\n    for (const labelKey in labelValues) {\n      const values = labelValues[labelKey];\n      filtered[labelKey] = values.filter((value) => value.includes(valueSearchTerm));\n    }\n    setFilteredLabelValues(filtered);\n  }, [labelValues, valueSearchTerm]);\n\n  return (\n    <div className={styles.section}>\n      <Label\n        description={t(\n          'grafana-prometheus.components.value-selector.description-search-field-values-across-selected-labels',\n          'Use the search field to find values across selected labels.'\n        )}\n      >\n        <Trans i18nKey=\"grafana-prometheus.components.value-selector.select-multiple-values-for-your-labels\">\n          3. Select (multiple) values for your labels\n        </Trans>\n      </Label>\n      <div>\n        <Input\n          onChange={(e) => setValueSearchTerm(e.currentTarget.value)}\n          aria-label={t(\n            'grafana-prometheus.components.value-selector.aria-label-filter-expression-for-label-values',\n            'Filter expression for label values'\n          )}\n          value={valueSearchTerm}\n          data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.labelValuesFilter}\n        />\n      </div>\n      {isLoadingLabelValues ? (\n        <div className={sharedStyles.spinner}>\n          <Spinner size=\"xl\" />\n        </div>\n      ) : (\n        <div className={styles.valueListArea}>\n          {Object.entries(filteredLabelValues).map(([lk, lv]) => {\n            if (!lk || !lv) {\n              console.error('label values are empty:', { lk, lv });\n              return null;\n            }\n            return (\n              <div\n                role=\"list\"\n                key={lk}\n                aria-label={t(\n                  'grafana-prometheus.components.value-selector.aria-label-values-for',\n                  'Values for {{labelKey}}',\n                  {\n                    labelKey: lk,\n                  }\n                )}\n                className={styles.valueListWrapper}\n              >\n                <div className={styles.valueTitle}>\n                  <PromLabel name={lk} active={true} hidden={false} facets={lv.length} onClick={onLabelKeyClick} />\n                </div>\n                <FixedSizeList\n                  height={Math.min(200, LIST_ITEM_SIZE * (lv.length || 0))}\n                  itemCount={lv.length || 0}\n                  itemSize={28}\n                  itemKey={(i) => lv[i]}\n                  width={200}\n                  className={styles.valueList}\n                >\n                  {({ index, style }) => {\n                    const value = lv[index];\n                    const isSelected = selectedLabelValues[lk]?.includes(value);\n                    return (\n                      <div style={style}>\n                        <PromLabel\n                          name={value}\n                          value={value}\n                          active={isSelected}\n                          onClick={(name) => onLabelValueClick(lk, name, !isSelected)}\n                          searchTerm={valueSearchTerm}\n                        />\n                      </div>\n                    );\n                  }}\n                </FixedSizeList>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["PromLabel"],"mappings":"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"}