@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

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 (53) hide show
  1. package/dist/cjs/components/GridLayout/GridItemContent.js +2 -1
  2. package/dist/cjs/components/Panel/Panel.js +5 -2
  3. package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +3 -1
  4. package/dist/cjs/components/Variables/EditVariablesButton.js +2 -0
  5. package/dist/cjs/components/Variables/TemplateVariable.js +20 -16
  6. package/dist/cjs/components/Variables/VariableEditor.js +255 -94
  7. package/dist/cjs/components/Variables/VariableList.js +38 -18
  8. package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js +71 -24
  9. package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js +55 -5
  10. package/dist/cjs/context/TemplateVariableProvider/utils.js +39 -7
  11. package/dist/cjs/views/ViewDashboard/ViewDashboard.js +4 -3
  12. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  13. package/dist/components/GridLayout/GridItemContent.js +2 -1
  14. package/dist/components/GridLayout/GridItemContent.js.map +1 -1
  15. package/dist/components/Panel/Panel.d.ts +13 -1
  16. package/dist/components/Panel/Panel.d.ts.map +1 -1
  17. package/dist/components/Panel/Panel.js +5 -2
  18. package/dist/components/Panel/Panel.js.map +1 -1
  19. package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map +1 -1
  20. package/dist/components/SaveDashboardButton/SaveDashboardButton.js +3 -1
  21. package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -1
  22. package/dist/components/Variables/EditVariablesButton.d.ts.map +1 -1
  23. package/dist/components/Variables/EditVariablesButton.js +3 -1
  24. package/dist/components/Variables/EditVariablesButton.js.map +1 -1
  25. package/dist/components/Variables/TemplateVariable.d.ts +2 -1
  26. package/dist/components/Variables/TemplateVariable.d.ts.map +1 -1
  27. package/dist/components/Variables/TemplateVariable.js +20 -16
  28. package/dist/components/Variables/TemplateVariable.js.map +1 -1
  29. package/dist/components/Variables/VariableEditor.d.ts +7 -0
  30. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  31. package/dist/components/Variables/VariableEditor.js +247 -92
  32. package/dist/components/Variables/VariableEditor.js.map +1 -1
  33. package/dist/components/Variables/VariableList.d.ts +5 -0
  34. package/dist/components/Variables/VariableList.d.ts.map +1 -1
  35. package/dist/components/Variables/VariableList.js +31 -17
  36. package/dist/components/Variables/VariableList.js.map +1 -1
  37. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts +39 -10
  38. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -1
  39. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js +76 -27
  40. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -1
  41. package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts +9 -2
  42. package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts.map +1 -1
  43. package/dist/context/TemplateVariableProvider/hydrationUtils.js +60 -5
  44. package/dist/context/TemplateVariableProvider/hydrationUtils.js.map +1 -1
  45. package/dist/context/TemplateVariableProvider/utils.d.ts +27 -2
  46. package/dist/context/TemplateVariableProvider/utils.d.ts.map +1 -1
  47. package/dist/context/TemplateVariableProvider/utils.js +46 -4
  48. package/dist/context/TemplateVariableProvider/utils.js.map +1 -1
  49. package/dist/views/ViewDashboard/ViewDashboard.d.ts +2 -1
  50. package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
  51. package/dist/views/ViewDashboard/ViewDashboard.js +4 -3
  52. package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
  53. package/package.json +6 -6
package/dist/cjs/components/GridLayout/GridItemContent.js CHANGED
@@ -55,7 +55,8 @@ function GridItemContent(props) {
55
55
  children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
56
56
  definition: panelDefinition,
57
57
  editHandlers: editHandlers,
58
- panelOptions: props.panelOptions
58
+ panelOptions: props.panelOptions,
59
+ panelGroupItemId: panelGroupItemId
59
60
  })
60
61
  });
61
62
  }
package/dist/cjs/components/Panel/Panel.js CHANGED
@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) {
33
33
  }
34
34
  const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
35
35
  var ref;
36
- const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , ...others } = props;
36
+ const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
37
37
  // Make sure we have an ID we can use for aria attributes
38
38
  const generatedPanelId = (0, _components.useId)('Panel');
39
39
  const headerId = `${generatedPanelId}-header`;
@@ -81,7 +81,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
81
81
  ...others,
82
82
  children: [
83
83
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
84
- extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions),
84
+ extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions, {
85
+ panelDefinition: definition,
86
+ panelGroupItemId
87
+ }),
85
88
  id: headerId,
86
89
  title: definition.spec.display.name,
87
90
  description: definition.spec.display.description,
package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js CHANGED
@@ -34,7 +34,9 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained' })=>{
34
34
  const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
35
35
  const onSaveButtonClick = ()=>{
36
36
  const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
37
- // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
37
+ // Save dashboard
38
+ // - if active timeRange from plugin-system is relative and different from currently saved
39
+ // - or if the saved variables are different from currently saved
38
40
  if (isSavedDurationModified || isSavedVariableModified) {
39
41
  openSaveChangesConfirmationDialog({
40
42
  onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
package/dist/cjs/components/Variables/EditVariablesButton.js CHANGED
@@ -34,6 +34,7 @@ function _interopRequireDefault(obj) {
34
34
  function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth }) {
35
35
  const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
36
36
  const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
37
+ const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
37
38
  const { setVariableDefinitions } = (0, _context.useTemplateVariableActions)();
38
39
  const openVariableEditor = ()=>{
39
40
  setIsVariableEditorOpen(true);
@@ -70,6 +71,7 @@ function EditVariablesButton({ variant ='text' , label ='Variables' , color ='pr
70
71
  "data-testid": "variable-editor",
71
72
  children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
72
73
  variableDefinitions: variableDefinitions,
74
+ externalVariableDefinitions: externalVariableDefinitions,
73
75
  onCancel: closeVariableEditor,
74
76
  onChange: (variables)=>{
75
77
  setVariableDefinitions(variables);
package/dist/cjs/components/Variables/TemplateVariable.js CHANGED
@@ -24,18 +24,20 @@ const _material = require("@mui/material");
24
24
  const _core = require("@perses-dev/core");
25
25
  const _pluginSystem = require("@perses-dev/plugin-system");
26
26
  const _context = require("../../context");
27
- function TemplateVariable({ name }) {
27
+ function TemplateVariable({ name , source }) {
28
28
  var ref;
29
- const ctx = (0, _context.useTemplateVariable)(name);
29
+ const ctx = (0, _context.useTemplateVariable)(name, source);
30
30
  const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
31
31
  switch(kind){
32
32
  case 'TextVariable':
33
33
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
34
- name: name
34
+ name: name,
35
+ source: source
35
36
  });
36
37
  case 'ListVariable':
37
38
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
38
- name: name
39
+ name: name,
40
+ source: source
39
41
  });
40
42
  }
41
43
  return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
@@ -45,9 +47,9 @@ function TemplateVariable({ name }) {
45
47
  ]
46
48
  });
47
49
  }
48
- function ListVariable({ name }) {
50
+ function ListVariable({ name , source }) {
49
51
  var ref, ref1, ref2, ref3;
50
- const ctx = (0, _context.useTemplateVariable)(name);
52
+ const ctx = (0, _context.useTemplateVariable)(name, source);
51
53
  const definition = ctx.definition;
52
54
  const variablesOptionsQuery = (0, _pluginSystem.useListVariablePluginValues)(definition);
53
55
  const { setVariableValue , setVariableLoading , setVariableOptions } = (0, _context.useTemplateVariableActions)();
@@ -56,15 +58,16 @@ function ListVariable({ name }) {
56
58
  var ref4;
57
59
  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;
58
60
  (0, _react.useEffect)(()=>{
59
- setVariableLoading(name, variablesOptionsQuery.isFetching);
61
+ setVariableLoading(name, variablesOptionsQuery.isFetching, source);
60
62
  if (variablesOptionsQuery.data) {
61
- setVariableOptions(name, variablesOptionsQuery.data);
63
+ setVariableOptions(name, variablesOptionsQuery.data, source);
62
64
  }
63
65
  }, [
64
66
  variablesOptionsQuery,
65
67
  name,
66
68
  setVariableLoading,
67
- setVariableOptions
69
+ setVariableOptions,
70
+ source
68
71
  ]);
69
72
  let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
70
73
  const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
@@ -112,14 +115,15 @@ function ListVariable({ name }) {
112
115
  const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
113
116
  // If there is no value but there are options, set the value to the first option.
114
117
  if (!value && firstOption) {
115
- setVariableValue(name, firstOption.value);
118
+ setVariableValue(name, firstOption.value, source);
116
119
  }
117
120
  }, [
118
121
  finalOptions,
119
122
  setVariableValue,
120
123
  value,
121
124
  name,
122
- allowMultiple
125
+ allowMultiple,
126
+ source
123
127
  ]);
124
128
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
125
129
  display: 'flex',
@@ -142,11 +146,11 @@ function ListVariable({ name }) {
142
146
  // Must be selected
143
147
  if (e.target.value === null || e.target.value.length === 0) {
144
148
  if (allowAllValue) {
145
- setVariableValue(name, _core.DEFAULT_ALL_VALUE);
149
+ setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
146
150
  }
147
151
  return;
148
152
  }
149
- setVariableValue(name, e.target.value);
153
+ setVariableValue(name, e.target.value, source);
150
154
  },
151
155
  multiple: allowMultiple,
152
156
  children: [
@@ -171,9 +175,9 @@ function ListVariable({ name }) {
171
175
  })
172
176
  });
173
177
  }
174
- function TextVariable({ name }) {
178
+ function TextVariable({ name , source }) {
175
179
  var ref;
176
- const { state , definition } = (0, _context.useTemplateVariable)(name);
180
+ const { state , definition } = (0, _context.useTemplateVariable)(name, source);
177
181
  var ref1;
178
182
  const [tempValue, setTempValue] = (0, _react.useState)((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
179
183
  const { setVariableValue } = (0, _context.useTemplateVariableActions)();
@@ -187,7 +191,7 @@ function TextVariable({ name }) {
187
191
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
188
192
  value: tempValue,
189
193
  onChange: (e)=>setTempValue(e.target.value),
190
- onBlur: ()=>setVariableValue(name, tempValue),
194
+ onBlur: ()=>setVariableValue(name, tempValue, source),
191
195
  placeholder: name,
192
196
  label: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : name
193
197
  });
package/dist/cjs/components/Variables/VariableEditor.js CHANGED
@@ -14,9 +14,15 @@
14
14
  Object.defineProperty(exports, "__esModule", {
15
15
  value: true
16
16
  });
17
- Object.defineProperty(exports, "VariableEditor", {
18
- enumerable: true,
19
- get: ()=>VariableEditor
17
+ function _export(target, all) {
18
+ for(var name in all)Object.defineProperty(target, name, {
19
+ enumerable: true,
20
+ get: all[name]
21
+ });
22
+ }
23
+ _export(exports, {
24
+ VariableEditor: ()=>VariableEditor,
25
+ VariableName: ()=>VariableName
20
26
  });
21
27
  const _jsxRuntime = require("react/jsx-runtime");
22
28
  const _react = require("react");
@@ -27,8 +33,10 @@ const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pe
27
33
  const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
28
34
  const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
29
35
  const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
36
+ const _contentDuplicate = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentDuplicate"));
30
37
  const _pluginSystem = require("@perses-dev/plugin-system");
31
38
  const _context = require("../../context");
39
+ const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
32
40
  function _interopRequireDefault(obj) {
33
41
  return obj && obj.__esModule ? obj : {
34
42
  default: obj
@@ -54,9 +62,18 @@ function VariableEditor(props) {
54
62
  const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
55
63
  const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
56
64
  const [variableFormAction, setVariableFormAction] = (0, _react.useState)('update');
65
+ const externalVariableDefinitions = props.externalVariableDefinitions;
57
66
  const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
58
67
  variableDefinitions
59
68
  ]);
69
+ const [variableState] = (0, _react.useMemo)(()=>{
70
+ return [
71
+ (0, _hydrationUtils.hydrateTemplateVariableStates)(variableDefinitions, {}, externalVariableDefinitions)
72
+ ];
73
+ }, [
74
+ externalVariableDefinitions,
75
+ variableDefinitions
76
+ ]);
60
77
  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
61
78
  const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
62
79
  const handleCancel = ()=>{
@@ -133,7 +150,12 @@ function VariableEditor(props) {
133
150
  }
134
151
  });
135
152
  };
136
- var ref;
153
+ const overrideVariable = (v)=>{
154
+ setVariableDefinitions((draft)=>{
155
+ draft.push(v);
156
+ });
157
+ };
158
+ var ref, ref1;
137
159
  return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
138
160
  children: [
139
161
  currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.VariableEditForm, {
@@ -164,7 +186,7 @@ function VariableEditor(props) {
164
186
  children: [
165
187
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
166
188
  variant: "h2",
167
- children: "Variables"
189
+ children: "Dashboard Variables"
168
190
  }),
169
191
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
170
192
  direction: "row",
@@ -189,113 +211,226 @@ function VariableEditor(props) {
189
211
  })
190
212
  ]
191
213
  }),
192
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
214
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
193
215
  padding: 2,
194
216
  sx: {
195
217
  overflowY: 'scroll'
196
218
  },
197
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
198
- spacing: 2,
199
- children: [
200
- !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
201
- severity: "error",
202
- children: error
203
- }, error)),
204
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
205
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
206
- sx: {
207
- minWidth: 650
208
- },
209
- "aria-label": "table of variables",
210
- children: [
211
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
212
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
213
- children: [
214
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
215
- children: "Visibility"
216
- }),
217
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
218
- children: "Name"
219
- }),
220
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
221
- children: "Type"
222
- }),
223
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
224
- align: "right"
225
- })
226
- ]
227
- })
228
- }),
229
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
230
- children: variableDefinitions.map((v, idx)=>{
231
- var ref1;
232
- /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
219
+ children: [
220
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
221
+ spacing: 2,
222
+ children: [
223
+ !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
224
+ severity: "error",
225
+ children: error
226
+ }, error)),
227
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
228
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
229
+ sx: {
230
+ minWidth: 650
231
+ },
232
+ "aria-label": "table of variables",
233
+ children: [
234
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
235
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
233
236
  children: [
234
237
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
235
- component: "th",
236
- scope: "row",
237
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
238
- checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
239
- onChange: (e)=>{
240
- toggleVariableVisibility(idx, e.target.checked);
241
- }
242
- })
238
+ children: "Visibility"
243
239
  }),
244
240
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
245
- component: "th",
246
- scope: "row",
247
- sx: {
248
- fontWeight: 'bold'
249
- },
250
- children: v.spec.name
241
+ children: "Name"
251
242
  }),
252
243
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
253
- children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
244
+ children: "Type"
254
245
  }),
255
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
256
- align: "right",
246
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
247
+ align: "right"
248
+ })
249
+ ]
250
+ })
251
+ }),
252
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
253
+ children: variableDefinitions.map((v, idx)=>{
254
+ var ref1;
255
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
256
+ children: [
257
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
258
+ component: "th",
259
+ scope: "row",
260
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
261
+ checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
262
+ onChange: (e)=>{
263
+ toggleVariableVisibility(idx, e.target.checked);
264
+ }
265
+ })
266
+ }),
267
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
268
+ component: "th",
269
+ scope: "row",
270
+ sx: {
271
+ fontWeight: 'bold'
272
+ },
273
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
274
+ name: v.spec.name,
275
+ state: variableState.get({
276
+ name: v.spec.name
277
+ })
278
+ })
279
+ }),
280
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
281
+ children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
282
+ }),
283
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
284
+ align: "right",
285
+ children: [
286
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
287
+ onClick: ()=>changeVariableOrder(idx, 'up'),
288
+ disabled: idx === 0,
289
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
290
+ }),
291
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
292
+ onClick: ()=>changeVariableOrder(idx, 'down'),
293
+ disabled: idx === variableDefinitions.length - 1,
294
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
295
+ }),
296
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
297
+ onClick: ()=>editVariable(idx),
298
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
299
+ }),
300
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
301
+ onClick: ()=>removeVariable(idx),
302
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
303
+ })
304
+ ]
305
+ })
306
+ ]
307
+ }, v.spec.name);
308
+ })
309
+ })
310
+ ]
311
+ })
312
+ }),
313
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
314
+ display: "flex",
315
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
316
+ variant: "contained",
317
+ startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
318
+ sx: {
319
+ marginLeft: 'auto'
320
+ },
321
+ onClick: addVariable,
322
+ children: "Add Variable"
323
+ })
324
+ })
325
+ ]
326
+ }),
327
+ externalVariableDefinitions.map((extVar)=>{
328
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.Stack, {
329
+ children: [
330
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
331
+ variant: "h2",
332
+ children: [
333
+ (0, _material.capitalize)(extVar.source),
334
+ " Variables"
335
+ ]
336
+ }),
337
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
338
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
339
+ sx: {
340
+ minWidth: 650
341
+ },
342
+ "aria-label": "table of variables",
343
+ children: [
344
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
345
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
346
+ children: [
347
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
348
+ children: "Visibility"
349
+ }),
350
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
351
+ children: "Name"
352
+ }),
353
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
354
+ children: "Type"
355
+ }),
356
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
357
+ align: "right"
358
+ })
359
+ ]
360
+ })
361
+ }),
362
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
363
+ children: extVar.definitions.map((v)=>{
364
+ var ref;
365
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
257
366
  children: [
258
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
259
- onClick: ()=>changeVariableOrder(idx, 'up'),
260
- disabled: idx === 0,
261
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
367
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
368
+ component: "th",
369
+ scope: "row",
370
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
371
+ checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
372
+ disabled: true
373
+ })
262
374
  }),
263
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
264
- onClick: ()=>changeVariableOrder(idx, 'down'),
265
- disabled: idx === variableDefinitions.length - 1,
266
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
375
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
376
+ component: "th",
377
+ scope: "row",
378
+ sx: {
379
+ fontWeight: 'bold'
380
+ },
381
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
382
+ name: v.spec.name,
383
+ state: variableState.get({
384
+ name: v.spec.name,
385
+ source: extVar.source
386
+ })
387
+ })
267
388
  }),
268
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
269
- onClick: ()=>editVariable(idx),
270
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
389
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
390
+ children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
271
391
  }),
272
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
273
- onClick: ()=>removeVariable(idx),
274
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
392
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
393
+ align: "right",
394
+ children: [
395
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
396
+ title: "Override",
397
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
398
+ onClick: ()=>overrideVariable(v),
399
+ disabled: !!variableState.get({
400
+ name: v.spec.name
401
+ }),
402
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_contentDuplicate.default, {})
403
+ })
404
+ }),
405
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
406
+ disabled: true,
407
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
408
+ }),
409
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
410
+ disabled: true,
411
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
412
+ }),
413
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
414
+ disabled: true,
415
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
416
+ }),
417
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
418
+ disabled: true,
419
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
420
+ })
421
+ ]
275
422
  })
276
423
  ]
277
- })
278
- ]
279
- }, v.spec.name);
280
- })
424
+ }, v.spec.name);
425
+ })
426
+ })
427
+ ]
281
428
  })
282
- ]
283
- })
284
- }),
285
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
286
- display: "flex",
287
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
288
- variant: "contained",
289
- startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
290
- sx: {
291
- marginLeft: 'auto'
292
- },
293
- onClick: addVariable,
294
- children: "Add Variable"
295
- })
296
- })
297
- ]
298
- })
429
+ })
430
+ ]
431
+ }, extVar.source);
432
+ })
433
+ ]
299
434
  })
300
435
  ]
301
436
  })
@@ -305,3 +440,29 @@ function VariableEditor(props) {
305
440
  const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
306
441
  borderBottom: `solid 1px ${theme.palette.divider}`
307
442
  }));
443
+ function VariableName(props) {
444
+ const { name , state } = props;
445
+ return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
446
+ children: [
447
+ !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
448
+ !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
449
+ fontWeight: "normal",
450
+ color: (theme)=>theme.palette.primary.main,
451
+ children: "(overriding)"
452
+ }),
453
+ (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
454
+ children: [
455
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
456
+ color: (theme)=>theme.palette.grey[500],
457
+ children: name
458
+ }),
459
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
460
+ fontWeight: "normal",
461
+ color: (theme)=>theme.palette.grey[500],
462
+ children: "(overridden)"
463
+ })
464
+ ]
465
+ })
466
+ ]
467
+ });
468
+ }