@perses-dev/components 0.55.0-rc.1 → 0.56.0-beta.0

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-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.
@@ -14,7 +15,7 @@ import { Box, Divider, IconButton, Portal, Stack, Typography } from "@mui/materi
 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 { 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";
@@ -22,218 +23,490 @@ import { assembleTransform, getTooltipStyles, PIN_TOOLTIP_HELP_TEXT, TOOLTIP_BG_
  * 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 }) {
+ */ export function ExemplarMetadataTooltip(t0) {
+    const $ = _c(63);
+    const { exemplar, seriesLabels, containerId, format, pinnedPos, enablePinning: t1, onUnpinClick } = t0;
+    const enablePinning = t1 === undefined ? true : t1;
     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);
+    if (!isPinned && mousePos === null) {
+        return null;
+    }
+    let containerElement;
+    let maxHeight;
+    let t2;
+    if ($[0] !== containerId || $[1] !== height || $[2] !== mousePos || $[3] !== pinnedPos || $[4] !== width) {
+        containerElement = containerId ? document.querySelector(containerId) : undefined;
+        maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+        t2 = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);
+        $[0] = containerId;
+        $[1] = height;
+        $[2] = mousePos;
+        $[3] = pinnedPos;
+        $[4] = width;
+        $[5] = containerElement;
+        $[6] = maxHeight;
+        $[7] = t2;
+    } else {
+        containerElement = $[5];
+        maxHeight = $[6];
+        t2 = $[7];
+    }
+    const transform = t2;
     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
-            })
+    let t3;
+    if ($[8] !== format || $[9] !== value) {
+        t3 = formatValue(value, format);
+        $[8] = format;
+        $[9] = value;
+        $[10] = t3;
+    } else {
+        t3 = $[10];
+    }
+    const formattedValue = t3;
+    let formattedDate;
+    let t4;
+    if ($[11] !== formatWithUserTimeZone || $[12] !== timestamp) {
+        const date = new Date(timestamp);
+        formattedDate = formatWithUserTimeZone(date, "MMM dd, yyyy - ");
+        t4 = formatWithUserTimeZone(date, "HH:mm:ss");
+        $[11] = formatWithUserTimeZone;
+        $[12] = timestamp;
+        $[13] = formattedDate;
+        $[14] = t4;
+    } else {
+        formattedDate = $[13];
+        t4 = $[14];
+    }
+    const formattedTime = t4;
+    let sections;
+    if ($[15] !== formattedValue || $[16] !== labels || $[17] !== seriesLabels) {
+        sections = [];
+        if (seriesLabels && Object.keys(seriesLabels).length > 0) {
+            let t5;
+            if ($[19] !== seriesLabels) {
+                t5 = {
+                    key: "series-labels",
+                    content: /*#__PURE__*/ _jsx(LabelGrid, {
+                        title: "Series labels",
+                        labels: seriesLabels
+                    })
+                };
+                $[19] = seriesLabels;
+                $[20] = t5;
+            } else {
+                t5 = $[20];
+            }
+            sections.push(t5);
+        }
+        if (Object.keys(labels).length > 0) {
+            let t5;
+            if ($[21] !== labels) {
+                t5 = {
+                    key: "exemplar-labels",
+                    content: /*#__PURE__*/ _jsx(LabelGrid, {
+                        title: "Exemplar labels",
+                        labels: labels
+                    })
+                };
+                $[21] = labels;
+                $[22] = t5;
+            } else {
+                t5 = $[22];
+            }
+            sections.push(t5);
+        }
+        let t5;
+        if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+            t5 = /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                component: "div",
+                children: "Value"
+            });
+            $[23] = t5;
+        } else {
+            t5 = $[23];
+        }
+        let t6;
+        if ($[24] !== formattedValue) {
+            t6 = {
+                key: "value",
+                content: /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        t5,
+                        /*#__PURE__*/ _jsx(Typography, {
+                            fontWeight: 700,
+                            children: formattedValue
+                        })
+                    ]
+                })
+            };
+            $[24] = formattedValue;
+            $[25] = t6;
+        } else {
+            t6 = $[25];
+        }
+        sections.push(t6);
+        $[15] = formattedValue;
+        $[16] = labels;
+        $[17] = seriesLabels;
+        $[18] = sections;
+    } else {
+        sections = $[18];
+    }
+    let t5;
+    if ($[26] !== maxHeight || $[27] !== pinnedPos) {
+        t5 = (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight);
+        $[26] = maxHeight;
+        $[27] = pinnedPos;
+        $[28] = t5;
+    } else {
+        t5 = $[28];
+    }
+    let t6;
+    if ($[29] !== transform) {
+        t6 = {
+            transform
+        };
+        $[29] = transform;
+        $[30] = t6;
+    } else {
+        t6 = $[30];
+    }
+    let t7;
+    if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = {
+            display: "flex",
+            alignItems: "center",
+            paddingBottom: 0.5,
+            width: "100%"
+        };
+        $[31] = t7;
+    } else {
+        t7 = $[31];
+    }
+    let t8;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = {
+            flexGrow: 1,
+            minWidth: 0
+        };
+        $[32] = t8;
+    } else {
+        t8 = $[32];
+    }
+    let t9;
+    if ($[33] !== formattedDate) {
+        t9 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            sx: _temp2,
+            children: formattedDate
         });
+        $[33] = formattedDate;
+        $[34] = t9;
+    } else {
+        t9 = $[34];
     }
-    if (Object.keys(labels).length > 0) {
-        sections.push({
-            key: 'exemplar-labels',
-            content: /*#__PURE__*/ _jsx(LabelGrid, {
-                title: "Exemplar labels",
-                labels: labels
+    let t10;
+    if ($[35] !== formattedTime) {
+        t10 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            children: /*#__PURE__*/ _jsx("strong", {
+                children: formattedTime
             })
         });
+        $[35] = formattedTime;
+        $[36] = t10;
+    } else {
+        t10 = $[36];
     }
-    sections.push({
-        key: 'value',
-        content: /*#__PURE__*/ _jsxs(Box, {
+    let t11;
+    if ($[37] !== t10 || $[38] !== t9) {
+        t11 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t8,
+            children: [
+                t9,
+                t10
+            ]
+        });
+        $[37] = t10;
+        $[38] = t9;
+        $[39] = t11;
+    } else {
+        t11 = $[39];
+    }
+    let t12;
+    if ($[40] !== enablePinning || $[41] !== isPinned || $[42] !== onUnpinClick) {
+        t12 = enablePinning && /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            sx: {
+                marginLeft: 1,
+                flexShrink: 0
+            },
             children: [
                 /*#__PURE__*/ _jsx(Typography, {
-                    variant: "overline",
-                    component: "div",
-                    children: "Value"
+                    sx: {
+                        marginRight: 0.5,
+                        fontSize: 11,
+                        verticalAlign: "middle"
+                    },
+                    children: isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT
                 }),
-                /*#__PURE__*/ _jsx(Typography, {
-                    fontWeight: 700,
-                    children: formattedValue
+                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
+                    }
                 })
             ]
-        })
-    });
-    return /*#__PURE__*/ _jsx(Portal, {
-        container: containerElement,
-        children: /*#__PURE__*/ _jsx(Box, {
+        });
+        $[40] = enablePinning;
+        $[41] = isPinned;
+        $[42] = onUnpinClick;
+        $[43] = t12;
+    } else {
+        t12 = $[43];
+    }
+    let t13;
+    if ($[44] !== t11 || $[45] !== t12) {
+        t13 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t7,
+            children: [
+                t11,
+                t12
+            ]
+        });
+        $[44] = t11;
+        $[45] = t12;
+        $[46] = t13;
+    } else {
+        t13 = $[46];
+    }
+    let t14;
+    if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = /*#__PURE__*/ _jsx(Divider, {
+            sx: _temp3
+        });
+        $[47] = t14;
+    } else {
+        t14 = $[47];
+    }
+    let t15;
+    if ($[48] !== t13) {
+        t15 = /*#__PURE__*/ _jsxs(Box, {
+            sx: _temp,
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[48] = t13;
+        $[49] = t15;
+    } else {
+        t15 = $[49];
+    }
+    let t16;
+    if ($[50] !== sections) {
+        t16 = /*#__PURE__*/ _jsx(Stack, {
+            spacing: 1,
+            sx: _temp4,
+            children: sections.map(_temp6)
+        });
+        $[50] = sections;
+        $[51] = t16;
+    } else {
+        t16 = $[51];
+    }
+    let t17;
+    if ($[52] !== t15 || $[53] !== t16) {
+        t17 = /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            children: [
+                t15,
+                t16
+            ]
+        });
+        $[52] = t15;
+        $[53] = t16;
+        $[54] = t17;
+    } else {
+        t17 = $[54];
+    }
+    let t18;
+    if ($[55] !== t17 || $[56] !== t5 || $[57] !== t6 || $[58] !== tooltipRef) {
+        t18 = /*#__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))
-                    })
-                ]
-            })
-        })
-    });
+            sx: t5,
+            style: t6,
+            children: t17
+        });
+        $[55] = t17;
+        $[56] = t5;
+        $[57] = t6;
+        $[58] = tooltipRef;
+        $[59] = t18;
+    } else {
+        t18 = $[59];
+    }
+    let t19;
+    if ($[60] !== containerElement || $[61] !== t18) {
+        t19 = /*#__PURE__*/ _jsx(Portal, {
+            container: containerElement,
+            children: t18
+        });
+        $[60] = containerElement;
+        $[61] = t18;
+        $[62] = t19;
+    } else {
+        t19 = $[62];
+    }
+    return t19;
 }
-function LabelGrid({ title, labels }) {
-    const entries = Object.entries(labels);
-    return /*#__PURE__*/ _jsxs(Box, {
+function _temp6(section, index) {
+    return /*#__PURE__*/ _jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(Typography, {
-                variant: "overline",
-                component: "div",
-                children: title
+            index > 0 && /*#__PURE__*/ _jsx(Divider, {
+                sx: _temp5
+            }),
+            section.content
+        ]
+    }, section.key);
+}
+function _temp5(theme_4) {
+    return {
+        borderColor: theme_4.palette.grey["500"]
+    };
+}
+function _temp4(theme_3) {
+    return {
+        padding: theme_3.spacing(0.5, 2, 1.5, 2)
+    };
+}
+function _temp3(theme_2) {
+    return {
+        width: "100%",
+        borderColor: theme_2.palette.grey["500"]
+    };
+}
+function _temp2(theme_1) {
+    return {
+        color: theme_1.palette.common.white
+    };
+}
+function _temp(theme_0) {
+    return {
+        width: "100%",
+        maxWidth: TOOLTIP_MAX_WIDTH,
+        padding: theme_0.spacing(1.5, 2, 0.5, 2),
+        backgroundColor: theme_0.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,
+        position: "sticky",
+        top: 0,
+        left: 0
+    };
+}
+function LabelGrid(t0) {
+    const $ = _c(10);
+    const { title, labels } = t0;
+    let t1;
+    if ($[0] !== labels) {
+        t1 = Object.entries(labels);
+        $[0] = labels;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    const entries = t1;
+    let t2;
+    if ($[2] !== title) {
+        t2 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "overline",
+            component: "div",
+            children: title
+        });
+        $[2] = title;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            display: "grid",
+            gridTemplateColumns: "minmax(0, max-content) minmax(0, 1fr)",
+            columnGap: 0.5,
+            rowGap: 0.25
+        };
+        $[4] = t3;
+    } else {
+        t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== entries) {
+        t4 = /*#__PURE__*/ _jsx(Box, {
+            sx: t3,
+            children: entries.map(_temp7)
+        });
+        $[5] = entries;
+        $[6] = t4;
+    } else {
+        t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== t2 || $[8] !== t4) {
+        t5 = /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                t2,
+                t4
+            ]
+        });
+        $[7] = t2;
+        $[8] = t4;
+        $[9] = t5;
+    } else {
+        t5 = $[9];
+    }
+    return t5;
+}
+function _temp7(t0) {
+    const [labelName, labelValue] = t0;
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                sx: {
+                    wordBreak: "break-all"
+                },
+                children: [
+                    labelName,
+                    ":"
+                ]
             }),
-            /*#__PURE__*/ _jsx(Box, {
+            /*#__PURE__*/ _jsx(Typography, {
+                fontWeight: 700,
                 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
+                    wordBreak: "break-all"
                 },
-                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))
+                children: labelValue
             })
         ]
-    });
+    }, labelName);
 }
 
 //# sourceMappingURL=ExemplarMetadataTooltip.js.map