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

package/dist/ValueMappingEditor/ValueMappingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.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, Typography, Grid2 as Grid } from '@mui/material';\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core'; // TODO\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","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,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAClF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.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, Typography, Grid2 as Grid } from '@mui/material';\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '../model';\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","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,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAClF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}

package/dist/YAxisLabel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 export function YAxisLabel({ name, height }) {
     return /*#__PURE__*/ _jsx(Box, {

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.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, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement {\n  return (\n    <Box\n      style={{\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        top: `calc(${height}px / 2)`,\n      }}\n      sx={{\n        display: 'inline-block',\n        position: 'absolute',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","style","maxWidth","top","sx","display","position","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"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,UAAU,QAAQ,gBAAgB;AAQhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,OAAO;YACLC,UAAUF;YACVG,KAAK,CAAC,KAAK,EAAEH,OAAO,OAAO,CAAC;QAC9B;QACAI,IAAI;YACFC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACb;YACCc,SAAQ;YACRC,cAAW;YACXR,IAAI;gBACFS,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAEChB;;;AAIT"}
+{"version":3,"sources":["../src/YAxisLabel.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, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement {\n  return (\n    <Box\n      style={{\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        top: `calc(${height}px / 2)`,\n      }}\n      sx={{\n        display: 'inline-block',\n        position: 'absolute',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","style","maxWidth","top","sx","display","position","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"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,UAAU,QAAQ,gBAAgB;AAQhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,OAAO;YACLC,UAAUF;YACVG,KAAK,CAAC,KAAK,EAAEH,OAAO,OAAO,CAAC;QAC9B;QACAI,IAAI;YACFC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACb;YACCc,SAAQ;YACRC,cAAW;YACXR,IAAI;gBACFS,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAEChB;;;AAIT"}

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "ContentWithLegend", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
+const _model = require("../model");
 const _Legend = require("../Legend");
 const _contentwithlegendmodel = require("./model/content-with-legend-model");
 function ContentWithLegend({ children, legendProps, width, height, spacing = 0, legendSize, minChildrenWidth = 100, minChildrenHeight = 100 }) {
@@ -35,7 +35,7 @@ function ContentWithLegend({ children, legendProps, width, height, spacing = 0,
         minChildrenWidth,
         spacing,
         theme,
-        legendSize: (0, _core.getLegendSize)(legendSize)
+        legendSize: (0, _model.getLegendSize)(legendSize)
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         style: {

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

@@ -28,7 +28,7 @@ _export(exports, {
         return getContentWithLegendLayout;
     }
 });
-const _core = require("@perses-dev/core");
+const _model = require("../../model");
 const _Table = require("../../Table");
 const TABLE_LEGEND_SIZE = {
     medium: {
@@ -69,7 +69,7 @@ function getContentWithLegendLayout({ width, height, legendProps, legendSize, mi
         return noLegendLayout;
     }
     const { position } = legendOptions;
-    const mode = (0, _core.getLegendMode)(legendOptions.mode);
+    const mode = (0, _model.getLegendMode)(legendOptions.mode);
     let legendWidth;
     let legendHeight;
     if (mode === 'list') {

package/dist/cjs/FormatControls/FormatControls.js

@@ -22,9 +22,9 @@ Object.defineProperty(exports, "FormatControls", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
 const _OptionsEditorLayout = require("../OptionsEditorLayout");
 const _SettingsAutocomplete = require("../SettingsAutocomplete");
+const _model = require("../model");
 const _UnitSelector = require("./UnitSelector");
 const DECIMAL_PLACES_OPTIONS = [
     {
@@ -62,8 +62,8 @@ function getOptionByDecimalPlaces(decimalPlaces) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
 }
 function FormatControls({ value, onChange, disabled = false }) {
-    const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
-    const hasShortValues = (0, _core.isUnitWithShortValues)(value);
+    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
+    const hasShortValues = (0, _model.isUnitWithShortValues)(value);
     const handleUnitChange = (newValue)=>{
         onChange(newValue || {
             unit: 'decimal'
@@ -90,7 +90,7 @@ function FormatControls({ value, onChange, disabled = false }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Short values",
                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: hasShortValues ? (0, _core.shouldShortenValues)(value.shortValues) : false,
+                    checked: hasShortValues ? (0, _model.shouldShortenValues)(value.shortValues) : false,
                     onChange: handleShortValuesChange,
                     disabled: !hasShortValues
                 })

package/dist/cjs/FormatControls/UnitSelector.js

@@ -21,9 +21,9 @@ Object.defineProperty(exports, "UnitSelector", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _core = require("@perses-dev/core");
 const _SettingsAutocomplete = require("../SettingsAutocomplete");
-const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
+const _model = require("../model");
+const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
     return {
         ...config,
         id: id,
@@ -31,7 +31,7 @@ const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
     };
 }).filter((config)=>!config.disableSelectorOption);
 function UnitSelector({ value, onChange, disabled = false, ...otherProps }) {
-    const unitConfig = _core.UNIT_CONFIG[value?.unit || 'decimal'];
+    const unitConfig = _model.UNIT_CONFIG[value?.unit || 'decimal'];
     const handleChange = (_, newValue)=>{
         if (newValue === null) {
             onChange(undefined);

package/dist/cjs/Legend/Legend.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "Legend", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _immer = require("immer");
-const _core = require("@perses-dev/core");
+const _model = require("../model");
 const _ListLegend = require("./ListLegend");
 const _CompactLegend = require("./CompactLegend");
 const _TableLegend = require("./TableLegend");
@@ -66,7 +66,7 @@ function Legend({ width, height, options, data, selectedItems, onSelectedItemsCh
         });
         onSelectedItemsChange(newSelected);
     };
-    const mode = (0, _core.getLegendMode)(options.mode);
+    const mode = (0, _model.getLegendMode)(options.mode);
     // The bottom legend is displayed as a list when the number of items is too
     // large and requires virtualization. Otherwise, it is rendered more compactly.
     // We do not need this check for the right-side legend because it is always

package/dist/cjs/Legend/TableLegend.js

@@ -28,6 +28,7 @@ const COLUMNS = [
         accessorKey: 'label',
         header: 'Name',
         enableSorting: true,
+        enableResizing: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -43,6 +44,8 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
+// This is a rough estimate of value that needs to be subtracted from the total width to avoid horizontal scrolling on initial render
+const TABLE_PADDING = 45;
 function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns = [], sorting, onSortingChange }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
@@ -56,12 +59,23 @@ function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsCh
         items
     ]);
     const columns = (0, _react.useMemo)(()=>{
+        // Calculate column widths to fit the container on initial render, avoiding unnecessary horizontal scrolling.
+        // Falls back to a default width if available width is too small; the user can resize columns as needed.
+        const additionalColumnsLength = additionalColumns?.reduce((colWidth, col)=>{
+            return colWidth + (typeof col.width === 'number' ? col.width : _Table.DEFAULT_COLUMN_WIDTH);
+        }, 0) ?? 0;
+        const availableWidth = Math.max(width - additionalColumnsLength - TABLE_PADDING, _Table.DEFAULT_COLUMN_MIN_WIDTH * COLUMNS.length);
+        const columnWidth = availableWidth / COLUMNS.length;
         return [
-            ...COLUMNS,
+            ...COLUMNS.map((column)=>({
+                    ...column,
+                    width: columnWidth
+                })),
             ...additionalColumns
         ];
     }, [
-        additionalColumns
+        additionalColumns,
+        width
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Table.Table, {
         height: height,

package/dist/cjs/Table/Table.js

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _reacttable = require("@tanstack/react-table");
 const _react = require("react");
+const _useFuzzySearch = require("./hooks/useFuzzySearch");
 const _TableCheckbox = require("./TableCheckbox");
 const _VirtualizedTable = require("./VirtualizedTable");
 const _tablemodel = require("./model/table-model");
@@ -35,8 +36,15 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', getSubRows, hiddenColumns, tableToolbarConfig, columnResizeMode = 'onChange', defaultColumnConfig, ...otherProps }) {
     const theme = (0, _material.useTheme)();
+    const hasSubRows = !!getSubRows;
+    const [expanded, setExpanded] = (0, _react.useState)({});
+    const { globalFilter, setGlobalFilter, fuzzySearchOptions } = (0, _useFuzzySearch.useFuzzySearch)(tableToolbarConfig?.isSearchEnabled, tableToolbarConfig?.fuzzyMatchThreshold ?? 'CONTAINS', expanded, setExpanded);
+    const [columnVisibility, setColumnVisibility] = (0, _react.useState)(hiddenColumns?.reduce((acc, columnId)=>({
+            ...acc,
+            [columnId]: false
+        }), {}) ?? {});
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
         onRowSelectionChange?.(newRowSelection);
@@ -87,7 +95,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                     })
                 });
             },
-            enableSorting: false
+            enableSorting: false,
+            enableResizing: false
         };
     }, [
         getItemActions
@@ -116,7 +125,8 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
                     density: density
                 });
             },
-            enableSorting: false
+            enableSorting: false,
+            enableResizing: false
         };
     }, [
         theme.palette.text.primary,
@@ -125,7 +135,7 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         handleCheckboxChange
     ]);
     const tableColumns = (0, _react.useMemo)(()=>{
-        const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns);
+        const initTableColumns = (0, _tablemodel.persesColumnsToTanstackColumns)(columns, defaultColumnConfig);
         if (hasItemActions) {
             initTableColumns.unshift(actionsColumn);
         }
@@ -134,16 +144,17 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         }
         return initTableColumns;
     }, [
-        checkboxColumn,
-        checkboxSelection,
         columns,
+        defaultColumnConfig,
         hasItemActions,
-        actionsColumn
+        checkboxSelection,
+        actionsColumn,
+        checkboxColumn
     ]);
     const table = (0, _reacttable.useReactTable)({
         data,
         columns: tableColumns,
-        getRowId,
+        getRowId: getRowId,
         getCoreRowModel: (0, _reacttable.getCoreRowModel)(),
         getSortedRowModel: (0, _reacttable.getSortedRowModel)(),
         getPaginationRowModel: pagination ? (0, _reacttable.getPaginationRowModel)() : undefined,
@@ -153,15 +164,24 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
         onSortingChange: handleSortingChange,
+        onColumnVisibilityChange: setColumnVisibility,
+        getSubRows: getSubRows,
+        getExpandedRowModel: hasSubRows ? (0, _reacttable.getExpandedRowModel)() : undefined,
+        ...fuzzySearchOptions,
         // For now, defaulting to sort by descending first. We can expose the ability
         // to customize it if/when we have use cases for it.
         sortDescFirst: true,
+        columnResizeMode,
+        onExpandedChange: setExpanded,
         state: {
             rowSelection,
             sorting,
+            globalFilter: tableToolbarConfig?.isSearchEnabled ? globalFilter : undefined,
+            columnVisibility,
             ...pagination ? {
                 pagination
-            } : {}
+            } : {},
+            expanded
         }
     });
     const handleRowClick = (0, _react.useCallback)((e, rowId)=>{
@@ -179,11 +199,24 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         defaultColumnHeight: defaultColumnHeight,
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
-        columns: table.getAllFlatColumns(),
+        columns: table.getVisibleFlatColumns(),
+        columnSizing: table.getState().columnSizing,
+        columnSizingInfo: table.getState().columnSizingInfo,
         headers: table.getHeaderGroups(),
         cellConfigs: cellConfigs,
         pagination: pagination,
         onPaginationChange: onPaginationChange,
-        rowCount: table.getRowCount()
+        rowCount: table.getRowCount(),
+        toolbarConfig: {
+            isSearchEnabled: tableToolbarConfig?.isSearchEnabled,
+            globalFilter,
+            onGlobalFilterChange: setGlobalFilter,
+            isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,
+            columns: table.getAllColumns(),
+            columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight,
+            isExpandAllEnabled: hasSubRows,
+            isAllExpanded: table.getIsAllRowsExpanded(),
+            onExpandAllChange: table.getToggleAllRowsExpandedHandler()
+        }
     });
 }

package/dist/cjs/Table/TableHeaderCell.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "TableHeaderCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
+function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, resizeConfig, ...cellProps }) {
     const showSortLabel = !!onSort;
     const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         noWrap: true,
@@ -34,28 +34,60 @@ function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, .
     });
     const isActive = !!sortDirection;
     const direction = isActive ? sortDirection : nextSortDirection;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TableCell.TableCell, {
         ...cellProps,
-        children: showSortLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
-            onClick: onSort,
-            direction: direction,
-            active: isActive,
-            sx: {
-                // Overrides a default vertical alignment in the CSS that changes
-                // the header vertical rhythm in a way that's inconsistent with
-                // non-sorting headers.
-                verticalAlign: 'unset',
-                // Makes it possible to ellipsize the text if it's too long.
-                maxWidth: '100%',
-                // Make the arrow visible when focused using the keyboard to assist
-                // with a11y.
-                '&:focus-visible': {
-                    [`& .${_material.tableSortLabelClasses.icon}`]: {
-                        opacity: isActive ? 1 : 0.5
+        children: [
+            showSortLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                onClick: onSort,
+                direction: direction,
+                active: isActive,
+                sx: {
+                    // Overrides a default vertical alignment in the CSS that changes
+                    // the header vertical rhythm in a way that's inconsistent with
+                    // non-sorting headers.
+                    verticalAlign: 'unset',
+                    // Makes it possible to ellipsize the text if it's too long.
+                    maxWidth: '100%',
+                    // Make the arrow visible when focused using the keyboard to assist
+                    // with a11y.
+                    '&:focus-visible': {
+                        [`& .${_material.tableSortLabelClasses.icon}`]: {
+                            opacity: isActive ? 1 : 0.5
+                        }
                     }
-                }
-            },
-            children: headerText
-        }) : headerText
+                },
+                children: headerText
+            }) : headerText,
+            resizeConfig && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                onMouseDown: (e)=>{
+                    if (e.detail === 2) {
+                        resizeConfig.resetSizeHandler();
+                        return;
+                    }
+                    resizeConfig.resizeHandler(e);
+                },
+                onTouchStart: resizeConfig.resizeHandler,
+                sx: {
+                    position: 'absolute',
+                    height: '100%',
+                    top: 0,
+                    right: '4px',
+                    cursor: 'col-resize'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    flexItem: true,
+                    orientation: "vertical",
+                    sx: (theme)=>({
+                            backgroundColor: resizeConfig.isResizing ? theme.palette.action.active : theme.palette.divider,
+                            borderRadius: '2px',
+                            borderWidth: '2px',
+                            height: '100%',
+                            touchAction: 'none',
+                            transform: 'translateX(4px)',
+                            userSelect: 'none'
+                        })
+                })
+            })
+        ]
     });
 }

package/dist/cjs/Table/TableToolbar.js

@@ -0,0 +1,151 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableToolbar", {
+    enumerable: true,
+    get: function() {
+        return TableToolbar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
+const _ViewColumn = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ViewColumn"));
+const _UnfoldMoreHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldMoreHorizontal"));
+const _UnfoldLessHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldLessHorizontal"));
+const _controls = require("../controls");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400, isExpandAllEnabled, isAllExpanded, onExpandAllChange }) {
+    const [colMenuAnchor, setColMenuAnchor] = (0, _react.useState)(null);
+    const colMenuOpen = Boolean(colMenuAnchor);
+    const [searchResetKey, setSearchResetKey] = (0, _react.useState)(0);
+    const handleSearchClear = (0, _react.useCallback)(()=>{
+        onGlobalFilterChange('');
+        setSearchResetKey((prev)=>prev + 1);
+    }, [
+        onGlobalFilterChange
+    ]);
+    if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "flex-end",
+        width: width,
+        padding: "0.5rem",
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        children: [
+            isSearchEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
+                placeholder: "Search...",
+                value: globalFilter,
+                onChange: onGlobalFilterChange,
+                variant: "standard",
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': 'search table'
+                    },
+                    input: {
+                        startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                            position: "start",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
+                                fontSize: "small"
+                            })
+                        }),
+                        endAdornment: globalFilter !== '' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                            position: "end",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: handleSearchClear,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    }
+                },
+                sx: {
+                    flexGrow: 1
+                }
+            }, searchResetKey),
+            isExpandAllEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                title: isAllExpanded ? 'Collapse all' : 'Expand all',
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    onClick: onExpandAllChange,
+                    color: "info",
+                    "aria-label": isAllExpanded ? 'collapse all rows' : 'expand all rows',
+                    children: isAllExpanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldLessHorizontal.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldMoreHorizontal.default, {})
+                })
+            }),
+            isColumnFilterEnabled && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: (e)=>setColMenuAnchor(e.currentTarget),
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": colMenuOpen,
+                        color: "info",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewColumn.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                        anchorEl: colMenuAnchor,
+                        open: colMenuOpen,
+                        onClose: ()=>setColMenuAnchor(null),
+                        slotProps: {
+                            list: {
+                                dense: true
+                            }
+                        },
+                        sx: {
+                            maxHeight: columnFilterMenuMaxHeight
+                        },
+                        children: columns.map((column)=>{
+                            const header = column.columnDef.header;
+                            const label = typeof header === 'string' ? header : column.id;
+                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                disabled: !column.getCanHide(),
+                                onClick: column.getCanHide() ? column.getToggleVisibilityHandler() : undefined,
+                                dense: true,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        checked: column.getIsVisible(),
+                                        disabled: !column.getCanHide(),
+                                        size: "small",
+                                        disableRipple: true,
+                                        sx: {
+                                            p: 0,
+                                            mr: 1
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                                        primary: label
+                                    })
+                                ]
+                            }, column.id);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}