@perses-dev/components 0.48.0 → 0.49.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","padding","height","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"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;AA+HjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAOA,uBAAAA,wBAAAA,aAAc;IACjG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,EAAEC,aAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,mBAAmB;IACnB,IAAIR,WAAWK,MAAMI,OAAO,CAAC;IAC7B,IAAIC,eAAeL,MAAMI,OAAO,CAAC;IACjC,IAAIE,eAAeN,MAAMI,OAAO,CAAC;IACjC,IAAIG,cAAcJ,gBAAgBG,eAAeD;IACjD,IAAIG,eAAeN,eAAeI,eAAeD;IACjD,IAAIX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;IAClD,IAAIiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAE9C,IAAIV,YAAY,WAAW;QACzBN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACG,KAAK,CAAClB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACG,KAAK,CAACD,QAAQ;IAC5C;IAEA,IAAIV,YAAY,eAAe;QAC7BN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAC5C;IAEA,OAAO;QACLE,SAAS,CAAC,EAAElB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEO,QAAQrB,yBAAyBC,YAAYC;QAC7CgB,UAAUA;QACVjB,YAAYA;IACd;AACF;AAyEA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,GAAG,CACxD,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","padding","height","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"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;AAsIjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAOA,uBAAAA,wBAAAA,aAAc;IACjG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,EAAEC,aAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,mBAAmB;IACnB,IAAIR,WAAWK,MAAMI,OAAO,CAAC;IAC7B,IAAIC,eAAeL,MAAMI,OAAO,CAAC;IACjC,IAAIE,eAAeN,MAAMI,OAAO,CAAC;IACjC,IAAIG,cAAcJ,gBAAgBG,eAAeD;IACjD,IAAIG,eAAeN,eAAeI,eAAeD;IACjD,IAAIX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;IAClD,IAAIiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAE9C,IAAIV,YAAY,WAAW;QACzBN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACG,KAAK,CAAClB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACG,KAAK,CAACD,QAAQ;IAC5C;IAEA,IAAIV,YAAY,eAAe;QAC7BN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAC5C;IAEA,OAAO;QACLE,SAAS,CAAC,EAAElB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEO,QAAQrB,yBAAyBC,YAAYC;QAC7CgB,UAAUA;QACVjB,YAAYA;IACd;AACF;AAmFA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,GAAG,CACxD,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}

package/dist/TransformsEditor/TransformEditor.d.ts

@@ -0,0 +1,8 @@
+import { StackProps } from '@mui/material';
+import { Transform } from '@perses-dev/core';
+export interface TransformEditorProps extends Omit<StackProps, 'children' | 'value' | 'onChange'> {
+    value: Transform;
+    onChange: (transform: Transform) => void;
+}
+export declare function TransformEditor({ value, onChange, ...props }: TransformEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransformEditor.d.ts.map

package/dist/TransformsEditor/TransformEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformEditor.d.ts","sourceRoot":"","sources":["../../src/TransformsEditor/TransformEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,UAAU,EAIX,MAAM,eAAe,CAAC;AACvB,OAAO,EAKL,SAAS,EACV,MAAM,kBAAkB,CAAC;AA2K1B,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/F,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAwClF"}

package/dist/TransformsEditor/TransformEditor.js

@@ -0,0 +1,291 @@
+// Copyright 2024 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, FormControlLabel, MenuItem, Stack, Switch, TextField, Typography } from '@mui/material';
+function JoinByColumnValueTransformEditor({ value, onChange }) {
+    var _value_spec_columns;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        children: [
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                freeSolo: true,
+                multiple: true,
+                id: "join-columns",
+                sx: {
+                    width: '100%'
+                },
+                options: [],
+                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        variant: "outlined",
+                        label: "Columns",
+                        required: true
+                    }),
+                onChange: (_, columns)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            columns: columns
+                        }
+                    });
+                }
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeColumnsTransformEditor({ value, onChange }) {
+    var _value_spec_columns, _value_spec_name;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        gap: 1,
+        alignItems: "center",
+        children: [
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                freeSolo: true,
+                multiple: true,
+                id: "merge-columns-columns",
+                sx: {
+                    width: '100%'
+                },
+                options: [],
+                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        variant: "outlined",
+                        label: "Columns",
+                        required: true
+                    }),
+                onChange: (_, columns)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            columns: columns
+                        }
+                    });
+                }
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                id: "merge-columns-name",
+                variant: "outlined",
+                label: "Output Name",
+                value: (_value_spec_name = value.spec.name) !== null && _value_spec_name !== void 0 ? _value_spec_name : '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (e)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            name: e.target.value
+                        }
+                    });
+                },
+                required: true
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeIndexedColumnsTransformEditor({ value, onChange }) {
+    var _value_spec_column;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                id: "merge-indexed-columns",
+                variant: "outlined",
+                label: "Column",
+                placeholder: "Example: 'value' for merging 'value #1', 'value #2' and 'value #...'",
+                value: (_value_spec_column = value.spec.column) !== null && _value_spec_column !== void 0 ? _value_spec_column : '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (e)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            column: e.target.value
+                        }
+                    });
+                },
+                required: true
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeSeriesTransformEditor({ value, onChange }) {
+    return /*#__PURE__*/ _jsx(Stack, {
+        direction: "row",
+        children: /*#__PURE__*/ _jsx(FormControlLabel, {
+            label: "Enabled",
+            labelPlacement: "start",
+            control: /*#__PURE__*/ _jsx(Switch, {
+                value: !value.spec.disabled,
+                checked: !value.spec.disabled,
+                onChange: (e)=>onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            disabled: !e.target.checked
+                        }
+                    })
+            })
+        })
+    });
+}
+export function TransformEditor({ value, onChange, ...props }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        mt: 1,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "Kind",
+                value: value.kind,
+                onChange: (e)=>onChange({
+                        ...value,
+                        kind: e.target.value
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "JoinByColumnValue",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Join by column value"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Regroup rows with equal cell value in a column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "MergeColumns",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Merge columns"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Multiple columns are merged to one column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "MergeIndexedColumns",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Merge indexed columns"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Indexed columns are merged to one column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "MergeSeries",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Merge series"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Series will be merged by their labels"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            value.kind === 'JoinByColumnValue' && /*#__PURE__*/ _jsx(JoinByColumnValueTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeColumns' && /*#__PURE__*/ _jsx(MergeColumnsTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeIndexedColumns' && /*#__PURE__*/ _jsx(MergeIndexedColumnsTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeSeries' && /*#__PURE__*/ _jsx(MergeSeriesTransformEditor, {
+                value: value,
+                onChange: onChange
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TransformEditor.js.map

package/dist/TransformsEditor/TransformEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TransformsEditor/TransformEditor.tsx"],"sourcesContent":["// Copyright 2024 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 {\n  Autocomplete,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  StackProps,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport {\n  JoinByColumnValueTransform,\n  MergeColumnsTransform,\n  MergeIndexedColumnsTransform,\n  MergeSeriesTransform,\n  Transform,\n} from '@perses-dev/core';\n\ninterface TransformSpecEditorProps<Spec> {\n  value: Spec;\n  onChange: (transform: Spec) => void;\n}\n\nfunction JoinByColumnValueTransformEditor({ value, onChange }: TransformSpecEditorProps<JoinByColumnValueTransform>) {\n  return (\n    <Stack direction=\"row\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"join-columns\"\n        sx={{ width: '100%' }}\n        options={[]}\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <TextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeColumnsTransformEditor({ value, onChange }: TransformSpecEditorProps<MergeColumnsTransform>) {\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"merge-columns-columns\"\n        sx={{ width: '100%' }}\n        options={[]}\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <TextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n\n      <TextField\n        id=\"merge-columns-name\"\n        variant=\"outlined\"\n        label=\"Output Name\"\n        value={value.spec.name ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(e) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              name: e.target.value,\n            },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeIndexedColumnsTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<MergeIndexedColumnsTransform>) {\n  return (\n    <Stack direction=\"row\">\n      <TextField\n        id=\"merge-indexed-columns\"\n        variant=\"outlined\"\n        label=\"Column\"\n        placeholder=\"Example: 'value' for merging 'value #1', 'value #2' and 'value #...'\"\n        value={value.spec.column ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(e) => {\n          onChange({\n            ...value,\n            spec: { ...value.spec, column: e.target.value },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeSeriesTransformEditor({ value, onChange }: TransformSpecEditorProps<MergeSeriesTransform>) {\n  return (\n    <Stack direction=\"row\">\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nexport interface TransformEditorProps extends Omit<StackProps, 'children' | 'value' | 'onChange'> {\n  value: Transform;\n  onChange: (transform: Transform) => void;\n}\n\nexport function TransformEditor({ value, onChange, ...props }: TransformEditorProps) {\n  return (\n    <Stack gap={2} sx={{ width: '100%' }} mt={1} {...props}>\n      <TextField\n        select\n        label=\"Kind\"\n        value={value.kind}\n        onChange={(e) => onChange({ ...value, kind: e.target.value as unknown as Transform['kind'] } as Transform)}\n      >\n        <MenuItem value=\"JoinByColumnValue\">\n          <Stack>\n            <Typography>Join by column value</Typography>\n            <Typography variant=\"caption\">Regroup rows with equal cell value in a column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeColumns\">\n          <Stack>\n            <Typography>Merge columns</Typography>\n            <Typography variant=\"caption\">Multiple columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeIndexedColumns\">\n          <Stack>\n            <Typography>Merge indexed columns</Typography>\n            <Typography variant=\"caption\">Indexed columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeSeries\">\n          <Stack>\n            <Typography>Merge series</Typography>\n            <Typography variant=\"caption\">Series will be merged by their labels</Typography>\n          </Stack>\n        </MenuItem>\n      </TextField>\n      {value.kind === 'JoinByColumnValue' && <JoinByColumnValueTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeColumns' && <MergeColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeIndexedColumns' && <MergeIndexedColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeSeries' && <MergeSeriesTransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n"],"names":["Autocomplete","FormControlLabel","MenuItem","Stack","Switch","TextField","Typography","JoinByColumnValueTransformEditor","value","onChange","direction","freeSolo","multiple","id","sx","width","options","spec","columns","renderInput","params","variant","label","required","_","labelPlacement","control","disabled","checked","e","target","MergeColumnsTransformEditor","gap","alignItems","name","MergeIndexedColumnsTransformEditor","placeholder","column","MergeSeriesTransformEditor","TransformEditor","props","mt","select","kind"],"mappings":"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"}

package/dist/TransformsEditor/TransformEditorContainer.d.ts

@@ -0,0 +1,9 @@
+import { TransformEditorProps } from './TransformEditor';
+export interface TransformEditorContainerProps extends TransformEditorProps {
+    index?: number;
+    isCollapsed: boolean;
+    onCollapse: (collapsed: boolean) => void;
+    onDelete: () => void;
+}
+export declare function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }: TransformEditorContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransformEditorContainer.d.ts.map

package/dist/TransformsEditor/TransformEditorContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformEditorContainer.d.ts","sourceRoot":"","sources":["../../src/TransformsEditor/TransformEditorContainer.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,6BAA8B,SAAQ,oBAAoB;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAsD/B"}

package/dist/TransformsEditor/TransformEditorContainer.js

@@ -0,0 +1,120 @@
+// Copyright 2024 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import ChevronRight from 'mdi-material-ui/ChevronRight';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import EyeOffIcon from 'mdi-material-ui/EyeOffOutline';
+import EyeIcon from 'mdi-material-ui/EyeOutline';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { TRANSFORM_TEXT } from '@perses-dev/core';
+import { TransformEditor } from './TransformEditor';
+export function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
+    var _value_spec, _value_spec1;
+    function handleTransformDisable() {
+        var _value_spec;
+        onChange({
+            ...value,
+            spec: {
+                ...value.spec,
+                disabled: !((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled)
+            }
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                borderBottom: 1,
+                borderColor: (theme)=>theme.palette.divider,
+                justifyContent: "space-between",
+                gap: 4,
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                "data-testid": `transform-toggle#${index}`,
+                                size: "small",
+                                onClick: ()=>onCollapse(!isCollapsed),
+                                children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                sx: {
+                                    textTransform: 'none'
+                                },
+                                children: value.kind ? /*#__PURE__*/ _jsx("span", {
+                                    children: /*#__PURE__*/ _jsx("strong", {
+                                        children: TRANSFORM_TEXT[value.kind]
+                                    })
+                                }) : /*#__PURE__*/ _jsx("strong", {
+                                    children: "Select a transformation kind"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            isCollapsed && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Tooltip, {
+                                        title: ((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled) ? 'Enable transformation' : 'Disable transformation',
+                                        placement: "top",
+                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                            size: "small",
+                                            sx: {
+                                                marginLeft: 'auto'
+                                            },
+                                            onClick: handleTransformDisable,
+                                            children: ((_value_spec1 = value.spec) === null || _value_spec1 === void 0 ? void 0 : _value_spec1.disabled) ? /*#__PURE__*/ _jsx(EyeOffIcon, {}) : /*#__PURE__*/ _jsx(EyeIcon, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Divider, {
+                                        flexItem: true,
+                                        orientation: "vertical",
+                                        variant: "middle"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Remove transformation",
+                                placement: "top",
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    onClick: onDelete,
+                                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ _jsx(TransformEditor, {
+                value: value,
+                onChange: onChange
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TransformEditorContainer.js.map

package/dist/TransformsEditor/TransformEditorContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TransformsEditor/TransformEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { Transform, TRANSFORM_TEXT } from '@perses-dev/core';\nimport { TransformEditor, TransformEditorProps } from './TransformEditor';\n\nexport interface TransformEditorContainerProps extends TransformEditorProps {\n  index?: number;\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n}\n\nexport function TransformEditorContainer({\n  index,\n  value,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  ...props\n}: TransformEditorContainerProps) {\n  function handleTransformDisable() {\n    onChange({ ...value, spec: { ...value.spec, disabled: !value.spec?.disabled } } as Transform);\n  }\n\n  return (\n    <Stack {...props}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton data-testid={`transform-toggle#${index}`} size=\"small\" onClick={() => onCollapse(!isCollapsed)}>\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            {value.kind ? (\n              <span>\n                <strong>{TRANSFORM_TEXT[value.kind]}</strong>\n              </span>\n            ) : (\n              <strong>Select a transformation kind</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip\n                title={value.spec?.disabled ? 'Enable transformation' : 'Disable transformation'}\n                placement=\"top\"\n              >\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleTransformDisable}>\n                  {value.spec?.disabled ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove transformation\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n        </Stack>\n      </Stack>\n      {!isCollapsed && <TransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronRight","ChevronDown","EyeOffIcon","EyeIcon","DeleteIcon","TRANSFORM_TEXT","TransformEditor","TransformEditorContainer","index","value","isCollapsed","onChange","onCollapse","onDelete","props","handleTransformDisable","spec","disabled","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","size","onClick","variant","component","sx","textTransform","kind","span","strong","title","placement","marginLeft","flexItem","orientation"],"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,SAASA,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,gBAAgB,gCAAgC;AACvD,SAAoBC,cAAc,QAAQ,mBAAmB;AAC7D,SAASC,eAAe,QAA8B,oBAAoB;AAS1E,OAAO,SAASC,yBAAyB,EACvCC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACR,GAAGC,OAC2B;QAkCTL,aAIJA;IArCjB,SAASM;YACgDN;QAAvDE,SAAS;YAAE,GAAGF,KAAK;YAAEO,MAAM;gBAAE,GAAGP,MAAMO,IAAI;gBAAEC,UAAU,GAACR,cAAAA,MAAMO,IAAI,cAAVP,kCAAAA,YAAYQ,QAAQ;YAAC;QAAE;IAChF;IAEA,qBACE,MAACpB;QAAO,GAAGiB,KAAK;;0BACd,MAACjB;gBACCqB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC7B;wBAAMqB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAC9B;gCAAW+B,eAAa,CAAC,iBAAiB,EAAEnB,MAAM,CAAC;gCAAEoB,MAAK;gCAAQC,SAAS,IAAMjB,WAAW,CAACF;0CAC3FA,4BAAc,KAACV,kCAAkB,KAACC;;0CAErC,KAACF;gCAAW+B,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;0CACvExB,MAAMyB,IAAI,iBACT,KAACC;8CACC,cAAA,KAACC;kDAAQ/B,cAAc,CAACI,MAAMyB,IAAI,CAAC;;mDAGrC,KAACE;8CAAO;;;;;kCAKd,MAACvC;wBAAMqB,WAAU;wBAAMQ,KAAK;;4BACzBhB,6BACC;;kDACE,KAACZ;wCACCuC,OAAO5B,EAAAA,cAAAA,MAAMO,IAAI,cAAVP,kCAAAA,YAAYQ,QAAQ,IAAG,0BAA0B;wCACxDqB,WAAU;kDAEV,cAAA,KAAC1C;4CAAWgC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASd;sDAC3DN,EAAAA,eAAAA,MAAMO,IAAI,cAAVP,mCAAAA,aAAYQ,QAAQ,kBAAG,KAACf,gCAAgB,KAACC;;;kDAG9C,KAACR;wCAAQ6C,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAAChC;gCAAQuC,OAAM;gCAAwBC,WAAU;0CAC/C,cAAA,KAAC1C;oCAAWgC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAAShB;8CAC5D,cAAA,KAACT;;;;;;;YAKR,CAACM,6BAAe,KAACJ;gBAAgBG,OAAOA;gBAAOE,UAAUA;;;;AAGhE"}

package/dist/TransformsEditor/TransformsEditor.d.ts

@@ -0,0 +1,8 @@
+import { Transform } from '@perses-dev/core';
+import { StackProps } from '@mui/material';
+export interface TransformsEditorProps extends Omit<StackProps, 'onChange'> {
+    value: Transform[];
+    onChange: (transforms: Transform[]) => void;
+}
+export declare function TransformsEditor({ value, onChange, ...props }: TransformsEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransformsEditor.d.ts.map

package/dist/TransformsEditor/TransformsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformsEditor.d.ts","sourceRoot":"","sources":["../../src/TransformsEditor/TransformsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAiB,UAAU,EAAE,MAAM,eAAe,CAAC;AAK1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAwDpF"}