\n {controls && (\n
\n {controls.map((control) => (\n \n ))}\n
\n )}\n
\n
\n \n
\n );\n}\n\nfunction useSubscribeToEmbeddedUrlState(onStateChange: ((state: string) => void) | undefined, model: DashboardScene) {\n useEffect(() => {\n if (!onStateChange) {\n return;\n }\n\n let lastState = '';\n const sub = model.subscribeToEvent(SceneObjectStateChangedEvent, (evt) => {\n if (evt.payload.changedObject.urlSync) {\n const state = sceneUtils.getUrlState(model);\n const stateAsString = urlUtil.renderUrl('', state);\n\n if (lastState !== stateAsString) {\n lastState = stateAsString;\n onStateChange(stateAsString);\n }\n }\n });\n\n return () => sub.unsubscribe();\n }, [model, onStateChange]);\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n canvas: css({\n label: 'canvas-content',\n display: 'flex',\n flexDirection: 'column',\n flexBasis: '100%',\n flexGrow: 1,\n }),\n body: css({\n label: 'body',\n flexGrow: 1,\n display: 'flex',\n gap: '8px',\n marginBottom: theme.spacing(2),\n }),\n controls: css({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n gap: theme.spacing(1),\n top: 0,\n zIndex: theme.zIndex.navbarFixed,\n padding: theme.spacing(0, 0, 2, 0),\n }),\n };\n}\n","import React, { useState } from 'react';\n\nimport { Box } from '@grafana/ui';\nimport { Page } from 'app/core/components/Page/Page';\n\nimport { EmbeddedDashboard } from './EmbeddedDashboard';\n\nexport function EmbeddedDashboardTestPage() {\n const [state, setState] = useState('?from=now-5m&to=now');\n\n return (\n