@perses-dev/plugin-system 0.52.0-beta.4 → 0.52.0-rc.0

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

@@ -11,15 +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 React, { useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, ClickAwayListener, Divider } from '@mui/material';
+import { 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 { getSubmitText, getTitleAction } from '../../../utils';
-import { VARIABLE_TYPES } from '../variable-model';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
+import { VARIABLE_TYPES } from '../variable-model';
+import { useTimeRange } from '../../../runtime';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
 function FallbackPreview() {
     return /*#__PURE__*/ _jsx("div", {
@@ -96,7 +97,9 @@ function ListVariableEditorForm({ action, control }) {
    * 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.
    */ const [previewSpec, setPreviewSpec] = useState(form.getValues());
+    const { refresh } = useTimeRange();
     const refreshPreview = ()=>{
+        refresh();
         setPreviewSpec(form.getValues());
     };
     const plugin = useWatch({
@@ -143,46 +146,40 @@ function ListVariableEditorForm({ action, control }) {
                     }) : /*#__PURE__*/ _jsx(VariablePreview, {
                         isLoading: true
                     }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        children: [
-                            /*#__PURE__*/ _jsx(ClickAwayListener, {
-                                onClickAway: ()=>refreshPreview(),
-                                children: /*#__PURE__*/ _jsx(Box, {})
-                            }),
-                            /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                FallbackComponent: ErrorAlert,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: control,
-                                    name: "spec.plugin",
-                                    render: ({ field })=>{
-                                        return /*#__PURE__*/ _jsx(PluginEditor, {
-                                            withRunQueryButton: true,
-                                            width: "100%",
-                                            pluginTypes: [
-                                                'Variable'
-                                            ],
-                                            pluginKindLabel: "Source",
-                                            value: {
-                                                selection: {
-                                                    type: 'Variable',
-                                                    kind: kind ?? 'StaticListVariable'
-                                                },
-                                                spec: pluginSpec ?? {
-                                                    values: []
-                                                }
+                    /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                control: control,
+                                name: "spec.plugin",
+                                render: ({ field })=>{
+                                    return /*#__PURE__*/ _jsx(PluginEditor, {
+                                        withRunQueryButton: true,
+                                        width: "100%",
+                                        pluginTypes: [
+                                            'Variable'
+                                        ],
+                                        pluginKindLabel: "Source",
+                                        value: {
+                                            selection: {
+                                                type: 'Variable',
+                                                kind: kind ?? 'StaticListVariable'
                                             },
-                                            isReadonly: action === 'read',
-                                            onChange: (v)=>{
-                                                field.onChange({
-                                                    kind: v.selection.kind,
-                                                    spec: v.spec
-                                                });
+                                            spec: pluginSpec ?? {
+                                                values: []
                                             }
-                                        });
-                                    }
-                                })
+                                        },
+                                        isReadonly: action === 'read',
+                                        onChange: (v)=>{
+                                            field.onChange({
+                                                kind: v.selection.kind,
+                                                spec: v.spec
+                                            });
+                                        }
+                                    });
+                                }
                             })
-                        ]
+                        })
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
                         children: /*#__PURE__*/ _jsx(Controller, {

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 React, { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} 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 { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\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, setPreviewSpec] = useState<ListVariableDefinition>(form.getValues() as ListVariableDefinition);\n  const refreshPreview = (): void => {\n    setPreviewSpec(form.getValues() as ListVariableDefinition);\n  };\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  // 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  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        {kind ? (\n          <Box>\n            <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n              <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n            </ErrorBoundary>\n          </Box>\n        ) : (\n          <VariablePreview isLoading={true} />\n        )}\n\n        <Stack>\n          {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n          <ClickAwayListener onClickAway={() => refreshPreview()}>\n            <Box />\n          </ClickAwayListener>\n          {/** **/}\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 ?? { values: [] },\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                <MenuItem value=\"none\">None</MenuItem>\n                <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n                <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n                <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n                <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\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":["React","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","ClickAwayListener","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","useValidationSchemas","VariableListPreview","VariablePreview","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","setPreviewSpec","getValues","refreshPreview","plugin","kind","pluginSpec","spec","_allowAllValue","allowAllValue","setValue","allowMultiple","mb","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","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","map","isOpen","onDiscardChanges"],"mappings":"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"}
+{"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';\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, setPreviewSpec] = useState<ListVariableDefinition>(form.getValues() as ListVariableDefinition);\n  const { refresh } = useTimeRange();\n  const refreshPreview = (): void => {\n    refresh();\n    setPreviewSpec(form.getValues() as ListVariableDefinition);\n  };\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  // 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  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        {kind ? (\n          <Box>\n            <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n              <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n            </ErrorBoundary>\n          </Box>\n        ) : (\n          <VariablePreview isLoading={true} />\n        )}\n\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 ?? { values: [] },\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                <MenuItem value=\"none\">None</MenuItem>\n                <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n                <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n                <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n                <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\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","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","setPreviewSpec","getValues","refresh","refreshPreview","plugin","kind","pluginSpec","spec","_allowAllValue","allowAllValue","setValue","allowMultiple","mb","FallbackComponent","resetKeys","definition","onRefresh","isLoading","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","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","map","isOpen","onDiscardChanges"],"mappings":"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"}

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,EAAY,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAajF"}
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAkBjF"}

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

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';
 import { InfoTooltip, useSnackbar } from '@perses-dev/components';
 import Refresh from 'mdi-material-ui/Refresh';
@@ -108,15 +108,21 @@ export function VariablePreview(props) {
     });
 }
 export function VariableListPreview(props) {
-    const { definition, onRefresh } = props;
+    const { onRefresh, definition } = props;
     const { data, isFetching, error } = useListVariablePluginValues(definition);
     const errorMessage = error?.message;
-    return /*#__PURE__*/ _jsx(VariablePreview, {
-        values: data?.map((val)=>val.value) || [],
-        onRefresh: onRefresh,
-        isLoading: isFetching,
-        error: errorMessage
-    });
+    const variablePreview = useMemo(()=>/*#__PURE__*/ _jsx(VariablePreview, {
+            values: data?.map((val)=>val.value) || [],
+            onRefresh: onRefresh,
+            isLoading: isFetching,
+            error: errorMessage
+        }), [
+        errorMessage,
+        isFetching,
+        onRefresh,
+        data
+    ]);
+    return variablePreview;
 }
 
 //# sourceMappingURL=VariablePreview.js.map

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, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  onRefresh?: () => void;\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, onRefresh, 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  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        {onRefresh && (\n          <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n            <IconButton onClick={onRefresh} size=\"small\">\n              <Refresh />\n            </IconButton>\n          </InfoTooltip>\n        )}\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          {error && <Alert severity=\"error\">{error}</Alert>}\n          {values?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n          {isLoading && (\n            <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n              <CircularProgress />\n            </Stack>\n          )}\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  onRefresh: () => void;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, onRefresh } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <VariablePreview\n      values={data?.map((val) => val.value) || []}\n      onRefresh={onRefresh}\n      isLoading={isFetching}\n      error={errorMessage}\n    />\n  );\n}\n"],"names":["React","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","onRefresh","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","direction","spacing","alignItems","mb","variant","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","value","join","sx","display","flexWrap","gap","m","severity","width","justifyContent","slice","val","index","label","VariableListPreview","definition","data","isFetching","errorMessage","message"],"mappings":"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"}
+{"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 Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  onRefresh?: () => void;\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, onRefresh, 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  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        {onRefresh && (\n          <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n            <IconButton onClick={onRefresh} size=\"small\">\n              <Refresh />\n            </IconButton>\n          </InfoTooltip>\n        )}\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          {error && <Alert severity=\"error\">{error}</Alert>}\n          {values?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n          {isLoading && (\n            <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n              <CircularProgress />\n            </Stack>\n          )}\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  onRefresh: () => void;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { onRefresh, definition } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={data?.map((val) => val.value) || []}\n        onRefresh={onRefresh}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, onRefresh, data]\n  );\n\n  return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","onRefresh","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","direction","spacing","alignItems","mb","variant","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","value","join","sx","display","flexWrap","gap","m","severity","width","justifyContent","slice","val","index","label","VariableListPreview","definition","data","isFetching","errorMessage","message","variablePreview"],"mappings":"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"}

package/dist/model/plugin-base.d.ts

@@ -1,4 +1,4 @@
-import { QueryDefinition } from '@perses-dev/core';
+import { QueryDefinition, UnknownSpec } from '@perses-dev/core';
 import React from 'react';
 /**
  * Base type of all plugin implementations.
@@ -23,6 +23,7 @@ export interface OptionsEditorProps<Spec> {
     queryHandlerSettings?: {
         runWithOnBlur: boolean;
         watchQueryChanges: (query: string) => void;
+        setWatchOtherSpecs: (otherSpecs: UnknownSpec) => void;
     };
 }
 /**

package/dist/model/plugin-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-base.d.ts","sourceRoot":"","sources":["../../src/model/plugin-base.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,MAAM,CAAC,IAAI;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;IAEvE;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,IAAI;IAGtC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE;QACrB,aAAa,EAAE,OAAO,CAAC;QACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAC5C,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,CAAE,SAAQ,kBAAkB,CAAC,IAAI,CAAC;IACtE,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B"}
+{"version":3,"file":"plugin-base.d.ts","sourceRoot":"","sources":["../../src/model/plugin-base.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,MAAM,CAAC,IAAI;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;IAEvE;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,IAAI;IAGtC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE;QACrB,aAAa,EAAE,OAAO,CAAC;QACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC3C,kBAAkB,EAAE,CAAC,UAAU,EAAE,WAAW,KAAK,IAAI,CAAC;KACvD,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,CAAE,SAAQ,kBAAkB,CAAC,IAAI,CAAC;IACtE,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B"}

package/dist/model/plugin-base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/plugin-base.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 { QueryDefinition } from '@perses-dev/core';\nimport React from 'react';\n\n/**\n * Base type of all plugin implementations.\n */\nexport interface Plugin<Spec> {\n  /**\n   * React component for editing the plugin's options in the UI.\n   */\n  OptionsEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;\n\n  /**\n   * Callback for creating the initial options for the plugin.\n   */\n  createInitialOptions: () => Spec;\n}\n\n/**\n * Common props passed to options editor components.\n */\nexport interface OptionsEditorProps<Spec> {\n  // TODO: These are temporary and may not actually make sense, so replace\n  // with whatever makes sense as visual editing evolves\n  value: Spec;\n  onChange: (next: Spec) => void;\n  isReadonly?: boolean;\n  queryHandlerSettings?: {\n    runWithOnBlur: boolean;\n    watchQueryChanges: (query: string) => void;\n  };\n}\n\n/**\n * Common props passed to query editor component\n */\nexport interface QueryEditorProps<Spec> extends OptionsEditorProps<Spec> {\n  queries: QueryDefinition[];\n}\n"],"names":["React"],"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;AAGjC,OAAOA,WAAW,QAAQ"}
+{"version":3,"sources":["../../src/model/plugin-base.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 { QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport React from 'react';\n\n/**\n * Base type of all plugin implementations.\n */\nexport interface Plugin<Spec> {\n  /**\n   * React component for editing the plugin's options in the UI.\n   */\n  OptionsEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;\n\n  /**\n   * Callback for creating the initial options for the plugin.\n   */\n  createInitialOptions: () => Spec;\n}\n\n/**\n * Common props passed to options editor components.\n */\nexport interface OptionsEditorProps<Spec> {\n  // TODO: These are temporary and may not actually make sense, so replace\n  // with whatever makes sense as visual editing evolves\n  value: Spec;\n  onChange: (next: Spec) => void;\n  isReadonly?: boolean;\n  queryHandlerSettings?: {\n    runWithOnBlur: boolean;\n    watchQueryChanges: (query: string) => void;\n    setWatchOtherSpecs: (otherSpecs: UnknownSpec) => void;\n  };\n}\n\n/**\n * Common props passed to query editor component\n */\nexport interface QueryEditorProps<Spec> extends OptionsEditorProps<Spec> {\n  queries: QueryDefinition[];\n}\n"],"names":["React"],"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;AAGjC,OAAOA,WAAW,QAAQ"}

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,CAwD7E"}
+{"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"}

package/dist/runtime/TimeRangeProvider/TimeRangeProvider.js

@@ -38,7 +38,12 @@ export function useTimeRangeContext() {
  * Provider implementation that supplies the time range state at runtime.
  */ export function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
-    const [localTimeRange, setLocalTimeRange] = useState(timeRange);
+    /**
+   * TODO: The hook needs refactor. There is a bug here with refreshKey. If the refreshInterval is not set,
+   * refreshKey string includes an undefined xx:yy:zz:undefined:0
+   * I think exposing refresh functionality also is very risky. A careless usage of refresh may cause
+   * infinite rendering loop.
+   */ const [localTimeRange, setLocalTimeRange] = useState(timeRange);
     const [localRefreshInterval, setLocalRefreshInterval] = useState(refreshInterval);
     const [refreshCounter, setRefreshCounter] = useState(0);
     useEffect(()=>{

package/dist/runtime/TimeRangeProvider/TimeRangeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/TimeRangeProvider/TimeRangeProvider.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, { createContext, ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport {\n  AbsoluteTimeRange,\n  DurationString,\n  TimeRangeValue,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  getSuggestedStepMs,\n} from '@perses-dev/core';\nimport { getRefreshIntervalInMs } from './refresh-interval';\n\nexport interface TimeRangeProviderProps {\n  timeRange: TimeRangeValue;\n  refreshInterval?: DurationString;\n  setTimeRange?: (value: TimeRangeValue) => void;\n  setRefreshInterval?: (value: DurationString) => void;\n  children?: React.ReactNode;\n}\n\nexport interface TimeRange {\n  timeRange: TimeRangeValue;\n  absoluteTimeRange: AbsoluteTimeRange; // resolved absolute time for plugins to use\n  setTimeRange: (value: TimeRangeValue) => void;\n  refresh: () => void;\n  refreshKey: string;\n  refreshInterval?: DurationString;\n  refreshIntervalInMs: number;\n  setRefreshInterval: (value: DurationString) => void;\n}\n\nexport const TimeRangeContext = createContext<TimeRange | undefined>(undefined);\n\nexport function useTimeRangeContext(): TimeRange {\n  const ctx = useContext(TimeRangeContext);\n  if (ctx === undefined) {\n    throw new Error('No TimeRangeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\n/**\n * Get and set the current resolved time range at runtime.\n */\nexport function useTimeRange(): TimeRange {\n  return useTimeRangeContext();\n}\n\n/**\n * Gets the suggested step for a graph query in ms for the currently selected time range.\n */\nexport function useSuggestedStepMs(width?: number): number {\n  const { absoluteTimeRange } = useTimeRange();\n  if (width === undefined) return 0;\n  return getSuggestedStepMs(absoluteTimeRange, width);\n}\n\n/**\n * Provider implementation that supplies the time range state at runtime.\n */\nexport function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {\n  const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;\n\n  const [localTimeRange, setLocalTimeRange] = useState<TimeRangeValue>(timeRange);\n  const [localRefreshInterval, setLocalRefreshInterval] = useState<DurationString | undefined>(refreshInterval);\n\n  const [refreshCounter, setRefreshCounter] = useState(0);\n\n  useEffect(() => {\n    setLocalTimeRange(timeRange);\n  }, [timeRange, refreshCounter]);\n\n  useEffect(() => {\n    setLocalRefreshInterval(refreshInterval);\n  }, [refreshInterval]);\n\n  const refresh = useCallback(() => {\n    setRefreshCounter((counter) => counter + 1);\n  }, [setRefreshCounter]);\n\n  const refreshIntervalInMs = getRefreshIntervalInMs(localRefreshInterval);\n  useEffect(() => {\n    if (refreshIntervalInMs > 0) {\n      const interval = setInterval(() => {\n        refresh();\n      }, refreshIntervalInMs);\n\n      return (): void => clearInterval(interval);\n    }\n  }, [refresh, refreshIntervalInMs]);\n\n  const ctx = useMemo(() => {\n    const absoluteTimeRange = isRelativeTimeRange(localTimeRange)\n      ? toAbsoluteTimeRange(localTimeRange)\n      : localTimeRange;\n    return {\n      timeRange: localTimeRange,\n      setTimeRange: setTimeRange ?? setLocalTimeRange,\n      absoluteTimeRange,\n      refresh,\n      refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,\n      refreshInterval: localRefreshInterval,\n      refreshIntervalInMs: refreshIntervalInMs,\n      setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval,\n    };\n  }, [\n    localTimeRange,\n    setTimeRange,\n    refresh,\n    localRefreshInterval,\n    refreshCounter,\n    refreshIntervalInMs,\n    setRefreshInterval,\n  ]);\n\n  return <TimeRangeContext.Provider value={ctx}>{children}</TimeRangeContext.Provider>;\n}\n"],"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useState","isRelativeTimeRange","toAbsoluteTimeRange","getSuggestedStepMs","getRefreshIntervalInMs","TimeRangeContext","undefined","useTimeRangeContext","ctx","Error","useTimeRange","useSuggestedStepMs","width","absoluteTimeRange","TimeRangeProvider","props","timeRange","refreshInterval","children","setTimeRange","setRefreshInterval","localTimeRange","setLocalTimeRange","localRefreshInterval","setLocalRefreshInterval","refreshCounter","setRefreshCounter","refresh","counter","refreshIntervalInMs","interval","setInterval","clearInterval","refreshKey","start","end","Provider","value"],"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,SAASC,aAAa,EAAgBC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAClH,SAIEC,mBAAmB,EACnBC,mBAAmB,EACnBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,sBAAsB,QAAQ,qBAAqB;AAqB5D,OAAO,MAAMC,iCAAmBV,cAAqCW,WAAW;AAEhF,OAAO,SAASC;IACd,MAAMC,MAAMX,WAAWQ;IACvB,IAAIG,QAAQF,WAAW;QACrB,MAAM,IAAIG,MAAM;IAClB;IACA,OAAOD;AACT;AAEA;;CAEC,GACD,OAAO,SAASE;IACd,OAAOH;AACT;AAEA;;CAEC,GACD,OAAO,SAASI,mBAAmBC,KAAc;IAC/C,MAAM,EAAEC,iBAAiB,EAAE,GAAGH;IAC9B,IAAIE,UAAUN,WAAW,OAAO;IAChC,OAAOH,mBAAmBU,mBAAmBD;AAC/C;AAEA;;CAEC,GACD,OAAO,SAASE,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAAGL;IAEnF,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGtB,SAAyBgB;IACrE,MAAM,CAACO,sBAAsBC,wBAAwB,GAAGxB,SAAqCiB;IAE7F,MAAM,CAACQ,gBAAgBC,kBAAkB,GAAG1B,SAAS;IAErDF,UAAU;QACRwB,kBAAkBN;IACpB,GAAG;QAACA;QAAWS;KAAe;IAE9B3B,UAAU;QACR0B,wBAAwBP;IAC1B,GAAG;QAACA;KAAgB;IAEpB,MAAMU,UAAU/B,YAAY;QAC1B8B,kBAAkB,CAACE,UAAYA,UAAU;IAC3C,GAAG;QAACF;KAAkB;IAEtB,MAAMG,sBAAsBzB,uBAAuBmB;IACnDzB,UAAU;QACR,IAAI+B,sBAAsB,GAAG;YAC3B,MAAMC,WAAWC,YAAY;gBAC3BJ;YACF,GAAGE;YAEH,OAAO,IAAYG,cAAcF;QACnC;IACF,GAAG;QAACH;QAASE;KAAoB;IAEjC,MAAMrB,MAAMT,QAAQ;QAClB,MAAMc,oBAAoBZ,oBAAoBoB,kBAC1CnB,oBAAoBmB,kBACpBA;QACJ,OAAO;YACLL,WAAWK;YACXF,cAAcA,gBAAgBG;YAC9BT;YACAc;YACAM,YAAY,GAAGpB,kBAAkBqB,KAAK,CAAC,CAAC,EAAErB,kBAAkBsB,GAAG,CAAC,CAAC,EAAEZ,qBAAqB,CAAC,EAAEE,gBAAgB;YAC3GR,iBAAiBM;YACjBM,qBAAqBA;YACrBT,oBAAoBA,sBAAsBI;QAC5C;IACF,GAAG;QACDH;QACAF;QACAQ;QACAJ;QACAE;QACAI;QACAT;KACD;IAED,qBAAO,KAACf,iBAAiB+B,QAAQ;QAACC,OAAO7B;kBAAMU;;AACjD"}
+{"version":3,"sources":["../../../src/runtime/TimeRangeProvider/TimeRangeProvider.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, { createContext, ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport {\n  AbsoluteTimeRange,\n  DurationString,\n  TimeRangeValue,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  getSuggestedStepMs,\n} from '@perses-dev/core';\nimport { getRefreshIntervalInMs } from './refresh-interval';\n\nexport interface TimeRangeProviderProps {\n  timeRange: TimeRangeValue;\n  refreshInterval?: DurationString;\n  setTimeRange?: (value: TimeRangeValue) => void;\n  setRefreshInterval?: (value: DurationString) => void;\n  children?: React.ReactNode;\n}\n\nexport interface TimeRange {\n  timeRange: TimeRangeValue;\n  absoluteTimeRange: AbsoluteTimeRange; // resolved absolute time for plugins to use\n  setTimeRange: (value: TimeRangeValue) => void;\n  refresh: () => void;\n  refreshKey: string;\n  refreshInterval?: DurationString;\n  refreshIntervalInMs: number;\n  setRefreshInterval: (value: DurationString) => void;\n}\n\nexport const TimeRangeContext = createContext<TimeRange | undefined>(undefined);\n\nexport function useTimeRangeContext(): TimeRange {\n  const ctx = useContext(TimeRangeContext);\n  if (ctx === undefined) {\n    throw new Error('No TimeRangeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\n/**\n * Get and set the current resolved time range at runtime.\n */\nexport function useTimeRange(): TimeRange {\n  return useTimeRangeContext();\n}\n\n/**\n * Gets the suggested step for a graph query in ms for the currently selected time range.\n */\nexport function useSuggestedStepMs(width?: number): number {\n  const { absoluteTimeRange } = useTimeRange();\n  if (width === undefined) return 0;\n  return getSuggestedStepMs(absoluteTimeRange, width);\n}\n\n/**\n * Provider implementation that supplies the time range state at runtime.\n */\nexport function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {\n  const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;\n\n  /**\n   * TODO: The hook needs refactor. There is a bug here with refreshKey. If the refreshInterval is not set,\n   * refreshKey string includes an undefined xx:yy:zz:undefined:0\n   * I think exposing refresh functionality also is very risky. A careless usage of refresh may cause\n   * infinite rendering loop.\n   */\n\n  const [localTimeRange, setLocalTimeRange] = useState<TimeRangeValue>(timeRange);\n  const [localRefreshInterval, setLocalRefreshInterval] = useState<DurationString | undefined>(refreshInterval);\n\n  const [refreshCounter, setRefreshCounter] = useState(0);\n\n  useEffect(() => {\n    setLocalTimeRange(timeRange);\n  }, [timeRange, refreshCounter]);\n\n  useEffect(() => {\n    setLocalRefreshInterval(refreshInterval);\n  }, [refreshInterval]);\n\n  const refresh = useCallback(() => {\n    setRefreshCounter((counter) => counter + 1);\n  }, [setRefreshCounter]);\n\n  const refreshIntervalInMs = getRefreshIntervalInMs(localRefreshInterval);\n  useEffect(() => {\n    if (refreshIntervalInMs > 0) {\n      const interval = setInterval(() => {\n        refresh();\n      }, refreshIntervalInMs);\n\n      return (): void => clearInterval(interval);\n    }\n  }, [refresh, refreshIntervalInMs]);\n\n  const ctx = useMemo(() => {\n    const absoluteTimeRange = isRelativeTimeRange(localTimeRange)\n      ? toAbsoluteTimeRange(localTimeRange)\n      : localTimeRange;\n    return {\n      timeRange: localTimeRange,\n      setTimeRange: setTimeRange ?? setLocalTimeRange,\n      absoluteTimeRange,\n      refresh,\n      refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,\n      refreshInterval: localRefreshInterval,\n      refreshIntervalInMs: refreshIntervalInMs,\n      setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval,\n    };\n  }, [\n    localTimeRange,\n    setTimeRange,\n    refresh,\n    localRefreshInterval,\n    refreshCounter,\n    refreshIntervalInMs,\n    setRefreshInterval,\n  ]);\n\n  return <TimeRangeContext.Provider value={ctx}>{children}</TimeRangeContext.Provider>;\n}\n"],"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useState","isRelativeTimeRange","toAbsoluteTimeRange","getSuggestedStepMs","getRefreshIntervalInMs","TimeRangeContext","undefined","useTimeRangeContext","ctx","Error","useTimeRange","useSuggestedStepMs","width","absoluteTimeRange","TimeRangeProvider","props","timeRange","refreshInterval","children","setTimeRange","setRefreshInterval","localTimeRange","setLocalTimeRange","localRefreshInterval","setLocalRefreshInterval","refreshCounter","setRefreshCounter","refresh","counter","refreshIntervalInMs","interval","setInterval","clearInterval","refreshKey","start","end","Provider","value"],"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,SAASC,aAAa,EAAgBC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAClH,SAIEC,mBAAmB,EACnBC,mBAAmB,EACnBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,sBAAsB,QAAQ,qBAAqB;AAqB5D,OAAO,MAAMC,iCAAmBV,cAAqCW,WAAW;AAEhF,OAAO,SAASC;IACd,MAAMC,MAAMX,WAAWQ;IACvB,IAAIG,QAAQF,WAAW;QACrB,MAAM,IAAIG,MAAM;IAClB;IACA,OAAOD;AACT;AAEA;;CAEC,GACD,OAAO,SAASE;IACd,OAAOH;AACT;AAEA;;CAEC,GACD,OAAO,SAASI,mBAAmBC,KAAc;IAC/C,MAAM,EAAEC,iBAAiB,EAAE,GAAGH;IAC9B,IAAIE,UAAUN,WAAW,OAAO;IAChC,OAAOH,mBAAmBU,mBAAmBD;AAC/C;AAEA;;CAEC,GACD,OAAO,SAASE,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAAGL;IAEnF;;;;;GAKC,GAED,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGtB,SAAyBgB;IACrE,MAAM,CAACO,sBAAsBC,wBAAwB,GAAGxB,SAAqCiB;IAE7F,MAAM,CAACQ,gBAAgBC,kBAAkB,GAAG1B,SAAS;IAErDF,UAAU;QACRwB,kBAAkBN;IACpB,GAAG;QAACA;QAAWS;KAAe;IAE9B3B,UAAU;QACR0B,wBAAwBP;IAC1B,GAAG;QAACA;KAAgB;IAEpB,MAAMU,UAAU/B,YAAY;QAC1B8B,kBAAkB,CAACE,UAAYA,UAAU;IAC3C,GAAG;QAACF;KAAkB;IAEtB,MAAMG,sBAAsBzB,uBAAuBmB;IACnDzB,UAAU;QACR,IAAI+B,sBAAsB,GAAG;YAC3B,MAAMC,WAAWC,YAAY;gBAC3BJ;YACF,GAAGE;YAEH,OAAO,IAAYG,cAAcF;QACnC;IACF,GAAG;QAACH;QAASE;KAAoB;IAEjC,MAAMrB,MAAMT,QAAQ;QAClB,MAAMc,oBAAoBZ,oBAAoBoB,kBAC1CnB,oBAAoBmB,kBACpBA;QACJ,OAAO;YACLL,WAAWK;YACXF,cAAcA,gBAAgBG;YAC9BT;YACAc;YACAM,YAAY,GAAGpB,kBAAkBqB,KAAK,CAAC,CAAC,EAAErB,kBAAkBsB,GAAG,CAAC,CAAC,EAAEZ,qBAAqB,CAAC,EAAEE,gBAAgB;YAC3GR,iBAAiBM;YACjBM,qBAAqBA;YACrBT,oBAAoBA,sBAAsBI;QAC5C;IACF,GAAG;QACDH;QACAF;QACAQ;QACAJ;QACAE;QACAI;QACAT;KACD;IAED,qBAAO,KAACf,iBAAiB+B,QAAQ;QAACC,OAAO7B;kBAAMU;;AACjD"}

package/dist/utils/variables.d.ts

@@ -1,9 +1,31 @@
 import { VariableValue } from '@perses-dev/core';
 import { VariableStateMap } from '@perses-dev/plugin-system';
 export declare function replaceVariables(text: string, variableState: VariableStateMap): string;
-export declare function replaceVariable(text: string, varName: string, variableValue: VariableValue): string;
+export declare enum InterpolationFormat {
+    CSV = "csv",
+    DISTRIBUTED = "distributed",
+    DOUBLEQUOTE = "doublequote",
+    GLOB = "glob",
+    JSON = "json",
+    LUCENE = "lucene",
+    PERCENTENCODE = "percentencode",
+    PIPE = "pipe",
+    PROMETHEUS = "prometheus",
+    RAW = "raw",
+    REGEX = "regex",
+    SINGLEQUOTE = "singlequote",
+    SQLSTRING = "sqlstring",
+    TEXT = "text",
+    QUERYPARAM = "queryparam"
+}
+export declare function interpolate(values: string[], name: string, format: InterpolationFormat): string;
+export declare function replaceVariable(text: string, varName: string, variableValue: VariableValue, varFormat?: InterpolationFormat): string;
 /**
  * Returns a list of variables
  */
-export declare const parseVariables: (text: string) => string[];
+export declare function parseVariables(text: string): string[];
+/**
+ * Returns a map of variable names and its format. If no format is specified, it will be undefined.
+ */
+export declare function parseVariablesAndFormat(text: string): Map<string, InterpolationFormat | undefined>;
 //# sourceMappingURL=variables.d.ts.map

package/dist/utils/variables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../src/utils/variables.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,GAAG,MAAM,CAgBtF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,GAAG,MAAM,CAcnG;AAWD;;GAEG;AACH,eAAO,MAAM,cAAc,SAAU,MAAM,KAAG,MAAM,EAkBnD,CAAC"}
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../src/utils/variables.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,GAAG,MAAM,CAiBtF;AAED,oBAAY,mBAAmB;IAC7B,GAAG,QAAQ;IACX,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,IAAI,SAAS;IACb,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,aAAa,kBAAkB;IAC/B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,UAAU,eAAe;CAC1B;AASD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAqC/F;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,aAAa,EAC5B,SAAS,CAAC,EAAE,mBAAmB,GAC9B,MAAM,CAcR;AAUD;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAiBrD;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAoBlG"}