@perses-dev/plugin-system 0.55.0-beta.1 → 0.55.0-beta.11

package/dist/components/LayoutEditor/LayoutEditor.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+import type { Control } from 'react-hook-form';
+import type { PanelEditorValues } from '../../model';
+import type { VariableDefinitionGroup } from '../../model/variables';
+export type { VariableDefinitionGroup };
+export interface PanelGroup {
+    id: number;
+    title?: string;
+}
+export interface LayoutEditorProps {
+    control: Control<PanelEditorValues>;
+    variableDefinitionGroups: VariableDefinitionGroup[];
+    panelGroups?: PanelGroup[];
+}
+export declare function LayoutEditor({ control, variableDefinitionGroups, panelGroups }: LayoutEditorProps): ReactElement;
+//# sourceMappingURL=LayoutEditor.d.ts.map

package/dist/components/LayoutEditor/LayoutEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutEditor/LayoutEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAI/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAOrE,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAExC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,wBAAwB,EAAE,uBAAuB,EAAE,CAAC;IACpD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAwEhH"}

package/dist/components/LayoutEditor/LayoutEditor.js

@@ -0,0 +1,115 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Grid2 as Grid, MenuItem, TextField, Typography } from "@mui/material";
+import { useMemo } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { DEFAULT_MAX_PER_ROW, DEFAULT_REPEAT_ALIGNMENT } from "../../constants/index.js";
+import { useVariableValues } from "../../runtime/index.js";
+import { RepeatLayoutPreview } from "./RepeatLayoutPreview.js";
+import { RepeatVariableEditor } from "./RepeatVariableEditor.js";
+const DEFAULT_LAYOUT_WIDTH = 24;
+export function LayoutEditor({ control, variableDefinitionGroups, panelGroups }) {
+    const { formState, setValue } = useFormContext();
+    const variableValues = useVariableValues();
+    const watchedRepeatVariableValue = useWatch({
+        control,
+        name: 'layoutDefinition.repeatVariable.value'
+    });
+    const watchedAlignment = useWatch({
+        control,
+        name: 'layoutDefinition.repeatVariable.alignment'
+    });
+    const watchedMaxPer = useWatch({
+        control,
+        name: 'layoutDefinition.repeatVariable.maxPer'
+    });
+    const optionCount = useMemo(()=>{
+        if (!watchedRepeatVariableValue) return 0;
+        return variableValues[watchedRepeatVariableValue]?.options?.length ?? 0;
+    }, [
+        watchedRepeatVariableValue,
+        variableValues
+    ]);
+    const isVertical = (watchedAlignment ?? DEFAULT_REPEAT_ALIGNMENT) === 'vertical';
+    const perRow = isVertical ? 1 : watchedMaxPer ?? DEFAULT_MAX_PER_ROW;
+    return /*#__PURE__*/ _jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        width: "100%",
+        children: [
+            panelGroups && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: 12,
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h4",
+                            children: "Panel Group"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: 4,
+                        children: /*#__PURE__*/ _jsx(Controller, {
+                            control: control,
+                            name: "groupId",
+                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                    select: true,
+                                    ...field,
+                                    required: true,
+                                    fullWidth: true,
+                                    label: "Group",
+                                    error: !!fieldState.error,
+                                    helperText: fieldState.error?.message,
+                                    children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: panelGroup.id,
+                                            children: panelGroup.title ?? `Group ${index + 1}`
+                                        }, panelGroup.id))
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: 8
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: 12,
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h4",
+                    children: "Repeat Options"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Controller, {
+                control: control,
+                name: "layoutDefinition.repeatVariable",
+                render: ({ field })=>/*#__PURE__*/ _jsx(RepeatVariableEditor, {
+                        value: field.value,
+                        onChange: field.onChange,
+                        errors: formState.errors.layoutDefinition?.repeatVariable ?? {},
+                        variableDefinitionGroups: variableDefinitionGroups,
+                        isVertical: isVertical,
+                        onRepeatVariableSet: ()=>setValue('layoutDefinition.width', DEFAULT_LAYOUT_WIDTH)
+                    })
+            }),
+            watchedRepeatVariableValue && optionCount > 0 && /*#__PURE__*/ _jsx(Grid, {
+                size: 12,
+                children: /*#__PURE__*/ _jsx(RepeatLayoutPreview, {
+                    optionCount: optionCount,
+                    maxPer: perRow
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LayoutEditor.js.map

package/dist/components/LayoutEditor/LayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LayoutEditor/LayoutEditor.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 { Grid2 as Grid, MenuItem, TextField, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\nimport type { Control } from 'react-hook-form';\nimport { Controller, useFormContext, useWatch } from 'react-hook-form';\n\nimport { DEFAULT_MAX_PER_ROW, DEFAULT_REPEAT_ALIGNMENT } from '../../constants';\nimport type { PanelEditorValues } from '../../model';\nimport type { VariableDefinitionGroup } from '../../model/variables';\nimport { useVariableValues } from '../../runtime';\nimport { RepeatLayoutPreview } from './RepeatLayoutPreview';\nimport { RepeatVariableEditor } from './RepeatVariableEditor';\n\nconst DEFAULT_LAYOUT_WIDTH = 24;\n\nexport type { VariableDefinitionGroup };\n\nexport interface PanelGroup {\n  id: number;\n  title?: string;\n}\n\nexport interface LayoutEditorProps {\n  control: Control<PanelEditorValues>;\n  variableDefinitionGroups: VariableDefinitionGroup[];\n  panelGroups?: PanelGroup[];\n}\n\nexport function LayoutEditor({ control, variableDefinitionGroups, panelGroups }: LayoutEditorProps): ReactElement {\n  const { formState, setValue } = useFormContext<PanelEditorValues>();\n  const variableValues = useVariableValues();\n  const watchedRepeatVariableValue = useWatch({ control, name: 'layoutDefinition.repeatVariable.value' });\n  const watchedAlignment = useWatch({ control, name: 'layoutDefinition.repeatVariable.alignment' });\n  const watchedMaxPer = useWatch({ control, name: 'layoutDefinition.repeatVariable.maxPer' });\n\n  const optionCount = useMemo(() => {\n    if (!watchedRepeatVariableValue) return 0;\n    return variableValues[watchedRepeatVariableValue]?.options?.length ?? 0;\n  }, [watchedRepeatVariableValue, variableValues]);\n\n  const isVertical = (watchedAlignment ?? DEFAULT_REPEAT_ALIGNMENT) === 'vertical';\n  const perRow = isVertical ? 1 : (watchedMaxPer ?? DEFAULT_MAX_PER_ROW);\n\n  return (\n    <Grid container spacing={2} width=\"100%\">\n      {panelGroups && (\n        <>\n          <Grid size={12}>\n            <Typography variant=\"h4\">Panel Group</Typography>\n          </Grid>\n          <Grid size={4}>\n            <Controller\n              control={control}\n              name=\"groupId\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Group\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                >\n                  {panelGroups.map((panelGroup, index) => (\n                    <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                      {panelGroup.title ?? `Group ${index + 1}`}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n          <Grid size={8} />\n        </>\n      )}\n      <Grid size={12}>\n        <Typography variant=\"h4\">Repeat Options</Typography>\n      </Grid>\n      <Controller\n        control={control}\n        name=\"layoutDefinition.repeatVariable\"\n        render={({ field }) => (\n          <RepeatVariableEditor\n            value={field.value}\n            onChange={field.onChange}\n            errors={formState.errors.layoutDefinition?.repeatVariable ?? {}}\n            variableDefinitionGroups={variableDefinitionGroups}\n            isVertical={isVertical}\n            onRepeatVariableSet={() => setValue('layoutDefinition.width', DEFAULT_LAYOUT_WIDTH)}\n          />\n        )}\n      />\n      {watchedRepeatVariableValue && optionCount > 0 && (\n        <Grid size={12}>\n          <RepeatLayoutPreview optionCount={optionCount} maxPer={perRow} />\n        </Grid>\n      )}\n    </Grid>\n  );\n}\n"],"names":["Grid2","Grid","MenuItem","TextField","Typography","useMemo","Controller","useFormContext","useWatch","DEFAULT_MAX_PER_ROW","DEFAULT_REPEAT_ALIGNMENT","useVariableValues","RepeatLayoutPreview","RepeatVariableEditor","DEFAULT_LAYOUT_WIDTH","LayoutEditor","control","variableDefinitionGroups","panelGroups","formState","setValue","variableValues","watchedRepeatVariableValue","name","watchedAlignment","watchedMaxPer","optionCount","options","length","isVertical","perRow","container","spacing","width","size","variant","render","field","fieldState","select","required","fullWidth","label","error","helperText","message","map","panelGroup","index","value","id","title","onChange","errors","layoutDefinition","repeatVariable","onRepeatVariableSet","maxPer"],"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,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAE/E,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,UAAU,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,kBAAkB;AAEvE,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,2BAAkB;AAGhF,SAASC,iBAAiB,QAAQ,yBAAgB;AAClD,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D,MAAMC,uBAAuB;AAe7B,OAAO,SAASC,aAAa,EAAEC,OAAO,EAAEC,wBAAwB,EAAEC,WAAW,EAAqB;IAChG,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGb;IAChC,MAAMc,iBAAiBV;IACvB,MAAMW,6BAA6Bd,SAAS;QAAEQ;QAASO,MAAM;IAAwC;IACrG,MAAMC,mBAAmBhB,SAAS;QAAEQ;QAASO,MAAM;IAA4C;IAC/F,MAAME,gBAAgBjB,SAAS;QAAEQ;QAASO,MAAM;IAAyC;IAEzF,MAAMG,cAAcrB,QAAQ;QAC1B,IAAI,CAACiB,4BAA4B,OAAO;QACxC,OAAOD,cAAc,CAACC,2BAA2B,EAAEK,SAASC,UAAU;IACxE,GAAG;QAACN;QAA4BD;KAAe;IAE/C,MAAMQ,aAAa,AAACL,CAAAA,oBAAoBd,wBAAuB,MAAO;IACtE,MAAMoB,SAASD,aAAa,IAAKJ,iBAAiBhB;IAElD,qBACE,MAACR;QAAK8B,SAAS;QAACC,SAAS;QAAGC,OAAM;;YAC/Bf,6BACC;;kCACE,KAACjB;wBAAKiC,MAAM;kCACV,cAAA,KAAC9B;4BAAW+B,SAAQ;sCAAK;;;kCAE3B,KAAClC;wBAAKiC,MAAM;kCACV,cAAA,KAAC5B;4BACCU,SAASA;4BACTO,MAAK;4BACLa,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;oCACCoC,MAAM;oCACL,GAAGF,KAAK;oCACTG,QAAQ;oCACRC,SAAS;oCACTC,OAAM;oCACNC,OAAO,CAAC,CAACL,WAAWK,KAAK;oCACzBC,YAAYN,WAAWK,KAAK,EAAEE;8CAE7B3B,YAAY4B,GAAG,CAAC,CAACC,YAAYC,sBAC5B,KAAC9C;4CAA6B+C,OAAOF,WAAWG,EAAE;sDAC/CH,WAAWI,KAAK,IAAI,CAAC,MAAM,EAAEH,QAAQ,GAAG;2CAD5BD,WAAWG,EAAE;;;;kCAQtC,KAACjD;wBAAKiC,MAAM;;;;0BAGhB,KAACjC;gBAAKiC,MAAM;0BACV,cAAA,KAAC9B;oBAAW+B,SAAQ;8BAAK;;;0BAE3B,KAAC7B;gBACCU,SAASA;gBACTO,MAAK;gBACLa,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACxB;wBACCoC,OAAOZ,MAAMY,KAAK;wBAClBG,UAAUf,MAAMe,QAAQ;wBACxBC,QAAQlC,UAAUkC,MAAM,CAACC,gBAAgB,EAAEC,kBAAkB,CAAC;wBAC9DtC,0BAA0BA;wBAC1BY,YAAYA;wBACZ2B,qBAAqB,IAAMpC,SAAS,0BAA0BN;;;YAInEQ,8BAA8BI,cAAc,mBAC3C,KAACzB;gBAAKiC,MAAM;0BACV,cAAA,KAACtB;oBAAoBc,aAAaA;oBAAa+B,QAAQ3B;;;;;AAKjE"}

package/dist/components/LayoutEditor/RepeatLayoutPreview.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+export interface RepeatLayoutPreviewProps {
+    optionCount: number;
+    maxPer: number;
+}
+export declare function RepeatLayoutPreview({ optionCount, maxPer }: RepeatLayoutPreviewProps): ReactElement;
+//# sourceMappingURL=RepeatLayoutPreview.d.ts.map

package/dist/components/LayoutEditor/RepeatLayoutPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatLayoutPreview.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutEditor/RepeatLayoutPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,GAAG,YAAY,CA4CnG"}

package/dist/components/LayoutEditor/RepeatLayoutPreview.js

@@ -0,0 +1,92 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box, IconButton, Typography } from "@mui/material";
+import { InfoTooltip, RepeatGrid } from "@perses-dev/components";
+import InformationOutlineIcon from "mdi-material-ui/InformationOutline";
+import { useMemo } from "react";
+const PREVIEW_GAP = 4;
+export function RepeatLayoutPreview({ optionCount, maxPer }) {
+    const repeatItems = useMemo(()=>Array.from({
+            length: optionCount
+        }, (_, i)=>i), [
+        optionCount
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    mb: 0.5
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "subtitle2",
+                        color: "text.secondary",
+                        children: [
+                            "Layout preview (",
+                            optionCount,
+                            " panel",
+                            optionCount !== 1 ? 's' : '',
+                            ")"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: "Preview of the layout when all available options of the selected variable are selected.",
+                        enterDelay: 100,
+                        children: /*#__PURE__*/ _jsx(IconButton, {
+                            size: "small",
+                            sx: (theme)=>({
+                                    borderRadius: theme.shape.borderRadius,
+                                    padding: '2px'
+                                }),
+                            children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                                "aria-hidden": false,
+                                "aria-label": "Show layout preview information",
+                                fontSize: "inherit",
+                                sx: {
+                                    color: (theme)=>theme.palette.grey[700]
+                                }
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    height: 315,
+                    overflow: 'auto'
+                },
+                children: /*#__PURE__*/ _jsx(RepeatGrid, {
+                    repeatItems: repeatItems,
+                    maxPer: maxPer,
+                    gap: PREVIEW_GAP,
+                    renderItem: ()=>/*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                width: `100%`,
+                                height: 150,
+                                borderRadius: 1,
+                                bgcolor: 'action.selected',
+                                border: '1px solid',
+                                borderColor: 'divider'
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=RepeatLayoutPreview.js.map

package/dist/components/LayoutEditor/RepeatLayoutPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LayoutEditor/RepeatLayoutPreview.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, IconButton, Typography } from '@mui/material';\nimport { InfoTooltip, RepeatGrid } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nexport interface RepeatLayoutPreviewProps {\n  optionCount: number;\n  maxPer: number;\n}\n\nconst PREVIEW_GAP = 4;\n\nexport function RepeatLayoutPreview({ optionCount, maxPer }: RepeatLayoutPreviewProps): ReactElement {\n  const repeatItems = useMemo(() => Array.from({ length: optionCount }, (_, i) => i), [optionCount]);\n\n  return (\n    <Box>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>\n        <Typography variant=\"subtitle2\" color=\"text.secondary\">\n          Layout preview ({optionCount} panel{optionCount !== 1 ? 's' : ''})\n        </Typography>\n        <InfoTooltip\n          description=\"Preview of the layout when all available options of the selected variable are selected.\"\n          enterDelay={100}\n        >\n          <IconButton size=\"small\" sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '2px' })}>\n            <InformationOutlineIcon\n              aria-hidden={false}\n              aria-label=\"Show layout preview information\"\n              fontSize=\"inherit\"\n              sx={{ color: (theme) => theme.palette.grey[700] }}\n            />\n          </IconButton>\n        </InfoTooltip>\n      </Box>\n      <Box sx={{ height: 315, overflow: 'auto' }}>\n        <RepeatGrid\n          repeatItems={repeatItems}\n          maxPer={maxPer}\n          gap={PREVIEW_GAP}\n          renderItem={() => (\n            <Box\n              sx={{\n                width: `100%`,\n                height: 150,\n                borderRadius: 1,\n                bgcolor: 'action.selected',\n                border: '1px solid',\n                borderColor: 'divider',\n              }}\n            />\n          )}\n        />\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Typography","InfoTooltip","RepeatGrid","InformationOutlineIcon","useMemo","PREVIEW_GAP","RepeatLayoutPreview","optionCount","maxPer","repeatItems","Array","from","length","_","i","sx","display","alignItems","gap","mb","variant","color","description","enterDelay","size","theme","borderRadius","shape","padding","aria-hidden","aria-label","fontSize","palette","grey","height","overflow","renderItem","width","bgcolor","border","borderColor"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAEC,UAAU,QAAQ,gBAAgB;AAC5D,SAASC,WAAW,EAAEC,UAAU,QAAQ,yBAAyB;AACjE,OAAOC,4BAA4B,qCAAqC;AAExE,SAASC,OAAO,QAAQ,QAAQ;AAOhC,MAAMC,cAAc;AAEpB,OAAO,SAASC,oBAAoB,EAAEC,WAAW,EAAEC,MAAM,EAA4B;IACnF,MAAMC,cAAcL,QAAQ,IAAMM,MAAMC,IAAI,CAAC;YAAEC,QAAQL;QAAY,GAAG,CAACM,GAAGC,IAAMA,IAAI;QAACP;KAAY;IAEjG,qBACE,MAACT;;0BACC,MAACA;gBAAIiB,IAAI;oBAAEC,SAAS;oBAAQC,YAAY;oBAAUC,KAAK;oBAAKC,IAAI;gBAAI;;kCAClE,MAACnB;wBAAWoB,SAAQ;wBAAYC,OAAM;;4BAAiB;4BACpCd;4BAAY;4BAAOA,gBAAgB,IAAI,MAAM;4BAAG;;;kCAEnE,KAACN;wBACCqB,aAAY;wBACZC,YAAY;kCAEZ,cAAA,KAACxB;4BAAWyB,MAAK;4BAAQT,IAAI,CAACU,QAAW,CAAA;oCAAEC,cAAcD,MAAME,KAAK,CAACD,YAAY;oCAAEE,SAAS;gCAAM,CAAA;sCAChG,cAAA,KAACzB;gCACC0B,eAAa;gCACbC,cAAW;gCACXC,UAAS;gCACThB,IAAI;oCAAEM,OAAO,CAACI,QAAUA,MAAMO,OAAO,CAACC,IAAI,CAAC,IAAI;gCAAC;;;;;;0BAKxD,KAACnC;gBAAIiB,IAAI;oBAAEmB,QAAQ;oBAAKC,UAAU;gBAAO;0BACvC,cAAA,KAACjC;oBACCO,aAAaA;oBACbD,QAAQA;oBACRU,KAAKb;oBACL+B,YAAY,kBACV,KAACtC;4BACCiB,IAAI;gCACFsB,OAAO,CAAC,IAAI,CAAC;gCACbH,QAAQ;gCACRR,cAAc;gCACdY,SAAS;gCACTC,QAAQ;gCACRC,aAAa;4BACf;;;;;;AAOd"}

package/dist/components/LayoutEditor/RepeatVariableEditor.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from 'react';
+import type { ControllerRenderProps, FieldErrors } from 'react-hook-form';
+import type { PanelEditorValues } from '../../model';
+import type { VariableDefinitionGroup } from './LayoutEditor';
+type RepeatVariableValue = ControllerRenderProps<PanelEditorValues, 'layoutDefinition.repeatVariable'>['value'];
+type RepeatVariableOnChange = ControllerRenderProps<PanelEditorValues, 'layoutDefinition.repeatVariable'>['onChange'];
+type RepeatVariableErrors = FieldErrors<NonNullable<NonNullable<PanelEditorValues['layoutDefinition']>['repeatVariable']>>;
+export interface RepeatVariableEditorProps {
+    value: RepeatVariableValue;
+    onChange: RepeatVariableOnChange;
+    errors: RepeatVariableErrors;
+    variableDefinitionGroups: VariableDefinitionGroup[];
+    isVertical: boolean;
+    onRepeatVariableSet: () => void;
+}
+export declare function RepeatVariableEditor({ value: current, onChange, errors, variableDefinitionGroups, isVertical, onRepeatVariableSet, }: RepeatVariableEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=RepeatVariableEditor.d.ts.map

package/dist/components/LayoutEditor/RepeatVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatVariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutEditor/RepeatVariableEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE9D,KAAK,mBAAmB,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,iCAAiC,CAAC,CAAC,OAAO,CAAC,CAAC;AAChH,KAAK,sBAAsB,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,iCAAiC,CAAC,CAAC,UAAU,CAAC,CAAC;AACtH,KAAK,oBAAoB,GAAG,WAAW,CACrC,WAAW,CAAC,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAClF,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,wBAAwB,EAAE,uBAAuB,EAAE,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EAAE,OAAO,EACd,QAAQ,EACR,MAAM,EACN,wBAAwB,EACxB,UAAU,EACV,mBAAmB,GACpB,EAAE,yBAAyB,GAAG,YAAY,CAuG1C"}

package/dist/components/LayoutEditor/RepeatVariableEditor.js

@@ -0,0 +1,168 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Grid2 as Grid, ListSubheader, MenuItem, TextField, Typography } from "@mui/material";
+import { useCallback } from "react";
+import { DEFAULT_MAX_PER_ROW, DEFAULT_REPEAT_ALIGNMENT } from "../../constants/index.js";
+export function RepeatVariableEditor({ value: current, onChange, errors, variableDefinitionGroups, isVertical, onRepeatVariableSet }) {
+    const handleVariableChange = useCallback((selected)=>{
+        if (!selected) {
+            onChange(undefined);
+        } else {
+            onChange(current ? {
+                ...current,
+                value: selected
+            } : {
+                value: selected,
+                alignment: DEFAULT_REPEAT_ALIGNMENT
+            });
+            if (!current) {
+                onRepeatVariableSet();
+            }
+        }
+    }, [
+        current,
+        onChange,
+        onRepeatVariableSet
+    ]);
+    const handleAlignmentChange = useCallback((selected)=>{
+        if (!current) return;
+        onChange(selected === 'vertical' ? {
+            ...current,
+            alignment: selected,
+            maxPer: undefined
+        } : {
+            ...current,
+            alignment: selected
+        });
+    }, [
+        current,
+        onChange
+    ]);
+    const handleMaxPerChange = useCallback((value)=>{
+        if (!current) return;
+        onChange({
+            ...current,
+            maxPer: value === '' ? undefined : Number(value)
+        });
+    }, [
+        current,
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Grid, {
+                size: 4,
+                children: /*#__PURE__*/ _jsxs(TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Repeat Variable",
+                    value: current?.value ?? '',
+                    error: !!errors.value,
+                    helperText: errors.value?.message,
+                    onChange: (event)=>handleVariableChange(event.target.value),
+                    slotProps: {
+                        select: {
+                            MenuProps: {
+                                PaperProps: {
+                                    sx: {
+                                        maxHeight: 240
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "",
+                            children: /*#__PURE__*/ _jsx(Typography, {
+                                sx: {
+                                    fontStyle: 'italic'
+                                },
+                                children: "None"
+                            })
+                        }),
+                        variableDefinitionGroups.flatMap(({ source, definitions })=>{
+                            const listDefs = definitions.filter((def)=>def.kind === 'ListVariable' && def.spec.allowMultiple);
+                            if (listDefs.length === 0) return [];
+                            return [
+                                source && /*#__PURE__*/ _jsx(ListSubheader, {
+                                    children: source
+                                }, `group-${source}`),
+                                ...listDefs.map((def)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: def.spec.name,
+                                        children: def.spec.display?.name ?? def.spec.name
+                                    }, `${source ?? 'dashboard'}-${def.spec.name}`))
+                            ];
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: 4,
+                children: /*#__PURE__*/ _jsxs(TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Alignment",
+                    value: current?.alignment ?? DEFAULT_REPEAT_ALIGNMENT,
+                    disabled: !current,
+                    error: !!errors.alignment,
+                    helperText: errors.alignment?.message,
+                    onChange: (event)=>handleAlignmentChange(event.target.value),
+                    children: [
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "horizontal",
+                            children: "Horizontal"
+                        }),
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "vertical",
+                            children: "Vertical"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: 4,
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Max Per Row",
+                    value: current?.maxPer ?? DEFAULT_MAX_PER_ROW,
+                    disabled: !current || isVertical,
+                    error: !!errors.maxPer,
+                    helperText: errors.maxPer?.message,
+                    onChange: (event)=>handleMaxPerChange(event.target.value),
+                    slotProps: {
+                        select: {
+                            MenuProps: {
+                                PaperProps: {
+                                    sx: {
+                                        maxHeight: 240
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    children: Array.from({
+                        length: 12
+                    }, (_, i)=>i + 1).map((n)=>/*#__PURE__*/ _jsx(MenuItem, {
+                            value: n,
+                            children: n
+                        }, n))
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=RepeatVariableEditor.js.map

package/dist/components/LayoutEditor/RepeatVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LayoutEditor/RepeatVariableEditor.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 { Grid2 as Grid, ListSubheader, MenuItem, TextField, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport type { ControllerRenderProps, FieldErrors } from 'react-hook-form';\n\nimport { DEFAULT_MAX_PER_ROW, DEFAULT_REPEAT_ALIGNMENT } from '../../constants';\nimport type { PanelEditorValues } from '../../model';\nimport type { VariableDefinitionGroup } from './LayoutEditor';\n\ntype RepeatVariableValue = ControllerRenderProps<PanelEditorValues, 'layoutDefinition.repeatVariable'>['value'];\ntype RepeatVariableOnChange = ControllerRenderProps<PanelEditorValues, 'layoutDefinition.repeatVariable'>['onChange'];\ntype RepeatVariableErrors = FieldErrors<\n  NonNullable<NonNullable<PanelEditorValues['layoutDefinition']>['repeatVariable']>\n>;\n\nexport interface RepeatVariableEditorProps {\n  value: RepeatVariableValue;\n  onChange: RepeatVariableOnChange;\n  errors: RepeatVariableErrors;\n  variableDefinitionGroups: VariableDefinitionGroup[];\n  isVertical: boolean;\n  onRepeatVariableSet: () => void;\n}\n\nexport function RepeatVariableEditor({\n  value: current,\n  onChange,\n  errors,\n  variableDefinitionGroups,\n  isVertical,\n  onRepeatVariableSet,\n}: RepeatVariableEditorProps): ReactElement {\n  const handleVariableChange = useCallback(\n    (selected: string): void => {\n      if (!selected) {\n        onChange(undefined);\n      } else {\n        onChange(current ? { ...current, value: selected } : { value: selected, alignment: DEFAULT_REPEAT_ALIGNMENT });\n        if (!current) {\n          onRepeatVariableSet();\n        }\n      }\n    },\n    [current, onChange, onRepeatVariableSet],\n  );\n\n  const handleAlignmentChange = useCallback(\n    (selected: string): void => {\n      if (!current) return;\n      onChange(\n        selected === 'vertical'\n          ? { ...current, alignment: selected, maxPer: undefined }\n          : { ...current, alignment: selected },\n      );\n    },\n    [current, onChange],\n  );\n\n  const handleMaxPerChange = useCallback(\n    (value: string): void => {\n      if (!current) return;\n      onChange({ ...current, maxPer: value === '' ? undefined : Number(value) });\n    },\n    [current, onChange],\n  );\n\n  return (\n    <>\n      <Grid size={4}>\n        <TextField\n          select\n          fullWidth\n          label=\"Repeat Variable\"\n          value={current?.value ?? ''}\n          error={!!errors.value}\n          helperText={errors.value?.message}\n          onChange={(event) => handleVariableChange(event.target.value)}\n          slotProps={{ select: { MenuProps: { PaperProps: { sx: { maxHeight: 240 } } } } }}\n        >\n          <MenuItem value=\"\">\n            <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n          </MenuItem>\n          {variableDefinitionGroups.flatMap(({ source, definitions }) => {\n            const listDefs = definitions.filter((def) => def.kind === 'ListVariable' && def.spec.allowMultiple);\n            if (listDefs.length === 0) return [];\n            return [\n              source && <ListSubheader key={`group-${source}`}>{source}</ListSubheader>,\n              ...listDefs.map((def) => (\n                <MenuItem key={`${source ?? 'dashboard'}-${def.spec.name}`} value={def.spec.name}>\n                  {def.spec.display?.name ?? def.spec.name}\n                </MenuItem>\n              )),\n            ];\n          })}\n        </TextField>\n      </Grid>\n\n      <Grid size={4}>\n        <TextField\n          select\n          fullWidth\n          label=\"Alignment\"\n          value={current?.alignment ?? DEFAULT_REPEAT_ALIGNMENT}\n          disabled={!current}\n          error={!!errors.alignment}\n          helperText={errors.alignment?.message}\n          onChange={(event) => handleAlignmentChange(event.target.value)}\n        >\n          <MenuItem value=\"horizontal\">Horizontal</MenuItem>\n          <MenuItem value=\"vertical\">Vertical</MenuItem>\n        </TextField>\n      </Grid>\n\n      <Grid size={4}>\n        <TextField\n          select\n          fullWidth\n          label=\"Max Per Row\"\n          value={current?.maxPer ?? DEFAULT_MAX_PER_ROW}\n          disabled={!current || isVertical}\n          error={!!errors.maxPer}\n          helperText={errors.maxPer?.message}\n          onChange={(event) => handleMaxPerChange(event.target.value)}\n          slotProps={{ select: { MenuProps: { PaperProps: { sx: { maxHeight: 240 } } } } }}\n        >\n          {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (\n            <MenuItem key={n} value={n}>\n              {n}\n            </MenuItem>\n          ))}\n        </TextField>\n      </Grid>\n    </>\n  );\n}\n"],"names":["Grid2","Grid","ListSubheader","MenuItem","TextField","Typography","useCallback","DEFAULT_MAX_PER_ROW","DEFAULT_REPEAT_ALIGNMENT","RepeatVariableEditor","value","current","onChange","errors","variableDefinitionGroups","isVertical","onRepeatVariableSet","handleVariableChange","selected","undefined","alignment","handleAlignmentChange","maxPer","handleMaxPerChange","Number","size","select","fullWidth","label","error","helperText","message","event","target","slotProps","MenuProps","PaperProps","sx","maxHeight","fontStyle","flatMap","source","definitions","listDefs","filter","def","kind","spec","allowMultiple","length","map","name","display","disabled","Array","from","_","i","n"],"mappings":"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"}

package/dist/components/LayoutEditor/index.d.ts

@@ -0,0 +1,4 @@
+export * from './LayoutEditor';
+export * from './RepeatLayoutPreview';
+export * from './RepeatVariableEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LayoutEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}

package/dist/{cjs/model/explore.js → components/LayoutEditor/index.js}

@@ -10,7 +10,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+export * from "./LayoutEditor.js";
+export * from "./RepeatLayoutPreview.js";
+export * from "./RepeatVariableEditor.js";
+
+//# sourceMappingURL=index.js.map

package/dist/components/LayoutEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LayoutEditor/index.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\nexport * from './LayoutEditor';\nexport * from './RepeatLayoutPreview';\nexport * from './RepeatVariableEditor';\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;AAEjC,cAAc,oBAAiB;AAC/B,cAAc,2BAAwB;AACtC,cAAc,4BAAyB"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { LegendSpecOptions } from '../../model';
+import type { ReactElement } from 'react';
+import type { LegendSpecOptions } from '../../model';
 export interface LegendOptionsEditorProps {
     value?: LegendSpecOptions;
     onChange: (legend?: LegendSpecOptions) => void;

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAGL,iBAAiB,EAQlB,MAAM,aAAa,CAAC;AAsBrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,WAA2B,GAC5B,EAAE,wBAAwB,GAAG,YAAY,CAgLzC"}
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,iBAAiB,EAA2D,MAAM,aAAa,CAAC;AA8B9G,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,WAA2B,GAC5B,EAAE,wBAAwB,GAAG,YAAY,CAgLzC"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -1,4 +1,3 @@
-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.
@@ -11,10 +10,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';
-import { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete, DEFAULT_LEGEND, getLegendSize, getLegendMode, getLegendPosition } from '@perses-dev/components';
-import { useMemo } from 'react';
-import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG, comparisonLegends } from '../../model';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete, DEFAULT_LEGEND, getLegendSize, getLegendMode, getLegendPosition } from "@perses-dev/components";
+import { useMemo } from "react";
+import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG, comparisonLegends } from "../../model/index.js";
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.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 { Switch, SwitchProps, ToggleButtonGroup, ToggleButton } from '@mui/material';\nimport {\n  ErrorAlert,\n  OptionsEditorControl,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  DEFAULT_LEGEND,\n  getLegendSize,\n  getLegendMode,\n  getLegendPosition,\n} from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n  LEGEND_SIZE_CONFIG,\n  comparisonLegends,\n  ComparisonValues,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue | ComparisonValues };\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n  calculation?: 'aggregation' | 'comparison';\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n  calculation = 'aggregation',\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const legendValuesConfig = useMemo(() => {\n    const currentValues = value?.values;\n    if (!currentValues?.length) return [];\n\n    if (calculation === 'aggregation') {\n      return currentValues.reduce((result, item) => {\n        const config = LEGEND_VALUE_CONFIG[item as LegendValue];\n        if (config) {\n          result.push({ ...config, id: item });\n        }\n        return result;\n      }, [] as LegendValueOption[]);\n    }\n\n    return currentValues.map((id) => {\n      const { label, description } = comparisonLegends[id as ComparisonValues];\n      return {\n        id,\n        label,\n        description,\n      };\n    });\n  }, [calculation, value?.values]);\n\n  const valueOptions = useMemo(() => {\n    if (calculation === 'aggregation') {\n      return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config]) => {\n        return {\n          id: id as LegendValue,\n          ...config,\n        };\n      });\n    }\n\n    return Object.entries(comparisonLegends).map(([id, config]) => ({\n      id: id as ComparisonValues,\n      ...config,\n    }));\n  }, [calculation]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl label=\"Show\" control={<Switch checked={!!value} onChange={handleLegendShowChange} />} />\n      {value && (\n        <>\n          <OptionsEditorControl\n            label=\"Position\"\n            control={\n              <SettingsAutocomplete\n                value={{\n                  ...legendPositionConfig,\n                  id: currentPosition,\n                }}\n                options={POSITION_OPTIONS}\n                onChange={handleLegendPositionChange}\n                disableClearable\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Mode\"\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={currentMode}\n                aria-label=\"Mode\"\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    position: currentPosition,\n                    mode: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config]) => (\n                  <ToggleButton\n                    key={modeId}\n                    value={modeId}\n                    selected={currentMode === modeId}\n                    aria-label={`display ${modeId} mode`}\n                  >\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          {currentMode === 'table' && (\n            <>\n              <OptionsEditorControl\n                label=\"Size\"\n                control={\n                  <SettingsAutocomplete\n                    value={{\n                      ...legendSizeConfig,\n                      id: currentSize,\n                    }}\n                    options={SIZE_OPTIONS}\n                    onChange={handleLegendSizeChange}\n                    // TODO: enable sizes for list mode when we normalize the layout of\n                    // lists to more closely match tables.\n                    disableClearable\n                  />\n                }\n              />\n              {showValuesEditor && (\n                <OptionsEditorControl\n                  label=\"Values\"\n                  control={\n                    // For some reason, the inferred option type doesn't always seem to work\n                    // quite right when `multiple` is true. Explicitly setting the generics\n                    // to work around this.\n                    <SettingsAutocomplete<LegendValueOption, true, true>\n                      multiple={true}\n                      disableCloseOnSelect\n                      disableClearable\n                      value={legendValuesConfig}\n                      options={valueOptions}\n                      onChange={handleLegendValueChange}\n                      limitTags={1}\n                      ChipProps={{\n                        size: 'small',\n                      }}\n                    />\n                  }\n                />\n              )}\n            </>\n          )}\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","ToggleButtonGroup","ToggleButton","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","DEFAULT_LEGEND","getLegendSize","getLegendMode","getLegendPosition","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendSizeChange","currentPosition","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","mode","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","control","options","disableClearable","color","exclusive","aria-label","__","modeId","selected","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.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 type { SwitchProps } from '@mui/material';\nimport { Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';\nimport {\n  ErrorAlert,\n  OptionsEditorControl,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  DEFAULT_LEGEND,\n  getLegendSize,\n  getLegendMode,\n  getLegendPosition,\n} from '@perses-dev/components';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type { LegendSpecOptions, LegendSingleSelectConfig, LegendValue, ComparisonValues } from '../../model';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LEGEND_SIZE_CONFIG,\n  comparisonLegends,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue | ComparisonValues };\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n  calculation?: 'aggregation' | 'comparison';\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n  calculation = 'aggregation',\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const legendValuesConfig = useMemo(() => {\n    const currentValues = value?.values;\n    if (!currentValues?.length) return [];\n\n    if (calculation === 'aggregation') {\n      return currentValues.reduce((result, item) => {\n        const config = LEGEND_VALUE_CONFIG[item as LegendValue];\n        if (config) {\n          result.push({ ...config, id: item });\n        }\n        return result;\n      }, [] as LegendValueOption[]);\n    }\n\n    return currentValues.map((id) => {\n      const { label, description } = comparisonLegends[id as ComparisonValues];\n      return {\n        id,\n        label,\n        description,\n      };\n    });\n  }, [calculation, value?.values]);\n\n  const valueOptions = useMemo(() => {\n    if (calculation === 'aggregation') {\n      return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config]) => {\n        return {\n          id: id as LegendValue,\n          ...config,\n        };\n      });\n    }\n\n    return Object.entries(comparisonLegends).map(([id, config]) => ({\n      id: id as ComparisonValues,\n      ...config,\n    }));\n  }, [calculation]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl label=\"Show\" control={<Switch checked={!!value} onChange={handleLegendShowChange} />} />\n      {value && (\n        <>\n          <OptionsEditorControl\n            label=\"Position\"\n            control={\n              <SettingsAutocomplete\n                value={{\n                  ...legendPositionConfig,\n                  id: currentPosition,\n                }}\n                options={POSITION_OPTIONS}\n                onChange={handleLegendPositionChange}\n                disableClearable\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Mode\"\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={currentMode}\n                aria-label=\"Mode\"\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    position: currentPosition,\n                    mode: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config]) => (\n                  <ToggleButton\n                    key={modeId}\n                    value={modeId}\n                    selected={currentMode === modeId}\n                    aria-label={`display ${modeId} mode`}\n                  >\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          {currentMode === 'table' && (\n            <>\n              <OptionsEditorControl\n                label=\"Size\"\n                control={\n                  <SettingsAutocomplete\n                    value={{\n                      ...legendSizeConfig,\n                      id: currentSize,\n                    }}\n                    options={SIZE_OPTIONS}\n                    onChange={handleLegendSizeChange}\n                    // TODO: enable sizes for list mode when we normalize the layout of\n                    // lists to more closely match tables.\n                    disableClearable\n                  />\n                }\n              />\n              {showValuesEditor && (\n                <OptionsEditorControl\n                  label=\"Values\"\n                  control={\n                    // For some reason, the inferred option type doesn't always seem to work\n                    // quite right when `multiple` is true. Explicitly setting the generics\n                    // to work around this.\n                    <SettingsAutocomplete<LegendValueOption, true, true>\n                      multiple={true}\n                      disableCloseOnSelect\n                      disableClearable\n                      value={legendValuesConfig}\n                      options={valueOptions}\n                      onChange={handleLegendValueChange}\n                      limitTags={1}\n                      ChipProps={{\n                        size: 'small',\n                      }}\n                    />\n                  }\n                />\n              )}\n            </>\n          )}\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","ToggleButtonGroup","ToggleButton","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","DEFAULT_LEGEND","getLegendSize","getLegendMode","getLegendPosition","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendSizeChange","currentPosition","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","mode","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","control","options","disableClearable","color","exclusive","aria-label","__","modeId","selected","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}