@perses-dev/dashboards 0.37.2 → 0.39.0

package/dist/components/GridLayout/GridItemContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 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 { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query: QueryDefinition) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel definition={panelDefinition} editHandlers={editHandlers} />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AACA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAOnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAsB,GAAK;QACnE,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YAACyB,UAAU,EAAEpB,eAAe;YAAEO,YAAY,EAAEA,YAAY;UAAI;MAC9C,CACtB;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 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 { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\nimport { PanelOptions } from '../Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel\n        definition={panelDefinition}\n        editHandlers={editHandlers}\n        panelOptions={props.panelOptions}\n        panelGroupItemId={panelGroupItemId}\n      />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition","panelOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AASnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAK,GAAK;QAClD,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YACJyB,UAAU,EAAEpB,eAAe;YAC3BO,YAAY,EAAEA,YAAY;YAC1Bc,YAAY,EAAExB,KAAK,CAACwB,YAAY;YAChCvB,gBAAgB,EAAEA,gBAAgB;UAClC;MACkB,CACtB;AACJ,CAAC"}

package/dist/components/GridLayout/GridLayout.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { PanelGroupId } from '../../context';
+import { PanelOptions } from '../Panel';
 export interface GridLayoutProps {
     panelGroupId: PanelGroupId;
+    panelOptions?: PanelOptions;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkFhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAmFhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -99,6 +99,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                    panelOptions: props.panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

package/dist/components/GridLayout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={props.panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelOptions","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}

package/dist/components/Panel/Panel.d.ts

@@ -1,11 +1,31 @@
 /// <reference types="react" />
 import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
+import { PanelGroupItemId } from '../../context';
 import { PanelHeaderProps } from './PanelHeader';
 export interface PanelProps extends CardProps<'section'> {
     definition: PanelDefinition;
     editHandlers?: PanelHeaderProps['editHandlers'];
+    panelOptions?: PanelOptions;
+    panelGroupItemId?: PanelGroupItemId;
 }
+export declare type PanelOptions = {
+    /**
+     * Content to render in the top-right corner of the panel. It will only be
+     * rendered when the panel is in edit mode.
+     */
+    extra?: (props: PanelExtraProps) => React.ReactNode;
+};
+export declare type PanelExtraProps = {
+    /**
+     * The PanelDefinition for the panel.
+     */
+    panelDefinition?: PanelDefinition;
+    /**
+     * The PanelGroupItemId for the panel.
+     */
+    panelGroupItemId?: PanelGroupItemId;
+};
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,kDAuFhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,oBAAY,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,kDAwFhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -21,7 +21,8 @@ import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    var ref;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = useId('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -39,7 +40,7 @@ import { PanelContent } from './PanelContent';
         width,
         height
     ]);
-    const { ref , inView  } = useInView({
+    const { ref: ref1 , inView  } = useInView({
         threshold: 0.3,
         initialInView: false,
         triggerOnce: true
@@ -52,7 +53,7 @@ import { PanelContent } from './PanelContent';
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ _jsxs(Card, {
-        ref: ref,
+        ref: ref1,
         component: "section",
         sx: combineSx({
             width: '100%',
@@ -69,6 +70,10 @@ import { PanelContent } from './PanelContent';
         ...others,
         children: [
             /*#__PURE__*/ _jsx(PanelHeader, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions, {
+                    panelDefinition: definition,
+                    panelGroupItemId
+                }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,

package/dist/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 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 { useState, useMemo, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 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 { useState, useMemo, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Content to render in the top-right corner of the panel. It will only be\n   * rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => React.ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","panelOptions","definition","editHandlers","onMouseEnter","onMouseLeave","sx","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","extra","panelDefinition","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,OAAO,EAAEC,IAAI,QAAQ,OAAO,CAAC;AAChD,OAAOC,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,SAASC,SAAS,QAAQ,6BAA6B,CAAC;AACxD,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,wBAAwB,CAAC;AAErG,SAASC,IAAI,EAAaC,WAAW,QAAQ,eAAe,CAAC;AAE7D,SAASC,WAAW,QAA0B,eAAe,CAAC;AAC9D,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AA4B9C;;CAEC,GACD,OAAO,MAAMC,KAAK,iBAAGZ,IAAI,CAAC,SAASY,KAAK,CAACC,KAAiB,EAAE;QAsD7CC,GAAmB;IArDhC,MAAM,EAAEC,UAAU,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAEC,EAAE,CAAA,EAAEL,YAAY,CAAA,EAAEM,gBAAgB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGR,KAAK,AAAC;IAEtH,yDAAyD;IACzD,MAAMS,gBAAgB,GAAGhB,KAAK,CAAC,OAAO,CAAC,AAAC;IACxC,MAAMiB,QAAQ,GAAG,CAAC,EAAED,gBAAgB,CAAC,OAAO,CAAC,AAAC;IAE9C,MAAM,CAACE,cAAc,EAAEC,iBAAiB,CAAC,GAAG3B,QAAQ,CAAqB,IAAI,CAAC,AAAC;IAE/E,MAAM,EAAE4B,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAG1B,iBAAiB,CAAC;QAAE2B,GAAG,EAAEJ,cAAc;KAAE,CAAC,AAAC;IAErE,MAAMK,iBAAiB,GAAG9B,OAAO,CAAC,IAAM;QACtC,IAAI2B,KAAK,KAAKI,SAAS,IAAIH,MAAM,KAAKG,SAAS,EAAE,OAAOA,SAAS,CAAC;QAClE,OAAO;YAAEJ,KAAK;YAAEC,MAAM;SAAE,CAAC;IAC3B,CAAC,EAAE;QAACD,KAAK;QAAEC,MAAM;KAAC,CAAC,AAAC;IAEpB,MAAM,EAAEC,GAAG,EAAHA,IAAG,CAAA,EAAEG,MAAM,CAAA,EAAE,GAAG7B,SAAS,CAAC;QAChC8B,SAAS,EAAE,GAAG;QACdC,aAAa,EAAE,KAAK;QACpBC,WAAW,EAAE,IAAI;KAClB,CAAC,AAAC;IAEH,MAAMC,WAAW,GAAG5B,cAAc,EAAE,AAAC;IAErC,MAAM6B,gBAAgB,GAA8B,CAACC,CAAC,GAAK;QACzDpB,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,CAAGoB,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAMC,gBAAgB,GAA8B,CAACD,CAAC,GAAK;QACzDnB,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,CAAGmB,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,MAAC7B,IAAI;QACHoB,GAAG,EAAEA,IAAG;QACRW,SAAS,EAAC,SAAS;QACnBpB,EAAE,EAAEd,SAAS,CACX;YACEqB,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACda,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,eAAe;SAC1B,EACDtB,EAAE,CACH;QACDuB,OAAO,EAAC,UAAU;QAClBzB,YAAY,EAAEmB,gBAAgB;QAC9BlB,YAAY,EAAEoB,gBAAgB;QAC9BK,iBAAe,EAAEpB,QAAQ;QACzBqB,kBAAgB,EAAErB,QAAQ;QAC1BsB,aAAW,EAAC,OAAO;QAClB,GAAGxB,MAAM;;0BAEV,KAACX,WAAW;gBACVoC,KAAK,EAAEhC,YAAY,aAAZA,YAAY,WAAO,GAAnBA,KAAAA,CAAmB,GAAnBA,CAAAA,GAAmB,GAAnBA,YAAY,CAAEgC,KAAK,cAAnBhC,GAAmB,WAAqD,GAAxEA,KAAAA,CAAwE,GAAxEA,GAAmB,CAAnBA,IAAwE,CAAxEA,YAAY,EAAU;oBAAEiC,eAAe,EAAEhC,UAAU;oBAAEK,gBAAgB;iBAAE,CAAC;gBAC/E4B,EAAE,EAAEzB,QAAQ;gBACZ0B,KAAK,EAAElC,UAAU,CAACmC,IAAI,CAACV,OAAO,CAACW,IAAI;gBACnCC,WAAW,EAAErC,UAAU,CAACmC,IAAI,CAACV,OAAO,CAACY,WAAW;gBAChDpC,YAAY,EAAEA,YAAY;gBAC1BG,EAAE,EAAE;oBAAEkC,QAAQ,EAAE,CAAC,EAAElB,WAAW,CAACmB,SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC;iBAAE;cAC9D;0BACF,KAAC/C,WAAW;gBACV8B,SAAS,EAAC,QAAQ;gBAClBpB,EAAE,EAAE;oBACFsC,QAAQ,EAAE,UAAU;oBACpBC,QAAQ,EAAE,QAAQ;oBAClBC,QAAQ,EAAE,CAAC;oBACXC,MAAM,EAAE,CAAC;oBACTL,OAAO,EAAE,CAAC;oBACV,4CAA4C;oBAC5C,aAAa,EAAE;wBACbA,OAAO,EAAE,CAAC;qBACX;iBACF;gBACD3B,GAAG,EAAEH,iBAAiB;0BAEtB,cAAA,KAACtB,aAAa;oBAAC0D,iBAAiB,EAAEzD,UAAU;oBAAE0D,SAAS,EAAE;wBAAC/C,UAAU,CAACmC,IAAI,CAACa,MAAM,CAACb,IAAI;qBAAC;8BACnFnB,MAAM,KAAK,IAAI,kBACd,KAACpB,YAAY;wBACXqD,eAAe,EAAEjD,UAAU,CAACmC,IAAI,CAACa,MAAM,CAACE,IAAI;wBAC5Cf,IAAI,EAAEnC,UAAU,CAACmC,IAAI,CAACa,MAAM,CAACb,IAAI;wBACjCrB,iBAAiB,EAAEA,iBAAiB;sBACpC,AACH;kBACa;cACJ;;MACT,CACP;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Panel/PanelHeader.d.ts

@@ -5,12 +5,13 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     id: string;
     title: string;
     description?: string;
+    extra?: React.ReactNode;
     editHandlers?: {
         onEditPanelClick: () => void;
         onDuplicatePanelClick: () => void;
         onDeletePanelClick: () => void;
     };
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }: PanelHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=PanelHeader.d.ts.map

package/dist/components/Panel/PanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,YAAY,EACZ,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,eAuHlB"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eAuHlB"}

package/dist/components/Panel/PanelHeader.js

@@ -20,7 +20,7 @@ import DragIcon from 'mdi-material-ui/DragVertical';
 import ContentCopy from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-export function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
+export function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
@@ -127,11 +127,15 @@ export function PanelHeader({ id , title: rawTitle , description: rawDescription
                 })
             ]
         }),
-        action: /*#__PURE__*/ _jsx(HeaderActionWrapper, {
+        action: /*#__PURE__*/ _jsxs(HeaderActionWrapper, {
             direction: "row",
             spacing: 0.25,
             alignItems: "center",
-            children: actions
+            children: [
+                editHandlers === undefined && extra,
+                " ",
+                actions
+            ]
         }),
         sx: combineSx((theme)=>({
                 padding: theme.spacing(1),

package/dist/components/Panel/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,sBA+B3F"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,sBA+B3F"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\nimport { useSuggestedStepMs } from '../../utils';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query: QueryDefinition) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","Panel","useSuggestedStepMs","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAQ,OAAO,CAAC;AAC/B,SAASC,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,mBAAmB,QAAQ,2BAA2B,CAAC;AAEhE,SAASC,KAAK,QAAQ,UAAU,CAAC;AACjC,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AAEjD,MAAMC,oBAAoB,GAAG,GAAG,AAAC;AACjC,MAAMC,2BAA2B,GAAG,GAAG,AAAC;AAExC,OAAO,SAASC,YAAY,CAAC,EAAEC,eAAe,CAAA,EAA8C,EAAE;IAC5F,MAAMC,MAAM,GAAGT,MAAM,CAAiB,IAAI,CAAC,AAAC;IAC5C,IAAIU,KAAK,GAAGJ,2BAA2B,AAAC;IACxC,IAAIG,MAAM,CAACE,OAAO,KAAK,IAAI,EAAE;QAC3BD,KAAK,GAAGD,MAAM,CAACE,OAAO,CAACC,qBAAqB,EAAE,CAACF,KAAK,CAAC;IACvD,CAAC;IACD,MAAMG,eAAe,GAAGT,kBAAkB,CAACM,KAAK,CAAC,AAAC;IAElD,IAAIF,eAAe,CAACM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,EAAE,EAAE;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;QAEeR,QAA4B;IAA5C,MAAMS,OAAO,GAAGT,CAAAA,QAA4B,GAA5BA,eAAe,CAACM,IAAI,CAACG,OAAO,cAA5BT,QAA4B,cAA5BA,QAA4B,GAAI,EAAE,AAAC;IAEnD,2DAA2D;IAC3D,MAAMU,WAAW,GAAGD,OAAO,CAACE,MAAM,GAC9BF,OAAO,CAACG,GAAG,CAAC,CAACC,KAAsB,GAAK;QACtC,OAAO;YACLL,IAAI,EAAEK,KAAK,CAACP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACC,MAAM,CAACD,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,GACF,EAAE,AAAC;IAEP,qBACE,KAACb,GAAG;QAACqB,GAAG,EAAEb,MAAM;QAAEc,MAAM,EAAElB,oBAAoB;kBAC5C,cAAA,KAACH,mBAAmB;YAACgB,WAAW,EAAEA,WAAW;YAAEM,OAAO,EAAE;gBAAEX,eAAe;aAAE;sBACzE,cAAA,KAACV,KAAK;gBAACsB,UAAU,EAAEjB,eAAe;cAAI;UAClB;MAClB,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\nimport { useSuggestedStepMs } from '../../utils';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","Panel","useSuggestedStepMs","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAQ,OAAO,CAAC;AAC/B,SAASC,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,mBAAmB,QAAQ,2BAA2B,CAAC;AAEhE,SAASC,KAAK,QAAQ,UAAU,CAAC;AACjC,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AAEjD,MAAMC,oBAAoB,GAAG,GAAG,AAAC;AACjC,MAAMC,2BAA2B,GAAG,GAAG,AAAC;AAExC,OAAO,SAASC,YAAY,CAAC,EAAEC,eAAe,CAAA,EAA8C,EAAE;IAC5F,MAAMC,MAAM,GAAGT,MAAM,CAAiB,IAAI,CAAC,AAAC;IAC5C,IAAIU,KAAK,GAAGJ,2BAA2B,AAAC;IACxC,IAAIG,MAAM,CAACE,OAAO,KAAK,IAAI,EAAE;QAC3BD,KAAK,GAAGD,MAAM,CAACE,OAAO,CAACC,qBAAqB,EAAE,CAACF,KAAK,CAAC;IACvD,CAAC;IACD,MAAMG,eAAe,GAAGT,kBAAkB,CAACM,KAAK,CAAC,AAAC;IAElD,IAAIF,eAAe,CAACM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,EAAE,EAAE;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;QAEeR,QAA4B;IAA5C,MAAMS,OAAO,GAAGT,CAAAA,QAA4B,GAA5BA,eAAe,CAACM,IAAI,CAACG,OAAO,cAA5BT,QAA4B,cAA5BA,QAA4B,GAAI,EAAE,AAAC;IAEnD,2DAA2D;IAC3D,MAAMU,WAAW,GAAGD,OAAO,CAACE,MAAM,GAC9BF,OAAO,CAACG,GAAG,CAAC,CAACC,KAAK,GAAK;QACrB,OAAO;YACLL,IAAI,EAAEK,KAAK,CAACP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACC,MAAM,CAACD,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,GACF,EAAE,AAAC;IAEP,qBACE,KAACb,GAAG;QAACqB,GAAG,EAAEb,MAAM;QAAEc,MAAM,EAAElB,oBAAoB;kBAC5C,cAAA,KAACH,mBAAmB;YAACgB,WAAW,EAAEA,WAAW;YAAEM,OAAO,EAAE;gBAAEX,eAAe;aAAE;sBACzE,cAAA,KAACV,KAAK;gBAACsB,UAAU,EAAEjB,eAAe;cAAI;UAClB;MAClB,CACN;AACJ,CAAC"}

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":";AAcA,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,oCAAmD,wBAAwB,gBA8D1G,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,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,oCAAmD,wBAAwB,gBAgE1G,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -26,7 +26,9 @@ export const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'
     const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = useSaveChangesConfirmationDialog();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-        // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
+        // 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) {
             openSaveChangesConfirmationDialog({
                 onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2023 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 { 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  useTemplateVariableActions,\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 = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard if active timeRange from plugin-system is relative and different than currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async () => {\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        if (isSavingDashboard) {\n          setSavingDashboard(false);\n        }\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","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2023 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 { 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  useTemplateVariableActions,\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 = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\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) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async () => {\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        if (isSavingDashboard) {\n          setSavingDashboard(false);\n        }\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","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"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"}

package/dist/components/Variables/EditVariablesButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eA6C1B"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eA+C1B"}

package/dist/components/Variables/EditVariablesButton.js

@@ -16,11 +16,12 @@ import { Button } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
-import { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';
+import { useTemplateExternalVariableDefinitions, useTemplateVariableActions, useTemplateVariableDefinitions } from '../../context';
 import { VariableEditor } from './VariableEditor';
 export function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
+    const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
     const { setVariableDefinitions  } = useTemplateVariableActions();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
@@ -57,6 +58,7 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
                 "data-testid": "variable-editor",
                 children: /*#__PURE__*/ _jsx(VariableEditor, {
                     variableDefinitions: variableDefinitions,
+                    externalVariableDefinitions: externalVariableDefinitions,
                     onCancel: closeVariableEditor,
                     onChange: (variables)=>{
                         setVariableDefinitions(variables);

package/dist/components/Variables/EditVariablesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2023 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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAmBlD,OAAO,SAASC,mBAAmB,CAAC,EAClCC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,WAAW,CAAA,EACnBC,KAAK,EAAG,SAAS,CAAA,EACjBC,SAAS,CAAA,EACgB,EAAE;IAC3B,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMgB,mBAAmB,GAAyBV,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEW,sBAAsB,CAAA,EAAE,GAAGV,0BAA0B,EAAE,AAAC;IAEhE,MAAMW,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACX,WAAW;gBAACgB,WAAW,EAAEf,YAAY,CAACgB,aAAa;0BAClD,cAAA,KAACpB,MAAM;oBACLqB,SAAS,gBAAE,KAACpB,UAAU,KAAG;oBACzBqB,OAAO,EAAEL,kBAAkB;oBAC3BM,YAAU,EAAEnB,YAAY,CAACgB,aAAa;oBACtCX,OAAO,EAAEA,OAAO;oBAChBE,KAAK,EAAEA,KAAK;oBACZC,SAAS,EAAEA,SAAS;oBACpBY,EAAE,EAAE;wBAAEC,UAAU,EAAE,QAAQ;wBAAEC,QAAQ,EAAE,MAAM;qBAAE;8BAE7ChB,KAAK;kBACC;cACG;0BACd,KAACR,MAAM;gBACLyB,MAAM,EAAEd,oBAAoB;gBAC5Be,OAAO,EAAEV,mBAAmB;gBAC5BW,UAAU,EAAE;oBAAEL,EAAE,EAAE;wBAAEM,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAACxB,cAAc;oBACbQ,mBAAmB,EAAEA,mBAAmB;oBACxCiB,QAAQ,EAAEd,mBAAmB;oBAC7Be,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ClB,sBAAsB,CAACkB,SAAS,CAAC,CAAC;wBAClCpB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2023 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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,eAAe,CAAC;AACvB,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAmBlD,OAAO,SAASC,mBAAmB,CAAC,EAClCC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,WAAW,CAAA,EACnBC,KAAK,EAAG,SAAS,CAAA,EACjBC,SAAS,CAAA,EACgB,EAAE;IAC3B,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMiB,mBAAmB,GAAyBT,8BAA8B,EAAE,AAAC;IACnF,MAAMU,2BAA2B,GAAiCZ,sCAAsC,EAAE,AAAC;IAC3G,MAAM,EAAEa,sBAAsB,CAAA,EAAE,GAAGZ,0BAA0B,EAAE,AAAC;IAEhE,MAAMa,kBAAkB,GAAG,IAAM;QAC/BJ,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMK,mBAAmB,GAAG,IAAM;QAChCL,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACZ,WAAW;gBAACkB,WAAW,EAAEjB,YAAY,CAACkB,aAAa;0BAClD,cAAA,KAACtB,MAAM;oBACLuB,SAAS,gBAAE,KAACtB,UAAU,KAAG;oBACzBuB,OAAO,EAAEL,kBAAkB;oBAC3BM,YAAU,EAAErB,YAAY,CAACkB,aAAa;oBACtCZ,OAAO,EAAEA,OAAO;oBAChBE,KAAK,EAAEA,KAAK;oBACZC,SAAS,EAAEA,SAAS;oBACpBa,EAAE,EAAE;wBAAEC,UAAU,EAAE,QAAQ;wBAAEC,QAAQ,EAAE,MAAM;qBAAE;8BAE7CjB,KAAK;kBACC;cACG;0BACd,KAACT,MAAM;gBACL2B,MAAM,EAAEf,oBAAoB;gBAC5BgB,OAAO,EAAEV,mBAAmB;gBAC5BW,UAAU,EAAE;oBAAEL,EAAE,EAAE;wBAAEM,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAACzB,cAAc;oBACbQ,mBAAmB,EAAEA,mBAAmB;oBACxCC,2BAA2B,EAAEA,2BAA2B;oBACxDiB,QAAQ,EAAEd,mBAAmB;oBAC7Be,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ClB,sBAAsB,CAACkB,SAAS,CAAC,CAAC;wBAClCrB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}

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

@@ -2,7 +2,8 @@
 import { VariableName } from '@perses-dev/core';
 declare type TemplateVariableProps = {
     name: VariableName;
+    source?: string;
 };
-export declare function TemplateVariable({ name }: TemplateVariableProps): JSX.Element;
+export declare function TemplateVariable({ name, source }: TemplateVariableProps): JSX.Element;
 export {};
 //# sourceMappingURL=TemplateVariable.d.ts.map

package/dist/components/Variables/TemplateVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA6C,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAG1G,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,eAW/D"}
+{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA6C,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAI1G,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE"}