@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { useImmer } from 'use-immer';\nimport { Action, DatasourceSpec } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/**\n * This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState(name: string, spec: DatasourceSpec) {\n  const patchedDisplay = {\n    name: spec.display?.name ?? '',\n    description: spec.display?.description ?? '',\n  };\n\n  return {\n    name: name,\n    spec: {\n      ...spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps {\n  initialName: string;\n  initialSpec: DatasourceSpec;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (name: string, spec: DatasourceSpec) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n  const { initialName, initialSpec, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialName, initialSpec);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<DatasourceEditValidationType>({\n    resolver: zodResolver(datasourceEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: state.name,\n      title: state.spec.display?.name,\n      description: state.spec.display?.description,\n      default: state.spec.default,\n    },\n  });\n\n  const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(state.name, {\n      ...state.spec,\n      display: {\n        name: state.spec.display?.name === '' ? undefined : state.spec.display?.name,\n        description: state.spec.display?.description === '' ? undefined : state.spec.display?.description,\n      },\n    });\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    setState((draft) => {\n                      field.onChange(event);\n                      if (draft.spec.display) {\n                        draft.spec.display.name = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      if (draft.spec.display) {\n                        draft.spec.display.description = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                name=\"default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    {...field}\n                    control={\n                      <Switch\n                        checked={state.spec.default}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.spec.default = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\n                    label=\"Set as default\"\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {state.spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <PluginEditor\n          width=\"100%\"\n          pluginType=\"Datasource\"\n          pluginKindLabel=\"Source\"\n          value={state.spec.plugin}\n          isReadonly={action === 'read'}\n          onChange={(v) => {\n            setState((draft) => {\n              draft.spec.plugin = v;\n            });\n          }}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","name","spec","patchedDisplay","display","description","DatasourceEditorForm","props","state","initialName","initialSpec","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","title","default","processForm","undefined","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginType","pluginKindLabel","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './DatasourceEditorForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/index.ts"],"names":[],"mappings":"AAaA,cAAc,wBAAwB,CAAC"}

package/dist/components/DatasourceEditorForm/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './DatasourceEditorForm';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/index.ts"],"sourcesContent":["// Copyright 2023 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 './DatasourceEditorForm';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,yBAAyB"}

package/dist/components/DatasourceSelect.d.ts

@@ -6,11 +6,17 @@ export interface DatasourceSelectProps extends Omit<SelectProps<string>, Omitted
     value: DatasourceSelector;
     onChange: (next: DatasourceSelector) => void;
     datasourcePluginKind: string;
+    project?: string;
 }
 /**
  * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `DatasourceSelector`.
  */
 export declare function DatasourceSelect(props: DatasourceSelectProps): JSX.Element;
+export declare function DatasourceName(props: {
+    name: string;
+    overridden?: boolean;
+    overriding?: boolean;
+}): JSX.Element;
 export {};
 //# sourceMappingURL=DatasourceSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAY,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA6B5D"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAiE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAuF5D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,eAajG"}

package/dist/components/DatasourceSelect.js

@@ -10,57 +10,152 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Select, MenuItem } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
+import { Select, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';
 import { useMemo } from 'react';
-import { useListDatasources } from '../runtime';
+import { useListDatasourceSelectItems } from '../runtime';
 /**
  * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `DatasourceSelector`.
  */ export function DatasourceSelect(props) {
-    const { datasourcePluginKind , value , onChange , ...others } = props;
-    const { data , isLoading  } = useListDatasources(datasourcePluginKind);
-    // Convert the datasource list into menu items with name/value strings that the Select input can work with
+    const { datasourcePluginKind , value , project , onChange , ...others } = props;
+    const { data , isLoading  } = useListDatasourceSelectItems(datasourcePluginKind, project);
+    // Rebuild the group of the value if not provided
+    const defaultValue = useMemo(()=>{
+        var _flatMap_find;
+        const group = (_flatMap_find = (data !== null && data !== void 0 ? data : []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
+            return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;
+        })) === null || _flatMap_find === void 0 ? void 0 : _flatMap_find.selector.group;
+        return {
+            ...value,
+            group
+        };
+    }, [
+        value,
+        data
+    ]);
+    // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = useMemo(()=>{
-        if (data === undefined) return [];
-        return data.map((ds)=>({
-                name: ds.name,
-                value: selectorToOptionValue(ds.selector)
+        var _item_saved;
+        return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
+                group: itemGroup.group,
+                editLink: itemGroup.editLink,
+                items: itemGroup.items.map((item)=>({
+                        name: item.name,
+                        overriding: item.overriding,
+                        overridden: item.overridden,
+                        saved: (_item_saved = item.saved) !== null && _item_saved !== void 0 ? _item_saved : true,
+                        group: item.selector.group,
+                        value: selectorToOptionValue(item.selector)
+                    }))
             }));
     }, [
         data
     ]);
     // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
-    const optionValue = isLoading ? '' : selectorToOptionValue(value);
+    const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);
     // When the user makes a selection, convert the string option value back to a DatasourceSelector
     const handleChange = (e)=>{
         const next = optionValueToSelector(e.target.value);
         onChange(next);
     };
-    // TODO: Does this need a loading indicator of some kind?
+    // We use a fake action event when we click on the action of the chip (hijack the "delete" feature).
+    // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property
+    // controls its visibility.
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const fakeActionEvent = ()=>{};
+    // TODO:
+    //  - Does this need a loading indicator of some kind?
+    //  - The group's edit link is not clickable once selected.
+    //  - The group's edit link is disabled if datasource is overridden.
+    //    Ref: https://github.com/mui/material-ui/issues/36572
     return /*#__PURE__*/ _jsx(Select, {
         ...others,
         value: optionValue,
         onChange: handleChange,
-        children: menuItems.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
-                value: menuItem.value,
-                children: menuItem.name
-            }, menuItem.value))
+        children: menuItems.map((menuItemGroup)=>[
+                /*#__PURE__*/ _jsx(Divider, {}, `${menuItemGroup.group}-divider`),
+                ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: menuItem.value,
+                        disabled: menuItem.overridden || !menuItem.saved,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ _jsx(ListItemText, {
+                                    children: /*#__PURE__*/ _jsx(DatasourceName, {
+                                        name: menuItem.name,
+                                        overridden: menuItem.overridden,
+                                        overriding: menuItem.overriding
+                                    })
+                                }),
+                                !menuItem.saved && /*#__PURE__*/ _jsx(ListItemText, {
+                                    children: "Save the dashboard to enable this datasource"
+                                }),
+                                /*#__PURE__*/ _jsx(ListItemText, {
+                                    style: {
+                                        textAlign: 'right'
+                                    },
+                                    children: menuItemGroup.group && menuItemGroup.group.length > 0 && /*#__PURE__*/ _jsx(Chip, {
+                                        disabled: false,
+                                        label: menuItemGroup.group,
+                                        size: "small",
+                                        onDelete: menuItemGroup.editLink ? fakeActionEvent : undefined,
+                                        deleteIcon: menuItemGroup.editLink ? /*#__PURE__*/ _jsx(IconButton, {
+                                            href: menuItemGroup.editLink,
+                                            target: "_blank",
+                                            children: /*#__PURE__*/ _jsx(OpenInNewIcon, {
+                                                fontSize: "small"
+                                            })
+                                        }) : undefined
+                                    })
+                                })
+                            ]
+                        })
+                    }, menuItem.value))
+            ])
+    });
+}
+export function DatasourceName(props) {
+    const { name , overridden , overriding  } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            `${name} `,
+            !overridden && overriding && /*#__PURE__*/ _jsx(Box, {
+                display: "inline",
+                fontWeight: "normal",
+                color: (theme)=>theme.palette.primary.main,
+                children: "(overriding)"
+            }),
+            overridden && '(overridden)'
+        ]
     });
 }
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
-// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value
-function selectorToOptionValue(selector) {
-    var _name;
+/**
+ * Given a DatasourceSelectItemSelector,
+ * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
+ * @param selector
+ */ function selectorToOptionValue(selector) {
+    var _selector_group, _selector_name;
     return [
         selector.kind,
-        (_name = selector.name) !== null && _name !== void 0 ? _name : ''
+        (_selector_group = selector.group) !== null && _selector_group !== void 0 ? _selector_group : '',
+        (_selector_name = selector.name) !== null && _selector_name !== void 0 ? _selector_name : ''
     ].join(OPTION_VALUE_DELIMITER);
 }
-// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector
-function optionValueToSelector(optionValue) {
-    const [kind, name] = optionValue.split(OPTION_VALUE_DELIMITER);
+/**
+ * Given an option value name like `{kind}_____{group}_____{name}`,
+ * returns a DatasourceSelector to be used by the query data model.
+ * @param optionValue
+ */ function optionValueToSelector(optionValue) {
+    const words = optionValue.split(OPTION_VALUE_DELIMITER);
+    const kind = words[0];
+    const name = words[2];
     if (kind === undefined || name === undefined) {
         throw new Error('Invalid optionValue string');
     }

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 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 { Select, SelectProps, MenuItem } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { useListDatasources } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps) {\n  const { datasourcePluginKind, value, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasources(datasourcePluginKind);\n\n  // Convert the datasource list into menu items with name/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    if (data === undefined) return [];\n    return data.map((ds) => ({ name: ds.name, value: selectorToOptionValue(ds.selector) }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(value);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItem) => (\n        <MenuItem key={menuItem.value} value={menuItem.value}>\n          {menuItem.name}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value\nfunction selectorToOptionValue(selector: DatasourceSelector): string {\n  return [selector.kind, selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const [kind, name] = optionValue.split(OPTION_VALUE_DELIMITER);\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["Select","MenuItem","useMemo","useListDatasources","DatasourceSelect","props","datasourcePluginKind","value","onChange","others","data","isLoading","menuItems","undefined","map","ds","name","selectorToOptionValue","selector","optionValue","handleChange","e","next","optionValueToSelector","target","menuItem","OPTION_VALUE_DELIMITER","kind","join","split","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAE9D,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,kBAAkB,QAAQ,YAAY,CAAC;AAYhD;;;CAGC,GACD,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,oBAAoB,CAAA,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IACnE,MAAM,EAAEK,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGR,kBAAkB,CAACG,oBAAoB,CAAC,AAAC;IAErE,0GAA0G;IAC1G,MAAMM,SAAS,GAAGV,OAAO,CAAC,IAAM;QAC9B,IAAIQ,IAAI,KAAKG,SAAS,EAAE,OAAO,EAAE,CAAC;QAClC,OAAOH,IAAI,CAACI,GAAG,CAAC,CAACC,EAAE,GAAM,CAAA;gBAAEC,IAAI,EAAED,EAAE,CAACC,IAAI;gBAAET,KAAK,EAAEU,qBAAqB,CAACF,EAAE,CAACG,QAAQ,CAAC;aAAE,CAAA,AAAC,CAAC,CAAC;IAC1F,CAAC,EAAE;QAACR,IAAI;KAAC,CAAC,AAAC;IAEX,gHAAgH;IAChH,MAAMS,WAAW,GAAGR,SAAS,GAAG,EAAE,GAAGM,qBAAqB,CAACV,KAAK,CAAC,AAAC;IAElE,gGAAgG;IAChG,MAAMa,YAAY,GAAoC,CAACC,CAAC,GAAK;QAC3D,MAAMC,IAAI,GAAGC,qBAAqB,CAACF,CAAC,CAACG,MAAM,CAACjB,KAAK,CAAC,AAAC;QACnDC,QAAQ,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,AAAC;IAEF,yDAAyD;IACzD,qBACE,KAACtB,MAAM;QAAE,GAAGS,MAAM;QAAEF,KAAK,EAAEY,WAAW;QAAEX,QAAQ,EAAEY,YAAY;kBAC3DR,SAAS,CAACE,GAAG,CAAC,CAACW,QAAQ,iBACtB,KAACxB,QAAQ;gBAAsBM,KAAK,EAAEkB,QAAQ,CAAClB,KAAK;0BACjDkB,QAAQ,CAACT,IAAI;eADDS,QAAQ,CAAClB,KAAK,CAElB,AACZ,CAAC;MACK,CACT;AACJ,CAAC;AAED,kDAAkD;AAClD,MAAMmB,sBAAsB,GAAG,OAAO,AAAC;AAEvC,uHAAuH;AACvH,SAAST,qBAAqB,CAACC,QAA4B,EAAU;QAC5CA,KAAa;IAApC,OAAO;QAACA,QAAQ,CAACS,IAAI;QAAET,CAAAA,KAAa,GAAbA,QAAQ,CAACF,IAAI,cAAbE,KAAa,cAAbA,KAAa,GAAI,EAAE;KAAC,CAACU,IAAI,CAACF,sBAAsB,CAAC,CAAC;AAC3E,CAAC;AAED,oFAAoF;AACpF,SAASH,qBAAqB,CAACJ,WAAmB,EAAsB;IACtE,MAAM,CAACQ,IAAI,EAAEX,IAAI,CAAC,GAAGG,WAAW,CAACU,KAAK,CAACH,sBAAsB,CAAC,AAAC;IAC/D,IAAIC,IAAI,KAAKd,SAAS,IAAIG,IAAI,KAAKH,SAAS,EAAE;QAC5C,MAAM,IAAIiB,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAChD,CAAC;IACD,OAAO;QACLH,IAAI;QACJX,IAAI,EAAEA,IAAI,KAAK,EAAE,GAAGH,SAAS,GAAGG,IAAI;KACrC,CAAC;AACJ,CAAC"}
+{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps) {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = () => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }) {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -146,7 +146,7 @@ export function LegendOptionsEditor({ value , onChange  }) {
                     onChange: handleLegendSizeChange,
                     // TODO: enable sizes for list mode when we normalize the layout of
                     // lists to more closely match tables.
-                    disabled: value === undefined || currentMode !== 'Table',
+                    disabled: value === undefined || currentMode !== 'table',
                     disableClearable: true
                 })
             }),
@@ -162,7 +162,7 @@ export function LegendOptionsEditor({ value , onChange  }) {
                     value: legendValuesConfig,
                     options: VALUE_OPTIONS,
                     onChange: handleLegendValueChange,
-                    disabled: value === undefined || currentMode !== 'Table',
+                    disabled: value === undefined || currentMode !== 'table',
                     limitTags: 1,
                     ChipProps: {
                         size: 'small'

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\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} 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 LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\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 };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\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) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\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  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\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            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\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            disabled={value === undefined || currentMode !== 'Table'}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\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={VALUE_OPTIONS}\n            onChange={handleLegendValueChange}\n            disabled={value === undefined || currentMode !== 'Table'}\n            limitTags={1}\n            ChipProps={{\n              size: 'small',\n            }}\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","currentValues","legendValuesConfig","reduce","result","item","push","error","name","message","label","control","options","disabled","disableClearable","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\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} 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 LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\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 };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\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) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\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  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\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            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\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            disabled={value === undefined || currentMode !== 'table'}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\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={VALUE_OPTIONS}\n            onChange={handleLegendValueChange}\n            disabled={value === undefined || currentMode !== 'table'}\n            limitTags={1}\n            ChipProps={{\n              size: 'small',\n            }}\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","currentValues","legendValuesConfig","reduce","result","item","push","error","name","message","label","control","options","disabled","disableClearable","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/index.ts"],"sourcesContent":["// Copyright 2023 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 './LegendOptionsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/index.ts"],"sourcesContent":["// Copyright 2023 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 './LegendOptionsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAwB"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export declare type OptionsEditorRadio = {
+    label: string;
+    /**
+     * Content rendered when the tab is active.
+     */
+    content: ReactNode;
+};
+export declare type OptionsEditorRadiosProps = {
+    tabs: OptionsEditorRadio[];
+    defaultTab: number;
+    onModeChange: (value: number) => void;
+    isReadonly?: boolean;
+};
+export declare const OptionsEditorRadios: (props: OptionsEditorRadiosProps) => JSX.Element;
+//# sourceMappingURL=OptionsEditorRadios.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAoClE,CAAC"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js

@@ -0,0 +1,61 @@
+// Copyright 2023 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormControlLabel, Radio, RadioGroup, Box } from '@mui/material';
+import { useState } from 'react';
+import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';
+export const OptionsEditorRadios = (props)=>{
+    const { tabs , defaultTab , onModeChange , isReadonly  } = props;
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const handleChange = (_, value)=>{
+        const v = parseInt(value);
+        setActiveTab(v);
+        onModeChange(v);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: (theme)=>theme.palette.divider
+                },
+                children: /*#__PURE__*/ _jsx(FormControl, {
+                    children: /*#__PURE__*/ _jsx(RadioGroup, {
+                        row: true,
+                        defaultValue: defaultTab,
+                        value: activeTab,
+                        onChange: handleChange,
+                        "aria-labelledby": "Configuration radio",
+                        children: tabs.map(({ label  }, i)=>{
+                            return /*#__PURE__*/ _jsx(FormControlLabel, {
+                                disabled: isReadonly,
+                                value: i,
+                                control: /*#__PURE__*/ _jsx(Radio, {}),
+                                label: label
+                            }, label);
+                        })
+                    })
+                })
+            }),
+            tabs.map(({ label , content  }, i)=>{
+                return /*#__PURE__*/ _jsx(OptionsEditorTabPanel, {
+                    value: activeTab,
+                    index: i,
+                    children: content
+                }, label);
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=OptionsEditorRadios.js.map

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"sourcesContent":["// Copyright 2023 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 { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps) => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAoBC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,KAAI,EAAEC,WAAU,EAAEC,aAAY,EAAEC,WAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,QAAQC;gBAAQ;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,IAAI,CAAC,EAAEC,MAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,IAAI,CAAC,EAAEC,MAAK,EAAEI,QAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

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

@@ -0,0 +1,2 @@
+export * from './OptionsEditorRadios';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC"}

package/dist/components/OptionsEditorRadios/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './OptionsEditorRadios';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/index.ts"],"sourcesContent":["// Copyright 2023 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 './OptionsEditorRadios';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAwB"}

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface OptionsEditorTabPanelProps {
+    children: React.ReactNode;
+    index: number;
+    value: number;
+}
+export declare function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): JSX.Element;
+export {};
+//# sourceMappingURL=OptionsEditorTabPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"names":[],"mappings":";AAeA,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eAgBtE"}

package/dist/components/{OptionsEditorTabs/TabPanel.js → OptionsEditorTabPanel/OptionsEditorTabPanel.js}

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-export function TabPanel(props) {
+export function OptionsEditorTabPanel(props) {
     const { children , value , index , ...other } = props;
     const isActive = value === index;
     return /*#__PURE__*/ _jsx("div", {
@@ -28,4 +28,4 @@ export function TabPanel(props) {
     });
 }
 
-//# sourceMappingURL=TabPanel.js.map
+//# sourceMappingURL=OptionsEditorTabPanel.js.map

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps) {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAQpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAEC,MAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,MAAM,CAAC;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,MAAM,CAAC;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}

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

@@ -0,0 +1,2 @@
+export * from './OptionsEditorTabPanel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabPanel/index.ts"],"names":[],"mappings":"AAaA,cAAc,yBAAyB,CAAC"}

package/dist/components/OptionsEditorTabPanel/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './OptionsEditorTabPanel';
+
+//# sourceMappingURL=index.js.map