@perses-dev/components 0.54.0-beta.0 → 0.54.0-beta.1

package/dist/Table/hooks/useFuzzySearch.js

@@ -0,0 +1,43 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { getFilteredRowModel } from '@tanstack/react-table';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { useState } from 'react';
+const fuzzyFilter = (row, columnId, value, addMeta)=>{
+    const itemRank = rankItem(row.getValue(columnId), value);
+    addMeta({
+        itemRank
+    });
+    return itemRank.passed;
+};
+/**
+ * Returns fuzzy search state and the corresponding `useReactTable` options.
+ * Filter options are disabled when `showSearch` is falsy.
+ */ export function useFuzzySearch(isSearchEnabled) {
+    const [globalFilter, setGlobalFilter] = useState('');
+    return {
+        globalFilter,
+        setGlobalFilter,
+        fuzzySearchOptions: {
+            filterFns: {
+                fuzzy: fuzzyFilter
+            },
+            globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
+            getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,
+            filterFromLeafRows: isSearchEnabled,
+            onGlobalFilterChange: setGlobalFilter
+        }
+    };
+}
+
+//# sourceMappingURL=useFuzzySearch.js.map

package/dist/Table/hooks/useFuzzySearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FilterFn, getFilteredRowModel, OnChangeFn, TableOptions } from '@tanstack/react-table';\nimport { rankItem } from '@tanstack/match-sorter-utils';\nimport { useState } from 'react';\n\nconst fuzzyFilter: FilterFn<unknown> = (row, columnId, value, addMeta) => {\n  const itemRank = rankItem(row.getValue(columnId), value);\n  addMeta({ itemRank });\n  return itemRank.passed;\n};\n\nexport interface UseFuzzySearchResult<TableData> {\n  globalFilter: string;\n  setGlobalFilter: OnChangeFn<string>;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableData>,\n    'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useReactTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData>(isSearchEnabled: boolean | undefined): UseFuzzySearchResult<TableData> {\n  const [globalFilter, setGlobalFilter] = useState('');\n\n  return {\n    globalFilter,\n    setGlobalFilter,\n    fuzzySearchOptions: {\n      filterFns: { fuzzy: fuzzyFilter },\n      globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,\n      getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: setGlobalFilter,\n    },\n  };\n}\n"],"names":["getFilteredRowModel","rankItem","useState","fuzzyFilter","row","columnId","value","addMeta","itemRank","getValue","passed","useFuzzySearch","isSearchEnabled","globalFilter","setGlobalFilter","fuzzySearchOptions","filterFns","fuzzy","globalFilterFn","undefined","filterFromLeafRows","onGlobalFilterChange"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAmBA,mBAAmB,QAAkC,wBAAwB;AAChG,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,MAAMC,cAAiC,CAACC,KAAKC,UAAUC,OAAOC;IAC5D,MAAMC,WAAWP,SAASG,IAAIK,QAAQ,CAACJ,WAAWC;IAClDC,QAAQ;QAAEC;IAAS;IACnB,OAAOA,SAASE,MAAM;AACxB;AAWA;;;CAGC,GACD,OAAO,SAASC,eAA0BC,eAAoC;IAC5E,MAAM,CAACC,cAAcC,gBAAgB,GAAGZ,SAAS;IAEjD,OAAO;QACLW;QACAC;QACAC,oBAAoB;YAClBC,WAAW;gBAAEC,OAAOd;YAAY;YAChCe,gBAAgBN,kBAAkB,UAAUO;YAC5CnB,qBAAqBY,kBAAkBZ,wBAAwBmB;YAC/DC,oBAAoBR;YACpBS,sBAAsBP;QACxB;IACF;AACF"}

package/dist/Table/model/table-model.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material';
 import { Link } from '@perses-dev/spec';
-import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, FilterFn, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 export declare const DEFAULT_COLUMN_WIDTH = 150;
 export declare const DEFAULT_COLUMN_HEIGHT = 40;
@@ -24,7 +24,7 @@ export interface TableProps<TableData> {
     /**
      * Width of the table.
      */
-    width: number;
+    width: number | string;
     /**
      * Array of data to render in the table. Each entry in the array will be
      * rendered as a row in the table.
@@ -133,7 +133,36 @@ export interface TableProps<TableData> {
      * Item actions should be created
      */
     hasItemActions?: boolean;
+    /**
+     * Returns the sub rows for a given row, or `undefined` if there are none.
+     */
+    getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];
+    /**
+     * List of column ids that should be hidden when the table is initially rendered.
+     */
+    hiddenColumns?: string[];
+    /**
+     * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.
+     * If not provided, the toolbar will not be rendered.
+     */
+    tableToolbarConfig?: TableToolbarConfig;
 }
+export type TableToolbarConfig = {
+    /**
+     * When `true`, a search bar will be rendered above the table that allows
+     * the user to filter rows using a fuzzy global filter.
+     */
+    isSearchEnabled?: boolean;
+    /**
+     * When `true`, a "Columns" button will be rendered above the table that
+     * opens a dropdown allowing the user to toggle column visibility.
+     */
+    isColumnFilterEnabled?: boolean;
+    /**
+     * Max height for the column filter menu.
+     */
+    columnFilterMenuMaxHeight?: number | string;
+};
 type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
     height: number;
 };
@@ -165,8 +194,13 @@ declare module '@tanstack/table-core' {
         dataLink?: TableColumnConfig<TData>['dataLink'];
     }
 }
+declare module '@tanstack/react-table' {
+    interface FilterFns {
+        fuzzy: FilterFn<unknown>;
+    }
+}
 export type DataLink = Omit<Link, 'name'>;
-export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id'> {
     /**
      * Text to display in the header for the column.
      */

package/dist/Table/model/table-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,EACR,eAAe,EACf,OAAO,EACP,iBAAiB,EACjB,YAAY,EACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAErC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAE5C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAExE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEvE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;IAElD;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,EAAE,CAAC;IAE9E;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,SAAS,EAAE,CAAC;IAEhF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C,CAAC;AAWF,KAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,GAAE,sBAA2B,GAC1F,eAAe,CAyCjB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAMD,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;QAC1C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAAC;QAClE,eAAe,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC;QAC9D,QAAQ,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;KACjD;CACF;AAED,OAAO,QAAQ,uBAAuB,CAAC;IAErC,UAAU,SAAS;QACjB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;KAC1B;CACF;AAKD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAK1C,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAM1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAC/F;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;OAOG;IAGH,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;IAEzF;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EACtD,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAC3C,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CA2C7B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/spec';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\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   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\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 using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\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   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => 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  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\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  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\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  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\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    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\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   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...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          dataLink,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/spec';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  FilterFn,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\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 | string;\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   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\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 using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\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   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => 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  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n\n  /**\n   * Returns the sub rows for a given row, or `undefined` if there are none.\n   */\n  getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];\n\n  /**\n   * List of column ids that should be hidden when the table is initially rendered.\n   */\n  hiddenColumns?: string[];\n\n  /**\n   * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.\n   * If not provided, the toolbar will not be rendered.\n   */\n  tableToolbarConfig?: TableToolbarConfig;\n}\n\nexport type TableToolbarConfig = {\n  /**\n   * When `true`, a search bar will be rendered above the table that allows\n   * the user to filter rows using a fuzzy global filter.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * When `true`, a \"Columns\" button will be rendered above the table that\n   * opens a dropdown allowing the user to toggle column visibility.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | 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  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\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  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\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    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\ndeclare module '@tanstack/react-table' {\n  //add fuzzy filter to the filterFns. Allows us to use \"fuzzy\" as a value for `globalFilterFn` in our table options.\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>;\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\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' | 'id'> {\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   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...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          dataLink,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, RefObject } from 'react';
-import { ThresholdOptions } from '@perses-dev/core';
+import { ThresholdOptions } from '../model';
 export interface ThresholdInputProps {
     label: string;
     color: string;

package/dist/ThresholdsEditor/ThresholdInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CA8BpC"}
+{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CA8BpC"}

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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 { ReactElement, RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core'; // TODO\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps): ReactElement {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <OptionsColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","OptionsColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAkCA,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,kBAAkB,QAAQ,oCAAoC;AAcvE,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAmBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BAC/D,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,OAAO;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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 { ReactElement, RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ThresholdOptions } from '../model';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps): ReactElement {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <OptionsColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","OptionsColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAkCA,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,kBAAkB,QAAQ,oCAAoC;AAevE,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAmBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BAC/D,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,OAAO;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ThresholdOptions } from '@perses-dev/core';
+import { ThresholdOptions } from '../model';
 export interface ThresholdsEditorProps {
     onChange: (thresholds: ThresholdOptions) => void;
     thresholds?: ThresholdOptions;

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,qBAAqB,GAAG,YAAY,CA0LtC"}
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAS/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,qBAAqB,GAAG,YAAY,CA0LtC"}

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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, { ReactElement, useEffect, useRef } from 'react';\nimport { produce } from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core'; // TODO\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","OptionsColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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, { ReactElement, useEffect, useRef } from 'react';\nimport { produce } from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ThresholdOptions } from '../model';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","OptionsColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts

@@ -1,8 +1,7 @@
 import { MutableRefObject } from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { FormatOptions } from '@perses-dev/core';
 import { TimeSeries } from '@perses-dev/spec';
-import { TimeChartSeriesMapping } from '../model';
+import { FormatOptions, TimeChartSeriesMapping } from '../model';
 import { CursorCoordinates } from './tooltip-model';
 export interface TimeChartTooltipProps {
     chartRef: MutableRefObject<EChartsInstance | undefined>;

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

@@ -1 +1 @@
-{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DA0E3B,CAAC"}
+{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DA0E3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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 { memo, MutableRefObject, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { FormatOptions } from '@perses-dev/core'; // TODO\nimport { TimeSeries } from '@perses-dev/spec';\nimport useResizeObserver from 'use-resize-observer';\nimport { TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === 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\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\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":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAInD,OAAOC,uBAAuB,sBAAsB;AAEpD,SAA4BC,gBAAgB,QAAQ,kBAAkB;AACtE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,UAAU;AAC9D,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAsBlD,OAAO,MAAMC,iCAAmBb,KAAK,SAASa,iBAAiB,EAC7DC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,aAAa,EACbC,gBAAgB,IAAI,EACpBC,UAAU,EACVC,MAAM,EACNC,eAAe,EACfC,YAAY,EACZC,SAAS,EACa;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGvB,SAAS;IACnD,MAAMwB,YAAYzB;IAElB,MAAM0B,WAAWpB;IACjB,MAAM,EAAEqB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGzB;IAE3C,MAAM0B,kBAAkBT,cAAc,QAAQL;IAE9C,IAAIS,aAAa,QAAQA,SAASM,MAAM,KAAK,QAAQjB,SAAS,MAAM,OAAO;IAE3E,0EAA0E;IAC1E,IAAIO,cAAc,QAAQ,AAACI,SAASM,MAAM,CAAiBC,OAAO,KAAK,UAAU,OAAO;IAExF,MAAMC,QAAQpB,SAASqB,OAAO;IAE9B,MAAMC,mBAAmBvB,cAAcwB,SAASC,aAAa,CAACzB,eAAe0B;IAC7E,uHAAuH;IACvH,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGd,MAAM,GAAGY;IAEvFd,UAAUU,OAAO,GAAG5B,kBAAkBmB,UAAUJ,WAAWK,UAAU,GAAGC,SAAS,GAAGQ;IAEpF,uEAAuE;IACvE,MAAMM,eAAejC,oBAAoB;QACvCiB;QACAX;QACAC;QACAM;QACAY;QACAf;QACAC;QACAG;IACF;IACA,IAAImB,aAAaC,MAAM,KAAK,GAAG;QAC7B,OAAO;IACT;IAEA,MAAMC,cAAc7B,KAAK4B,MAAM;IAE/B,qBACE,KAACxC;QAAO0C,WAAWT;kBACjB,cAAA,KAAClC;YACC2B,KAAKC;YACLgB,IAAI,CAACC,QAAUvC,iBAAiBuC,OAAOzB,WAAWkB;YAClDQ,OAAO;gBACLvB,WAAWA,UAAUU,OAAO;YAC9B;sBAEA,cAAA,MAAC/B;gBAAM6C,SAAS;;kCACd,KAACvC;wBACCgC,cAAcA;wBACdE,aAAaA;wBACb3B,eAAeA;wBACfc,iBAAiBA;wBACjBR,eAAeA;wBACf2B,gBAAgB,CAACC,UAAY3B,iBAAiB2B;wBAC9C9B,cAAcA;;kCAEhB,KAACV;wBAAeyC,QAAQV;wBAAcxB,YAAYA;;;;;;AAK5D,GAAG"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\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 { memo, MutableRefObject, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries } from '@perses-dev/spec';\nimport useResizeObserver from 'use-resize-observer';\nimport { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === 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\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\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":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAGnD,OAAOC,uBAAuB,sBAAsB;AAEpD,SAA4BC,gBAAgB,QAAQ,kBAAkB;AACtE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,UAAU;AAC9D,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAsBlD,OAAO,MAAMC,iCAAmBb,KAAK,SAASa,iBAAiB,EAC7DC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,aAAa,EACbC,gBAAgB,IAAI,EACpBC,UAAU,EACVC,MAAM,EACNC,eAAe,EACfC,YAAY,EACZC,SAAS,EACa;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGvB,SAAS;IACnD,MAAMwB,YAAYzB;IAElB,MAAM0B,WAAWpB;IACjB,MAAM,EAAEqB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGzB;IAE3C,MAAM0B,kBAAkBT,cAAc,QAAQL;IAE9C,IAAIS,aAAa,QAAQA,SAASM,MAAM,KAAK,QAAQjB,SAAS,MAAM,OAAO;IAE3E,0EAA0E;IAC1E,IAAIO,cAAc,QAAQ,AAACI,SAASM,MAAM,CAAiBC,OAAO,KAAK,UAAU,OAAO;IAExF,MAAMC,QAAQpB,SAASqB,OAAO;IAE9B,MAAMC,mBAAmBvB,cAAcwB,SAASC,aAAa,CAACzB,eAAe0B;IAC7E,uHAAuH;IACvH,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGd,MAAM,GAAGY;IAEvFd,UAAUU,OAAO,GAAG5B,kBAAkBmB,UAAUJ,WAAWK,UAAU,GAAGC,SAAS,GAAGQ;IAEpF,uEAAuE;IACvE,MAAMM,eAAejC,oBAAoB;QACvCiB;QACAX;QACAC;QACAM;QACAY;QACAf;QACAC;QACAG;IACF;IACA,IAAImB,aAAaC,MAAM,KAAK,GAAG;QAC7B,OAAO;IACT;IAEA,MAAMC,cAAc7B,KAAK4B,MAAM;IAE/B,qBACE,KAACxC;QAAO0C,WAAWT;kBACjB,cAAA,KAAClC;YACC2B,KAAKC;YACLgB,IAAI,CAACC,QAAUvC,iBAAiBuC,OAAOzB,WAAWkB;YAClDQ,OAAO;gBACLvB,WAAWA,UAAUU,OAAO;YAC9B;sBAEA,cAAA,MAAC/B;gBAAM6C,SAAS;;kCACd,KAACvC;wBACCgC,cAAcA;wBACdE,aAAaA;wBACb3B,eAAeA;wBACfc,iBAAiBA;wBACjBR,eAAeA;wBACf2B,gBAAgB,CAACC,UAAY3B,iBAAiB2B;wBAC9C9B,cAAcA;;kCAEhB,KAACV;wBAAeyC,QAAQV;wBAAcxB,YAAYA;;;;;;AAK5D,GAAG"}

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

@@ -1,6 +1,6 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { FormatOptions, TimeSeries } from '@perses-dev/core';
-import { EChartsDataFormat, TimeChartSeriesMapping } from '../model';
+import { TimeSeries } from '@perses-dev/spec';
+import { EChartsDataFormat, TimeChartSeriesMapping, FormatOptions } 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;AAE1D,OAAO,EAAqC,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,iBAAiB,EAA+B,sBAAsB,EAAiB,MAAM,UAAU,CAAC;AAEjH,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAC;AAGpF,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,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,UAAU,EAAE,EAClB,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,eAAe,EACtB,MAAM,CAAC,EAAE,aAAa,EACtB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,EAE5C,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAiLnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,MAAM,CAAC,EAAE,aAAa,GACrB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,MAAM,EACN,eAAe,EACf,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,iBAAiB,CAmEpB;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,GAAG,MAAM,CAcT"}
+{"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;AAE1D,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACL,iBAAiB,EAEjB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAC;AAGpF,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,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,UAAU,EAAE,EAClB,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,eAAe,EACtB,MAAM,CAAC,EAAE,aAAa,EACtB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,EAE5C,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAiLnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,MAAM,CAAC,EAAE,aAAa,GACrB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,MAAM,EACN,eAAe,EACf,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,iBAAiB,CAmEpB;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,GAAG,MAAM,CAcT"}

package/dist/TimeSeriesTooltip/nearby-series.js

@@ -10,8 +10,7 @@
 // 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'; // TODO
-import { OPTIMIZED_MODE_SERIES_LIMIT } from '../model';
+import { OPTIMIZED_MODE_SERIES_LIMIT, formatValue } from '../model';
 import { batchDispatchNearbySeriesActions, getPointInGrid, getClosestTimestamp } from '../utils';
 import { EMPTY_TOOLTIP_DATA } from './tooltip-model';
 // increase multipliers to show more series in tooltip