@perses-dev/components 0.32.0 → 0.34.0

package/dist/Table/TableRow.js

@@ -11,16 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableRow as MuiTableRow } from '@mui/material';
+import { TableRow as MuiTableRow, alpha } from '@mui/material';
 import { forwardRef } from 'react';
 export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
     return /*#__PURE__*/ _jsx(MuiTableRow, {
         ...props,
         ref: ref,
         sx: {
-            backgroundColor: (theme)=>theme.palette.background.paper,
+            backgroundColor: (theme)=>theme.palette.background.default,
             '&:hover': {
-                backgroundColor: (theme)=>theme.palette.primary.light
+                backgroundColor: (theme)=>alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             }
         }
     });

package/dist/Table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.paper,\n        '&:hover': {\n          backgroundColor: (theme) => theme.palette.primary.light,\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","paper","primary","light"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,IAAIC,WAAW,QAA2C,eAAe,CAAC;AAC3F,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMF,QAAQ,iBAAGE,UAAU,CAAqC,SAASF,QAAQ,CAACG,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACH,WAAW;QACT,GAAGE,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;YAC1D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,KAAK;aACxD;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps, alpha } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.default,\n        '&:hover': {\n          backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,IAAIC,WAAW,EAAqCC,KAAK,QAAQ,eAAe,CAAC;AAClG,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMH,QAAQ,iBAAGG,UAAU,CAAqC,SAASH,QAAQ,CAACI,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACJ,WAAW;QACT,GAAGG,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO;YAC5D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKN,KAAK,CAACM,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEL,KAAK,CAACC,OAAO,CAACK,MAAM,CAACC,YAAY,CAAC;aACjG;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA+HlC"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eAqIlC"}

package/dist/Table/VirtualizedTable.js

@@ -102,7 +102,8 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     children: headers.map((headerGroup)=>{
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
-                            children: headerGroup.headers.map((header, i)=>{
+                            children: headerGroup.headers.map((header, i, headers)=>{
+                                var ref;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
@@ -110,10 +111,13 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                                 };
                                 return /*#__PURE__*/ _jsx(TableCell, {
                                     width: column.getSize() || 'auto',
+                                    align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    isFirstColumn: i === 0,
+                                    isLastColumn: i === headers.length - 1,
                                     children: flexRender(column.columnDef.header, header.getContext())
                                 }, header.id);
                             })
@@ -127,19 +131,21 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     return null;
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: row.getVisibleCells().map((cell, i)=>{
+                    children: row.getVisibleCells().map((cell, i, cells)=>{
+                        var ref;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
                         return /*#__PURE__*/ _jsx(TableCell, {
-                            sx: {
-                                width: cell.column.getSize() || 'auto'
-                            },
+                            width: cell.column.getSize() || 'auto',
+                            align: (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                            isFirstColumn: i === 0,
+                            isLastColumn: i === cells.length - 1,
                             children: flexRender(cell.column.columnDef.cell, cell.getContext())
                         }, cell.id);
                     })

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {\n  onRowClick: (id: string) => void;\n  rows: Array<Row<TableData>>;\n  columns: Array<Column<TableData, unknown>>;\n  headers: Array<HeaderGroup<TableData>>;\n};\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        return <TableRow {...props} onClick={() => onRowClick(row.id)} density={density} />;\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      return (\n                        <TableCell\n                          key={header.id}\n                          width={column.getSize() || 'auto'}\n                          variant=\"head\"\n                          density={density}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    sx={{ width: cell.column.getSize() || 'auto' }}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","onClick","id","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","getSize","variant","focusState","onFocusTrigger","onCellFocus","columnDef","getContext","itemContent","getVisibleCells","cell"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {\n  onRowClick: (id: string) => void;\n  rows: Array<Row<TableData>>;\n  columns: Array<Column<TableData, unknown>>;\n  headers: Array<HeaderGroup<TableData>>;\n};\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        return <TableRow {...props} onClick={() => onRowClick(row.id)} density={density} />;\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      return (\n                        <TableCell\n                          key={header.id}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","onClick","id","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","getSize","align","columnDef","meta","variant","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';
 export declare type TableDensity = 'compact' | 'standard';
 export interface TableProps<TableData> {
     /**
@@ -57,11 +57,21 @@ export interface TableProps<TableData> {
 declare type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
     height: number;
 };
+declare type GetTableCellLayoutOpts = {
+    isLastColumn?: boolean;
+    isFirstColumn?: boolean;
+};
 /**
  * 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 declare function getTableCellLayout(theme: Theme, density: TableDensity, { isLastColumn, isFirstColumn }?: GetTableCellLayoutOpts): TableCellLayout;
+export declare type TableCellAlignment = 'left' | 'right' | 'center';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: TableCellAlignment;
+    }
+}
 export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {
     /**
      * Text to display in the header for the column.
@@ -74,6 +84,10 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
      * @default 'auto'
      */
     width?: number | 'auto';
+    /**
+     * Alignment of the content in the cell.
+     */
+    align?: TableCellAlignment;
 }
 /**
  * Takes in a perses table column and transforms it into a tanstack 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":";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"}
+{"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,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGjH,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,aAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAE,sBAA2B,GAC3D,eAAe,CAiCjB;AAED,oBAAY,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7D,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,kBAAkB,CAAC;KAC5B;CACF;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;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCAmCrG"}

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

@@ -20,13 +20,16 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Returns the properties to lay out the content of table cells based on the
  * theme and density.
- */ export function getTableCellLayout(theme, density) {
+ */ export function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
-        const paddingX = theme.spacing(0.25);
+        const basePaddingX = theme.spacing(0.5);
+        const edgePaddingX = theme.spacing(1);
+        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
         const lineHeight = theme.typography.body2.lineHeight;
         return {
-            padding: `${paddingY} ${paddingX}`,
+            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
             height: calculateTableCellHeight(lineHeight, paddingY),
             fontSize: theme.typography.body2.fontSize,
             lineHeight: lineHeight
@@ -34,10 +37,13 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     }
     // standard density
     const paddingY1 = theme.spacing(1);
-    const paddingX1 = theme.spacing(1.25);
+    const basePaddingX1 = theme.spacing(1.25);
+    const edgePaddingX1 = theme.spacing(2);
+    const paddingLeft1 = isFirstColumn ? edgePaddingX1 : basePaddingX1;
+    const paddingRight1 = isLastColumn ? edgePaddingX1 : basePaddingX1;
     const lineHeight1 = theme.typography.body1.lineHeight;
     return {
-        padding: `${paddingY1} ${paddingX1}`,
+        padding: `${paddingY1} ${paddingRight1} ${paddingY1} ${paddingLeft1}`,
         height: calculateTableCellHeight(lineHeight1, paddingY1),
         fontSize: theme.typography.body1.fontSize,
         lineHeight: lineHeight1
@@ -46,7 +52,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Takes in a perses table column and transforms it into a tanstack column.
  */ export function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , ...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.
@@ -63,7 +69,12 @@ function calculateTableCellHeight(lineHeight, paddingY) {
         };
         const result = {
             ...otherProps,
-            ...sizeProps
+            ...sizeProps,
+            // Open-ended store for extra metadata in TanStack Table, so you can bake
+            // in your own features.
+            meta: {
+                align
+            }
         };
         return result;
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { AccessorKeyColumnDef, ColumnDef, CoreOptions, 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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableCellAlignment;\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(({ width, align, ...otherProps }) => {\n    // Tanstack Table does not support an \"auto\" value to naturally size to fit\n    // the space in a table. We translate our custom \"auto\" setting to 0 size\n    // for these columns, so it is easy to fall back to auto when rendering.\n    // Taking from a recommendation in this github discussion:\n    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n    const sizeProps =\n      width === 'auto' || width === undefined\n        ? {\n            // All zero values are used as shorthand for \"auto\" when rendering\n            // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n            size: 0,\n            minSize: 0,\n            maxSize: 0,\n          }\n        : {\n            size: width,\n          };\n\n    const result = {\n      ...otherProps,\n      ...sizeProps,\n\n      // Open-ended store for extra metadata in TanStack Table, so you can bake\n      // in your own features.\n      meta: {\n        align,\n      },\n    };\n\n    return result;\n  });\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

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

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

package/dist/TimeSeriesTooltip/nearby-series.js

@@ -102,14 +102,16 @@ export const SHOW_FEWER_SERIES_LIMIT = 5;
             chart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: emphasizedSeriesIndexes,
-                notBlur: false
+                notBlur: false,
+                escapeConnect: true
             });
         } else {
             // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
             chart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: nearbySeriesIndexes,
-                notBlur: true
+                notBlur: true,
+                escapeConnect: true
             });
         }
     }

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

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

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -33,7 +33,7 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
     const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
         width,
         height,
-        legendOptions: legendProps === null || legendProps === void 0 ? void 0 : legendProps.options,
+        legendProps,
         minChildrenHeight,
         minChildrenWidth,
         spacing,

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

@@ -24,8 +24,8 @@ _export(exports, {
     TABLE_LEGEND_SIZE: ()=>TABLE_LEGEND_SIZE,
     getContentWithLegendLayout: ()=>getContentWithLegendLayout
 });
+const _core = require("@perses-dev/core");
 const _table = require("../../Table");
-const _legend = require("../../model/legend");
 const TABLE_LEGEND_SIZE = {
     // 5 rows plus header. Value to be multiplied by row height in pixels.
     Bottom: 6,
@@ -35,7 +35,8 @@ const TABLE_LEGEND_SIZE = {
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
-function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+function getContentWithLegendLayout({ width , height , legendProps , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
         legend: {
@@ -56,7 +57,7 @@ function getContentWithLegendLayout({ width , height , legendOptions , minChildr
         return noLegendLayout;
     }
     const { position  } = legendOptions;
-    const mode = (0, _legend.getLegendMode)(legendOptions.mode);
+    const mode = (0, _core.getLegendMode)(legendOptions.mode);
     let legendWidth;
     let legendHeight;
     if (mode === 'List') {
@@ -71,9 +72,17 @@ function getContentWithLegendLayout({ width , height , legendOptions , minChildr
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
+        var ref;
         // Table mode
         const tableLayout = (0, _table.getTableCellLayout)(theme, 'compact');
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
+        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (ref = legendProps.tableProps) === null || ref === void 0 ? void 0 : ref.columns) || [];
+        const columnsWidth = tableColumns.reduce((total, col)=>{
+            if (typeof col.width === 'number') {
+                total += col.width;
+            }
+            return total;
+        }, 0);
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;
         legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
     }
     const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;

package/dist/cjs/EChart/EChart.js

@@ -22,7 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
-const _lodashEs = require("lodash-es");
+const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
+const _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -78,7 +84,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , onChartInitialized  }) {
+const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
     const initialOption = (0, _react.useRef)(option);
     const prevOption = (0, _react.useRef)(option);
     const containerRef = (0, _react.useRef)(null);
@@ -106,9 +112,20 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
         theme,
         renderer
     ]);
+    // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
+    (0, _react.useEffect)(()=>{
+        if (!chartElement.current || !syncGroup) return;
+        chartElement.current.group = syncGroup;
+        (0, _core.connect)([
+            chartElement.current
+        ]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
+    }, [
+        syncGroup,
+        chartElement
+    ]);
     // Update chart data when option changes
     (0, _react.useEffect)(()=>{
-        if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
+        if (prevOption.current === undefined || (0, _isEqual.default)(prevOption.current, option)) return;
         if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
@@ -117,7 +134,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     // Resize chart, cleanup listener on unmount
     (0, _react.useLayoutEffect)(()=>{
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
@@ -149,7 +166,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     (0, _react.useEffect)(()=>{
         // TODO: fix this debouncing. This likely isn't working as intended because
         // the debounced function is re-created every time this useEffect is called.
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200, {

package/dist/cjs/Legend/CompactLegend.js

@@ -20,8 +20,8 @@ Object.defineProperty(exports, "CompactLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
+const _legendModel = require("./legend-model");
 function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
@@ -39,7 +39,7 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick  })
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
-                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',