@perses-dev/dashboards 0.9.0 → 0.10.0

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -16,7 +16,7 @@ import { Box, FormControl, Popover, Stack } from '@mui/material';
 import { AbsoluteTimePicker, TimeRangeSelector } from '@perses-dev/components';
 import { getDefaultTimeRange } from '@perses-dev/core';
 import { useTimeRange, useQueryString } from '@perses-dev/plugin-system';
-import { useDashboard } from '../../context';
+import { useDefaultTimeRange } from '../../context';
 // TODO: add time shortcut if one does not match duration
 export const TIME_OPTIONS = [
     {
@@ -76,9 +76,9 @@ export const TIME_OPTIONS = [
 ];
 export function TimeRangeControls() {
     const { timeRange , setTimeRange  } = useTimeRange();
-    const { dashboard  } = useDashboard();
+    const dashboardDefaultTimeRange = useDefaultTimeRange();
     const { queryString  } = useQueryString();
-    const defaultTimeRange = getDefaultTimeRange(dashboard.duration, queryString);
+    const defaultTimeRange = getDefaultTimeRange(dashboardDefaultTimeRange, queryString);
     // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
     const [selectedTimeRange, setSelectedTimeRange] = useState(defaultTimeRange);
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2022 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 { useRef, useState } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport { AbsoluteTimePicker, TimeRangeSelector, TimeOption } from '@perses-dev/components';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  TimeRangeValue,\n  getDefaultTimeRange,\n} from '@perses-dev/core';\nimport { useTimeRange, useQueryString } from '@perses-dev/plugin-system';\nimport { useDashboard } from '../../context';\n\n// TODO: add time shortcut if one does not match duration\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useTimeRange();\n  const { dashboard } = useDashboard();\n  const { queryString } = useQueryString();\n\n  const defaultTimeRange = getDefaultTimeRange(dashboard.duration, queryString);\n\n  // selected form value can be relative or absolute, timeRange from plugin-system is only absolute\n  const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeValue>(defaultTimeRange);\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={timeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setSelectedTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={selectedTimeRange}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              setTimeRange(relativeTimeInput);\n              setSelectedTimeRange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","getDefaultTimeRange","useTimeRange","useQueryString","useDashboard","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","dashboard","queryString","defaultTimeRange","duration","selectedTimeRange","setSelectedTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onChange","fullWidth","ref","timeOptions","onSelectChange","event","target","relativeTimeInput","end","Date","onCustomClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2022 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 { useRef, useState } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport { AbsoluteTimePicker, TimeRangeSelector, TimeOption } from '@perses-dev/components';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  TimeRangeValue,\n  getDefaultTimeRange,\n} from '@perses-dev/core';\nimport { useTimeRange, useQueryString } from '@perses-dev/plugin-system';\nimport { useDefaultTimeRange } from '../../context';\n\n// TODO: add time shortcut if one does not match duration\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useTimeRange();\n  const dashboardDefaultTimeRange = useDefaultTimeRange();\n  const { queryString } = useQueryString();\n\n  const defaultTimeRange = getDefaultTimeRange(dashboardDefaultTimeRange, queryString);\n\n  // selected form value can be relative or absolute, timeRange from plugin-system is only absolute\n  const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeValue>(defaultTimeRange);\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={timeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setSelectedTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={selectedTimeRange}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              setTimeRange(relativeTimeInput);\n              setSelectedTimeRange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","getDefaultTimeRange","useTimeRange","useQueryString","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","dashboardDefaultTimeRange","queryString","defaultTimeRange","selectedTimeRange","setSelectedTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onChange","fullWidth","ref","timeOptions","onSelectChange","event","duration","target","relativeTimeInput","end","Date","onCustomClick"],"mappings":"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"}

package/dist/components/Variables/Variable.js

@@ -11,11 +11,11 @@
 // 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 { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
 import { usePlugin, DEFAULT_ALL_VALUE, useTemplateVariableValues, useDatasourceStore } from '@perses-dev/plugin-system';
 import { useQuery } from '@tanstack/react-query';
-import { useTemplateVariable, useTemplateVariableActions, useTemplateVariableStore } from '../../context';
+import { useTemplateVariable, useTemplateVariableActions } from '../../context';
 export function TemplateVariable({ name  }) {
     var ref;
     const ctx = useTemplateVariable(name);
@@ -43,7 +43,7 @@ export function TemplateVariable({ name  }) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
 function ListVariable({ name  }) {
-    var ref, ref1, ref2;
+    var ref, ref1, ref2, ref3;
     const ctx = useTemplateVariable(name);
     const definition = ctx.definition;
     const { data: variablePlugin  } = usePlugin('Variable', definition.spec.plugin.kind);
@@ -57,6 +57,8 @@ function ListVariable({ name  }) {
     const variables = useTemplateVariableValues(dependsOnVariables);
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
+    var ref4;
+    const label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
     let waitToLoad = false;
     if (dependsOnVariables) {
         waitToLoad = dependsOnVariables.some((v)=>{
@@ -90,9 +92,9 @@ function ListVariable({ name  }) {
         setVariableLoading,
         setVariableOptions
     ]);
-    let value = (ref = ctx.state) === null || ref === void 0 ? void 0 : ref.value;
-    const options = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.options;
-    const loading = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.loading;
+    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
+    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
+    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
@@ -147,7 +149,7 @@ function ListVariable({ name  }) {
             children: [
                 /*#__PURE__*/ _jsx(InputLabel, {
                     id: name,
-                    children: name
+                    children: label
                 }),
                 /*#__PURE__*/ _jsxs(Select, {
                     sx: {
@@ -187,13 +189,19 @@ function ListVariable({ name  }) {
 }
 function TextVariable({ name  }) {
     const { state  } = useTemplateVariable(name);
-    const s = useTemplateVariableStore();
-    const setVariableValue = s.setVariableValue;
-    const ref = useRef(null);
+    var ref;
+    const [tempValue, setTempValue] = useState((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    const { setVariableValue  } = useTemplateVariableActions();
+    useEffect(()=>{
+        var ref;
+        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    }, [
+        state === null || state === void 0 ? void 0 : state.value
+    ]);
     return /*#__PURE__*/ _jsx(TextField, {
-        ref: ref,
-        defaultValue: state === null || state === void 0 ? void 0 : state.value,
-        onBlur: (e)=>setVariableValue(name, e.target.value),
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
         placeholder: name,
         label: name
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect, useMemo, useRef } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions, useTemplateVariableStore } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    dependsOnVariables = variablePlugin.dependsOn(spec);\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\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  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n    const valueIsInOptions = Boolean(\n      finalOptions.find((v) => {\n        if (allowMultiple) {\n          return (value as string[]).includes(v.value);\n        }\n        return value === v.value;\n      })\n    );\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n\n    // If there is a value but it's not in the options, select the first value or set to null\n    if (value && !valueIsInOptions && !definition.spec.default_value) {\n      setVariableValue(name, firstOption?.value || null);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl>\n        <InputLabel id={name}>{name}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={value ?? ''}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const s = useTemplateVariableStore();\n  const setVariableValue = s.setVariableValue;\n  const ref = useRef<HTMLInputElement>(null);\n  return (\n    <TextField\n      ref={ref}\n      defaultValue={state?.value}\n      onBlur={(e) => setVariableValue(name, e.target.value)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useRef","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useQuery","useTemplateVariable","useTemplateVariableActions","useTemplateVariableStore","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","dependsOnVariables","dependsOn","variables","allowMultiple","allow_multiple","allowAllValue","allow_all_value","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","label","firstOption","valueIsInOptions","Boolean","find","includes","default_value","display","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","s","ref","defaultValue","onBlur","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO,CAAC;AACnD,SAASC,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,cAAc,EAAEC,SAAS,QAAQ,eAAe,CAAC;AAE1G,SACEC,SAAS,EACTC,iBAAiB,EACjBC,yBAAyB,EAEzBC,kBAAkB,QACb,2BAA2B,CAAC;AACnC,SAASC,QAAQ,QAAQ,uBAAuB,CAAC;AACjD,SAASC,mBAAmB,EAAEC,0BAA0B,EAAEC,wBAAwB,QAAQ,eAAe,CAAC;AAM1G,OAAO,SAASC,gBAAgB,CAAC,EAAEC,IAAI,CAAA,EAAyB,EAAE;QAEnDC,GAAc;IAD3B,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAME,IAAI,GAAGD,CAAAA,GAAc,GAAdA,GAAG,CAACE,UAAU,cAAdF,GAAc,WAAM,GAApBA,KAAAA,CAAoB,GAApBA,GAAc,CAAEC,IAAI,AAAC;IAClC,OAAQA,IAAI;QACV,KAAK,cAAc;YACjB,qBAAO,KAACE,YAAY;gBAACJ,IAAI,EAAEA,IAAI;cAAI,CAAC;QACtC,KAAK,cAAc;YACjB,qBAAO,KAACK,YAAY;gBAACL,IAAI,EAAEA,IAAI;cAAI,CAAC;KACvC;IAED,qBAAO,MAACM,KAAG;;YAAC,8BAA4B;YAACJ,IAAI;;MAAO,CAAC;AACvD,CAAC;AAED;;CAEC,GACD,SAASK,oBAAoB,CAACC,CAAmB,EAAE;IACjD,OAAOC,MAAM,CAACC,MAAM,CAACF,CAAC,CAAC,CACpBG,GAAG,CAAC,CAACH,CAAC,GAAKI,IAAI,CAACC,SAAS,CAACL,CAAC,CAACM,KAAK,CAAC,CAAC,CACnCC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,SAASV,YAAY,CAAC,EAAEL,IAAI,CAAA,EAAyB,EAAE;QAyCzCC,GAAS,EACLA,IAAS,EACTA,IAAS;IA1CzB,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAMG,UAAU,GAAGF,GAAG,CAACE,UAAU,AAA0B,AAAC;IAC5D,MAAM,EAAEa,IAAI,EAAEC,cAAc,CAAA,EAAE,GAAG1B,SAAS,CAAC,UAAU,EAAEY,UAAU,CAACe,IAAI,CAACC,MAAM,CAACjB,IAAI,CAAC,AAAC;IACpF,MAAM,EAAEkB,gBAAgB,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGzB,0BAA0B,EAAE,AAAC;IAClG,MAAM0B,eAAe,GAAG7B,kBAAkB,EAAE,AAAC;IAE7C,MAAMwB,IAAI,GAAGf,UAAU,CAACe,IAAI,CAACC,MAAM,CAACD,IAAI,AAAC;IAEzC,IAAIM,kBAAkB,AAAsB,AAAC;IAC7C,IAAIP,cAAc,aAAdA,cAAc,WAAW,GAAzBA,KAAAA,CAAyB,GAAzBA,cAAc,CAAEQ,SAAS,EAAE;QAC7BD,kBAAkB,GAAGP,cAAc,CAACQ,SAAS,CAACP,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,MAAMQ,SAAS,GAAGjC,yBAAyB,CAAC+B,kBAAkB,CAAC,AAAC;IAChE,MAAMG,aAAa,GAAGxB,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACU,cAAc,MAAK,IAAI,AAAC;IAC/D,MAAMC,aAAa,GAAG1B,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACY,eAAe,MAAK,IAAI,AAAC;IAEhE,IAAIC,UAAU,GAAG,KAAK,AAAC;IACvB,IAAIP,kBAAkB,EAAE;QACtBO,UAAU,GAAGP,kBAAkB,CAACQ,IAAI,CAAC,CAACxB,CAAC;gBAAKkB,GAAY;YAAZA,OAAAA,CAAAA,GAAY,GAAZA,SAAS,CAAClB,CAAC,CAAC,cAAZkB,GAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,GAAY,CAAEO,OAAO,CAAA;SAAA,CAAC,CAAC;IACrE,CAAC;IAED,MAAMC,iBAAiB,GAAG3B,oBAAoB,CAACmB,SAAS,CAAC,AAAC;IAE1D,MAAMS,qBAAqB,GAAGxC,QAAQ,CACpC;QAACK,IAAI;QAAEG,UAAU;QAAE+B,iBAAiB;KAAC,EACrC,UAAY;QACV,MAAME,IAAI,GAAG,OAAMnB,cAAc,aAAdA,cAAc,WAAoB,GAAlCA,KAAAA,CAAkC,GAAlCA,cAAc,CAAEoB,kBAAkB,CAACnB,IAAI,EAAE;YAAEK,eAAe;YAAEG,SAAS;SAAE,CAAC,CAAA,AAAC;YACrFU,GAAU;QAAjB,OAAOA,CAAAA,GAAU,GAAVA,IAAI,aAAJA,IAAI,WAAM,GAAVA,KAAAA,CAAU,GAAVA,IAAI,CAAEpB,IAAI,cAAVoB,GAAU,cAAVA,GAAU,GAAI,EAAE,CAAC;IAC1B,CAAC,EACD;QAAEE,OAAO,EAAE,CAAC,CAACrB,cAAc,IAAIc,UAAU;KAAE,CAC5C,AAAC;IAEFlD,SAAS,CAAC,IAAM;QACdwC,kBAAkB,CAACrB,IAAI,EAAEmC,qBAAqB,CAACI,UAAU,CAAC,CAAC;QAC3D,IAAIJ,qBAAqB,CAACnB,IAAI,EAAE;YAC9BM,kBAAkB,CAACtB,IAAI,EAAEmC,qBAAqB,CAACnB,IAAI,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE;QAACmB,qBAAqB;QAAEnC,IAAI;QAAEqB,kBAAkB;QAAEC,kBAAkB;KAAC,CAAC,CAAC;IAE1E,IAAIR,KAAK,GAAGb,CAAAA,GAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,GAAS,WAAO,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAS,CAAEa,KAAK,AAAC;IAC7B,MAAM2B,OAAO,GAAGxC,CAAAA,IAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEwC,OAAO,AAAC;IACnC,MAAMR,OAAO,GAAGhC,CAAAA,IAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEgC,OAAO,AAAC;IAEnC,uDAAuD;IACvD,IAAIN,aAAa,IAAI,CAACe,KAAK,CAACC,OAAO,CAAC7B,KAAK,CAAC,EAAE;QAC1CA,KAAK,GAAG,OAAOA,KAAK,KAAK,QAAQ,GAAG;YAACA,KAAK;SAAC,GAAG,EAAE,CAAC;IACnD,CAAC;IAED,MAAM8B,YAAY,GAAG9D,OAAO,CAAC,IAAM;QACjC,IAAI+D,eAAe,GAAGJ,OAAO,GAAG;eAAIA,OAAO;SAAC,GAAG,EAAE,AAAC;QAElD,oCAAoC;QACpC,IAAIZ,aAAa,EAAE;YACjBgB,eAAe,GAAG;gBAAC;oBAAE/B,KAAK,EAAEtB,iBAAiB;oBAAEsD,KAAK,EAAE,KAAK;iBAAE;mBAAKD,eAAe;aAAC,CAAC;QACrF,CAAC;QACD,OAAOA,eAAe,CAAC;IACzB,CAAC,EAAE;QAACJ,OAAO;QAAEZ,aAAa;KAAC,CAAC,AAAC;IAE7BhD,SAAS,CAAC,IAAM;QACd,MAAMkE,WAAW,GAAGH,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,AAAE,CAAC,CAAC,CAAC,AAAC;QACtC,MAAMI,gBAAgB,GAAGC,OAAO,CAC9BL,YAAY,CAACM,IAAI,CAAC,CAAC1C,CAAC,GAAK;YACvB,IAAImB,aAAa,EAAE;gBACjB,OAAO,AAACb,KAAK,CAAcqC,QAAQ,CAAC3C,CAAC,CAACM,KAAK,CAAC,CAAC;YAC/C,CAAC;YACD,OAAOA,KAAK,KAAKN,CAAC,CAACM,KAAK,CAAC;QAC3B,CAAC,CAAC,CACH,AAAC;QAEF,iFAAiF;QACjF,IAAI,CAACA,KAAK,IAAIiC,WAAW,EAAE;YACzB3B,gBAAgB,CAACpB,IAAI,EAAE+C,WAAW,CAACjC,KAAK,CAAC,CAAC;QAC5C,CAAC;QAED,yFAAyF;QACzF,IAAIA,KAAK,IAAI,CAACkC,gBAAgB,IAAI,CAAC7C,UAAU,CAACe,IAAI,CAACkC,aAAa,EAAE;YAChEhC,gBAAgB,CAACpB,IAAI,EAAE+C,CAAAA,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAEjC,KAAK,CAAA,IAAI,IAAI,CAAC,CAAC;QACrD,CAAC;IACH,CAAC,EAAE;QAAC8B,YAAY;QAAExB,gBAAgB;QAAEN,KAAK;QAAEd,IAAI;QAAE2B,aAAa;KAAC,CAAC,CAAC;IAEjE,qBACE,KAACvC,GAAG;QAACiE,OAAO,EAAE,MAAM;kBAClB,cAAA,MAACpE,WAAW;;8BACV,KAACC,UAAU;oBAACoE,EAAE,EAAEtD,IAAI;8BAAGA,IAAI;kBAAc;8BACzC,MAAChB,MAAM;oBACLuE,EAAE,EAAE;wBAAEC,QAAQ,EAAE,GAAG;wBAAEC,QAAQ,EAAE,GAAG;qBAAE;oBACpCH,EAAE,EAAEtD,IAAI;oBACR8C,KAAK,EAAE9C,IAAI;oBACXc,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;oBAClB4C,QAAQ,EAAE,CAACC,CAAC,GAAK;wBACf,mBAAmB;wBACnB,IAAIA,CAAC,CAACC,MAAM,CAAC9C,KAAK,KAAK,IAAI,IAAI6C,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAC+C,MAAM,KAAK,CAAC,EAAE;4BAC1D,IAAIhC,aAAa,EAAE;gCACjBT,gBAAgB,CAACpB,IAAI,EAAER,iBAAiB,CAAC,CAAC;4BAC5C,CAAC;4BACD,OAAO;wBACT,CAAC;wBACD4B,gBAAgB,CAACpB,IAAI,EAAE2D,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAkB,CAAC;oBAC1D,CAAC;oBACDgD,QAAQ,EAAEnC,aAAa;;wBAEtBM,OAAO,kBACN,KAAC9C,QAAQ;4BAAC2B,KAAK,EAAC,SAAS;4BAACiD,QAAQ;sCAAC,SAEnC;0BAAW,AACZ;wBACAnB,YAAY,CAACjC,GAAG,CAAC,CAACqD,MAAM,iBACvB,KAAC7E,QAAQ;gCAAoB2B,KAAK,EAAEkD,MAAM,CAAClD,KAAK;0CAC7CkD,MAAM,CAAClB,KAAK;+BADAkB,MAAM,CAAClD,KAAK,CAEhB,AACZ,CAAC;;kBACK;gBACRmB,OAAO,kBAAI,KAAC5C,cAAc,KAAG;;UAClB;MACV,CACN;AACJ,CAAC;AAED,SAASe,YAAY,CAAC,EAAEJ,IAAI,CAAA,EAAyB,EAAE;IACrD,MAAM,EAAEwC,KAAK,CAAA,EAAE,GAAG5C,mBAAmB,CAACI,IAAI,CAAC,AAAC;IAC5C,MAAMiE,CAAC,GAAGnE,wBAAwB,EAAE,AAAC;IACrC,MAAMsB,gBAAgB,GAAG6C,CAAC,CAAC7C,gBAAgB,AAAC;IAC5C,MAAM8C,GAAG,GAAGnF,MAAM,CAAmB,IAAI,CAAC,AAAC;IAC3C,qBACE,KAACO,SAAS;QACR4E,GAAG,EAAEA,GAAG;QACRC,YAAY,EAAE3B,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAE1B,KAAK;QAC1BsD,MAAM,EAAE,CAACT,CAAC,GAAKvC,gBAAgB,CAACpB,IAAI,EAAE2D,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAC;QACrDuD,WAAW,EAAErE,IAAI;QACjB8C,KAAK,EAAE9C,IAAI;MACX,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    dependsOnVariables = variablePlugin.dependsOn(spec);\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const label = definition?.spec.display?.label ?? name;\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  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n    const valueIsInOptions = Boolean(\n      finalOptions.find((v) => {\n        if (allowMultiple) {\n          return (value as string[]).includes(v.value);\n        }\n        return value === v.value;\n      })\n    );\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n\n    // If there is a value but it's not in the options, select the first value or set to null\n    if (value && !valueIsInOptions && !definition.spec.default_value) {\n      setVariableValue(name, firstOption?.value || null);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl>\n        <InputLabel id={name}>{label}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={value ?? ''}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useQuery","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","dependsOnVariables","dependsOn","variables","allowMultiple","allow_multiple","allowAllValue","allow_all_value","label","display","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","firstOption","valueIsInOptions","Boolean","find","includes","default_value","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableDefinition } from '@perses-dev/core';
+export declare function VariableEditor(props: {
+    variableDefinitions: VariableDefinition[];
+    onChange: (variableDefinitions: VariableDefinition[]) => void;
+    onCancel: () => void;
+}): JSX.Element;
+//# sourceMappingURL=VariableEditor.d.ts.map

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAkIA"}

package/dist/components/Variables/VariableEditor.js

@@ -0,0 +1,196 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell, Table, Paper, TableHead, Switch, Typography, IconButton } from '@mui/material';
+import { useImmer } from 'use-immer';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import TrashIcon from 'mdi-material-ui/TrashCan';
+import { VariableEditForm } from './VariableEditorForm';
+export function VariableEditor(props) {
+    const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);
+    const [variableEditIdx, setVariableEditIdx] = useState(null);
+    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const removeVariable = (index)=>{
+        setVariableDefinitions((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addVariable = ()=>{
+        setVariableDefinitions((draft)=>{
+            draft.push({
+                kind: 'TextVariable',
+                spec: {
+                    name: 'NewVariable',
+                    value: ''
+                }
+            });
+        });
+    };
+    const toggleVariableVisibility = (index, visible)=>{
+        setVariableDefinitions((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            if (!v.spec.display) {
+                v.spec.display = {
+                    hidden: false
+                };
+            }
+            v.spec.display.hidden = visible === false;
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Box, {
+        p: 4,
+        children: [
+            currentEditingVariableDefinition && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Edit Variable"
+                    }),
+                    /*#__PURE__*/ _jsx(VariableEditForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        onChange: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onCancel: ()=>setVariableEditIdx(null)
+                    })
+                ]
+            }),
+            !currentEditingVariableDefinition && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        justifyContent: "end",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>{
+                                    props.onCancel();
+                                },
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    props.onChange(variableDefinitions);
+                                },
+                                children: "Apply Changes"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Variable List"
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(TableContainer, {
+                                component: Paper,
+                                children: /*#__PURE__*/ _jsxs(Table, {
+                                    sx: {
+                                        minWidth: 650
+                                    },
+                                    "aria-label": "simple table",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableHead, {
+                                            children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: "Visibility"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: "Variable Name"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: "Variable Type"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: "Action"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableBody, {
+                                            children: variableDefinitions.map((v, idx)=>{
+                                                var ref;
+                                                /*#__PURE__*/ return _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            children: /*#__PURE__*/ _jsx(Switch, {
+                                                                checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                onChange: (e)=>{
+                                                                    toggleVariableVisibility(idx, e.target.checked);
+                                                                }
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            sx: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: v.spec.name
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: v.kind
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs(TableCell, {
+                                                            align: "right",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                                    onClick: ()=>setVariableEditIdx(idx),
+                                                                    children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                                    onClick: ()=>removeVariable(idx),
+                                                                    children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }, v.spec.name);
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                display: "flex",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    onClick: addVariable,
+                                    variant: "contained",
+                                    children: "Add New Variable"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=VariableEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n} from '@mui/material';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\n\nimport { VariableEditForm } from './VariableEditorForm';\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  return (\n    <Box p={4}>\n      {currentEditingVariableDefinition && (\n        <>\n          <Typography variant=\"h3\" mb={2}>\n            Edit Variable\n          </Typography>\n          <VariableEditForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            onChange={(definition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onCancel={() => setVariableEditIdx(null)}\n          />\n        </>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\n            <Button\n              onClick={() => {\n                props.onCancel();\n              }}\n            >\n              Cancel\n            </Button>\n            <Button\n              disabled={props.variableDefinitions === variableDefinitions}\n              variant=\"contained\"\n              onClick={() => {\n                props.onChange(variableDefinitions);\n              }}\n            >\n              Apply Changes\n            </Button>\n          </Stack>\n          <Typography variant=\"h3\" mb={2}>\n            Variable List\n          </Typography>\n          <Stack spacing={2}>\n            <TableContainer component={Paper}>\n              <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Visibility</TableCell>\n                    <TableCell>Variable Name</TableCell>\n                    <TableCell>Variable Type</TableCell>\n                    <TableCell align=\"right\">Action</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {variableDefinitions.map((v, idx) => (\n                    <TableRow key={v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\">\n                        <Switch\n                          checked={v.spec.display?.hidden !== true}\n                          onChange={(e) => {\n                            toggleVariableVisibility(idx, e.target.checked);\n                          }}\n                        />\n                      </TableCell>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.kind}</TableCell>\n                      <TableCell align=\"right\">\n                        <IconButton onClick={() => setVariableEditIdx(idx)}>\n                          <PencilIcon />\n                        </IconButton>\n                        <IconButton onClick={() => removeVariable(idx)}>\n                          <TrashIcon />\n                        </IconButton>\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n            <Box display=\"flex\">\n              <Button onClick={addVariable} variant=\"contained\">\n                Add New Variable\n              </Button>\n            </Box>\n          </Stack>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","useImmer","PencilIcon","TrashIcon","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","direction","spacing","justifyContent","onClick","disabled","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableDefinition } from '@perses-dev/core';
+export declare function VariableEditForm({ initialVariableDefinition, onChange, onCancel, }: {
+    initialVariableDefinition: VariableDefinition;
+    onChange: (def: VariableDefinition) => void;
+    onCancel: () => void;
+}): JSX.Element;
+//# sourceMappingURL=VariableEditorForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAsJA"}