@perses-dev/explore 0.49.0 → 0.50.0-rc.0

package/dist/components/ExploreToolbar/ExploreToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, Box, useTheme, useMediaQuery } from '@mui/material';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport React from 'react';\n\nexport interface ExploreToolbarProps {\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport const ExploreToolbar = (props: ExploreToolbarProps) => {\n  const { exploreTitleComponent } = props;\n\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const testId = 'explore-toolbar';\n\n  return (\n    <Stack data-testid={testId}>\n      <Box sx={{ display: 'flex', width: '100%' }}>\n        {exploreTitleComponent}\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          ml=\"auto\"\n          flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'}\n          justifyContent=\"end\"\n        >\n          <TimeRangeControls />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n};\n"],"names":["Stack","Box","useTheme","useMediaQuery","TimeRangeControls","React","ExploreToolbar","props","exploreTitleComponent","isBiggerThanLg","breakpoints","up","testId","data-testid","sx","display","width","direction","spacing","ml","flexWrap","justifyContent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,OAAOC,WAAW,QAAQ;AAM1B,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,iBAAiBN,cAAcD,WAAWQ,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAMC,SAAS;IAEf,qBACE,KAACZ;QAAMa,eAAaD;kBAClB,cAAA,MAACX;YAAIa,IAAI;gBAAEC,SAAS;gBAAQC,OAAO;YAAO;;gBACvCR;8BACD,KAACR;oBACCiB,WAAU;oBACVC,SAAS;oBACTC,IAAG;oBACHC,UAAUX,iBAAiB,WAAW;oBACtCY,gBAAe;8BAEf,cAAA,KAACjB;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, Box, useTheme, useMediaQuery } from '@mui/material';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport React, { ReactElement } from 'react';\n\nexport interface ExploreToolbarProps {\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport const ExploreToolbar = (props: ExploreToolbarProps): ReactElement => {\n  const { exploreTitleComponent } = props;\n\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const testId = 'explore-toolbar';\n\n  return (\n    <Stack data-testid={testId}>\n      <Box sx={{ display: 'flex', width: '100%' }}>\n        {exploreTitleComponent}\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          ml=\"auto\"\n          flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'}\n          justifyContent=\"end\"\n        >\n          <TimeRangeControls />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n};\n"],"names":["Stack","Box","useTheme","useMediaQuery","TimeRangeControls","React","ExploreToolbar","props","exploreTitleComponent","isBiggerThanLg","breakpoints","up","testId","data-testid","sx","display","width","direction","spacing","ml","flexWrap","justifyContent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,OAAOC,WAA6B,QAAQ;AAM5C,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,iBAAiBN,cAAcD,WAAWQ,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAMC,SAAS;IAEf,qBACE,KAACZ;QAAMa,eAAaD;kBAClB,cAAA,MAACX;YAAIa,IAAI;gBAAEC,SAAS;gBAAQC,OAAO;YAAO;;gBACvCR;8BACD,KAACR;oBACCiB,WAAU;oBACVC,SAAS;oBACTC,IAAG;oBACHC,UAAUX,iBAAiB,WAAW;oBACtCY,gBAAe;8BAEf,cAAA,KAACjB;;;;;AAKX,EAAE"}

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts

@@ -1,30 +1,31 @@
 import { StackProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
 import { LabelFilter, Settings } from './types';
 export interface SettingsMenuProps {
     value: Settings;
     onChange: (value: Settings) => void;
 }
-export declare function SettingsMenu({ value, onChange }: SettingsMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsMenu({ value, onChange }: SettingsMenuProps): ReactElement;
 export interface MetricNameExplorerProps extends StackProps {
     datasource: DatasourceSelector;
     filters: LabelFilter[];
     isMetadataEnabled?: boolean;
     onExplore?: (metricName: string) => void;
 }
-export declare function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricNameExplorerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricNameExplorerProps): ReactElement;
 export interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {
     value: {
         datasource: DatasourceSelector;
         filters: LabelFilter[];
-        exploredMetric: string | undefined;
+        exploredMetric?: string;
     };
     onChange: ({ datasource, filters, exploredMetric, }: {
         datasource: DatasourceSelector;
         filters: LabelFilter[];
-        exploredMetric: string | undefined;
+        exploredMetric?: string;
     }) => void;
     onExplore?: (metricName: string) => void;
 }
-export declare function PrometheusMetricsFinder({ value: { datasource, filters, exploredMetric }, onChange, onExplore, ...props }: PrometheusMetricsFinderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrometheusMetricsFinder({ value: { datasource, filters, exploredMetric }, onChange, onExplore, ...props }: PrometheusMetricsFinderProps): ReactElement;
 //# sourceMappingURL=PrometheusMetricsFinder.d.ts.map

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EASL,UAAU,EAGX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA2BlE;AAED,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChF,KAAK,EAAE;QACL,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE,CAAC,EACT,UAAU,EACV,OAAO,EACP,cAAc,GACf,EAAE;QACD,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;KACpC,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EAAE,EAAE,UAAyB,EAAE,OAAY,EAAE,cAAc,EAAE,EAClE,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAiF9B"}
+{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAc,EAAc,YAAY,EAAqB,MAAM,OAAO,CAAC;AAO3E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAmCjF;AAED,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,YAAY,CA4CxC;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChF,KAAK,EAAE;QACL,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,EAAE,CAAC,EACT,UAAU,EACV,OAAO,EACP,cAAc,GACf,EAAE;QACD,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EAAE,EAAE,UAAyB,EAAE,OAAY,EAAE,cAAc,EAAE,EAClE,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,GAAG,YAAY,CAkF7C"}

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -11,12 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Checkbox, CircularProgress, FormControlLabel, IconButton, Menu, MenuItem, Stack, useMediaQuery, useTheme } from '@mui/material';
+import { Button, Checkbox, CircularProgress, FormControlLabel, IconButton, InputAdornment, Menu, MenuItem, Stack, TextField, useMediaQuery, useTheme } from '@mui/material';
 import { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';
-import { useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';
 import CogIcon from 'mdi-material-ui/Cog';
 import { Link as RouterLink } from 'react-router-dom';
+import { Fuzzy } from '@nexucis/fuzzy';
+import Magnify from 'mdi-material-ui/Magnify';
 import { useExplorerQueryParams } from '../ExploreManager/query-params';
 import { FinderFilters } from './filter/FinderFilters';
 import { MetricList } from './display/list/MetricList';
@@ -40,28 +42,60 @@ export function SettingsMenu({ value, onChange }) {
                 onClick: handleClick,
                 children: /*#__PURE__*/ _jsx(CogIcon, {})
             }),
-            /*#__PURE__*/ _jsx(Menu, {
+            /*#__PURE__*/ _jsxs(Menu, {
                 id: "finder-settings-menu",
                 anchorEl: anchorEl,
                 open: open,
                 onClose: handleClose,
-                children: /*#__PURE__*/ _jsx(MenuItem, {
-                    onClick: (e)=>e.preventDefault(),
-                    children: /*#__PURE__*/ _jsx(FormControlLabel, {
-                        control: /*#__PURE__*/ _jsx(Checkbox, {}),
-                        label: "Enable Metadata",
-                        checked: value.isMetadataEnabled,
-                        onClick: ()=>onChange({
-                                isMetadataEnabled: !value.isMetadataEnabled
-                            })
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: (e)=>e.preventDefault(),
+                        children: /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Checkbox, {}),
+                            label: "Enable Metadata",
+                            checked: value.isMetadataEnabled,
+                            onClick: ()=>onChange({
+                                    ...value,
+                                    isMetadataEnabled: !value.isMetadataEnabled
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: (e)=>e.preventDefault(),
+                        children: /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Checkbox, {}),
+                            label: "Enable Time Series Chart",
+                            checked: value.isPanelEnabled,
+                            onClick: ()=>onChange({
+                                    ...value,
+                                    isPanelEnabled: !value.isPanelEnabled
+                                })
+                        })
                     })
-                })
+                ]
             })
         ]
     });
 }
 export function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
     const { data, isLoading } = useLabelValues('__name__', filters, datasource);
+    const [search, setSearch] = useState('');
+    const fuzzy = useMemo(()=>new Fuzzy({
+            includeMatches: true,
+            excludedChars: [
+                ' '
+            ]
+        }), []);
+    const filteredResults = useMemo(()=>{
+        if (search && (data === null || data === void 0 ? void 0 : data.data)) {
+            return fuzzy.filter(search, data.data).sort((a, b)=>b.score - a.score);
+        }
+        return undefined;
+    }, [
+        data,
+        fuzzy,
+        search
+    ]);
     if (isLoading) {
         return /*#__PURE__*/ _jsx(Stack, {
             width: "100%",
@@ -73,13 +107,29 @@ export function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onE
         });
     }
     var _data_data;
-    return /*#__PURE__*/ _jsx(MetricList, {
-        metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
-        datasource: datasource,
-        filters: filters,
-        isMetadataEnabled: isMetadataEnabled,
-        onExplore: onExplore,
-        ...props
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                value: search,
+                onChange: (e)=>setSearch(e.target.value),
+                placeholder: "Search metric name...",
+                InputProps: {
+                    startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                        position: "start",
+                        children: /*#__PURE__*/ _jsx(Magnify, {})
+                    })
+                }
+            }),
+            /*#__PURE__*/ _jsx(MetricList, {
+                metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
+                filteredResults: filteredResults,
+                datasource: datasource,
+                filters: filters,
+                isMetadataEnabled: isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
     });
 }
 export function PrometheusMetricsFinder({ value: { datasource = DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
@@ -170,6 +220,7 @@ export function PrometheusMetricsFinder({ value: { datasource = DEFAULT_PROM, fi
                 datasource: datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM,
                 filters: filteredFilters,
                 isMetadataEnabled: settings.isMetadataEnabled,
+                isPanelEnabled: settings.isPanelEnabled,
                 onFiltersChange: setFilters,
                 onExplore: onExplore
             }) : /*#__PURE__*/ _jsx(MetricNameExplorer, {

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Button,\n  Checkbox,\n  CircularProgress,\n  FormControlLabel,\n  IconButton,\n  Menu,\n  MenuItem,\n  Stack,\n  StackProps,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport { MouseEvent, useMemo, useState } from 'react';\nimport ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';\nimport CogIcon from 'mdi-material-ui/Cog';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useExplorerQueryParams } from '../ExploreManager/query-params';\nimport { LabelFilter, Settings } from './types';\nimport { FinderFilters } from './filter/FinderFilters';\nimport { MetricList } from './display/list/MetricList';\nimport { MetricOverview } from './overview/MetricOverview';\nimport { useLabelValues } from './utils';\n\nconst PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';\n\nexport interface SettingsMenuProps {\n  value: Settings;\n  onChange: (value: Settings) => void;\n}\n\nexport function SettingsMenu({ value, onChange }: SettingsMenuProps) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <IconButton aria-label=\"settings\" size=\"large\" onClick={handleClick}>\n        <CogIcon />\n      </IconButton>\n      <Menu id=\"finder-settings-menu\" anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Metadata\"\n            checked={value.isMetadataEnabled}\n            onClick={() => onChange({ isMetadataEnabled: !value.isMetadataEnabled })}\n          />\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n\nexport interface MetricNameExplorerProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricNameExplorer({\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricNameExplorerProps) {\n  const { data, isLoading } = useLabelValues('__name__', filters, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filters}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {\n  value: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric: string | undefined;\n  };\n  onChange: ({\n    datasource,\n    filters,\n    exploredMetric,\n  }: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric: string | undefined;\n  }) => void;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function PrometheusMetricsFinder({\n  value: { datasource = DEFAULT_PROM, filters = [], exploredMetric },\n  onChange,\n  onExplore,\n  ...props\n}: PrometheusMetricsFinderProps) {\n  const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);\n  const [settings, setSettings] = useState<Settings>(\n    settingsStored ? JSON.parse(settingsStored) : { isMetadataEnabled: true }\n  );\n\n  function handleSettingsUpdate(value: Settings) {\n    setSettings(value);\n    localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));\n  }\n\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  // Remove duplicated filters and filters without label or labelValues\n  const filteredFilters: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label && filter.labelValues.length > 0);\n  }, [filters]);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: undefined },\n  });\n\n  function setDatasource(value: DatasourceSelector) {\n    onChange({ datasource: value, filters, exploredMetric });\n  }\n\n  function setFilters(value: LabelFilter[]) {\n    onChange({ datasource, filters: value, exploredMetric });\n  }\n\n  return (\n    <Stack {...props} gap={1}>\n      <Stack direction={isMobileSize ? 'column' : 'row'} gap={2} justifyContent=\"space-between\">\n        <FinderFilters\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filters ?? []}\n          filteredFilters={filteredFilters}\n          onDatasourceChange={setDatasource}\n          onFiltersChange={setFilters}\n        />\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {exploredMetric && (\n            <Button\n              variant=\"contained\"\n              aria-label=\"back to metric explorer\"\n              startIcon={<ArrowLeftIcon />}\n              component={RouterLink}\n              to={`?${searchParams}`}\n            >\n              Back\n            </Button>\n          )}\n          <Stack\n            direction=\"row\"\n            sx={{ width: isMobileSize ? '100%' : 'unset' }}\n            justifyContent={isMobileSize ? 'end' : 'unset'}\n            alignItems=\"center\"\n          >\n            <SettingsMenu value={settings} onChange={handleSettingsUpdate} />\n          </Stack>\n        </Stack>\n      </Stack>\n      {exploredMetric ? (\n        <MetricOverview\n          metricName={exploredMetric}\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          onFiltersChange={setFilters}\n          onExplore={onExplore}\n        />\n      ) : (\n        <MetricNameExplorer\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Checkbox","CircularProgress","FormControlLabel","IconButton","Menu","MenuItem","Stack","useMediaQuery","useTheme","DEFAULT_PROM","useMemo","useState","ArrowLeftIcon","CogIcon","Link","RouterLink","useExplorerQueryParams","FinderFilters","MetricList","MetricOverview","useLabelValues","PERSES_METRICS_FINDER_SETTINGS","SettingsMenu","value","onChange","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleClose","aria-label","size","onClick","id","onClose","e","preventDefault","control","label","checked","isMetadataEnabled","MetricNameExplorer","datasource","filters","onExplore","props","data","isLoading","width","sx","alignItems","justifyContent","metricNames","PrometheusMetricsFinder","exploredMetric","settingsStored","localStorage","getItem","settings","setSettings","JSON","parse","handleSettingsUpdate","setItem","stringify","isMobileSize","breakpoints","down","filteredFilters","filter","labelValues","length","searchParams","tab","undefined","setDatasource","setFilters","gap","direction","onDatasourceChange","onFiltersChange","variant","startIcon","component","to","metricName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,MAAM,EACNC,QAAQ,EACRC,gBAAgB,EAChBC,gBAAgB,EAChBC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,KAAK,EAELC,aAAa,EACbC,QAAQ,QACH,gBAAgB;AAEvB,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAAqBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACtD,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,aAAa,sBAAsB;AAC1C,SAASC,QAAQC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,sBAAsB,QAAQ,iCAAiC;AAExE,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,QAAQ,UAAU;AAEzC,MAAMC,iCAAiC;AAOvC,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAqB;IACjE,MAAM,CAACC,UAAUC,YAAY,GAAGf,SAA6B;IAC7D,MAAMgB,OAAOC,QAAQH;IACrB,MAAMI,cAAc,CAACC;QACnBJ,YAAYI,MAAMC,aAAa;IACjC;IACA,MAAMC,cAAc;QAClBN,YAAY;IACd;IAEA,qBACE;;0BACE,KAACvB;gBAAW8B,cAAW;gBAAWC,MAAK;gBAAQC,SAASN;0BACtD,cAAA,KAAChB;;0BAEH,KAACT;gBAAKgC,IAAG;gBAAuBX,UAAUA;gBAAUE,MAAMA;gBAAMU,SAASL;0BACvE,cAAA,KAAC3B;oBAAS8B,SAAS,CAACG,IAAMA,EAAEC,cAAc;8BACxC,cAAA,KAACrC;wBACCsC,uBAAS,KAACxC;wBACVyC,OAAM;wBACNC,SAASnB,MAAMoB,iBAAiB;wBAChCR,SAAS,IAAMX,SAAS;gCAAEmB,mBAAmB,CAACpB,MAAMoB,iBAAiB;4BAAC;;;;;;AAMlF;AASA,OAAO,SAASC,mBAAmB,EACjCC,UAAU,EACVC,OAAO,EACPH,iBAAiB,EACjBI,SAAS,EACT,GAAGC,OACqB;IACxB,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAG9B,eAAe,YAAY0B,SAASD;IAEhE,IAAIK,WAAW;QACb,qBACE,KAAC5C;YAAM6C,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACrD;;IAGP;QAIiBgD;IAFjB,qBACE,KAAC/B;QACCqC,aAAaN,CAAAA,aAAAA,iBAAAA,2BAAAA,KAAMA,IAAI,cAAVA,wBAAAA,aAAc,EAAE;QAC7BJ,YAAYA;QACZC,SAASA;QACTH,mBAAmBA;QACnBI,WAAWA;QACV,GAAGC,KAAK;;AAGf;AAoBA,OAAO,SAASQ,wBAAwB,EACtCjC,OAAO,EAAEsB,aAAapC,YAAY,EAAEqC,UAAU,EAAE,EAAEW,cAAc,EAAE,EAClEjC,QAAQ,EACRuB,SAAS,EACT,GAAGC,OAC0B;IAC7B,MAAMU,iBAAiBC,aAAaC,OAAO,CAACvC;IAC5C,MAAM,CAACwC,UAAUC,YAAY,GAAGnD,SAC9B+C,iBAAiBK,KAAKC,KAAK,CAACN,kBAAkB;QAAEf,mBAAmB;IAAK;IAG1E,SAASsB,qBAAqB1C,KAAe;QAC3CuC,YAAYvC;QACZoC,aAAaO,OAAO,CAAC7C,gCAAgC0C,KAAKI,SAAS,CAAC5C;IACtE;IAEA,MAAM6C,eAAe7D,cAAcC,WAAW6D,WAAW,CAACC,IAAI,CAAC;IAE/D,qEAAqE;IACrE,MAAMC,kBAAiC7D,QAAQ;QAC7C,OAAOoC,QAAQ0B,MAAM,CAAC,CAACA,SAAWA,OAAO/B,KAAK,IAAI+B,OAAOC,WAAW,CAACC,MAAM,GAAG;IAChF,GAAG;QAAC5B;KAAQ;IAEZ,MAAM6B,eAAe3D,uBAAuB;QAC1CiC,MAAM;YAAE2B,KAAK;YAAU/B;YAAYC;YAASW,gBAAgBoB;QAAU;IACxE;IAEA,SAASC,cAAcvD,KAAyB;QAC9CC,SAAS;YAAEqB,YAAYtB;YAAOuB;YAASW;QAAe;IACxD;IAEA,SAASsB,WAAWxD,KAAoB;QACtCC,SAAS;YAAEqB;YAAYC,SAASvB;YAAOkC;QAAe;IACxD;IAEA,qBACE,MAACnD;QAAO,GAAG0C,KAAK;QAAEgC,KAAK;;0BACrB,MAAC1E;gBAAM2E,WAAWb,eAAe,WAAW;gBAAOY,KAAK;gBAAG1B,gBAAe;;kCACxE,KAACrC;wBACC4B,YAAYA,uBAAAA,wBAAAA,aAAcpC;wBAC1BqC,SAASA,oBAAAA,qBAAAA,UAAW,EAAE;wBACtByB,iBAAiBA;wBACjBW,oBAAoBJ;wBACpBK,iBAAiBJ;;kCAEnB,MAACzE;wBAAM2E,WAAU;wBAAMD,KAAK;wBAAG3B,YAAW;;4BACvCI,gCACC,KAAC1D;gCACCqF,SAAQ;gCACRnD,cAAW;gCACXoD,yBAAW,KAACzE;gCACZ0E,WAAWvE;gCACXwE,IAAI,CAAC,CAAC,EAAEZ,aAAa,CAAC;0CACvB;;0CAIH,KAACrE;gCACC2E,WAAU;gCACV7B,IAAI;oCAAED,OAAOiB,eAAe,SAAS;gCAAQ;gCAC7Cd,gBAAgBc,eAAe,QAAQ;gCACvCf,YAAW;0CAEX,cAAA,KAAC/B;oCAAaC,OAAOsC;oCAAUrC,UAAUyC;;;;;;;YAI9CR,+BACC,KAACtC;gBACCqE,YAAY/B;gBACZZ,YAAYA,uBAAAA,wBAAAA,aAAcpC;gBAC1BqC,SAASyB;gBACT5B,mBAAmBkB,SAASlB,iBAAiB;gBAC7CwC,iBAAiBJ;gBACjBhC,WAAWA;+BAGb,KAACH;gBACCC,YAAYA,uBAAAA,wBAAAA,aAAcpC;gBAC1BqC,SAASyB;gBACT5B,mBAAmBkB,SAASlB,iBAAiB;gBAC7CI,WAAWA;;;;AAKrB"}
+{"version":3,"sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Button,\n  Checkbox,\n  CircularProgress,\n  FormControlLabel,\n  IconButton,\n  InputAdornment,\n  Menu,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport React, { MouseEvent, ReactElement, useMemo, useState } from 'react';\nimport ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';\nimport CogIcon from 'mdi-material-ui/Cog';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { Fuzzy, FuzzyMatchingInterval } from '@nexucis/fuzzy';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport { useExplorerQueryParams } from '../ExploreManager/query-params';\nimport { LabelFilter, Settings } from './types';\nimport { FinderFilters } from './filter/FinderFilters';\nimport { MetricList } from './display/list/MetricList';\nimport { MetricOverview } from './overview/MetricOverview';\nimport { useLabelValues } from './utils';\n\nconst PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';\n\nexport interface SettingsMenuProps {\n  value: Settings;\n  onChange: (value: Settings) => void;\n}\n\nexport function SettingsMenu({ value, onChange }: SettingsMenuProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <IconButton aria-label=\"settings\" size=\"large\" onClick={handleClick}>\n        <CogIcon />\n      </IconButton>\n      <Menu id=\"finder-settings-menu\" anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Metadata\"\n            checked={value.isMetadataEnabled}\n            onClick={() => onChange({ ...value, isMetadataEnabled: !value.isMetadataEnabled })}\n          />\n        </MenuItem>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Time Series Chart\"\n            checked={value.isPanelEnabled}\n            onClick={() => onChange({ ...value, isPanelEnabled: !value.isPanelEnabled })}\n          />\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n\nexport interface MetricNameExplorerProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricNameExplorer({\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricNameExplorerProps): ReactElement {\n  const { data, isLoading } = useLabelValues('__name__', filters, datasource);\n  const [search, setSearch] = useState('');\n  const fuzzy = useMemo(() => new Fuzzy({ includeMatches: true, excludedChars: [' '] }), []);\n\n  const filteredResults: Array<{ original: string; intervals?: FuzzyMatchingInterval[] }> | undefined = useMemo(() => {\n    if (search && data?.data) {\n      return fuzzy.filter(search, data.data).sort((a, b) => b.score - a.score);\n    }\n    return undefined;\n  }, [data, fuzzy, search]);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <Stack {...props}>\n      <TextField\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder=\"Search metric name...\"\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <Magnify />\n            </InputAdornment>\n          ),\n        }}\n      />\n      <MetricList\n        metricNames={data?.data ?? []}\n        filteredResults={filteredResults}\n        datasource={datasource}\n        filters={filters}\n        isMetadataEnabled={isMetadataEnabled}\n        onExplore={onExplore}\n      />\n    </Stack>\n  );\n}\n\nexport interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {\n  value: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\n  };\n  onChange: ({\n    datasource,\n    filters,\n    exploredMetric,\n  }: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\n  }) => void;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function PrometheusMetricsFinder({\n  value: { datasource = DEFAULT_PROM, filters = [], exploredMetric },\n  onChange,\n  onExplore,\n  ...props\n}: PrometheusMetricsFinderProps): ReactElement {\n  const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);\n  const [settings, setSettings] = useState<Settings>(\n    settingsStored ? JSON.parse(settingsStored) : { isMetadataEnabled: true }\n  );\n\n  function handleSettingsUpdate(value: Settings): void {\n    setSettings(value);\n    localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));\n  }\n\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  // Remove duplicated filters and filters without label or labelValues\n  const filteredFilters: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label && filter.labelValues.length > 0);\n  }, [filters]);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: undefined },\n  });\n\n  function setDatasource(value: DatasourceSelector): void {\n    onChange({ datasource: value, filters, exploredMetric });\n  }\n\n  function setFilters(value: LabelFilter[]): void {\n    onChange({ datasource, filters: value, exploredMetric });\n  }\n\n  return (\n    <Stack {...props} gap={1}>\n      <Stack direction={isMobileSize ? 'column' : 'row'} gap={2} justifyContent=\"space-between\">\n        <FinderFilters\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filters ?? []}\n          filteredFilters={filteredFilters}\n          onDatasourceChange={setDatasource}\n          onFiltersChange={setFilters}\n        />\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {exploredMetric && (\n            <Button\n              variant=\"contained\"\n              aria-label=\"back to metric explorer\"\n              startIcon={<ArrowLeftIcon />}\n              component={RouterLink}\n              to={`?${searchParams}`}\n            >\n              Back\n            </Button>\n          )}\n          <Stack\n            direction=\"row\"\n            sx={{ width: isMobileSize ? '100%' : 'unset' }}\n            justifyContent={isMobileSize ? 'end' : 'unset'}\n            alignItems=\"center\"\n          >\n            <SettingsMenu value={settings} onChange={handleSettingsUpdate} />\n          </Stack>\n        </Stack>\n      </Stack>\n      {exploredMetric ? (\n        <MetricOverview\n          metricName={exploredMetric}\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          isPanelEnabled={settings.isPanelEnabled}\n          onFiltersChange={setFilters}\n          onExplore={onExplore}\n        />\n      ) : (\n        <MetricNameExplorer\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Checkbox","CircularProgress","FormControlLabel","IconButton","InputAdornment","Menu","MenuItem","Stack","TextField","useMediaQuery","useTheme","DEFAULT_PROM","React","useMemo","useState","ArrowLeftIcon","CogIcon","Link","RouterLink","Fuzzy","Magnify","useExplorerQueryParams","FinderFilters","MetricList","MetricOverview","useLabelValues","PERSES_METRICS_FINDER_SETTINGS","SettingsMenu","value","onChange","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleClose","aria-label","size","onClick","id","onClose","e","preventDefault","control","label","checked","isMetadataEnabled","isPanelEnabled","MetricNameExplorer","datasource","filters","onExplore","props","data","isLoading","search","setSearch","fuzzy","includeMatches","excludedChars","filteredResults","filter","sort","a","b","score","undefined","width","sx","alignItems","justifyContent","target","placeholder","InputProps","startAdornment","position","metricNames","PrometheusMetricsFinder","exploredMetric","settingsStored","localStorage","getItem","settings","setSettings","JSON","parse","handleSettingsUpdate","setItem","stringify","isMobileSize","breakpoints","down","filteredFilters","labelValues","length","searchParams","tab","setDatasource","setFilters","gap","direction","onDatasourceChange","onFiltersChange","variant","startIcon","component","to","metricName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,MAAM,EACNC,QAAQ,EACRC,gBAAgB,EAChBC,gBAAgB,EAChBC,UAAU,EACVC,cAAc,EACdC,IAAI,EACJC,QAAQ,EACRC,KAAK,EAELC,SAAS,EACTC,aAAa,EACbC,QAAQ,QACH,gBAAgB;AAEvB,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,OAAOC,SAAmCC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC3E,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,aAAa,sBAAsB;AAC1C,SAASC,QAAQC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,KAAK,QAA+B,iBAAiB;AAC9D,OAAOC,aAAa,0BAA0B;AAC9C,SAASC,sBAAsB,QAAQ,iCAAiC;AAExE,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,QAAQ,UAAU;AAEzC,MAAMC,iCAAiC;AAOvC,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAqB;IACjE,MAAM,CAACC,UAAUC,YAAY,GAAGjB,SAA6B;IAC7D,MAAMkB,OAAOC,QAAQH;IACrB,MAAMI,cAAc,CAACC;QACnBJ,YAAYI,MAAMC,aAAa;IACjC;IACA,MAAMC,cAAc;QAClBN,YAAY;IACd;IAEA,qBACE;;0BACE,KAAC5B;gBAAWmC,cAAW;gBAAWC,MAAK;gBAAQC,SAASN;0BACtD,cAAA,KAAClB;;0BAEH,MAACX;gBAAKoC,IAAG;gBAAuBX,UAAUA;gBAAUE,MAAMA;gBAAMU,SAASL;;kCACvE,KAAC/B;wBAASkC,SAAS,CAACG,IAAMA,EAAEC,cAAc;kCACxC,cAAA,KAAC1C;4BACC2C,uBAAS,KAAC7C;4BACV8C,OAAM;4BACNC,SAASnB,MAAMoB,iBAAiB;4BAChCR,SAAS,IAAMX,SAAS;oCAAE,GAAGD,KAAK;oCAAEoB,mBAAmB,CAACpB,MAAMoB,iBAAiB;gCAAC;;;kCAGpF,KAAC1C;wBAASkC,SAAS,CAACG,IAAMA,EAAEC,cAAc;kCACxC,cAAA,KAAC1C;4BACC2C,uBAAS,KAAC7C;4BACV8C,OAAM;4BACNC,SAASnB,MAAMqB,cAAc;4BAC7BT,SAAS,IAAMX,SAAS;oCAAE,GAAGD,KAAK;oCAAEqB,gBAAgB,CAACrB,MAAMqB,cAAc;gCAAC;;;;;;;AAMtF;AASA,OAAO,SAASC,mBAAmB,EACjCC,UAAU,EACVC,OAAO,EACPJ,iBAAiB,EACjBK,SAAS,EACT,GAAGC,OACqB;IACxB,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAG/B,eAAe,YAAY2B,SAASD;IAChE,MAAM,CAACM,QAAQC,UAAU,GAAG5C,SAAS;IACrC,MAAM6C,QAAQ9C,QAAQ,IAAM,IAAIM,MAAM;YAAEyC,gBAAgB;YAAMC,eAAe;gBAAC;aAAI;QAAC,IAAI,EAAE;IAEzF,MAAMC,kBAAgGjD,QAAQ;QAC5G,IAAI4C,WAAUF,iBAAAA,2BAAAA,KAAMA,IAAI,GAAE;YACxB,OAAOI,MAAMI,MAAM,CAACN,QAAQF,KAAKA,IAAI,EAAES,IAAI,CAAC,CAACC,GAAGC,IAAMA,EAAEC,KAAK,GAAGF,EAAEE,KAAK;QACzE;QACA,OAAOC;IACT,GAAG;QAACb;QAAMI;QAAOF;KAAO;IAExB,IAAID,WAAW;QACb,qBACE,KAACjD;YAAM8D,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACvE;;IAGP;QAiBmBsD;IAfnB,qBACE,MAAChD;QAAO,GAAG+C,KAAK;;0BACd,KAAC9C;gBACCoB,OAAO6B;gBACP5B,UAAU,CAACc,IAAMe,UAAUf,EAAE8B,MAAM,CAAC7C,KAAK;gBACzC8C,aAAY;gBACZC,YAAY;oBACVC,8BACE,KAACxE;wBAAeyE,UAAS;kCACvB,cAAA,KAACzD;;gBAGP;;0BAEF,KAACG;gBACCuD,aAAavB,CAAAA,aAAAA,iBAAAA,2BAAAA,KAAMA,IAAI,cAAVA,wBAAAA,aAAc,EAAE;gBAC7BO,iBAAiBA;gBACjBX,YAAYA;gBACZC,SAASA;gBACTJ,mBAAmBA;gBACnBK,WAAWA;;;;AAInB;AAoBA,OAAO,SAAS0B,wBAAwB,EACtCnD,OAAO,EAAEuB,aAAaxC,YAAY,EAAEyC,UAAU,EAAE,EAAE4B,cAAc,EAAE,EAClEnD,QAAQ,EACRwB,SAAS,EACT,GAAGC,OAC0B;IAC7B,MAAM2B,iBAAiBC,aAAaC,OAAO,CAACzD;IAC5C,MAAM,CAAC0D,UAAUC,YAAY,GAAGvE,SAC9BmE,iBAAiBK,KAAKC,KAAK,CAACN,kBAAkB;QAAEjC,mBAAmB;IAAK;IAG1E,SAASwC,qBAAqB5D,KAAe;QAC3CyD,YAAYzD;QACZsD,aAAaO,OAAO,CAAC/D,gCAAgC4D,KAAKI,SAAS,CAAC9D;IACtE;IAEA,MAAM+D,eAAelF,cAAcC,WAAWkF,WAAW,CAACC,IAAI,CAAC;IAE/D,qEAAqE;IACrE,MAAMC,kBAAiCjF,QAAQ;QAC7C,OAAOuC,QAAQW,MAAM,CAAC,CAACA,SAAWA,OAAOjB,KAAK,IAAIiB,OAAOgC,WAAW,CAACC,MAAM,GAAG;IAChF,GAAG;QAAC5C;KAAQ;IAEZ,MAAM6C,eAAe5E,uBAAuB;QAC1CkC,MAAM;YAAE2C,KAAK;YAAU/C;YAAYC;YAAS4B,gBAAgBZ;QAAU;IACxE;IAEA,SAAS+B,cAAcvE,KAAyB;QAC9CC,SAAS;YAAEsB,YAAYvB;YAAOwB;YAAS4B;QAAe;IACxD;IAEA,SAASoB,WAAWxE,KAAoB;QACtCC,SAAS;YAAEsB;YAAYC,SAASxB;YAAOoD;QAAe;IACxD;IAEA,qBACE,MAACzE;QAAO,GAAG+C,KAAK;QAAE+C,KAAK;;0BACrB,MAAC9F;gBAAM+F,WAAWX,eAAe,WAAW;gBAAOU,KAAK;gBAAG7B,gBAAe;;kCACxE,KAAClD;wBACC6B,YAAYA,uBAAAA,wBAAAA,aAAcxC;wBAC1ByC,SAASA,oBAAAA,qBAAAA,UAAW,EAAE;wBACtB0C,iBAAiBA;wBACjBS,oBAAoBJ;wBACpBK,iBAAiBJ;;kCAEnB,MAAC7F;wBAAM+F,WAAU;wBAAMD,KAAK;wBAAG9B,YAAW;;4BACvCS,gCACC,KAACjF;gCACC0G,SAAQ;gCACRnE,cAAW;gCACXoE,yBAAW,KAAC3F;gCACZ4F,WAAWzF;gCACX0F,IAAI,CAAC,CAAC,EAAEX,aAAa,CAAC;0CACvB;;0CAIH,KAAC1F;gCACC+F,WAAU;gCACVhC,IAAI;oCAAED,OAAOsB,eAAe,SAAS;gCAAQ;gCAC7CnB,gBAAgBmB,eAAe,QAAQ;gCACvCpB,YAAW;0CAEX,cAAA,KAAC5C;oCAAaC,OAAOwD;oCAAUvD,UAAU2D;;;;;;;YAI9CR,+BACC,KAACxD;gBACCqF,YAAY7B;gBACZ7B,YAAYA,uBAAAA,wBAAAA,aAAcxC;gBAC1ByC,SAAS0C;gBACT9C,mBAAmBoC,SAASpC,iBAAiB;gBAC7CC,gBAAgBmC,SAASnC,cAAc;gBACvCuD,iBAAiBJ;gBACjB/C,WAAWA;+BAGb,KAACH;gBACCC,YAAYA,uBAAAA,wBAAAA,aAAcxC;gBAC1ByC,SAAS0C;gBACT9C,mBAAmBoC,SAASpC,iBAAiB;gBAC7CK,WAAWA;;;;AAKrB"}

package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts

@@ -1,3 +1,4 @@
 import { ChipProps } from '@mui/material';
-export declare function MetricChip({ label, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+import { ReactElement } from 'react';
+export declare function MetricChip({ label, ...props }: ChipProps): ReactElement;
 //# sourceMappingURL=MetricChip.d.ts.map

package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricChip.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,SAAS,EAAE,MAAM,eAAe,CAAC;AAEhD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAexD"}
+{"version":3,"file":"MetricChip.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,SAAS,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG,YAAY,CAevE"}

package/dist/components/PrometheusMetricsFinder/display/MetricChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Chip, ChipProps } from '@mui/material';\n\nexport function MetricChip({ label, ...props }: ChipProps) {\n  if (label === 'gauge') {\n    return <Chip label={label} color=\"success\" {...props} />;\n  }\n  if (label === 'counter') {\n    return <Chip label={label} color=\"primary\" {...props} />;\n  }\n  if (label === 'histogram') {\n    return <Chip label={label} color=\"warning\" {...props} />;\n  }\n  if (label === 'summary') {\n    return <Chip label={label} color=\"secondary\" {...props} />;\n  }\n\n  return <Chip label={label} sx={{ fontStyle: label === 'unknown' ? 'italic' : 'initial' }} {...props} />;\n}\n"],"names":["Chip","MetricChip","label","props","color","sx","fontStyle"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,QAAmB,gBAAgB;AAEhD,OAAO,SAASC,WAAW,EAAEC,KAAK,EAAE,GAAGC,OAAkB;IACvD,IAAID,UAAU,SAAS;QACrB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,aAAa;QACzB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAa,GAAGD,KAAK;;IACxD;IAEA,qBAAO,KAACH;QAAKE,OAAOA;QAAOG,IAAI;YAAEC,WAAWJ,UAAU,YAAY,WAAW;QAAU;QAAI,GAAGC,KAAK;;AACrG"}
+{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Chip, ChipProps } from '@mui/material';\nimport { ReactElement } from 'react';\n\nexport function MetricChip({ label, ...props }: ChipProps): ReactElement {\n  if (label === 'gauge') {\n    return <Chip label={label} color=\"success\" {...props} />;\n  }\n  if (label === 'counter') {\n    return <Chip label={label} color=\"primary\" {...props} />;\n  }\n  if (label === 'histogram') {\n    return <Chip label={label} color=\"warning\" {...props} />;\n  }\n  if (label === 'summary') {\n    return <Chip label={label} color=\"secondary\" {...props} />;\n  }\n\n  return <Chip label={label} sx={{ fontStyle: label === 'unknown' ? 'italic' : 'initial' }} {...props} />;\n}\n"],"names":["Chip","MetricChip","label","props","color","sx","fontStyle"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,QAAmB,gBAAgB;AAGhD,OAAO,SAASC,WAAW,EAAEC,KAAK,EAAE,GAAGC,OAAkB;IACvD,IAAID,UAAU,SAAS;QACrB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,aAAa;QACzB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAa,GAAGD,KAAK;;IACxD;IAEA,qBAAO,KAACH;QAAKE,OAAOA;QAAOG,IAAI;YAAEC,WAAWJ,UAAU,YAAY,WAAW;QAAU;QAAI,GAAGC,KAAK;;AACrG"}

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts

@@ -1,20 +1,27 @@
 import { DatasourceSelector } from '@perses-dev/core';
 import { StackProps } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
+import { FuzzyMatchingInterval } from '@nexucis/fuzzy';
 import { LabelFilter } from '../../types';
 export interface MetricRowProps {
+    children?: ReactNode;
     metricName: string;
     datasource: DatasourceSelector;
     filters: LabelFilter[];
     isMetadataEnabled?: boolean;
     onExplore?: (metricName: string) => void;
 }
-export declare function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }: MetricRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore, }: MetricRowProps): ReactElement;
 export interface MetricListProps extends StackProps {
     metricNames: string[];
+    filteredResults?: Array<{
+        original: string;
+        intervals?: FuzzyMatchingInterval[];
+    }>;
     datasource: DatasourceSelector;
     filters: LabelFilter[];
     isMetadataEnabled?: boolean;
     onExplore?: (metricName: string) => void;
 }
-export declare function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricListProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricListProps): ReactElement;
 //# sourceMappingURL=MetricList.d.ts.map

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricList.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAoC,UAAU,EAAyB,MAAM,eAAe,CAAC;AAIpG,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,cAAc,2CA4C1G;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAuBjB"}
+{"version":3,"file":"MetricList.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAoC,UAAU,EAAyB,MAAM,eAAe,CAAC;AAIpG,OAAc,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAChE,OAAO,EAAS,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,GACV,EAAE,cAAc,GAAG,YAAY,CA4C/B;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAA;KAAE,CAAC,CAAC;IACnF,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,eAAe,EACf,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,YAAY,CA0ChC"}

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.js

@@ -15,10 +15,12 @@ import { Button, Divider, Skeleton, Stack, TableCell, Typography } from '@mui/ma
 import { TableVirtuoso } from 'react-virtuoso';
 import { Link as RouterLink } from 'react-router-dom';
 import CompassIcon from 'mdi-material-ui/Compass';
+import React, { useMemo } from 'react';
+import { Fuzzy } from '@nexucis/fuzzy';
 import { useMetricMetadata } from '../../utils';
 import { useExplorerQueryParams } from '../../../ExploreManager/query-params';
 import { MetricChip } from '../MetricChip';
-export function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }) {
+export function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore }) {
     const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);
     const searchParams = useExplorerQueryParams({
         data: {
@@ -39,7 +41,7 @@ export function MetricRow({ metricName, datasource, filters, isMetadataEnabled,
                     sx: {
                         fontFamily: 'monospace'
                     },
-                    children: metricName
+                    children: children !== null && children !== void 0 ? children : metricName
                 })
             }),
             /*#__PURE__*/ _jsx(TableCell, {
@@ -89,7 +91,19 @@ export function MetricRow({ metricName, datasource, filters, isMetadataEnabled,
         ]
     });
 }
-export function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+export function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    const fuzzy = new Fuzzy();
+    const fuzzyMetrics = useMemo(()=>{
+        if (filteredResults) {
+            return filteredResults;
+        }
+        return metricNames.map((metricName)=>({
+                original: metricName
+            }));
+    }, [
+        filteredResults,
+        metricNames
+    ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         gap: 2,
         width: "100%",
@@ -104,14 +118,26 @@ export function MetricList({ metricNames, datasource, filters, isMetadataEnabled
                     height: '70vh',
                     width: '100%'
                 },
-                data: metricNames,
-                itemContent: (_, metricName)=>/*#__PURE__*/ _jsx(MetricRow, {
-                        metricName: metricName,
+                totalCount: fuzzyMetrics.length,
+                itemContent: (index)=>{
+                    var _fuzzyMetrics_index_intervals;
+                    return /*#__PURE__*/ _jsx(MetricRow, {
+                        metricName: fuzzyMetrics[index].original,
                         datasource: datasource,
                         filters: filters,
                         isMetadataEnabled: isMetadataEnabled,
-                        onExplore: onExplore
-                    })
+                        onExplore: onExplore,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            dangerouslySetInnerHTML: {
+                                __html: fuzzy.render(fuzzyMetrics[index].original, (_fuzzyMetrics_index_intervals = fuzzyMetrics[index].intervals) !== null && _fuzzyMetrics_index_intervals !== void 0 ? _fuzzyMetrics_index_intervals : [], {
+                                    pre: '<strong style="color:darkorange">',
+                                    post: '</strong>',
+                                    escapeHTML: true
+                                })
+                            }
+                        })
+                    });
+                }
             }),
             /*#__PURE__*/ _jsx(Stack, {
                 sx: {

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Button, Divider, Skeleton, Stack, StackProps, TableCell, Typography } from '@mui/material';\nimport { TableVirtuoso } from 'react-virtuoso';\nimport { Link as RouterLink } from 'react-router-dom';\nimport CompassIcon from 'mdi-material-ui/Compass';\nimport { LabelFilter } from '../../types';\nimport { useMetricMetadata } from '../../utils';\nimport { useExplorerQueryParams } from '../../../ExploreManager/query-params';\nimport { MetricChip } from '../MetricChip';\n\nexport interface MetricRowProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }: MetricRowProps) {\n  const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: metricName },\n  });\n\n  return (\n    <>\n      <TableCell style={{ width: '300px' }}>\n        <Typography sx={{ fontFamily: 'monospace' }}>{metricName}</Typography>\n      </TableCell>\n\n      <TableCell style={{ width: 115, textAlign: 'center' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"rounded\" width={75} />\n        ) : (\n          <MetricChip label={metadata?.type ?? 'unknown'} />\n        )}\n      </TableCell>\n      <TableCell style={{ width: '100%' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"text\" width={180} />\n        ) : (\n          <Typography sx={{ fontStyle: metadata?.help ? 'initial' : 'italic', minWidth: '30vw' }}>\n            {metadata ? metadata.help : 'unknown'}\n          </Typography>\n        )}\n      </TableCell>\n      <TableCell style={{ width: 140 }}>\n        <Button\n          aria-label={`explore metric ${metricName}`}\n          variant=\"contained\"\n          startIcon={<CompassIcon />}\n          style={{ textWrap: 'nowrap' }}\n          onClick={() => onExplore?.(metricName)}\n          component={RouterLink}\n          to={`?${searchParams}`}\n        >\n          Explore\n        </Button>\n      </TableCell>\n    </>\n  );\n}\n\nexport interface MetricListProps extends StackProps {\n  metricNames: string[];\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricList({\n  metricNames,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricListProps) {\n  return (\n    <Stack gap={2} width=\"100%\" divider={<Divider orientation=\"horizontal\" flexItem />} {...props}>\n      <TableVirtuoso\n        style={{ height: '70vh', width: '100%' }}\n        data={metricNames}\n        itemContent={(_, metricName) => (\n          <MetricRow\n            metricName={metricName}\n            datasource={datasource}\n            filters={filters}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={onExplore}\n          />\n        )}\n      />\n      <Stack sx={{ width: '100%' }} textAlign=\"end\">\n        <Typography data-testid=\"finder-total\">\n          Total: <strong>{metricNames.length}</strong> metrics\n        </Typography>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Skeleton","Stack","TableCell","Typography","TableVirtuoso","Link","RouterLink","CompassIcon","useMetricMetadata","useExplorerQueryParams","MetricChip","MetricRow","metricName","datasource","filters","isMetadataEnabled","onExplore","metadata","isLoading","searchParams","data","tab","exploredMetric","style","width","sx","fontFamily","textAlign","variant","label","type","fontStyle","help","minWidth","aria-label","startIcon","textWrap","onClick","component","to","MetricList","metricNames","props","gap","divider","orientation","flexItem","height","itemContent","_","data-testid","strong","length"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Button, Divider, Skeleton, Stack, StackProps, TableCell, Typography } from '@mui/material';\nimport { TableVirtuoso } from 'react-virtuoso';\nimport { Link as RouterLink } from 'react-router-dom';\nimport CompassIcon from 'mdi-material-ui/Compass';\nimport React, { ReactElement, ReactNode, useMemo } from 'react';\nimport { Fuzzy, FuzzyMatchingInterval } from '@nexucis/fuzzy';\nimport { LabelFilter } from '../../types';\nimport { useMetricMetadata } from '../../utils';\nimport { useExplorerQueryParams } from '../../../ExploreManager/query-params';\nimport { MetricChip } from '../MetricChip';\n\nexport interface MetricRowProps {\n  children?: ReactNode;\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricRow({\n  children,\n  metricName,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n}: MetricRowProps): ReactElement {\n  const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: metricName },\n  });\n\n  return (\n    <>\n      <TableCell style={{ width: '300px' }}>\n        <Typography sx={{ fontFamily: 'monospace' }}>{children ?? metricName}</Typography>\n      </TableCell>\n\n      <TableCell style={{ width: 115, textAlign: 'center' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"rounded\" width={75} />\n        ) : (\n          <MetricChip label={metadata?.type ?? 'unknown'} />\n        )}\n      </TableCell>\n      <TableCell style={{ width: '100%' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"text\" width={180} />\n        ) : (\n          <Typography sx={{ fontStyle: metadata?.help ? 'initial' : 'italic', minWidth: '30vw' }}>\n            {metadata ? metadata.help : 'unknown'}\n          </Typography>\n        )}\n      </TableCell>\n      <TableCell style={{ width: 140 }}>\n        <Button\n          aria-label={`explore metric ${metricName}`}\n          variant=\"contained\"\n          startIcon={<CompassIcon />}\n          style={{ textWrap: 'nowrap' }}\n          onClick={() => onExplore?.(metricName)}\n          component={RouterLink}\n          to={`?${searchParams}`}\n        >\n          Explore\n        </Button>\n      </TableCell>\n    </>\n  );\n}\n\nexport interface MetricListProps extends StackProps {\n  metricNames: string[];\n  filteredResults?: Array<{ original: string; intervals?: FuzzyMatchingInterval[] }>;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricList({\n  metricNames,\n  filteredResults,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricListProps): ReactElement {\n  const fuzzy = new Fuzzy();\n\n  const fuzzyMetrics: Array<{ original: string; intervals?: FuzzyMatchingInterval[] }> = useMemo(() => {\n    if (filteredResults) {\n      return filteredResults;\n    }\n    return metricNames.map((metricName) => ({ original: metricName }));\n  }, [filteredResults, metricNames]);\n\n  return (\n    <Stack gap={2} width=\"100%\" divider={<Divider orientation=\"horizontal\" flexItem />} {...props}>\n      <TableVirtuoso\n        style={{ height: '70vh', width: '100%' }}\n        totalCount={fuzzyMetrics.length}\n        itemContent={(index) => (\n          <MetricRow\n            metricName={fuzzyMetrics[index]!.original}\n            datasource={datasource}\n            filters={filters}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={onExplore}\n          >\n            <span\n              dangerouslySetInnerHTML={{\n                __html: fuzzy.render(fuzzyMetrics[index]!.original, fuzzyMetrics[index]!.intervals ?? [], {\n                  pre: '<strong style=\"color:darkorange\">',\n                  post: '</strong>',\n                  escapeHTML: true,\n                }),\n              }}\n            />\n          </MetricRow>\n        )}\n      />\n      <Stack sx={{ width: '100%' }} textAlign=\"end\">\n        <Typography data-testid=\"finder-total\">\n          Total: <strong>{metricNames.length}</strong> metrics\n        </Typography>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Skeleton","Stack","TableCell","Typography","TableVirtuoso","Link","RouterLink","CompassIcon","React","useMemo","Fuzzy","useMetricMetadata","useExplorerQueryParams","MetricChip","MetricRow","children","metricName","datasource","filters","isMetadataEnabled","onExplore","metadata","isLoading","searchParams","data","tab","exploredMetric","style","width","sx","fontFamily","textAlign","variant","label","type","fontStyle","help","minWidth","aria-label","startIcon","textWrap","onClick","component","to","MetricList","metricNames","filteredResults","props","fuzzy","fuzzyMetrics","map","original","gap","divider","orientation","flexItem","height","totalCount","length","itemContent","index","span","dangerouslySetInnerHTML","__html","render","intervals","pre","post","escapeHTML","data-testid","strong"],"mappings":"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"}

package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactElement } from 'react';
 import { DatasourceSelector } from '@perses-dev/core';
 import { LabelFilter } from '../types';
 export interface LabelFilterInputProps {
@@ -8,7 +8,7 @@ export interface LabelFilterInputProps {
     onChange: (next: LabelFilter) => void;
     onDelete: () => void;
 }
-export declare function LabelFilterInput({ datasource, value, filters, onChange, onDelete }: LabelFilterInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelFilterInput({ datasource, value, filters, onChange, onDelete, }: LabelFilterInputProps): ReactElement;
 export declare const ListboxComponent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
 export interface RawFilterInputProps {
     value: LabelFilter;
@@ -19,5 +19,5 @@ export interface RawFilterInputProps {
     onChange: (next: LabelFilter) => void;
     onDelete: () => void;
 }
-export declare function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete, }: RawFilterInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete, }: RawFilterInputProps): ReactElement;
 //# sourceMappingURL=FilterInputs.d.ts.map

package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAwBzG;AAGD,eAAO,MAAM,gBAAgB,+HAiC5B,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,2CAqGrB"}
+{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EACd,YAAY,EAKb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,YAAY,CAwBtC;AAGD,eAAO,MAAM,gBAAgB,+HAiC5B,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CAqGpC"}

package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n  datasource: DatasourceSelector;\n  value: LabelFilter;\n  filters: LabelFilter[];\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\n// TODO: fix when a filter is deleted => refresh data\nexport function LabelFilterInput({ datasource, value, filters, onChange, onDelete }: LabelFilterInputProps) {\n  const filtersWithoutCurrent = useMemo(\n    () => filters.filter((filter) => filter.label !== value.label),\n    [filters, value.label]\n  );\n\n  const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n    value.label,\n    filtersWithoutCurrent,\n    datasource\n  );\n\n  return (\n    <RawFilterInput\n      value={value}\n      labelOptions={labelOptions?.data ?? []}\n      labelValuesOptions={labelValuesOptions?.data ?? []}\n      isLabelOptionsLoading={isLabelOptionsLoading}\n      isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n      onChange={onChange}\n      onDelete={onDelete}\n    />\n  );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n  ({ children, ...rest }, ref) => {\n    const data = children as ReactElement[];\n    const localRef = useRef<string>('500px');\n\n    const [height, setHeight] = useState(0);\n\n    return (\n      <ul\n        style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n        ref={(reference) => {\n          const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n          if (maxHeight && maxHeight !== localRef.current) {\n            localRef.current = maxHeight;\n          }\n\n          if (typeof ref === 'function') {\n            ref(reference);\n          }\n        }}\n        {...rest}\n      >\n        <Virtuoso\n          style={{ height: localRef.current, padding: '10px 0' }}\n          data={data}\n          totalListHeightChanged={setHeight}\n          itemContent={(index, child) => {\n            return cloneElement(child, { index, title: child.props.children });\n          }}\n        />\n      </ul>\n    );\n  }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n  value: LabelFilter;\n  labelOptions?: string[];\n  labelValuesOptions?: string[];\n  isLabelOptionsLoading?: boolean;\n  isLabelValuesOptionsLoading?: boolean;\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function RawFilterInput({\n  value,\n  labelOptions,\n  labelValuesOptions,\n  isLabelOptionsLoading,\n  isLabelValuesOptionsLoading,\n  onChange,\n  onDelete,\n}: RawFilterInputProps) {\n  const [isEditingLabelName, setIsEditingLabelName] = useState(value.labelValues.length === 0);\n  const [labelName, setLabelName] = useState(value.label);\n\n  function handleLabelConfirmation() {\n    setIsEditingLabelName(false);\n    onChange({ label: labelName, labelValues: value.labelValues, operator: value.operator });\n  }\n\n  function handleKeyPress(event: { key: string }) {\n    if (isEditingLabelName && event.key === 'Enter') {\n      handleLabelConfirmation();\n    }\n  }\n\n  return (\n    <>\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 250, display: isEditingLabelName ? 'block' : 'none' }}\n        ListboxComponent={ListboxComponent}\n        loading={isLabelOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label=\"Label Name\"\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              InputProps={{\n                ...params.InputProps,\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    {isLabelOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                    <IconButton aria-label=\"validate label name\" onClick={() => handleLabelConfirmation()} edge=\"end\">\n                      <CheckIcon />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          );\n        }}\n        onKeyDown={handleKeyPress}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          setLabelName(newValue ?? '');\n        }}\n      />\n      <Autocomplete\n        freeSolo\n        multiple={value.operator === '=~' || value.operator === '!~'}\n        limitTags={1}\n        disableClearable\n        options={labelValuesOptions ?? []}\n        value={value.labelValues}\n        ListboxComponent={ListboxComponent}\n        sx={{ minWidth: 250, display: isEditingLabelName ? 'none' : 'block' }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.label}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              InputProps={{\n                ...params.InputProps,\n                startAdornment: (\n                  <>\n                    <InputAdornment position=\"start\">{value.operator}</InputAdornment>\n                    {params.InputProps.startAdornment}\n                  </>\n                ),\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                    <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n                      <DeleteIcon />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          );\n        }}\n        onChange={(_: SyntheticEvent, newValue: string[] | string | null) => {\n          if (typeof newValue === 'string') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","TextField","CheckIcon","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","isEditingLabelName","setIsEditingLabelName","labelValues","length","labelName","setLabelName","handleLabelConfirmation","operator","handleKeyPress","event","key","freeSolo","disableClearable","options","sx","minWidth","display","loading","renderInput","params","variant","fullWidth","size","InputProps","endAdornment","position","color","aria-label","onClick","edge","onKeyDown","onInputChange","_","newValue","multiple","limitTags","startAdornment","Array","isArray"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n  datasource: DatasourceSelector;\n  value: LabelFilter;\n  filters: LabelFilter[];\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\n// TODO: fix when a filter is deleted => refresh data\nexport function LabelFilterInput({\n  datasource,\n  value,\n  filters,\n  onChange,\n  onDelete,\n}: LabelFilterInputProps): ReactElement {\n  const filtersWithoutCurrent = useMemo(\n    () => filters.filter((filter) => filter.label !== value.label),\n    [filters, value.label]\n  );\n\n  const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n    value.label,\n    filtersWithoutCurrent,\n    datasource\n  );\n\n  return (\n    <RawFilterInput\n      value={value}\n      labelOptions={labelOptions?.data ?? []}\n      labelValuesOptions={labelValuesOptions?.data ?? []}\n      isLabelOptionsLoading={isLabelOptionsLoading}\n      isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n      onChange={onChange}\n      onDelete={onDelete}\n    />\n  );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n  ({ children, ...rest }, ref) => {\n    const data = children as ReactElement[];\n    const localRef = useRef<string>('500px');\n\n    const [height, setHeight] = useState(0);\n\n    return (\n      <ul\n        style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n        ref={(reference) => {\n          const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n          if (maxHeight && maxHeight !== localRef.current) {\n            localRef.current = maxHeight;\n          }\n\n          if (typeof ref === 'function') {\n            ref(reference);\n          }\n        }}\n        {...rest}\n      >\n        <Virtuoso\n          style={{ height: localRef.current, padding: '10px 0' }}\n          data={data}\n          totalListHeightChanged={setHeight}\n          itemContent={(index, child) => {\n            return cloneElement(child, { index, title: child.props.children });\n          }}\n        />\n      </ul>\n    );\n  }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n  value: LabelFilter;\n  labelOptions?: string[];\n  labelValuesOptions?: string[];\n  isLabelOptionsLoading?: boolean;\n  isLabelValuesOptionsLoading?: boolean;\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function RawFilterInput({\n  value,\n  labelOptions,\n  labelValuesOptions,\n  isLabelOptionsLoading,\n  isLabelValuesOptionsLoading,\n  onChange,\n  onDelete,\n}: RawFilterInputProps): ReactElement {\n  const [isEditingLabelName, setIsEditingLabelName] = useState(value.labelValues.length === 0);\n  const [labelName, setLabelName] = useState(value.label);\n\n  function handleLabelConfirmation(): void {\n    setIsEditingLabelName(false);\n    onChange({ label: labelName, labelValues: value.labelValues, operator: value.operator });\n  }\n\n  function handleKeyPress(event: { key: string }): void {\n    if (isEditingLabelName && event.key === 'Enter') {\n      handleLabelConfirmation();\n    }\n  }\n\n  return (\n    <>\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 250, display: isEditingLabelName ? 'block' : 'none' }}\n        ListboxComponent={ListboxComponent}\n        loading={isLabelOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label=\"Label Name\"\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              InputProps={{\n                ...params.InputProps,\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    {isLabelOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                    <IconButton aria-label=\"validate label name\" onClick={() => handleLabelConfirmation()} edge=\"end\">\n                      <CheckIcon />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          );\n        }}\n        onKeyDown={handleKeyPress}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          setLabelName(newValue ?? '');\n        }}\n      />\n      <Autocomplete\n        freeSolo\n        multiple={value.operator === '=~' || value.operator === '!~'}\n        limitTags={1}\n        disableClearable\n        options={labelValuesOptions ?? []}\n        value={value.labelValues}\n        ListboxComponent={ListboxComponent}\n        sx={{ minWidth: 250, display: isEditingLabelName ? 'none' : 'block' }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.label}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              InputProps={{\n                ...params.InputProps,\n                startAdornment: (\n                  <>\n                    <InputAdornment position=\"start\">{value.operator}</InputAdornment>\n                    {params.InputProps.startAdornment}\n                  </>\n                ),\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                    <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n                      <DeleteIcon />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          );\n        }}\n        onChange={(_, newValue) => {\n          if (typeof newValue === 'string') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","TextField","CheckIcon","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","isEditingLabelName","setIsEditingLabelName","labelValues","length","labelName","setLabelName","handleLabelConfirmation","operator","handleKeyPress","event","key","freeSolo","disableClearable","options","sx","minWidth","display","loading","renderInput","params","variant","fullWidth","size","InputProps","endAdornment","position","color","aria-label","onClick","edge","onKeyDown","onInputChange","_","newValue","multiple","limitTags","startAdornment","Array","isArray"],"mappings":"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"}

package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.d.ts

@@ -1,5 +1,6 @@
 import { StackProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
 import { LabelFilter } from '../types';
 export interface ExplorerFiltersProps extends StackProps {
     datasource: DatasourceSelector;
@@ -8,5 +9,5 @@ export interface ExplorerFiltersProps extends StackProps {
     onDatasourceChange: (next: DatasourceSelector) => void;
     onFiltersChange: (next: LabelFilter[]) => void;
 }
-export declare function FinderFilters({ datasource, filters, filteredFilters, onDatasourceChange, onFiltersChange, ...props }: ExplorerFiltersProps): import("react/jsx-runtime").JSX.Element;
+export declare function FinderFilters({ datasource, filters, filteredFilters, onDatasourceChange, onFiltersChange, ...props }: ExplorerFiltersProps): ReactElement;
 //# sourceMappingURL=FinderFilters.d.ts.map

package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FinderFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0C,UAAU,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA6CtB"}
+{"version":3,"file":"FinderFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0C,UAAU,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,YAAY,CA6CrC"}