@perses-dev/components 0.35.0 → 0.36.1

package/dist/Table/model/table-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"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 { Theme } from '@mui/material';\nimport { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableCellAlignment;\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(({ width, align, ...otherProps }) => {\n    // Tanstack Table does not support an \"auto\" value to naturally size to fit\n    // the space in a table. We translate our custom \"auto\" setting to 0 size\n    // for these columns, so it is easy to fall back to auto when rendering.\n    // Taking from a recommendation in this github discussion:\n    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n    const sizeProps =\n      width === 'auto' || width === undefined\n        ? {\n            // All zero values are used as shorthand for \"auto\" when rendering\n            // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n            size: 0,\n            minSize: 0,\n            maxSize: 0,\n          }\n        : {\n            size: width,\n          };\n\n    const result = {\n      ...otherProps,\n      ...sizeProps,\n\n      // Open-ended store for extra metadata in TanStack Table, so you can bake\n      // in your own features.\n      meta: {\n        align,\n      },\n    };\n\n    return result;\n  });\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"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 { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { UnitOptions } from '@perses-dev/core';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat, UnitOptions } from '../model';
+import { EChartsDataFormat } from '../model';
 import { CursorCoordinates } from './tooltip-model';
 export interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI1D,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAiF5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAkF5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -65,7 +65,8 @@ export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({
                     visibility: 'visible',
                     opacity: 1,
                     transition: 'all 0.1s ease-out',
-                    zIndex: theme.zIndex.tooltip,
+                    // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+                    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
                     overflow: 'hidden',
                     '&:hover': {
                         overflowY: 'auto'

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.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 { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.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 { Box, Portal, Stack } from '@mui/material';\nimport { UnitOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n          zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/nearby-series.d.ts

@@ -1,5 +1,6 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { UnitOptions, EChartsDataFormat } from '../model';
+import { UnitOptions } from '@perses-dev/core';
+import { EChartsDataFormat } from '../model';
 import { CursorCoordinates, CursorData } from './tooltip-model';
 export declare const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5;
 export declare const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30;

package/dist/TimeSeriesTooltip/nearby-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nearby-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAA+B,MAAM,UAAU,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGhE,eAAO,MAAM,iCAAiC,MAAM,CAAC;AACrD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,oBAAY,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,GACjB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,qBAkDA;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,UAAU,GACX,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAKV;AAKD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,aAAqB,GACtB,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAgBA"}
+{"version":3,"file":"nearby-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAA+B,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGhE,eAAO,MAAM,iCAAiC,MAAM,CAAC;AACrD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,oBAAY,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,GACjB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,qBAwCA;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,UAAU,GACX,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAKV;AAKD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,aAAqB,GACtB,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAgBA"}

package/dist/TimeSeriesTooltip/nearby-series.js

@@ -10,7 +10,8 @@
 // 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 { formatValue, OPTIMIZED_MODE_SERIES_LIMIT } from '../model';
+import { formatValue } from '@perses-dev/core';
+import { OPTIMIZED_MODE_SERIES_LIMIT } from '../model';
 // increase multipliers to show more series in tooltip
 export const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 export const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
@@ -162,16 +163,6 @@ export const SHOW_FEWER_SERIES_LIMIT = 5;
             return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
         }
     }
-    // clear all highlighted series when cursor exits canvas
-    // https://echarts.apache.org/en/api.html#action.downplay
-    for(let i = 0; i < totalSeries; i++){
-        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-            chart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: i
-            });
-        }
-    }
     return [];
 }
 /*

package/dist/TimeSeriesTooltip/nearby-series.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model';\nimport { CursorCoordinates, CursorData } from './tooltip-model';\n\n// increase multipliers to show more series in tooltip\nexport const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)\nexport const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor\nexport const SHOW_FEWER_SERIES_LIMIT = 5;\n\nexport interface NearbySeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: number;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n  isClosestToCursor: boolean;\n}\n\nexport type NearbySeriesArray = NearbySeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function checkforNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n): NearbySeriesArray {\n  const currentNearbySeriesData: NearbySeriesArray = [];\n  const cursorX: number | null = pointInGrid[0] ?? null;\n  const cursorY: number | null = pointInGrid[1] ?? null;\n\n  if (cursorX === null || cursorY === null) {\n    return currentNearbySeriesData;\n  }\n\n  const nearbySeriesIndexes: number[] = [];\n  const emphasizedSeriesIndexes: number[] = [];\n  const nonEmphasizedSeriesIndexes: number[] = [];\n  const totalSeries = data.timeSeries.length;\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentNearbySeriesData.length >= OPTIMIZED_MODE_SERIES_LIMIT) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {\n              if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {\n                // show fewer bold series in tooltip when many total series\n                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;\n                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);\n                const isClosestToCursor = isWithinPercentageRange({\n                  valueToCheck: cursorY,\n                  baseValue: yValue,\n                  percentage: percentRangeToCheck,\n                });\n                if (isClosestToCursor) {\n                  emphasizedSeriesIndexes.push(seriesIdx);\n                } else {\n                  nonEmphasizedSeriesIndexes.push(seriesIdx);\n                  // ensure series not close to cursor are not highlighted\n                  if (chart?.dispatchAction !== undefined) {\n                    chart.dispatchAction({\n                      type: 'downplay',\n                      seriesIndex: seriesIdx,\n                    });\n                  }\n                }\n\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedY = formatValue(yValue, unit);\n                currentNearbySeriesData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: xValueMilliSeconds,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                  isClosestToCursor,\n                });\n                nearbySeriesIndexes.push(seriesIdx);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  if (chart?.dispatchAction !== undefined) {\n    // Clears emphasis state of all lines that are not emphasized.\n    // Emphasized is a subset of just the nearby series that are closest to cursor.\n    chart.dispatchAction({\n      type: 'downplay',\n      seriesIndex: nonEmphasizedSeriesIndexes,\n    });\n\n    // https://echarts.apache.org/en/api.html#action.highlight\n    if (emphasizedSeriesIndexes.length > 0) {\n      // Fadeout opacity of all series not closest to cursor.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: emphasizedSeriesIndexes,\n        notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n      });\n    } else {\n      // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: nearbySeriesIndexes,\n        notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n      });\n    }\n  }\n\n  return currentNearbySeriesData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all nearby series\n */\nexport function getNearbySeriesData({\n  mousePos,\n  pinnedPos,\n  chartData,\n  chart,\n  unit,\n  showAllSeries = false,\n}: {\n  mousePos: CursorData['coords'];\n  pinnedPos: CursorCoordinates | null;\n  chartData: EChartsDataFormat;\n  chart?: EChartsInstance;\n  unit?: UnitOptions;\n  showAllSeries?: boolean;\n}) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip without it fading away\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n  const totalSeries = chartData.timeSeries.length;\n  const yBuffer = getYBuffer({ yInterval, totalSeries, showAllSeries });\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);\n    }\n  }\n\n  // clear all highlighted series when cursor exits canvas\n  // https://echarts.apache.org/en/api.html#action.downplay\n  for (let i = 0; i < totalSeries; i++) {\n    if (chart?.dispatchAction !== undefined) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n  return [];\n}\n\n/*\n * Check if two numbers are within a specified percentage range\n */\nexport function isWithinPercentageRange({\n  valueToCheck,\n  baseValue,\n  percentage,\n}: {\n  valueToCheck: number;\n  baseValue: number;\n  percentage: number;\n}): boolean {\n  const range = (percentage / 100) * baseValue;\n  const lowerBound = baseValue - range;\n  const upperBound = baseValue + range;\n  return valueToCheck >= lowerBound && valueToCheck <= upperBound;\n}\n\n/*\n * Get range to check within for nearby series to show in tooltip.\n */\nexport function getYBuffer({\n  yInterval,\n  totalSeries,\n  showAllSeries = false,\n}: {\n  yInterval: number;\n  totalSeries: number;\n  showAllSeries?: boolean;\n}) {\n  if (showAllSeries) {\n    return yInterval * 10; // roughly correlates with grid so entire canvas is searched\n  }\n\n  // never let nearby series range be less than roughly the size of a single tick\n  const yBufferMin = yInterval * 0.3;\n\n  // tooltip trigger area gets smaller with more series\n  if (totalSeries > SHOW_FEWER_SERIES_LIMIT) {\n    const adjustedBuffer = (yInterval * DYNAMIC_NEARBY_SERIES_MULTIPLIER) / totalSeries;\n    return Math.max(yBufferMin, adjustedBuffer);\n  }\n\n  // increase multiplier to expand nearby series range\n  return Math.max(yBufferMin, yInterval * INCREASE_NEARBY_SERIES_MULTIPLIER);\n}\n"],"names":["formatValue","OPTIMIZED_MODE_SERIES_LIMIT","INCREASE_NEARBY_SERIES_MULTIPLIER","DYNAMIC_NEARBY_SERIES_MULTIPLIER","SHOW_FEWER_SERIES_LIMIT","checkforNearbySeries","data","pointInGrid","yBuffer","chart","unit","currentNearbySeriesData","cursorX","cursorY","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","totalSeries","timeSeries","length","Array","isArray","xAxis","seriesIdx","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","minPercentRange","percentRangeToCheck","Math","max","isClosestToCursor","isWithinPercentageRange","valueToCheck","baseValue","percentage","push","dispatchAction","type","seriesIndex","xValueMilliSeconds","formattedY","seriesName","date","x","y","notBlur","escapeConnect","getNearbySeriesData","mousePos","pinnedPos","chartData","showAllSeries","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yInterval","getComponent","axis","scale","_interval","getYBuffer","pointInPixel","plotCanvas","containPixel","convertFromPixel","i","range","lowerBound","upperBound","yBufferMin","adjustedBuffer"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model';\nimport { CursorCoordinates, CursorData } from './tooltip-model';\n\n// increase multipliers to show more series in tooltip\nexport const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)\nexport const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor\nexport const SHOW_FEWER_SERIES_LIMIT = 5;\n\nexport interface NearbySeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: number;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n  isClosestToCursor: boolean;\n}\n\nexport type NearbySeriesArray = NearbySeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function checkforNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n): NearbySeriesArray {\n  const currentNearbySeriesData: NearbySeriesArray = [];\n  const cursorX: number | null = pointInGrid[0] ?? null;\n  const cursorY: number | null = pointInGrid[1] ?? null;\n\n  if (cursorX === null || cursorY === null) {\n    return currentNearbySeriesData;\n  }\n\n  const nearbySeriesIndexes: number[] = [];\n  const emphasizedSeriesIndexes: number[] = [];\n  const nonEmphasizedSeriesIndexes: number[] = [];\n  const totalSeries = data.timeSeries.length;\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentNearbySeriesData.length >= OPTIMIZED_MODE_SERIES_LIMIT) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {\n              if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {\n                // show fewer bold series in tooltip when many total series\n                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;\n                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);\n                const isClosestToCursor = isWithinPercentageRange({\n                  valueToCheck: cursorY,\n                  baseValue: yValue,\n                  percentage: percentRangeToCheck,\n                });\n                if (isClosestToCursor) {\n                  emphasizedSeriesIndexes.push(seriesIdx);\n                } else {\n                  nonEmphasizedSeriesIndexes.push(seriesIdx);\n                  // ensure series not close to cursor are not highlighted\n                  if (chart?.dispatchAction !== undefined) {\n                    chart.dispatchAction({\n                      type: 'downplay',\n                      seriesIndex: seriesIdx,\n                    });\n                  }\n                }\n\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedY = formatValue(yValue, unit);\n                currentNearbySeriesData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: xValueMilliSeconds,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                  isClosestToCursor,\n                });\n                nearbySeriesIndexes.push(seriesIdx);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  if (chart?.dispatchAction !== undefined) {\n    // Clears emphasis state of all lines that are not emphasized.\n    // Emphasized is a subset of just the nearby series that are closest to cursor.\n    chart.dispatchAction({\n      type: 'downplay',\n      seriesIndex: nonEmphasizedSeriesIndexes,\n    });\n\n    // https://echarts.apache.org/en/api.html#action.highlight\n    if (emphasizedSeriesIndexes.length > 0) {\n      // Fadeout opacity of all series not closest to cursor.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: emphasizedSeriesIndexes,\n        notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n      });\n    } else {\n      // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: nearbySeriesIndexes,\n        notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n      });\n    }\n  }\n\n  return currentNearbySeriesData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all nearby series\n */\nexport function getNearbySeriesData({\n  mousePos,\n  pinnedPos,\n  chartData,\n  chart,\n  unit,\n  showAllSeries = false,\n}: {\n  mousePos: CursorData['coords'];\n  pinnedPos: CursorCoordinates | null;\n  chartData: EChartsDataFormat;\n  chart?: EChartsInstance;\n  unit?: UnitOptions;\n  showAllSeries?: boolean;\n}) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip without it fading away\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n  const totalSeries = chartData.timeSeries.length;\n  const yBuffer = getYBuffer({ yInterval, totalSeries, showAllSeries });\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);\n    }\n  }\n\n  return [];\n}\n\n/*\n * Check if two numbers are within a specified percentage range\n */\nexport function isWithinPercentageRange({\n  valueToCheck,\n  baseValue,\n  percentage,\n}: {\n  valueToCheck: number;\n  baseValue: number;\n  percentage: number;\n}): boolean {\n  const range = (percentage / 100) * baseValue;\n  const lowerBound = baseValue - range;\n  const upperBound = baseValue + range;\n  return valueToCheck >= lowerBound && valueToCheck <= upperBound;\n}\n\n/*\n * Get range to check within for nearby series to show in tooltip.\n */\nexport function getYBuffer({\n  yInterval,\n  totalSeries,\n  showAllSeries = false,\n}: {\n  yInterval: number;\n  totalSeries: number;\n  showAllSeries?: boolean;\n}) {\n  if (showAllSeries) {\n    return yInterval * 10; // roughly correlates with grid so entire canvas is searched\n  }\n\n  // never let nearby series range be less than roughly the size of a single tick\n  const yBufferMin = yInterval * 0.3;\n\n  // tooltip trigger area gets smaller with more series\n  if (totalSeries > SHOW_FEWER_SERIES_LIMIT) {\n    const adjustedBuffer = (yInterval * DYNAMIC_NEARBY_SERIES_MULTIPLIER) / totalSeries;\n    return Math.max(yBufferMin, adjustedBuffer);\n  }\n\n  // increase multiplier to expand nearby series range\n  return Math.max(yBufferMin, yInterval * INCREASE_NEARBY_SERIES_MULTIPLIER);\n}\n"],"names":["formatValue","OPTIMIZED_MODE_SERIES_LIMIT","INCREASE_NEARBY_SERIES_MULTIPLIER","DYNAMIC_NEARBY_SERIES_MULTIPLIER","SHOW_FEWER_SERIES_LIMIT","checkforNearbySeries","data","pointInGrid","yBuffer","chart","unit","currentNearbySeriesData","cursorX","cursorY","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","totalSeries","timeSeries","length","Array","isArray","xAxis","seriesIdx","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","minPercentRange","percentRangeToCheck","Math","max","isClosestToCursor","isWithinPercentageRange","valueToCheck","baseValue","percentage","push","dispatchAction","type","seriesIndex","xValueMilliSeconds","formattedY","seriesName","date","x","y","notBlur","escapeConnect","getNearbySeriesData","mousePos","pinnedPos","chartData","showAllSeries","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yInterval","getComponent","axis","scale","_interval","getYBuffer","pointInPixel","plotCanvas","containPixel","convertFromPixel","range","lowerBound","upperBound","yBufferMin","adjustedBuffer"],"mappings":"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"}

package/dist/UnitSelector/UnitSelector.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UnitOptions } from '../model';
+import { UnitOptions } from '@perses-dev/core';
 export interface UnitSelectorProps {
     value: UnitOptions;
     onChange: (unit: UnitOptions) => void;

package/dist/UnitSelector/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,WAAW,EAA0E,MAAM,UAAU,CAAC;AAK/G,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqElE"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAEL,WAAW,EAKZ,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqElE"}

package/dist/UnitSelector/UnitSelector.js

@@ -12,8 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
-import { UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';
-import { shouldAbbreviate } from '../model/units/utils';
+import { shouldAbbreviate, UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '@perses-dev/core';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{

package/dist/UnitSelector/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { UnitOptions, UNIT_CONFIG, UnitConfig, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';\nimport { shouldAbbreviate } from '../model/units/utils';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","shouldAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  shouldAbbreviate,\n  UnitOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldAbbreviate","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "ContentWithLegend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
 const _legend = require("../Legend");
 const _contentWithLegendModel = require("./model/content-with-legend-model");
 function _interopRequireDefault(obj) {
@@ -28,7 +29,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
     const theme = (0, _material.useTheme)();
     const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
         width,
@@ -37,7 +38,8 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
         minChildrenHeight,
         minChildrenWidth,
         spacing,
-        theme
+        theme,
+        legendSize: (0, _core.getLegendSize)(legendSize)
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -27,15 +27,23 @@ _export(exports, {
 const _core = require("@perses-dev/core");
 const _table = require("../../Table");
 const TABLE_LEGEND_SIZE = {
-    // 5 rows plus header. Value to be multiplied by row height in pixels.
-    Bottom: 6,
-    // Pixel value
-    Right: 250
+    Medium: {
+        // 5 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 6,
+        // Pixel value
+        Right: 250
+    },
+    Small: {
+        // 3 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 4,
+        // Pixel value
+        Right: 150
+    }
 };
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
-function getContentWithLegendLayout({ width , height , legendProps , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+function getContentWithLegendLayout({ width , height , legendProps , legendSize , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
     const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
@@ -82,8 +90,10 @@ function getContentWithLegendLayout({ width , height , legendProps , minChildren
             }
             return total;
         }, 0);
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;
-        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;
+        // Use the smaller of the size-based row count or the number of legend items + 1 for the header.
+        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);
+        legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;
     }
     const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
     const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -31,7 +31,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _units = require("../model/units");
 const _echart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -171,7 +170,7 @@ function GaugeChart(props) {
                         // when the value is `null`, making it difficult to differentiate
                         // `null` from a true `NaN` case.
                         ()=>'null' : (value)=>{
-                            return (0, _units.formatValue)(value, unit);
+                            return (0, _core.formatValue)(value, unit);
                         }
                     },
                     data: [
@@ -219,7 +218,7 @@ function getResponsiveValueSize(value, unit, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? (0, _units.formatValue)(value, unit) : `${value}`;
+    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, unit) : `${value}`;
     var _length;
     const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;

package/dist/cjs/Legend/CompactLegend.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _listLegendItem = require("./ListLegendItem");
 const _legendModel = require("./legend-model");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
+function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
@@ -37,9 +37,12 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick  })
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/cjs/Legend/Legend.js

@@ -31,7 +31,7 @@ const _tableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -74,7 +74,9 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {

package/dist/cjs/Legend/ListLegend.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _reactVirtuoso = require("react-virtuoso");
 const _listLegendItem = require("./ListLegendItem");
 const _legendModel = require("./legend-model");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
@@ -34,13 +34,14 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
         itemContent: (index, item)=>{
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
                 isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 sx: {
-                    // Having an explicit width is important for the ellipsizing to
-                    // work correctly. Subtract padding to simulate padding.
-                    width: width,
+                    width: '100%',
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,14 +62,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -90,6 +90,18 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         dense: true,
         key: item.id,
         onClick: handleClick,
+        onMouseOver: (e)=>{
+            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+                id: item.id,
+                index
+            });
+        },
+        onMouseOut: (e)=>{
+            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+                id: item.id,
+                index
+            });
+        },
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -107,8 +119,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/cjs/Legend/TableLegend.js

@@ -25,6 +25,7 @@ const COLUMNS = [
     {
         accessorKey: 'label',
         header: 'Name',
+        enableSorting: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -40,7 +41,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -65,11 +66,16 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
+        onRowMouseOver: onItemMouseOver,
+        onRowMouseOut: onItemMouseOut,
+        sorting: sorting,
+        onSortingChange: onSortingChange,
         data: items,
         columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
-        checkboxSelection: true
+        checkboxSelection: true,
+        rowSelectionVariant: "legend"
     });
 }