@perses-dev/dashboards 0.53.0-beta.1 → 0.53.0-beta.3
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.
- package/dist/cjs/components/Panel/PanelActions.js +41 -3
- package/dist/cjs/components/Panel/PanelPluginLoader.js +4 -2
- package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +165 -198
- package/dist/cjs/components/PanelDrawer/PanelPreview.js +2 -23
- package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js +96 -0
- package/dist/cjs/components/Variables/VariableEditor.js +15 -22
- package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js +1 -2
- package/dist/components/Panel/PanelActions.d.ts.map +1 -1
- package/dist/components/Panel/PanelActions.js +41 -3
- package/dist/components/Panel/PanelActions.js.map +1 -1
- package/dist/components/Panel/PanelPluginLoader.d.ts.map +1 -1
- package/dist/components/Panel/PanelPluginLoader.js +4 -2
- package/dist/components/Panel/PanelPluginLoader.js.map +1 -1
- package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -1
- package/dist/components/PanelDrawer/PanelEditorForm.js +168 -201
- package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -1
- package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
- package/dist/components/PanelDrawer/PanelPreview.js +2 -23
- package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
- package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts +13 -0
- package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map +1 -0
- package/dist/components/PanelDrawer/PanelQueriesSharedControls.js +90 -0
- package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map +1 -0
- package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
- package/dist/components/Variables/VariableEditor.js +17 -24
- package/dist/components/Variables/VariableEditor.js.map +1 -1
- package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts +3 -3
- package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map +1 -1
- package/dist/context/PanelEditorProvider/PanelEditorProvider.js +1 -2
- package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// Copyright 2025 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "PanelQueriesSharedControls", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function() {
|
|
20
|
+
return PanelQueriesSharedControls;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
24
|
+
const _material = require("@mui/material");
|
|
25
|
+
const _components = require("@perses-dev/components");
|
|
26
|
+
const _dashboards = require("@perses-dev/dashboards");
|
|
27
|
+
const _pluginsystem = require("@perses-dev/plugin-system");
|
|
28
|
+
const _react = require("react");
|
|
29
|
+
function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange }) {
|
|
30
|
+
const { data: pluginPreview } = (0, _pluginsystem.usePlugin)('Panel', plugin.kind);
|
|
31
|
+
const panelEditorContext = (0, _react.useContext)(_dashboards.PanelEditorContext);
|
|
32
|
+
const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(panelEditorContext?.preview.previewPanelWidth);
|
|
33
|
+
const pluginQueryOptions = (0, _react.useMemo)(()=>typeof pluginPreview?.queryOptions === 'function' ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec) : pluginPreview?.queryOptions, [
|
|
34
|
+
panelDefinition.spec.plugin.spec,
|
|
35
|
+
pluginPreview
|
|
36
|
+
]);
|
|
37
|
+
const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(()=>panelDefinition.spec.queries?.map((query)=>{
|
|
38
|
+
return {
|
|
39
|
+
kind: query.spec.plugin.kind,
|
|
40
|
+
spec: query.spec.plugin.spec
|
|
41
|
+
};
|
|
42
|
+
}) ?? []);
|
|
43
|
+
const handleRunQuery = (0, _react.useCallback)((index, newDef)=>{
|
|
44
|
+
setPreviewDefinition((prev)=>{
|
|
45
|
+
const newDefinitions = [
|
|
46
|
+
...prev
|
|
47
|
+
];
|
|
48
|
+
newDefinitions[index] = {
|
|
49
|
+
kind: newDef.spec.plugin.kind,
|
|
50
|
+
spec: newDef.spec.plugin.spec
|
|
51
|
+
};
|
|
52
|
+
return newDefinitions;
|
|
53
|
+
});
|
|
54
|
+
}, []);
|
|
55
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_pluginsystem.DataQueriesProvider, {
|
|
56
|
+
definitions: previewDefinition,
|
|
57
|
+
options: {
|
|
58
|
+
suggestedStepMs,
|
|
59
|
+
...pluginQueryOptions
|
|
60
|
+
},
|
|
61
|
+
children: [
|
|
62
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
|
|
63
|
+
item: true,
|
|
64
|
+
xs: 12,
|
|
65
|
+
children: [
|
|
66
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
67
|
+
variant: "h4",
|
|
68
|
+
marginBottom: 1,
|
|
69
|
+
children: "Preview"
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
|
|
72
|
+
FallbackComponent: _components.ErrorAlert,
|
|
73
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.PanelPreview, {
|
|
74
|
+
panelDefinition: panelDefinition
|
|
75
|
+
})
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
}),
|
|
79
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
|
|
80
|
+
item: true,
|
|
81
|
+
xs: 12,
|
|
82
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
|
|
83
|
+
FallbackComponent: _components.ErrorAlert,
|
|
84
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
|
|
85
|
+
control: control,
|
|
86
|
+
panelDefinition: panelDefinition,
|
|
87
|
+
onJSONChange: onJSONChange,
|
|
88
|
+
onQueriesChange: onQueriesChange,
|
|
89
|
+
onQueryRun: handleRunQuery,
|
|
90
|
+
onPluginSpecChange: onPluginSpecChange
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
]
|
|
95
|
+
});
|
|
96
|
+
}
|
|
@@ -32,7 +32,6 @@ const _jsxruntime = require("react/jsx-runtime");
|
|
|
32
32
|
const _react = require("react");
|
|
33
33
|
const _material = require("@mui/material");
|
|
34
34
|
const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
|
|
35
|
-
const _core = require("@perses-dev/core");
|
|
36
35
|
const _useimmer = require("use-immer");
|
|
37
36
|
const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
|
|
38
37
|
const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
|
|
@@ -164,32 +163,26 @@ function VariableEditor(props) {
|
|
|
164
163
|
draft.push(v);
|
|
165
164
|
});
|
|
166
165
|
};
|
|
167
|
-
const { dashboard } = (0, _context.useDashboard)();
|
|
168
|
-
const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
|
|
169
|
-
const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
|
|
170
166
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
171
167
|
children: [
|
|
172
168
|
currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
|
|
173
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
setVariableDefinitions((draft)=>{
|
|
182
|
-
draft[variableEditIdx] = definition;
|
|
183
|
-
setVariableEditIdx(null);
|
|
184
|
-
});
|
|
185
|
-
},
|
|
186
|
-
onClose: ()=>{
|
|
187
|
-
if (variableFormAction === 'create') {
|
|
188
|
-
removeVariable(variableEditIdx);
|
|
189
|
-
}
|
|
169
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
|
|
170
|
+
initialVariableDefinition: currentEditingVariableDefinition,
|
|
171
|
+
action: variableFormAction,
|
|
172
|
+
isDraft: true,
|
|
173
|
+
onActionChange: setVariableFormAction,
|
|
174
|
+
onSave: (definition)=>{
|
|
175
|
+
setVariableDefinitions((draft)=>{
|
|
176
|
+
draft[variableEditIdx] = definition;
|
|
190
177
|
setVariableEditIdx(null);
|
|
178
|
+
});
|
|
179
|
+
},
|
|
180
|
+
onClose: ()=>{
|
|
181
|
+
if (variableFormAction === 'create') {
|
|
182
|
+
removeVariable(variableEditIdx);
|
|
191
183
|
}
|
|
192
|
-
|
|
184
|
+
setVariableEditIdx(null);
|
|
185
|
+
}
|
|
193
186
|
})
|
|
194
187
|
}),
|
|
195
188
|
!currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAYtD,OAAO,EAAE,IAAI,EAAU,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsPpD,CAAC"}
|
|
@@ -23,10 +23,24 @@ import DragIcon from 'mdi-material-ui/DragVertical';
|
|
|
23
23
|
import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
|
|
24
24
|
import MenuIcon from 'mdi-material-ui/Menu';
|
|
25
25
|
import AlertIcon from 'mdi-material-ui/Alert';
|
|
26
|
+
import AlertCircleIcon from 'mdi-material-ui/AlertCircle';
|
|
26
27
|
import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
|
|
27
28
|
import { ARIA_LABEL_TEXT, HEADER_ACTIONS_CONTAINER_NAME, HEADER_MEDIUM_WIDTH, HEADER_SMALL_WIDTH, TOOLTIP_TEXT } from '../../constants';
|
|
28
29
|
import { HeaderIconButton } from './HeaderIconButton';
|
|
29
30
|
import { PanelLinks } from './PanelLinks';
|
|
31
|
+
const noticeTypeToIcon = {
|
|
32
|
+
error: /*#__PURE__*/ _jsx(AlertCircleIcon, {
|
|
33
|
+
color: "error"
|
|
34
|
+
}),
|
|
35
|
+
warning: /*#__PURE__*/ _jsx(AlertIcon, {
|
|
36
|
+
fontSize: "inherit",
|
|
37
|
+
color: "warning"
|
|
38
|
+
}),
|
|
39
|
+
info: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
|
|
40
|
+
fontSize: "inherit",
|
|
41
|
+
color: "info"
|
|
42
|
+
})
|
|
43
|
+
};
|
|
30
44
|
const ConditionalBox = styled(Box)({
|
|
31
45
|
display: 'none',
|
|
32
46
|
alignItems: 'center',
|
|
@@ -73,15 +87,17 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
|
|
|
73
87
|
size: "1.125rem"
|
|
74
88
|
});
|
|
75
89
|
} else if (queryErrors.length > 0) {
|
|
76
|
-
const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e
|
|
77
|
-
.join('\n');
|
|
90
|
+
const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e.message).join('\n');
|
|
78
91
|
return /*#__PURE__*/ _jsx(InfoTooltip, {
|
|
79
92
|
description: errorTexts,
|
|
80
93
|
children: /*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
81
94
|
"aria-label": "panel errors",
|
|
82
95
|
size: "small",
|
|
83
96
|
children: /*#__PURE__*/ _jsx(AlertIcon, {
|
|
84
|
-
fontSize: "inherit"
|
|
97
|
+
fontSize: "inherit",
|
|
98
|
+
sx: {
|
|
99
|
+
color: (theme)=>theme.palette.error.main
|
|
100
|
+
}
|
|
85
101
|
})
|
|
86
102
|
})
|
|
87
103
|
});
|
|
@@ -89,6 +105,24 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
|
|
|
89
105
|
}, [
|
|
90
106
|
queryResults
|
|
91
107
|
]);
|
|
108
|
+
const noticesIndicator = useMemo(()=>{
|
|
109
|
+
const notices = queryResults.flatMap((q)=>{
|
|
110
|
+
return q.data?.metadata?.notices ?? [];
|
|
111
|
+
});
|
|
112
|
+
if (notices.length > 0) {
|
|
113
|
+
const lastNotice = notices[notices.length - 1];
|
|
114
|
+
return /*#__PURE__*/ _jsx(InfoTooltip, {
|
|
115
|
+
description: lastNotice.message,
|
|
116
|
+
children: /*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
117
|
+
"aria-label": "panel notices",
|
|
118
|
+
size: "small",
|
|
119
|
+
children: noticeTypeToIcon[lastNotice.type]
|
|
120
|
+
})
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
}, [
|
|
124
|
+
queryResults
|
|
125
|
+
]);
|
|
92
126
|
const readActions = useMemo(()=>{
|
|
93
127
|
if (readHandlers !== undefined) {
|
|
94
128
|
return /*#__PURE__*/ _jsx(InfoTooltip, {
|
|
@@ -236,6 +270,8 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
|
|
|
236
270
|
" ",
|
|
237
271
|
queryStateIndicator,
|
|
238
272
|
" ",
|
|
273
|
+
noticesIndicator,
|
|
274
|
+
" ",
|
|
239
275
|
extraActions,
|
|
240
276
|
" ",
|
|
241
277
|
viewQueryAction,
|
|
@@ -267,6 +303,7 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
|
|
|
267
303
|
divider,
|
|
268
304
|
" ",
|
|
269
305
|
queryStateIndicator,
|
|
306
|
+
noticesIndicator,
|
|
270
307
|
/*#__PURE__*/ _jsxs(OnHover, {
|
|
271
308
|
children: [
|
|
272
309
|
extraActions,
|
|
@@ -305,6 +342,7 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
|
|
|
305
342
|
divider,
|
|
306
343
|
" ",
|
|
307
344
|
queryStateIndicator,
|
|
345
|
+
noticesIndicator,
|
|
308
346
|
/*#__PURE__*/ _jsxs(OnHover, {
|
|
309
347
|
children: [
|
|
310
348
|
extraActions,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { Link } from '@perses-dev/core';\nimport {\n ARIA_LABEL_TEXT,\n HEADER_ACTIONS_CONTAINER_NAME,\n HEADER_MEDIUM_WIDTH,\n HEADER_SMALL_WIDTH,\n TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\nimport { PanelOptions } from './Panel';\n\nexport interface PanelActionsProps {\n title: string;\n description?: string;\n descriptionTooltipId: string;\n links?: Link[];\n extra?: React.ReactNode;\n editHandlers?: {\n onEditPanelClick: () => void;\n onDuplicatePanelClick: () => void;\n onDeletePanelClick: () => void;\n };\n readHandlers?: {\n isPanelViewed?: boolean;\n onViewPanelClick: () => void;\n };\n viewQueriesHandler?: {\n onClick: () => void;\n };\n queryResults: QueryData[];\n pluginActions?: ReactNode[];\n showIcons: PanelOptions['showIcons'];\n}\n\nconst ConditionalBox = styled(Box)({\n display: 'none',\n alignItems: 'center',\n flexGrow: 1,\n justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n editHandlers,\n readHandlers,\n viewQueriesHandler,\n extra,\n title,\n description,\n descriptionTooltipId,\n links,\n queryResults,\n pluginActions = [],\n showIcons,\n}) => {\n const descriptionAction = useMemo((): ReactNode | undefined => {\n if (description && description.trim().length > 0) {\n return (\n <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n <InformationOutlineIcon\n aria-describedby=\"info-tooltip\"\n aria-hidden={false}\n fontSize=\"inherit\"\n sx={{ color: (theme) => theme.palette.text.secondary }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [descriptionTooltipId, description]);\n\n const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n const extraActions = editHandlers === undefined && extra;\n\n const queryStateIndicator = useMemo((): ReactNode | undefined => {\n const hasData = queryResults.some((q) => q.data);\n const isFetching = queryResults.some((q) => q.isFetching);\n const queryErrors = queryResults.filter((q) => q.error);\n\n if (isFetching && hasData) {\n return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n } else if (queryErrors.length > 0) {\n const errorTexts = queryErrors\n .map((q) => q.error)\n .map((e: any) => e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any\n .join('\\n');\n\n return (\n <InfoTooltip description={errorTexts}>\n <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n <AlertIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const readActions = useMemo((): ReactNode | undefined => {\n if (readHandlers !== undefined) {\n return (\n <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n size=\"small\"\n onClick={readHandlers.onViewPanelClick}\n >\n {readHandlers.isPanelViewed ? (\n <ArrowCollapseIcon fontSize=\"inherit\" />\n ) : (\n <ArrowExpandIcon fontSize=\"inherit\" />\n )}\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [readHandlers, title]);\n\n const viewQueryAction = useMemo(() => {\n if (!viewQueriesHandler?.onClick) return null;\n return (\n <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n size=\"small\"\n onClick={viewQueriesHandler.onClick}\n >\n <DatabaseSearch fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }, [viewQueriesHandler, title]);\n\n const editActions = useMemo((): ReactNode | undefined => {\n if (editHandlers !== undefined) {\n // If there are edit handlers, always just show the edit buttons\n return (\n <>\n <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n size=\"small\"\n onClick={editHandlers.onEditPanelClick}\n >\n <PencilIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n size=\"small\"\n onClick={editHandlers.onDuplicatePanelClick}\n >\n <ContentCopyIcon\n fontSize=\"inherit\"\n sx={{\n // Shrink this icon a little bit to look more consistent\n // with the other icons in the header.\n transform: 'scale(0.925)',\n }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n size=\"small\"\n onClick={editHandlers.onDeletePanelClick}\n >\n <DeleteIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n </>\n );\n }\n return undefined;\n }, [editHandlers, title]);\n\n const moveAction = useMemo((): ReactNode | undefined => {\n if (editActions && !readHandlers?.isPanelViewed) {\n return (\n <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [editActions, readHandlers, title]);\n\n const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\n\n return (\n <>\n {/* small panel width: move all icons except move/grab to overflow menu */}\n <ConditionalBox\n sx={(theme) => ({\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n })}\n >\n {divider}\n <OnHover>\n <OverflowMenu title={title}>\n {descriptionAction} {linksAction} {queryStateIndicator} {extraActions} {viewQueryAction}\n {readActions} {pluginActions}\n {editActions}\n </OverflowMenu>\n {moveAction}\n </OnHover>\n </ConditionalBox>\n\n {/* medium panel width: move edit icons to overflow menu */}\n <ConditionalBox\n sx={(theme) => ({\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n display: 'flex',\n },\n })}\n >\n <OnHover>\n {descriptionAction} {linksAction}\n </OnHover>\n {divider} {queryStateIndicator}\n <OnHover>\n {extraActions}\n {readActions}\n <OverflowMenu title={title}>\n {editActions} {viewQueryAction} {pluginActions}\n </OverflowMenu>\n {moveAction}\n </OnHover>\n </ConditionalBox>\n\n {/* large panel width: show all icons in panel header */}\n <ConditionalBox\n sx={(theme) => ({\n // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n display: 'flex',\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n })}\n >\n <OnHover>\n {descriptionAction} {linksAction}\n </OnHover>\n {divider} {queryStateIndicator}\n <OnHover>\n {extraActions}\n {viewQueryAction}\n {readActions} {editActions}\n {/* Show plugin actions inside a menu if it gets crowded */}\n {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n {moveAction}\n </OnHover>\n </ConditionalBox>\n </>\n );\n};\n\nconst OverflowMenu: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n // do not show overflow menu if there is no content (for example, edit actions are hidden)\n const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n if (!hasContent) {\n return null;\n }\n\n const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n setAnchorPosition(event.currentTarget.getBoundingClientRect());\n };\n\n const handleClose = (): void => {\n setAnchorPosition(undefined);\n };\n\n const open = Boolean(anchorPosition);\n const id = open ? 'actions-menu' : undefined;\n\n return (\n <>\n <HeaderIconButton\n className=\"show-actions\"\n aria-describedby={id}\n onClick={handleClick}\n aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n size=\"small\"\n >\n <MenuIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n <Popover\n id={id}\n open={open}\n anchorReference=\"anchorPosition\"\n anchorPosition={anchorPosition}\n onClose={handleClose}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n >\n <Stack direction=\"row\" alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n {children}\n </Stack>\n </Popover>\n </>\n );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","InformationOutlineIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","fontSize","sx","color","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","error","errorTexts","map","e","message","toString","join","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","direction","padding"],"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,SAASA,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAEC,gBAAgB,EAAEC,MAAM,QAAyB,gBAAgB;AAC/F,SAASC,cAAc,EAAgCC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxF,SAASC,WAAW,QAAQ,yBAAyB;AAErD,OAAOC,oBAAoB,iCAAiC;AAC5D,OAAOC,uBAAuB,gCAAgC;AAC9D,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,cAAc,+BAA+B;AACpD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,cAAc,uBAAuB;AAC5C,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,4BAA4B,qCAAqC;AAExE,SACEC,eAAe,EACfC,6BAA6B,EAC7BC,mBAAmB,EACnBC,kBAAkB,EAClBC,YAAY,QACP,kBAAkB;AACzB,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,UAAU,QAAQ,eAAe;AA0B1C,MAAMC,iBAAiBtB,OAAOH,KAAK;IACjC0B,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,gBAAgB;AAClB;AAEA,OAAO,MAAMC,eAA4C,CAAC,EACxDC,YAAY,EACZC,YAAY,EACZC,kBAAkB,EAClBC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,oBAAoB,EACpBC,KAAK,EACLC,YAAY,EACZC,gBAAgB,EAAE,EAClBC,SAAS,EACV;IACC,MAAMC,oBAAoBrC,QAAQ;QAChC,IAAI+B,eAAeA,YAAYO,IAAI,GAAGC,MAAM,GAAG,GAAG;YAChD,qBACE,KAACrC;gBAAYsC,IAAIR;gBAAsBD,aAAaA;gBAAaU,YAAY;0BAC3E,cAAA,KAACvB;oBAAiBwB,cAAW;oBAAoBC,MAAK;8BACpD,cAAA,KAAC/B;wBACCgC,oBAAiB;wBACjBC,eAAa;wBACbC,UAAS;wBACTC,IAAI;4BAAEC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;wBAAC;;;;QAK/D;QACA,OAAOC;IACT,GAAG;QAACrB;QAAsBD;KAAY;IAEtC,MAAMuB,cAAcrB,SAASA,MAAMM,MAAM,GAAG,mBAAK,KAACpB;QAAWc,OAAOA;;IACpE,MAAMsB,eAAe7B,iBAAiB2B,aAAaxB;IAEnD,MAAM2B,sBAAsBxD,QAAQ;QAClC,MAAMyD,UAAUvB,aAAawB,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI;QAC/C,MAAMC,aAAa3B,aAAawB,IAAI,CAAC,CAACC,IAAMA,EAAEE,UAAU;QACxD,MAAMC,cAAc5B,aAAa6B,MAAM,CAAC,CAACJ,IAAMA,EAAEK,KAAK;QAEtD,IAAIH,cAAcJ,SAAS;YACzB,qBAAO,KAAC5D;gBAAiB6C,cAAW;gBAAUC,MAAK;;QACrD,OAAO,IAAImB,YAAYvB,MAAM,GAAG,GAAG;YACjC,MAAM0B,aAAaH,YAChBI,GAAG,CAAC,CAACP,IAAMA,EAAEK,KAAK,EAClBE,GAAG,CAAC,CAACC,IAAWA,GAAGC,WAAWD,GAAGE,cAAc,iBAAiB,yDAAyD;aACzHC,IAAI,CAAC;YAER,qBACE,KAACpE;gBAAY6B,aAAakC;0BACxB,cAAA,KAAC/C;oBAAiBwB,cAAW;oBAAeC,MAAK;8BAC/C,cAAA,KAAChC;wBAAUmC,UAAS;;;;QAI5B;IACF,GAAG;QAACZ;KAAa;IAEjB,MAAMqC,cAAcvE,QAAQ;QAC1B,IAAI2B,iBAAiB0B,WAAW;YAC9B,qBACE,KAACnD;gBAAY6B,aAAad,aAAauD,SAAS;0BAC9C,cAAA,KAACtD;oBACCwB,cAAY7B,gBAAgB2D,SAAS,CAAC1C;oBACtCa,MAAK;oBACL8B,SAAS9C,aAAa+C,gBAAgB;8BAErC/C,aAAagD,aAAa,iBACzB,KAACvE;wBAAkB0C,UAAS;uCAE5B,KAACzC;wBAAgByC,UAAS;;;;QAKpC;QACA,OAAOO;IACT,GAAG;QAAC1B;QAAcG;KAAM;IAExB,MAAM8C,kBAAkB5E,QAAQ;QAC9B,IAAI,CAAC4B,oBAAoB6C,SAAS,OAAO;QACzC,qBACE,KAACvE;YAAY6B,aAAad,aAAa4D,SAAS;sBAC9C,cAAA,KAAC3D;gBACCwB,cAAY7B,gBAAgBiE,aAAa,CAAChD;gBAC1Ca,MAAK;gBACL8B,SAAS7C,mBAAmB6C,OAAO;0BAEnC,cAAA,KAACtE;oBAAe2C,UAAS;;;;IAIjC,GAAG;QAAClB;QAAoBE;KAAM;IAE9B,MAAMiD,cAAc/E,QAAQ;QAC1B,IAAI0B,iBAAiB2B,WAAW;YAC9B,gEAAgE;YAChE,qBACE;;kCACE,KAACnD;wBAAY6B,aAAad,aAAa+D,SAAS;kCAC9C,cAAA,KAAC9D;4BACCwB,cAAY7B,gBAAgBmE,SAAS,CAAClD;4BACtCa,MAAK;4BACL8B,SAAS/C,aAAauD,gBAAgB;sCAEtC,cAAA,KAAC3E;gCAAWwC,UAAS;;;;kCAGzB,KAAC5C;wBAAY6B,aAAad,aAAaiE,cAAc;kCACnD,cAAA,KAAChE;4BACCwB,cAAY7B,gBAAgBqE,cAAc,CAACpD;4BAC3Ca,MAAK;4BACL8B,SAAS/C,aAAayD,qBAAqB;sCAE3C,cAAA,KAAC1E;gCACCqC,UAAS;gCACTC,IAAI;oCACF,wDAAwD;oCACxD,sCAAsC;oCACtCqC,WAAW;gCACb;;;;kCAIN,KAAClF;wBAAY6B,aAAad,aAAaoE,WAAW;kCAChD,cAAA,KAACnE;4BACCwB,cAAY7B,gBAAgBwE,WAAW,CAACvD;4BACxCa,MAAK;4BACL8B,SAAS/C,aAAa4D,kBAAkB;sCAExC,cAAA,KAAC/E;gCAAWuC,UAAS;;;;;;QAK/B;QACA,OAAOO;IACT,GAAG;QAAC3B;QAAcI;KAAM;IAExB,MAAMyD,aAAavF,QAAQ;QACzB,IAAI+E,eAAe,CAACpD,cAAcgD,eAAe;YAC/C,qBACE,KAACzE;gBAAY6B,aAAad,aAAauE,SAAS;0BAC9C,cAAA,KAACtE;oBAAiBwB,cAAY7B,gBAAgB2E,SAAS,CAAC1D;oBAAQa,MAAK;8BACnE,cAAA,KAACnC;wBAASiF,WAAU;wBAAc1C,IAAI;4BAAE2C,QAAQ;wBAAO;wBAAG5C,UAAS;;;;QAI3E;QACA,OAAOO;IACT,GAAG;QAAC0B;QAAapD;QAAcG;KAAM;IAErC,MAAM6D,wBAAU,KAAChG;QAAIoD,IAAI;YAAExB,UAAU;QAAE;;IAEvC,qHAAqH;IACrH,MAAMqE,UAAU,CAAC,EAAEC,QAAQ,EAAqB,GAC9CzD,cAAc,wBAAU,KAACzC;YAAIoD,IAAI;gBAAE1B,SAAS;YAA2B;sBAAIwE;2BAAkB;sBAAGA;;IAElG,qBACE;;0BAEE,MAACzE;gBACC2B,IAAI,CAACE,QAAW,CAAA;wBACd,CAACA,MAAM6C,gBAAgB,CAAChF,+BAA+BiF,OAAO,CAAC,GAAG/E,oBAAoB,EAAE;4BAAEK,SAAS;wBAAO;oBAC5G,CAAA;;oBAECsE;kCACD,MAACC;;0CACC,MAACI;gCAAalE,OAAOA;;oCAClBO;oCAAkB;oCAAEiB;oCAAY;oCAAEE;oCAAoB;oCAAED;oCAAa;oCAAEqB;oCACvEL;oCAAY;oCAAEpC;oCACd4C;;;4BAEFQ;;;;;0BAKL,MAACnE;gBACC2B,IAAI,CAACE,QAAW,CAAA;wBACd,CAACA,MAAM6C,gBAAgB,CAAChF,+BAA+BiF,OAAO,CAAC/E,oBAAoBD,qBAAqB,EAAE;4BACxGM,SAAS;wBACX;oBACF,CAAA;;kCAEA,MAACuE;;4BACEvD;4BAAkB;4BAAEiB;;;oBAEtBqC;oBAAQ;oBAAEnC;kCACX,MAACoC;;4BACErC;4BACAgB;0CACD,MAACyB;gCAAalE,OAAOA;;oCAClBiD;oCAAY;oCAAEH;oCAAgB;oCAAEzC;;;4BAElCoD;;;;;0BAKL,MAACnE;gBACC2B,IAAI,CAACE,QAAW,CAAA;wBACd,2GAA2G;wBAC3G5B,SAAS;wBACT,CAAC4B,MAAM6C,gBAAgB,CAAChF,+BAA+BmF,IAAI,CAAClF,qBAAqB,EAAE;4BAAEM,SAAS;wBAAO;oBACvG,CAAA;;kCAEA,MAACuE;;4BACEvD;4BAAkB;4BAAEiB;;;oBAEtBqC;oBAAQ;oBAAEnC;kCACX,MAACoC;;4BACErC;4BACAqB;4BACAL;4BAAY;4BAAEQ;4BAEd5C,cAAcI,MAAM,IAAI,IAAIJ,8BAAgB,KAAC6D;gCAAalE,OAAOA;0CAAQK;;4BACzEoD;;;;;;;AAKX,EAAE;AAEF,MAAMS,eAA+D,CAAC,EAAEH,QAAQ,EAAE/D,KAAK,EAAE;IACvF,MAAM,CAACoE,gBAAgBC,kBAAkB,GAAGlG;IAE5C,0FAA0F;IAC1F,MAAMmG,2BAAarG,eAAe8F,aAAcQ,MAAMC,OAAO,CAACT,aAAaA,SAASnC,IAAI,CAAC3D;IACzF,IAAI,CAACqG,YAAY;QACf,OAAO;IACT;IAEA,MAAMG,cAAc,CAACC;QACnBL,kBAAkBK,MAAMC,aAAa,CAACC,qBAAqB;IAC7D;IAEA,MAAMC,cAAc;QAClBR,kBAAkB9C;IACpB;IAEA,MAAMuD,OAAOC,QAAQX;IACrB,MAAM1D,KAAKoE,OAAO,iBAAiBvD;IAEnC,qBACE;;0BACE,KAACnC;gBACCuE,WAAU;gBACV7C,oBAAkBJ;gBAClBiC,SAAS8B;gBACT7D,cAAY7B,gBAAgBiG,gBAAgB,CAAChF;gBAC7Ca,MAAK;0BAEL,cAAA,KAACjC;oBAASoC,UAAS;;;0BAErB,KAAClD;gBACC4C,IAAIA;gBACJoE,MAAMA;gBACNG,iBAAgB;gBAChBb,gBAAgBA;gBAChBc,SAASL;gBACTM,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACzH;oBAAM0H,WAAU;oBAAM9F,YAAW;oBAASyB,IAAI;wBAAEsE,SAAS;oBAAE;oBAAG5C,SAASkC;8BACrEd;;;;;AAKX"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport AlertCircleIcon from 'mdi-material-ui/AlertCircle';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { Link, Notice } from '@perses-dev/core';\nimport {\n ARIA_LABEL_TEXT,\n HEADER_ACTIONS_CONTAINER_NAME,\n HEADER_MEDIUM_WIDTH,\n HEADER_SMALL_WIDTH,\n TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\nimport { PanelOptions } from './Panel';\n\nconst noticeTypeToIcon: Record<Notice['type'], ReactNode> = {\n error: <AlertCircleIcon color=\"error\" />,\n warning: <AlertIcon fontSize=\"inherit\" color=\"warning\" />,\n info: <InformationOutlineIcon fontSize=\"inherit\" color=\"info\" />,\n};\n\nexport interface PanelActionsProps {\n title: string;\n description?: string;\n descriptionTooltipId: string;\n links?: Link[];\n extra?: React.ReactNode;\n editHandlers?: {\n onEditPanelClick: () => void;\n onDuplicatePanelClick: () => void;\n onDeletePanelClick: () => void;\n };\n readHandlers?: {\n isPanelViewed?: boolean;\n onViewPanelClick: () => void;\n };\n viewQueriesHandler?: {\n onClick: () => void;\n };\n queryResults: QueryData[];\n pluginActions?: ReactNode[];\n showIcons: PanelOptions['showIcons'];\n}\n\nconst ConditionalBox = styled(Box)({\n display: 'none',\n alignItems: 'center',\n flexGrow: 1,\n justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n editHandlers,\n readHandlers,\n viewQueriesHandler,\n extra,\n title,\n description,\n descriptionTooltipId,\n links,\n queryResults,\n pluginActions = [],\n showIcons,\n}) => {\n const descriptionAction = useMemo((): ReactNode | undefined => {\n if (description && description.trim().length > 0) {\n return (\n <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n <InformationOutlineIcon\n aria-describedby=\"info-tooltip\"\n aria-hidden={false}\n fontSize=\"inherit\"\n sx={{ color: (theme) => theme.palette.text.secondary }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [descriptionTooltipId, description]);\n\n const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n const extraActions = editHandlers === undefined && extra;\n\n const queryStateIndicator = useMemo((): ReactNode | undefined => {\n const hasData = queryResults.some((q) => q.data);\n const isFetching = queryResults.some((q) => q.isFetching);\n const queryErrors = queryResults.filter((q) => q.error);\n\n if (isFetching && hasData) {\n return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n } else if (queryErrors.length > 0) {\n const errorTexts = queryErrors\n .map((q) => q.error)\n .map((e) => e.message)\n .join('\\n');\n\n return (\n <InfoTooltip description={errorTexts}>\n <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n <AlertIcon\n fontSize=\"inherit\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const noticesIndicator = useMemo(() => {\n const notices = queryResults.flatMap((q) => {\n return q.data?.metadata?.notices ?? [];\n });\n\n if (notices.length > 0) {\n const lastNotice = notices[notices.length - 1]!;\n\n return (\n <InfoTooltip description={lastNotice.message}>\n <HeaderIconButton aria-label=\"panel notices\" size=\"small\">\n {noticeTypeToIcon[lastNotice.type]}\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const readActions = useMemo((): ReactNode | undefined => {\n if (readHandlers !== undefined) {\n return (\n <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n size=\"small\"\n onClick={readHandlers.onViewPanelClick}\n >\n {readHandlers.isPanelViewed ? (\n <ArrowCollapseIcon fontSize=\"inherit\" />\n ) : (\n <ArrowExpandIcon fontSize=\"inherit\" />\n )}\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [readHandlers, title]);\n\n const viewQueryAction = useMemo(() => {\n if (!viewQueriesHandler?.onClick) return null;\n return (\n <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n size=\"small\"\n onClick={viewQueriesHandler.onClick}\n >\n <DatabaseSearch fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }, [viewQueriesHandler, title]);\n\n const editActions = useMemo((): ReactNode | undefined => {\n if (editHandlers !== undefined) {\n // If there are edit handlers, always just show the edit buttons\n return (\n <>\n <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n size=\"small\"\n onClick={editHandlers.onEditPanelClick}\n >\n <PencilIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n size=\"small\"\n onClick={editHandlers.onDuplicatePanelClick}\n >\n <ContentCopyIcon\n fontSize=\"inherit\"\n sx={{\n // Shrink this icon a little bit to look more consistent\n // with the other icons in the header.\n transform: 'scale(0.925)',\n }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n size=\"small\"\n onClick={editHandlers.onDeletePanelClick}\n >\n <DeleteIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n </>\n );\n }\n return undefined;\n }, [editHandlers, title]);\n\n const moveAction = useMemo((): ReactNode | undefined => {\n if (editActions && !readHandlers?.isPanelViewed) {\n return (\n <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n return undefined;\n }, [editActions, readHandlers, title]);\n\n const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\n\n return (\n <>\n {/* small panel width: move all icons except move/grab to overflow menu */}\n <ConditionalBox\n sx={(theme) => ({\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n })}\n >\n {divider}\n <OnHover>\n <OverflowMenu title={title}>\n {descriptionAction} {linksAction} {queryStateIndicator} {noticesIndicator} {extraActions} {viewQueryAction}\n {readActions} {pluginActions}\n {editActions}\n </OverflowMenu>\n {moveAction}\n </OnHover>\n </ConditionalBox>\n\n {/* medium panel width: move edit icons to overflow menu */}\n <ConditionalBox\n sx={(theme) => ({\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n display: 'flex',\n },\n })}\n >\n <OnHover>\n {descriptionAction} {linksAction}\n </OnHover>\n {divider} {queryStateIndicator}\n {noticesIndicator}\n <OnHover>\n {extraActions}\n {readActions}\n <OverflowMenu title={title}>\n {editActions} {viewQueryAction} {pluginActions}\n </OverflowMenu>\n {moveAction}\n </OnHover>\n </ConditionalBox>\n\n {/* large panel width: show all icons in panel header */}\n <ConditionalBox\n sx={(theme) => ({\n // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n display: 'flex',\n [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n })}\n >\n <OnHover>\n {descriptionAction} {linksAction}\n </OnHover>\n {divider} {queryStateIndicator}\n {noticesIndicator}\n <OnHover>\n {extraActions}\n {viewQueryAction}\n {readActions} {editActions}\n {/* Show plugin actions inside a menu if it gets crowded */}\n {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n {moveAction}\n </OnHover>\n </ConditionalBox>\n </>\n );\n};\n\nconst OverflowMenu: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n // do not show overflow menu if there is no content (for example, edit actions are hidden)\n const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n if (!hasContent) {\n return null;\n }\n\n const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n setAnchorPosition(event.currentTarget.getBoundingClientRect());\n };\n\n const handleClose = (): void => {\n setAnchorPosition(undefined);\n };\n\n const open = Boolean(anchorPosition);\n const id = open ? 'actions-menu' : undefined;\n\n return (\n <>\n <HeaderIconButton\n className=\"show-actions\"\n aria-describedby={id}\n onClick={handleClick}\n aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n size=\"small\"\n >\n <MenuIcon fontSize=\"inherit\" />\n </HeaderIconButton>\n <Popover\n id={id}\n open={open}\n anchorReference=\"anchorPosition\"\n anchorPosition={anchorPosition}\n onClose={handleClose}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n >\n <Stack direction=\"row\" alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n {children}\n </Stack>\n </Popover>\n </>\n );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","AlertCircleIcon","InformationOutlineIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","noticeTypeToIcon","error","color","warning","fontSize","info","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","sx","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","errorTexts","map","e","message","join","main","noticesIndicator","notices","flatMap","metadata","lastNotice","type","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","direction","padding"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelPluginLoader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,UAAU,gBAAiB,SAAQ,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"PanelPluginLoader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,UAAU,gBAAiB,SAAQ,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAwCvE"}
|
|
@@ -23,6 +23,8 @@ import { Skeleton } from '@mui/material';
|
|
|
23
23
|
});
|
|
24
24
|
const PanelComponent = plugin?.PanelComponent;
|
|
25
25
|
const supportedQueryTypes = plugin?.supportedQueryTypes || [];
|
|
26
|
+
// Clear out the queryResults parameter for plugins which don't support any query types
|
|
27
|
+
const supportedQueryResults = supportedQueryTypes.length > 0 ? queryResults : [];
|
|
26
28
|
// Show fullsize skeleton if the panel plugin is loading.
|
|
27
29
|
if (isPanelLoading) {
|
|
28
30
|
return /*#__PURE__*/ _jsx(Skeleton, {
|
|
@@ -35,7 +37,7 @@ import { Skeleton } from '@mui/material';
|
|
|
35
37
|
if (PanelComponent === undefined) {
|
|
36
38
|
throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);
|
|
37
39
|
}
|
|
38
|
-
for (const queryResult of
|
|
40
|
+
for (const queryResult of supportedQueryResults){
|
|
39
41
|
if (!supportedQueryTypes.includes(queryResult.definition.kind)) {
|
|
40
42
|
throw new Error(`This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`);
|
|
41
43
|
}
|
|
@@ -44,7 +46,7 @@ import { Skeleton } from '@mui/material';
|
|
|
44
46
|
spec: spec,
|
|
45
47
|
contentDimensions: contentDimensions,
|
|
46
48
|
definition: definition,
|
|
47
|
-
queryResults:
|
|
49
|
+
queryResults: supportedQueryResults
|
|
48
50
|
});
|
|
49
51
|
}
|
|
50
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"sourcesContent":["// Copyright 2025 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n const { kind, spec, contentDimensions, definition, queryResults } = props;\n const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { useErrorBoundary: true });\n const PanelComponent = plugin?.PanelComponent;\n const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n // Show fullsize skeleton if the panel plugin is loading.\n if (isPanelLoading) {\n return (\n <Skeleton\n variant=\"rectangular\"\n width={contentDimensions?.width}\n height={contentDimensions?.height}\n aria-label=\"Loading...\"\n />\n );\n }\n\n if (PanelComponent === undefined) {\n throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n }\n\n for (const queryResult of
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"sourcesContent":["// Copyright 2025 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n const { kind, spec, contentDimensions, definition, queryResults } = props;\n const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { useErrorBoundary: true });\n const PanelComponent = plugin?.PanelComponent;\n const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n // Clear out the queryResults parameter for plugins which don't support any query types\n const supportedQueryResults = supportedQueryTypes.length > 0 ? queryResults : [];\n\n // Show fullsize skeleton if the panel plugin is loading.\n if (isPanelLoading) {\n return (\n <Skeleton\n variant=\"rectangular\"\n width={contentDimensions?.width}\n height={contentDimensions?.height}\n aria-label=\"Loading...\"\n />\n );\n }\n\n if (PanelComponent === undefined) {\n throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n }\n\n for (const queryResult of supportedQueryResults) {\n if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n throw new Error(\n `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n );\n }\n }\n\n return (\n <PanelComponent\n spec={spec}\n contentDimensions={contentDimensions}\n definition={definition}\n queryResults={supportedQueryResults}\n />\n );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","useErrorBoundary","PanelComponent","supportedQueryTypes","supportedQueryResults","length","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"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,SAASA,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,kBAAkB;IAAK;IACtG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAC7D,uFAAuF;IACvF,MAAMC,wBAAwBD,oBAAoBE,MAAM,GAAG,IAAIT,eAAe,EAAE;IAEhF,yDAAyD;IACzD,IAAII,gBAAgB;QAClB,qBACE,KAACX;YACCiB,SAAQ;YACRC,OAAOb,mBAAmBa;YAC1BC,QAAQd,mBAAmBc;YAC3BC,cAAW;;IAGjB;IAEA,IAAIP,mBAAmBQ,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEnB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMoB,eAAeR,sBAAuB;QAC/C,IAAI,CAACD,oBAAoBU,QAAQ,CAACD,YAAYjB,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAImB,MACR,CAAC,6CAA6C,EAAEC,YAAYjB,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBW,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACZ;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcQ;;AAGpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA6NzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
|