@perses-dev/dashboards 0.9.0 → 0.11.0

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, useMemo } 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  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n} from '@perses-dev/core';\nimport { useDashboardTimeRange } 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 } = useDashboardTimeRange();\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  }, [timeRange]);\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={convertedTimeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={timeRange}\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              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","isRelativeTimeRange","toAbsoluteTimeRange","useDashboardTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","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/TimeRangeControls/TimeRangeControls.test.js

@@ -11,38 +11,45 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { generatePath } from 'react-router';
+import { createMemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
-import { getDefaultTimeRange } from '@perses-dev/core';
 import { screen } from '@testing-library/react';
 import { renderWithContext } from '../../test';
 import testDashboard from '../../test/testDashboard';
-import { DashboardProvider, TimeRangeProvider, QueryStringProvider } from '../../context';
+import { DashboardProvider, TimeRangeProvider } from '../../context';
 import { TimeRangeControls } from './TimeRangeControls';
+const history = createMemoryHistory({
+    initialEntries: [
+        generatePath('/dashboards/:id', {
+            id: 'test'
+        })
+    ]
+});
 describe('TimeRangeControls', ()=>{
     let initialState;
+    const testDefaultTimeRange = {
+        pastDuration: testDashboard.spec.duration
+    };
     beforeEach(()=>{
         initialState = {
             dashboardSpec: testDashboard.spec
         };
     });
     const renderTimeRangeControls = ()=>{
-        const queryString = new URLSearchParams();
-        const defaultTimeRange = getDefaultTimeRange(initialState.dashboardSpec.duration, queryString);
-        renderWithContext(/*#__PURE__*/ _jsx(QueryStringProvider, {
-            queryString: queryString,
-            children: /*#__PURE__*/ _jsx(DashboardProvider, {
-                initialState: initialState,
-                children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                    initialTimeRange: defaultTimeRange,
-                    children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
-                })
+        renderWithContext(/*#__PURE__*/ _jsx(DashboardProvider, {
+            initialState: initialState,
+            children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
+                timeRange: testDefaultTimeRange,
+                children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
             })
-        }));
+        }), undefined, history);
     };
     it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();
     });
+    // TODO: fix setTimeRange no-op, test query params
     it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
         const dateButton = screen.getByRole('button');

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.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 userEvent from '@testing-library/user-event';\nimport { getDefaultTimeRange } from '@perses-dev/core';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider, QueryStringProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n\n  beforeEach(() => {\n    initialState = {\n      dashboardSpec: testDashboard.spec,\n    };\n  });\n\n  const renderTimeRangeControls = () => {\n    const queryString = new URLSearchParams();\n    const defaultTimeRange = getDefaultTimeRange(initialState.dashboardSpec.duration, queryString);\n    renderWithContext(\n      <QueryStringProvider queryString={queryString}>\n        <DashboardProvider initialState={initialState}>\n          <TimeRangeProvider initialTimeRange={defaultTimeRange}>\n            <TimeRangeControls />\n          </TimeRangeProvider>\n        </DashboardProvider>\n      </QueryStringProvider>\n    );\n  };\n\n  it('should render correct initial relative time shortcut', async () => {\n    renderTimeRangeControls();\n    expect(screen.getByText('Last 1 day')).toBeInTheDocument();\n  });\n\n  it('should be able to select the first option', () => {\n    renderTimeRangeControls();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstOption = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstOption);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["userEvent","getDefaultTimeRange","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","QueryStringProvider","TimeRangeControls","describe","initialState","beforeEach","dashboardSpec","spec","renderTimeRangeControls","queryString","URLSearchParams","defaultTimeRange","duration","initialTimeRange","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstOption","name","toHaveTextContent"],"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,OAAOA,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,mBAAmB,QAAQ,kBAAkB,CAAC;AACvD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,EAAEC,mBAAmB,QAAQ,eAAe,CAAC;AAC/G,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExDC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IAEtCC,UAAU,CAAC,IAAM;QACfD,YAAY,GAAG;YACbE,aAAa,EAAER,aAAa,CAACS,IAAI;SAClC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMC,uBAAuB,GAAG,IAAM;QACpC,MAAMC,WAAW,GAAG,IAAIC,eAAe,EAAE,AAAC;QAC1C,MAAMC,gBAAgB,GAAGhB,mBAAmB,CAACS,YAAY,CAACE,aAAa,CAACM,QAAQ,EAAEH,WAAW,CAAC,AAAC;QAC/FZ,iBAAiB,eACf,KAACI,mBAAmB;YAACQ,WAAW,EAAEA,WAAW;sBAC3C,cAAA,KAACV,iBAAiB;gBAACK,YAAY,EAAEA,YAAY;0BAC3C,cAAA,KAACJ,iBAAiB;oBAACa,gBAAgB,EAAEF,gBAAgB;8BACnD,cAAA,KAACT,iBAAiB,KAAG;kBACH;cACF;UACA,CACvB,CAAC;IACJ,CAAC,AAAC;IAEFY,EAAE,CAAC,sDAAsD,EAAE,UAAY;QACrEN,uBAAuB,EAAE,CAAC;QAC1BO,MAAM,CAACnB,MAAM,CAACoB,SAAS,CAAC,YAAY,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEHH,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpDN,uBAAuB,EAAE,CAAC;QAC1B,MAAMU,UAAU,GAAGtB,MAAM,CAACuB,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9CzB,SAAS,CAAC0B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,WAAW,GAAGzB,MAAM,CAACuB,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC3E5B,SAAS,CAAC0B,KAAK,CAACC,WAAW,CAAC,CAAC;QAC7BN,MAAM,CAACG,UAAU,CAAC,CAACK,iBAAiB,cAAc,CAAC;IACrD,CAAC,CAAC,CAAC;AAEH,8FAA8F;AAChG,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.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 { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardSpec: testDashboard.spec,\n    };\n  });\n\n  const renderTimeRangeControls = () => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider timeRange={testDefaultTimeRange}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should render correct initial relative time shortcut', async () => {\n    renderTimeRangeControls();\n    expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();\n  });\n\n  // TODO: fix setTimeRange no-op, test query params\n  it('should be able to select the first option', () => {\n    renderTimeRangeControls();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstOption = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstOption);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardSpec","renderTimeRangeControls","timeRange","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstOption","name","toHaveTextContent"],"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,YAAY,QAAQ,cAAc,CAAC;AAC5C,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAC9C,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,QAAQ,eAAe,CAAC;AAC1F,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExD,MAAMC,OAAO,GAAGR,mBAAmB,CAAC;IAClCS,cAAc,EAAE;QAACV,YAAY,CAAC,iBAAiB,EAAE;YAAEW,EAAE,EAAE,MAAM;SAAE,CAAC;KAAC;CAClE,CAAC,AAAC;AAEHC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IACtC,MAAMC,oBAAoB,GAAG;QAAEC,YAAY,EAAEV,aAAa,CAACW,IAAI,CAACC,QAAQ;KAAE,AAAC;IAE3EC,UAAU,CAAC,IAAM;QACfL,YAAY,GAAG;YACbM,aAAa,EAAEd,aAAa,CAACW,IAAI;SAClC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMI,uBAAuB,GAAG,IAAM;QACpChB,iBAAiB,eACf,KAACE,iBAAiB;YAACO,YAAY,EAAEA,YAAY;sBAC3C,cAAA,KAACN,iBAAiB;gBAACc,SAAS,EAAEP,oBAAoB;0BAChD,cAAA,KAACN,iBAAiB,KAAG;cACH;UACF,EACpBc,SAAS,EACTb,OAAO,CACR,CAAC;IACJ,CAAC,AAAC;IAEFc,EAAE,CAAC,sDAAsD,EAAE,UAAY;QACrEH,uBAAuB,EAAE,CAAC;QAC1BI,MAAM,CAACrB,MAAM,CAACsB,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,kDAAkD;IAClDH,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpDH,uBAAuB,EAAE,CAAC;QAC1B,MAAMO,UAAU,GAAGxB,MAAM,CAACyB,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9C1B,SAAS,CAAC2B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,WAAW,GAAG3B,MAAM,CAACyB,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC3E7B,SAAS,CAAC2B,KAAK,CAACC,WAAW,CAAC,CAAC;QAC7BN,MAAM,CAACG,UAAU,CAAC,CAACK,iBAAiB,cAAc,CAAC;IACrD,CAAC,CAAC,CAAC;AAEH,8FAA8F;AAChG,CAAC,CAAC,CAAC"}

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' ? [
@@ -144,10 +146,11 @@ function ListVariable({ name  }) {
     return /*#__PURE__*/ _jsx(Box, {
         display: 'flex',
         children: /*#__PURE__*/ _jsxs(FormControl, {
+            fullWidth: true,
             children: [
                 /*#__PURE__*/ _jsx(InputLabel, {
                     id: name,
-                    children: name
+                    children: label
                 }),
                 /*#__PURE__*/ _jsxs(Select, {
                     sx: {
@@ -187,13 +190,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 fullWidth>\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","fullWidth","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;AAStD,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,eAkKA"}

package/dist/components/Variables/VariableEditor.js

@@ -0,0 +1,229 @@
+// 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 ArrowUp from 'mdi-material-ui/ArrowUp';
+import ArrowDown from 'mdi-material-ui/ArrowDown';
+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;
+        });
+    };
+    const changeVariableOrder = (index, direction)=>{
+        setVariableDefinitions((draft)=>{
+            if (direction === 'up') {
+                const prevElement = draft[index - 1];
+                const currentElement = draft[index];
+                if (index === 0 || !prevElement || !currentElement) {
+                    return;
+                }
+                draft[index - 1] = currentElement;
+                draft[index] = prevElement;
+            } else {
+                const nextElement = draft[index + 1];
+                const currentElement1 = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                    return;
+                }
+                draft[index + 1] = currentElement1;
+                draft[index] = nextElement;
+            }
+        });
+    };
+    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: ()=>changeVariableOrder(idx, 'up'),
+                                                                    disabled: idx === 0,
+                                                                    children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                    disabled: idx === variableDefinitions.length - 1,
+                                                                    children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                }),
+                                                                /*#__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';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\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  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\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={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                          <ArrowUp />\n                        </IconButton>\n                        <IconButton\n                          onClick={() => changeVariableOrder(idx, 'down')}\n                          disabled={idx === variableDefinitions.length - 1}\n                        >\n                          <ArrowDown />\n                        </IconButton>\n\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","ArrowUp","ArrowDown","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","length","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","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"}