@perses-dev/components 0.35.0 → 0.36.0

package/dist/Legend/ListLegend.d.ts

@@ -7,6 +7,8 @@ export interface ListLegendProps {
     width: number;
     selectedItems: SelectedLegendItemState;
     onLegendItemClick: ListLegendItemProps['onClick'];
+    onItemMouseOver: ListLegendItemProps['onMouseOver'];
+    onItemMouseOut: ListLegendItemProps['onMouseOut'];
 }
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
@@ -14,5 +16,5 @@ export interface ListLegendProps {
  * large number of items because it is virtualized and easier to visually scan
  * large numbers of items when there is a single item per row.
  */
-export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps): JSX.Element;
+export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: ListLegendProps): JSX.Element;
 //# sourceMappingURL=ListLegend.d.ts.map

package/dist/Legend/ListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6BrG"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,eAAe,eA8BjB"}

package/dist/Legend/ListLegend.js

@@ -19,7 +19,7 @@ import { isLegendItemVisuallySelected } from './legend-model';
  * stacked. It is also used for `bottom` positioned legends when there are a
  * large number of items because it is virtualized and easier to visually scan
  * large numbers of items when there is a single item per row.
- */ export function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+ */ export 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__*/ _jsx(Virtuoso, {
@@ -31,13 +31,14 @@ import { isLegendItemVisuallySelected } from './legend-model';
         itemContent: (index, item)=>{
             return /*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
                 isVisuallySelected: 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/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.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 { Virtuoso } from 'react-virtuoso';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAUnG;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,6DAA6D;IAC7D,MAAMC,cAAc,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACV,QAAQ;QACPW,KAAK,EAAE;YAAEN,MAAM;YAAEC,KAAK;SAAE;QACxBM,IAAI,EAAER,KAAK;QACXS,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACd,cAAc;gBAEbc,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEf,4BAA4B,CAACa,IAAI,EAAER,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BW,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDb,KAAK,EAAEA,KAAK;oBACZc,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIN,IAAI,CAACO,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.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 { Virtuoso } from 'react-virtuoso';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EACzBC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,eAAe,CAAA,EACfC,cAAc,CAAA,EACE,EAAE;IAClB,6DAA6D;IAC7D,MAAMC,cAAc,GAAGP,KAAK,CAACQ,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACZ,QAAQ;QACPa,KAAK,EAAE;YAAER,MAAM;YAAEC,KAAK;SAAE;QACxBQ,IAAI,EAAEV,KAAK;QACXW,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAAChB,cAAc;gBAEbgB,IAAI,EAAEA,IAAI;gBACVD,KAAK,EAAEA,KAAK;gBACZE,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEjB,4BAA4B,CAACe,IAAI,EAAEV,aAAa,CAAC;gBACrEa,OAAO,EAAEZ,iBAAiB;gBAC1Ba,WAAW,EAAEZ,eAAe;gBAC5Ba,UAAU,EAAEZ,cAAc;gBAC1Ba,EAAE,EAAE;oBACFjB,KAAK,EAAE,MAAM;oBACbkB,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAZIR,IAAI,CAACS,EAAE,CAaZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,14 +1,27 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
 import { LegendItem } from './legend-model';
-export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {
+export declare type LegendItemEventOpts = {
+    /**
+     * Unique identifier for the legend item.
+     */
+    id: string;
+    /**
+     * Index of the row in the original data.
+     */
+    index: number;
+};
+export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {
     item: LegendItem;
+    index: number;
     /**
      * When true, the item is rendered differently to visually communicate it is
      * selected.
      */
     isVisuallySelected?: boolean;
     onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;
+    onMouseOver?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;
+    onMouseOut?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;
     /**
      * When `true`, will keep labels to a single line with overflow ellipsized. The
      * full content will be shown on hover.
@@ -17,5 +30,5 @@ export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick
      */
     truncateLabel?: boolean;
 }
-export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "secondaryAction" | "item" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
+export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "secondaryAction" | "item" | "index" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=ListLegendItem.d.ts.map

package/dist/Legend/ListLegendItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAChF,IAAI,EAAE,UAAU,CAAC;IAEjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwDD,eAAO,MAAM,cAAc,o6JAAiC,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,oBAAY,mBAAmB,GAAG;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC;IAC/G,IAAI,EAAE,UAAU,CAAC;IAEjB,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEtE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0DD,eAAO,MAAM,cAAc,86JAAiC,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -16,14 +16,14 @@ import React, { forwardRef, useState } from 'react';
 import { Box, ListItemText, ListItem } from '@mui/material';
 import { combineSx } from '../utils';
 import { LegendColorBadge } from './LegendColorBadge';
-const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = useState(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -44,6 +44,18 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         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: [
@@ -61,8 +73,8 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.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 React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {\n  item: LegendItem;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleMouseOver}\n        onMouseOut={handleMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","onMouseOver","onMouseOut","memo"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACpD,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAC3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAuBtD,MAAMC,kBAAkB,iBAAGP,UAAU,CAAsC,SAASQ,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,OAAO,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGC,MAAM,EAAE,EACnEC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACU,aAAa,CAAC,AAAC;IAEpD,SAASO,eAAe,GAAG;QACzB,IAAIP,aAAa,EAAE;YACjBM,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIR,aAAa,EAAE;YACjBM,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,MAAMG,WAAW,GAA4C,CAACC,CAAC,GAAK;YAElEZ,GAAY;QADZG,OAAO,CAACS,CAAC,EAAEZ,IAAI,CAACa,EAAE,CAAC,CAAC;QACpBb,CAAAA,GAAY,GAAZA,IAAI,CAACG,OAAO,cAAZH,GAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,GAAY,CAAZA,IAAiB,CAAjBA,IAAI,EAAWY,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,eAACjB,QAAQ;QACN,GAAGU,MAAM;QACVS,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfd,EAAE,EAAEL,SAAS,CACX;YACEoB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDhB,EAAE,CACH;QACDiB,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEnB,IAAI,CAACa,EAAE;QACZV,OAAO,EAAEQ,WAAW;QACpBS,QAAQ,EAAEhB,kBAAkB;QAC5BE,GAAG,EAAEA,GAAG;;0BAER,KAACb,GAAG;gBAACQ,EAAE,EAAE;oBAAEoB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACzB,gBAAgB;oBAAC0B,KAAK,EAAEvB,IAAI,CAACuB,KAAK;kBAAI;cACnC;0BACN,KAAC7B,YAAY;gBACX8B,OAAO,EAAExB,IAAI,CAACyB,KAAK;gBACnBC,sBAAsB,EAAE;oBAAEnB,MAAM,EAAEA,MAAM;iBAAE;gBAC1CoB,WAAW,EAAElB,eAAe;gBAC5BmB,UAAU,EAAElB,cAAc;cACZ;;MACP,CACX;AACJ,CAAC,CAAC,AAAC;AAEH,OAAO,MAAMX,cAAc,iBAAGT,KAAK,CAACuC,IAAI,CAAC/B,kBAAkB,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport type LegendItemEventOpts = {\n  /**\n   * Unique identifier for the legend item.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {\n  item: LegendItem;\n\n  index: number;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  onMouseOver?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;\n  onMouseOut?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleTextMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleTextMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      onMouseOver={(e: React.MouseEvent) => onMouseOver?.(e, { id: item.id, index })}\n      onMouseOut={(e: React.MouseEvent) => onMouseOut?.(e, { id: item.id, index })}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleTextMouseOver}\n        onMouseOut={handleTextMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","onMouseOver","onMouseOut","index","others","ref","noWrap","setNoWrap","handleTextMouseOver","handleTextMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","memo"],"mappings":"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"}

package/dist/Legend/TableLegend.d.ts

@@ -1,13 +1,15 @@
 /// <reference types="react" />
 import { TableProps } from '../Table';
 import { LegendItem } from './legend-model';
-export interface TableLegendProps {
+export interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {
     items: LegendItem[];
     height: number;
     width: number;
     selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';
     onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];
+    onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];
+    onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];
     columns?: TableProps<LegendItem>['columns'];
 }
-export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, height, width, columns: additionalColumns, }: TableLegendProps): JSX.Element;
+export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns, sorting, onSortingChange, }: TableLegendProps): JSX.Element;
 //# sourceMappingURL=TableLegend.d.ts.map

package/dist/Legend/TableLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,GAChC,EAAE,gBAAgB,eA+BlB"}
+{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACnG,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AAuBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,EAC/B,OAAO,EACP,eAAe,GAChB,EAAE,gBAAgB,eAoClB"}

package/dist/Legend/TableLegend.js

@@ -17,6 +17,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.
@@ -32,7 +33,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
+export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = useMemo(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -57,12 +58,17 @@ export function TableLegend({ items , selectedItems: initRowSelection , onSelect
         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"
     });
 }
 

package/dist/Legend/TableLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/TableLegend.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 { useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  height,\n  width,\n  columns: additionalColumns = [],\n}: TableLegendProps) {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce((allRowSelection, item, index) => {\n          allRowSelection[getRowId(item, index)] = true;\n          return allRowSelection;\n        }, {} as Record<string, boolean>);\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","height","width","columns","additionalColumns","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","density","checkboxSelection"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,KAAK,QAAuC,UAAU,CAAC;AAYhE,MAAMC,OAAO,GAAyC;IACpD;QACEC,WAAW,EAAE,OAAO;QACpBC,MAAM,EAAE,MAAM;QAEd,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,IAAI,EAAE,CAAC,EAAEC,QAAQ,CAAA,EAAE,iBAAK,KAACC,MAAI;gBAACC,KAAK,EAAEF,QAAQ,EAAE;0BAAGA,QAAQ,EAAE;cAAQ;KACrE;CACF,AAAC;AAEF,MAAMG,QAAQ,GAAoD,CAACC,IAAI,GAAK;IAC1E,OAAOA,IAAI,CAACC,EAAE,CAAC;AACjB,CAAC,AAAC;AAEF,MAAMC,gBAAgB,GAA+C,CAACF,IAAI,GAAK;IAC7E,OAAOA,IAAI,CAACG,KAAK,CAAC;AACpB,CAAC,AAAC;AAEF,OAAO,SAASC,WAAW,CAAC,EAC1BC,KAAK,CAAA,EACLC,aAAa,EAAEC,gBAAgB,CAAA,EAC/BC,qBAAqB,CAAA,EACrBC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,OAAO,EAAEC,iBAAiB,GAAG,EAAE,CAAA,EACd,EAAE;IACnB,MAAMC,YAAY,GAAGvB,OAAO,CAAC,IAAM;QACjC,OAAO,OAAOiB,gBAAgB,KAAK,QAAQ,GACvCA,gBAAgB,GAEhB,wBAAwB;QACxB,4EAA4E;QAC5EF,KAAK,CAACS,MAAM,CAAC,CAACC,eAAe,EAAEC,IAAI,EAAEC,KAAK,GAAK;YAC7CF,eAAe,CAAChB,QAAQ,CAACiB,IAAI,EAAEC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;YAC9C,OAAOF,eAAe,CAAC;QACzB,CAAC,EAAE,EAAE,CAA4B,CAAC;IACxC,CAAC,EAAE;QAACR,gBAAgB;QAAEF,KAAK;KAAC,CAAC,AAAC;IAE9B,MAAMM,OAAO,GAAGrB,OAAO,CAAC,IAAM;QAC5B,OAAO;eAAIE,OAAO;eAAKoB,iBAAiB;SAAC,CAAC;IAC5C,CAAC,EAAE;QAACA,iBAAiB;KAAC,CAAC,AAAC;IAExB,qBACE,KAACrB,KAAK;QACJkB,MAAM,EAAEA,MAAM;QACdC,KAAK,EAAEA,KAAK;QACZG,YAAY,EAAEA,YAAY;QAC1BK,oBAAoB,EAAEV,qBAAqB;QAC3CR,IAAI,EAAEK,KAAK;QACXM,OAAO,EAAEA,OAAO;QAChBQ,OAAO,EAAC,SAAS;QACjBpB,QAAQ,EAAEA,QAAQ;QAClBG,gBAAgB,EAAEA,gBAAgB;QAClCkB,iBAAiB;MACjB,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/TableLegend.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 { useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];\n  onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n    enableSorting: true,\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  height,\n  width,\n  columns: additionalColumns = [],\n  sorting,\n  onSortingChange,\n}: TableLegendProps) {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce((allRowSelection, item, index) => {\n          allRowSelection[getRowId(item, index)] = true;\n          return allRowSelection;\n        }, {} as Record<string, boolean>);\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      onRowMouseOver={onItemMouseOver}\n      onRowMouseOut={onItemMouseOut}\n      sorting={sorting}\n      onSortingChange={onSortingChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n      rowSelectionVariant=\"legend\"\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","enableSorting","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","height","width","columns","additionalColumns","sorting","onSortingChange","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","onRowMouseOver","onRowMouseOut","density","checkboxSelection","rowSelectionVariant"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,KAAK,QAAuC,UAAU,CAAC;AAchE,MAAMC,OAAO,GAAyC;IACpD;QACEC,WAAW,EAAE,OAAO;QACpBC,MAAM,EAAE,MAAM;QACdC,aAAa,EAAE,IAAI;QAEnB,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,IAAI,EAAE,CAAC,EAAEC,QAAQ,CAAA,EAAE,iBAAK,KAACC,MAAI;gBAACC,KAAK,EAAEF,QAAQ,EAAE;0BAAGA,QAAQ,EAAE;cAAQ;KACrE;CACF,AAAC;AAEF,MAAMG,QAAQ,GAAoD,CAACC,IAAI,GAAK;IAC1E,OAAOA,IAAI,CAACC,EAAE,CAAC;AACjB,CAAC,AAAC;AAEF,MAAMC,gBAAgB,GAA+C,CAACF,IAAI,GAAK;IAC7E,OAAOA,IAAI,CAACG,KAAK,CAAC;AACpB,CAAC,AAAC;AAEF,OAAO,SAASC,WAAW,CAAC,EAC1BC,KAAK,CAAA,EACLC,aAAa,EAAEC,gBAAgB,CAAA,EAC/BC,qBAAqB,CAAA,EACrBC,eAAe,CAAA,EACfC,cAAc,CAAA,EACdC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,OAAO,EAAEC,iBAAiB,GAAG,EAAE,CAAA,EAC/BC,OAAO,CAAA,EACPC,eAAe,CAAA,EACE,EAAE;IACnB,MAAMC,YAAY,GAAG5B,OAAO,CAAC,IAAM;QACjC,OAAO,OAAOkB,gBAAgB,KAAK,QAAQ,GACvCA,gBAAgB,GAEhB,wBAAwB;QACxB,4EAA4E;QAC5EF,KAAK,CAACa,MAAM,CAAC,CAACC,eAAe,EAAEC,IAAI,EAAEC,KAAK,GAAK;YAC7CF,eAAe,CAACpB,QAAQ,CAACqB,IAAI,EAAEC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;YAC9C,OAAOF,eAAe,CAAC;QACzB,CAAC,EAAE,EAAE,CAA4B,CAAC;IACxC,CAAC,EAAE;QAACZ,gBAAgB;QAAEF,KAAK;KAAC,CAAC,AAAC;IAE9B,MAAMQ,OAAO,GAAGxB,OAAO,CAAC,IAAM;QAC5B,OAAO;eAAIE,OAAO;eAAKuB,iBAAiB;SAAC,CAAC;IAC5C,CAAC,EAAE;QAACA,iBAAiB;KAAC,CAAC,AAAC;IAExB,qBACE,KAACxB,KAAK;QACJqB,MAAM,EAAEA,MAAM;QACdC,KAAK,EAAEA,KAAK;QACZK,YAAY,EAAEA,YAAY;QAC1BK,oBAAoB,EAAEd,qBAAqB;QAC3Ce,cAAc,EAAEd,eAAe;QAC/Be,aAAa,EAAEd,cAAc;QAC7BK,OAAO,EAAEA,OAAO;QAChBC,eAAe,EAAEA,eAAe;QAChChB,IAAI,EAAEK,KAAK;QACXQ,OAAO,EAAEA,OAAO;QAChBY,OAAO,EAAC,SAAS;QACjB1B,QAAQ,EAAEA,QAAQ;QAClBG,gBAAgB,EAAEA,gBAAgB;QAClCwB,iBAAiB;QACjBC,mBAAmB,EAAC,QAAQ;MAC5B,CACF;AACJ,CAAC"}

package/dist/LineChart/LineChart.d.ts

@@ -1,7 +1,7 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
+import { UnitOptions } from '@perses-dev/core';
 import type { EChartsCoreOption, GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
 import { EChartsDataFormat } from '../model/graph';
-import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
 export declare type TooltipConfig = {
     wrapLabels: boolean;
@@ -24,5 +24,19 @@ export interface LineChartProps {
     onDoubleClick?: (e: MouseEvent) => void;
     __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
 }
-export declare function LineChart({ height, data, yAxis, unit, grid, legend, tooltipConfig, noDataVariant, syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride, }: LineChartProps): JSX.Element;
+declare type LineChartHandleFocusOpts = {
+    id: string;
+};
+export declare type LineChartHandle = {
+    /**
+     * Highlight the series associated with the specified options.
+     */
+    highlightSeries: (opts: LineChartHandleFocusOpts) => void;
+    /**
+     * Clear all highlighted series.
+     */
+    clearHighlightedSeries: () => void;
+};
+export declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<LineChartHandle>>;
+export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoC,EACpC,aAAyB,EACzB,SAAS,EACT,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eA2MhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA8D,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAKnD,OAAO,EAOL,aAAa,EACd,MAAM,SAAS,CAAC;AAgBjB,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAKD,aAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,SAAS,wFAsPpB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
 import { Box } from '@mui/material';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
@@ -21,7 +21,7 @@ import { EChart } from '../EChart';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { TimeSeriesTooltip } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
-import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
+import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
 use([
     EChartsLineChart,
     GridComponent,
@@ -35,10 +35,10 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
-    var ref;
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
@@ -46,6 +46,29 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
     const { timeZone  } = useTimeZone();
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
+    useImperativeHandle(ref, ()=>{
+        return {
+            highlightSeries ({ id  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: id
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                clearHighlightedSeries(chartRef.current, data.timeSeries.length);
+            }
+        };
+    }, [
+        data.timeSeries.length
+    ]);
     const handleEvents = useMemo(()=>{
         return {
             datazoom: (params)=>{
@@ -200,6 +223,9 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            if (chartRef.current !== undefined) {
+                clearHighlightedSeries(chartRef.current, data.timeSeries.length);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -219,7 +245,7 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
             }
         },
         children: [
-            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
@@ -242,6 +268,6 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
             })
         ]
     });
-}
+});
 
 //# sourceMappingURL=LineChart.js.map

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.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 React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  noDataVariant = 'message',\n  syncGroup,\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","noDataOption","timeSeries","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.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 React, { MouseEvent, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';\nimport { UnitOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\ntype LineChartHandleFocusOpts = {\n  id: string;\n};\n\nexport type LineChartHandle = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: LineChartHandleFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const LineChart = forwardRef<LineChartHandle, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    unit,\n    grid,\n    legend,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: LineChartHandleFocusOpts) {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["React","useImperativeHandle","useMemo","useRef","useState","forwardRef","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","TimeSeriesTooltip","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/LineChart/utils.d.ts

@@ -1,6 +1,6 @@
+import { UnitOptions } from '@perses-dev/core';
 import type { YAXisComponentOption } from 'echarts';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { UnitOptions } from '../model';
 export interface ZoomEventData {
     start: number;
     end: number;
@@ -27,4 +27,5 @@ export declare function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOption
         formatter: (value: number) => string;
     };
 } & (YAXisComponentOption | undefined))[];
+export declare function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number): void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/LineChart/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAoBjF;AAKD,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAoBjF;AAKD,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B;AAMD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,QASjF"}

package/dist/LineChart/utils.js

@@ -10,8 +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 } from '@perses-dev/core';
 import merge from 'lodash/merge';
-import { formatValue } from '../model';
 import { dateFormatOptionsWithTimeZone } from '../utils';
 /**
  * Enable dataZoom without requring user to click toolbox icon
@@ -86,5 +86,18 @@ import { dateFormatOptionsWithTimeZone } from '../utils';
         merge(Y_AXIS_DEFAULT, yAxis)
     ];
 }
+/*
+ * Clear all highlighted series when cursor exits canvas
+ * https://echarts.apache.org/en/api.html#action.downplay
+ */ export function clearHighlightedSeries(chart, totalSeries) {
+    if (chart.dispatchAction !== undefined) {
+        for(let i = 0; i < totalSeries; i++){
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
+        }
+    }
+}
 
 //# sourceMappingURL=utils.js.map