@perses-dev/components 0.30.0 → 0.31.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string) {\n  return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps) {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition) => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange]\n  );\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n  };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"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"}

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { TableVirtuosoHandle } from 'react-virtuoso';
+import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
+interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
+    visibleRange: React.MutableRefObject<{
+        startIndex: number;
+        endIndex: number;
+    }>;
+    virtualTable: React.RefObject<TableVirtuosoHandle>;
+    maxRows: number;
+    maxColumns: number;
+}
+/**
+ * Hook for managing keyboard navigation when using a virtualized table.
+ */
+export declare function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns, }: UseVirtualizedTableKeyboardNavProps): {
+    activeCell: {
+        row: number;
+        column: number;
+    };
+    isActive: boolean;
+    onTableKeyDown: import("react").KeyboardEventHandler<HTMLTableElement>;
+    onCellFocus: (cellPosition: {
+        row: number;
+        column: number;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=useVirtualizedTableKeyboardNav.d.ts.map

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACnC,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC;;;;;;;;;;;EA4ErC"}

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -0,0 +1,89 @@
+// Copyright 2023 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 { useTableKeyboardNav } from './useTableKeyboardNav';
+/**
+ * Hook for managing keyboard navigation when using a virtualized table.
+ */ export function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+    const baseKeyboard = useTableKeyboardNav({
+        maxRows,
+        maxColumns,
+        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
+            const key = e.key;
+            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
+            var ref;
+            const nextRow = (ref = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && ref !== void 0 ? ref : currentPosition.row;
+            if (key === 'ArrowDown' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref1;
+                    (ref1 = virtualTable.current) === null || ref1 === void 0 ? void 0 : ref1.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'end'
+                    });
+                }
+            } else if (key === 'ArrowUp' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref2;
+                    (ref2 = virtualTable.current) === null || ref2 === void 0 ? void 0 : ref2.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'start'
+                    });
+                }
+            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
+                var // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                ref3;
+                (ref3 = virtualTable.current) === null || ref3 === void 0 ? void 0 : ref3.scrollToIndex({
+                    index: Math.max(nextRow - 1, 0),
+                    align: 'start'
+                });
+            } else if (key === 'PageDown') {
+                var ref4;
+                // Full handling of logic for `PageDown` because there is no default.
+                e.preventDefault();
+                let nextRow1 = currentPosition.row;
+                // Add 1 to account for header
+                nextRow1 = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
+                (ref4 = virtualTable.current) === null || ref4 === void 0 ? void 0 : ref4.scrollToIndex({
+                    index: nextRow1 - 1,
+                    align: 'start'
+                });
+                return {
+                    row: nextRow1,
+                    column: currentPosition.column
+                };
+            } else if (key === 'PageUp') {
+                var ref5;
+                // Full handling of logic for `PageUp` because there is no default.
+                let nextRow2 = currentPosition.row;
+                // Minus 1 to account for header
+                nextRow2 = Math.max(0, visibleRange.current.startIndex - 1);
+                (ref5 = virtualTable.current) === null || ref5 === void 0 ? void 0 : ref5.scrollToIndex({
+                    index: nextRow2 - 1,
+                    align: 'end'
+                });
+                return {
+                    row: nextRow2,
+                    column: currentPosition.column
+                };
+            }
+            return defaultNewPosition;
+        }
+    });
+    return baseKeyboard;
+}
+
+//# sourceMappingURL=useVirtualizedTableKeyboardNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableVirtuosoHandle } from 'react-virtuoso';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n  visibleRange: React.MutableRefObject<{\n    startIndex: number;\n    endIndex: number;\n  }>;\n  virtualTable: React.RefObject<TableVirtuosoHandle>;\n  maxRows: number;\n  maxColumns: number;\n}\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n  visibleRange,\n  virtualTable,\n  maxRows,\n  maxColumns,\n}: UseVirtualizedTableKeyboardNavProps) {\n  const baseKeyboard = useTableKeyboardNav({\n    maxRows,\n    maxColumns,\n    onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n      const key = e.key;\n\n      const defaultValueChanged =\n        defaultNewPosition &&\n        (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n      const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n      if (key === 'ArrowDown' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'end',\n          });\n        }\n      } else if (key === 'ArrowUp' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'start',\n          });\n        }\n      } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        virtualTable.current?.scrollToIndex({\n          index: Math.max(nextRow - 1, 0),\n          align: 'start',\n        });\n      } else if (key === 'PageDown') {\n        // Full handling of logic for `PageDown` because there is no default.\n        e.preventDefault();\n\n        let nextRow = currentPosition.row;\n        // Add 1 to account for header\n\n        nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'start',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      } else if (key === 'PageUp') {\n        // Full handling of logic for `PageUp` because there is no default.\n        let nextRow = currentPosition.row;\n        // Minus 1 to account for header\n        nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'end',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      }\n\n      return defaultNewPosition;\n    },\n  });\n\n  return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"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"}

package/dist/Table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Table';
+export { getTableCellLayout } from './model/table-model';
+export type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/Table/index.js

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

package/dist/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Table';\nexport { getTableCellLayout } from './model/table-model';\nexport type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';\n"],"names":["getTableCellLayout"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,SAAS,CAAC;AACxB,SAASA,kBAAkB,QAAQ,qBAAqB,CAAC"}

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

@@ -0,0 +1,83 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material';
+import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';
+export declare type TableDensity = 'compact' | 'standard';
+export interface TableProps<TableData> {
+    /**
+     * Height of the table.
+     */
+    height: number;
+    /**
+     * Width of the table.
+     */
+    width: number;
+    /**
+     * Array of data to render in the table. Each entry in the array will be
+     * rendered as a row in the table.
+     */
+    data: TableData[];
+    /**
+     * Array of column configuration for the table. Each entry in the array will
+     * be rendered as a column header and impact the rendering of cells within
+     * table rows.
+     */
+    columns: Array<TableColumnConfig<TableData>>;
+    /**
+     * The density of the table layout. This impacts the size and space taken up
+     * by content in the table (e.g. font size, padding).
+     */
+    density?: TableDensity;
+    /**
+     * When `true`, the first column of the table will include checkboxes.
+     */
+    checkboxSelection?: boolean;
+    /**
+     * State of selected rows in the table when `checkboxSelection` is enabled.
+     *
+     * Selected row state is a controlled value that should be managed using a
+     * combination of this prop and `onRowSelectionChange`.
+     */
+    rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when the selected rows in the table changes.
+     */
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /**
+     * Function used to determine the unique identifier used for each row. This
+     * value is used to key `rowSelection`. If this value is not set, the index
+     * is used as the unique identifier.
+     */
+    getRowId?: CoreOptions<TableData>['getRowId'];
+    /**
+     * Function used to determine the color of the checkbox when `checkboxSelection`
+     * is enabled. If not set, a default color is used.
+     */
+    getCheckboxColor?: (rowData: TableData) => string;
+}
+declare type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
+    height: number;
+};
+/**
+ * Returns the properties to lay out the content of table cells based on the
+ * theme and density.
+ */
+export declare function getTableCellLayout(theme: Theme, density: TableDensity): TableCellLayout;
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {
+    /**
+     * Text to display in the header for the column.
+     */
+    header: string;
+    /**
+     * Width of the column when rendered in a table. It should be a number in pixels
+     * or "auto" to allow the table to automatically adjust the width to fill
+     * space.
+     * @default 'auto'
+     */
+    width?: number | 'auto';
+}
+/**
+ * Takes in a perses table column and transforms it into a tanstack column.
+ */
+export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): ColumnDef<TableData, unknown>[];
+export {};
+//# sourceMappingURL=table-model.d.ts.map

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

@@ -0,0 +1 @@
+{"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,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGxG,oBAAY,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;;;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;CACnD;AAWD,aAAK,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;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,GAAG,eAAe,CAyBvF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAI1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC1E;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAIf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCA6BrG"}

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

@@ -0,0 +1,73 @@
+// Copyright 2023 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.
+function calculateTableCellHeight(lineHeight, paddingY) {
+    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
+    // heights based on customization of cell contents.
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
+    return lineHeightNum + verticalPaddingNum * 2;
+}
+/**
+ * Returns the properties to lay out the content of table cells based on the
+ * theme and density.
+ */ export function getTableCellLayout(theme, density) {
+    if (density === 'compact') {
+        const paddingY = theme.spacing(0.5);
+        const paddingX = theme.spacing(0.25);
+        const lineHeight = theme.typography.body2.lineHeight;
+        return {
+            padding: `${paddingY} ${paddingX}`,
+            height: calculateTableCellHeight(lineHeight, paddingY),
+            fontSize: theme.typography.body2.fontSize,
+            lineHeight: lineHeight
+        };
+    }
+    // standard density
+    const paddingY1 = theme.spacing(1);
+    const paddingX1 = theme.spacing(1.25);
+    const lineHeight1 = theme.typography.body1.lineHeight;
+    return {
+        padding: `${paddingY1} ${paddingX1}`,
+        height: calculateTableCellHeight(lineHeight1, paddingY1),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: lineHeight1
+    };
+}
+/**
+ * Takes in a perses table column and transforms it into a tanstack column.
+ */ export function persesColumnsToTanstackColumns(columns) {
+    const tableCols = columns.map(({ width , ...otherProps })=>{
+        // Tanstack Table does not support an "auto" value to naturally size to fit
+        // the space in a table. We translate our custom "auto" setting to 0 size
+        // for these columns, so it is easy to fall back to auto when rendering.
+        // Taking from a recommendation in this github discussion:
+        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+        const sizeProps = width === 'auto' || width === undefined ? {
+            // All zero values are used as shorthand for "auto" when rendering
+            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+            size: 0,
+            minSize: 0,
+            maxSize: 0
+        } : {
+            size: width
+        };
+        const result = {
+            ...otherProps,
+            ...sizeProps
+        };
+        return result;
+    });
+    return tableCols;
+}
+
+//# sourceMappingURL=table-model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(theme: Theme, density: TableDensity): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n    const paddingX = theme.spacing(0.25);\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingX}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const paddingX = theme.spacing(1.25);\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingX}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(({ width, ...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\n    return result;\n  });\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","spacing","paddingX","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","otherProps","sizeProps","undefined","size","minSize","maxSize","result"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAsEjC,SAASA,wBAAwB,CAACC,UAAuC,EAAEC,QAAgB,EAAU;IACnG,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,aAAa,GAAG,OAAOF,UAAU,KAAK,QAAQ,GAAGG,QAAQ,CAACH,UAAU,EAAE,EAAE,CAAC,GAAGA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,AAAC;IAClG,MAAMI,kBAAkB,GAAG,OAAOH,QAAQ,KAAK,QAAQ,GAAGE,QAAQ,CAACF,QAAQ,EAAE,EAAE,CAAC,GAAGA,QAAQ,AAAC;IAE5F,OAAOC,aAAa,GAAGE,kBAAkB,GAAG,CAAC,CAAC;AAChD,CAAC;AAMD;;;CAGC,GACD,OAAO,SAASC,kBAAkB,CAACC,KAAY,EAAEC,OAAqB,EAAmB;IACvF,IAAIA,OAAO,KAAK,SAAS,EAAE;QACzB,MAAMN,QAAQ,GAAGK,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC,AAAC;QACpC,MAAMC,QAAQ,GAAGH,KAAK,CAACE,OAAO,CAAC,IAAI,CAAC,AAAC;QACrC,MAAMR,UAAU,GAAGM,KAAK,CAACI,UAAU,CAACC,KAAK,CAACX,UAAU,AAAC;QAErD,OAAO;YACLY,OAAO,EAAE,CAAC,EAAEX,QAAQ,CAAC,CAAC,EAAEQ,QAAQ,CAAC,CAAC;YAClCI,MAAM,EAAEd,wBAAwB,CAACC,UAAU,EAAEC,QAAQ,CAAC;YACtDa,QAAQ,EAAER,KAAK,CAACI,UAAU,CAACC,KAAK,CAACG,QAAQ;YACzCd,UAAU,EAAEA,UAAU;SACvB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,MAAMC,SAAQ,GAAGK,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC,AAAC;IAClC,MAAMC,SAAQ,GAAGH,KAAK,CAACE,OAAO,CAAC,IAAI,CAAC,AAAC;IACrC,MAAMR,WAAU,GAAGM,KAAK,CAACI,UAAU,CAACK,KAAK,CAACf,UAAU,AAAC;IAErD,OAAO;QACLY,OAAO,EAAE,CAAC,EAAEX,SAAQ,CAAC,CAAC,EAAEQ,SAAQ,CAAC,CAAC;QAClCI,MAAM,EAAEd,wBAAwB,CAACC,WAAU,EAAEC,SAAQ,CAAC;QACtDa,QAAQ,EAAER,KAAK,CAACI,UAAU,CAACK,KAAK,CAACD,QAAQ;QACzCd,UAAU,EAAEA,WAAU;KACvB,CAAC;AACJ,CAAC;AA0BD;;CAEC,GACD,OAAO,SAASgB,8BAA8B,CAAYC,OAA4C,EAAE;IACtG,MAAMC,SAAS,GAAgCD,OAAO,CAACE,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,GAAK;QACvF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,SAAS,GACbF,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAKG,SAAS,GACnC;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,IAAI,EAAE,CAAC;YACPC,OAAO,EAAE,CAAC;YACVC,OAAO,EAAE,CAAC;SACX,GACD;YACEF,IAAI,EAAEJ,KAAK;SACZ,AAAC;QAER,MAAMO,MAAM,GAAG;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;SACb,AAAC;QAEF,OAAOK,MAAM,CAAC;IAChB,CAAC,CAAC,AAAC;IAEH,OAAOT,SAAS,CAAC;AACnB,CAAC"}

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts

@@ -5,6 +5,7 @@ export interface SeriesInfoProps {
     formattedY: string;
     markerColor: string;
     totalSeries: number;
+    emphasizeText?: boolean;
     wrapLabels?: boolean;
 }
 export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAwEhD"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0EhD"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -14,9 +14,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SeriesMarker } from './SeriesMarker';
 import { SeriesLabelsStack } from './SeriesLabelsStack';
-import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
+import { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';
 export function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -65,21 +65,23 @@ export function SeriesInfo(props) {
                                 maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
+                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
+                        "aria-label": emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    display: 'table-cell',
-                    paddingLeft: 1.5,
-                    textAlign: 'right',
-                    verticalAlign: 'top',
-                    fontWeight: '700'
-                },
+                sx: (theme)=>({
+                        display: 'table-cell',
+                        paddingLeft: 1.5,
+                        textAlign: 'right',
+                        verticalAlign: 'top',
+                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
+                    }),
                 children: formattedY
             })
         ]

package/dist/TimeSeriesTooltip/SeriesInfo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: '700',\n        }}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  emphasizeText?: boolean;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n          aria-label={emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={(theme) => ({\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n        })}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","EMPHASIZED_SERIES_DESCRIPTION","NEARBY_SERIES_DESCRIPTION","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","emphasizeText","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","fontWeight","typography","fontWeightBold","fontWeightRegular","textOverflow","whiteSpace","aria-label","paddingLeft","textAlign","verticalAlign"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -4,9 +4,10 @@ import { EChartsDataFormat, UnitOptions } from '../model';
 interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
-    pinTooltip: boolean;
+    isTooltipPinned: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
+    onUnpinClick?: () => void;
 }
 export declare const TimeSeriesTooltip: React.NamedExoticComponent<TimeSeriesTooltipProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oDAmE5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAa1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,oDAwG5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -10,38 +10,52 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Portal } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Portal, Typography, Stack, Switch } from '@mui/material';
 import React, { useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
-import { getFocusedSeriesData } from './focused-series';
-import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
+import { getNearbySeriesData } from './nearby-series';
+import { FALLBACK_CHART_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
-export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+    const [showAllSeries, setShowAllSeries] = useState(false);
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
     if (mousePos === null || mousePos.target === null) return null;
-    // ensure user is hovering over a chart before checking for nearby series
+    // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const focusedSeries = getNearbySeriesData({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
     if (focusedSeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
+    if (isTooltipPinned === true && pinnedPos === null) {
         setPinnedPos(mousePos);
     }
+    // Option for user to see all series instead of only the nearby focused series.
+    // Only relevant when there are more total series than are visible.
+    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
     return /*#__PURE__*/ _jsx(Portal, {
-        children: /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsxs(Box, {
             ref: tooltipRef,
             sx: (theme)=>({
+                    minWidth: TOOLTIP_MIN_WIDTH,
                     maxWidth: TOOLTIP_MAX_WIDTH,
                     maxHeight: TOOLTIP_MAX_HEIGHT,
+                    padding: theme.spacing(0.5, 2),
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -61,10 +75,41 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ _jsx(TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
-            })
+            children: [
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    series: focusedSeries,
+                    wrapLabels: wrapLabels,
+                    isTooltipPinned: isTooltipPinned,
+                    onUnpinClick: ()=>{
+                        setPinnedPos(null);
+                        if (onUnpinClick !== undefined) {
+                            onUnpinClick();
+                        }
+                    }
+                }),
+                showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    gap: 1,
+                    alignItems: "center",
+                    sx: {
+                        textAlign: 'right'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            children: "Show All?"
+                        }),
+                        /*#__PURE__*/ _jsx(Switch, {
+                            checked: showAllSeries,
+                            onChange: (_, checked)=>setShowAllSeries(checked),
+                            sx: (theme)=>({
+                                    '& .MuiSwitch-switchBase': {
+                                        color: theme.palette.common.white
+                                    }
+                                })
+                        })
+                    ]
+                })
+            ]
         })
     });
 });