@perses-dev/plugin-system 0.53.0-beta.1 → 0.53.0-beta.2

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -11,16 +11,16 @@
 // 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 { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQueryClient } from '@tanstack/react-query';
 import { getSubmitText, getTitleAction } from '../../../utils';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
 import { VARIABLE_TYPES } from '../variable-model';
-import { useTimeRange } from '../../../runtime';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
 import { SORT_METHODS } from './variable-editor-form-model';
 function FallbackPreview() {
@@ -94,6 +94,7 @@ function TextVariableEditorForm({ action, control }) {
 }
 function ListVariableEditorForm({ action, control }) {
     const form = useFormContext();
+    const queryClient = useQueryClient();
     /** We use `previewSpec` to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
@@ -112,6 +113,17 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.sort'
     });
+    const handleRefresh = useCallback(async ()=>{
+        await queryClient.invalidateQueries({
+            queryKey: [
+                'variable',
+                previewSpec
+            ]
+        });
+    }, [
+        previewSpec,
+        queryClient
+    ]);
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
     const values = form.getValues();
@@ -130,7 +142,6 @@ function ListVariableEditorForm({ action, control }) {
     if (!values.spec.sort) {
         form.setValue('spec.sort', 'none');
     }
-    const { refresh } = useTimeRange();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Typography, {
@@ -162,7 +173,6 @@ function ListVariableEditorForm({ action, control }) {
                                 name: "spec.plugin",
                                 render: ({ field })=>{
                                     return /*#__PURE__*/ _jsx(PluginEditor, {
-                                        postExecuteRunQuery: refresh,
                                         withRunQueryButton: true,
                                         width: "100%",
                                         pluginTypes: [
@@ -182,7 +192,8 @@ function ListVariableEditorForm({ action, control }) {
                                                 kind: v.selection.kind,
                                                 spec: v.spec
                                             });
-                                        }
+                                        },
+                                        onQueryRefresh: handleRefresh
                                     });
                                 }
                             })

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { useTimeRange } from '../../../runtime';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  /** We use `previewSpec` to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = form.getValues() as ListVariableDefinition;\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  const values = form.getValues() as ListVariableDefinition;\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  const { refresh } = useTimeRange();\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewSpec} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    postExecuteRunQuery={refresh}\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\n          />\n        </Stack>\n      </Stack>\n\n      <Divider />\n\n      <Typography py={1} variant=\"subtitle1\">\n        Dropdown Options\n      </Typography>\n      <Stack spacing=\"2\">\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Controller\n              control={control}\n              name=\"spec.customAllValue\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Custom All Value\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={\n                    fieldState.error?.message\n                      ? fieldState.error.message\n                      : 'When All is selected, this value will be used'\n                  }\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    if (event.target.value === '') {\n                      field.onChange(undefined);\n                    } else {\n                      field.onChange(event);\n                    }\n                  }}\n                />\n              )}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\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  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\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} Variable</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","PluginEditor","useValidationSchemas","VARIABLE_TYPES","useTimeRange","VariableListPreview","VariablePreview","SORT_METHODS","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","previewSpec","getValues","plugin","kind","pluginSpec","spec","_allowAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","refresh","mb","FallbackComponent","resetKeys","definition","postExecuteRunQuery","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","Object","keys","map","key","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"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,SAA8CA,QAAQ,QAAQ,QAAQ;AACtE,SAASC,GAAG,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAErH,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,EAAEC,WAAW,QAAQ,yBAAyB;AAClH,SAAkBC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,kBAAkB;AACtH,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,EAAEC,cAAc,QAAQ,iBAAiB;AAC/D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,mBAAmB;AACxD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,oBAAoB;AACzE,SAASC,YAAY,QAAwB,+BAA+B;AAE5E,SAASC;IACP,qBAAO,KAACC;kBAAI;;AACd;AAOA,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,OAAO,EAA+B;IAC9E,qBACE;;0BACE,KAAC/B;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAS;;kCACd,KAACtB;wBACCmB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B;;kDACE,KAACvC;kDACC,cAAA,KAAC0B;4CAAgBc,QAAQ;gDAACF,MAAMG,KAAK;6CAAC;;;kDAExC,KAACtC;wCACE,GAAGmC,KAAK;wCACTI,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YAAYV,WAAWS,KAAK,EAAEE;wCAC9BT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACTd,MAAMa,QAAQ,CAACC;wCACjB;;;;;kCAKR,KAACvC;wBACCmB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;gCACCqC,OAAM;gCACNV,uBACE,KAAC9B;oCACE,GAAGoC,KAAK;oCACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;oCACtBM,UAAUhB,WAAW;oCACrBU,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;wCACnFO,MAAMa,QAAQ,CAACC;oCACjB;;;;;;;;AASlB;AAEA,SAASE,uBAAuB,EAAEvB,MAAM,EAAEC,OAAO,EAA+B;IAC9E,MAAMuB,OAAOvC;IACb;;;GAGC,GACD,MAAMwC,cAAcD,KAAKE,SAAS;IAElC,MAAMC,SAASzC,SAA4C;QAAEe;QAASI,MAAM;IAAc;IAC1F,MAAMuB,OAAOD,QAAQC;IACrB,MAAMC,aAAaF,QAAQG;IAE3B,MAAMC,iBAAiB7C,SAAmD;QACxEe,SAASA;QACTI,MAAM;IACR;IAEA,MAAM2B,aAAa9C,SAA0C;QAC3De,SAASA;QACTI,MAAM;IACR;IAEA,mEAAmE;IACnE,6DAA6D;IAC7D,MAAMI,SAASe,KAAKE,SAAS;IAC7B,IAAIjB,OAAOqB,IAAI,CAACG,aAAa,KAAKnB,WAAW;QAC3CU,KAAKU,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAIzB,OAAOqB,IAAI,CAACK,aAAa,KAAKrB,WAAW;QAC3CU,KAAKU,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAI,CAACzB,OAAOqB,IAAI,CAACH,MAAM,EAAE;QACvBH,KAAKU,QAAQ,CAAC,eAAe;YAAEN,MAAM;YAAsBE,MAAM,CAAC;QAAE;IACtE;IAEA,IAAI,CAACrB,OAAOqB,IAAI,CAACM,IAAI,EAAE;QACrBZ,KAAKU,QAAQ,CAAC,aAAa;IAC7B;IAEA,MAAM,EAAEG,OAAO,EAAE,GAAG5C;IAEpB,qBACE;;0BACE,KAACvB;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAS;gBAAGkC,IAAI;;kCACrB,KAACrE;kCACC,cAAA,KAACW;4BAAc2D,mBAAmB1C;4BAAiB2C,WAAW;gCAACf;6BAAY;sCACzE,cAAA,KAAC/B;gCAAoBsC,YAAYA;gCAAYS,YAAYhB;;;;kCAG7D,KAACjD;kCACC,cAAA,KAACI;4BAAc2D,mBAAmB5D;sCAChC,cAAA,KAACG;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE;oCAChB,qBACE,KAACjB;wCACCoD,qBAAqBL;wCACrBM,kBAAkB;wCAClBC,OAAM;wCACNC,aAAa;4CAAC;yCAAW;wCACzBC,iBAAgB;wCAChBpC,OAAO;4CACLqC,WAAW;gDACTC,MAAM;gDACNpB,MAAMA,QAAQ;4CAChB;4CACAE,MAAMD,cAAc,CAAC;wCACvB;wCACAoB,YAAYjD,WAAW;wCACvBoB,UAAU,CAAC8B;4CACT3C,MAAMa,QAAQ,CAAC;gDAAEQ,MAAMsB,EAAEH,SAAS,CAACnB,IAAI;gDAAEE,MAAMoB,EAAEpB,IAAI;4CAAC;wCACxD;;gCAGN;;;;kCAKN,KAACtD;kCACC,cAAA,KAACM;4BACCmB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;oCACE,GAAGmC,KAAK;oCACTI,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBP,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIA,MAAM8B,MAAM,CAACzC,KAAK,KAAK,IAAI;4CAC7BH,MAAMa,QAAQ,CAACN;wCACjB,OAAO;4CACLP,MAAMa,QAAQ,CAACC;wCACjB;oCACF;oCACAH,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;;;;kCAOd,KAAC3C;kCACC,cAAA,KAACM;4BACCmB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;oCACCgF,MAAM;oCACL,GAAG7C,KAAK;oCACT8C,SAAS;oCACT1C,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBC,YAAYV,WAAWS,KAAK,EAAEE;oCAC9BT,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACTd,MAAMa,QAAQ,CAACC;oCACjB;8CAECiC,OAAOC,IAAI,CAAC3D,cAAc4D,GAAG,CAAC,CAACC;wCAC9B,IAAI,CAAC7D,YAAY,CAAC6D,IAAsB,EAAE,OAAO;wCACjD,MAAM,EAAE9C,KAAK,EAAE,GAAGf,YAAY,CAAC6D,IAAsB;wCACrD,qBACE,KAAClF;4CAAmBmC,OAAO+C;sDACxB9C;2CADY8C;oCAInB;;;;;;0BAOV,KAAChF;0BAED,KAACP;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAQ;;kCACb,MAAC5B;;0CACC,KAACM;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;wCACCqC,OAAM;wCACNV,uBACE,KAAC9B;4CACE,GAAGoC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACnD;gCAAWiC,SAAQ;0CAAU;;;;kCAEhC,MAAC3B;;0CACC,KAACM;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;wCACCqC,OAAM;wCACNV,uBACE,KAAC9B;4CACE,GAAGoC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACnD;gCAAWoE,IAAI;gCAAGnC,SAAQ;0CAAU;;4BAGpC4B,gCACC,KAACjD;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;wCACE,GAAGmC,KAAK;wCACT8C,SAAS;wCACT1C,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;wCAENT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACT,IAAIA,MAAM8B,MAAM,CAACzC,KAAK,KAAK,IAAI;gDAC7BH,MAAMa,QAAQ,CAACN;4CACjB,OAAO;gDACLP,MAAMa,QAAQ,CAACC;4CACjB;wCACF;;;;;;;;;AASlB;AAaA,OAAO,SAASqC,mBAAmB,EACjCC,yBAAyB,EACzB3D,MAAM,EACN4D,OAAO,EACPX,UAAU,EACVY,cAAc,EACdC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACgB;IACxB,MAAM,CAACC,uBAAuBC,uBAAuB,GAAGlG,SAAkB;IAC1E,MAAMmG,cAAc9E,eAAeW,QAAQ4D;IAC3C,MAAMQ,aAAahF,cAAcY,QAAQ4D;IAEzC,MAAM,EAAES,oBAAoB,EAAE,GAAG9E;IACjC,MAAMiC,OAAOxC,QAA4B;QACvCsF,UAAUnF,YAAYkF;QACtBE,MAAM;QACNC,eAAeb;IACjB;IAEA,MAAM/B,OAAO1C,SAAS;QAAEe,SAASuB,KAAKvB,OAAO;QAAEI,MAAM;IAAO;IAE5D,SAASoE,cAAcC,IAAwB;QAC7C,MAAMC,SAAS;YAAE,GAAGD,IAAI;QAAC;QACzB,IACEC,OAAO7C,IAAI,CAAC8C,OAAO,EAAEvE,SAASS,aAC9B6D,OAAO7C,IAAI,CAAC8C,OAAO,EAAEC,gBAAgB/D,aACrC6D,OAAO7C,IAAI,CAAC8C,OAAO,EAAEE,WAAWhE,WAChC;YACA,OAAO6D,OAAO7C,IAAI,CAAC8C,OAAO;QAC5B;QACA,OAAOD;IACT;IAEA,MAAMI,cAAiD,CAACL;QACtD,gGAAgG;QAChGZ,OAAOW,cAAcC;IACvB;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAASM;QACP,IAAIC,KAAKC,SAAS,CAACvB,+BAA+BsB,KAAKC,SAAS,CAACT,cAAcjD,KAAKE,SAAS,MAAM;YACjGwC,uBAAuB;QACzB,OAAO;YACLH;QACF;IACF;IAEA,qBACE,MAAChF;QAAc,GAAGyC,IAAI;;0BACpB,MAACvD;gBACCkH,IAAI;oBACFP,SAAS;oBACTQ,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAMlF,OAAO,CAAC,GAAG;oBACrCmF,cAAc,CAACD,QAAU,CAAC,UAAU,EAAEA,MAAME,OAAO,CAACC,OAAO,EAAE;gBAC/D;;kCAEA,MAACvH;wBAAWiC,SAAQ;;4BAAMgE;4BAAY;;;kCACtC,KAACtF;wBACCmB,QAAQA;wBACRoE,YAAYA;wBACZnB,YAAYA;wBACZyC,SAASlE,KAAKmE,SAAS,CAACD,OAAO;wBAC/B7B,gBAAgBA;wBAChB+B,UAAUpE,KAAKqE,YAAY,CAACd;wBAC5Bf,UAAUA;wBACV8B,UAAUd;;;;0BAGd,MAAC/G;gBAAIoH,SAAS;gBAAGF,IAAI;oBAAEY,WAAW;gBAAS;;kCACzC,MAAC1H;wBAAK2H,SAAS;wBAAC5F,SAAS;wBAAGkC,IAAI;;0CAC9B,KAACjE;gCAAK4H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACpH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACT4F,QAAQ;4CACR9C,SAAS;4CACT1C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVqF,UAAUpG,WAAW,YAAY,CAAC4D;gDAClC5C,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK4H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACpH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACT8C,SAAS;4CACT1C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK4H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACpH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACT8C,SAAS;4CACT1C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK4H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACpH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACCgF,MAAM;4CACL,GAAG7C,KAAK;4CACT8C,SAAS;4CACT1C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;sDAEC7B,eAAegE,GAAG,CAAC,CAACN,kBACnB,KAAC3E;oDAAsBmC,OAAOwC,EAAEtB,IAAI;8DACjCsB,EAAEvC,KAAK;mDADKuC,EAAEtB,IAAI;;;;;;kCAUjC,KAACnD;oBAEAmD,SAAS,gCACR,KAAChD;wBAAc2D,mBAAmB5D;kCAChC,cAAA,KAACoB;4BAAuBC,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;oBAGhE2B,SAAS,gCACR,KAAChD;wBAAc2D,mBAAmB5D;kCAChC,cAAA,KAAC4C;4BAAuBvB,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;;;0BAInE,KAACvB;gBACCmG,aAAY;gBACZwB,QAAQpC;gBACR6B,UAAU;oBACR5B,uBAAuB;gBACzB;gBACAoC,kBAAkB;oBAChBpC,uBAAuB;oBACvBH;gBACF;;;;AAIR"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  const queryClient = useQueryClient();\n  /** We use `previewSpec` to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = form.getValues() as ListVariableDefinition;\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  const handleRefresh = useCallback(async () => {\n    await queryClient.invalidateQueries({ queryKey: ['variable', previewSpec] });\n  }, [previewSpec, queryClient]);\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  const values = form.getValues() as ListVariableDefinition;\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewSpec} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                    onQueryRefresh={handleRefresh}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\n          />\n        </Stack>\n      </Stack>\n\n      <Divider />\n\n      <Typography py={1} variant=\"subtitle1\">\n        Dropdown Options\n      </Typography>\n      <Stack spacing=\"2\">\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Controller\n              control={control}\n              name=\"spec.customAllValue\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Custom All Value\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={\n                    fieldState.error?.message\n                      ? fieldState.error.message\n                      : 'When All is selected, this value will be used'\n                  }\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    if (event.target.value === '') {\n                      field.onChange(undefined);\n                    } else {\n                      field.onChange(event);\n                    }\n                  }}\n                />\n              )}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\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  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\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} Variable</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useCallback","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","useQueryClient","getSubmitText","getTitleAction","PluginEditor","useValidationSchemas","VARIABLE_TYPES","VariableListPreview","VariablePreview","SORT_METHODS","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","queryClient","previewSpec","getValues","plugin","kind","pluginSpec","spec","_allowAllValue","sortMethod","handleRefresh","invalidateQueries","queryKey","allowAllValue","setValue","allowMultiple","sort","mb","FallbackComponent","resetKeys","definition","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","onQueryRefresh","target","select","fullWidth","Object","keys","map","key","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"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,SAA8CA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACnF,SAASC,GAAG,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAErH,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,EAAEC,WAAW,QAAQ,yBAAyB;AAClH,SAAkBC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,kBAAkB;AACtH,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,aAAa,EAAEC,cAAc,QAAQ,iBAAiB;AAC/D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,mBAAmB;AACxD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,oBAAoB;AACzE,SAASC,YAAY,QAAwB,+BAA+B;AAE5E,SAASC;IACP,qBAAO,KAACC;kBAAI;;AACd;AAOA,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,OAAO,EAA+B;IAC9E,qBACE;;0BACE,KAAC/B;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAS;;kCACd,KAACtB;wBACCmB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B;;kDACE,KAACvC;kDACC,cAAA,KAAC0B;4CAAgBc,QAAQ;gDAACF,MAAMG,KAAK;6CAAC;;;kDAExC,KAACtC;wCACE,GAAGmC,KAAK;wCACTI,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YAAYV,WAAWS,KAAK,EAAEE;wCAC9BT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACTd,MAAMa,QAAQ,CAACC;wCACjB;;;;;kCAKR,KAACvC;wBACCmB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;gCACCqC,OAAM;gCACNV,uBACE,KAAC9B;oCACE,GAAGoC,KAAK;oCACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;oCACtBM,UAAUhB,WAAW;oCACrBU,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;wCACnFO,MAAMa,QAAQ,CAACC;oCACjB;;;;;;;;AASlB;AAEA,SAASE,uBAAuB,EAAEvB,MAAM,EAAEC,OAAO,EAA+B;IAC9E,MAAMuB,OAAOvC;IACb,MAAMwC,cAAcrC;IACpB;;;GAGC,GACD,MAAMsC,cAAcF,KAAKG,SAAS;IAElC,MAAMC,SAAS1C,SAA4C;QAAEe;QAASI,MAAM;IAAc;IAC1F,MAAMwB,OAAOD,QAAQC;IACrB,MAAMC,aAAaF,QAAQG;IAE3B,MAAMC,iBAAiB9C,SAAmD;QACxEe,SAASA;QACTI,MAAM;IACR;IAEA,MAAM4B,aAAa/C,SAA0C;QAC3De,SAASA;QACTI,MAAM;IACR;IAEA,MAAM6B,gBAAgBnE,YAAY;QAChC,MAAM0D,YAAYU,iBAAiB,CAAC;YAAEC,UAAU;gBAAC;gBAAYV;aAAY;QAAC;IAC5E,GAAG;QAACA;QAAaD;KAAY;IAE7B,mEAAmE;IACnE,6DAA6D;IAC7D,MAAMhB,SAASe,KAAKG,SAAS;IAC7B,IAAIlB,OAAOsB,IAAI,CAACM,aAAa,KAAKvB,WAAW;QAC3CU,KAAKc,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAI7B,OAAOsB,IAAI,CAACQ,aAAa,KAAKzB,WAAW;QAC3CU,KAAKc,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAI,CAAC7B,OAAOsB,IAAI,CAACH,MAAM,EAAE;QACvBJ,KAAKc,QAAQ,CAAC,eAAe;YAAET,MAAM;YAAsBE,MAAM,CAAC;QAAE;IACtE;IAEA,IAAI,CAACtB,OAAOsB,IAAI,CAACS,IAAI,EAAE;QACrBhB,KAAKc,QAAQ,CAAC,aAAa;IAC7B;IAEA,qBACE;;0BACE,KAACpE;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAS;gBAAGqC,IAAI;;kCACrB,KAACxE;kCACC,cAAA,KAACW;4BAAc8D,mBAAmB7C;4BAAiB8C,WAAW;gCAACjB;6BAAY;sCACzE,cAAA,KAAChC;gCAAoBuC,YAAYA;gCAAYW,YAAYlB;;;;kCAG7D,KAAClD;kCACC,cAAA,KAACI;4BAAc8D,mBAAmB/D;sCAChC,cAAA,KAACG;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE;oCAChB,qBACE,KAAChB;wCACCsD,kBAAkB;wCAClBC,OAAM;wCACNC,aAAa;4CAAC;yCAAW;wCACzBC,iBAAgB;wCAChBtC,OAAO;4CACLuC,WAAW;gDACTC,MAAM;gDACNrB,MAAMA,QAAQ;4CAChB;4CACAE,MAAMD,cAAc,CAAC;wCACvB;wCACAqB,YAAYnD,WAAW;wCACvBoB,UAAU,CAACgC;4CACT7C,MAAMa,QAAQ,CAAC;gDAAES,MAAMuB,EAAEH,SAAS,CAACpB,IAAI;gDAAEE,MAAMqB,EAAErB,IAAI;4CAAC;wCACxD;wCACAsB,gBAAgBnB;;gCAGtB;;;;kCAKN,KAAC1D;kCACC,cAAA,KAACM;4BACCmB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;oCACE,GAAGmC,KAAK;oCACTI,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBP,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIA,MAAMiC,MAAM,CAAC5C,KAAK,KAAK,IAAI;4CAC7BH,MAAMa,QAAQ,CAACN;wCACjB,OAAO;4CACLP,MAAMa,QAAQ,CAACC;wCACjB;oCACF;oCACAH,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;;;;kCAOd,KAAC3C;kCACC,cAAA,KAACM;4BACCmB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;oCACCmF,MAAM;oCACL,GAAGhD,KAAK;oCACTiD,SAAS;oCACT7C,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBC,YAAYV,WAAWS,KAAK,EAAEE;oCAC9BT,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACTd,MAAMa,QAAQ,CAACC;oCACjB;8CAECoC,OAAOC,IAAI,CAAC9D,cAAc+D,GAAG,CAAC,CAACC;wCAC9B,IAAI,CAAChE,YAAY,CAACgE,IAAsB,EAAE,OAAO;wCACjD,MAAM,EAAEjD,KAAK,EAAE,GAAGf,YAAY,CAACgE,IAAsB;wCACrD,qBACE,KAACrF;4CAAmBmC,OAAOkD;sDACxBjD;2CADYiD;oCAInB;;;;;;0BAOV,KAACnF;0BAED,KAACP;gBAAWgC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC3B;gBAAM4B,SAAQ;;kCACb,MAAC5B;;0CACC,KAACM;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;wCACCqC,OAAM;wCACNV,uBACE,KAAC9B;4CACE,GAAGoC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACnD;gCAAWiC,SAAQ;0CAAU;;;;kCAEhC,MAAC3B;;0CACC,KAACM;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACjC;wCACCqC,OAAM;wCACNV,uBACE,KAAC9B;4CACE,GAAGoC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACnD;gCAAWuE,IAAI;gCAAGtC,SAAQ;0CAAU;;4BAGpC6B,gCACC,KAAClD;gCACCmB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;wCACE,GAAGmC,KAAK;wCACTiD,SAAS;wCACT7C,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;wCAENT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACT,IAAIA,MAAMiC,MAAM,CAAC5C,KAAK,KAAK,IAAI;gDAC7BH,MAAMa,QAAQ,CAACN;4CACjB,OAAO;gDACLP,MAAMa,QAAQ,CAACC;4CACjB;wCACF;;;;;;;;;AASlB;AAaA,OAAO,SAASwC,mBAAmB,EACjCC,yBAAyB,EACzB9D,MAAM,EACN+D,OAAO,EACPZ,UAAU,EACVa,cAAc,EACdC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACgB;IACxB,MAAM,CAACC,uBAAuBC,uBAAuB,GAAGrG,SAAkB;IAC1E,MAAMsG,cAAchF,eAAeU,QAAQ+D;IAC3C,MAAMQ,aAAalF,cAAcW,QAAQ+D;IAEzC,MAAM,EAAES,oBAAoB,EAAE,GAAGhF;IACjC,MAAMgC,OAAOxC,QAA4B;QACvCyF,UAAUtF,YAAYqF;QACtBE,MAAM;QACNC,eAAeb;IACjB;IAEA,MAAMjC,OAAO3C,SAAS;QAAEe,SAASuB,KAAKvB,OAAO;QAAEI,MAAM;IAAO;IAE5D,SAASuE,cAAcC,IAAwB;QAC7C,MAAMC,SAAS;YAAE,GAAGD,IAAI;QAAC;QACzB,IACEC,OAAO/C,IAAI,CAACgD,OAAO,EAAE1E,SAASS,aAC9BgE,OAAO/C,IAAI,CAACgD,OAAO,EAAEC,gBAAgBlE,aACrCgE,OAAO/C,IAAI,CAACgD,OAAO,EAAEE,WAAWnE,WAChC;YACA,OAAOgE,OAAO/C,IAAI,CAACgD,OAAO;QAC5B;QACA,OAAOD;IACT;IAEA,MAAMI,cAAiD,CAACL;QACtD,gGAAgG;QAChGZ,OAAOW,cAAcC;IACvB;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAASM;QACP,IAAIC,KAAKC,SAAS,CAACvB,+BAA+BsB,KAAKC,SAAS,CAACT,cAAcpD,KAAKG,SAAS,MAAM;YACjG0C,uBAAuB;QACzB,OAAO;YACLH;QACF;IACF;IAEA,qBACE,MAACnF;QAAc,GAAGyC,IAAI;;0BACpB,MAACvD;gBACCqH,IAAI;oBACFP,SAAS;oBACTQ,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAMrF,OAAO,CAAC,GAAG;oBACrCsF,cAAc,CAACD,QAAU,CAAC,UAAU,EAAEA,MAAME,OAAO,CAACC,OAAO,EAAE;gBAC/D;;kCAEA,MAAC1H;wBAAWiC,SAAQ;;4BAAMmE;4BAAY;;;kCACtC,KAACzF;wBACCmB,QAAQA;wBACRuE,YAAYA;wBACZpB,YAAYA;wBACZ0C,SAASrE,KAAKsE,SAAS,CAACD,OAAO;wBAC/B7B,gBAAgBA;wBAChB+B,UAAUvE,KAAKwE,YAAY,CAACd;wBAC5Bf,UAAUA;wBACV8B,UAAUd;;;;0BAGd,MAAClH;gBAAIuH,SAAS;gBAAGF,IAAI;oBAAEY,WAAW;gBAAS;;kCACzC,MAAC7H;wBAAK8H,SAAS;wBAAC/F,SAAS;wBAAGqC,IAAI;;0CAC9B,KAACpE;gCAAK+H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACvH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACT+F,QAAQ;4CACR9C,SAAS;4CACT7C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVwF,UAAUvG,WAAW,YAAY,CAAC+D;gDAClC/C,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK+H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACvH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACTiD,SAAS;4CACT7C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK+H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACvH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACE,GAAGmC,KAAK;4CACTiD,SAAS;4CACT7C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAChD;gCAAK+H,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACvH;oCACCmB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACpC;4CACCmF,MAAM;4CACL,GAAGhD,KAAK;4CACTiD,SAAS;4CACT7C,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;sDAEC5B,eAAekE,GAAG,CAAC,CAACP,kBACnB,KAAC7E;oDAAsBmC,OAAO0C,EAAEvB,IAAI;8DACjCuB,EAAEzC,KAAK;mDADKyC,EAAEvB,IAAI;;;;;;kCAUjC,KAACpD;oBAEAoD,SAAS,gCACR,KAACjD;wBAAc8D,mBAAmB/D;kCAChC,cAAA,KAACoB;4BAAuBC,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;oBAGhE4B,SAAS,gCACR,KAACjD;wBAAc8D,mBAAmB/D;kCAChC,cAAA,KAAC4C;4BAAuBvB,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;;;0BAInE,KAACvB;gBACCsG,aAAY;gBACZwB,QAAQpC;gBACR6B,UAAU;oBACR5B,uBAAuB;gBACzB;gBACAoC,kBAAkB;oBAChBpC,uBAAuB;oBACvBH;gBACF;;;;AAIR"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAuDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAmBjF"}
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA0DzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAmBjF"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.js

@@ -95,7 +95,7 @@ export function VariablePreview(props) {
                     },
                     children: [
                         variablePreviewState,
-                        values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
+                        values?.slice(0, maxValues).filter((val)=>val).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
                                 size: "small",
                                 label: val
                             }, index)),

package/dist/components/Variables/VariableEditorForm/VariablePreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.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 React, { ReactElement, useMemo, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): JSX.Element | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values?.slice(0, maxValues).map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result]\n  );\n\n  return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"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,OAAOA,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC/D,SAASC,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACxG,SAASC,WAAW,EAAEC,WAAW,QAAQ,yBAAyB;AAClE,OAAOC,eAAe,mCAAmC;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,2BAA2B,QAAQ,oBAAoB;AAChE,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,6BAA6B;AAQnC,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IACrC,MAAM,CAACI,WAAWC,aAAa,GAAGtB,SAA6Be;IAC/D,MAAM,EAAEQ,YAAY,EAAE,GAAGb;IACzB,MAAMc,UAAU;QACdF,aAAaG;IACf;IACA,IAAIC,WAAW;IAEf,IAAIR,UAAUA,QAAQS,SAAS,KAAKN,WAAW;QAC7CK,WAAWR,OAAOS,MAAM,GAAGN;IAC7B;IAEA,MAAMO,uBAAuB7B,QAAQ;QACnC,IAAIoB,WAAW;YACb,qBACE,KAACZ;gBAAMsB,OAAM;gBAAOC,IAAI;oBAAEC,YAAY;oBAAUC,gBAAgB;gBAAS;0BACvE,cAAA,KAAC3B;;QAGP,OAAO,IAAIe,OAAO;YAChB,qBAAO,KAACnB;gBAAMgC,UAAS;0BAASb;;QAClC,OAAO,IAAI,CAACF,QAAQS,QAAQ;YAC1B,qBAAO,KAAC1B;gBAAMgC,UAAS;0BAAO;;QAChC;QACA,OAAO;IACT,GAAG;QAACb;QAAOD;QAAWD;KAAO;IAE7B,qBACE,MAAChB;;0BACC,MAACK;gBAAM2B,WAAU;gBAAMC,SAAS;gBAAGJ,YAAW;gBAASK,IAAI;;kCACzD,KAAC5B;wBAAW6B,SAAQ;kCAAK;;kCACzB,KAAC5B;wBAAY6B,aAAa1B,aAAa2B,kBAAkB;kCACvD,cAAA,KAACjC;4BACCkC,SAAS;gCACP,IAAItB,QAAQS,QAAQ;oCAClB,MAAMc,UAAUC,SAAS,CAACC,SAAS,CAACzB,OAAO0B,GAAG,CAAC,CAACC,QAAUA,OAAOC,IAAI,CAAC;oCACtEvB,aAAa;gCACf;4BACF;4BACAwB,MAAK;sCAEL,cAAA,KAACpC;;;;;0BAIP,KAACR;gBAAKkC,SAAQ;0BACZ,cAAA,MAACnC;oBAAI4B,IAAI;wBAAEkB,SAAS;wBAAQC,UAAU;wBAAQC,KAAK;wBAAGC,GAAG;oBAAE;;wBACxDvB;wBACAV,QAAQkC,MAAM,GAAG/B,WAAWuB,IAAI,CAACS,KAAKC,sBAAU,KAAClD;gCAAK2C,MAAK;gCAAoBQ,OAAOF;+BAAdC;wBACxE5B,WAAW,mBAAK,KAACtB;4BAAKoC,SAAShB;4BAASa,SAAQ;4BAAWU,MAAK;4BAAQQ,OAAO,CAAC,CAAC,EAAE7B,SAAS,KAAK,CAAC;;;;;;;AAK7G;AAOA,OAAO,SAAS8B,oBAAoBvC,KAA+B;IACjE,MAAM,EAAEwC,UAAU,EAAEC,UAAU,EAAE,GAAGzC;IACnC,MAAM,EAAE0C,IAAI,EAAEC,UAAU,EAAExC,KAAK,EAAE,GAAGP,4BAA4B4C;IAChE,MAAMI,eAAgBzC,OAAiB0C;IAEvC,MAAMC,SAAS,CAACL,cAAcA,eAAe,UAAU,CAACC,OAAOA,OAAO7C,YAAY,CAAC4C,WAAW,CAACM,IAAI,CAACL;IAEpG,MAAMM,kBAAkBlE,QACtB,kBACE,KAACiB;YACCE,QAAQ6C,QAAQnB,IAAI,CAACS,MAAQA,IAAIE,KAAK,IAAIF,IAAIR,KAAK;YACnD1B,WAAWyC;YACXxC,OAAOyC;YAGX;QAACA;QAAcD;QAAYG;KAAO;IAGpC,OAAOE;AACT"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.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 React, { ReactElement, useMemo, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): ReactElement | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values\n            ?.slice(0, maxValues)\n            .filter((val) => val)\n            .map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result]\n  );\n\n  return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","filter","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":"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"}

package/dist/components/Variables/variable-model.js

@@ -41,7 +41,7 @@ export function useListVariablePluginValues(definition) {
     const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);
     const datasourceStore = useDatasourceStore();
     const allVariables = useAllVariableValues();
-    const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();
+    const { absoluteTimeRange: timeRange } = useTimeRange();
     const variablePluginCtx = {
         timeRange,
         datasourceStore,
@@ -64,10 +64,10 @@ export function useListVariablePluginValues(definition) {
     const variablesValueKey = getVariableValuesKey(variables);
     return useQuery({
         queryKey: [
+            'variable',
             definition,
-            variablesValueKey,
             timeRange,
-            refreshKey
+            variablesValueKey
         ],
         queryFn: async ({ signal })=>{
             const resp = await variablePlugin?.getVariableOptions(spec, {

package/dist/components/Variables/variable-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"sourcesContent":["// Copyright 2024 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 { ListVariableDefinition } from '@perses-dev/core';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { VariableOption } from '../../model';\nimport { useDatasourceStore, usePlugin, useTimeRange, useAllVariableValues, VariableStateMap } from '../../runtime';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition): UseQueryResult<VariableOption[]> {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useAllVariableValues();\n  const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] = Object.keys(allVariables); // Default to all variables\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;\n  }\n  // Exclude self variable to avoid circular dependency\n  dependsOnVariables = dependsOnVariables.filter((v) => v !== definition.spec.name);\n\n  const variables = useAllVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery({\n    queryKey: [definition, variablesValueKey, timeRange, refreshKey],\n    queryFn: async ({ signal }) => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange }, signal);\n      if (!resp?.data?.length) {\n        return [];\n      }\n      if (!capturingRegexp) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    enabled: !!variablePlugin || waitToLoad,\n  });\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap): string {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nexport const VARIABLE_TYPES = [\n  { label: 'List', kind: 'ListVariable' },\n  { label: 'Text', kind: 'TextVariable' },\n] as const;\n"],"names":["useQuery","useDatasourceStore","usePlugin","useTimeRange","useAllVariableValues","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","refreshKey","variablePluginCtx","variables","capturingRegexp","RegExp","dependsOnVariables","Object","keys","dependsOn","dependencies","filter","v","name","waitToLoad","some","loading","variablesValueKey","getVariableValuesKey","queryKey","queryFn","signal","resp","getVariableOptions","enabled","values","map","JSON","stringify","join","VARIABLE_TYPES"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"sourcesContent":["// Copyright 2024 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 { ListVariableDefinition } from '@perses-dev/core';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { VariableOption } from '../../model';\nimport { useDatasourceStore, usePlugin, useTimeRange, useAllVariableValues, VariableStateMap } from '../../runtime';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition): UseQueryResult<VariableOption[]> {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useAllVariableValues();\n  const { absoluteTimeRange: timeRange } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] = Object.keys(allVariables); // Default to all variables\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;\n  }\n  // Exclude self variable to avoid circular dependency\n  dependsOnVariables = dependsOnVariables.filter((v) => v !== definition.spec.name);\n\n  const variables = useAllVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery({\n    queryKey: ['variable', definition, timeRange, variablesValueKey],\n    queryFn: async ({ signal }) => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange }, signal);\n      if (!resp?.data?.length) {\n        return [];\n      }\n      if (!capturingRegexp) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    enabled: !!variablePlugin || waitToLoad,\n  });\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap): string {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nexport const VARIABLE_TYPES = [\n  { label: 'List', kind: 'ListVariable' },\n  { label: 'Text', kind: 'TextVariable' },\n] as const;\n"],"names":["useQuery","useDatasourceStore","usePlugin","useTimeRange","useAllVariableValues","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","variablePluginCtx","variables","capturingRegexp","RegExp","dependsOnVariables","Object","keys","dependsOn","dependencies","filter","v","name","waitToLoad","some","loading","variablesValueKey","getVariableValuesKey","queryKey","queryFn","signal","resp","getVariableOptions","enabled","values","map","JSON","stringify","join","VARIABLE_TYPES"],"mappings":"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"}

package/dist/model/time-series-queries.d.ts

@@ -28,7 +28,6 @@ export interface TimeSeriesQueryContext {
     timeRange: AbsoluteTimeRange;
     variableState: VariableStateMap;
     datasourceStore: DatasourceStore;
-    refreshKey: string;
 }
 export type TimeSeriesDataQuery = Query<TimeSeriesData, unknown, TimeSeriesData, QueryKey>;
 export {};

package/dist/model/time-series-queries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-queries.d.ts","sourceRoot":"","sources":["../../src/model/time-series-queries.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,KAAK,iCAAiC,GAAG;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAEnH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,iCAAiC,CAAC;CAC5F;AAED,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"time-series-queries.d.ts","sourceRoot":"","sources":["../../src/model/time-series-queries.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,KAAK,iCAAiC,GAAG;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAEnH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,iCAAiC,CAAC;CAC5F;AAED,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;CAClC;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC"}

package/dist/model/time-series-queries.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/time-series-queries.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\nimport { Query, QueryKey } from '@tanstack/react-query';\nimport { AbsoluteTimeRange, UnknownSpec, TimeSeriesData } from '@perses-dev/core';\nimport { DatasourceStore, VariableStateMap } from '../runtime';\nimport { Plugin } from './plugin-base';\n\n/**\n * An object containing all the dependencies of a TimeSeriesQuery.\n */\ntype TimeSeriesQueryPluginDependencies = {\n  /**\n   * Returns a list of variables name this time series query depends on.\n   */\n  variables?: string[];\n};\n\n/**\n * A plugin for running time series queries.\n */\nexport interface TimeSeriesQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getTimeSeriesData: (spec: Spec, ctx: TimeSeriesQueryContext, abortSignal?: AbortSignal) => Promise<TimeSeriesData>;\n\n  dependsOn?: (spec: Spec, ctx: TimeSeriesQueryContext) => TimeSeriesQueryPluginDependencies;\n}\n\nexport type TimeSeriesQueryMode = 'instant' | 'range';\n\n/**\n * Context available to TimeSeriesQuery plugins at runtime.\n */\nexport interface TimeSeriesQueryContext {\n  suggestedStepMs?: number;\n  mode?: TimeSeriesQueryMode;\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n  refreshKey: string;\n}\n\nexport type TimeSeriesDataQuery = Query<TimeSeriesData, unknown, TimeSeriesData, QueryKey>;\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;AAwCjC,WAA2F"}
+{"version":3,"sources":["../../src/model/time-series-queries.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\nimport { Query, QueryKey } from '@tanstack/react-query';\nimport { AbsoluteTimeRange, UnknownSpec, TimeSeriesData } from '@perses-dev/core';\nimport { DatasourceStore, VariableStateMap } from '../runtime';\nimport { Plugin } from './plugin-base';\n\n/**\n * An object containing all the dependencies of a TimeSeriesQuery.\n */\ntype TimeSeriesQueryPluginDependencies = {\n  /**\n   * Returns a list of variables name this time series query depends on.\n   */\n  variables?: string[];\n};\n\n/**\n * A plugin for running time series queries.\n */\nexport interface TimeSeriesQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getTimeSeriesData: (spec: Spec, ctx: TimeSeriesQueryContext, abortSignal?: AbortSignal) => Promise<TimeSeriesData>;\n\n  dependsOn?: (spec: Spec, ctx: TimeSeriesQueryContext) => TimeSeriesQueryPluginDependencies;\n}\n\nexport type TimeSeriesQueryMode = 'instant' | 'range';\n\n/**\n * Context available to TimeSeriesQuery plugins at runtime.\n */\nexport interface TimeSeriesQueryContext {\n  suggestedStepMs?: number;\n  mode?: TimeSeriesQueryMode;\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n}\n\nexport type TimeSeriesDataQuery = Query<TimeSeriesData, unknown, TimeSeriesData, QueryKey>;\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;AAuCjC,WAA2F"}

package/dist/runtime/DataQueriesProvider/model.d.ts

@@ -21,7 +21,7 @@ export interface UseDataQueryResults<T> extends Omit<DataQueriesContextType, 'qu
 export type QueryData<T = QueryDataType> = {
     data?: T;
     definition: QueryDefinition;
-    error: unknown;
+    error: Error;
     isFetching: boolean;
     isLoading: boolean;
     refetch?: () => void;

package/dist/runtime/DataQueriesProvider/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/runtime/DataQueriesProvider/model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGxD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,MAAM,WAAW,wBAAwB,CAAC,eAAe,GAAG,WAAW;IACrE,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,sBAAsB,EAAE,cAAc,CAAC;IAC1F,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,aAAa,IAAI;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,CAW5G;AAED,wBAAgB,YAAY,IAAI,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAwFzE"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/runtime/DataQueriesProvider/model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGxD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,MAAM,WAAW,wBAAwB,CAAC,eAAe,GAAG,WAAW;IACrE,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,sBAAsB,EAAE,cAAc,CAAC;IAC1F,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,aAAa,IAAI;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,CAW5G;AAED,wBAAgB,YAAY,IAAI,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAwFzE"}

package/dist/runtime/DataQueriesProvider/model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/DataQueriesProvider/model.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\nimport { Definition, QueryDefinition, UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { QueryObserverOptions, UseQueryResult } from '@tanstack/react-query';\nimport { ReactNode, useCallback, useMemo } from 'react';\nimport { useListPluginMetadata } from '../plugin-registry';\n\nexport type QueryOptions = Record<string, unknown>;\nexport interface DataQueriesProviderProps<QueryPluginSpec = UnknownSpec> {\n  definitions: Array<Definition<QueryPluginSpec>>;\n  children?: ReactNode;\n  options?: QueryOptions;\n  queryOptions?: Omit<QueryObserverOptions, 'queryKey'>;\n}\n\nexport interface DataQueriesContextType {\n  queryResults: QueryData[];\n  refetchAll: () => void;\n  isFetching: boolean;\n  isLoading: boolean;\n  errors: unknown[];\n}\n\nexport interface UseDataQueryResults<T> extends Omit<DataQueriesContextType, 'queryResults'> {\n  queryResults: Array<QueryData<T>>;\n}\n\nexport type QueryData<T = QueryDataType> = {\n  data?: T;\n  definition: QueryDefinition;\n  error: unknown;\n  isFetching: boolean;\n  isLoading: boolean;\n  refetch?: () => void;\n};\n\nexport function transformQueryResults(results: UseQueryResult[], definitions: QueryDefinition[]): QueryData[] {\n  return results.map(({ data, isFetching, isLoading, refetch, error }, i) => {\n    return {\n      definition: definitions[i],\n      data,\n      isFetching,\n      isLoading,\n      refetch,\n      error,\n    } as QueryData;\n  });\n}\n\nexport function useQueryType(): (pluginKind: string) => string | undefined {\n  const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = useListPluginMetadata([\n    'TimeSeriesQuery',\n  ]);\n  const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = useListPluginMetadata(['TraceQuery']);\n  const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = useListPluginMetadata(['ProfileQuery']);\n  const { data: logQueries, isLoading: isLogQueryPluginLoading } = useListPluginMetadata(['LogQuery']);\n\n  // For example, `map: {\"TimeSeriesQuery\":[\"PrometheusTimeSeriesQuery\"],\"TraceQuery\":[\"TempoTraceQuery\"]}`\n  const queryTypeMap = useMemo(() => {\n    const map: Record<string, string[]> = {\n      TimeSeriesQuery: [],\n      TraceQuery: [],\n      ProfileQuery: [],\n      LogQuery: [],\n    };\n\n    if (timeSeriesQueryPlugins) {\n      timeSeriesQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (traceQueryPlugins) {\n      traceQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (profileQueryPlugins) {\n      profileQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (logQueries) {\n      logQueries.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    return map;\n  }, [timeSeriesQueryPlugins, traceQueryPlugins, profileQueryPlugins, logQueries]);\n\n  const getQueryType = useCallback(\n    (pluginKind: string) => {\n      const isLoading = (pluginKind: string): boolean => {\n        switch (pluginKind) {\n          case 'PrometheusTimeSeriesQuery':\n            return isTimeSeriesQueryLoading;\n          case 'TempoTraceQuery':\n            return isTraceQueryPluginLoading;\n          case 'PyroscopeProfileQuery':\n            return isProfileQueryPluginLoading;\n          case 'LokiLogQuery':\n            return isLogQueryPluginLoading;\n        }\n\n        return (\n          isTraceQueryPluginLoading ||\n          isTimeSeriesQueryLoading ||\n          isProfileQueryPluginLoading ||\n          isLogQueryPluginLoading\n        );\n      };\n\n      if (isLoading(pluginKind)) {\n        return undefined;\n      }\n\n      for (const queryType in queryTypeMap) {\n        if (queryTypeMap[queryType]?.includes(pluginKind)) {\n          return queryType;\n        }\n      }\n\n      throw new Error(`Unable to determine the query type: ${pluginKind}`);\n    },\n    [\n      queryTypeMap,\n      isTimeSeriesQueryLoading,\n      isTraceQueryPluginLoading,\n      isProfileQueryPluginLoading,\n      isLogQueryPluginLoading,\n    ]\n  );\n\n  return getQueryType;\n}\n"],"names":["useCallback","useMemo","useListPluginMetadata","transformQueryResults","results","definitions","map","data","isFetching","isLoading","refetch","error","i","definition","useQueryType","timeSeriesQueryPlugins","isTimeSeriesQueryLoading","traceQueryPlugins","isTraceQueryPluginLoading","profileQueryPlugins","isProfileQueryPluginLoading","logQueries","isLogQueryPluginLoading","queryTypeMap","TimeSeriesQuery","TraceQuery","ProfileQuery","LogQuery","forEach","plugin","kind","push","spec","name","getQueryType","pluginKind","undefined","queryType","includes","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;AAIjC,SAAoBA,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,qBAAqB;AA+B3D,OAAO,SAASC,sBAAsBC,OAAyB,EAAEC,WAA8B;IAC7F,OAAOD,QAAQE,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAE,EAAEC;QACnE,OAAO;YACLC,YAAYR,WAAW,CAACO,EAAE;YAC1BL;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,OAAO,SAASG;IACd,MAAM,EAAEP,MAAMQ,sBAAsB,EAAEN,WAAWO,wBAAwB,EAAE,GAAGd,sBAAsB;QAClG;KACD;IACD,MAAM,EAAEK,MAAMU,iBAAiB,EAAER,WAAWS,yBAAyB,EAAE,GAAGhB,sBAAsB;QAAC;KAAa;IAC9G,MAAM,EAAEK,MAAMY,mBAAmB,EAAEV,WAAWW,2BAA2B,EAAE,GAAGlB,sBAAsB;QAAC;KAAe;IACpH,MAAM,EAAEK,MAAMc,UAAU,EAAEZ,WAAWa,uBAAuB,EAAE,GAAGpB,sBAAsB;QAAC;KAAW;IAEnG,yGAAyG;IACzG,MAAMqB,eAAetB,QAAQ;QAC3B,MAAMK,MAAgC;YACpCkB,iBAAiB,EAAE;YACnBC,YAAY,EAAE;YACdC,cAAc,EAAE;YAChBC,UAAU,EAAE;QACd;QAEA,IAAIZ,wBAAwB;YAC1BA,uBAAuBa,OAAO,CAAC,CAACC;gBAC9BvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAIhB,mBAAmB;YACrBA,kBAAkBW,OAAO,CAAC,CAACC;gBACzBvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAId,qBAAqB;YACvBA,oBAAoBS,OAAO,CAAC,CAACC;gBAC3BvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAIZ,YAAY;YACdA,WAAWO,OAAO,CAAC,CAACC;gBAClBvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,OAAO3B;IACT,GAAG;QAACS;QAAwBE;QAAmBE;QAAqBE;KAAW;IAE/E,MAAMa,eAAelC,YACnB,CAACmC;QACC,MAAM1B,YAAY,CAAC0B;YACjB,OAAQA;gBACN,KAAK;oBACH,OAAOnB;gBACT,KAAK;oBACH,OAAOE;gBACT,KAAK;oBACH,OAAOE;gBACT,KAAK;oBACH,OAAOE;YACX;YAEA,OACEJ,6BACAF,4BACAI,+BACAE;QAEJ;QAEA,IAAIb,UAAU0B,aAAa;YACzB,OAAOC;QACT;QAEA,IAAK,MAAMC,aAAad,aAAc;YACpC,IAAIA,YAAY,CAACc,UAAU,EAAEC,SAASH,aAAa;gBACjD,OAAOE;YACT;QACF;QAEA,MAAM,IAAIE,MAAM,CAAC,oCAAoC,EAAEJ,YAAY;IACrE,GACA;QACEZ;QACAP;QACAE;QACAE;QACAE;KACD;IAGH,OAAOY;AACT"}
+{"version":3,"sources":["../../../src/runtime/DataQueriesProvider/model.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\nimport { Definition, QueryDefinition, UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { QueryObserverOptions, UseQueryResult } from '@tanstack/react-query';\nimport { ReactNode, useCallback, useMemo } from 'react';\nimport { useListPluginMetadata } from '../plugin-registry';\n\nexport type QueryOptions = Record<string, unknown>;\nexport interface DataQueriesProviderProps<QueryPluginSpec = UnknownSpec> {\n  definitions: Array<Definition<QueryPluginSpec>>;\n  children?: ReactNode;\n  options?: QueryOptions;\n  queryOptions?: Omit<QueryObserverOptions, 'queryKey'>;\n}\n\nexport interface DataQueriesContextType {\n  queryResults: QueryData[];\n  refetchAll: () => void;\n  isFetching: boolean;\n  isLoading: boolean;\n  errors: unknown[];\n}\n\nexport interface UseDataQueryResults<T> extends Omit<DataQueriesContextType, 'queryResults'> {\n  queryResults: Array<QueryData<T>>;\n}\n\nexport type QueryData<T = QueryDataType> = {\n  data?: T;\n  definition: QueryDefinition;\n  error: Error;\n  isFetching: boolean;\n  isLoading: boolean;\n  refetch?: () => void;\n};\n\nexport function transformQueryResults(results: UseQueryResult[], definitions: QueryDefinition[]): QueryData[] {\n  return results.map(({ data, isFetching, isLoading, refetch, error }, i) => {\n    return {\n      definition: definitions[i],\n      data,\n      isFetching,\n      isLoading,\n      refetch,\n      error,\n    } as QueryData;\n  });\n}\n\nexport function useQueryType(): (pluginKind: string) => string | undefined {\n  const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = useListPluginMetadata([\n    'TimeSeriesQuery',\n  ]);\n  const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = useListPluginMetadata(['TraceQuery']);\n  const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = useListPluginMetadata(['ProfileQuery']);\n  const { data: logQueries, isLoading: isLogQueryPluginLoading } = useListPluginMetadata(['LogQuery']);\n\n  // For example, `map: {\"TimeSeriesQuery\":[\"PrometheusTimeSeriesQuery\"],\"TraceQuery\":[\"TempoTraceQuery\"]}`\n  const queryTypeMap = useMemo(() => {\n    const map: Record<string, string[]> = {\n      TimeSeriesQuery: [],\n      TraceQuery: [],\n      ProfileQuery: [],\n      LogQuery: [],\n    };\n\n    if (timeSeriesQueryPlugins) {\n      timeSeriesQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (traceQueryPlugins) {\n      traceQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (profileQueryPlugins) {\n      profileQueryPlugins.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    if (logQueries) {\n      logQueries.forEach((plugin) => {\n        map[plugin.kind]?.push(plugin.spec.name);\n      });\n    }\n\n    return map;\n  }, [timeSeriesQueryPlugins, traceQueryPlugins, profileQueryPlugins, logQueries]);\n\n  const getQueryType = useCallback(\n    (pluginKind: string) => {\n      const isLoading = (pluginKind: string): boolean => {\n        switch (pluginKind) {\n          case 'PrometheusTimeSeriesQuery':\n            return isTimeSeriesQueryLoading;\n          case 'TempoTraceQuery':\n            return isTraceQueryPluginLoading;\n          case 'PyroscopeProfileQuery':\n            return isProfileQueryPluginLoading;\n          case 'LokiLogQuery':\n            return isLogQueryPluginLoading;\n        }\n\n        return (\n          isTraceQueryPluginLoading ||\n          isTimeSeriesQueryLoading ||\n          isProfileQueryPluginLoading ||\n          isLogQueryPluginLoading\n        );\n      };\n\n      if (isLoading(pluginKind)) {\n        return undefined;\n      }\n\n      for (const queryType in queryTypeMap) {\n        if (queryTypeMap[queryType]?.includes(pluginKind)) {\n          return queryType;\n        }\n      }\n\n      throw new Error(`Unable to determine the query type: ${pluginKind}`);\n    },\n    [\n      queryTypeMap,\n      isTimeSeriesQueryLoading,\n      isTraceQueryPluginLoading,\n      isProfileQueryPluginLoading,\n      isLogQueryPluginLoading,\n    ]\n  );\n\n  return getQueryType;\n}\n"],"names":["useCallback","useMemo","useListPluginMetadata","transformQueryResults","results","definitions","map","data","isFetching","isLoading","refetch","error","i","definition","useQueryType","timeSeriesQueryPlugins","isTimeSeriesQueryLoading","traceQueryPlugins","isTraceQueryPluginLoading","profileQueryPlugins","isProfileQueryPluginLoading","logQueries","isLogQueryPluginLoading","queryTypeMap","TimeSeriesQuery","TraceQuery","ProfileQuery","LogQuery","forEach","plugin","kind","push","spec","name","getQueryType","pluginKind","undefined","queryType","includes","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;AAIjC,SAAoBA,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,qBAAqB;AA+B3D,OAAO,SAASC,sBAAsBC,OAAyB,EAAEC,WAA8B;IAC7F,OAAOD,QAAQE,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAE,EAAEC;QACnE,OAAO;YACLC,YAAYR,WAAW,CAACO,EAAE;YAC1BL;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,OAAO,SAASG;IACd,MAAM,EAAEP,MAAMQ,sBAAsB,EAAEN,WAAWO,wBAAwB,EAAE,GAAGd,sBAAsB;QAClG;KACD;IACD,MAAM,EAAEK,MAAMU,iBAAiB,EAAER,WAAWS,yBAAyB,EAAE,GAAGhB,sBAAsB;QAAC;KAAa;IAC9G,MAAM,EAAEK,MAAMY,mBAAmB,EAAEV,WAAWW,2BAA2B,EAAE,GAAGlB,sBAAsB;QAAC;KAAe;IACpH,MAAM,EAAEK,MAAMc,UAAU,EAAEZ,WAAWa,uBAAuB,EAAE,GAAGpB,sBAAsB;QAAC;KAAW;IAEnG,yGAAyG;IACzG,MAAMqB,eAAetB,QAAQ;QAC3B,MAAMK,MAAgC;YACpCkB,iBAAiB,EAAE;YACnBC,YAAY,EAAE;YACdC,cAAc,EAAE;YAChBC,UAAU,EAAE;QACd;QAEA,IAAIZ,wBAAwB;YAC1BA,uBAAuBa,OAAO,CAAC,CAACC;gBAC9BvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAIhB,mBAAmB;YACrBA,kBAAkBW,OAAO,CAAC,CAACC;gBACzBvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAId,qBAAqB;YACvBA,oBAAoBS,OAAO,CAAC,CAACC;gBAC3BvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,IAAIZ,YAAY;YACdA,WAAWO,OAAO,CAAC,CAACC;gBAClBvB,GAAG,CAACuB,OAAOC,IAAI,CAAC,EAAEC,KAAKF,OAAOG,IAAI,CAACC,IAAI;YACzC;QACF;QAEA,OAAO3B;IACT,GAAG;QAACS;QAAwBE;QAAmBE;QAAqBE;KAAW;IAE/E,MAAMa,eAAelC,YACnB,CAACmC;QACC,MAAM1B,YAAY,CAAC0B;YACjB,OAAQA;gBACN,KAAK;oBACH,OAAOnB;gBACT,KAAK;oBACH,OAAOE;gBACT,KAAK;oBACH,OAAOE;gBACT,KAAK;oBACH,OAAOE;YACX;YAEA,OACEJ,6BACAF,4BACAI,+BACAE;QAEJ;QAEA,IAAIb,UAAU0B,aAAa;YACzB,OAAOC;QACT;QAEA,IAAK,MAAMC,aAAad,aAAc;YACpC,IAAIA,YAAY,CAACc,UAAU,EAAEC,SAASH,aAAa;gBACjD,OAAOE;YACT;QACF;QAEA,MAAM,IAAIE,MAAM,CAAC,oCAAoC,EAAEJ,YAAY;IACrE,GACA;QACEZ;QACAP;QACAE;QACAE;QACAE;KACD;IAGH,OAAOY;AACT"}

package/dist/runtime/TimeRangeProvider/TimeRangeProvider.d.ts

@@ -3,8 +3,8 @@ import { AbsoluteTimeRange, DurationString, TimeRangeValue } from '@perses-dev/c
 export interface TimeRangeProviderProps {
     timeRange: TimeRangeValue;
     refreshInterval?: DurationString;
-    setTimeRange?: (value: TimeRangeValue) => void;
-    setRefreshInterval?: (value: DurationString) => void;
+    setTimeRange: (value: TimeRangeValue) => void;
+    setRefreshInterval: (value: DurationString) => void;
     children?: React.ReactNode;
 }
 export interface TimeRange {
@@ -12,7 +12,6 @@ export interface TimeRange {
     absoluteTimeRange: AbsoluteTimeRange;
     setTimeRange: (value: TimeRangeValue) => void;
     refresh: () => void;
-    refreshKey: string;
     refreshInterval?: DurationString;
     refreshIntervalInMs: number;
     setRefreshInterval: (value: DurationString) => void;

package/dist/runtime/TimeRangeProvider/TimeRangeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeProvider.d.ts","sourceRoot":"","sources":["../../../src/runtime/TimeRangeProvider/TimeRangeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAyD,MAAM,OAAO,CAAC;AAClH,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAG1B,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sCAAkD,CAAC;AAEhF,wBAAgB,mBAAmB,IAAI,SAAS,CAM/C;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAExC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAIzD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA+D7E"}
+{"version":3,"file":"TimeRangeProvider.d.ts","sourceRoot":"","sources":["../../../src/runtime/TimeRangeProvider/TimeRangeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAyD,MAAM,OAAO,CAAC;AAClH,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sCAAkD,CAAC;AAEhF,wBAAgB,mBAAmB,IAAI,SAAS,CAM/C;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAExC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAIzD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAoE7E"}