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

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
-import { getLegendSize } from '@perses-dev/core';
+import { getLegendSize } from '@perses-dev/core'; // TODO
 import { Legend } from '../Legend';
 import { getContentWithLegendLayout } from './model/content-with-legend-model';
 /**

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core'; // TODO\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,mBAAmB,CAAC,OAAO;AACzD,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}

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

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { getLegendMode } from '@perses-dev/core';
+import { getLegendMode } from '@perses-dev/core'; //TODO
 import { getTableCellLayout } from '../../Table';
 export const TABLE_LEGEND_SIZE = {
     medium: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAA0BA,aAAa,QAAoB,mBAAmB;AAE9E,SAASC,kBAAkB,QAAQ,cAAc;AA4EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core'; //TODO\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAA0BA,aAAa,QAAoB,mBAAmB,CAAC,MAAM;AAErF,SAASC,kBAAkB,QAAQ,cAAc;AA4EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}

package/dist/FormEditor/FormActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Action } from '@perses-dev/core';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}
+{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Action } from '@perses-dev/core'; // TODO the internal permission system of Perses should not be in a shared library\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}

package/dist/FormatControls/FormatControls.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
-import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core';
+import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
 import { UnitSelector } from './UnitSelector';

package/dist/FormatControls/FormatControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAEtH,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBlB,wBAAwBe;IACjD,MAAMI,iBAAiBlB,sBAAsBc;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAACvB;gBACCK,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBjB,oBAAoBa,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAAChB;gBACCK,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACd;gBACCK,OAAM;gBACNoB,uBACE,KAACxB;oBACCW,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}
+{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,mBAAmB,CAAC,OAAO;AAE9H,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBlB,wBAAwBe;IACjD,MAAMI,iBAAiBlB,sBAAsBc;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAACvB;gBACCK,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBjB,oBAAoBa,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAAChB;gBACCK,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACd;gBACCK,OAAM;gBACNoB,uBACE,KAACxB;oBACCW,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}

package/dist/FormatControls/UnitSelector.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { UNIT_CONFIG } from '@perses-dev/core';
+import { UNIT_CONFIG } from '@perses-dev/core'; // TODO
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {

package/dist/FormatControls/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/UnitSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["UNIT_CONFIG","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAwBA,WAAW,QAAoB,mBAAmB;AAE1E,SAASC,oBAAoB,QAAQ,0BAA0B;AAY/D,MAAMC,eAAkDC,OAAOC,OAAO,CAACJ,aACpEK,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAahB,WAAW,CAACY,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACL;QACCW,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}
+{"version":3,"sources":["../../src/FormatControls/UnitSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '@perses-dev/core'; // TODO\nimport { ReactElement } from 'react';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["UNIT_CONFIG","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAwBA,WAAW,QAAoB,mBAAmB,CAAC,OAAO;AAElF,SAASC,oBAAoB,QAAQ,0BAA0B;AAY/D,MAAMC,eAAkDC,OAAOC,OAAO,CAACJ,aACpEK,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAahB,WAAW,CAACY,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACL;QACCW,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}

package/dist/Legend/Legend.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
-import { getLegendMode } from '@perses-dev/core';
+import { getLegendMode } from '@perses-dev/core'; // TODO
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend } from './TableLegend';

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactElement, ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          backgroundColor: (theme) => `${theme.palette.background.default}`,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{\n        position: 'absolute',\n        bottom: 0,\n        backgroundColor: (theme) => `${theme.palette.background.default}`,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","backgroundColor","theme","palette","background","default","bottom"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,QAA0B,gBAAgB;AAuC9D,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,4BAA4B;AAElC,OAAO,SAASC,OAAO,EACrBC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,IAAI,EACJC,aAAa,EACbC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,UAAU,EACE;IACZ,MAAMC,oBAAoB,CAACC,GAA8CC;QACvE,MAAMC,kBAAkBF,EAAEG,OAAO,IAAIH,EAAEI,QAAQ;QAE/C,MAAMC,cAActB,QAAQW,eAAe,CAACY;YAC1C,IAAIA,UAAU,OAAO;gBACnB,OAAO;oBACL,CAACL,SAAS,EAAE;gBACd;YACF;YAEA,MAAMM,aAAa,CAAC,CAACD,KAAK,CAACL,SAAS;YAEpC,sDAAsD;YACtD,IAAIC,iBAAiB;gBACnB,IAAIK,YAAY;oBACd,6DAA6D;oBAC7D,OAAOD,KAAK,CAACL,SAAS;gBACxB,OAAO;oBACL,+CAA+C;oBAC/CK,KAAK,CAACL,SAAS,GAAG;gBACpB;gBACA,OAAOK;YACT;YAEA,IAAIC,YAAY;gBACd,+DAA+D;gBAC/D,aAAa;gBACb,OAAO;YACT;YAEA,uBAAuB;YACvB,OAAO;gBAAE,CAACN,SAAS,EAAE;YAAK;QAC5B;QACAN,sBAAsBU;IACxB;IAEA,MAAMG,OAAOxB,cAAcQ,QAAQgB,IAAI;IAEvC,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMC,sBAAsBhB,KAAKiB,MAAM,IAAItB;IAE3C,MAAMuB,oBAAoB;QACxBpB;QACAqB,OAAOnB;QACPC;QACAK;QACAH;QACAC;IACF;IAEA,IAAIgB;IACJ,IAAIL,SAAS,SAAS;QACpBK,8BACE,KAAC1B;YAAa,GAAGwB,iBAAiB;YAAEhB,uBAAuBA;YAAuBL,OAAOA;YAAQ,GAAGQ,UAAU;;IAElH,OAAO,IAAIN,QAAQsB,QAAQ,KAAK,WAAWL,qBAAqB;QAC9DI,8BAAgB,KAAC5B;YAAY,GAAG0B,iBAAiB;YAAErB,OAAOA;YAAOS,mBAAmBA;;IACtF,OAAO;QACLc,8BAAgB,KAAC3B;YAAe,GAAGyB,iBAAiB;YAAEZ,mBAAmBA;;IAC3E;IAEA,IAAIP,QAAQsB,QAAQ,KAAK,SAAS;QAChC,qBACE,KAAChC;YACCiC,OAAO;gBACLzB,OAAOA;gBACPC,QAAQA;YACV;YACAyB,IAAI;gBACFF,UAAU;gBACVG,KAAK;gBACLC,OAAO;gBACPC,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;YACnE;sBAECV;;IAGP;IAEA,kBAAkB;IAClB,qBACE,KAAC/B;QACCiC,OAAO;YACLzB,OAAOA;YACPC,QAAQA;QACV;QACAyB,IAAI;YACFF,UAAU;YACVU,QAAQ;YACRL,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;QACnE;kBAECV;;AAGP"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactElement, ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core'; // TODO\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          backgroundColor: (theme) => `${theme.palette.background.default}`,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{\n        position: 'absolute',\n        bottom: 0,\n        backgroundColor: (theme) => `${theme.palette.background.default}`,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","backgroundColor","theme","palette","background","default","bottom"],"mappings":"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"}

package/dist/Legend/legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/legend-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LegendOptionsBase } from '@perses-dev/core';\n\n// This file contains legend-related model code specific to the legend component.\n// See the `core` package for common/shared legend model code and the\n// `plugin-system` package for legend model code specific to panel plugin specs.\n\n// Note: explicitly defining different options for the legend component and\n// legend spec that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendComponentOptions = LegendOptionsBase;\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n\n  /**\n   * Additional data for the legend item. Useful for laying out additional\n   * columns when using a table legend.\n   */\n  data?: Record<string, unknown>;\n\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * State of selected items in the legend.\n * - When \"ALL\", all legend items are selected, but not visually highlighted.\n * - Otherwise, it is a Record that associates legend item ids with a boolean\n *   value. When the associated entry for a legend item is `true`, that item\n *   will be treated as selected and visually highlighted.\n */\nexport type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';\n\nexport function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState): boolean {\n  // In the \"ALL\" case, technically all legend items are selected, but we do\n  // not render them differently.\n  return selectedItems !== 'ALL' && !!selectedItems[item.id];\n}\n"],"names":["isLegendItemVisuallySelected","item","selectedItems","id"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAqCjC,OAAO,SAASA,6BAA6BC,IAAgB,EAAEC,aAAsC;IACnG,0EAA0E;IAC1E,+BAA+B;IAC/B,OAAOA,kBAAkB,SAAS,CAAC,CAACA,aAAa,CAACD,KAAKE,EAAE,CAAC;AAC5D"}
+{"version":3,"sources":["../../src/Legend/legend-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LegendOptionsBase } from '@perses-dev/core'; // TODO\n\n// This file contains legend-related model code specific to the legend component.\n// See the `core` package for common/shared legend model code and the\n// `plugin-system` package for legend model code specific to panel plugin specs.\n\n// Note: explicitly defining different options for the legend component and\n// legend spec that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendComponentOptions = LegendOptionsBase;\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n\n  /**\n   * Additional data for the legend item. Useful for laying out additional\n   * columns when using a table legend.\n   */\n  data?: Record<string, unknown>;\n\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * State of selected items in the legend.\n * - When \"ALL\", all legend items are selected, but not visually highlighted.\n * - Otherwise, it is a Record that associates legend item ids with a boolean\n *   value. When the associated entry for a legend item is `true`, that item\n *   will be treated as selected and visually highlighted.\n */\nexport type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';\n\nexport function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState): boolean {\n  // In the \"ALL\" case, technically all legend items are selected, but we do\n  // not render them differently.\n  return selectedItems !== 'ALL' && !!selectedItems[item.id];\n}\n"],"names":["isLegendItemVisuallySelected","item","selectedItems","id"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAqCjC,OAAO,SAASA,6BAA6BC,IAAgB,EAAEC,aAAsC;IACnG,0EAA0E;IAC1E,+BAA+B;IAC/B,OAAOA,kBAAkB,SAAS,CAAC,CAACA,aAAa,CAACD,KAAKE,EAAE,CAAC;AAC5D"}

package/dist/LinksEditor/LinksEditor.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement } from 'react';
 import { Control } from 'react-hook-form';
-import { PanelEditorValues } from '@perses-dev/core';
+import { PanelEditorValues } from '@perses-dev/spec';
 export interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {
     control: Control<PanelEditorValues>;
 }

package/dist/LinksEditor/LinksEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Fragment, HTMLAttributes, ReactElement } from 'react';\nimport { Divider, IconButton, Stack, Typography } from '@mui/material';\nimport { Controller, useFieldArray, Control } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { LinkEditorForm } from './LinkEditorForm';\n\nexport interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {\n  control: Control<PanelEditorValues>;\n}\n\nexport function LinksEditor({ control, ...props }: LinksEditorProps): ReactElement {\n  const { fields, append, remove } = useFieldArray({\n    control: control,\n    name: 'panelDefinition.spec.links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl control={control} index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton\n        style={{ width: 'fit-content', height: 'fit-content' }}\n        onClick={() => append({ url: '', name: '', tooltip: '', renderVariables: false, targetBlank: false })}\n      >\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ control, index }: { control: Control<PanelEditorValues>; index: number }): ReactElement {\n  const defaultLink = { url: '', name: '', tooltip: '', renderVariables: false, targetBlank: false };\n  return (\n    <Controller\n      control={control}\n      name={`panelDefinition.spec.links.${index}`}\n      render={({ field, field: { value: link }, fieldState }) => {\n        const safeLink = link ?? defaultLink;\n        return (\n          <LinkEditorForm\n            mode=\"inline\"\n            url={{\n              value: safeLink.url,\n              label: 'URL',\n              error: { hasError: !!fieldState.error, helperText: fieldState.error?.message },\n              onChange: (url) => {\n                field.onChange({ ...link, url });\n              },\n            }}\n            newTabOpen={{\n              value: !!safeLink.targetBlank,\n              onChange: (targetBlank) => {\n                field.onChange({ ...link, targetBlank });\n              },\n              label: 'Open in new tab',\n            }}\n            name={{\n              value: safeLink.name ?? '',\n              label: 'Name',\n              onChange: (name) => {\n                field.onChange({ ...link, name });\n              },\n            }}\n            renderVariables={{\n              value: !!safeLink.renderVariables,\n              label: 'Render variables',\n              onChange: (renderVariables) => {\n                field.onChange({ ...link, renderVariables });\n              },\n            }}\n            tooltip={{\n              value: safeLink.tooltip ?? '',\n              label: 'Tooltip',\n              onChange: (tooltip) => {\n                field.onChange({ ...link, tooltip });\n              },\n            }}\n          />\n        );\n      }}\n    />\n  );\n}\n"],"names":["Fragment","Divider","IconButton","Stack","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinkEditorForm","LinksEditor","control","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","tooltip","renderVariables","targetBlank","defaultLink","render","value","link","fieldState","safeLink","mode","label","error","hasError","helperText","message","onChange","newTabOpen"],"mappings":"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"}
+{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Fragment, HTMLAttributes, ReactElement } from 'react';\nimport { Divider, IconButton, Stack, Typography } from '@mui/material';\nimport { Controller, useFieldArray, Control } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { PanelEditorValues } from '@perses-dev/spec';\nimport { LinkEditorForm } from './LinkEditorForm';\n\nexport interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {\n  control: Control<PanelEditorValues>;\n}\n\nexport function LinksEditor({ control, ...props }: LinksEditorProps): ReactElement {\n  const { fields, append, remove } = useFieldArray({\n    control: control,\n    name: 'panelDefinition.spec.links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl control={control} index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton\n        style={{ width: 'fit-content', height: 'fit-content' }}\n        onClick={() => append({ url: '', name: '', tooltip: '', renderVariables: false, targetBlank: false })}\n      >\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ control, index }: { control: Control<PanelEditorValues>; index: number }): ReactElement {\n  const defaultLink = { url: '', name: '', tooltip: '', renderVariables: false, targetBlank: false };\n  return (\n    <Controller\n      control={control}\n      name={`panelDefinition.spec.links.${index}`}\n      render={({ field, field: { value: link }, fieldState }) => {\n        const safeLink = link ?? defaultLink;\n        return (\n          <LinkEditorForm\n            mode=\"inline\"\n            url={{\n              value: safeLink.url,\n              label: 'URL',\n              error: { hasError: !!fieldState.error, helperText: fieldState.error?.message },\n              onChange: (url) => {\n                field.onChange({ ...link, url });\n              },\n            }}\n            newTabOpen={{\n              value: !!safeLink.targetBlank,\n              onChange: (targetBlank) => {\n                field.onChange({ ...link, targetBlank });\n              },\n              label: 'Open in new tab',\n            }}\n            name={{\n              value: safeLink.name ?? '',\n              label: 'Name',\n              onChange: (name) => {\n                field.onChange({ ...link, name });\n              },\n            }}\n            renderVariables={{\n              value: !!safeLink.renderVariables,\n              label: 'Render variables',\n              onChange: (renderVariables) => {\n                field.onChange({ ...link, renderVariables });\n              },\n            }}\n            tooltip={{\n              value: safeLink.tooltip ?? '',\n              label: 'Tooltip',\n              onChange: (tooltip) => {\n                field.onChange({ ...link, tooltip });\n              },\n            }}\n          />\n        );\n      }}\n    />\n  );\n}\n"],"names":["Fragment","Divider","IconButton","Stack","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinkEditorForm","LinksEditor","control","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","tooltip","renderVariables","targetBlank","defaultLink","render","value","link","fieldState","safeLink","mode","label","error","hasError","helperText","message","onChange","newTabOpen"],"mappings":"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"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts

@@ -1,4 +1,4 @@
-import { DurationString } from '@perses-dev/core';
+import { DurationString } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 import { TimeOption } from '../model';
 interface RefreshIntervalPickerProps {

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={value}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${value}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IAEjD,oHAAoH;IACpH,MAAMK,iBAAiBP,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYG,IAAI,CAAC,CAACC,SAAWA,OAAON,KAAK,CAACO,YAAY,KAAKP,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCY,IAAG;gBACHR,OAAOA;gBACPC,UAAU,CAACQ;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACX,KAAK;oBACnCC,SAASS;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAEZ,OAAO;gBACpE;gBACAa,IAAI;oBACF,qBAAqBV,SAAS;wBAAEW,YAAYX;wBAAQY,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECb,YAAYc,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACvB;4BAAmBK,OAAOiB,KAAKjB,KAAK,CAACO,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/spec';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={value}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${value}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IAEjD,oHAAoH;IACpH,MAAMK,iBAAiBP,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYG,IAAI,CAAC,CAACC,SAAWA,OAAON,KAAK,CAACO,YAAY,KAAKP,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCY,IAAG;gBACHR,OAAOA;gBACPC,UAAU,CAACQ;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACX,KAAK;oBACnCC,SAASS;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAEZ,OAAO;gBACpE;gBACAa,IAAI;oBACF,qBAAqBV,SAAS;wBAAEW,YAAYX;wBAAQY,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECb,YAAYc,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACvB;4BAAmBK,OAAOiB,KAAKjB,KAAK,CAACO,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}

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

@@ -1,5 +1,5 @@
 import { Theme } from '@mui/material';
-import { Link } from '@perses-dev/core';
+import { Link } from '@perses-dev/spec';
 import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 export declare const DEFAULT_COLUMN_WIDTH = 150;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/core';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n\n  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n          dataLink,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/spec';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n\n  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n          dataLink,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/ThresholdsEditor/ThresholdInput.js.map

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

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

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

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { AbsoluteTimeRange } from '@perses-dev/core';
-interface AbsoluteTimeFormProps {
+import { AbsoluteTimeRange } from '@perses-dev/spec';
+export interface AbsoluteTimeFormProps {
     initialTimeRange: AbsoluteTimeRange;
     onChange: (timeRange: AbsoluteTimeRange) => void;
     onCancel: () => void;
@@ -16,5 +16,4 @@ interface AbsoluteTimeFormProps {
  * @constructor
  */
 export declare const DateTimeRangePicker: ({ initialTimeRange, onChange, onCancel, timeZone, }: AbsoluteTimeFormProps) => ReactElement;
-export {};
 //# sourceMappingURL=DateTimeRangePicker.d.ts.map

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAsJ1B,CAAC"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAuJ1B,CAAC"}

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -144,6 +144,7 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DateTimeField, {
+                                "data-testid": "start_time_input",
                                 timezone: stdTimeZone,
                                 label: "Start Time",
                                 value: new TZDate(timeRange.start, stdTimeZone),
@@ -159,6 +160,7 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DateTimeField, {
+                                "data-testid": "end_time_input",
                                 timezone: stdTimeZone,
                                 label: "End Time",
                                 value: new TZDate(timeRange.end, stdTimeZone),