@perses-dev/components 0.55.0-beta.8 → 0.55.0-beta.9

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.d.ts

@@ -0,0 +1,27 @@
+import type { Exemplar, Labels } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+import type { FormatOptions } from '../model/units';
+import type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';
+export interface ExemplarMetadataTooltipProps {
+    exemplar: Exemplar;
+    seriesLabels?: Labels;
+    /**
+     * CSS selector of the element the tooltip should be portaled into (e.g. `#dashboard`).
+     * Passed as-is to `document.querySelector`, so it must be a selector and not a bare element id.
+     */
+    containerId?: string;
+    format?: FormatOptions;
+    /**
+     * Position where the tooltip has been pinned, or null when it follows the mouse.
+     */
+    pinnedPos: CursorCoordinates | null;
+    enablePinning?: boolean;
+    onUnpinClick?: () => void;
+}
+/**
+ * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).
+ * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way
+ * the annotation tooltip works.
+ */
+export declare function ExemplarMetadataTooltip({ exemplar, seriesLabels, containerId, format, pinnedPos, enablePinning, onUnpinClick, }: ExemplarMetadataTooltipProps): ReactElement | null;
+//# sourceMappingURL=ExemplarMetadataTooltip.d.ts.map

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExemplarMetadataTooltip.d.ts","sourceRoot":"","sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAWpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,MAAM,EACN,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAwGpD"}

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box, Divider, IconButton, Portal, Stack, Typography } from "@mui/material";
+import Pin from "mdi-material-ui/Pin";
+import PinOutline from "mdi-material-ui/PinOutline";
+import { Fragment } from "react";
+import useResizeObserver from "use-resize-observer";
+import { useTimeZone } from "../context/TimeZoneProvider.js";
+import { formatValue } from "../model/units.js";
+import { assembleTransform, getTooltipStyles, PIN_TOOLTIP_HELP_TEXT, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, UNPIN_TOOLTIP_HELP_TEXT, useMousePosition } from "../TimeSeriesTooltip/index.js";
+/**
+ * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).
+ * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way
+ * the annotation tooltip works.
+ */ export function ExemplarMetadataTooltip({ exemplar, seriesLabels, containerId, format, pinnedPos, enablePinning = true, onUnpinClick }) {
+    const { formatWithUserTimeZone } = useTimeZone();
+    const mousePos = useMousePosition();
+    const { height, width, ref: tooltipRef } = useResizeObserver();
+    const isPinned = pinnedPos !== null;
+    if (!isPinned && mousePos === null) return null;
+    const containerElement = containerId ? document.querySelector(containerId) : undefined;
+    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+    // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.
+    const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);
+    const { labels, value, timestamp } = exemplar;
+    const formattedValue = formatValue(value, format);
+    const date = new Date(timestamp);
+    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+    // Only sections with content take part in the layout, so no divider is left dangling
+    // when a label set is empty.
+    const sections = [];
+    if (seriesLabels && Object.keys(seriesLabels).length > 0) {
+        sections.push({
+            key: 'series-labels',
+            content: /*#__PURE__*/ _jsx(LabelGrid, {
+                title: "Series labels",
+                labels: seriesLabels
+            })
+        });
+    }
+    if (Object.keys(labels).length > 0) {
+        sections.push({
+            key: 'exemplar-labels',
+            content: /*#__PURE__*/ _jsx(LabelGrid, {
+                title: "Exemplar labels",
+                labels: labels
+            })
+        });
+    }
+    sections.push({
+        key: 'value',
+        content: /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "overline",
+                    component: "div",
+                    children: "Value"
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    fontWeight: 700,
+                    children: formattedValue
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ _jsx(Portal, {
+        container: containerElement,
+        children: /*#__PURE__*/ _jsx(Box, {
+            ref: tooltipRef,
+            sx: (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight),
+            style: {
+                transform
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: (theme)=>({
+                                width: '100%',
+                                maxWidth: TOOLTIP_MAX_WIDTH,
+                                padding: theme.spacing(1.5, 2, 0.5, 2),
+                                backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,
+                                position: 'sticky',
+                                top: 0,
+                                left: 0
+                            }),
+                        children: [
+                            /*#__PURE__*/ _jsxs(Box, {
+                                sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingBottom: 0.5,
+                                    width: '100%'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        sx: {
+                                            flexGrow: 1,
+                                            minWidth: 0
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                sx: (theme)=>({
+                                                        color: theme.palette.common.white
+                                                    }),
+                                                children: formattedDate
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: /*#__PURE__*/ _jsx("strong", {
+                                                    children: formattedTime
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    enablePinning && /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        alignItems: "center",
+                                        sx: {
+                                            marginLeft: 1,
+                                            flexShrink: 0
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                sx: {
+                                                    marginRight: 0.5,
+                                                    fontSize: 11,
+                                                    verticalAlign: 'middle'
+                                                },
+                                                children: isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT
+                                            }),
+                                            isPinned ? /*#__PURE__*/ _jsx(IconButton, {
+                                                "aria-label": UNPIN_TOOLTIP_HELP_TEXT,
+                                                onClick: ()=>{
+                                                    if (onUnpinClick !== undefined) onUnpinClick();
+                                                },
+                                                sx: {
+                                                    padding: 0,
+                                                    color: 'inherit'
+                                                },
+                                                children: /*#__PURE__*/ _jsx(Pin, {
+                                                    sx: {
+                                                        fontSize: 16
+                                                    }
+                                                })
+                                            }) : /*#__PURE__*/ _jsx(PinOutline, {
+                                                sx: {
+                                                    fontSize: 16
+                                                }
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: (theme)=>({
+                                        width: '100%',
+                                        borderColor: theme.palette.grey['500']
+                                    })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 1,
+                        sx: (theme)=>({
+                                padding: theme.spacing(0.5, 2, 1.5, 2)
+                            }),
+                        children: sections.map((section, index)=>/*#__PURE__*/ _jsxs(Fragment, {
+                                children: [
+                                    index > 0 && /*#__PURE__*/ _jsx(Divider, {
+                                        sx: (theme)=>({
+                                                borderColor: theme.palette.grey['500']
+                                            })
+                                    }),
+                                    section.content
+                                ]
+                            }, section.key))
+                    })
+                ]
+            })
+        })
+    });
+}
+function LabelGrid({ title, labels }) {
+    const entries = Object.entries(labels);
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                component: "div",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'grid',
+                    // The first column is sized by the longest label name, so all values line up
+                    // at the same horizontal position.
+                    gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',
+                    columnGap: 0.5,
+                    rowGap: 0.25
+                },
+                children: entries.map(([labelName, labelValue])=>/*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                sx: {
+                                    wordBreak: 'break-all'
+                                },
+                                children: [
+                                    labelName,
+                                    ":"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                fontWeight: 700,
+                                sx: {
+                                    wordBreak: 'break-all'
+                                },
+                                children: labelValue
+                            })
+                        ]
+                    }, labelName))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ExemplarMetadataTooltip.js.map

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"sourcesContent":["// Copyright 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// 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 { Box, Divider, IconButton, Portal, Stack, Typography } from '@mui/material';\nimport type { Exemplar, Labels } from '@perses-dev/spec';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { Fragment } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport type { FormatOptions } from '../model/units';\nimport { formatValue } from '../model/units';\nimport {\n  assembleTransform,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '../TimeSeriesTooltip';\nimport type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\n\nexport interface ExemplarMetadataTooltipProps {\n  exemplar: Exemplar;\n  seriesLabels?: Labels;\n  /**\n   * CSS selector of the element the tooltip should be portaled into (e.g. `#dashboard`).\n   * Passed as-is to `document.querySelector`, so it must be a selector and not a bare element id.\n   */\n  containerId?: string;\n  format?: FormatOptions;\n  /**\n   * Position where the tooltip has been pinned, or null when it follows the mouse.\n   */\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\n/**\n * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).\n * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way\n * the annotation tooltip works.\n */\nexport function ExemplarMetadataTooltip({\n  exemplar,\n  seriesLabels,\n  containerId,\n  format,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: ExemplarMetadataTooltipProps): ReactElement | null {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.\n  const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const { labels, value, timestamp } = exemplar;\n  const formattedValue = formatValue(value, format);\n  const date = new Date(timestamp);\n  const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n  const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n  // Only sections with content take part in the layout, so no divider is left dangling\n  // when a label set is empty.\n  const sections: Array<{ key: string; content: ReactElement }> = [];\n  if (seriesLabels && Object.keys(seriesLabels).length > 0) {\n    sections.push({ key: 'series-labels', content: <LabelGrid title=\"Series labels\" labels={seriesLabels} /> });\n  }\n  if (Object.keys(labels).length > 0) {\n    sections.push({ key: 'exemplar-labels', content: <LabelGrid title=\"Exemplar labels\" labels={labels} /> });\n  }\n  sections.push({\n    key: 'value',\n    content: (\n      <Box>\n        <Typography variant=\"overline\" component=\"div\">\n          Value\n        </Typography>\n        <Typography fontWeight={700}>{formattedValue}</Typography>\n      </Box>\n    ),\n  });\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography\n                  variant=\"caption\"\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                  })}\n                >\n                  {formattedDate}\n                </Typography>\n                <Typography variant=\"caption\">\n                  <strong>{formattedTime}</strong>\n                </Typography>\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <IconButton\n                      aria-label={UNPIN_TOOLTIP_HELP_TEXT}\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ padding: 0, color: 'inherit' }}\n                    >\n                      <Pin sx={{ fontSize: 16 }} />\n                    </IconButton>\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Stack spacing={1} sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {sections.map((section, index) => (\n              <Fragment key={section.key}>\n                {index > 0 && <Divider sx={(theme) => ({ borderColor: theme.palette.grey['500'] })} />}\n                {section.content}\n              </Fragment>\n            ))}\n          </Stack>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\nfunction LabelGrid({ title, labels }: { title: string; labels: Labels }): ReactElement {\n  const entries = Object.entries(labels);\n  return (\n    <Box>\n      <Typography variant=\"overline\" component=\"div\">\n        {title}\n      </Typography>\n      <Box\n        sx={{\n          display: 'grid',\n          // The first column is sized by the longest label name, so all values line up\n          // at the same horizontal position.\n          gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',\n          columnGap: 0.5,\n          rowGap: 0.25,\n        }}\n      >\n        {entries.map(([labelName, labelValue]) => (\n          <Fragment key={labelName}>\n            <Typography sx={{ wordBreak: 'break-all' }}>{labelName}:</Typography>\n            <Typography fontWeight={700} sx={{ wordBreak: 'break-all' }}>\n              {labelValue}\n            </Typography>\n          </Fragment>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","IconButton","Portal","Stack","Typography","Pin","PinOutline","Fragment","useResizeObserver","useTimeZone","formatValue","assembleTransform","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","ExemplarMetadataTooltip","exemplar","seriesLabels","containerId","format","pinnedPos","enablePinning","onUnpinClick","formatWithUserTimeZone","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","labels","value","timestamp","formattedValue","date","Date","formattedDate","formattedTime","sections","Object","keys","length","push","key","content","LabelGrid","title","variant","component","fontWeight","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","flexGrow","minWidth","color","common","white","strong","direction","marginLeft","flexShrink","marginRight","fontSize","verticalAlign","aria-label","onClick","borderColor","map","section","index","entries","gridTemplateColumns","columnGap","rowGap","labelName","labelValue","wordBreak"],"mappings":"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"}

package/dist/ExemplarMetadata/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExemplarMetadataTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/ExemplarMetadata/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ExemplarMetadata/index.ts"],"names":[],"mappings":"AAYA,cAAc,2BAA2B,CAAC"}

package/dist/ExemplarMetadata/index.js

@@ -0,0 +1,14 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from "./ExemplarMetadataTooltip.js";
+
+//# sourceMappingURL=index.js.map

package/dist/ExemplarMetadata/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ExemplarMetadata/index.ts"],"sourcesContent":["// Copyright 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// 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\nexport * from './ExemplarMetadataTooltip';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,+BAA4B"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './ColorPicker';
 export * from './ContentWithLegend';
 export * from './controls';
 export * from './Dialog';
+export * from './ExemplarMetadata';
 export * from './DensitySelector';
 export * from './DragAndDrop';
 export * from './Drawer';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -15,6 +15,7 @@ export * from "./ColorPicker/index.js";
 export * from "./ContentWithLegend/index.js";
 export * from "./controls/index.js";
 export * from "./Dialog/index.js";
+export * from "./ExemplarMetadata/index.js";
 export * from "./DensitySelector/index.js";
 export * from "./DragAndDrop/index.js";
 export * from "./Drawer/index.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './AlignSelector';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './controls';\nexport * from './Dialog';\nexport * from './DensitySelector';\nexport * from './DragAndDrop';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './FormEditor';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './Overlay';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeRangeSelector';\nexport * from './TimeZoneSelector';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './TransformsEditor';\nexport * from './RefreshIntervalPicker';\nexport * from './RepeatGrid';\nexport * from './ValueMappingEditor';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,2BAAkB;AAChC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AACpC,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,6BAAoB;AAClC,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,kBAAe;AAC7B,cAAc,qBAAkB;AAChC,cAAc,8BAAqB;AACnC,cAAc,wBAAe;AAC7B,cAAc,yBAAgB;AAC9B,cAAc,kBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,iCAAwB;AACtC,cAAc,qBAAY;AAC1B,cAAc,kCAAyB;AACvC,cAAc,0BAAiB;AAC/B,cAAc,mBAAU;AACxB,cAAc,8BAAqB;AACnC,cAAc,+BAAsB;AACpC,cAAc,wBAAqB;AACnC,cAAc,+BAAsB;AACpC,cAAc,+BAAsB;AACpC,cAAc,4BAAmB;AACjC,cAAc,kBAAe;AAC7B,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,8BAAqB;AACnC,cAAc,mCAA0B;AACxC,cAAc,wBAAe;AAC7B,cAAc,gCAAuB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './AlignSelector';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './controls';\nexport * from './Dialog';\nexport * from './ExemplarMetadata';\nexport * from './DensitySelector';\nexport * from './DragAndDrop';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './FormEditor';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LinksEditor';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './Overlay';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeRangeSelector';\nexport * from './TimeZoneSelector';\nexport * from './TimeSeriesTooltip';\nexport * from './ToolbarIconButton';\nexport * from './FormatControls';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './TransformsEditor';\nexport * from './RefreshIntervalPicker';\nexport * from './RepeatGrid';\nexport * from './ValueMappingEditor';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,2BAAkB;AAChC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AACpC,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,8BAAqB;AACnC,cAAc,6BAAoB;AAClC,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,kBAAe;AAC7B,cAAc,qBAAkB;AAChC,cAAc,8BAAqB;AACnC,cAAc,wBAAe;AAC7B,cAAc,yBAAgB;AAC9B,cAAc,kBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,iCAAwB;AACtC,cAAc,qBAAY;AAC1B,cAAc,kCAAyB;AACvC,cAAc,0BAAiB;AAC/B,cAAc,mBAAU;AACxB,cAAc,8BAAqB;AACnC,cAAc,+BAAsB;AACpC,cAAc,wBAAqB;AACnC,cAAc,+BAAsB;AACpC,cAAc,+BAAsB;AACpC,cAAc,4BAAmB;AACjC,cAAc,kBAAe;AAC7B,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,8BAAqB;AACnC,cAAc,mCAA0B;AACxC,cAAc,wBAAe;AAC7B,cAAc,gCAAuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.55.0-beta.8",
+  "version": "0.55.0-beta.9",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,8 +34,8 @@
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/spec": "0.3.0-beta.7",
-    "@perses-dev/client": "0.55.0-beta.8",
+    "@perses-dev/spec": "0.3.0-beta.8",
+    "@perses-dev/client": "0.55.0-beta.9",
     "numbro": "^2.3.6",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",