@foxglove/embed-react 0.1.4 → 0.1.5
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/cjs/FoxgloveViewer.d.ts +8 -2
- package/dist/cjs/FoxgloveViewer.d.ts.map +1 -1
- package/dist/cjs/FoxgloveViewer.js +13 -3
- package/dist/cjs/FoxgloveViewer.js.map +1 -1
- package/dist/esm/FoxgloveViewer.d.ts +8 -2
- package/dist/esm/FoxgloveViewer.d.ts.map +1 -1
- package/dist/esm/FoxgloveViewer.js +13 -3
- package/dist/esm/FoxgloveViewer.js.map +1 -1
- package/package.json +2 -2
- package/src/FoxgloveViewer.tsx +27 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
import { type DataSource, type OpaqueLayoutData } from "@foxglove/embed";
|
|
2
|
+
import { type DataSource, type OpaqueLayoutData, type SelectLayoutParams } from "@foxglove/embed";
|
|
3
3
|
type Props = {
|
|
4
4
|
/** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
|
|
5
5
|
src?: string;
|
|
@@ -10,8 +10,14 @@ type Props = {
|
|
|
10
10
|
orgSlug?: string;
|
|
11
11
|
/** The data source to visualize in the Foxglove app. */
|
|
12
12
|
data?: DataSource;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* The layout to use in the Foxglove app.
|
|
15
|
+
*
|
|
16
|
+
* @deprecated Use `layout` instead
|
|
17
|
+
*/
|
|
14
18
|
layoutData?: OpaqueLayoutData;
|
|
19
|
+
/** The layout to use in the Foxglove app. */
|
|
20
|
+
layout?: SelectLayoutParams;
|
|
15
21
|
/**
|
|
16
22
|
* The extensions to install in the Foxglove app.
|
|
17
23
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAiHtD"}
|
|
@@ -12,7 +12,7 @@ const useShouldNotChangeOften_1 = require("./useShouldNotChangeOften");
|
|
|
12
12
|
* convenient API for embedding the Foxglove app in a React application.
|
|
13
13
|
*/
|
|
14
14
|
function FoxgloveViewer(props) {
|
|
15
|
-
const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } = props;
|
|
15
|
+
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } = props;
|
|
16
16
|
// eslint-disable-next-line no-restricted-syntax
|
|
17
17
|
const elem = (0, react_1.useRef)(null);
|
|
18
18
|
const frame = (0, react_1.useRef)();
|
|
@@ -25,6 +25,9 @@ function FoxgloveViewer(props) {
|
|
|
25
25
|
(0, useShouldNotChangeOften_1.useShouldNotChangeOften)(layoutData, () => {
|
|
26
26
|
console.warn(`[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
27
27
|
});
|
|
28
|
+
(0, useShouldNotChangeOften_1.useShouldNotChangeOften)(layout, () => {
|
|
29
|
+
console.warn(`[FoxgloveViewer] "layout" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
30
|
+
});
|
|
28
31
|
(0, useShouldNotChangeOften_1.useShouldNotChangeOften)(extensions, () => {
|
|
29
32
|
console.warn(`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
30
33
|
});
|
|
@@ -65,11 +68,18 @@ function FoxgloveViewer(props) {
|
|
|
65
68
|
frame.current.setDataSource(data);
|
|
66
69
|
}, [data]);
|
|
67
70
|
(0, react_1.useEffect)(() => {
|
|
68
|
-
|
|
71
|
+
// Favor layout over layoutData.
|
|
72
|
+
if (layout || layoutData == undefined || frame.current == undefined) {
|
|
69
73
|
return;
|
|
70
74
|
}
|
|
71
75
|
frame.current.setLayoutData(layoutData);
|
|
72
|
-
}, [layoutData]);
|
|
76
|
+
}, [layoutData, layout]);
|
|
77
|
+
(0, react_1.useEffect)(() => {
|
|
78
|
+
if (layout == undefined || frame.current == undefined) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
frame.current.selectLayout(layout);
|
|
82
|
+
}, [layout]);
|
|
73
83
|
(0, react_1.useEffect)(() => {
|
|
74
84
|
if (extensions == undefined || frame.current == undefined) {
|
|
75
85
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
import { type DataSource, type OpaqueLayoutData } from "@foxglove/embed";
|
|
2
|
+
import { type DataSource, type OpaqueLayoutData, type SelectLayoutParams } from "@foxglove/embed";
|
|
3
3
|
type Props = {
|
|
4
4
|
/** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
|
|
5
5
|
src?: string;
|
|
@@ -10,8 +10,14 @@ type Props = {
|
|
|
10
10
|
orgSlug?: string;
|
|
11
11
|
/** The data source to visualize in the Foxglove app. */
|
|
12
12
|
data?: DataSource;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* The layout to use in the Foxglove app.
|
|
15
|
+
*
|
|
16
|
+
* @deprecated Use `layout` instead
|
|
17
|
+
*/
|
|
14
18
|
layoutData?: OpaqueLayoutData;
|
|
19
|
+
/** The layout to use in the Foxglove app. */
|
|
20
|
+
layout?: SelectLayoutParams;
|
|
15
21
|
/**
|
|
16
22
|
* The extensions to install in the Foxglove app.
|
|
17
23
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAiHtD"}
|
|
@@ -9,7 +9,7 @@ import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
|
|
|
9
9
|
* convenient API for embedding the Foxglove app in a React application.
|
|
10
10
|
*/
|
|
11
11
|
export function FoxgloveViewer(props) {
|
|
12
|
-
const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } = props;
|
|
12
|
+
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } = props;
|
|
13
13
|
// eslint-disable-next-line no-restricted-syntax
|
|
14
14
|
const elem = useRef(null);
|
|
15
15
|
const frame = useRef();
|
|
@@ -22,6 +22,9 @@ export function FoxgloveViewer(props) {
|
|
|
22
22
|
useShouldNotChangeOften(layoutData, () => {
|
|
23
23
|
console.warn(`[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
24
24
|
});
|
|
25
|
+
useShouldNotChangeOften(layout, () => {
|
|
26
|
+
console.warn(`[FoxgloveViewer] "layout" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
27
|
+
});
|
|
25
28
|
useShouldNotChangeOften(extensions, () => {
|
|
26
29
|
console.warn(`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`);
|
|
27
30
|
});
|
|
@@ -62,11 +65,18 @@ export function FoxgloveViewer(props) {
|
|
|
62
65
|
frame.current.setDataSource(data);
|
|
63
66
|
}, [data]);
|
|
64
67
|
useEffect(() => {
|
|
65
|
-
|
|
68
|
+
// Favor layout over layoutData.
|
|
69
|
+
if (layout || layoutData == undefined || frame.current == undefined) {
|
|
66
70
|
return;
|
|
67
71
|
}
|
|
68
72
|
frame.current.setLayoutData(layoutData);
|
|
69
|
-
}, [layoutData]);
|
|
73
|
+
}, [layoutData, layout]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
if (layout == undefined || frame.current == undefined) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
frame.current.selectLayout(layout);
|
|
79
|
+
}, [layout]);
|
|
70
80
|
useEffect(() => {
|
|
71
81
|
if (extensions == undefined || frame.current == undefined) {
|
|
72
82
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEL,cAAc,IAAI,mBAAmB,
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxglove/embed-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Foxglove Technologies",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"build": "yarn workspace @foxglove/embed build && tsc -b tsconfig.build.json tsconfig.build.cjs.json"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@foxglove/embed": "0.1.
|
|
29
|
+
"@foxglove/embed": "0.1.5",
|
|
30
30
|
"tslib": "2.8.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
package/src/FoxgloveViewer.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
type DataSource,
|
|
8
8
|
FoxgloveViewer as FoxgloveViewerClass,
|
|
9
9
|
type OpaqueLayoutData,
|
|
10
|
+
type SelectLayoutParams,
|
|
10
11
|
} from "@foxglove/embed";
|
|
11
12
|
|
|
12
13
|
import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
|
|
@@ -21,8 +22,14 @@ type Props = {
|
|
|
21
22
|
orgSlug?: string;
|
|
22
23
|
/** The data source to visualize in the Foxglove app. */
|
|
23
24
|
data?: DataSource;
|
|
24
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* The layout to use in the Foxglove app.
|
|
27
|
+
*
|
|
28
|
+
* @deprecated Use `layout` instead
|
|
29
|
+
*/
|
|
25
30
|
layoutData?: OpaqueLayoutData;
|
|
31
|
+
/** The layout to use in the Foxglove app. */
|
|
32
|
+
layout?: SelectLayoutParams;
|
|
26
33
|
/**
|
|
27
34
|
* The extensions to install in the Foxglove app.
|
|
28
35
|
*
|
|
@@ -51,7 +58,8 @@ type Props = {
|
|
|
51
58
|
* convenient API for embedding the Foxglove app in a React application.
|
|
52
59
|
*/
|
|
53
60
|
export function FoxgloveViewer(props: Props): ReactNode {
|
|
54
|
-
const { src, orgSlug, className, style, data, layoutData, extensions, colorScheme } =
|
|
61
|
+
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } =
|
|
62
|
+
props;
|
|
55
63
|
|
|
56
64
|
// eslint-disable-next-line no-restricted-syntax
|
|
57
65
|
const elem = useRef<HTMLIFrameElement | null>(null);
|
|
@@ -73,6 +81,12 @@ export function FoxgloveViewer(props: Props): ReactNode {
|
|
|
73
81
|
);
|
|
74
82
|
});
|
|
75
83
|
|
|
84
|
+
useShouldNotChangeOften(layout, () => {
|
|
85
|
+
console.warn(
|
|
86
|
+
`[FoxgloveViewer] "layout" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
87
|
+
);
|
|
88
|
+
});
|
|
89
|
+
|
|
76
90
|
useShouldNotChangeOften(extensions, () => {
|
|
77
91
|
console.warn(
|
|
78
92
|
`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
@@ -123,12 +137,21 @@ export function FoxgloveViewer(props: Props): ReactNode {
|
|
|
123
137
|
}, [data]);
|
|
124
138
|
|
|
125
139
|
useEffect(() => {
|
|
126
|
-
|
|
140
|
+
// Favor layout over layoutData.
|
|
141
|
+
if (layout || layoutData == undefined || frame.current == undefined) {
|
|
127
142
|
return;
|
|
128
143
|
}
|
|
129
144
|
|
|
130
145
|
frame.current.setLayoutData(layoutData);
|
|
131
|
-
}, [layoutData]);
|
|
146
|
+
}, [layoutData, layout]);
|
|
147
|
+
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
if (layout == undefined || frame.current == undefined) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
frame.current.selectLayout(layout);
|
|
154
|
+
}, [layout]);
|
|
132
155
|
|
|
133
156
|
useEffect(() => {
|
|
134
157
|
if (extensions == undefined || frame.current == undefined) {
|