@grafana/scenes 0.0.9 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/EmbeddedScene.js +7 -3
- package/dist/esm/components/EmbeddedScene.js.map +1 -1
- package/dist/esm/components/layout/SceneFlexLayout.js +10 -2
- package/dist/esm/components/layout/SceneFlexLayout.js.map +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +17 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,14 +5,18 @@ import { SceneObjectBase } from '../core/SceneObjectBase.js';
|
|
|
5
5
|
import { UrlSyncManager } from '../services/UrlSyncManager.js';
|
|
6
6
|
|
|
7
7
|
class EmbeddedScene extends SceneObjectBase {
|
|
8
|
-
|
|
9
|
-
super.activate();
|
|
8
|
+
initUrlSync() {
|
|
10
9
|
this.urlSyncManager = new UrlSyncManager(this);
|
|
11
10
|
this.urlSyncManager.initSync();
|
|
12
11
|
}
|
|
12
|
+
activate() {
|
|
13
|
+
super.activate();
|
|
14
|
+
}
|
|
13
15
|
deactivate() {
|
|
14
16
|
super.deactivate();
|
|
15
|
-
this.urlSyncManager
|
|
17
|
+
if (this.urlSyncManager) {
|
|
18
|
+
this.urlSyncManager.cleanUp();
|
|
19
|
+
}
|
|
16
20
|
}
|
|
17
21
|
}
|
|
18
22
|
EmbeddedScene.Component = EmbeddedSceneRenderer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n /**\n * The main content of the scene (usually a SceneFlexLayout)\n */\n body: SceneObject;\n /**\n * Top row of variable selectors, filters, time pickers and custom actions.\n */\n controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n public static Component = EmbeddedSceneRenderer;\n\n private urlSyncManager?: UrlSyncManager;\n\n public
|
|
1
|
+
{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n /**\n * The main content of the scene (usually a SceneFlexLayout)\n */\n body: SceneObject;\n /**\n * Top row of variable selectors, filters, time pickers and custom actions.\n */\n controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n public static Component = EmbeddedSceneRenderer;\n\n private urlSyncManager?: UrlSyncManager;\n\n /**\n * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n * before they get activated. This saves some unnecessary re-renders and makes sure variables\n * queries are issued as needed.\n */\n public initUrlSync() {\n this.urlSyncManager = new UrlSyncManager(this);\n this.urlSyncManager.initSync();\n }\n\n public activate() {\n super.activate();\n }\n\n public deactivate() {\n super.deactivate();\n if (this.urlSyncManager) {\n this.urlSyncManager!.cleanUp();\n }\n }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n const { body, controls } = model.useState();\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.container}>\n {controls && (\n <div className={styles.controls}>\n {controls.map((control) => (\n <control.Component key={control.state.key} model={control} />\n ))}\n </div>\n )}\n <div className={styles.body}>\n <body.Component model={body} />\n </div>\n </div>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n container: css({\n flexGrow: 1,\n display: 'flex',\n gap: '8px',\n minHeight: '100%',\n flexDirection: 'column',\n }),\n body: css({\n flexGrow: 1,\n display: 'flex',\n gap: '8px',\n }),\n controls: css({\n display: 'flex',\n gap: theme.spacing(1),\n alignItems: 'center',\n }),\n };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAU9D,WAAc,GAAA;AACnB,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,GACjB;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAI,KAAK,cAAgB,EAAA;AACvB,MAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF;AACF,CAAA;AAzBa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA0B5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,MACL,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,KACb,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
|
|
@@ -12,9 +12,17 @@ class SceneFlexLayout extends SceneObjectBase {
|
|
|
12
12
|
SceneFlexLayout.Component = FlexLayoutRenderer;
|
|
13
13
|
SceneFlexLayout.Editor = FlexLayoutEditor;
|
|
14
14
|
function FlexLayoutRenderer({ model, isEditing }) {
|
|
15
|
-
const { direction = "row", children } = model.useState();
|
|
15
|
+
const { direction = "row", children, wrap } = model.useState();
|
|
16
|
+
const style = {
|
|
17
|
+
flexGrow: 1,
|
|
18
|
+
flexDirection: direction,
|
|
19
|
+
display: "flex",
|
|
20
|
+
gap: "8px",
|
|
21
|
+
flexWrap: wrap,
|
|
22
|
+
alignContent: "baseline"
|
|
23
|
+
};
|
|
16
24
|
return /* @__PURE__ */ React.createElement("div", {
|
|
17
|
-
style
|
|
25
|
+
style
|
|
18
26
|
}, children.map((item) => /* @__PURE__ */ React.createElement(FlexLayoutChildComponent, {
|
|
19
27
|
key: item.state.key,
|
|
20
28
|
item,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n direction?: FlexLayoutDirection;\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {\n public static Component = FlexLayoutRenderer;\n public static Editor = FlexLayoutEditor;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n}\n\nfunction FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row', children } = model.useState();\n\n
|
|
1
|
+
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n direction?: FlexLayoutDirection;\n wrap?: CSSProperties['flexWrap'];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {\n public static Component = FlexLayoutRenderer;\n public static Editor = FlexLayoutEditor;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n}\n\nfunction FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row', children, wrap } = model.useState();\n\n const style: CSSProperties = {\n flexGrow: 1,\n flexDirection: direction,\n display: 'flex',\n gap: '8px',\n flexWrap: wrap,\n alignContent: 'baseline',\n };\n\n return (\n <div style={style}>\n {children.map((item) => (\n <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} isEditing={isEditing} />\n ))}\n </div>\n );\n}\n\nfunction FlexLayoutChildComponent({\n item,\n direction,\n isEditing,\n}: {\n item: SceneLayoutChild;\n direction: FlexLayoutDirection;\n isEditing?: boolean;\n}) {\n const { placement } = item.useState();\n\n return (\n <div style={getItemStyles(direction, placement)}>\n <item.Component model={item} isEditing={isEditing} />\n </div>\n );\n}\n\nfunction getItemStyles(direction: FlexLayoutDirection, layout: SceneLayoutChildOptions = {}) {\n const { xSizing = 'fill', ySizing = 'fill' } = layout;\n\n const style: CSSProperties = {\n display: 'flex',\n flexDirection: direction,\n minWidth: layout.minWidth,\n minHeight: layout.minHeight,\n position: 'relative',\n };\n\n if (direction === 'column') {\n if (layout.height) {\n style.height = layout.height;\n } else {\n style.flexGrow = ySizing === 'fill' ? 1 : 0;\n }\n\n if (layout.width) {\n style.width = layout.width;\n } else {\n style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n }\n } else {\n if (layout.height) {\n style.height = layout.height;\n } else {\n style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n }\n\n if (layout.width) {\n style.width = layout.width;\n } else {\n style.flexGrow = xSizing === 'fill' ? 1 : 0;\n }\n }\n\n return style;\n}\n\nfunction FlexLayoutEditor({ model }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row' } = model.useState();\n const options = [\n { icon: 'arrow-right', value: 'row' },\n { icon: 'arrow-down', value: 'column' },\n ];\n\n return (\n <Field label=\"Direction\">\n <RadioButtonGroup\n options={options}\n value={direction}\n onChange={(value) => model.setState({ direction: value as FlexLayoutDirection })}\n />\n </Field>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { CSSProperties } from 'react';
|
|
3
3
|
import { Observable, Observer, Subscription, Unsubscribable } from 'rxjs';
|
|
4
4
|
import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, DataFrame } from '@grafana/data';
|
|
5
5
|
import { VariableType, VariableHide, VariableModel } from '@grafana/schema';
|
|
@@ -636,6 +636,12 @@ interface EmbeddedSceneState extends SceneObjectStatePlain {
|
|
|
636
636
|
declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
|
|
637
637
|
static Component: typeof EmbeddedSceneRenderer;
|
|
638
638
|
private urlSyncManager?;
|
|
639
|
+
/**
|
|
640
|
+
* initUrlSync should be called before the scene is rendered to ensure that objects are in sync
|
|
641
|
+
* before they get activated. This saves some unnecessary re-renders and makes sure variables
|
|
642
|
+
* queries are issued as needed.
|
|
643
|
+
*/
|
|
644
|
+
initUrlSync(): void;
|
|
639
645
|
activate(): void;
|
|
640
646
|
deactivate(): void;
|
|
641
647
|
}
|
|
@@ -742,6 +748,7 @@ declare class SceneControlsSpacer extends SceneObjectBase<{}> {
|
|
|
742
748
|
type FlexLayoutDirection = 'column' | 'row';
|
|
743
749
|
interface SceneFlexLayoutState extends SceneLayoutState {
|
|
744
750
|
direction?: FlexLayoutDirection;
|
|
751
|
+
wrap?: CSSProperties['flexWrap'];
|
|
745
752
|
}
|
|
746
753
|
declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {
|
|
747
754
|
static Component: typeof FlexLayoutRenderer;
|
package/dist/index.js
CHANGED
|
@@ -2372,14 +2372,18 @@ function isUrlValueEqual(currentUrlValue, newUrlValue) {
|
|
|
2372
2372
|
}
|
|
2373
2373
|
|
|
2374
2374
|
class EmbeddedScene extends SceneObjectBase {
|
|
2375
|
-
|
|
2376
|
-
super.activate();
|
|
2375
|
+
initUrlSync() {
|
|
2377
2376
|
this.urlSyncManager = new UrlSyncManager(this);
|
|
2378
2377
|
this.urlSyncManager.initSync();
|
|
2379
2378
|
}
|
|
2379
|
+
activate() {
|
|
2380
|
+
super.activate();
|
|
2381
|
+
}
|
|
2380
2382
|
deactivate() {
|
|
2381
2383
|
super.deactivate();
|
|
2382
|
-
this.urlSyncManager
|
|
2384
|
+
if (this.urlSyncManager) {
|
|
2385
|
+
this.urlSyncManager.cleanUp();
|
|
2386
|
+
}
|
|
2383
2387
|
}
|
|
2384
2388
|
}
|
|
2385
2389
|
EmbeddedScene.Component = EmbeddedSceneRenderer;
|
|
@@ -2839,9 +2843,17 @@ class SceneFlexLayout extends SceneObjectBase {
|
|
|
2839
2843
|
SceneFlexLayout.Component = FlexLayoutRenderer;
|
|
2840
2844
|
SceneFlexLayout.Editor = FlexLayoutEditor;
|
|
2841
2845
|
function FlexLayoutRenderer({ model, isEditing }) {
|
|
2842
|
-
const { direction = "row", children } = model.useState();
|
|
2846
|
+
const { direction = "row", children, wrap } = model.useState();
|
|
2847
|
+
const style = {
|
|
2848
|
+
flexGrow: 1,
|
|
2849
|
+
flexDirection: direction,
|
|
2850
|
+
display: "flex",
|
|
2851
|
+
gap: "8px",
|
|
2852
|
+
flexWrap: wrap,
|
|
2853
|
+
alignContent: "baseline"
|
|
2854
|
+
};
|
|
2843
2855
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2844
|
-
style
|
|
2856
|
+
style
|
|
2845
2857
|
}, children.map((item) => /* @__PURE__ */ React__default["default"].createElement(FlexLayoutChildComponent, {
|
|
2846
2858
|
key: item.state.key,
|
|
2847
2859
|
item,
|