@perses-dev/dashboards 0.53.0-beta.2 → 0.53.0-beta.4

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js

@@ -15,22 +15,37 @@ import { Grid, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';
 import { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
-import { useContext } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 // Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.
 // TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.
 export function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange }) {
     const { data: pluginPreview } = usePlugin('Panel', plugin.kind);
     const panelEditorContext = useContext(PanelEditorContext);
-    const pluginQueryOptions = typeof pluginPreview?.queryOptions === 'function' ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec) : pluginPreview?.queryOptions;
     const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);
-    const definitions = panelDefinition.spec.queries?.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    }) ?? [];
+    const pluginQueryOptions = useMemo(()=>typeof pluginPreview?.queryOptions === 'function' ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec) : pluginPreview?.queryOptions, [
+        panelDefinition.spec.plugin.spec,
+        pluginPreview
+    ]);
+    const [previewDefinition, setPreviewDefinition] = useState(()=>panelDefinition.spec.queries?.map((query)=>{
+            return {
+                kind: query.spec.plugin.kind,
+                spec: query.spec.plugin.spec
+            };
+        }) ?? []);
+    const handleRunQuery = useCallback((index, newDef)=>{
+        setPreviewDefinition((prev)=>{
+            const newDefinitions = [
+                ...prev
+            ];
+            newDefinitions[index] = {
+                kind: newDef.spec.plugin.kind,
+                spec: newDef.spec.plugin.spec
+            };
+            return newDefinitions;
+        });
+    }, []);
     return /*#__PURE__*/ _jsxs(DataQueriesProvider, {
-        definitions: definitions,
+        definitions: previewDefinition,
         options: {
             suggestedStepMs,
             ...pluginQueryOptions
@@ -63,6 +78,7 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
                         panelDefinition: panelDefinition,
                         onJSONChange: onJSONChange,
                         onQueriesChange: onQueriesChange,
+                        onQueryRun: handleRunQuery,
                         onPluginSpecChange: onPluginSpecChange
                     })
                 })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useContext } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const pluginQueryOptions =\n    typeof pluginPreview?.queryOptions === 'function'\n      ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n      : pluginPreview?.queryOptions;\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const definitions =\n    panelDefinition.spec.queries?.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, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={onQueriesChange}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useContext","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","pluginQueryOptions","queryOptions","spec","suggestedStepMs","preview","previewPanelWidth","definitions","queries","map","query","options","item","xs","variant","marginBottom","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,UAAU,QAAQ,QAAQ;AAWjD,oGAAoG;AACpG,oJAAoJ;AACpJ,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGX,UAAU,SAASI,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBX,WAAWN;IAEtC,MAAMkB,qBACJ,OAAOH,eAAeI,iBAAiB,aACnCJ,eAAeI,aAAaT,gBAAgBU,IAAI,CAACZ,MAAM,CAACY,IAAI,IAC5DL,eAAeI;IAErB,MAAME,kBAAkBhB,mBAAmBY,oBAAoBK,QAAQC;IAEvE,MAAMC,cACJd,gBAAgBU,IAAI,CAACK,OAAO,EAAEC,IAAI,CAACC;QACjC,OAAO;YACLX,MAAMW,MAAMP,IAAI,CAACZ,MAAM,CAACQ,IAAI;YAC5BI,MAAMO,MAAMP,IAAI,CAACZ,MAAM,CAACY,IAAI;QAC9B;IACF,MAAM,EAAE;IAEV,qBACE,MAAClB;QAAoBsB,aAAaA;QAAaI,SAAS;YAAEP;YAAiB,GAAGH,kBAAkB;QAAC;;0BAC/F,MAACtB;gBAAKiC,IAAI;gBAACC,IAAI;;kCACb,KAACjC;wBAAWkC,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,KAACjC;wBAAckC,mBAAmBnC;kCAChC,cAAA,KAACG;4BAAaS,iBAAiBA;;;;;0BAGnC,KAACd;gBAAKiC,IAAI;gBAACC,IAAI;0BACb,cAAA,KAAC/B;oBAAckC,mBAAmBnC;8BAChC,cAAA,KAACK;wBACCM,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,iBAAiBA;wBACjBC,oBAAoBA;;;;;;AAMhC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const pluginQueryOptions = useMemo(\n    () =>\n      typeof pluginPreview?.queryOptions === 'function'\n        ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n        : pluginPreview?.queryOptions,\n    [panelDefinition.spec.plugin.spec, pluginPreview]\n  );\n\n  const [previewDefinition, setPreviewDefinition] = useState(\n    () =>\n      panelDefinition.spec.queries?.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      }) ?? []\n  );\n\n  const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n    setPreviewDefinition((prev) => {\n      const newDefinitions = [...prev];\n      newDefinitions[index] = {\n        kind: newDef.spec.plugin.kind,\n        spec: newDef.spec.plugin.spec,\n      };\n      return newDefinitions;\n    });\n  }, []);\n\n  return (\n    <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={onQueriesChange}\n            onQueryRun={handleRunQuery}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAWjF,oGAAoG;AACpG,oJAAoJ;AACpJ,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGd,UAAU,SAASO,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBb,WAAWP;IAEtC,MAAMqB,kBAAkBhB,mBAAmBe,oBAAoBE,QAAQC;IAEvE,MAAMC,qBAAqBhB,QACzB,IACE,OAAOU,eAAeO,iBAAiB,aACnCP,eAAeO,aAAaZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI,IAC5DR,eAAeO,cACrB;QAACZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI;QAAER;KAAc;IAGnD,MAAM,CAACS,mBAAmBC,qBAAqB,GAAGnB,SAChD,IACEI,gBAAgBa,IAAI,CAACG,OAAO,EAAEC,IAAI,CAACC;YACjC,OAAO;gBACLZ,MAAMY,MAAML,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC5BO,MAAMK,MAAML,IAAI,CAACf,MAAM,CAACe,IAAI;YAC9B;QACF,MAAM,EAAE;IAGZ,MAAMM,iBAAiB1B,YAAY,CAAC2B,OAAeC;QACjDN,qBAAqB,CAACO;YACpB,MAAMC,iBAAiB;mBAAID;aAAK;YAChCC,cAAc,CAACH,MAAM,GAAG;gBACtBd,MAAMe,OAAOR,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC7BO,MAAMQ,OAAOR,IAAI,CAACf,MAAM,CAACe,IAAI;YAC/B;YACA,OAAOU;QACT;IACF,GAAG,EAAE;IAEL,qBACE,MAAClC;QAAoBmC,aAAaV;QAAmBW,SAAS;YAAEjB;YAAiB,GAAGG,kBAAkB;QAAC;;0BACrG,MAAC5B;gBAAK2C,IAAI;gBAACC,IAAI;;kCACb,KAAC3C;wBAAW4C,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,KAAC3C;wBAAc4C,mBAAmB7C;kCAChC,cAAA,KAACG;4BAAaY,iBAAiBA;;;;;0BAGnC,KAACjB;gBAAK2C,IAAI;gBAACC,IAAI;0BACb,cAAA,KAACzC;oBAAc4C,mBAAmB7C;8BAChC,cAAA,KAACK;wBACCS,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,iBAAiBA;wBACjB8B,YAAYZ;wBACZjB,oBAAoBA;;;;;;AAMhC"}

package/dist/context/DashboardProvider/duplicate-panel-slice.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { insertPanelInLayout } from '../../utils/panelUtils';
+import { generatePanelKey, insertPanelInLayout } from '../../utils/panelUtils';
 import { generateId } from './common';
 /**
  * Curried function for duplicating a panel.
@@ -41,7 +41,7 @@ import { generateId } from './common';
                     if (matchingLayout === undefined) {
                         throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
                     }
-                    const dupePanelKey = crypto.randomUUID().replaceAll('-', '');
+                    const dupePanelKey = generatePanelKey();
                     state.panels[dupePanelKey] = panelToDupe;
                     const duplicateLayout = {
                         i: generateId().toString(),

package/dist/context/DashboardProvider/duplicate-panel-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { PanelGroupItemId } from '@perses-dev/core';\nimport { insertPanelInLayout, UnpositionedPanelGroupItemLayout } from '../../utils/panelUtils';\nimport { generateId, Middleware } from './common';\nimport { PanelGroupSlice } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles duplicating Panels.\n */\nexport interface DuplicatePanelSlice {\n  /**\n   * Duplicate panel.\n   */\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n}\n\n/**\n * Curried function for duplicating a panel.\n */\nexport function createDuplicatePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DuplicatePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DuplicatePanelSlice\n> {\n  return (set) => ({\n    duplicatePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((state) => {\n        const panels = state.panels;\n\n        // Figure out the panel key at that location\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const panelKey = group.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) {\n          throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n        }\n\n        // Find the panel to edit\n        const panelToDupe = panels[panelKey];\n        if (panelToDupe === undefined) {\n          throw new Error(`Cannot find Panel with key '${panelKey}'`);\n        }\n\n        // Find the layout for the item being duped\n        const matchingLayout = group.itemLayouts.find((itemLayout) => {\n          return itemLayout.i === panelGroupLayoutId;\n        });\n\n        if (matchingLayout === undefined) {\n          throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);\n        }\n\n        const dupePanelKey = crypto.randomUUID().replaceAll('-', '');\n\n        state.panels[dupePanelKey] = panelToDupe;\n\n        const duplicateLayout: UnpositionedPanelGroupItemLayout = {\n          i: generateId().toString(),\n          w: matchingLayout.w,\n          h: matchingLayout.h,\n        };\n\n        group.itemLayouts = insertPanelInLayout(duplicateLayout, matchingLayout, group.itemLayouts);\n\n        group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;\n      });\n    },\n  });\n}\n"],"names":["insertPanelInLayout","generateId","createDuplicatePanelSlice","set","duplicatePanel","panelGroupItemId","state","panels","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","group","panelGroups","undefined","Error","panelKey","itemPanelKeys","panelToDupe","matchingLayout","itemLayouts","find","itemLayout","i","dupePanelKey","crypto","randomUUID","replaceAll","duplicateLayout","toString","w","h"],"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;AAIjC,SAASA,mBAAmB,QAA0C,yBAAyB;AAC/F,SAASC,UAAU,QAAoB,WAAW;AAclD;;CAEC,GACD,OAAO,SAASC;IAOd,OAAO,CAACC,MAAS,CAAA;YACfC,gBAAeC,gBAAkC;gBAC/CF,IAAI,CAACG;oBACH,MAAMC,SAASD,MAAMC,MAAM;oBAE3B,4CAA4C;oBAC5C,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGL;oBACrE,MAAMM,QAAQL,MAAMM,WAAW,CAACJ,aAAa;oBAC7C,IAAIG,UAAUE,WAAW;wBACvB,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,WAAWJ,MAAMK,aAAa,CAACN,mBAAmB;oBACxD,IAAIK,aAAaF,WAAW;wBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAET,kBAAkB;oBACvE;oBAEA,yBAAyB;oBACzB,MAAMY,cAAcV,MAAM,CAACQ,SAAS;oBACpC,IAAIE,gBAAgBJ,WAAW;wBAC7B,MAAM,IAAIC,MAAM,CAAC,4BAA4B,EAAEC,SAAS,CAAC,CAAC;oBAC5D;oBAEA,2CAA2C;oBAC3C,MAAMG,iBAAiBP,MAAMQ,WAAW,CAACC,IAAI,CAAC,CAACC;wBAC7C,OAAOA,WAAWC,CAAC,KAAKZ;oBAC1B;oBAEA,IAAIQ,mBAAmBL,WAAW;wBAChC,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEC,SAAS,CAAC,CAAC;oBACvE;oBAEA,MAAMQ,eAAeC,OAAOC,UAAU,GAAGC,UAAU,CAAC,KAAK;oBAEzDpB,MAAMC,MAAM,CAACgB,aAAa,GAAGN;oBAE7B,MAAMU,kBAAoD;wBACxDL,GAAGrB,aAAa2B,QAAQ;wBACxBC,GAAGX,eAAeW,CAAC;wBACnBC,GAAGZ,eAAeY,CAAC;oBACrB;oBAEAnB,MAAMQ,WAAW,GAAGnB,oBAAoB2B,iBAAiBT,gBAAgBP,MAAMQ,WAAW;oBAE1FR,MAAMK,aAAa,CAACW,gBAAgBL,CAAC,CAAC,GAAGC;gBAC3C;YACF;QACF,CAAA;AACF"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { PanelGroupItemId } from '@perses-dev/core';\nimport { generatePanelKey, insertPanelInLayout, UnpositionedPanelGroupItemLayout } from '../../utils/panelUtils';\nimport { generateId, Middleware } from './common';\nimport { PanelGroupSlice } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles duplicating Panels.\n */\nexport interface DuplicatePanelSlice {\n  /**\n   * Duplicate panel.\n   */\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n}\n\n/**\n * Curried function for duplicating a panel.\n */\nexport function createDuplicatePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DuplicatePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DuplicatePanelSlice\n> {\n  return (set) => ({\n    duplicatePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((state) => {\n        const panels = state.panels;\n\n        // Figure out the panel key at that location\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const panelKey = group.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) {\n          throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n        }\n\n        // Find the panel to edit\n        const panelToDupe = panels[panelKey];\n        if (panelToDupe === undefined) {\n          throw new Error(`Cannot find Panel with key '${panelKey}'`);\n        }\n\n        // Find the layout for the item being duped\n        const matchingLayout = group.itemLayouts.find((itemLayout) => {\n          return itemLayout.i === panelGroupLayoutId;\n        });\n\n        if (matchingLayout === undefined) {\n          throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);\n        }\n\n        const dupePanelKey = generatePanelKey();\n\n        state.panels[dupePanelKey] = panelToDupe;\n\n        const duplicateLayout: UnpositionedPanelGroupItemLayout = {\n          i: generateId().toString(),\n          w: matchingLayout.w,\n          h: matchingLayout.h,\n        };\n\n        group.itemLayouts = insertPanelInLayout(duplicateLayout, matchingLayout, group.itemLayouts);\n\n        group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;\n      });\n    },\n  });\n}\n"],"names":["generatePanelKey","insertPanelInLayout","generateId","createDuplicatePanelSlice","set","duplicatePanel","panelGroupItemId","state","panels","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","group","panelGroups","undefined","Error","panelKey","itemPanelKeys","panelToDupe","matchingLayout","itemLayouts","find","itemLayout","i","dupePanelKey","duplicateLayout","toString","w","h"],"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;AAIjC,SAASA,gBAAgB,EAAEC,mBAAmB,QAA0C,yBAAyB;AACjH,SAASC,UAAU,QAAoB,WAAW;AAclD;;CAEC,GACD,OAAO,SAASC;IAOd,OAAO,CAACC,MAAS,CAAA;YACfC,gBAAeC,gBAAkC;gBAC/CF,IAAI,CAACG;oBACH,MAAMC,SAASD,MAAMC,MAAM;oBAE3B,4CAA4C;oBAC5C,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGL;oBACrE,MAAMM,QAAQL,MAAMM,WAAW,CAACJ,aAAa;oBAC7C,IAAIG,UAAUE,WAAW;wBACvB,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,WAAWJ,MAAMK,aAAa,CAACN,mBAAmB;oBACxD,IAAIK,aAAaF,WAAW;wBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAET,kBAAkB;oBACvE;oBAEA,yBAAyB;oBACzB,MAAMY,cAAcV,MAAM,CAACQ,SAAS;oBACpC,IAAIE,gBAAgBJ,WAAW;wBAC7B,MAAM,IAAIC,MAAM,CAAC,4BAA4B,EAAEC,SAAS,CAAC,CAAC;oBAC5D;oBAEA,2CAA2C;oBAC3C,MAAMG,iBAAiBP,MAAMQ,WAAW,CAACC,IAAI,CAAC,CAACC;wBAC7C,OAAOA,WAAWC,CAAC,KAAKZ;oBAC1B;oBAEA,IAAIQ,mBAAmBL,WAAW;wBAChC,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEC,SAAS,CAAC,CAAC;oBACvE;oBAEA,MAAMQ,eAAexB;oBAErBO,MAAMC,MAAM,CAACgB,aAAa,GAAGN;oBAE7B,MAAMO,kBAAoD;wBACxDF,GAAGrB,aAAawB,QAAQ;wBACxBC,GAAGR,eAAeQ,CAAC;wBACnBC,GAAGT,eAAeS,CAAC;oBACrB;oBAEAhB,MAAMQ,WAAW,GAAGnB,oBAAoBwB,iBAAiBN,gBAAgBP,MAAMQ,WAAW;oBAE1FR,MAAMK,aAAa,CAACQ,gBAAgBF,CAAC,CAAC,GAAGC;gBAC3C;YACF;QACF,CAAA;AACF"}

package/dist/context/DashboardProvider/panel-editor-slice.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { getYForNewRow } from '../../utils';
+import { generatePanelKey, getYForNewRow } from '../../utils';
 import { generateId, createPanelDefinition } from './common';
 import { addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';
 /**
@@ -102,7 +102,7 @@ import { addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';
                         panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition()
                     },
                     applyChanges: (next)=>{
-                        const panelKey = crypto.randomUUID().replaceAll('-', '');
+                        const panelKey = generatePanelKey();
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;

package/dist/context/DashboardProvider/panel-editor-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Action,\n  PanelEditorValues,\n  PanelGroupId,\n  PanelGroupItemId,\n  PanelGroupDefinition,\n  PanelGroupItemLayout,\n} from '@perses-dev/core';\nimport { StateCreator } from 'zustand';\nimport { getYForNewRow } from '../../utils';\nimport { generateId, Middleware, createPanelDefinition } from './common';\nimport { PanelGroupSlice, addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for adding or editing Panels.\n */\nexport interface PanelEditorSlice {\n  /**\n   * Initial values for add panel if default panel kind is defined\n   */\n  initialValues?: Pick<PanelEditorValues, 'panelDefinition'>;\n\n  /**\n   * State for the panel editor when its open, otherwise undefined when it's closed.\n   */\n  panelEditor?: PanelEditorState;\n\n  /**\n   * Opens the editor for editing an existing panel by providing its layout coordinates.\n   */\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Opens the editor for adding a new Panel to a panel group.\n   */\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n}\n\nexport interface PanelEditorState {\n  /**\n   * Whether we're adding a new panel, or editing an existing panel.\n   */\n  mode: Action;\n\n  /*\n   * Original item in a PanelGroup edited\n   */\n  panelGroupItemId?: PanelGroupItemId;\n\n  /**\n   * Initial values for the things that can be edited about a panel.\n   */\n  initialValues: PanelEditorValues;\n\n  /**\n   * Applies changes, but doesn't close the editor.\n   */\n  applyChanges: (next: PanelEditorValues) => void;\n\n  /**\n   * Close the editor.\n   */\n  close: () => void;\n}\n\n/**\n * Curried function for creating the PanelEditorSlice.\n */\nexport function createPanelEditorSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  PanelEditorSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  PanelEditorSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    panelEditor: undefined,\n\n    openEditPanel(panelGroupItemId): void {\n      const { panels, panelGroups } = get();\n\n      // Figure out the panel key at that location\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n      const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n      }\n\n      // Find the panel to edit\n      const panelToEdit = panels[panelKey];\n      if (panelToEdit === undefined) {\n        throw new Error(`Cannot find Panel with key '${panelKey}'`);\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'update',\n        panelGroupItemId: panelGroupItemId,\n        initialValues: {\n          groupId: panelGroupItemId.panelGroupId,\n          panelDefinition: panelToEdit,\n        },\n        applyChanges: (next) => {\n          set((state) => {\n            state.panels[panelKey] = next.panelDefinition;\n\n            // If the panel didn't change groups, nothing else to do\n            if (next.groupId === panelGroupId) {\n              return;\n            }\n\n            // Move panel to the new group\n            const existingGroup = state.panelGroups[panelGroupId];\n            if (existingGroup === undefined) {\n              throw new Error(`Missing panel group ${panelGroupId}`);\n            }\n\n            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];\n            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {\n              throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n            }\n\n            // Remove item from the old group\n            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n            delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n            // Add item to the end of the new group\n            const newGroup = state.panelGroups[next.groupId];\n            if (newGroup === undefined) {\n              throw new Error(`Could not find new group ${next.groupId}`);\n            }\n\n            newGroup.itemLayouts.push({\n              i: existingLayout.i,\n              x: 0,\n              y: getYForNewRow(newGroup),\n              w: existingLayout.w,\n              h: existingLayout.h,\n            });\n            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    openAddPanel(panelGroupId): void {\n      // If a panel group isn't supplied, add to the first group or create a group if there aren't any\n      let newGroup: PanelGroupDefinition | undefined = undefined;\n      panelGroupId ??= get().panelGroupOrder[0];\n      if (panelGroupId === undefined) {\n        newGroup = createEmptyPanelGroup();\n        newGroup.title = 'Panel Group';\n        panelGroupId = newGroup.id;\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'create',\n        initialValues: {\n          groupId: panelGroupId,\n          panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition(),\n        },\n        applyChanges: (next) => {\n          const panelKey = crypto.randomUUID().replaceAll('-', '');\n          set((state) => {\n            // Add a panel\n            state.panels[panelKey] = next.panelDefinition;\n\n            // Also add a panel group item referencing the panel\n            const group = state.panelGroups[next.groupId];\n            if (group === undefined) {\n              throw new Error(`Missing panel group ${next.groupId}`);\n            }\n            const layout: PanelGroupItemLayout = {\n              i: generateId().toString(),\n              x: 0,\n              y: getYForNewRow(group),\n              w: 12,\n              h: 6,\n            };\n            group.itemLayouts.push(layout);\n            group.itemPanelKeys[layout.i] = panelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      set((state) => {\n        // Add the new panel group if one was created for the panel\n        if (newGroup !== undefined) {\n          addPanelGroup(state, newGroup);\n        }\n\n        // Open the editor with the new state\n        state.panelEditor = editorState;\n      });\n    },\n  });\n}\n"],"names":["getYForNewRow","generateId","createPanelDefinition","addPanelGroup","createEmptyPanelGroup","createPanelEditorSlice","set","get","panelEditor","undefined","openEditPanel","panelGroupItemId","panels","panelGroups","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","panelKey","itemPanelKeys","Error","panelToEdit","editorState","mode","initialValues","groupId","panelDefinition","applyChanges","next","state","existingGroup","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingLayout","existingPanelKey","splice","newGroup","push","x","y","w","h","close","openAddPanel","panelGroupOrder","title","id","crypto","randomUUID","replaceAll","group","toString"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Action,\n  PanelEditorValues,\n  PanelGroupId,\n  PanelGroupItemId,\n  PanelGroupDefinition,\n  PanelGroupItemLayout,\n} from '@perses-dev/core';\nimport { StateCreator } from 'zustand';\nimport { generatePanelKey, getYForNewRow } from '../../utils';\nimport { generateId, Middleware, createPanelDefinition } from './common';\nimport { PanelGroupSlice, addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for adding or editing Panels.\n */\nexport interface PanelEditorSlice {\n  /**\n   * Initial values for add panel if default panel kind is defined\n   */\n  initialValues?: Pick<PanelEditorValues, 'panelDefinition'>;\n\n  /**\n   * State for the panel editor when its open, otherwise undefined when it's closed.\n   */\n  panelEditor?: PanelEditorState;\n\n  /**\n   * Opens the editor for editing an existing panel by providing its layout coordinates.\n   */\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Opens the editor for adding a new Panel to a panel group.\n   */\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n}\n\nexport interface PanelEditorState {\n  /**\n   * Whether we're adding a new panel, or editing an existing panel.\n   */\n  mode: Action;\n\n  /*\n   * Original item in a PanelGroup edited\n   */\n  panelGroupItemId?: PanelGroupItemId;\n\n  /**\n   * Initial values for the things that can be edited about a panel.\n   */\n  initialValues: PanelEditorValues;\n\n  /**\n   * Applies changes, but doesn't close the editor.\n   */\n  applyChanges: (next: PanelEditorValues) => void;\n\n  /**\n   * Close the editor.\n   */\n  close: () => void;\n}\n\n/**\n * Curried function for creating the PanelEditorSlice.\n */\nexport function createPanelEditorSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  PanelEditorSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  PanelEditorSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    panelEditor: undefined,\n\n    openEditPanel(panelGroupItemId): void {\n      const { panels, panelGroups } = get();\n\n      // Figure out the panel key at that location\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n      const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n      }\n\n      // Find the panel to edit\n      const panelToEdit = panels[panelKey];\n      if (panelToEdit === undefined) {\n        throw new Error(`Cannot find Panel with key '${panelKey}'`);\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'update',\n        panelGroupItemId: panelGroupItemId,\n        initialValues: {\n          groupId: panelGroupItemId.panelGroupId,\n          panelDefinition: panelToEdit,\n        },\n        applyChanges: (next) => {\n          set((state) => {\n            state.panels[panelKey] = next.panelDefinition;\n\n            // If the panel didn't change groups, nothing else to do\n            if (next.groupId === panelGroupId) {\n              return;\n            }\n\n            // Move panel to the new group\n            const existingGroup = state.panelGroups[panelGroupId];\n            if (existingGroup === undefined) {\n              throw new Error(`Missing panel group ${panelGroupId}`);\n            }\n\n            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];\n            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {\n              throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n            }\n\n            // Remove item from the old group\n            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n            delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n            // Add item to the end of the new group\n            const newGroup = state.panelGroups[next.groupId];\n            if (newGroup === undefined) {\n              throw new Error(`Could not find new group ${next.groupId}`);\n            }\n\n            newGroup.itemLayouts.push({\n              i: existingLayout.i,\n              x: 0,\n              y: getYForNewRow(newGroup),\n              w: existingLayout.w,\n              h: existingLayout.h,\n            });\n            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    openAddPanel(panelGroupId): void {\n      // If a panel group isn't supplied, add to the first group or create a group if there aren't any\n      let newGroup: PanelGroupDefinition | undefined = undefined;\n      panelGroupId ??= get().panelGroupOrder[0];\n      if (panelGroupId === undefined) {\n        newGroup = createEmptyPanelGroup();\n        newGroup.title = 'Panel Group';\n        panelGroupId = newGroup.id;\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'create',\n        initialValues: {\n          groupId: panelGroupId,\n          panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition(),\n        },\n        applyChanges: (next) => {\n          const panelKey = generatePanelKey();\n          set((state) => {\n            // Add a panel\n            state.panels[panelKey] = next.panelDefinition;\n\n            // Also add a panel group item referencing the panel\n            const group = state.panelGroups[next.groupId];\n            if (group === undefined) {\n              throw new Error(`Missing panel group ${next.groupId}`);\n            }\n            const layout: PanelGroupItemLayout = {\n              i: generateId().toString(),\n              x: 0,\n              y: getYForNewRow(group),\n              w: 12,\n              h: 6,\n            };\n            group.itemLayouts.push(layout);\n            group.itemPanelKeys[layout.i] = panelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      set((state) => {\n        // Add the new panel group if one was created for the panel\n        if (newGroup !== undefined) {\n          addPanelGroup(state, newGroup);\n        }\n\n        // Open the editor with the new state\n        state.panelEditor = editorState;\n      });\n    },\n  });\n}\n"],"names":["generatePanelKey","getYForNewRow","generateId","createPanelDefinition","addPanelGroup","createEmptyPanelGroup","createPanelEditorSlice","set","get","panelEditor","undefined","openEditPanel","panelGroupItemId","panels","panelGroups","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","panelKey","itemPanelKeys","Error","panelToEdit","editorState","mode","initialValues","groupId","panelDefinition","applyChanges","next","state","existingGroup","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingLayout","existingPanelKey","splice","newGroup","push","x","y","w","h","close","openAddPanel","panelGroupOrder","title","id","group","toString"],"mappings":"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"}

package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 export interface PanelEditor {
     preview: {
         previewPanelWidth?: number;
-        setPreviewPanelWidth?: (width: number) => void;
+        setPreviewPanelWidth: (width: number) => void;
     };
 }
 export interface PanelEditorProviderProps {

package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorProvider.d.ts","sourceRoot":"","sources":["../../../src/context/PanelEditorProvider/PanelEditorProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAChD,CAAC;CACH;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,kDAAoD,CAAC;AAEpF,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,KAAG,YAc5E,CAAC"}
+{"version":3,"file":"PanelEditorProvider.d.ts","sourceRoot":"","sources":["../../../src/context/PanelEditorProvider/PanelEditorProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAC/C,CAAC;CACH;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,kDAAoD,CAAC;AAEpF,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,KAAG,YAc5E,CAAC"}

package/dist/context/PanelEditorProvider/PanelEditorProvider.js

@@ -21,8 +21,7 @@ export const PanelEditorProvider = ({ children })=>{
                 setPreviewPanelWidth
             }
         }), [
-        previewPanelWidth,
-        setPreviewPanelWidth
+        previewPanelWidth
     ]);
     return /*#__PURE__*/ _jsx(PanelEditorContext.Provider, {
         value: ctx,

package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/PanelEditorProvider/PanelEditorProvider.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createContext, ReactElement, ReactNode, useMemo, useState } from 'react';\n\nexport interface PanelEditor {\n  preview: {\n    previewPanelWidth?: number;\n    setPreviewPanelWidth?: (width: number) => void;\n  };\n}\n\nexport interface PanelEditorProviderProps {\n  children: ReactNode;\n}\n\nexport const PanelEditorContext = createContext<PanelEditor | undefined>(undefined);\n\nexport const PanelEditorProvider = ({ children }: PanelEditorProviderProps): ReactElement => {\n  const [previewPanelWidth, setPreviewPanelWidth] = useState<number | undefined>(undefined);\n\n  const ctx = useMemo(\n    (): PanelEditor => ({\n      preview: {\n        previewPanelWidth,\n        setPreviewPanelWidth,\n      },\n    }),\n    [previewPanelWidth, setPreviewPanelWidth]\n  );\n\n  return <PanelEditorContext.Provider value={ctx}>{children}</PanelEditorContext.Provider>;\n};\n"],"names":["createContext","useMemo","useState","PanelEditorContext","undefined","PanelEditorProvider","children","previewPanelWidth","setPreviewPanelWidth","ctx","preview","Provider","value"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,aAAa,EAA2BC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAalF,OAAO,MAAMC,mCAAqBH,cAAuCI,WAAW;AAEpF,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,QAAQ,EAA4B;IACxE,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGN,SAA6BE;IAE/E,MAAMK,MAAMR,QACV,IAAoB,CAAA;YAClBS,SAAS;gBACPH;gBACAC;YACF;QACF,CAAA,GACA;QAACD;QAAmBC;KAAqB;IAG3C,qBAAO,KAACL,mBAAmBQ,QAAQ;QAACC,OAAOH;kBAAMH;;AACnD,EAAE"}
+{"version":3,"sources":["../../../src/context/PanelEditorProvider/PanelEditorProvider.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createContext, ReactElement, ReactNode, useMemo, useState } from 'react';\n\nexport interface PanelEditor {\n  preview: {\n    previewPanelWidth?: number;\n    setPreviewPanelWidth: (width: number) => void;\n  };\n}\n\nexport interface PanelEditorProviderProps {\n  children: ReactNode;\n}\n\nexport const PanelEditorContext = createContext<PanelEditor | undefined>(undefined);\n\nexport const PanelEditorProvider = ({ children }: PanelEditorProviderProps): ReactElement => {\n  const [previewPanelWidth, setPreviewPanelWidth] = useState<number | undefined>(undefined);\n\n  const ctx = useMemo(\n    (): PanelEditor => ({\n      preview: {\n        previewPanelWidth,\n        setPreviewPanelWidth,\n      },\n    }),\n    [previewPanelWidth]\n  );\n\n  return <PanelEditorContext.Provider value={ctx}>{children}</PanelEditorContext.Provider>;\n};\n"],"names":["createContext","useMemo","useState","PanelEditorContext","undefined","PanelEditorProvider","children","previewPanelWidth","setPreviewPanelWidth","ctx","preview","Provider","value"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,aAAa,EAA2BC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAalF,OAAO,MAAMC,mCAAqBH,cAAuCI,WAAW;AAEpF,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,QAAQ,EAA4B;IACxE,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGN,SAA6BE;IAE/E,MAAMK,MAAMR,QACV,IAAoB,CAAA;YAClBS,SAAS;gBACPH;gBACAC;YACF;QACF,CAAA,GACA;QAACD;KAAkB;IAGrB,qBAAO,KAACJ,mBAAmBQ,QAAQ;QAACC,OAAOH;kBAAMH;;AACnD,EAAE"}

package/dist/utils/panelUtils.d.ts

@@ -1,4 +1,4 @@
-import { PanelGroupDefinition, PanelGroupItemLayout, PanelDefinition } from '@perses-dev/core';
+import { PanelGroupDefinition, PanelGroupItemLayout } from '@perses-dev/core';
 export declare function getYForNewRow(group: PanelGroupDefinition): number;
 export type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' | 'y'>;
 /**
@@ -18,12 +18,7 @@ export type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' |
  */
 export declare function insertPanelInLayout(newLayout: UnpositionedPanelGroupItemLayout, referenceLayout: PanelGroupItemLayout, itemLayouts: PanelGroupItemLayout[]): PanelGroupItemLayout[];
 /**
- * @deprecated
- *
- * Get a valid panel key, where a valid key:
- * - does not include invalid characters
- * - is unique
- * TODO: It is not clear why too much complexity is needed for generating a panel key
+ * This function generates a unique panel key based on UUID or timestamp and random suffix.
  */
-export declare function getValidPanelKey(panelKey: string, panels: Record<string, PanelDefinition>): string;
+export declare const generatePanelKey: () => string;
 //# sourceMappingURL=panelUtils.d.ts.map

package/dist/utils/panelUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelUtils.d.ts","sourceRoot":"","sources":["../../src/utils/panelUtils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAI/F,wBAAgB,aAAa,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CASjE;AA8BD,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC;AAErF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,gCAAgC,EAC3C,eAAe,EAAE,oBAAoB,EACrC,WAAW,EAAE,oBAAoB,EAAE,GAClC,oBAAoB,EAAE,CAyExB;AAED;;;;;;;GAOG;AAEH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,MAAM,CASlG"}
+{"version":3,"file":"panelUtils.d.ts","sourceRoot":"","sources":["../../src/utils/panelUtils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,wBAAgB,aAAa,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CASjE;AA8BD,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC;AAErF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,gCAAgC,EAC3C,eAAe,EAAE,oBAAoB,EACrC,WAAW,EAAE,oBAAoB,EAAE,GAClC,oBAAoB,EAAE,CAyExB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAQnC,CAAC"}

package/dist/utils/panelUtils.js

@@ -122,56 +122,14 @@ function getPanelBounds({ x, y, w, h }) {
     ];
 }
 /**
- * @deprecated
- *
- * Get a valid panel key, where a valid key:
- * - does not include invalid characters
- * - is unique
- * TODO: It is not clear why too much complexity is needed for generating a panel key
- */ export function getValidPanelKey(panelKey, panels) {
-    const uniquePanelKeys = getUniquePanelKeys(panels);
-    let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;
-    const matchingKey = uniquePanelKeys[normalizedPanelKey];
-    if (typeof matchingKey === 'number') {
-        normalizedPanelKey += `-${matchingKey + 1}`;
+ * This function generates a unique panel key based on UUID or timestamp and random suffix.
+ */ export const generatePanelKey = ()=>{
+    /* crypto.randomUUID() is only available in secure contexts (HTTPS), */ if (window.isSecureContext) {
+        return crypto.randomUUID().replaceAll('-', '');
     }
-    return normalizedPanelKey;
-}
-const removeWhiteSpaces = (str)=>{
-    return str.replace(/\s+/g, '');
+    const timestamp = String(Date.now());
+    const randomSuffix = Math.random().toString(36).substring(2);
+    return `${timestamp}${randomSuffix}`;
 };
-/**
- * Breaks the specified panel key into the name and the optional `-number` used
- * for deduping panels with the same name.
- */ function getPanelKeyParts(panelKey) {
-    const parts = panelKey.match(/(.+)-([0-9]+)/);
-    if (parts && parts[1] && parts[2]) {
-        return {
-            name: parts[1],
-            number: parseInt(parts[2], 10)
-        };
-    }
-    return {
-        name: panelKey
-    };
-}
-// Find all the unique panel keys and the largest number used for each.
-// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name
-function getUniquePanelKeys(panels) {
-    const uniquePanelKeys = {};
-    Object.keys(panels).forEach((panelKey)=>{
-        const { name, number } = getPanelKeyParts(panelKey);
-        if (uniquePanelKeys[name] === undefined) {
-            uniquePanelKeys[name] = 0;
-        }
-        const currentValue = uniquePanelKeys[name];
-        if (typeof currentValue === 'number' && number) {
-            // Check for the maximum value because we cannot rely on a sequential
-            // set of numbers when panels are modified.
-            uniquePanelKeys[name] = Math.max(currentValue, number);
-        }
-    });
-    return uniquePanelKeys;
-}
 
 //# sourceMappingURL=panelUtils.js.map

package/dist/utils/panelUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/panelUtils.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelGroupDefinition, PanelGroupItemLayout, PanelDefinition } from '@perses-dev/core';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT, GRID_LAYOUT_COLS } from '../constants';\n\n// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present\nexport function getYForNewRow(group: PanelGroupDefinition): number {\n  let newRowY = 0;\n  for (const layout of group.itemLayouts) {\n    const itemMaxY = layout.y + layout.h;\n    if (itemMaxY > newRowY) {\n      newRowY = itemMaxY;\n    }\n  }\n  return newRowY;\n}\n\ntype PanelGroupItemBounds = {\n  /**\n   * Left horizontal position.\n   */\n  x1: number;\n  /**\n   * Right horizontal position.\n   */\n  x2: number;\n  /**\n   * Top vertical position.\n   */\n  y1: number;\n  /**\n   * Bottom vertical position\n   */\n  y2: number;\n};\n\nfunction getPanelBounds({ x, y, w, h }: PanelGroupItemLayout): PanelGroupItemBounds {\n  return {\n    x1: x,\n    x2: x + w,\n    y1: y,\n    y2: y + h,\n  };\n}\n\nexport type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' | 'y'>;\n\n/**\n * Inserts a new panel into the layout with placement determined by a specified\n * reference panel. The new panel is placed:\n * - To the right of the reference panel if there is space available without\n *   moving other panels.\n * - Otherwise, directly below the reference panel. If other panels are below\n *   this location, they will also shift downward because the grid uses\n *   vertical-based compacting.\n *\n * @param newLayout - Layout for new panel to insert into the grid.\n * @param referenceLayout - Layout for reference panel used to determine the\n *   placement of the new panel.\n * @param itemLayouts - Full grid layout.\n * @returns - Item layouts modified to insert the new panel.\n */\nexport function insertPanelInLayout(\n  newLayout: UnpositionedPanelGroupItemLayout,\n  referenceLayout: PanelGroupItemLayout,\n  itemLayouts: PanelGroupItemLayout[]\n): PanelGroupItemLayout[] {\n  const MAX_LAYOUT_WIDTH = GRID_LAYOUT_COLS[GRID_LAYOUT_SMALL_BREAKPOINT];\n\n  const referenceBounds = getPanelBounds(referenceLayout);\n\n  // Organize layouts based on vertical relation to the item being inserted\n  // after.\n  const aboveInsertRow: PanelGroupItemLayout[] = [];\n  const insertRow: PanelGroupItemLayout[] = [];\n  const belowInsertRow: PanelGroupItemLayout[] = [];\n  itemLayouts.forEach((itemLayout) => {\n    const itemBounds = getPanelBounds(itemLayout);\n\n    if (itemBounds.y2 <= referenceBounds.y1) {\n      aboveInsertRow.push(itemLayout);\n    } else if (itemBounds.y1 >= referenceBounds.y2) {\n      belowInsertRow.push(itemLayout);\n    } else {\n      insertRow.push(itemLayout);\n    }\n  });\n\n  // Cannot safely assume that the order of item layouts array is strictly\n  // left to right. Sorting the row by horizontal position to more easily find\n  // gaps.\n  insertRow.sort((a, b) => a.x - b.x);\n  const insertAfterIndex = insertRow.findIndex((item) => item.i === referenceLayout.i);\n\n  if (insertAfterIndex === insertRow.length - 1) {\n    // Insert to the right when space is available and the reference is the last\n    // item in the row.\n    if (referenceBounds.x2 + newLayout.w <= MAX_LAYOUT_WIDTH) {\n      return [\n        ...aboveInsertRow,\n        ...insertRow,\n        {\n          ...newLayout,\n          x: referenceBounds.x2,\n          y: referenceBounds.y1,\n        },\n        ...belowInsertRow,\n      ];\n    }\n  } else if (insertAfterIndex >= 0) {\n    const nextItem = insertRow[insertAfterIndex + 1];\n\n    if (nextItem && getPanelBounds(nextItem).x1 - referenceBounds.x2 >= newLayout.w) {\n      // Insert to the right when space is available between the reference and\n      // the next item in the row.\n      insertRow.splice(insertAfterIndex + 1, 0, {\n        ...newLayout,\n        x: referenceBounds.x2,\n        y: referenceBounds.y1,\n      });\n\n      return [...aboveInsertRow, ...insertRow, ...belowInsertRow];\n    }\n  }\n\n  // Insert the new item below the original and shift the items below the\n  // row where the reference is located.\n  return [\n    ...aboveInsertRow,\n    ...insertRow,\n    { x: referenceBounds.x1, y: referenceBounds.y2, ...newLayout },\n    ...belowInsertRow.map((itemLayout) => {\n      // Note: the grid will not necessarily display all of these items shifted\n      // all the way down because of vertical compacting, but shifing their\n      // y position ensures the new item gets vertical precedence over items\n      // below it in that compacting.\n      return { ...itemLayout, y: itemLayout.y + newLayout.h };\n    }),\n  ];\n}\n\n/**\n * @deprecated\n *\n * Get a valid panel key, where a valid key:\n * - does not include invalid characters\n * - is unique\n * TODO: It is not clear why too much complexity is needed for generating a panel key\n */\n\nexport function getValidPanelKey(panelKey: string, panels: Record<string, PanelDefinition>): string {\n  const uniquePanelKeys = getUniquePanelKeys(panels);\n  let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;\n\n  const matchingKey = uniquePanelKeys[normalizedPanelKey];\n  if (typeof matchingKey === 'number') {\n    normalizedPanelKey += `-${matchingKey + 1}`;\n  }\n  return normalizedPanelKey;\n}\n\ntype PanelKeyParts = {\n  name: string;\n  number?: number;\n};\n\nconst removeWhiteSpaces = (str: string): string => {\n  return str.replace(/\\s+/g, '');\n};\n\n/**\n * Breaks the specified panel key into the name and the optional `-number` used\n * for deduping panels with the same name.\n */\nfunction getPanelKeyParts(panelKey: string): PanelKeyParts {\n  const parts = panelKey.match(/(.+)-([0-9]+)/);\n  if (parts && parts[1] && parts[2]) {\n    return {\n      name: parts[1],\n      number: parseInt(parts[2], 10),\n    };\n  }\n\n  return {\n    name: panelKey,\n  };\n}\n\n// Find all the unique panel keys and the largest number used for each.\n// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name\nfunction getUniquePanelKeys(panels: Record<string, PanelDefinition>): Record<string, number> {\n  const uniquePanelKeys: Record<string, number> = {};\n  Object.keys(panels).forEach((panelKey) => {\n    const { name, number } = getPanelKeyParts(panelKey);\n    if (uniquePanelKeys[name] === undefined) {\n      uniquePanelKeys[name] = 0;\n    }\n    const currentValue = uniquePanelKeys[name];\n    if (typeof currentValue === 'number' && number) {\n      // Check for the maximum value because we cannot rely on a sequential\n      // set of numbers when panels are modified.\n      uniquePanelKeys[name] = Math.max(currentValue, number);\n    }\n  });\n  return uniquePanelKeys;\n}\n"],"names":["GRID_LAYOUT_SMALL_BREAKPOINT","GRID_LAYOUT_COLS","getYForNewRow","group","newRowY","layout","itemLayouts","itemMaxY","y","h","getPanelBounds","x","w","x1","x2","y1","y2","insertPanelInLayout","newLayout","referenceLayout","MAX_LAYOUT_WIDTH","referenceBounds","aboveInsertRow","insertRow","belowInsertRow","forEach","itemLayout","itemBounds","push","sort","a","b","insertAfterIndex","findIndex","item","i","length","nextItem","splice","map","getValidPanelKey","panelKey","panels","uniquePanelKeys","getUniquePanelKeys","normalizedPanelKey","getPanelKeyParts","removeWhiteSpaces","name","matchingKey","str","replace","parts","match","number","parseInt","Object","keys","undefined","currentValue","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/panelUtils.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelGroupDefinition, PanelGroupItemLayout } from '@perses-dev/core';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT, GRID_LAYOUT_COLS } from '../constants';\n\n// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present\nexport function getYForNewRow(group: PanelGroupDefinition): number {\n  let newRowY = 0;\n  for (const layout of group.itemLayouts) {\n    const itemMaxY = layout.y + layout.h;\n    if (itemMaxY > newRowY) {\n      newRowY = itemMaxY;\n    }\n  }\n  return newRowY;\n}\n\ntype PanelGroupItemBounds = {\n  /**\n   * Left horizontal position.\n   */\n  x1: number;\n  /**\n   * Right horizontal position.\n   */\n  x2: number;\n  /**\n   * Top vertical position.\n   */\n  y1: number;\n  /**\n   * Bottom vertical position\n   */\n  y2: number;\n};\n\nfunction getPanelBounds({ x, y, w, h }: PanelGroupItemLayout): PanelGroupItemBounds {\n  return {\n    x1: x,\n    x2: x + w,\n    y1: y,\n    y2: y + h,\n  };\n}\n\nexport type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' | 'y'>;\n\n/**\n * Inserts a new panel into the layout with placement determined by a specified\n * reference panel. The new panel is placed:\n * - To the right of the reference panel if there is space available without\n *   moving other panels.\n * - Otherwise, directly below the reference panel. If other panels are below\n *   this location, they will also shift downward because the grid uses\n *   vertical-based compacting.\n *\n * @param newLayout - Layout for new panel to insert into the grid.\n * @param referenceLayout - Layout for reference panel used to determine the\n *   placement of the new panel.\n * @param itemLayouts - Full grid layout.\n * @returns - Item layouts modified to insert the new panel.\n */\nexport function insertPanelInLayout(\n  newLayout: UnpositionedPanelGroupItemLayout,\n  referenceLayout: PanelGroupItemLayout,\n  itemLayouts: PanelGroupItemLayout[]\n): PanelGroupItemLayout[] {\n  const MAX_LAYOUT_WIDTH = GRID_LAYOUT_COLS[GRID_LAYOUT_SMALL_BREAKPOINT];\n\n  const referenceBounds = getPanelBounds(referenceLayout);\n\n  // Organize layouts based on vertical relation to the item being inserted\n  // after.\n  const aboveInsertRow: PanelGroupItemLayout[] = [];\n  const insertRow: PanelGroupItemLayout[] = [];\n  const belowInsertRow: PanelGroupItemLayout[] = [];\n  itemLayouts.forEach((itemLayout) => {\n    const itemBounds = getPanelBounds(itemLayout);\n\n    if (itemBounds.y2 <= referenceBounds.y1) {\n      aboveInsertRow.push(itemLayout);\n    } else if (itemBounds.y1 >= referenceBounds.y2) {\n      belowInsertRow.push(itemLayout);\n    } else {\n      insertRow.push(itemLayout);\n    }\n  });\n\n  // Cannot safely assume that the order of item layouts array is strictly\n  // left to right. Sorting the row by horizontal position to more easily find\n  // gaps.\n  insertRow.sort((a, b) => a.x - b.x);\n  const insertAfterIndex = insertRow.findIndex((item) => item.i === referenceLayout.i);\n\n  if (insertAfterIndex === insertRow.length - 1) {\n    // Insert to the right when space is available and the reference is the last\n    // item in the row.\n    if (referenceBounds.x2 + newLayout.w <= MAX_LAYOUT_WIDTH) {\n      return [\n        ...aboveInsertRow,\n        ...insertRow,\n        {\n          ...newLayout,\n          x: referenceBounds.x2,\n          y: referenceBounds.y1,\n        },\n        ...belowInsertRow,\n      ];\n    }\n  } else if (insertAfterIndex >= 0) {\n    const nextItem = insertRow[insertAfterIndex + 1];\n\n    if (nextItem && getPanelBounds(nextItem).x1 - referenceBounds.x2 >= newLayout.w) {\n      // Insert to the right when space is available between the reference and\n      // the next item in the row.\n      insertRow.splice(insertAfterIndex + 1, 0, {\n        ...newLayout,\n        x: referenceBounds.x2,\n        y: referenceBounds.y1,\n      });\n\n      return [...aboveInsertRow, ...insertRow, ...belowInsertRow];\n    }\n  }\n\n  // Insert the new item below the original and shift the items below the\n  // row where the reference is located.\n  return [\n    ...aboveInsertRow,\n    ...insertRow,\n    { x: referenceBounds.x1, y: referenceBounds.y2, ...newLayout },\n    ...belowInsertRow.map((itemLayout) => {\n      // Note: the grid will not necessarily display all of these items shifted\n      // all the way down because of vertical compacting, but shifing their\n      // y position ensures the new item gets vertical precedence over items\n      // below it in that compacting.\n      return { ...itemLayout, y: itemLayout.y + newLayout.h };\n    }),\n  ];\n}\n\n/**\n * This function generates a unique panel key based on UUID or timestamp and random suffix.\n */\nexport const generatePanelKey = (): string => {\n  /* crypto.randomUUID() is only available in secure contexts (HTTPS), */\n  if (window.isSecureContext) {\n    return crypto.randomUUID().replaceAll('-', '');\n  }\n  const timestamp = String(Date.now());\n  const randomSuffix = Math.random().toString(36).substring(2);\n  return `${timestamp}${randomSuffix}`;\n};\n"],"names":["GRID_LAYOUT_SMALL_BREAKPOINT","GRID_LAYOUT_COLS","getYForNewRow","group","newRowY","layout","itemLayouts","itemMaxY","y","h","getPanelBounds","x","w","x1","x2","y1","y2","insertPanelInLayout","newLayout","referenceLayout","MAX_LAYOUT_WIDTH","referenceBounds","aboveInsertRow","insertRow","belowInsertRow","forEach","itemLayout","itemBounds","push","sort","a","b","insertAfterIndex","findIndex","item","i","length","nextItem","splice","map","generatePanelKey","window","isSecureContext","crypto","randomUUID","replaceAll","timestamp","String","Date","now","randomSuffix","Math","random","toString","substring"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.53.0-beta.2",
+  "version": "0.53.0-beta.4",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.53.0-beta.2",
-    "@perses-dev/core": "0.53.0-beta.2",
-    "@perses-dev/plugin-system": "0.53.0-beta.2",
+    "@perses-dev/components": "0.53.0-beta.4",
+    "@perses-dev/core": "0.53.0-beta.3",
+    "@perses-dev/plugin-system": "0.53.0-beta.4",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
@@ -46,7 +46,6 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.53.0-beta.2",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },
@@ -59,4 +58,4 @@
   "files": [
     "dist"
   ]
-}
+}