@perses-dev/dashboards 0.8.1 → 0.10.0

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

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -16,36 +10,57 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const core_1 = require("@perses-dev/core");
-const react_1 = require("@testing-library/react");
-const test_1 = require("../../test");
-const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
-const context_1 = require("../../context");
-const TimeRangeControls_1 = require("./TimeRangeControls");
-describe('TimeRangeControls', () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _core = require("@perses-dev/core");
+const _react = require("@testing-library/react");
+const _test = require("../../test");
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
+const _context = require("../../context");
+const _timeRangeControls = require("./TimeRangeControls");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('TimeRangeControls', ()=>{
     let initialState;
-    beforeEach(() => {
+    beforeEach(()=>{
         initialState = {
-            dashboardSpec: testDashboard_1.default.spec,
+            dashboardSpec: _testDashboard.default.spec
         };
     });
-    const renderTimeRangeControls = () => {
+    const renderTimeRangeControls = ()=>{
         const queryString = new URLSearchParams();
-        const defaultTimeRange = (0, core_1.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(context_1.QueryStringProvider, { queryString: queryString, children: (0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(TimeRangeControls_1.TimeRangeControls, {}) }) }) }));
+        const defaultTimeRange = (0, _core.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
+            queryString: queryString,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+                initialState: initialState,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                    initialTimeRange: defaultTimeRange,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                })
+            })
+        }));
     };
-    it('should render correct initial relative time shortcut', async () => {
+    it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(react_1.screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(_react.screen.getByText('Last 1 day')).toBeInTheDocument();
     });
-    it('should be able to select the first option', () => {
+    it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
-        const dateButton = react_1.screen.getByRole('button');
-        user_event_1.default.click(dateButton);
-        const firstOption = react_1.screen.getByRole('option', { name: 'Last 5 minutes' });
-        user_event_1.default.click(firstOption);
+        const dateButton = _react.screen.getByRole('button');
+        _userEvent.default.click(dateButton);
+        const firstOption = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstOption);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
-    // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
+// TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });

package/dist/cjs/components/TimeRangeControls/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,19 +10,19 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TimeRangeControls"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./TimeRangeControls"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemplateVariable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -14,44 +10,207 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const mdi_material_ui_1 = require("mdi-material-ui");
-const context_1 = require("../../context");
-function TemplateVariable({ name }) {
-    var _a;
-    const ctx = (0, context_1.useTemplateVariable)(name);
-    const kind = (_a = ctx.definition) === null || _a === void 0 ? void 0 : _a.kind;
-    switch (kind) {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TemplateVariable", {
+    enumerable: true,
+    get: ()=>TemplateVariable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _reactQuery = require("@tanstack/react-query");
+const _context = require("../../context");
+function TemplateVariable({ name  }) {
+    var ref;
+    const ctx = (0, _context.useTemplateVariable)(name);
+    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    switch(kind){
         case 'TextVariable':
-            return (0, jsx_runtime_1.jsx)(TextVariable, { name: name });
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
+                name: name
+            });
         case 'ListVariable':
-            return (0, jsx_runtime_1.jsx)(ListVariable, { name: name });
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
+                name: name
+            });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { children: ["Unsupported Variable Kind: $", kind] });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+        children: [
+            "Unsupported Variable Kind: $",
+            kind
+        ]
+    });
+}
+/**
+ * Returns a serialized string of the current state of variable values.
+ */ function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
-exports.TemplateVariable = TemplateVariable;
-function ListVariable({ name }) {
-    var _a, _b, _c, _d;
-    const ctx = (0, context_1.useTemplateVariable)(name);
+function ListVariable({ name  }) {
+    var ref, ref1, ref2, ref3;
+    const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
-    const { setVariableValue, loadTemplateVariable } = (0, context_1.useTemplateVariableActions)();
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.options.allowMultiple) === true;
-    (0, react_1.useEffect)(() => {
-        loadTemplateVariable(name);
-    }, [name, loadTemplateVariable]);
-    let value = (_a = ctx.state) === null || _a === void 0 ? void 0 : _a.value;
+    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
+    const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
+    const spec = definition.spec.plugin.spec;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        dependsOnVariables = variablePlugin.dependsOn(spec);
+    }
+    const variables = (0, _pluginSystem.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)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
+        name,
+        definition,
+        variablesValueKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables
+        }));
+        var ref;
+        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+    (0, _react.useEffect)(()=>{
+        setVariableLoading(name, variablesOptionsQuery.isFetching);
+        if (variablesOptionsQuery.data) {
+            setVariableOptions(name, variablesOptionsQuery.data);
+        }
+    }, [
+        variablesOptionsQuery,
+        name,
+        setVariableLoading,
+        setVariableOptions
+    ]);
+    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 = [];
+        value = typeof value === 'string' ? [
+            value
+        ] : [];
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: 'flex', children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: name, children: name }), (0, jsx_runtime_1.jsx)(material_1.Select, { id: name, label: name, value: value, onChange: (e) => {
-                            setVariableValue(name, e.target.value);
-                        }, multiple: allowMultiple, children: (_c = (_b = ctx.state) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, option.value))) }), ((_d = ctx.state) === null || _d === void 0 ? void 0 : _d.loading) && (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => loadTemplateVariable(name), children: (0, jsx_runtime_1.jsx)(mdi_material_ui_1.Reload, {}) })] }));
+    const finalOptions = (0, _react.useMemo)(()=>{
+        let computedOptions = options ? [
+            ...options
+        ] : [];
+        // Add the all value if it's allowed
+        if (allowAllValue) {
+            computedOptions = [
+                {
+                    value: _pluginSystem.DEFAULT_ALL_VALUE,
+                    label: 'All'
+                },
+                ...computedOptions
+            ];
+        }
+        return computedOptions;
+    }, [
+        options,
+        allowAllValue
+    ]);
+    (0, _react.useEffect)(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
+        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+            if (allowMultiple) {
+                return value.includes(v.value);
+            }
+            return value === v.value;
+        }));
+        // If there is no value but there are options, set the value to the first option.
+        if (!value && firstOption) {
+            setVariableValue(name, firstOption.value);
+        }
+        // If there is a value but it's not in the options, select the first value or set to null
+        if (value && !valueIsInOptions && !definition.spec.default_value) {
+            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
+        }
+    }, [
+        finalOptions,
+        setVariableValue,
+        value,
+        name,
+        allowMultiple
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        display: 'flex',
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    id: name,
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                    sx: {
+                        minWidth: 100,
+                        maxWidth: 250
+                    },
+                    id: name,
+                    label: name,
+                    value: value !== null && value !== void 0 ? value : '',
+                    onChange: (e)=>{
+                        // Must be selected
+                        if (e.target.value === null || e.target.value.length === 0) {
+                            if (allowAllValue) {
+                                setVariableValue(name, _pluginSystem.DEFAULT_ALL_VALUE);
+                            }
+                            return;
+                        }
+                        setVariableValue(name, e.target.value);
+                    },
+                    multiple: allowMultiple,
+                    children: [
+                        loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "loading",
+                            disabled: true,
+                            children: "Loading"
+                        }),
+                        finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    ]
+                }),
+                loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.LinearProgress, {})
+            ]
+        })
+    });
 }
-function TextVariable({ name }) {
-    const { state } = (0, context_1.useTemplateVariable)(name);
-    const s = (0, context_1.useTemplateVariableStore)();
-    const setVariableValue = s.setVariableValue;
-    const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ref: ref, defaultValue: state === null || state === void 0 ? void 0 : state.value, onBlur: (e) => setVariableValue(name, e.target.value), placeholder: name, label: name }));
+function TextVariable({ name  }) {
+    const { state  } = (0, _context.useTemplateVariable)(name);
+    var ref;
+    const [tempValue, setTempValue] = (0, _react.useState)((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
+    (0, _react.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__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
+        placeholder: name,
+        label: name
+    });
 }

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

@@ -0,0 +1,207 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VariableEditor", {
+    enumerable: true,
+    get: ()=>VariableEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _useImmer = require("use-immer");
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+const _variableEditorForm = require("./VariableEditorForm");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function VariableEditor(props) {
+    const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
+    const [variableEditIdx, setVariableEditIdx] = (0, _react.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__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        p: 4,
+        children: [
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Edit Variable"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        onChange: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onCancel: ()=>setVariableEditIdx(null)
+                    })
+                ]
+            }),
+            !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        justifyContent: "end",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>{
+                                    props.onCancel();
+                                },
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    props.onChange(variableDefinitions);
+                                },
+                                children: "Apply Changes"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Variable List"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                                component: _material.Paper,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                                    sx: {
+                                        minWidth: 650
+                                    },
+                                    "aria-label": "simple table",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Visibility"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Name"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Type"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        align: "right",
+                                                        children: "Action"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                            children: variableDefinitions.map((v, idx)=>{
+                                                var ref;
+                                                /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                                checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                onChange: (e)=>{
+                                                                    toggleVariableVisibility(idx, e.target.checked);
+                                                                }
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            sx: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: v.spec.name
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            children: v.kind
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
+                                                            align: "right",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>setVariableEditIdx(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>removeVariable(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }, v.spec.name);
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                display: "flex",
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    onClick: addVariable,
+                                    variant: "contained",
+                                    children: "Add New Variable"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}