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

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'; // 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"}
+{"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/components'; // 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.d.ts

@@ -1,5 +1,5 @@
-import { FormatOptions } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { FormatOptions } from '../model';
 export interface FormatControlsProps {
     value: FormatOptions;
     onChange: (unit: FormatOptions) => void;

package/dist/FormatControls/FormatControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAuE,MAAM,kBAAkB,CAAC;AACtH,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}
+{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAuE,MAAM,UAAU,CAAC;AAG9G,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}

package/dist/FormatControls/FormatControls.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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,11 +11,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
-import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
+import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';
 import { UnitSelector } from './UnitSelector';
 const DECIMAL_PLACES_OPTIONS = [
     {

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'; // 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"}
+{"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';\n\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\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","OptionsEditorControl","SettingsAutocomplete","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","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;AAGpD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,WAAW;AAC9G,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,mBAAmBhB,wBAAwBa;IACjD,MAAMI,iBAAiBhB,sBAAsBY;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,KAAC1B;gBACCQ,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBf,oBAAoBW,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAACnB;gBACCQ,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACjB;gBACCQ,OAAM;gBACNoB,uBACE,KAAC3B;oBACCc,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.d.ts

@@ -1,5 +1,5 @@
-import { FormatOptions } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { FormatOptions } from '../model';
 export interface UnitSelectorProps {
     value?: FormatOptions;
     onChange: (format: FormatOptions | undefined) => void;

package/dist/FormatControls/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAA2B,MAAM,UAAU,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}

package/dist/FormatControls/UnitSelector.js

@@ -11,8 +11,8 @@
 // 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'; // TODO
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
+import { UNIT_CONFIG } from '../model';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
         ...config,

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'; // 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"}
+{"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 { ReactElement } from 'react';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '../model';\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":["SettingsAutocomplete","UNIT_CONFIG","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;;AAGjC,SAASA,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,WAAW,QAAoB,WAAW;AAYlE,MAAMC,eAAkDC,OAAOC,OAAO,CAACH,aACpEI,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,aAAaf,WAAW,CAACW,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,KAACN;QACCY,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/JSONEditor.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 { useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json, jsonParseLinter } from '@codemirror/lang-json';

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.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, useState } from 'react';\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n        // Trigger the provided onChange callback in real-time\n        if (props.onChange) {\n          props.onChange(newValue);\n        }\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,gBAA0C,wBAAwB;AACzE,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AAQzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErE,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,EAAE;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;YACT,sDAAsD;YACtD,IAAIhB,MAAMe,QAAQ,EAAE;gBAClBf,MAAMe,QAAQ,CAACC;YACjB;QACF;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}
+{"version":3,"sources":["../src/JSONEditor.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, useState } from 'react';\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n        // Trigger the provided onChange callback in real-time\n        if (props.onChange) {\n          props.onChange(newValue);\n        }\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,gBAA0C,wBAAwB;AACzE,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AAQzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErE,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,EAAE;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;YACT,sDAAsD;YACtD,IAAIhB,MAAMe,QAAQ,EAAE;gBAClBf,MAAMe,QAAQ,CAACC;YACjB;QACF;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}

package/dist/Legend/CompactLegend.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 } from '@mui/material';
 import { ListLegendItem } from './ListLegendItem';
 import { isLegendItemVisuallySelected } from './legend-model';

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.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 { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","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;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACjB;gBAECgB,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBjB,6BAA6Be,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.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 { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","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;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACjB;gBAECgB,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBjB,6BAA6Be,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}

package/dist/Legend/Legend.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,10 +11,9 @@
 // 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 } from '@mui/material';
 import { produce } from 'immer';
-import { getLegendMode } from '@perses-dev/core'; // TODO
+import { getLegendMode } from '../model';
 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'; // 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":"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,CAAC,OAAO;AACzD,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 '../model';\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,WAAW;AACzC,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"}

package/dist/Legend/LegendColorBadge.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 { memo } from 'react';
 import { Box } from '@mui/material';
 import { combineSx } from '../utils';

package/dist/Legend/LegendColorBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/LegendColorBadge.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 { memo, ReactElement } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["memo","Box","combineSx","LegendColorBadge","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"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,IAAI,QAAsB,QAAQ;AAC3C,SAASC,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,MAAMC,iCAAmBH,KAAK,SAASG,iBAAiB,EAC7DC,KAAK,EACLC,EAAE,EACF,GAAGC,QACmB;IACtB,qBACE,KAACL;QACE,GAAGK,MAAM;QACVD,IAAIH,UACF;YACEK,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,OAAO,CAAC;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.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 { memo, ReactElement } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["memo","Box","combineSx","LegendColorBadge","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"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,IAAI,QAAsB,QAAQ;AAC3C,SAASC,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,MAAMC,iCAAmBH,KAAK,SAASG,iBAAiB,EAC7DC,KAAK,EACLC,EAAE,EACF,GAAGC,QACmB;IACtB,qBACE,KAACL;QACE,GAAGK,MAAM;QACVD,IAAIH,UACF;YACEK,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,OAAO,CAAC;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}

package/dist/Legend/ListLegend.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 { Virtuoso } from 'react-virtuoso';
 import { ListLegendItem } from './ListLegendItem';
 import { isLegendItemVisuallySelected } from './legend-model';

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.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 { Virtuoso } from 'react-virtuoso';\nimport { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"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,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,MAAM,GAAG;IACtC,qBACE,KAACZ;QACCa,OAAO;YAAER;YAAQC;QAAM;QACvBQ,MAAMV;QACNW,aAAa,CAACC,OAAOC;YACnB,qBACE,KAAChB;gBAECgB,MAAMA;gBACND,OAAOA;gBACPE,eAAeP;gBACfQ,oBAAoBjB,6BAA6Be,MAAMV;gBACvDa,SAASZ;gBACTa,aAAaZ;gBACba,YAAYZ;gBACZa,IAAI;oBACFjB,OAAO;oBACPkB,WAAW;oBACXC,UAAU;gBACZ;eAZKR,KAAKS,EAAE;QAelB;QACAC,MAAK;;AAGX"}
+{"version":3,"sources":["../../src/Legend/ListLegend.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 { Virtuoso } from 'react-virtuoso';\nimport { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"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,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,MAAM,GAAG;IACtC,qBACE,KAACZ;QACCa,OAAO;YAAER;YAAQC;QAAM;QACvBQ,MAAMV;QACNW,aAAa,CAACC,OAAOC;YACnB,qBACE,KAAChB;gBAECgB,MAAMA;gBACND,OAAOA;gBACPE,eAAeP;gBACfQ,oBAAoBjB,6BAA6Be,MAAMV;gBACvDa,SAASZ;gBACTa,aAAaZ;gBACba,YAAYZ;gBACZa,IAAI;oBACFjB,OAAO;oBACPkB,WAAW;oBACXC,UAAU;gBACZ;eAZKR,KAAKS,EAAE;QAelB;QACAC,MAAK;;AAGX"}

package/dist/Legend/ListLegendItem.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, memo, useState } from 'react';
 import { Box, ListItemText, ListItemButton } from '@mui/material';
 import { combineSx } from '../utils';

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.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 { forwardRef, memo, MouseEvent, MouseEventHandler, ReactElement, useState } from 'react';\nimport { Box, ListItemText, ListItemProps, ListItemButton } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport type LegendItemEventOpts = {\n  /**\n   * Unique identifier for the legend item.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {\n  item: LegendItem;\n\n  index: number;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: MouseEvent<HTMLElement>, seriesId: string) => void;\n\n  onMouseOver?: (e: MouseEvent, opts: LegendItemEventOpts) => void;\n  onMouseOut?: (e: MouseEvent, opts: LegendItemEventOpts) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others },\n  ref\n): ReactElement {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleTextMouseOver(): void {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleTextMouseOut(): void {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItemButton\n      {...others}\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      onClick={handleClick}\n      onMouseOver={(e: MouseEvent) => onMouseOver?.(e, { id: item.id, index })}\n      onMouseOut={(e: MouseEvent) => onMouseOut?.(e, { id: item.id, index })}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleTextMouseOver}\n        onMouseOut={handleTextMouseOut}\n      ></ListItemText>\n    </ListItemButton>\n  );\n});\n\nexport const ListLegendItem = memo(ListLegendItemBase);\n"],"names":["forwardRef","memo","useState","Box","ListItemText","ListItemButton","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","onMouseOver","onMouseOut","index","others","ref","noWrap","setNoWrap","handleTextMouseOver","handleTextMouseOut","handleClick","e","id","role","padding","cursor","dense","selected","display","alignItems","color","primary","label","primaryTypographyProps"],"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,UAAU,EAAEC,IAAI,EAA+CC,QAAQ,QAAQ,QAAQ;AAChG,SAASC,GAAG,EAAEC,YAAY,EAAiBC,cAAc,QAAQ,gBAAgB;AACjF,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,gBAAgB,QAAQ,qBAAqB;AAwCtD,MAAMC,mCAAqBR,WAAgD,SAASS,eAClF,EAAEC,IAAI,EAAEC,EAAE,EAAEC,aAAa,EAAEC,OAAO,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGC,QAAQ,EACnGC,GAAG;IAEH,MAAM,CAACC,QAAQC,UAAU,GAAGnB,SAASU;IAErC,SAASU;QACP,IAAIV,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,SAASE;QACP,IAAIX,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,MAAMG,cAAiD,CAACC;QACtDZ,QAAQY,GAAGf,KAAKgB,EAAE;QAClBhB,KAAKG,OAAO,GAAGY;IACjB;IAEA,qBACE,MAACpB;QACE,GAAGa,MAAM;QACVS,MAAK;QACLhB,IAAIL,UACF;YACEsB,SAAS;YACTC,QAAQ;QACV,GACAlB;QAEFmB,OAAO;QACPjB,SAASW;QACTT,aAAa,CAACU,IAAkBV,cAAcU,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACtED,YAAY,CAACS,IAAkBT,aAAaS,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACpEc,UAAUjB;QACVK,KAAKA;;0BAEL,KAAChB;gBAAIQ,IAAI;oBAAEqB,SAAS;oBAAQC,YAAY;gBAAS;0BAC/C,cAAA,KAAC1B;oBAAiB2B,OAAOxB,KAAKwB,KAAK;;;0BAErC,KAAC9B;gBACC+B,SAASzB,KAAK0B,KAAK;gBACnBC,wBAAwB;oBAAEjB,QAAQA;gBAAO;gBACzCL,aAAaO;gBACbN,YAAYO;;;;AAIpB;AAEA,OAAO,MAAMd,+BAAiBR,KAAKO,oBAAoB"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 { forwardRef, memo, MouseEvent, MouseEventHandler, ReactElement, useState } from 'react';\nimport { Box, ListItemText, ListItemProps, ListItemButton } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport type LegendItemEventOpts = {\n  /**\n   * Unique identifier for the legend item.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {\n  item: LegendItem;\n\n  index: number;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: MouseEvent<HTMLElement>, seriesId: string) => void;\n\n  onMouseOver?: (e: MouseEvent, opts: LegendItemEventOpts) => void;\n  onMouseOut?: (e: MouseEvent, opts: LegendItemEventOpts) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others },\n  ref\n): ReactElement {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleTextMouseOver(): void {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleTextMouseOut(): void {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItemButton\n      {...others}\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      onClick={handleClick}\n      onMouseOver={(e: MouseEvent) => onMouseOver?.(e, { id: item.id, index })}\n      onMouseOut={(e: MouseEvent) => onMouseOut?.(e, { id: item.id, index })}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleTextMouseOver}\n        onMouseOut={handleTextMouseOut}\n      ></ListItemText>\n    </ListItemButton>\n  );\n});\n\nexport const ListLegendItem = memo(ListLegendItemBase);\n"],"names":["forwardRef","memo","useState","Box","ListItemText","ListItemButton","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","onMouseOver","onMouseOut","index","others","ref","noWrap","setNoWrap","handleTextMouseOver","handleTextMouseOut","handleClick","e","id","role","padding","cursor","dense","selected","display","alignItems","color","primary","label","primaryTypographyProps"],"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,UAAU,EAAEC,IAAI,EAA+CC,QAAQ,QAAQ,QAAQ;AAChG,SAASC,GAAG,EAAEC,YAAY,EAAiBC,cAAc,QAAQ,gBAAgB;AACjF,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,gBAAgB,QAAQ,qBAAqB;AAwCtD,MAAMC,mCAAqBR,WAAgD,SAASS,eAClF,EAAEC,IAAI,EAAEC,EAAE,EAAEC,aAAa,EAAEC,OAAO,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGC,QAAQ,EACnGC,GAAG;IAEH,MAAM,CAACC,QAAQC,UAAU,GAAGnB,SAASU;IAErC,SAASU;QACP,IAAIV,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,SAASE;QACP,IAAIX,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,MAAMG,cAAiD,CAACC;QACtDZ,QAAQY,GAAGf,KAAKgB,EAAE;QAClBhB,KAAKG,OAAO,GAAGY;IACjB;IAEA,qBACE,MAACpB;QACE,GAAGa,MAAM;QACVS,MAAK;QACLhB,IAAIL,UACF;YACEsB,SAAS;YACTC,QAAQ;QACV,GACAlB;QAEFmB,OAAO;QACPjB,SAASW;QACTT,aAAa,CAACU,IAAkBV,cAAcU,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACtED,YAAY,CAACS,IAAkBT,aAAaS,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACpEc,UAAUjB;QACVK,KAAKA;;0BAEL,KAAChB;gBAAIQ,IAAI;oBAAEqB,SAAS;oBAAQC,YAAY;gBAAS;0BAC/C,cAAA,KAAC1B;oBAAiB2B,OAAOxB,KAAKwB,KAAK;;;0BAErC,KAAC9B;gBACC+B,SAASzB,KAAK0B,KAAK;gBACnBC,wBAAwB;oBAAEjB,QAAQA;gBAAO;gBACzCL,aAAaO;gBACbN,YAAYO;;;;AAIpB;AAEA,OAAO,MAAMd,+BAAiBR,KAAKO,oBAAoB"}

package/dist/Legend/TableLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACnG,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AAuBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,EAC/B,OAAO,EACP,eAAe,GAChB,EAAE,gBAAgB,GAAG,YAAY,CAwCjC"}
+{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAS,UAAU,EAAqE,MAAM,UAAU,CAAC;AAChH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACnG,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AA2BD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,EAC/B,OAAO,EACP,eAAe,GAChB,EAAE,gBAAgB,GAAG,YAAY,CAyDjC"}

package/dist/Legend/TableLegend.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,14 +11,14 @@
 // 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 { useMemo } from 'react';
-import { Table } from '../Table';
+import { Table, DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_MIN_WIDTH } from '../Table';
 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.
@@ -33,6 +34,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;
 export function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns = [], sorting, onSortingChange }) {
     const rowSelection = useMemo(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
@@ -46,12 +49,23 @@ export function TableLegend({ items, selectedItems: initRowSelection, onSelected
         items
     ]);
     const columns = 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 : DEFAULT_COLUMN_WIDTH);
+        }, 0) ?? 0;
+        const availableWidth = Math.max(width - additionalColumnsLength - TABLE_PADDING, 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__*/ _jsx(Table, {
         height: height,

package/dist/Legend/TableLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/TableLegend.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, useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];\n  onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n    enableSorting: true,\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  height,\n  width,\n  columns: additionalColumns = [],\n  sorting,\n  onSortingChange,\n}: TableLegendProps): ReactElement {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce(\n          (allRowSelection, item, index) => {\n            allRowSelection[getRowId(item, index)] = true;\n            return allRowSelection;\n          },\n          {} as Record<string, boolean>\n        );\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      onRowMouseOver={onItemMouseOver}\n      onRowMouseOut={onItemMouseOut}\n      sorting={sorting}\n      onSortingChange={onSortingChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      defaultColumnWidth=\"auto\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n      rowSelectionVariant=\"legend\"\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","enableSorting","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","height","width","columns","additionalColumns","sorting","onSortingChange","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","onRowMouseOver","onRowMouseOut","density","defaultColumnWidth","checkboxSelection","rowSelectionVariant"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAuC,WAAW;AAchE,MAAMC,UAAgD;IACpD;QACEC,aAAa;QACbC,QAAQ;QACRC,eAAe;QAEf,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,MAAM,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;gBAAKC,OAAOF;0BAAaA;;IACpD;CACD;AAED,MAAMG,WAA4D,CAACC;IACjE,OAAOA,KAAKC,EAAE;AAChB;AAEA,MAAMC,mBAA+D,CAACF;IACpE,OAAOA,KAAKG,KAAK;AACnB;AAEA,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,eAAeC,gBAAgB,EAC/BC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,MAAM,EACNC,KAAK,EACLC,SAASC,oBAAoB,EAAE,EAC/BC,OAAO,EACPC,eAAe,EACE;IACjB,MAAMC,eAAe5B,QAAQ;QAC3B,OAAO,OAAOkB,qBAAqB,WAC/BA,mBAEA,wBAAwB;QACxB,4EAA4E;QAC5EF,MAAMa,MAAM,CACV,CAACC,iBAAiBC,MAAMC;YACtBF,eAAe,CAACpB,SAASqB,MAAMC,OAAO,GAAG;YACzC,OAAOF;QACT,GACA,CAAC;IAET,GAAG;QAACZ;QAAkBF;KAAM;IAE5B,MAAMQ,UAAUxB,QAAQ;QACtB,OAAO;eAAIE;eAAYuB;SAAkB;IAC3C,GAAG;QAACA;KAAkB;IAEtB,qBACE,KAACxB;QACCqB,QAAQA;QACRC,OAAOA;QACPK,cAAcA;QACdK,sBAAsBd;QACtBe,gBAAgBd;QAChBe,eAAed;QACfK,SAASA;QACTC,iBAAiBA;QACjBhB,MAAMK;QACNQ,SAASA;QACTY,SAAQ;QACRC,oBAAmB;QACnB3B,UAAUA;QACVG,kBAAkBA;QAClByB,iBAAiB;QACjBC,qBAAoB;;AAG1B"}
+{"version":3,"sources":["../../src/Legend/TableLegend.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, useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig, DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_MIN_WIDTH } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];\n  onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n    enableSorting: true,\n    enableResizing: true,\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\n// This is a rough estimate of value that needs to be subtracted from the total width to avoid horizontal scrolling on initial render\nconst TABLE_PADDING = 45;\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  height,\n  width,\n  columns: additionalColumns = [],\n  sorting,\n  onSortingChange,\n}: TableLegendProps): ReactElement {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce(\n          (allRowSelection, item, index) => {\n            allRowSelection[getRowId(item, index)] = true;\n            return allRowSelection;\n          },\n          {} as Record<string, boolean>\n        );\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    // Calculate column widths to fit the container on initial render, avoiding unnecessary horizontal scrolling.\n    // Falls back to a default width if available width is too small; the user can resize columns as needed.\n    const additionalColumnsLength =\n      additionalColumns?.reduce((colWidth, col) => {\n        return colWidth + (typeof col.width === 'number' ? col.width : DEFAULT_COLUMN_WIDTH);\n      }, 0) ?? 0;\n    const availableWidth = Math.max(\n      width - additionalColumnsLength - TABLE_PADDING,\n      DEFAULT_COLUMN_MIN_WIDTH * COLUMNS.length\n    );\n    const columnWidth = availableWidth / COLUMNS.length;\n    return [\n      ...COLUMNS.map((column) => ({\n        ...column,\n        width: columnWidth,\n      })),\n      ...additionalColumns,\n    ];\n  }, [additionalColumns, width]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      onRowMouseOver={onItemMouseOver}\n      onRowMouseOut={onItemMouseOut}\n      sorting={sorting}\n      onSortingChange={onSortingChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      defaultColumnWidth=\"auto\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n      rowSelectionVariant=\"legend\"\n    />\n  );\n}\n"],"names":["useMemo","Table","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MIN_WIDTH","COLUMNS","accessorKey","header","enableSorting","enableResizing","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TABLE_PADDING","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","height","width","columns","additionalColumns","sorting","onSortingChange","rowSelection","reduce","allRowSelection","item","index","additionalColumnsLength","colWidth","col","availableWidth","Math","max","length","columnWidth","map","column","onRowSelectionChange","onRowMouseOver","onRowMouseOut","density","defaultColumnWidth","checkboxSelection","rowSelectionVariant"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,KAAK,EAAiCC,oBAAoB,EAAEC,wBAAwB,QAAQ,WAAW;AAchH,MAAMC,UAAgD;IACpD;QACEC,aAAa;QACbC,QAAQ;QACRC,eAAe;QACfC,gBAAgB;QAEhB,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,MAAM,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;gBAAKC,OAAOF;0BAAaA;;IACpD;CACD;AAED,MAAMG,WAA4D,CAACC;IACjE,OAAOA,KAAKC,EAAE;AAChB;AAEA,MAAMC,mBAA+D,CAACF;IACpE,OAAOA,KAAKG,KAAK;AACnB;AAEA,qIAAqI;AACrI,MAAMC,gBAAgB;AAEtB,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,eAAeC,gBAAgB,EAC/BC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,MAAM,EACNC,KAAK,EACLC,SAASC,oBAAoB,EAAE,EAC/BC,OAAO,EACPC,eAAe,EACE;IACjB,MAAMC,eAAehC,QAAQ;QAC3B,OAAO,OAAOsB,qBAAqB,WAC/BA,mBAEA,wBAAwB;QACxB,4EAA4E;QAC5EF,MAAMa,MAAM,CACV,CAACC,iBAAiBC,MAAMC;YACtBF,eAAe,CAACrB,SAASsB,MAAMC,OAAO,GAAG;YACzC,OAAOF;QACT,GACA,CAAC;IAET,GAAG;QAACZ;QAAkBF;KAAM;IAE5B,MAAMQ,UAAU5B,QAAQ;QACtB,6GAA6G;QAC7G,wGAAwG;QACxG,MAAMqC,0BACJR,mBAAmBI,OAAO,CAACK,UAAUC;YACnC,OAAOD,WAAY,CAAA,OAAOC,IAAIZ,KAAK,KAAK,WAAWY,IAAIZ,KAAK,GAAGzB,oBAAmB;QACpF,GAAG,MAAM;QACX,MAAMsC,iBAAiBC,KAAKC,GAAG,CAC7Bf,QAAQU,0BAA0BnB,eAClCf,2BAA2BC,QAAQuC,MAAM;QAE3C,MAAMC,cAAcJ,iBAAiBpC,QAAQuC,MAAM;QACnD,OAAO;eACFvC,QAAQyC,GAAG,CAAC,CAACC,SAAY,CAAA;oBAC1B,GAAGA,MAAM;oBACTnB,OAAOiB;gBACT,CAAA;eACGf;SACJ;IACH,GAAG;QAACA;QAAmBF;KAAM;IAE7B,qBACE,KAAC1B;QACCyB,QAAQA;QACRC,OAAOA;QACPK,cAAcA;QACde,sBAAsBxB;QACtByB,gBAAgBxB;QAChByB,eAAexB;QACfK,SAASA;QACTC,iBAAiBA;QACjBjB,MAAMM;QACNQ,SAASA;QACTsB,SAAQ;QACRC,oBAAmB;QACnBtC,UAAUA;QACVG,kBAAkBA;QAClBoC,iBAAiB;QACjBC,qBAAoB;;AAG1B"}

package/dist/Legend/legend-model.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { LegendOptionsBase } from '@perses-dev/core';
+import { LegendOptionsBase } from '../model';
 export type LegendComponentOptions = LegendOptionsBase;
 export interface LegendItem {
     id: string;

package/dist/Legend/legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend-model.d.ts","sourceRoot":"","sources":["../../src/Legend/legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AASrD,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAEhF,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,uBAAuB,GAAG,OAAO,CAI9G"}
+{"version":3,"file":"legend-model.d.ts","sourceRoot":"","sources":["../../src/Legend/legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAS7C,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAEhF,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,uBAAuB,GAAG,OAAO,CAI9G"}

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'; // 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"}
+{"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 '../model';\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/LinkEditorForm.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import { TextField } from '../controls';
 export const LinkEditorForm = (props)=>{

package/dist/LinksEditor/LinkEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinksEditor/LinkEditorForm.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 { Checkbox, FormControlLabel, Stack } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TextField } from '../controls';\n\nexport interface LinkEditorFormField<T> {\n  value: T;\n  onChange: (value: T) => void;\n  placeholder?: string;\n  label: string;\n  error: { hasError?: boolean; helperText?: string };\n}\n\nexport interface LinkEditorFormProps {\n  mode: 'inline' | 'modalEmbedded';\n  url: LinkEditorFormField<string>;\n  name?: Omit<LinkEditorFormField<string>, 'error'>;\n  tooltip?: Omit<LinkEditorFormField<string>, 'error'>;\n  newTabOpen: Omit<LinkEditorFormField<boolean>, 'error'>;\n  renderVariables?: Omit<LinkEditorFormField<boolean>, 'error'>;\n}\n\nexport const LinkEditorForm = (props: LinkEditorFormProps): ReactElement => {\n  const { mode, url, name, newTabOpen, renderVariables, tooltip } = props;\n\n  return (\n    <Stack direction=\"column\" gap={2} flexGrow={1}>\n      <TextField\n        label={url.label}\n        error={url.error?.hasError}\n        helperText={url.error?.helperText}\n        onChange={url.onChange}\n        placeholder={url.placeholder}\n        multiline\n        maxRows={5}\n        required\n        fullWidth\n        value={url.value}\n      />\n      {(name || tooltip) && (\n        <Stack gap={1} direction={mode === 'inline' ? 'row' : 'column'}>\n          {name && (\n            <TextField\n              sx={{ flexGrow: '1' }}\n              label={name.label}\n              onChange={name?.onChange}\n              placeholder={name?.placeholder}\n              value={name?.value}\n            />\n          )}\n          {tooltip && (\n            <TextField\n              sx={{ flexGrow: '1' }}\n              label={tooltip.label}\n              onChange={tooltip?.onChange}\n              placeholder={tooltip?.placeholder}\n              value={tooltip?.value}\n            />\n          )}\n        </Stack>\n      )}\n      <Stack direction=\"row\" gap={1}>\n        {renderVariables && (\n          <FormControlLabel\n            label={renderVariables.label}\n            control={\n              <Checkbox\n                checked={renderVariables.value}\n                onChange={(e) => {\n                  renderVariables?.onChange(e.target.checked);\n                }}\n              />\n            }\n          />\n        )}\n\n        <FormControlLabel\n          label={newTabOpen.label}\n          control={\n            <Checkbox\n              checked={newTabOpen.value}\n              onChange={(e) => {\n                newTabOpen?.onChange(e.target.checked);\n              }}\n            />\n          }\n        />\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["Checkbox","FormControlLabel","Stack","TextField","LinkEditorForm","props","mode","url","name","newTabOpen","renderVariables","tooltip","direction","gap","flexGrow","label","error","hasError","helperText","onChange","placeholder","multiline","maxRows","required","fullWidth","value","sx","control","checked","e","target"],"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,QAAQ,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAElE,SAASC,SAAS,QAAQ,cAAc;AAmBxC,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,EAAEC,eAAe,EAAEC,OAAO,EAAE,GAAGN;IAElE,qBACE,MAACH;QAAMU,WAAU;QAASC,KAAK;QAAGC,UAAU;;0BAC1C,KAACX;gBACCY,OAAOR,IAAIQ,KAAK;gBAChBC,OAAOT,IAAIS,KAAK,EAAEC;gBAClBC,YAAYX,IAAIS,KAAK,EAAEE;gBACvBC,UAAUZ,IAAIY,QAAQ;gBACtBC,aAAab,IAAIa,WAAW;gBAC5BC,SAAS;gBACTC,SAAS;gBACTC,QAAQ;gBACRC,SAAS;gBACTC,OAAOlB,IAAIkB,KAAK;;YAEhBjB,CAAAA,QAAQG,OAAM,mBACd,MAACT;gBAAMW,KAAK;gBAAGD,WAAWN,SAAS,WAAW,QAAQ;;oBACnDE,sBACC,KAACL;wBACCuB,IAAI;4BAAEZ,UAAU;wBAAI;wBACpBC,OAAOP,KAAKO,KAAK;wBACjBI,UAAUX,MAAMW;wBAChBC,aAAaZ,MAAMY;wBACnBK,OAAOjB,MAAMiB;;oBAGhBd,yBACC,KAACR;wBACCuB,IAAI;4BAAEZ,UAAU;wBAAI;wBACpBC,OAAOJ,QAAQI,KAAK;wBACpBI,UAAUR,SAASQ;wBACnBC,aAAaT,SAASS;wBACtBK,OAAOd,SAASc;;;;0BAKxB,MAACvB;gBAAMU,WAAU;gBAAMC,KAAK;;oBACzBH,iCACC,KAACT;wBACCc,OAAOL,gBAAgBK,KAAK;wBAC5BY,uBACE,KAAC3B;4BACC4B,SAASlB,gBAAgBe,KAAK;4BAC9BN,UAAU,CAACU;gCACTnB,iBAAiBS,SAASU,EAAEC,MAAM,CAACF,OAAO;4BAC5C;;;kCAMR,KAAC3B;wBACCc,OAAON,WAAWM,KAAK;wBACvBY,uBACE,KAAC3B;4BACC4B,SAASnB,WAAWgB,KAAK;4BACzBN,UAAU,CAACU;gCACTpB,YAAYU,SAASU,EAAEC,MAAM,CAACF,OAAO;4BACvC;;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["../../src/LinksEditor/LinkEditorForm.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 { Checkbox, FormControlLabel, Stack } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TextField } from '../controls';\n\nexport interface LinkEditorFormField<T> {\n  value: T;\n  onChange: (value: T) => void;\n  placeholder?: string;\n  label: string;\n  error: { hasError?: boolean; helperText?: string };\n}\n\nexport interface LinkEditorFormProps {\n  mode: 'inline' | 'modalEmbedded';\n  url: LinkEditorFormField<string>;\n  name?: Omit<LinkEditorFormField<string>, 'error'>;\n  tooltip?: Omit<LinkEditorFormField<string>, 'error'>;\n  newTabOpen: Omit<LinkEditorFormField<boolean>, 'error'>;\n  renderVariables?: Omit<LinkEditorFormField<boolean>, 'error'>;\n}\n\nexport const LinkEditorForm = (props: LinkEditorFormProps): ReactElement => {\n  const { mode, url, name, newTabOpen, renderVariables, tooltip } = props;\n\n  return (\n    <Stack direction=\"column\" gap={2} flexGrow={1}>\n      <TextField\n        label={url.label}\n        error={url.error?.hasError}\n        helperText={url.error?.helperText}\n        onChange={url.onChange}\n        placeholder={url.placeholder}\n        multiline\n        maxRows={5}\n        required\n        fullWidth\n        value={url.value}\n      />\n      {(name || tooltip) && (\n        <Stack gap={1} direction={mode === 'inline' ? 'row' : 'column'}>\n          {name && (\n            <TextField\n              sx={{ flexGrow: '1' }}\n              label={name.label}\n              onChange={name?.onChange}\n              placeholder={name?.placeholder}\n              value={name?.value}\n            />\n          )}\n          {tooltip && (\n            <TextField\n              sx={{ flexGrow: '1' }}\n              label={tooltip.label}\n              onChange={tooltip?.onChange}\n              placeholder={tooltip?.placeholder}\n              value={tooltip?.value}\n            />\n          )}\n        </Stack>\n      )}\n      <Stack direction=\"row\" gap={1}>\n        {renderVariables && (\n          <FormControlLabel\n            label={renderVariables.label}\n            control={\n              <Checkbox\n                checked={renderVariables.value}\n                onChange={(e) => {\n                  renderVariables?.onChange(e.target.checked);\n                }}\n              />\n            }\n          />\n        )}\n\n        <FormControlLabel\n          label={newTabOpen.label}\n          control={\n            <Checkbox\n              checked={newTabOpen.value}\n              onChange={(e) => {\n                newTabOpen?.onChange(e.target.checked);\n              }}\n            />\n          }\n        />\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["Checkbox","FormControlLabel","Stack","TextField","LinkEditorForm","props","mode","url","name","newTabOpen","renderVariables","tooltip","direction","gap","flexGrow","label","error","hasError","helperText","onChange","placeholder","multiline","maxRows","required","fullWidth","value","sx","control","checked","e","target"],"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,QAAQ,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAElE,SAASC,SAAS,QAAQ,cAAc;AAmBxC,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,EAAEC,eAAe,EAAEC,OAAO,EAAE,GAAGN;IAElE,qBACE,MAACH;QAAMU,WAAU;QAASC,KAAK;QAAGC,UAAU;;0BAC1C,KAACX;gBACCY,OAAOR,IAAIQ,KAAK;gBAChBC,OAAOT,IAAIS,KAAK,EAAEC;gBAClBC,YAAYX,IAAIS,KAAK,EAAEE;gBACvBC,UAAUZ,IAAIY,QAAQ;gBACtBC,aAAab,IAAIa,WAAW;gBAC5BC,SAAS;gBACTC,SAAS;gBACTC,QAAQ;gBACRC,SAAS;gBACTC,OAAOlB,IAAIkB,KAAK;;YAEhBjB,CAAAA,QAAQG,OAAM,mBACd,MAACT;gBAAMW,KAAK;gBAAGD,WAAWN,SAAS,WAAW,QAAQ;;oBACnDE,sBACC,KAACL;wBACCuB,IAAI;4BAAEZ,UAAU;wBAAI;wBACpBC,OAAOP,KAAKO,KAAK;wBACjBI,UAAUX,MAAMW;wBAChBC,aAAaZ,MAAMY;wBACnBK,OAAOjB,MAAMiB;;oBAGhBd,yBACC,KAACR;wBACCuB,IAAI;4BAAEZ,UAAU;wBAAI;wBACpBC,OAAOJ,QAAQI,KAAK;wBACpBI,UAAUR,SAASQ;wBACnBC,aAAaT,SAASS;wBACtBK,OAAOd,SAASc;;;;0BAKxB,MAACvB;gBAAMU,WAAU;gBAAMC,KAAK;;oBACzBH,iCACC,KAACT;wBACCc,OAAOL,gBAAgBK,KAAK;wBAC5BY,uBACE,KAAC3B;4BACC4B,SAASlB,gBAAgBe,KAAK;4BAC9BN,UAAU,CAACU;gCACTnB,iBAAiBS,SAASU,EAAEC,MAAM,CAACF,OAAO;4BAC5C;;;kCAMR,KAAC3B;wBACCc,OAAON,WAAWM,KAAK;wBACvBY,uBACE,KAAC3B;4BACC4B,SAASnB,WAAWgB,KAAK;4BACzBN,UAAU,CAACU;gCACTpB,YAAYU,SAASU,EAAEC,MAAM,CAACF,OAAO;4BACvC;;;;;;;AAOd,EAAE"}

package/dist/LinksEditor/LinksEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Divider, IconButton, Stack, Typography } from '@mui/material';
 import { Controller, useFieldArray } from 'react-hook-form';