@perses-dev/dashboards 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js +6 -12
  2. package/dist/cjs/components/GridLayout/GridLayout.js +13 -2
  3. package/dist/cjs/components/GridLayout/GridTitle.js +3 -5
  4. package/dist/cjs/components/Panel/PanelHeader.js +1 -1
  5. package/dist/cjs/components/PanelDrawer/PanelDrawer.js +1 -3
  6. package/dist/cjs/components/Variables/Variable.js +2 -46
  7. package/dist/cjs/components/Variables/VariableEditor.js +142 -130
  8. package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +303 -167
  9. package/dist/cjs/components/Variables/VariableList.js +10 -8
  10. package/dist/cjs/components/Variables/variable-model.js +74 -0
  11. package/dist/components/DashboardToolbar/DashboardToolbar.js +6 -12
  12. package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
  13. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
  14. package/dist/components/GridLayout/GridLayout.js +13 -2
  15. package/dist/components/GridLayout/GridLayout.js.map +1 -1
  16. package/dist/components/GridLayout/GridTitle.js +3 -5
  17. package/dist/components/GridLayout/GridTitle.js.map +1 -1
  18. package/dist/components/Panel/PanelHeader.js +1 -1
  19. package/dist/components/Panel/PanelHeader.js.map +1 -1
  20. package/dist/components/PanelDrawer/PanelDrawer.js +1 -3
  21. package/dist/components/PanelDrawer/PanelDrawer.js.map +1 -1
  22. package/dist/components/Variables/Variable.d.ts.map +1 -1
  23. package/dist/components/Variables/Variable.js +3 -47
  24. package/dist/components/Variables/Variable.js.map +1 -1
  25. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  26. package/dist/components/Variables/VariableEditor.js +142 -130
  27. package/dist/components/Variables/VariableEditor.js.map +1 -1
  28. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
  29. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +300 -169
  30. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
  31. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -1
  32. package/dist/components/Variables/VariableList.d.ts.map +1 -1
  33. package/dist/components/Variables/VariableList.js +10 -8
  34. package/dist/components/Variables/VariableList.js.map +1 -1
  35. package/dist/components/Variables/variable-model.d.ts +8 -0
  36. package/dist/components/Variables/variable-model.d.ts.map +1 -0
  37. package/dist/components/Variables/variable-model.js +64 -0
  38. package/dist/components/Variables/variable-model.js.map +1 -0
  39. package/package.json +4 -4
package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js CHANGED
@@ -61,9 +61,7 @@ const DashboardToolbar = (props)=>{
61
61
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
62
62
  direction: "row",
63
63
  spacing: 1,
64
- sx: {
65
- marginLeft: 'auto'
66
- },
64
+ marginLeft: "auto",
67
65
  children: [
68
66
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
69
67
  variant: "contained",
@@ -95,11 +93,9 @@ const DashboardToolbar = (props)=>{
95
93
  })
96
94
  }),
97
95
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
98
- direction: 'row',
96
+ direction: "row",
99
97
  spacing: 1,
100
- sx: {
101
- marginLeft: 'auto'
102
- },
98
+ marginLeft: "auto",
103
99
  children: [
104
100
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
105
101
  startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
@@ -118,7 +114,7 @@ const DashboardToolbar = (props)=>{
118
114
  })
119
115
  ]
120
116
  }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
121
- spacing: 2,
117
+ spacing: 1,
122
118
  padding: 2,
123
119
  children: [
124
120
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
@@ -130,10 +126,8 @@ const DashboardToolbar = (props)=>{
130
126
  dashboardTitle,
131
127
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
132
128
  direction: "row",
133
- spacing: 2,
134
- sx: {
135
- marginLeft: 'auto'
136
- },
129
+ spacing: 1,
130
+ marginLeft: "auto",
137
131
  children: [
138
132
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
139
133
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
package/dist/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -28,6 +28,7 @@ const _gridTitle = require("./GridTitle");
28
28
  const _gridItemContent = require("./GridItemContent");
29
29
  const _gridContainer = require("./GridContainer");
30
30
  const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
31
+ const SMALL_LAYOUT_BREAKPOINT = 'sm';
31
32
  function GridLayout(props) {
32
33
  const { panelGroupId /*...others */ } = props;
33
34
  const theme = (0, _material.useTheme)();
@@ -36,6 +37,16 @@ function GridLayout(props) {
36
37
  var ref;
37
38
  const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
38
39
  const { isEditMode } = (0, _context.useEditMode)();
40
+ const handleLayoutChange = (currentLayout, allLayouts)=>{
41
+ // Using the value from `allLayouts` instead of `currentLayout` because of
42
+ // a bug in react-layout-grid where `currentLayout` does not adjust properly
43
+ // when going to a smaller breakpoint and then back to a larger breakpoint.
44
+ // https://github.com/react-grid-layout/react-grid-layout/issues/1663
45
+ const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
46
+ if (smallLayout) {
47
+ updatePanelGroupLayouts(smallLayout);
48
+ }
49
+ };
39
50
  return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
40
51
  children: [
41
52
  groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
@@ -72,9 +83,9 @@ function GridLayout(props) {
72
83
  10
73
84
  ],
74
85
  layouts: {
75
- sm: groupDefinition.itemLayouts
86
+ [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
76
87
  },
77
- onLayoutChange: updatePanelGroupLayouts,
88
+ onLayoutChange: handleLayoutChange,
78
89
  children: groupDefinition.itemLayouts.map(({ i })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
79
90
  children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
80
91
  FallbackComponent: _components.ErrorAlert,
package/dist/cjs/components/GridLayout/GridTitle.js CHANGED
@@ -20,8 +20,8 @@ Object.defineProperty(exports, "GridTitle", {
20
20
  });
21
21
  const _jsxRuntime = require("react/jsx-runtime");
22
22
  const _material = require("@mui/material");
23
- const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
24
23
  const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
24
+ const _chevronRight = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronRight"));
25
25
  const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
26
26
  const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
27
27
  const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
@@ -57,14 +57,12 @@ function GridTitle(props) {
57
57
  children: [
58
58
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
59
59
  onClick: collapse.onToggleOpen,
60
- children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
60
+ children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
61
61
  }),
62
62
  text,
63
63
  isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
64
64
  direction: "row",
65
- sx: {
66
- marginLeft: 'auto'
67
- },
65
+ marginLeft: "auto",
68
66
  children: [
69
67
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
70
68
  "aria-label": `add panel to group ${title}`,
package/dist/cjs/components/Panel/PanelHeader.js CHANGED
@@ -38,8 +38,8 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
38
38
  // If there are edit handlers, always just show the edit buttons
39
39
  action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
40
40
  direction: "row",
41
- alignItems: "center",
42
41
  spacing: 0.5,
42
+ alignItems: "center",
43
43
  children: [
44
44
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
45
45
  "aria-label": `edit panel ${title}`,
package/dist/cjs/components/PanelDrawer/PanelDrawer.js CHANGED
@@ -70,9 +70,7 @@ const PanelDrawer = ()=>{
70
70
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
71
71
  direction: "row",
72
72
  spacing: 1,
73
- sx: {
74
- marginLeft: 'auto'
75
- },
73
+ marginLeft: "auto",
76
74
  children: [
77
75
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
78
76
  type: "submit",
package/dist/cjs/components/Variables/Variable.js CHANGED
@@ -22,8 +22,8 @@ const _jsxRuntime = require("react/jsx-runtime");
22
22
  const _react = require("react");
23
23
  const _material = require("@mui/material");
24
24
  const _pluginSystem = require("@perses-dev/plugin-system");
25
- const _reactQuery = require("@tanstack/react-query");
26
25
  const _context = require("../../context");
26
+ const _variableModel = require("./variable-model");
27
27
  function TemplateVariable({ name }) {
28
28
  var ref;
29
29
  const ctx = (0, _context.useTemplateVariable)(name);
@@ -45,60 +45,16 @@ function TemplateVariable({ name }) {
45
45
  ]
46
46
  });
47
47
  }
48
- /**
49
- * Returns a serialized string of the current state of variable values.
50
- */ function getVariableValuesKey(v) {
51
- return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
52
- }
53
48
  function ListVariable({ name }) {
54
49
  var ref, ref1, ref2, ref3;
55
50
  const ctx = (0, _context.useTemplateVariable)(name);
56
51
  const definition = ctx.definition;
57
- const { data: variablePlugin } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
52
+ const variablesOptionsQuery = (0, _variableModel.useListVariablePluginValues)(definition);
58
53
  const { setVariableValue , setVariableLoading , setVariableOptions } = (0, _context.useTemplateVariableActions)();
59
- const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
60
- const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
61
- const { timeRange } = (0, _pluginSystem.useTimeRange)();
62
- const variablePluginCtx = {
63
- timeRange,
64
- datasourceStore,
65
- variables: allVariables
66
- };
67
- const spec = definition.spec.plugin.spec;
68
- let dependsOnVariables;
69
- if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
70
- const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
71
- dependsOnVariables = dependencies.variables;
72
- }
73
- const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
74
54
  const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
75
55
  const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
76
56
  var ref4;
77
57
  const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
78
- let waitToLoad = false;
79
- if (dependsOnVariables) {
80
- waitToLoad = dependsOnVariables.some((v)=>{
81
- var ref;
82
- return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
83
- });
84
- }
85
- const variablesValueKey = getVariableValuesKey(variables);
86
- const variablesOptionsQuery = (0, _reactQuery.useQuery)([
87
- name,
88
- definition,
89
- variablesValueKey,
90
- timeRange
91
- ], async ()=>{
92
- const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
93
- datasourceStore,
94
- variables,
95
- timeRange
96
- }));
97
- var ref;
98
- return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
99
- }, {
100
- enabled: !!variablePlugin || waitToLoad
101
- });
102
58
  (0, _react.useEffect)(()=>{
103
59
  setVariableLoading(name, variablesOptionsQuery.isFetching);
104
60
  if (variablesOptionsQuery.data) {
package/dist/cjs/components/Variables/VariableEditor.js CHANGED
@@ -103,154 +103,166 @@ function VariableEditor(props) {
103
103
  }
104
104
  });
105
105
  };
106
- return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
107
- p: 4,
106
+ return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
108
107
  children: [
109
- currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
110
- children: [
111
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
112
- variant: "h3",
113
- mb: 2,
114
- children: "Edit Variable"
115
- }),
116
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
117
- initialVariableDefinition: currentEditingVariableDefinition,
118
- onChange: (definition)=>{
119
- setVariableDefinitions((draft)=>{
120
- draft[variableEditIdx] = definition;
121
- setVariableEditIdx(null);
122
- });
123
- },
124
- onCancel: ()=>setVariableEditIdx(null)
125
- })
126
- ]
108
+ currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
109
+ initialVariableDefinition: currentEditingVariableDefinition,
110
+ onChange: (definition)=>{
111
+ setVariableDefinitions((draft)=>{
112
+ draft[variableEditIdx] = definition;
113
+ setVariableEditIdx(null);
114
+ });
115
+ },
116
+ onCancel: ()=>setVariableEditIdx(null)
127
117
  }),
128
118
  !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
129
119
  children: [
130
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
131
- direction: "row",
132
- spacing: 1,
133
- justifyContent: "end",
120
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
121
+ sx: {
122
+ display: 'flex',
123
+ alignItems: 'center',
124
+ padding: (theme)=>theme.spacing(1, 2),
125
+ borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
126
+ },
134
127
  children: [
135
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
136
- disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
137
- variant: "contained",
138
- onClick: ()=>{
139
- props.onChange(variableDefinitions);
140
- },
141
- children: "Apply"
128
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
129
+ variant: "h2",
130
+ children: "Template Variables"
142
131
  }),
143
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
144
- variant: "outlined",
145
- onClick: ()=>{
146
- props.onCancel();
147
- },
148
- children: "Cancel"
132
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
133
+ direction: "row",
134
+ spacing: 1,
135
+ marginLeft: "auto",
136
+ children: [
137
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
138
+ disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
139
+ variant: "contained",
140
+ onClick: ()=>{
141
+ props.onChange(variableDefinitions);
142
+ },
143
+ children: "Apply"
144
+ }),
145
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
146
+ variant: "outlined",
147
+ onClick: ()=>{
148
+ props.onCancel();
149
+ },
150
+ children: "Cancel"
151
+ })
152
+ ]
149
153
  })
150
154
  ]
151
155
  }),
152
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
153
- variant: "h3",
154
- mb: 2,
155
- children: "Variable List"
156
- }),
157
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
158
- spacing: 2,
156
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
157
+ padding: 2,
158
+ sx: {
159
+ overflowY: 'scroll'
160
+ },
159
161
  children: [
160
- !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
161
- severity: "error",
162
- children: error
163
- }, error)),
164
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
165
- component: _material.Paper,
166
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
167
- sx: {
168
- minWidth: 650
169
- },
170
- "aria-label": "simple table",
171
- children: [
172
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
173
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
174
- children: [
175
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
176
- children: "Visibility"
177
- }),
178
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
179
- children: "Variable Name"
180
- }),
181
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
182
- children: "Variable Type"
183
- }),
184
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
185
- align: "right",
186
- children: "Action"
187
- })
188
- ]
189
- })
190
- }),
191
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
192
- children: variableDefinitions.map((v, idx)=>{
193
- var ref;
194
- /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
195
- children: [
196
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
197
- component: "th",
198
- scope: "row",
199
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
200
- checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
201
- onChange: (e)=>{
202
- toggleVariableVisibility(idx, e.target.checked);
203
- }
162
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
163
+ variant: "h3",
164
+ mb: 2,
165
+ children: "Variable List"
166
+ }),
167
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
168
+ spacing: 2,
169
+ children: [
170
+ !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
171
+ severity: "error",
172
+ children: error
173
+ }, error)),
174
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
175
+ component: _material.Paper,
176
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
177
+ sx: {
178
+ minWidth: 650
179
+ },
180
+ "aria-label": "simple table",
181
+ children: [
182
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
183
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
184
+ children: [
185
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
186
+ children: "Visibility"
187
+ }),
188
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
189
+ children: "Variable Name"
190
+ }),
191
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
192
+ children: "Variable Type"
193
+ }),
194
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
195
+ align: "right",
196
+ children: "Action"
204
197
  })
205
- }),
206
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
207
- component: "th",
208
- scope: "row",
209
- sx: {
210
- fontWeight: 'bold'
211
- },
212
- children: v.spec.name
213
- }),
214
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
215
- children: v.kind
216
- }),
217
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
218
- align: "right",
198
+ ]
199
+ })
200
+ }),
201
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
202
+ children: variableDefinitions.map((v, idx)=>{
203
+ var ref;
204
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
219
205
  children: [
220
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
221
- onClick: ()=>changeVariableOrder(idx, 'up'),
222
- disabled: idx === 0,
223
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
206
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
207
+ component: "th",
208
+ scope: "row",
209
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
210
+ checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
211
+ onChange: (e)=>{
212
+ toggleVariableVisibility(idx, e.target.checked);
213
+ }
214
+ })
224
215
  }),
225
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
226
- onClick: ()=>changeVariableOrder(idx, 'down'),
227
- disabled: idx === variableDefinitions.length - 1,
228
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
216
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
217
+ component: "th",
218
+ scope: "row",
219
+ sx: {
220
+ fontWeight: 'bold'
221
+ },
222
+ children: v.spec.name
229
223
  }),
230
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
231
- onClick: ()=>setVariableEditIdx(idx),
232
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
224
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
225
+ children: v.kind
233
226
  }),
234
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
235
- onClick: ()=>removeVariable(idx),
236
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
227
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
228
+ align: "right",
229
+ children: [
230
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
231
+ onClick: ()=>changeVariableOrder(idx, 'up'),
232
+ disabled: idx === 0,
233
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
234
+ }),
235
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
236
+ onClick: ()=>changeVariableOrder(idx, 'down'),
237
+ disabled: idx === variableDefinitions.length - 1,
238
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
239
+ }),
240
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
241
+ onClick: ()=>setVariableEditIdx(idx),
242
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
243
+ }),
244
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
245
+ onClick: ()=>removeVariable(idx),
246
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
247
+ })
248
+ ]
237
249
  })
238
250
  ]
239
- })
240
- ]
241
- }, v.spec.name);
242
- })
251
+ }, v.spec.name);
252
+ })
253
+ })
254
+ ]
243
255
  })
244
- ]
245
- })
246
- }),
247
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
248
- display: "flex",
249
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
250
- onClick: addVariable,
251
- variant: "contained",
252
- children: "Add New Variable"
253
- })
256
+ }),
257
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
258
+ display: "flex",
259
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
260
+ onClick: addVariable,
261
+ variant: "contained",
262
+ children: "Add New Variable"
263
+ })
264
+ })
265
+ ]
254
266
  })
255
267
  ]
256
268
  })