From 9eca0912822128573c176cf686152068628796c5 Mon Sep 17 00:00:00 2001 From: Colin Date: Wed, 9 Dec 2020 22:54:31 -0500 Subject: [PATCH 1/3] Fix block memory leak --- .../BaseLinearDisplay/components/ServerSideRenderedContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx index efd6e3600f..8192bab2c4 100644 --- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx +++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx @@ -74,7 +74,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { doHydrate() return () => { - if (domNode && isHydrated) { + if (domNode && hydrated.current) { unmountComponentAtNode(domNode) } } From 0723b95251ebd15b931dff77ab0290e8d5fe4348 Mon Sep 17 00:00:00 2001 From: Colin Date: Wed, 9 Dec 2020 22:57:35 -0500 Subject: [PATCH 2/3] Add more cleanups --- .../BaseChordDisplay/components/RpcRenderedSvgGroup.js | 8 ++++++-- plugins/dotplot-view/src/ServerSideRenderedContent.tsx | 5 ++--- .../components/ServerSideRenderedContent.tsx | 3 +-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js index 7f92fac047..275f20cb7c 100644 --- a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js +++ b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js @@ -13,10 +13,9 @@ export default ({ jbrequire }) => { useEffect(() => { const domNode = ssrContainerNode.current - const isHydrated = hydrated.current function doHydrate() { if (domNode && filled) { - if (domNode && domNode.innerHTML && isHydrated) { + if (domNode && domNode.innerHTML && hydrated.current) { domNode.style.display = 'none' requestIdleCallback(() => unmountComponentAtNode(domNode)) } @@ -40,6 +39,11 @@ export default ({ jbrequire }) => { } } doHydrate() + return () => { + if (hydrated.current && domNode) { + unmountComponentAtNode(domNode) + } + } }) return diff --git a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx index 6fa29e1d2c..99716c8e6e 100644 --- a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx +++ b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx @@ -62,7 +62,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { useEffect(() => { const domNode = ssrContainerNode.current - const isHydrated = hydrated.current function doHydrate() { const { data, @@ -71,7 +70,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { renderingComponent: RenderingComponent, } = model if (domNode && model.filled) { - if (isHydrated && domNode) { + if (hydrated.current && domNode) { unmountComponentAtNode(domNode) } domNode.innerHTML = html @@ -106,7 +105,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { doHydrate() return () => { - if (domNode && isHydrated) { + if (domNode && hydrated.current) { unmountComponentAtNode(domNode) } } diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx index 8192bab2c4..9ebb045d2b 100644 --- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx +++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx @@ -18,7 +18,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { useEffect(() => { const domNode = ssrContainerNode.current - const isHydrated = hydrated.current function doHydrate() { const { data, @@ -28,7 +27,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { renderingComponent: RenderingComponent, } = model if (domNode && filled) { - if (isHydrated && domNode) { + if (hydrated.current && domNode) { unmountComponentAtNode(domNode) } domNode.innerHTML = html From 93dec1a52a4aa8a32996eda926442fe7e5752c11 Mon Sep 17 00:00:00 2001 From: Colin Date: Wed, 9 Dec 2020 23:03:13 -0500 Subject: [PATCH 3/3] Remove the hydrated ref --- .../src/BaseChordDisplay/components/RpcRenderedSvgGroup.js | 7 +++---- plugins/dotplot-view/src/ServerSideRenderedContent.tsx | 6 ++---- .../components/ServerSideRenderedContent.tsx | 6 ++---- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js index 275f20cb7c..46961c005f 100644 --- a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js +++ b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js @@ -9,15 +9,14 @@ export default ({ jbrequire }) => { const { data, html, filled, renderProps, renderingComponent } = model const ssrContainerNode = useRef(null) - const hydrated = useRef(false) useEffect(() => { const domNode = ssrContainerNode.current function doHydrate() { if (domNode && filled) { - if (domNode && domNode.innerHTML && hydrated.current) { + if (domNode && domNode.innerHTML) { domNode.style.display = 'none' - requestIdleCallback(() => unmountComponentAtNode(domNode)) + unmountComponentAtNode(domNode) } domNode.style.display = 'inline' domNode.innerHTML = html @@ -40,7 +39,7 @@ export default ({ jbrequire }) => { } doHydrate() return () => { - if (hydrated.current && domNode) { + if (domNode) { unmountComponentAtNode(domNode) } } diff --git a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx index 99716c8e6e..d7287e8d8f 100644 --- a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx +++ b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx @@ -54,7 +54,6 @@ class RenderErrorBoundary extends Component<{}, ErrorBoundaryState> { function ServerSideRenderedContent(props: { model: BlockModel }) { const ssrContainerNode = useRef(null) - const hydrated = useRef(false) const { model } = props const session = getSession(model) @@ -70,7 +69,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { renderingComponent: RenderingComponent, } = model if (domNode && model.filled) { - if (hydrated.current && domNode) { + if (domNode) { unmountComponentAtNode(domNode) } domNode.innerHTML = html @@ -95,7 +94,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { , domNode, ) - hydrated.current = true }, { timeout: 300 }, ) @@ -105,7 +103,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { doHydrate() return () => { - if (domNode && hydrated.current) { + if (domNode) { unmountComponentAtNode(domNode) } } diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx index 9ebb045d2b..0311d9d310 100644 --- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx +++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx @@ -10,7 +10,6 @@ import type { BlockModel } from '../models/serverSideRenderedBlock' function ServerSideRenderedContent(props: { model: BlockModel }) { const ssrContainerNode = useRef(null) - const hydrated = useRef(false) const { model } = props const session = getSession(model) @@ -27,7 +26,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { renderingComponent: RenderingComponent, } = model if (domNode && filled) { - if (hydrated.current && domNode) { + if (domNode) { unmountComponentAtNode(domNode) } domNode.innerHTML = html @@ -63,7 +62,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { , domNode, ) - hydrated.current = true }, { timeout: 300 }, ) @@ -73,7 +71,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) { doHydrate() return () => { - if (domNode && hydrated.current) { + if (domNode) { unmountComponentAtNode(domNode) } }