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

package/dist/ValueMappingEditor/ValueMappingEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core'; // TODO\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}

package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValueMappingsEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsD5D,CAAC"}
+{"version":3,"file":"ValueMappingsEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsD5D,CAAC"}

package/dist/ValueMappingEditor/ValueMappingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\n\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAElF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core'; // TODO\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAClF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}

package/dist/cjs/TimeRangeSelector/DateTimeRangePicker.js

@@ -146,6 +146,7 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
                             FallbackComponent: _ErrorAlert.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                "data-testid": "start_time_input",
                                 timezone: stdTimeZone,
                                 label: "Start Time",
                                 value: new _tz.TZDate(timeRange.start, stdTimeZone),
@@ -161,6 +162,7 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
                             FallbackComponent: _ErrorAlert.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                "data-testid": "end_time_input",
                                 timezone: stdTimeZone,
                                 label: "End Time",
                                 value: new _tz.TZDate(timeRange.end, stdTimeZone),

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
 const _Earth = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Earth"));
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _react = require("react");
 const _context = require("../context");
 const _timeZoneOption = require("../model/timeZoneOption");
@@ -42,11 +42,11 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
     const anchorEl = (0, _react.useRef)();
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
     const convertedTimeRange = (0, _react.useMemo)(()=>{
-        return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
+        return (0, _spec.isRelativeTimeRange)(value) ? (0, _spec.toAbsoluteTimeRange)(value) : value;
     }, [
         value
     ]);
-    const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _core.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
+    const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _spec.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
         value,
         timeZone
     ]);

package/dist/cjs/TimeRangeSelector/utils.js

@@ -38,7 +38,7 @@ _export(exports, {
     }
 });
 const _datefns = require("date-fns");
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _utils = require("../utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function buildCustomTimeOption(value, timeZone) {
@@ -68,5 +68,5 @@ function formatTimeRange(value, timeZone) {
     if (!value) {
         return 'Custom Time Range';
     }
-    return !(0, _core.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
+    return !(0, _spec.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
 }

package/dist/cjs/model/timeOption.js

@@ -20,14 +20,14 @@ Object.defineProperty(exports, "buildRelativeTimeOption", {
         return buildRelativeTimeOption;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _datefns = require("date-fns");
 function buildRelativeTimeOption(duration) {
     return {
         value: {
             pastDuration: duration
         },
-        display: `Last ${(0, _datefns.formatDuration)((0, _core.parseDurationString)(duration), {
+        display: `Last ${(0, _datefns.formatDuration)((0, _spec.parseDurationString)(duration), {
             delimiter: ', '
         })}`
     };

package/dist/cjs/theme/theme.js

@@ -34,42 +34,57 @@ const getModalBackgroundStyle = ({ theme })=>{
         ...backgroundStyle
     };
 };
-function getTheme(mode, options = {}) {
+function getTheme(mode, options = {}, disableBodyOverride = false) {
     return (0, _material.createTheme)({
         palette: (0, _palette.getPaletteOptions)(mode),
         typography: _typography.typography,
         mixins: {},
-        components,
+        components: getComponents(mode, disableBodyOverride),
         ...options
     });
 }
 // Overrides for component default prop values and styles go here
-const components = {
-    MuiAlert: _alert.MuiAlert,
-    MuiFormControl: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiPaper: _paper.MuiPaper,
-    MuiTextField: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiDrawer: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiPopover: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
+function getComponents(mode, disableBodyOverride) {
+    const components = {
+        MuiAlert: _alert.MuiAlert,
+        MuiFormControl: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiPaper: _paper.MuiPaper,
+        MuiTextField: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
         }
+    };
+    if (disableBodyOverride) {
+        return components;
     }
-};
+    return {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    colorScheme: mode
+                }
+            }
+        },
+        ...components
+    };
+}

package/dist/cjs/theme/typography.js

@@ -20,18 +20,19 @@ Object.defineProperty(exports, "typography", {
         return typography;
     }
 });
-require("@fontsource/lato/300.css");
-require("@fontsource/lato/400.css");
-require("@fontsource/lato/700.css");
-require("@fontsource/lato/900.css");
+require("@fontsource/inter/300.css");
+require("@fontsource/inter/400.css");
+require("@fontsource/inter/500.css");
+require("@fontsource/inter/600.css");
+require("@fontsource/inter/700.css");
+require("@fontsource/inter/900.css");
 // Font weights need to correspond with the imports at the top of the file
-// (Lato supports 100, 300, 400, 700, 900)
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
-const fontWeightMedium = 700;
+const fontWeightMedium = 600;
 const fontWeightBold = 900;
 const typography = {
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,

package/dist/model/graph.d.ts

@@ -1,4 +1,4 @@
-import { TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeriesValueTuple } from '@perses-dev/spec';
 import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
 import { LegendItem } from '../Legend';
 export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.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 { TimeSeriesValueTuple } from '@perses-dev/core';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// Used for TimeChart dataset support, each time series returned is mapped to series options using datasetIndex\n// - https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\nexport type TimeChartSeriesMapping = TimeSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\nexport type TimeSeriesOption = LineSeriesOption | BarSeriesOption;\n\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  name?: string; // e.g the TimeSeriesChart plugin uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';\n\nexport const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption = {\n  name: PINNED_CROSSHAIR_SERIES_NAME,\n  type: 'line',\n  // https://echarts.apache.org/en/option.html#series-line.markLine\n  markLine: {\n    data: [],\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n  },\n};\n\nexport interface DatapointInfo {\n  dataIndex: number;\n  seriesIndex: number;\n  seriesName: string;\n  yValue: number;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","PINNED_CROSSHAIR_SERIES_NAME","DEFAULT_PINNED_CROSSHAIR","name","type","markLine","data","lineStyle","width","emphasis","opacity","blur"],"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;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,8BAA8B,KAAK;AAkDhD,OAAO,MAAMC,+BAA+B,mBAAmB;AAE/D,OAAO,MAAMC,2BAA6C;IACxDC,MAAMF;IACNG,MAAM;IACN,iEAAiE;IACjEC,UAAU;QACRC,MAAM,EAAE;QACRC,WAAW;YACTH,MAAM;YACNI,OAAO;QACT;QACAC,UAAU;YACRF,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;QACAC,MAAM;YACJJ,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/model/graph.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 { TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// Used for TimeChart dataset support, each time series returned is mapped to series options using datasetIndex\n// - https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\nexport type TimeChartSeriesMapping = TimeSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\nexport type TimeSeriesOption = LineSeriesOption | BarSeriesOption;\n\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  name?: string; // e.g the TimeSeriesChart plugin uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';\n\nexport const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption = {\n  name: PINNED_CROSSHAIR_SERIES_NAME,\n  type: 'line',\n  // https://echarts.apache.org/en/option.html#series-line.markLine\n  markLine: {\n    data: [],\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n  },\n};\n\nexport interface DatapointInfo {\n  dataIndex: number;\n  seriesIndex: number;\n  seriesName: string;\n  yValue: number;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","PINNED_CROSSHAIR_SERIES_NAME","DEFAULT_PINNED_CROSSHAIR","name","type","markLine","data","lineStyle","width","emphasis","opacity","blur"],"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;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,8BAA8B,KAAK;AAkDhD,OAAO,MAAMC,+BAA+B,mBAAmB;AAE/D,OAAO,MAAMC,2BAA6C;IACxDC,MAAMF;IACNG,MAAM;IACN,iEAAiE;IACjEC,UAAU;QACRC,MAAM,EAAE;QACRC,WAAW;YACTH,MAAM;YACNI,OAAO;QACT;QACAC,UAAU;YACRF,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;QACAC,MAAM;YACJJ,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;IACF;AACF,EAAE"}

package/dist/model/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/theme.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 { ThresholdColorPalette } from '@perses-dev/core';\nimport type {\n  EChartsOption,\n  BarSeriesOption,\n  LineSeriesOption,\n  GaugeSeriesOption,\n  TitleComponentOption,\n  ComposeOption,\n  XAXisComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: NoDataOption;\n  sparkline: {\n    width: number;\n    color: string;\n    areaOpacity: number;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;\n"],"names":[],"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;AAgDjC,WAA6G"}
+{"version":3,"sources":["../../src/model/theme.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 { ThresholdColorPalette } from '@perses-dev/core'; // TODO\nimport type {\n  EChartsOption,\n  BarSeriesOption,\n  LineSeriesOption,\n  GaugeSeriesOption,\n  TitleComponentOption,\n  ComposeOption,\n  XAXisComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: NoDataOption;\n  sparkline: {\n    width: number;\n    color: string;\n    areaOpacity: number;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;\n"],"names":[],"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;AAgDjC,WAA6G"}

package/dist/model/timeOption.d.ts

@@ -1,4 +1,4 @@
-import { DurationString, RelativeTimeRange } from '@perses-dev/core';
+import { DurationString, RelativeTimeRange } from '@perses-dev/spec';
 export interface TimeOption {
     value: RelativeTimeRange;
     display: string;

package/dist/model/timeOption.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { parseDurationString } from '@perses-dev/core';
+import { parseDurationString } from '@perses-dev/spec';
 import { formatDuration } from 'date-fns';
 export function buildRelativeTimeOption(duration) {
     return {

package/dist/model/timeOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/timeOption.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 { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { formatDuration } from 'date-fns';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\nexport function buildRelativeTimeOption(duration: DurationString): TimeOption {\n  return {\n    value: { pastDuration: duration },\n    display: `Last ${formatDuration(parseDurationString(duration), { delimiter: ', ' })}`,\n  };\n}\n"],"names":["parseDurationString","formatDuration","buildRelativeTimeOption","duration","value","pastDuration","display","delimiter"],"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,SAAyBA,mBAAmB,QAA2B,mBAAmB;AAC1F,SAASC,cAAc,QAAQ,WAAW;AAO1C,OAAO,SAASC,wBAAwBC,QAAwB;IAC9D,OAAO;QACLC,OAAO;YAAEC,cAAcF;QAAS;QAChCG,SAAS,CAAC,KAAK,EAAEL,eAAeD,oBAAoBG,WAAW;YAAEI,WAAW;QAAK,IAAI;IACvF;AACF"}
+{"version":3,"sources":["../../src/model/timeOption.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 { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/spec';\nimport { formatDuration } from 'date-fns';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\nexport function buildRelativeTimeOption(duration: DurationString): TimeOption {\n  return {\n    value: { pastDuration: duration },\n    display: `Last ${formatDuration(parseDurationString(duration), { delimiter: ', ' })}`,\n  };\n}\n"],"names":["parseDurationString","formatDuration","buildRelativeTimeOption","duration","value","pastDuration","display","delimiter"],"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,SAAyBA,mBAAmB,QAA2B,mBAAmB;AAC1F,SAASC,cAAc,QAAQ,WAAW;AAO1C,OAAO,SAASC,wBAAwBC,QAAwB;IAC9D,OAAO;QACLC,OAAO;YAAEC,cAAcF;QAAS;QAChCG,SAAS,CAAC,KAAK,EAAEL,eAAeD,oBAAoBG,WAAW;YAAEI,WAAW;QAAK,IAAI;IACvF;AACF"}

package/dist/theme/theme.d.ts

@@ -8,6 +8,8 @@ import { createTheme, PaletteMode, Theme } from '@mui/material';
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
  */
-export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0]): Theme;
+export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0], disableBodyOverride?: boolean): Theme;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAQlG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,WAAW,EACjB,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,EAC/C,mBAAmB,GAAE,OAAe,GACnC,KAAK,CAQP"}

package/dist/theme/theme.js

@@ -33,44 +33,61 @@ const getModalBackgroundStyle = ({ theme })=>{
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
- */ export function getTheme(mode, options = {}) {
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
+ */ export function getTheme(mode, options = {}, disableBodyOverride = false) {
     return createTheme({
         palette: getPaletteOptions(mode),
         typography,
         mixins: {},
-        components,
+        components: getComponents(mode, disableBodyOverride),
         ...options
     });
 }
 // Overrides for component default prop values and styles go here
-const components = {
-    MuiAlert,
-    MuiFormControl: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiPaper,
-    MuiTextField: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiDrawer: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiPopover: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
+function getComponents(mode, disableBodyOverride) {
+    const components = {
+        MuiAlert,
+        MuiFormControl: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiPaper,
+        MuiTextField: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
         }
+    };
+    if (disableBodyOverride) {
+        return components;
     }
-};
+    return {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    colorScheme: mode
+                }
+            }
+        },
+        ...components
+    };
+}
 
 //# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme.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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode, options: Parameters<typeof createTheme>[0] = {}): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiAlert,\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiPaper,\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiPopover: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"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,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASO,SAASL,IAAiB,EAAEM,UAA6C,CAAC,CAAC;IACzF,OAAOf,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAY,QAAQ,CAAC;QACTC;QACA,GAAGF,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,MAAME,aAAyC;IAC7ChB;IACAiB,gBAAgB;QACdC,cAAc;YACZC,MAAM;QACR;IACF;IACAlB;IACAmB,cAAc;QACZF,cAAc;YACZC,MAAM;QACR;IACF;IACAE,WAAW;QACTC,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAoB,WAAW;QACTF,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAqB,YAAY;QACVH,gBAAgB;YACdC,OAAOnB;QACT;IACF;AACF"}
+{"version":3,"sources":["../../src/theme/theme.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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n *\n * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.\n */\nexport function getTheme(\n  mode: PaletteMode,\n  options: Parameters<typeof createTheme>[0] = {},\n  disableBodyOverride: boolean = false\n): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components: getComponents(mode, disableBodyOverride),\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nfunction getComponents(mode: PaletteMode, disableBodyOverride: boolean): ThemeOptions['components'] {\n  const components: ThemeOptions['components'] = {\n    MuiAlert,\n    MuiFormControl: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiPaper,\n    MuiTextField: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiDrawer: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiDialog: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiPopover: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n  };\n\n  if (disableBodyOverride) {\n    return components;\n  }\n\n  return {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          colorScheme: mode,\n        },\n      },\n    },\n    ...components,\n  };\n}\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","disableBodyOverride","mixins","components","getComponents","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover","MuiCssBaseline","body","colorScheme"],"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,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASO,SACdL,IAAiB,EACjBM,UAA6C,CAAC,CAAC,EAC/CC,sBAA+B,KAAK;IAEpC,OAAOhB,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAa,QAAQ,CAAC;QACTC,YAAYC,cAAcV,MAAMO;QAChC,GAAGD,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,SAASI,cAAcV,IAAiB,EAAEO,mBAA4B;IACpE,MAAME,aAAyC;QAC7CjB;QACAmB,gBAAgB;YACdC,cAAc;gBACZC,MAAM;YACR;QACF;QACApB;QACAqB,cAAc;YACZF,cAAc;gBACZC,MAAM;YACR;QACF;QACAE,WAAW;YACTC,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAsB,WAAW;YACTF,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAuB,YAAY;YACVH,gBAAgB;gBACdC,OAAOrB;YACT;QACF;IACF;IAEA,IAAIW,qBAAqB;QACvB,OAAOE;IACT;IAEA,OAAO;QACLW,gBAAgB;YACdJ,gBAAgB;gBACdK,MAAM;oBACJC,aAAatB;gBACf;YACF;QACF;QACA,GAAGS,UAAU;IACf;AACF"}

package/dist/theme/typography.d.ts

@@ -1,7 +1,9 @@
-import '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 import { ThemeOptions } from '@mui/material';
 /**
  * Theme typography options that are the same across both the dark and light themes.

package/dist/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAqEjD,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAsEjD,CAAC"}

package/dist/theme/typography.js

@@ -10,20 +10,21 @@
 // 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 '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 // Font weights need to correspond with the imports at the top of the file
-// (Lato supports 100, 300, 400, 700, 900)
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
-const fontWeightMedium = 700;
+const fontWeightMedium = 600;
 const fontWeightBold = 900;
 /**
  * Theme typography options that are the same across both the dark and light themes.
  */ export const typography = {
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,

package/dist/theme/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/typography.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 '@fontsource/lato/300.css';\nimport '@fontsource/lato/400.css';\nimport '@fontsource/lato/700.css';\nimport '@fontsource/lato/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\n// (Lato supports 100, 300, 400, 700, 900)\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 700;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily: '\"Lato\", sans-serif',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"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,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAGlC,0EAA0E;AAC1E,0CAA0C;AAC1C,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YAAY;IAEZL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}
+{"version":3,"sources":["../../src/theme/typography.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 '@fontsource/inter/300.css';\nimport '@fontsource/inter/400.css';\nimport '@fontsource/inter/500.css';\nimport '@fontsource/inter/600.css';\nimport '@fontsource/inter/700.css';\nimport '@fontsource/inter/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 600;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily:\n    'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"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,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AAGnC,0EAA0E;AAC1E,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YACE;IAEFL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}

package/dist/utils/axis.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import merge from 'lodash/merge';
-import { formatValue } from '@perses-dev/core';
+import { formatValue } from '@perses-dev/core'; // TODO
 // Character width multipliers (approximate for typical UI fonts)
 const CHAR_WIDTH_BASE = 6;
 const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping