@perses-dev/dashboards 0.53.0 → 0.54.0-beta.0

package/dist/components/PanelDrawer/PanelDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 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\n/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 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 { ReactElement, useState, useMemo, ReactNode, useCallback } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { usePanelEditor, usePanelKey } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n  const panelKey = usePanelKey(panelEditor?.panelGroupItemId);\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && !isClosing;\n\n  const handleSave = useCallback(\n    (values: PanelEditorValues) => {\n      // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n      if (panelEditor === undefined || values === undefined) {\n        throw new Error('Cannot apply changes');\n      }\n      panelEditor.applyChanges(values);\n      setIsClosing(true);\n    },\n    [panelEditor]\n  );\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = useCallback(() => {\n    panelEditor?.close();\n    setIsClosing(false);\n  }, [panelEditor]);\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  const drawer = useMemo(() => {\n    return (\n      <Drawer\n        isOpen={isOpen}\n        onClose={handleClickOut}\n        slotProps={{ transition: { onExited: handleExited } }}\n        data-testid=\"panel-editor\"\n      >\n        {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n        {panelEditor && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelEditorForm\n              panelKey={panelKey}\n              initialAction={panelEditor.mode}\n              initialValues={panelEditor.initialValues}\n              onSave={handleSave}\n              onClose={handleClose}\n            />\n          </ErrorBoundary>\n        )}\n      </Drawer>\n    );\n  }, [handleExited, handleSave, isOpen, panelEditor, panelKey]);\n\n  // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider\n  if (panelEditor?.panelGroupItemId?.repeatVariable) {\n    return (\n      <RepeatVariableWrapper repeatVariable={panelEditor.panelGroupItemId.repeatVariable}>\n        {drawer}\n      </RepeatVariableWrapper>\n    );\n  }\n\n  return drawer;\n};\n\n// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value\n// This is necessary for previewing panels that use repeat variables and query editor\nfunction RepeatVariableWrapper({\n  repeatVariable,\n  children,\n}: {\n  repeatVariable: [string, string];\n  children: ReactNode;\n}): ReactElement {\n  const variables = useVariableValues();\n\n  return (\n    <VariableContext.Provider\n      value={{ state: { ...variables, [repeatVariable[0]]: { value: repeatVariable[1], loading: false } } }}\n    >\n      {children}\n    </VariableContext.Provider>\n  );\n}\n"],"names":["useState","useMemo","useCallback","Drawer","ErrorAlert","ErrorBoundary","useVariableValues","VariableContext","usePanelEditor","usePanelKey","PanelEditorForm","PanelDrawer","panelEditor","panelKey","panelGroupItemId","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","drawer","onClose","slotProps","transition","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave","repeatVariable","RepeatVariableWrapper","children","variables","Provider","value","state","loading"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,uDAAuD,GACvD,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,EAAEC,OAAO,EAAaC,WAAW,QAAQ,QAAQ;AAChF,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,4BAA4B;AAC/E,SAASC,cAAc,EAAEC,WAAW,QAAQ,gBAAgB;AAC5D,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcJ;IACpB,MAAMK,WAAWJ,YAAYG,aAAaE;IAE1C,iHAAiH;IACjH,MAAM,CAACC,WAAWC,aAAa,GAAGhB,SAAS;IAE3C,oEAAoE;IACpE,MAAMiB,SAASL,gBAAgBM,aAAa,CAACH;IAE7C,MAAMI,aAAajB,YACjB,CAACkB;QACC,kHAAkH;QAClH,IAAIR,gBAAgBM,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAT,YAAYU,YAAY,CAACF;QACzBJ,aAAa;IACf,GACA;QAACJ;KAAY;IAGf,MAAMW,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAetB,YAAY;QAC/BU,aAAaa;QACbT,aAAa;IACf,GAAG;QAACJ;KAAY;IAEhB,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMc,iBAAiB;IACrB,cAAc,GAChB;IAEA,MAAMC,SAAS1B,QAAQ;QACrB,qBACE,KAACE;YACCc,QAAQA;YACRW,SAASF;YACTG,WAAW;gBAAEC,YAAY;oBAAEC,UAAUP;gBAAa;YAAE;YACpDQ,eAAY;sBAGXpB,6BACC,KAACP;gBAAc4B,mBAAmB7B;0BAChC,cAAA,KAACM;oBACCG,UAAUA;oBACVqB,eAAetB,YAAYuB,IAAI;oBAC/BC,eAAexB,YAAYwB,aAAa;oBACxCC,QAAQlB;oBACRS,SAASL;;;;IAMrB,GAAG;QAACC;QAAcL;QAAYF;QAAQL;QAAaC;KAAS;IAE5D,2GAA2G;IAC3G,IAAID,aAAaE,kBAAkBwB,gBAAgB;QACjD,qBACE,KAACC;YAAsBD,gBAAgB1B,YAAYE,gBAAgB,CAACwB,cAAc;sBAC/EX;;IAGP;IAEA,OAAOA;AACT,EAAE;AAEF,sFAAsF;AACtF,qFAAqF;AACrF,SAASY,sBAAsB,EAC7BD,cAAc,EACdE,QAAQ,EAIT;IACC,MAAMC,YAAYnC;IAElB,qBACE,KAACC,gBAAgBmC,QAAQ;QACvBC,OAAO;YAAEC,OAAO;gBAAE,GAAGH,SAAS;gBAAE,CAACH,cAAc,CAAC,EAAE,CAAC,EAAE;oBAAEK,OAAOL,cAAc,CAAC,EAAE;oBAAEO,SAAS;gBAAM;YAAE;QAAE;kBAEnGL;;AAGP"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 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\n/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 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 { ReactElement, useState, useMemo, ReactNode, useCallback } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/spec';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { usePanelEditor, usePanelKey } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n  const panelKey = usePanelKey(panelEditor?.panelGroupItemId);\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && !isClosing;\n\n  const handleSave = useCallback(\n    (values: PanelEditorValues) => {\n      // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n      if (panelEditor === undefined || values === undefined) {\n        throw new Error('Cannot apply changes');\n      }\n      panelEditor.applyChanges(values);\n      setIsClosing(true);\n    },\n    [panelEditor]\n  );\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = useCallback(() => {\n    panelEditor?.close();\n    setIsClosing(false);\n  }, [panelEditor]);\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  const drawer = useMemo(() => {\n    return (\n      <Drawer\n        isOpen={isOpen}\n        onClose={handleClickOut}\n        slotProps={{ transition: { onExited: handleExited } }}\n        data-testid=\"panel-editor\"\n      >\n        {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n        {panelEditor && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelEditorForm\n              panelKey={panelKey}\n              initialAction={panelEditor.mode}\n              initialValues={panelEditor.initialValues}\n              onSave={handleSave}\n              onClose={handleClose}\n            />\n          </ErrorBoundary>\n        )}\n      </Drawer>\n    );\n  }, [handleExited, handleSave, isOpen, panelEditor, panelKey]);\n\n  // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider\n  if (panelEditor?.panelGroupItemId?.repeatVariable) {\n    return (\n      <RepeatVariableWrapper repeatVariable={panelEditor.panelGroupItemId.repeatVariable}>\n        {drawer}\n      </RepeatVariableWrapper>\n    );\n  }\n\n  return drawer;\n};\n\n// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value\n// This is necessary for previewing panels that use repeat variables and query editor\nfunction RepeatVariableWrapper({\n  repeatVariable,\n  children,\n}: {\n  repeatVariable: [string, string];\n  children: ReactNode;\n}): ReactElement {\n  const variables = useVariableValues();\n\n  return (\n    <VariableContext.Provider\n      value={{ state: { ...variables, [repeatVariable[0]]: { value: repeatVariable[1], loading: false } } }}\n    >\n      {children}\n    </VariableContext.Provider>\n  );\n}\n"],"names":["useState","useMemo","useCallback","Drawer","ErrorAlert","ErrorBoundary","useVariableValues","VariableContext","usePanelEditor","usePanelKey","PanelEditorForm","PanelDrawer","panelEditor","panelKey","panelGroupItemId","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","drawer","onClose","slotProps","transition","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave","repeatVariable","RepeatVariableWrapper","children","variables","Provider","value","state","loading"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,uDAAuD,GACvD,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,EAAEC,OAAO,EAAaC,WAAW,QAAQ,QAAQ;AAChF,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,4BAA4B;AAC/E,SAASC,cAAc,EAAEC,WAAW,QAAQ,gBAAgB;AAC5D,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcJ;IACpB,MAAMK,WAAWJ,YAAYG,aAAaE;IAE1C,iHAAiH;IACjH,MAAM,CAACC,WAAWC,aAAa,GAAGhB,SAAS;IAE3C,oEAAoE;IACpE,MAAMiB,SAASL,gBAAgBM,aAAa,CAACH;IAE7C,MAAMI,aAAajB,YACjB,CAACkB;QACC,kHAAkH;QAClH,IAAIR,gBAAgBM,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAT,YAAYU,YAAY,CAACF;QACzBJ,aAAa;IACf,GACA;QAACJ;KAAY;IAGf,MAAMW,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAetB,YAAY;QAC/BU,aAAaa;QACbT,aAAa;IACf,GAAG;QAACJ;KAAY;IAEhB,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMc,iBAAiB;IACrB,cAAc,GAChB;IAEA,MAAMC,SAAS1B,QAAQ;QACrB,qBACE,KAACE;YACCc,QAAQA;YACRW,SAASF;YACTG,WAAW;gBAAEC,YAAY;oBAAEC,UAAUP;gBAAa;YAAE;YACpDQ,eAAY;sBAGXpB,6BACC,KAACP;gBAAc4B,mBAAmB7B;0BAChC,cAAA,KAACM;oBACCG,UAAUA;oBACVqB,eAAetB,YAAYuB,IAAI;oBAC/BC,eAAexB,YAAYwB,aAAa;oBACxCC,QAAQlB;oBACRS,SAASL;;;;IAMrB,GAAG;QAACC;QAAcL;QAAYF;QAAQL;QAAaC;KAAS;IAE5D,2GAA2G;IAC3G,IAAID,aAAaE,kBAAkBwB,gBAAgB;QACjD,qBACE,KAACC;YAAsBD,gBAAgB1B,YAAYE,gBAAgB,CAACwB,cAAc;sBAC/EX;;IAGP;IAEA,OAAOA;AACT,EAAE;AAEF,sFAAsF;AACtF,qFAAqF;AACrF,SAASY,sBAAsB,EAC7BD,cAAc,EACdE,QAAQ,EAIT;IACC,MAAMC,YAAYnC;IAElB,qBACE,KAACC,gBAAgBmC,QAAQ;QACvBC,OAAO;YAAEC,OAAO;gBAAE,GAAGH,SAAS;gBAAE,CAACH,cAAc,CAAC,EAAE,CAAC,EAAE;oBAAEK,OAAOL,cAAc,CAAC,EAAE;oBAAEO,SAAS;gBAAM;YAAE;QAAE;kBAEnGL;;AAGP"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
-import { Action, PanelEditorValues } from '@perses-dev/core';
+import { Action } from '@perses-dev/core';
+import { PanelEditorValues } from '@perses-dev/spec';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
     initialAction: Action;

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +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,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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,CA+OzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"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,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgBtE,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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,CA+OzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { usePanelEditor } from './usePanelEditor';\nimport { PanelQueriesSharedControls } from './PanelQueriesSharedControls';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  panelKey?: string;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n  const { initialValues, initialAction, panelKey, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n    (data) => {\n      onSave(data);\n    },\n    [onSave]\n  );\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    const currentValues = form.getValues();\n\n    // Normalize display: if both name and description are undefined, set display to undefined\n    const normalizeDisplay = (values: PanelEditorValues): PanelEditorValues => {\n      if (\n        values.panelDefinition.spec.display?.name === undefined &&\n        values.panelDefinition.spec.display?.description === undefined\n      ) {\n        values.panelDefinition.spec.display = undefined;\n      }\n      return values;\n    };\n\n    const normalizedInitial = normalizeDisplay(JSON.parse(JSON.stringify(initialValues)));\n    const normalizedCurrent = normalizeDisplay(JSON.parse(JSON.stringify(currentValues)));\n\n    if (JSON.stringify(normalizedInitial) !== JSON.stringify(normalizedCurrent)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n  const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n  const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n\n  const handleSubmit = useCallback(() => {\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <FormProvider {...form}>\n      <PanelEditorProvider>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            padding: (theme) => theme.spacing(1, 2),\n            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n          }}\n        >\n          <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n            <Typography variant=\"h2\">{titleAction} Panel</Typography>\n            {panelKey && <Typography variant=\"subtitle1\">(ID: {panelKey})</Typography>}\n          </Stack>\n          <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n            <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n              {submitText}\n            </Button>\n            <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n              Cancel\n            </Button>\n          </Stack>\n        </Box>\n        <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n          <Grid container spacing={2}>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.name\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Name\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedName ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setName(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"groupId\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    select\n                    {...field}\n                    required\n                    fullWidth\n                    label=\"Group\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  >\n                    {panelGroups.map((panelGroup, index) => (\n                      <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                        {panelGroup.title ?? `Group ${index + 1}`}\n                      </MenuItem>\n                    ))}\n                  </TextField>\n                )}\n              />\n            </Grid>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedDescription ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setDescription(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.plugin.kind\"\n                render={({ field, fieldState }) => (\n                  <PluginKindSelect\n                    {...field}\n                    pluginTypes={['Panel']}\n                    required\n                    fullWidth\n                    label=\"Type\"\n                    disabled={pluginEditor.isLoading}\n                    error={!!pluginEditor.error || !!fieldState.error}\n                    helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                    value={{ type: 'Panel', kind: watchedPluginKind }}\n                    onChange={(event) => {\n                      field.onChange(event.kind);\n                      pluginEditor.onSelectionChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelQueriesSharedControls\n                control={form.control}\n                plugin={plugin}\n                panelDefinition={panelDefinition}\n                onQueriesChange={(q) => setQueries(q)}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n                onJSONChange={handlePanelDefinitionChange}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Box>\n        <DiscardChangesConfirmationDialog\n          description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n          isOpen={isDiscardDialogOpened}\n          onCancel={() => {\n            setDiscardDialogOpened(false);\n          }}\n          onDiscardChanges={() => {\n            setDiscardDialogOpened(false);\n            onClose();\n          }}\n        />\n      </PanelEditorProvider>\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelEditorProvider","usePanelEditor","PanelQueriesSharedControls","PanelEditorForm","props","initialValues","initialAction","panelKey","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","pluginEditor","pluginTypes","value","selection","kind","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","currentValues","getValues","normalizeDisplay","values","display","description","normalizedInitial","JSON","parse","stringify","normalizedCurrent","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","handleSubmit","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","direction","variant","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","fullWidth","label","error","helperText","message","event","target","select","required","map","panelGroup","index","title","isLoading","onSelectionChange","FallbackComponent","onQueriesChange","q","onPluginSpecChange","onSpecChange","onJSONChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action } from '@perses-dev/core'; // TODO Perses permission should not be used\nimport { PanelDefinition, PanelEditorValues } from '@perses-dev/spec';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { usePanelEditor } from './usePanelEditor';\nimport { PanelQueriesSharedControls } from './PanelQueriesSharedControls';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  panelKey?: string;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n  const { initialValues, initialAction, panelKey, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n    (data) => {\n      onSave(data);\n    },\n    [onSave]\n  );\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    const currentValues = form.getValues();\n\n    // Normalize display: if both name and description are undefined, set display to undefined\n    const normalizeDisplay = (values: PanelEditorValues): PanelEditorValues => {\n      if (\n        values.panelDefinition.spec.display?.name === undefined &&\n        values.panelDefinition.spec.display?.description === undefined\n      ) {\n        values.panelDefinition.spec.display = undefined;\n      }\n      return values;\n    };\n\n    const normalizedInitial = normalizeDisplay(JSON.parse(JSON.stringify(initialValues)));\n    const normalizedCurrent = normalizeDisplay(JSON.parse(JSON.stringify(currentValues)));\n\n    if (JSON.stringify(normalizedInitial) !== JSON.stringify(normalizedCurrent)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n  const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n  const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n\n  const handleSubmit = useCallback(() => {\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <FormProvider {...form}>\n      <PanelEditorProvider>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            padding: (theme) => theme.spacing(1, 2),\n            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n          }}\n        >\n          <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n            <Typography variant=\"h2\">{titleAction} Panel</Typography>\n            {panelKey && <Typography variant=\"subtitle1\">(ID: {panelKey})</Typography>}\n          </Stack>\n          <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n            <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n              {submitText}\n            </Button>\n            <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n              Cancel\n            </Button>\n          </Stack>\n        </Box>\n        <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n          <Grid container spacing={2}>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.name\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Name\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedName ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setName(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"groupId\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    select\n                    {...field}\n                    required\n                    fullWidth\n                    label=\"Group\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  >\n                    {panelGroups.map((panelGroup, index) => (\n                      <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                        {panelGroup.title ?? `Group ${index + 1}`}\n                      </MenuItem>\n                    ))}\n                  </TextField>\n                )}\n              />\n            </Grid>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedDescription ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setDescription(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.plugin.kind\"\n                render={({ field, fieldState }) => (\n                  <PluginKindSelect\n                    {...field}\n                    pluginTypes={['Panel']}\n                    required\n                    fullWidth\n                    label=\"Type\"\n                    disabled={pluginEditor.isLoading}\n                    error={!!pluginEditor.error || !!fieldState.error}\n                    helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                    value={{ type: 'Panel', kind: watchedPluginKind }}\n                    onChange={(event) => {\n                      field.onChange(event.kind);\n                      pluginEditor.onSelectionChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelQueriesSharedControls\n                control={form.control}\n                plugin={plugin}\n                panelDefinition={panelDefinition}\n                onQueriesChange={(q) => setQueries(q)}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n                onJSONChange={handlePanelDefinitionChange}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Box>\n        <DiscardChangesConfirmationDialog\n          description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n          isOpen={isDiscardDialogOpened}\n          onCancel={() => {\n            setDiscardDialogOpened(false);\n          }}\n          onDiscardChanges={() => {\n            setDiscardDialogOpened(false);\n            onClose();\n          }}\n        />\n      </PanelEditorProvider>\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelEditorProvider","usePanelEditor","PanelQueriesSharedControls","PanelEditorForm","props","initialValues","initialAction","panelKey","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","pluginEditor","pluginTypes","value","selection","kind","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","currentValues","getValues","normalizeDisplay","values","display","description","normalizedInitial","JSON","parse","stringify","normalizedCurrent","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","handleSubmit","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","direction","variant","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","fullWidth","label","error","helperText","message","event","target","select","required","map","panelGroup","index","title","isLoading","onSelectionChange","FallbackComponent","onQueriesChange","q","onPluginSpecChange","onSpecChange","onJSONChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
-import { PanelEditorValues } from '@perses-dev/core';
+import { PanelEditorValues } from '@perses-dev/spec';
 export declare function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null;
 //# sourceMappingURL=PanelPreview.d.ts.map

package/dist/components/PanelDrawer/PanelPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useContext, useEffect, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\nimport { PanelEditorContext } from '../../context';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  useEffect(() => {\n    const width = boxRef.current?.getBoundingClientRect().width ?? PANEL_PREVIEW_DEFAULT_WIDTH;\n    panelEditorContext?.preview?.setPreviewPanelWidth?.(width);\n  }, [panelEditorContext]);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <Panel definition={panelDefinition} />\n    </Box>\n  );\n}\n"],"names":["useContext","useEffect","useRef","Box","Panel","PanelEditorContext","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","panelEditorContext","width","current","getBoundingClientRect","preview","setPreviewPanelWidth","spec","plugin","kind","ref","height","definition"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AACpE,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASR,OAAuB;IACtC,MAAMS,qBAAqBX,WAAWK;IAEtCJ,UAAU;QACR,MAAMW,QAAQF,OAAOG,OAAO,EAAEC,wBAAwBF,SAASL;QAC/DI,oBAAoBI,SAASC,uBAAuBJ;IACtD,GAAG;QAACD;KAAmB;IAEvB,IAAIF,gBAAgBQ,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,qBACE,KAAChB;QAAIiB,KAAKV;QAAQW,QAAQf;kBACxB,cAAA,KAACF;YAAMkB,YAAYb;;;AAGzB"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useContext, useEffect, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { PanelEditorValues } from '@perses-dev/spec';\nimport { Panel } from '../Panel';\nimport { PanelEditorContext } from '../../context';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  useEffect(() => {\n    const width = boxRef.current?.getBoundingClientRect().width ?? PANEL_PREVIEW_DEFAULT_WIDTH;\n    panelEditorContext?.preview?.setPreviewPanelWidth?.(width);\n  }, [panelEditorContext]);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <Panel definition={panelDefinition} />\n    </Box>\n  );\n}\n"],"names":["useContext","useEffect","useRef","Box","Panel","PanelEditorContext","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","panelEditorContext","width","current","getBoundingClientRect","preview","setPreviewPanelWidth","spec","plugin","kind","ref","height","definition"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AACpE,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASR,OAAuB;IACtC,MAAMS,qBAAqBX,WAAWK;IAEtCJ,UAAU;QACR,MAAMW,QAAQF,OAAOG,OAAO,EAAEC,wBAAwBF,SAASL;QAC/DI,oBAAoBI,SAASC,uBAAuBJ;IACtD,GAAG;QAACD;KAAmB;IAEvB,IAAIF,gBAAgBQ,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,qBACE,KAAChB;QAAIiB,KAAKV;QAAQW,QAAQf;kBACxB,cAAA,KAACF;YAAMkB,YAAYb;;;AAGzB"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts

@@ -1,4 +1,4 @@
-import { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
 import { Control } from 'react-hook-form';
 import { ReactElement } from 'react';
 export interface PanelQueriesSharedControlsProps {

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA2DhD"}
+{"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA8EhD"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js

@@ -32,6 +32,21 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
                 spec: query.spec.plugin.spec
             };
         }) ?? []);
+    const handleOnQueriesChange = useCallback((queries)=>{
+        onQueriesChange(queries);
+        // If the number of queries has changed, force preview definition update to remove results of deleted queries.
+        if (queries.length !== previewDefinition.length) {
+            setPreviewDefinition(queries.map((query)=>{
+                return {
+                    kind: query.spec.plugin.kind,
+                    spec: query.spec.plugin.spec
+                };
+            }));
+        }
+    }, [
+        onQueriesChange,
+        previewDefinition.length
+    ]);
     const handleRunQuery = useCallback((index, newDef)=>{
         setPreviewDefinition((prev)=>{
             const newDefinitions = [
@@ -77,7 +92,7 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
                         control: control,
                         panelDefinition: panelDefinition,
                         onJSONChange: onJSONChange,
-                        onQueriesChange: onQueriesChange,
+                        onQueriesChange: handleOnQueriesChange,
                         onQueryRun: handleRunQuery,
                         onPluginSpecChange: onPluginSpecChange
                     })

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const pluginQueryOptions = useMemo(\n    () =>\n      typeof pluginPreview?.queryOptions === 'function'\n        ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n        : pluginPreview?.queryOptions,\n    [panelDefinition.spec.plugin.spec, pluginPreview]\n  );\n\n  const [previewDefinition, setPreviewDefinition] = useState(\n    () =>\n      panelDefinition.spec.queries?.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      }) ?? []\n  );\n\n  const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n    setPreviewDefinition((prev) => {\n      const newDefinitions = [...prev];\n      newDefinitions[index] = {\n        kind: newDef.spec.plugin.kind,\n        spec: newDef.spec.plugin.spec,\n      };\n      return newDefinitions;\n    });\n  }, []);\n\n  return (\n    <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={onQueriesChange}\n            onQueryRun={handleRunQuery}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAWjF,oGAAoG;AACpG,oJAAoJ;AACpJ,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGd,UAAU,SAASO,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBb,WAAWP;IAEtC,MAAMqB,kBAAkBhB,mBAAmBe,oBAAoBE,QAAQC;IAEvE,MAAMC,qBAAqBhB,QACzB,IACE,OAAOU,eAAeO,iBAAiB,aACnCP,eAAeO,aAAaZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI,IAC5DR,eAAeO,cACrB;QAACZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI;QAAER;KAAc;IAGnD,MAAM,CAACS,mBAAmBC,qBAAqB,GAAGnB,SAChD,IACEI,gBAAgBa,IAAI,CAACG,OAAO,EAAEC,IAAI,CAACC;YACjC,OAAO;gBACLZ,MAAMY,MAAML,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC5BO,MAAMK,MAAML,IAAI,CAACf,MAAM,CAACe,IAAI;YAC9B;QACF,MAAM,EAAE;IAGZ,MAAMM,iBAAiB1B,YAAY,CAAC2B,OAAeC;QACjDN,qBAAqB,CAACO;YACpB,MAAMC,iBAAiB;mBAAID;aAAK;YAChCC,cAAc,CAACH,MAAM,GAAG;gBACtBd,MAAMe,OAAOR,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC7BO,MAAMQ,OAAOR,IAAI,CAACf,MAAM,CAACe,IAAI;YAC/B;YACA,OAAOU;QACT;IACF,GAAG,EAAE;IAEL,qBACE,MAAClC;QAAoBmC,aAAaV;QAAmBW,SAAS;YAAEjB;YAAiB,GAAGG,kBAAkB;QAAC;;0BACrG,MAAC5B;gBAAK2C,IAAI;gBAACC,IAAI;;kCACb,KAAC3C;wBAAW4C,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,KAAC3C;wBAAc4C,mBAAmB7C;kCAChC,cAAA,KAACG;4BAAaY,iBAAiBA;;;;;0BAGnC,KAACjB;gBAAK2C,IAAI;gBAACC,IAAI;0BACb,cAAA,KAACzC;oBAAc4C,mBAAmB7C;8BAChC,cAAA,KAACK;wBACCS,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,iBAAiBA;wBACjB8B,YAAYZ;wBACZjB,oBAAoBA;;;;;;AAMhC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const pluginQueryOptions = useMemo(\n    () =>\n      typeof pluginPreview?.queryOptions === 'function'\n        ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n        : pluginPreview?.queryOptions,\n    [panelDefinition.spec.plugin.spec, pluginPreview]\n  );\n\n  const [previewDefinition, setPreviewDefinition] = useState(\n    () =>\n      panelDefinition.spec.queries?.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      }) ?? []\n  );\n\n  const handleOnQueriesChange = useCallback(\n    (queries: QueryDefinition[]) => {\n      onQueriesChange(queries);\n\n      // If the number of queries has changed, force preview definition update to remove results of deleted queries.\n      if (queries.length !== previewDefinition.length) {\n        setPreviewDefinition(\n          queries.map((query) => {\n            return {\n              kind: query.spec.plugin.kind,\n              spec: query.spec.plugin.spec,\n            };\n          })\n        );\n      }\n    },\n    [onQueriesChange, previewDefinition.length]\n  );\n\n  const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n    setPreviewDefinition((prev) => {\n      const newDefinitions = [...prev];\n      newDefinitions[index] = {\n        kind: newDef.spec.plugin.kind,\n        spec: newDef.spec.plugin.spec,\n      };\n      return newDefinitions;\n    });\n  }, []);\n\n  return (\n    <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={handleOnQueriesChange}\n            onQueryRun={handleRunQuery}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleOnQueriesChange","length","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":"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"}

package/dist/components/PanelDrawer/usePanelEditor.d.ts

@@ -1,4 +1,4 @@
-import { Definition, Link, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { Definition, Link, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
 interface UsePanelEditorResult {
     setName: (value: string) => void;
     panelDefinition: PanelDefinition;

package/dist/components/PanelDrawer/usePanelEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.tsx"],"sourcesContent":["// Copyright 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 { useCallback, useMemo, useState } from 'react';\nimport { Definition, Link, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\n\ninterface UsePanelEditorResult {\n  setName: (value: string) => void;\n  panelDefinition: PanelDefinition;\n  setPlugin: (value: Definition<UnknownSpec>) => void;\n  setLinks: (value?: Link[]) => void;\n  setDescription: (value?: string) => void;\n  setPanelDefinition: (panelDefinition: PanelDefinition) => void;\n  setQueries: (queries?: QueryDefinition[], hideQueryEditor?: boolean) => void;\n}\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor: (panelDefinition: PanelDefinition) => UsePanelEditorResult = (\n  panelDefinition: PanelDefinition\n) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;\n  // Provide default display object if undefined\n  const displayData = display ?? { name: undefined, description: undefined };\n  const [name, setName] = useState(displayData.name);\n  const [description, setDescription] = useState(displayData.description);\n  const [links, setLinks] = useState(initialLinks);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries, links } = panelDefinition.spec;\n      setName(display?.name);\n      setDescription(display?.description);\n      setLinks(links);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setLinks, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: name !== undefined || description !== undefined ? { name, description } : undefined,\n          plugin,\n          queries: currentQueries,\n          links,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setLinks,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, links, plugin, currentQueries, setQueries, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","links","initialLinks","spec","displayData","name","undefined","description","setName","setDescription","setLinks","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","setPanelDefinition","kind"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAavD;;;CAGC,GACD,OAAO,MAAMC,iBAA6E,CACxFC;IAEA,MAAM,EAAEC,OAAO,EAAEC,QAAQC,gBAAgB,EAAEC,SAASC,cAAc,EAAEC,OAAOC,YAAY,EAAE,GAAGP,gBAAgBQ,IAAI;IAChH,8CAA8C;IAC9C,MAAMC,cAAcR,WAAW;QAAES,MAAMC;QAAWC,aAAaD;IAAU;IACzE,MAAM,CAACD,MAAMG,QAAQ,GAAGf,SAASW,YAAYC,IAAI;IACjD,MAAM,CAACE,aAAaE,eAAe,GAAGhB,SAASW,YAAYG,WAAW;IACtE,MAAM,CAACN,OAAOS,SAAS,GAAGjB,SAASS;IACnC,MAAM,CAACL,QAAQc,UAAU,GAAGlB,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACc,aAAaC,eAAe,GAAGpB,SAASO;IAC/C,MAAM,CAACc,gBAAgBC,kBAAkB,GAAGtB,SAASO;IAErD;;;GAGC,GACD,MAAMgB,aAAazB,YACjB,CAACQ,SAA6BkB;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBT;QACpB,OAAO;YACLS,kBAAkBhB,YAAYO,YAAYM,cAAcb;QAC1D;IACF,GACA;QAACgB;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMM,qBAAqB3B,YACzB,CAACI;QACC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEE,OAAO,EAAEE,KAAK,EAAE,GAAGN,gBAAgBQ,IAAI;QAChEK,QAAQZ,SAASS;QACjBI,eAAeb,SAASW;QACxBG,SAAST;QACTU,UAAUd;QACVmB,WAAWjB;IACb,GACA;QAACS;QAASC;QAAgBC;QAAUC;QAAWK;KAAW;IAG5D,OAAOxB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfwB,MAAM;gBACNhB,MAAM;oBACJP,SAASS,SAASC,aAAaC,gBAAgBD,YAAY;wBAAED;wBAAME;oBAAY,IAAID;oBACnFT;oBACAE,SAASe;oBACTb;gBACF;YACF;YACAO;YACAC;YACAC;YACAM;YACAL;YACAO;QACF,CAAA,GACA;QAACb;QAAME;QAAaN;QAAOJ;QAAQiB;QAAgBE;QAAYE;KAAmB;AAEtF,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.tsx"],"sourcesContent":["// Copyright 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 { useCallback, useMemo, useState } from 'react';\nimport { Definition, Link, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\n\ninterface UsePanelEditorResult {\n  setName: (value: string) => void;\n  panelDefinition: PanelDefinition;\n  setPlugin: (value: Definition<UnknownSpec>) => void;\n  setLinks: (value?: Link[]) => void;\n  setDescription: (value?: string) => void;\n  setPanelDefinition: (panelDefinition: PanelDefinition) => void;\n  setQueries: (queries?: QueryDefinition[], hideQueryEditor?: boolean) => void;\n}\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor: (panelDefinition: PanelDefinition) => UsePanelEditorResult = (\n  panelDefinition: PanelDefinition\n) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;\n  // Provide default display object if undefined\n  const displayData = display ?? { name: undefined, description: undefined };\n  const [name, setName] = useState(displayData.name);\n  const [description, setDescription] = useState(displayData.description);\n  const [links, setLinks] = useState(initialLinks);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries, links } = panelDefinition.spec;\n      setName(display?.name);\n      setDescription(display?.description);\n      setLinks(links);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setLinks, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: name !== undefined || description !== undefined ? { name, description } : undefined,\n          plugin,\n          queries: currentQueries,\n          links,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setLinks,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, links, plugin, currentQueries, setQueries, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","links","initialLinks","spec","displayData","name","undefined","description","setName","setDescription","setLinks","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","setPanelDefinition","kind"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAavD;;;CAGC,GACD,OAAO,MAAMC,iBAA6E,CACxFC;IAEA,MAAM,EAAEC,OAAO,EAAEC,QAAQC,gBAAgB,EAAEC,SAASC,cAAc,EAAEC,OAAOC,YAAY,EAAE,GAAGP,gBAAgBQ,IAAI;IAChH,8CAA8C;IAC9C,MAAMC,cAAcR,WAAW;QAAES,MAAMC;QAAWC,aAAaD;IAAU;IACzE,MAAM,CAACD,MAAMG,QAAQ,GAAGf,SAASW,YAAYC,IAAI;IACjD,MAAM,CAACE,aAAaE,eAAe,GAAGhB,SAASW,YAAYG,WAAW;IACtE,MAAM,CAACN,OAAOS,SAAS,GAAGjB,SAASS;IACnC,MAAM,CAACL,QAAQc,UAAU,GAAGlB,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACc,aAAaC,eAAe,GAAGpB,SAASO;IAC/C,MAAM,CAACc,gBAAgBC,kBAAkB,GAAGtB,SAASO;IAErD;;;GAGC,GACD,MAAMgB,aAAazB,YACjB,CAACQ,SAA6BkB;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBT;QACpB,OAAO;YACLS,kBAAkBhB,YAAYO,YAAYM,cAAcb;QAC1D;IACF,GACA;QAACgB;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMM,qBAAqB3B,YACzB,CAACI;QACC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEE,OAAO,EAAEE,KAAK,EAAE,GAAGN,gBAAgBQ,IAAI;QAChEK,QAAQZ,SAASS;QACjBI,eAAeb,SAASW;QACxBG,SAAST;QACTU,UAAUd;QACVmB,WAAWjB;IACb,GACA;QAACS;QAASC;QAAgBC;QAAUC;QAAWK;KAAW;IAG5D,OAAOxB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfwB,MAAM;gBACNhB,MAAM;oBACJP,SAASS,SAASC,aAAaC,gBAAgBD,YAAY;wBAAED;wBAAME;oBAAY,IAAID;oBACnFT;oBACAE,SAASe;oBACTb;gBACF;YACF;YACAO;YACAC;YACAC;YACAM;YACAL;YACAO;QACF,CAAA,GACA;QAACb;QAAME;QAAaN;QAAOJ;QAAQiB;QAAgBE;QAAYE;KAAmB;AAEtF,EAAE"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.tsx"],"sourcesContent":["// Copyright 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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.tsx"],"sourcesContent":["// Copyright 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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { QueryDefinition } from '@perses-dev/core';
+import { QueryDefinition } from '@perses-dev/spec';
 export interface QueryViewerDialogProps {
     open: boolean;
     queryDefinitions: QueryDefinition[];

package/dist/components/QueryViewerDialog/QueryViewerDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.tsx"],"sourcesContent":["// Copyright 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 React, { ReactElement, useMemo } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button, Divider } from '@mui/material';\nimport { PluginSpecEditor } from '@perses-dev/plugin-system';\nimport { QueryDefinition } from '@perses-dev/core';\n\nexport interface QueryViewerDialogProps {\n  open: boolean;\n  queryDefinitions: QueryDefinition[];\n  onClose: () => void;\n}\n\nexport function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement {\n  const queryRows = useMemo(() => {\n    if (!queryDefinitions?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queryDefinitions.forEach((query, index) => {\n      if (query?.spec?.plugin?.kind && query?.kind) {\n        queryItems.push(\n          <React.Fragment key={`query-${index}`}>\n            <PluginSpecEditor\n              value={query.spec.plugin.spec}\n              pluginSelection={{ kind: query.spec.plugin.kind, type: query.kind }}\n              onChange={(): void => {}}\n              isReadonly\n            />\n            {index < queryDefinitions.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queryDefinitions]);\n\n  return (\n    <Dialog open={open} onClose={onClose} maxWidth=\"lg\" fullWidth={true}>\n      <Dialog.Header>Query Viewer</Dialog.Header>\n      <Dialog.Content>{queryRows}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onClose}>\n          Close\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n}\n"],"names":["React","useMemo","Dialog","Button","Divider","PluginSpecEditor","QueryViewerDialog","open","queryDefinitions","onClose","queryRows","length","queryItems","forEach","query","index","spec","plugin","kind","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","maxWidth","fullWidth","Header","Content","Actions","variant","color","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAuBC,OAAO,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,EAAEC,OAAO,QAAQ,gBAAgB;AAChD,SAASC,gBAAgB,QAAQ,4BAA4B;AAS7D,OAAO,SAASC,kBAAkB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,OAAO,EAA0B;IAC3F,MAAMC,YAAYT,QAAQ;QACxB,IAAI,CAACO,kBAAkBG,QAAQ,OAAO;QAEtC,MAAMC,aAA6B,EAAE;QACrCJ,iBAAiBK,OAAO,CAAC,CAACC,OAAOC;YAC/B,IAAID,OAAOE,MAAMC,QAAQC,QAAQJ,OAAOI,MAAM;gBAC5CN,WAAWO,IAAI,eACb,MAACnB,MAAMoB,QAAQ;;sCACb,KAACf;4BACCgB,OAAOP,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;4BAC7BM,iBAAiB;gCAAEJ,MAAMJ,MAAME,IAAI,CAACC,MAAM,CAACC,IAAI;gCAAEK,MAAMT,MAAMI,IAAI;4BAAC;4BAClEM,UAAU,KAAa;4BACvBC,UAAU;;wBAEXV,QAAQP,iBAAiBG,MAAM,GAAG,mBAAK,KAACP;4BAAQsB,IAAI;gCAAEC,IAAI;4BAAE;;;mBAP1C,CAAC,MAAM,EAAEZ,OAAO;YAUzC;QACF;QAEA,OAAOH;IACT,GAAG;QAACJ;KAAiB;IAErB,qBACE,MAACN;QAAOK,MAAMA;QAAME,SAASA;QAASmB,UAAS;QAAKC,WAAW;;0BAC7D,KAAC3B,OAAO4B,MAAM;0BAAC;;0BACf,KAAC5B,OAAO6B,OAAO;0BAAErB;;0BACjB,KAACR,OAAO8B,OAAO;0BACb,cAAA,KAAC7B;oBAAO8B,SAAQ;oBAAWC,OAAM;oBAAYC,SAAS1B;8BAAS;;;;;AAMvE"}
+{"version":3,"sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.tsx"],"sourcesContent":["// Copyright 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 React, { ReactElement, useMemo } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button, Divider } from '@mui/material';\nimport { PluginSpecEditor } from '@perses-dev/plugin-system';\nimport { QueryDefinition } from '@perses-dev/spec';\n\nexport interface QueryViewerDialogProps {\n  open: boolean;\n  queryDefinitions: QueryDefinition[];\n  onClose: () => void;\n}\n\nexport function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement {\n  const queryRows = useMemo(() => {\n    if (!queryDefinitions?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queryDefinitions.forEach((query, index) => {\n      if (query?.spec?.plugin?.kind && query?.kind) {\n        queryItems.push(\n          <React.Fragment key={`query-${index}`}>\n            <PluginSpecEditor\n              value={query.spec.plugin.spec}\n              pluginSelection={{ kind: query.spec.plugin.kind, type: query.kind }}\n              onChange={(): void => {}}\n              isReadonly\n            />\n            {index < queryDefinitions.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queryDefinitions]);\n\n  return (\n    <Dialog open={open} onClose={onClose} maxWidth=\"lg\" fullWidth={true}>\n      <Dialog.Header>Query Viewer</Dialog.Header>\n      <Dialog.Content>{queryRows}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onClose}>\n          Close\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n}\n"],"names":["React","useMemo","Dialog","Button","Divider","PluginSpecEditor","QueryViewerDialog","open","queryDefinitions","onClose","queryRows","length","queryItems","forEach","query","index","spec","plugin","kind","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","maxWidth","fullWidth","Header","Content","Actions","variant","color","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAuBC,OAAO,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,EAAEC,OAAO,QAAQ,gBAAgB;AAChD,SAASC,gBAAgB,QAAQ,4BAA4B;AAS7D,OAAO,SAASC,kBAAkB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,OAAO,EAA0B;IAC3F,MAAMC,YAAYT,QAAQ;QACxB,IAAI,CAACO,kBAAkBG,QAAQ,OAAO;QAEtC,MAAMC,aAA6B,EAAE;QACrCJ,iBAAiBK,OAAO,CAAC,CAACC,OAAOC;YAC/B,IAAID,OAAOE,MAAMC,QAAQC,QAAQJ,OAAOI,MAAM;gBAC5CN,WAAWO,IAAI,eACb,MAACnB,MAAMoB,QAAQ;;sCACb,KAACf;4BACCgB,OAAOP,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;4BAC7BM,iBAAiB;gCAAEJ,MAAMJ,MAAME,IAAI,CAACC,MAAM,CAACC,IAAI;gCAAEK,MAAMT,MAAMI,IAAI;4BAAC;4BAClEM,UAAU,KAAa;4BACvBC,UAAU;;wBAEXV,QAAQP,iBAAiBG,MAAM,GAAG,mBAAK,KAACP;4BAAQsB,IAAI;gCAAEC,IAAI;4BAAE;;;mBAP1C,CAAC,MAAM,EAAEZ,OAAO;YAUzC;QACF;QAEA,OAAOH;IACT,GAAG;QAACJ;KAAiB;IAErB,qBACE,MAACN;QAAOK,MAAMA;QAAME,SAASA;QAASmB,UAAS;QAAKC,WAAW;;0BAC7D,KAAC3B,OAAO4B,MAAM;0BAAC;;0BACf,KAAC5B,OAAO6B,OAAO;0BAAErB;;0BACjB,KAACR,OAAO8B,OAAO;0BACb,cAAA,KAAC7B;oBAAO8B,SAAQ;oBAAWC,OAAM;oBAAYC,SAAS1B;8BAAS;;;;;AAMvE"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
 import { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';
-import { isRelativeTimeRange } from '@perses-dev/core';
+import { isRelativeTimeRange } from '@perses-dev/spec';
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
 const SAVE_DEFAULTS_DIALOG_TEXT = 'You have made changes to the time range or the variables values. Would you like to save these as defaults?';

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;\n\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n  const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange, refreshInterval } = useTimeRange();\n\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariableMessage = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.display === refreshInterval)\n    ? refreshInterval\n    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.value.pastDuration === refreshInterval)?.display;\n\n  const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedRefreshIntervalModified}\n                    checked={saveDefaultRefreshInterval && isSavedRefreshIntervalModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultRefreshInterval(e.target.checked)}\n                  />\n                }\n                label={saveRefreshIntervalMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariableMessage}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","DEFAULT_REFRESH_INTERVAL_OPTIONS","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","isSavedRefreshIntervalModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveDefaultRefreshInterval","setDefaultRefreshInterval","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","refreshInterval","currentTimeRangeText","pastDuration","saveTimeRangeMessage","saveVariableMessage","length","join","refreshIntervalDisplay","some","i","display","find","value","saveRefreshIntervalMessage","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/spec';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;\n\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n  const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange, refreshInterval } = useTimeRange();\n\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariableMessage = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.display === refreshInterval)\n    ? refreshInterval\n    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.value.pastDuration === refreshInterval)?.display;\n\n  const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedRefreshIntervalModified}\n                    checked={saveDefaultRefreshInterval && isSavedRefreshIntervalModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultRefreshInterval(e.target.checked)}\n                  />\n                }\n                label={saveRefreshIntervalMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariableMessage}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","DEFAULT_REFRESH_INTERVAL_OPTIONS","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","isSavedRefreshIntervalModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveDefaultRefreshInterval","setDefaultRefreshInterval","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","refreshInterval","currentTimeRangeText","pastDuration","saveTimeRangeMessage","saveVariableMessage","length","join","refreshIntervalDisplay","some","i","display","find","value","saveRefreshIntervalMessage","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YAoE7B,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AAElE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YAQ7B,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -11,72 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
 import { Button } from '@mui/material';
-import { isRelativeTimeRange } from '@perses-dev/core';
-import { useTimeRange } from '@perses-dev/plugin-system';
-import { useDashboard, useEditMode, useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
+import { useSaveDashboard } from '../../context';
 export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
-    const [isSavingDashboard, setSavingDashboard] = useState(false);
-    const { dashboard, setDashboard } = useDashboard();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
-    const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange, refreshInterval } = useTimeRange();
-    const { setEditMode } = useEditMode();
-    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
-    const onSaveButtonClick = ()=>{
-        const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
-        // Save dashboard
-        // - if active timeRange from plugin-system is relative and different from currently saved
-        // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
-            openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
-                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {
-                        dashboard.spec.duration = timeRange.pastDuration;
-                    }
-                    if (saveDefaultVariables) {
-                        const variables = setVariableDefaultValues();
-                        dashboard.spec.variables = variables;
-                    }
-                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
-                        dashboard.spec.refreshInterval = refreshInterval;
-                    }
-                    setDashboard(dashboard);
-                    saveDashboard();
-                },
-                onCancel: ()=>{
-                    closeSaveChangesConfirmationDialog();
-                },
-                isSavedDurationModified,
-                isSavedVariableModified,
-                isSavedRefreshIntervalModified
-            });
-        } else {
-            saveDashboard();
-        }
-    };
-    const saveDashboard = async ()=>{
-        if (onSave) {
-            try {
-                setSavingDashboard(true);
-                await onSave(dashboard);
-                closeSaveChangesConfirmationDialog();
-                setEditMode(false);
-            } catch (error) {
-                throw new Error(`An error occurred while saving the dashboard. ${error}`);
-            } finally{
-                setSavingDashboard(false);
-            }
-        } else {
-            setEditMode(false);
-        }
-    };
+    const { saveDashboard, isSaving } = useSaveDashboard(onSave);
     return /*#__PURE__*/ _jsx(Button, {
         variant: variant,
-        onClick: onSaveButtonClick,
-        disabled: isDisabled || isSavingDashboard,
+        onClick: saveDashboard,
+        disabled: isDisabled || isSaving,
         children: "Save"
     });
 };

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange, refreshInterval } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {\n            dashboard.spec.refreshInterval = refreshInterval;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n        isSavedRefreshIntervalModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","refreshInterval","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","isSavedRefreshIntervalModified","onSaveChanges","saveDefaultTimeRange","saveDefaultRefreshInterval","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAEC,eAAe,EAAE,GAAGjB;IACvC,MAAM,EAAEkB,WAAW,EAAE,GAAGhB;IACxB,MAAM,EAAEiB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGjB;IAElF,MAAMkB,oBAAoB;QACxB,MAAMC,0BACJvB,oBAAoBiB,cAAcL,UAAUY,IAAI,CAACC,QAAQ,KAAKR,UAAUS,YAAY;QAEtF,MAAMC,iCAAiCf,UAAUY,IAAI,CAACN,eAAe,KAAKA;QAE1E,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIK,2BAA2BP,2BAA2BW,gCAAgC;YACxFP,kCAAkC;gBAChCQ,eAAe,CAACC,sBAAsBC,4BAA4BC;oBAChE,IAAI/B,oBAAoBiB,cAAcY,sBAAsB;wBAC1DjB,UAAUY,IAAI,CAACC,QAAQ,GAAGR,UAAUS,YAAY;oBAClD;oBACA,IAAIK,sBAAsB;wBACxB,MAAMC,YAAYjB;wBAClBH,UAAUY,IAAI,CAACQ,SAAS,GAAGA;oBAC7B;oBACA,IAAIF,8BAA8BH,gCAAgC;wBAChEf,UAAUY,IAAI,CAACN,eAAe,GAAGA;oBACnC;oBACAL,aAAaD;oBACbqB;gBACF;gBACAC,UAAU;oBACRb;gBACF;gBACAE;gBACAP;gBACAW;YACF;QACF,OAAO;YACLM;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAI1B,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbS;gBACAF,YAAY;YACd,EAAE,OAAOgB,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRxB,mBAAmB;YACrB;QACF,OAAO;YACLQ,YAAY;QACd;IACF;IAEA,qBACE,KAACpB;QAAOU,SAASA;QAAS4B,SAASf;QAAmBgB,UAAU9B,cAAcE;kBAAmB;;AAIrG,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 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 { ReactElement } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { OnSaveDashboard, useSaveDashboard } from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const { saveDashboard, isSaving } = useSaveDashboard(onSave);\n\n  return (\n    <Button variant={variant} onClick={saveDashboard} disabled={isDisabled || isSaving}>\n      Save\n    </Button>\n  );\n};\n"],"names":["Button","useSaveDashboard","SaveDashboardButton","onSave","isDisabled","variant","saveDashboard","isSaving","onClick","disabled"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAA0BC,gBAAgB,QAAQ,gBAAgB;AAQlE,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAE,GAAGN,iBAAiBE;IAErD,qBACE,KAACH;QAAOK,SAASA;QAASG,SAASF;QAAeG,UAAUL,cAAcG;kBAAU;;AAIxF,EAAE"}

package/dist/components/Variables/BuiltinVariableAccordions.d.ts

@@ -1,4 +1,4 @@
-import { BuiltinVariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 type BuiltinVariableAccordionsProps = {
     builtinVariableDefinitions: BuiltinVariableDefinition[];