@perses-dev/dashboards 0.10.0 → 0.12.0

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

@@ -0,0 +1,182 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createPanelEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelEditorSlice
+});
+const _functions = require("../../utils/functions");
+const _common = require("./common");
+function createPanelEditorSlice() {
+    // Return the state creator function for Zustand that uses the panels provided as intitial state
+    return (set, get)=>{
+        return {
+            panelEditor: undefined,
+            openEditPanel (panelGroupItemId) {
+                var ref;
+                const { panels , panelGroups  } = get();
+                // Figure out the panel key at that location
+                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                const panelKey = (ref = panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+                if (panelKey === undefined) {
+                    throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
+                }
+                // Find the panel to edit
+                const panelToEdit = panels[panelKey];
+                if (panelToEdit === undefined) {
+                    throw new Error(`Cannot find Panel with key '${panelKey}'`);
+                }
+                var _description;
+                const editorState = {
+                    mode: 'Edit',
+                    initialValues: {
+                        name: panelToEdit.spec.display.name,
+                        description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
+                        groupId: panelGroupItemId.panelGroupId,
+                        kind: panelToEdit.spec.plugin.kind,
+                        spec: panelToEdit.spec.plugin.spec
+                    },
+                    applyChanges: (next)=>{
+                        const panelDefinititon = createPanelDefinitionFromEditorValues(next);
+                        set((draft)=>{
+                            draft.panels[panelKey] = panelDefinititon;
+                            // If the panel didn't change groups, nothing else to do
+                            if (next.groupId === panelGroupId) {
+                                return;
+                            }
+                            // Move panel to the new group
+                            const existingGroup = draft.panelGroups[panelGroupId];
+                            if (existingGroup === undefined) {
+                                throw new Error(`Missing panel group ${panelGroupId}`);
+                            }
+                            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout)=>layout.i === panelGroupLayoutId);
+                            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];
+                            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {
+                                throw new Error(`Missing panel group item ${panelGroupLayoutId}`);
+                            }
+                            // Remove item from the old group
+                            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
+                            delete existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            // Add item to the end of the new group
+                            const newGroup = draft.panelGroups[next.groupId];
+                            if (newGroup === undefined) {
+                                throw new Error(`Could not find new group ${next.groupId}`);
+                            }
+                            newGroup.itemLayouts.push({
+                                i: existingLayout.i,
+                                x: 0,
+                                y: getYForNewRow(newGroup),
+                                w: existingLayout.w,
+                                h: existingLayout.h
+                            });
+                            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;
+                        });
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                set((state)=>{
+                    state.panelEditor = editorState;
+                });
+            },
+            openAddPanel (panelGroupId) {
+                // If a panel group isn't supplied, add to the first group
+                if (panelGroupId === undefined) {
+                    const firstGroupId = get().panelGroupOrder[0];
+                    if (firstGroupId === undefined) {
+                        throw new Error('No panel groups to add a panel to');
+                    }
+                    panelGroupId = firstGroupId;
+                }
+                const editorState = {
+                    mode: 'Add',
+                    initialValues: {
+                        name: '',
+                        description: '',
+                        groupId: panelGroupId,
+                        // TODO: If we knew what plugins were available (and how to create the initial spec), we might be able to
+                        // set a smarter default here?
+                        kind: '',
+                        spec: {}
+                    },
+                    applyChanges: (next)=>{
+                        const panelDef = createPanelDefinitionFromEditorValues(next);
+                        const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        set((draft)=>{
+                            // Add a panel
+                            draft.panels[panelKey] = panelDef;
+                            // Also add a panel group item referencing the panel
+                            const group = draft.panelGroups[next.groupId];
+                            if (group === undefined) {
+                                throw new Error(`Missing panel group ${next.groupId}`);
+                            }
+                            const layout = {
+                                i: (0, _common.generateId)().toString(),
+                                x: 0,
+                                y: getYForNewRow(group),
+                                w: 12,
+                                h: 6
+                            };
+                            group.itemLayouts.push(layout);
+                            group.itemPanelKeys[layout.i] = panelKey;
+                        });
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                set((state)=>{
+                    state.panelEditor = editorState;
+                });
+            }
+        };
+    };
+}
+// Helper to create PanelDefinitions when saving
+function createPanelDefinitionFromEditorValues(editorValues) {
+    return {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name: editorValues.name,
+                description: editorValues.description !== '' ? editorValues.description : undefined
+            },
+            plugin: {
+                kind: editorValues.kind,
+                spec: editorValues.spec
+            }
+        }
+    };
+}
+// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present
+function getYForNewRow(group) {
+    let newRowY = 0;
+    for (const layout of group.itemLayouts){
+        const itemMaxY = layout.y + layout.h;
+        if (itemMaxY > newRowY) {
+            newRowY = itemMaxY;
+        }
+    }
+    return newRowY;
+}

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

@@ -0,0 +1,89 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createPanelGroupEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelGroupEditorSlice
+});
+const _common = require("./common");
+const createPanelGroupEditorSlice = (set, get)=>({
+        panelGroupEditor: undefined,
+        openAddPanelGroup: ()=>{
+            // Create the editor state
+            const editor = {
+                mode: 'Add',
+                initialValues: {
+                    title: '',
+                    isCollapsed: false
+                },
+                applyChanges (next) {
+                    const newGroup = {
+                        id: (0, _common.generateId)(),
+                        itemLayouts: [],
+                        itemPanelKeys: {},
+                        ...next
+                    };
+                    set((draft)=>{
+                        draft.panelGroups[newGroup.id] = newGroup;
+                        draft.panelGroupOrder.unshift(newGroup.id);
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        },
+        openEditPanelGroup: (panelGroupId)=>{
+            const existingGroup = get().panelGroups[panelGroupId];
+            if (existingGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+            }
+            var _title;
+            // Create the editor state
+            const editor = {
+                mode: 'Edit',
+                initialValues: {
+                    title: (_title = existingGroup.title) !== null && _title !== void 0 ? _title : '',
+                    isCollapsed: existingGroup.isCollapsed
+                },
+                applyChanges (next) {
+                    set((draft)=>{
+                        const group = draft.panelGroups[panelGroupId];
+                        if (group === undefined) {
+                            throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+                        }
+                        group.title = next.title;
+                        group.isCollapsed = next.isCollapsed;
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        }
+    });

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -18,21 +18,86 @@ Object.defineProperty(exports, "createPanelGroupSlice", {
     enumerable: true,
     get: ()=>createPanelGroupSlice
 });
-const createPanelGroupSlice = (set)=>({
-        openPanelGroupDialog: (groupIndex)=>set((state)=>{
-                state.panelGroupDialog = {
-                    groupIndex
-                };
-            }),
-        closePanelGroupDialog: ()=>set((state)=>{
-                state.panelGroupDialog = undefined;
-            }),
-        openDeletePanelGroupDialog: (groupIndex)=>set((state)=>{
-                state.deletePanelGroupDialog = {
-                    groupIndex
-                };
-            }),
-        closeDeletePanelGroupDialog: ()=>set((state)=>{
-                state.deletePanelGroupDialog = undefined;
-            })
-    });
+const _core = require("@perses-dev/core");
+const _common = require("./common");
+function createPanelGroupSlice(layouts) {
+    // Convert the initial layouts from the JSON
+    const panelGroups = {};
+    const panelGroupIdOrder = [];
+    for (const layout of layouts){
+        var ref, ref1, ref2;
+        const itemLayouts = [];
+        const itemPanelKeys = {};
+        // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
+        for (const item of layout.spec.items){
+            const panelGroupLayoutId = (0, _common.generateId)().toString();
+            itemLayouts.push({
+                i: panelGroupLayoutId,
+                w: item.width,
+                h: item.height,
+                x: item.x,
+                y: item.y
+            });
+            itemPanelKeys[panelGroupLayoutId] = (0, _core.getPanelKeyFromRef)(item.content);
+        }
+        // Create the panel group and keep track of the ID order
+        const panelGroupId = (0, _common.generateId)();
+        panelGroups[panelGroupId] = {
+            id: panelGroupId,
+            isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
+            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title,
+            itemLayouts,
+            itemPanelKeys
+        };
+        panelGroupIdOrder.push(panelGroupId);
+    }
+    // Return the state creator function for Zustand
+    return (set)=>({
+            panelGroups,
+            panelGroupOrder: panelGroupIdOrder,
+            previousPanelGroupState: {
+                panelGroups,
+                panelGroupIdOrder
+            },
+            savePanelGroups () {
+                set((state)=>{
+                    state.previousPanelGroupState = {
+                        panelGroups: state.panelGroups,
+                        panelGroupIdOrder: state.panelGroupOrder
+                    };
+                });
+            },
+            resetPanelGroups () {
+                set((state)=>{
+                    state.panelGroups = state.previousPanelGroupState.panelGroups;
+                    state.panelGroupOrder = state.previousPanelGroupState.panelGroupIdOrder;
+                });
+            },
+            swapPanelGroups (x, y) {
+                set((state)=>{
+                    if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {
+                        throw new Error('index out of bound');
+                    }
+                    const xPanelGroup = state.panelGroupOrder[x];
+                    const yPanelGroup = state.panelGroupOrder[y];
+                    if (xPanelGroup === undefined || yPanelGroup === undefined) {
+                        throw new Error('panel group is undefined');
+                    }
+                    // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
+                    [state.panelGroupOrder[x], state.panelGroupOrder[y]] = [
+                        yPanelGroup,
+                        xPanelGroup
+                    ];
+                });
+            },
+            updatePanelGroupLayouts (panelGroupId, itemLayouts) {
+                set((state)=>{
+                    const group = state.panelGroups[panelGroupId];
+                    if (group === undefined) {
+                        throw new Error(`Cannot find panel group ${panelGroupId}`);
+                    }
+                    group.itemLayouts = itemLayouts;
+                });
+            }
+        });
+}

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

@@ -0,0 +1,36 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createPanelSlice", {
+    enumerable: true,
+    get: ()=>createPanelSlice
+});
+function createPanelSlice(panels) {
+    return (set)=>({
+            panels,
+            previousPanels: panels,
+            resetPanels () {
+                set((state)=>{
+                    state.panels = state.previousPanels;
+                });
+            },
+            savePanels () {
+                set((state)=>{
+                    state.previousPanels = state.panels;
+                });
+            }
+        });
+}

package/dist/cjs/context/TimeRangeProvider.js

@@ -14,14 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeRangeProvider", {
-    enumerable: true,
-    get: ()=>TimeRangeProvider
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeRangeProvider: ()=>TimeRangeProvider,
+    useDashboardTimeRange: ()=>useDashboardTimeRange
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _dateFns = require("date-fns");
-const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -63,47 +67,12 @@ function _interopRequireWildcard(obj, nodeInterop) {
     return newObj;
 }
 function TimeRangeProvider(props) {
-    const { initialTimeRange , children , onTimeRangeChange  } = props;
-    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.isRelativeTimeRange)(initialTimeRange) ? (0, _core.toAbsoluteTimeRange)(initialTimeRange) : initialTimeRange;
-    const [timeRange, setActiveTimeRange] = (0, _react.useState)(defaultTimeRange);
-    const setTimeRange = (0, _react.useCallback)((value)=>{
-        if (onTimeRangeChange !== undefined) {
-            // optional callback to override default behavior
-            onTimeRangeChange(value);
-            return;
-        }
-        if ((0, _core.isRelativeTimeRange)(value)) {
-            if (setQueryString) {
-                queryString.set('start', value.pastDuration);
-                // end not required for relative time but may have been set by AbsoluteTimePicker or zoom
-                queryString.delete('end');
-                setQueryString(queryString);
-            } else {
-                setActiveTimeRange((0, _core.toAbsoluteTimeRange)(value));
-            }
-            return;
-        }
-        // allows app to specify whether query params should be source of truth for active time range
-        if (setQueryString) {
-            // Absolute URL example) ?start=1663707045000&end=1663713330000
-            // currently set from ViewDashboard initial queryString, AbsoluteTimePicker, or LineChart panel onDataZoom
-            const startUnixMs = (0, _dateFns.getUnixTime)(value.start) * 1000;
-            const endUnixMs = (0, _dateFns.getUnixTime)(value.end) * 1000;
-            queryString.set('start', startUnixMs.toString());
-            queryString.set('end', endUnixMs.toString());
-            setQueryString(queryString);
-        } else {
-            setActiveTimeRange(value);
-        }
-    }, [
-        queryString,
-        setQueryString,
-        onTimeRangeChange
-    ]);
+    const { timeRange , children , setTimeRange  } = props;
+    // TODO: fix no-op, pass paramsEnabled as false in useSetTimeRangeParams as workaround
     const ctx = (0, _react.useMemo)(()=>({
             timeRange,
-            setTimeRange
+            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
+            /* no-op */ }
         }), [
         timeRange,
         setTimeRange
@@ -113,3 +82,10 @@ function TimeRangeProvider(props) {
         children: children
     });
 }
+function useDashboardTimeRange() {
+    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRangeContext)();
+    return {
+        timeRange,
+        setTimeRange
+    };
+}

package/dist/cjs/context/index.js

@@ -16,9 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
-_exportStar(require("./QueryStringProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
 _exportStar(require("./TimeRangeProvider"), exports);
+_exportStar(require("./useDashboardSpec"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/useDashboardSpec.js

@@ -0,0 +1,90 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDashboardSpec", {
+    enumerable: true,
+    get: ()=>useDashboardSpec
+});
+const _core = require("@perses-dev/core");
+const _dashboardProvider = require("./DashboardProvider");
+const _templateVariableProvider = require("./TemplateVariableProvider");
+function useDashboardSpec() {
+    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , reset: resetDashboardStore ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , reset  })=>({
+            panels,
+            panelGroups,
+            panelGroupOrder,
+            defaultTimeRange,
+            reset
+        }));
+    const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
+    const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
+    const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
+    const spec = {
+        panels,
+        layouts,
+        variables,
+        duration: defaultTimeRange.pastDuration
+    };
+    const resetSpec = (spec)=>{
+        setVariableDefinitions(spec.variables);
+        // TODO: Should we call reset on the dashboard store with the spec?
+        resetDashboardStore();
+    };
+    return {
+        spec,
+        resetSpec
+    };
+}
+function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
+    const layouts = [];
+    panelGroupOrder.map((groupOrderId)=>{
+        const group = panelGroups[groupOrderId];
+        if (group === undefined) {
+            throw new Error('panel group not found');
+        }
+        const { title , isCollapsed , itemLayouts , itemPanelKeys  } = group;
+        let display = undefined;
+        if (title) {
+            display = {
+                title,
+                collapse: {
+                    open: !isCollapsed
+                }
+            };
+        }
+        const layout = {
+            kind: 'Grid',
+            spec: {
+                display,
+                items: itemLayouts.map((layout)=>{
+                    const panelKey = itemPanelKeys[layout.i];
+                    if (panelKey === undefined) {
+                        throw new Error(`Missing panel key of layout ${layout.i}`);
+                    }
+                    return {
+                        x: layout.x,
+                        y: layout.y,
+                        width: layout.w,
+                        height: layout.h,
+                        content: (0, _core.createPanelRef)(panelKey)
+                    };
+                })
+            }
+        };
+        layouts.push(layout);
+    });
+    return layouts;
+}

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./components"), exports);
 _exportStar(require("./context"), exports);
+_exportStar(require("./utils"), exports);
 _exportStar(require("./views"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/render.js

@@ -20,8 +20,13 @@ Object.defineProperty(exports, "renderWithContext", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
+const _reactRouterDom = require("react-router-dom");
+const _history = require("history");
+const _useQueryParams = require("use-query-params");
+const _reactRouter6 = require("use-query-params/adapters/react-router-6");
 const _reactQuery = require("@tanstack/react-query");
-function renderWithContext(ui, options) {
+const _components = require("@perses-dev/components");
+function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactQuery.QueryClient({
         defaultOptions: {
@@ -31,8 +36,23 @@ function renderWithContext(ui, options) {
             }
         }
     });
-    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
-        client: queryClient,
-        children: ui
-    }), options);
+    const BaseRender = ()=>{
+        const HistoryRouter = _reactRouterDom.unstable_HistoryRouter;
+        history = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(HistoryRouter, {
+            history: history,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
+                    adapter: _reactRouter6.ReactRouter6Adapter,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                        themeName: "perses",
+                        chartsTheme: _components.testChartsTheme,
+                        children: ui
+                    })
+                })
+            })
+        });
+    };
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/test/setup-tests.js

@@ -10,11 +10,14 @@
 // 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.
-// Add testing library assertions
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _reactIntersectionObserver = require("react-intersection-observer");
 require("@testing-library/jest-dom/extend-expect");
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
 jest.mock('echarts/core');
+// Tell react-intersection-observer that everything should be considered in-view for tests (see package documentation
+// for other options)
+(0, _reactIntersectionObserver.defaultFallbackInView)(true);