@jbrowse/plugin-circular-view 2.2.2 → 2.3.0

package/src/CircularView/components/CircularView.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { observer } from 'mobx-react'
+import { IconButton } from '@mui/material'
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
 import { assembleLocString } from '@jbrowse/core/util'
-import { CircularViewModel } from '../models/CircularView'
-import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { grey } from '@mui/material/colors'
 
@@ -19,6 +18,7 @@ import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 // locals
 import Ruler from './Ruler'
 import ImportForm from './ImportForm'
+import { CircularViewModel } from '../models/CircularView'
 
 const dragHandleHeight = 3
 
@@ -85,87 +85,85 @@ const Slices = observer(({ model }: { model: CircularViewModel }) => {
   )
 })
 
-const Controls = observer(
-  ({
-    model,
-    showingFigure,
-  }: {
-    model: CircularViewModel
-    showingFigure: boolean
-  }) => {
-    const { classes } = useStyles()
-    return (
-      <div className={classes.controls}>
-        <IconButton
-          onClick={model.zoomOutButton}
-          className={classes.iconButton}
-          title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
-          disabled={
-            !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow
-          }
-          color="secondary"
-        >
-          <ZoomOutIcon />
-        </IconButton>
+const Controls = observer(function ({
+  model,
+  showingFigure,
+}: {
+  model: CircularViewModel
+  showingFigure: boolean
+}) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.controls}>
+      <IconButton
+        onClick={model.zoomOutButton}
+        className={classes.iconButton}
+        title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
+        disabled={
+          !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow
+        }
+        color="secondary"
+      >
+        <ZoomOutIcon />
+      </IconButton>
 
-        <IconButton
-          onClick={model.zoomInButton}
-          className={classes.iconButton}
-          title="zoom in"
-          disabled={!showingFigure || model.atMinBpPerPx}
-          color="secondary"
-        >
-          <ZoomInIcon />
-        </IconButton>
+      <IconButton
+        onClick={model.zoomInButton}
+        className={classes.iconButton}
+        title="zoom in"
+        disabled={!showingFigure || model.atMinBpPerPx}
+        color="secondary"
+      >
+        <ZoomInIcon />
+      </IconButton>
 
-        <IconButton
-          onClick={model.rotateCounterClockwiseButton}
-          className={classes.iconButton}
-          title="rotate counter-clockwise"
-          disabled={!showingFigure}
-          color="secondary"
-        >
-          <RotateLeftIcon />
-        </IconButton>
+      <IconButton
+        onClick={model.rotateCounterClockwiseButton}
+        className={classes.iconButton}
+        title="rotate counter-clockwise"
+        disabled={!showingFigure}
+        color="secondary"
+      >
+        <RotateLeftIcon />
+      </IconButton>
 
-        <IconButton
-          onClick={model.rotateClockwiseButton}
-          className={classes.iconButton}
-          title="rotate clockwise"
-          disabled={!showingFigure}
-          color="secondary"
-        >
-          <RotateRightIcon />
-        </IconButton>
+      <IconButton
+        onClick={model.rotateClockwiseButton}
+        className={classes.iconButton}
+        title="rotate clockwise"
+        disabled={!showingFigure}
+        color="secondary"
+      >
+        <RotateRightIcon />
+      </IconButton>
 
+      <IconButton
+        onClick={model.toggleFitToWindowLock}
+        className={classes.iconButton}
+        title={
+          model.lockedFitToWindow
+            ? 'locked model to window size'
+            : 'unlocked model to zoom further'
+        }
+        disabled={model.tooSmallToLock}
+        color="secondary"
+      >
+        {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
+      </IconButton>
+
+      {model.hideTrackSelectorButton ? null : (
         <IconButton
-          onClick={model.toggleFitToWindowLock}
-          className={classes.iconButton}
-          title={
-            model.lockedFitToWindow
-              ? 'locked model to window size'
-              : 'unlocked model to zoom further'
-          }
-          disabled={model.tooSmallToLock}
+          onClick={model.activateTrackSelector}
+          title="Open track selector"
+          data-testid="circular_track_select"
           color="secondary"
         >
-          {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
+          <TrackSelectorIcon />
         </IconButton>
-
-        {model.hideTrackSelectorButton ? null : (
-          <IconButton
-            onClick={model.activateTrackSelector}
-            title="Open track selector"
-            data-testid="circular_track_select"
-            color="secondary"
-          >
-            <TrackSelectorIcon />
-          </IconButton>
-        )}
-      </div>
-    )
-  },
-)
+      )}
+    </div>
+  )
+})
 
 const CircularView = observer(({ model }: { model: CircularViewModel }) => {
   const { classes } = useStyles()

package/src/CircularView/index.ts

@@ -0,0 +1,16 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
+import stateModelFactory from './models/CircularView'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addViewType(
+    () =>
+      new ViewType({
+        ReactComponent: lazy(() => import('./components/CircularView')),
+        stateModel: stateModelFactory(pluginManager),
+        name: 'CircularView',
+        displayName: 'Circular view',
+      }),
+  )
+}

package/src/LaunchCircularView/index.ts

@@ -0,0 +1,48 @@
+import { when } from 'mobx'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+// locals
+import { CircularViewModel } from '../CircularView/models/CircularView'
+
+type CGV = CircularViewModel
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-CircularView',
+    // @ts-ignore
+    async ({
+      session,
+      assembly,
+      loc,
+      tracks = [],
+    }: {
+      session: AbstractSessionModel
+      assembly?: string
+      loc: string
+      tracks?: string[]
+    }) => {
+      const { assemblyManager } = session
+      const view = session.addView('CircularView', {}) as CGV
+
+      await when(() => view.initialized)
+
+      if (!assembly) {
+        throw new Error(
+          'No assembly provided when launching circular genome view',
+        )
+      }
+
+      const asm = await assemblyManager.waitForAssembly(assembly)
+      if (!asm) {
+        throw new Error(
+          `Assembly "${assembly}" not found when launching circular genome view`,
+        )
+      }
+
+      view.setDisplayedRegions(asm.regions || [])
+
+      tracks.forEach(track => view.showTrack(track))
+    },
+  )
+}

package/src/index.ts

@@ -1,69 +1,24 @@
-import { lazy } from 'react'
-import { when } from 'mobx'
 import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import Plugin from '@jbrowse/core/Plugin'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import DataUsageIcon from '@mui/icons-material/DataUsage'
-import stateModelFactory, {
+
+// locals
+import {
   CircularViewModel,
   CircularViewStateModel,
 } from './CircularView/models/CircularView'
+import CircularViewF from './CircularView'
+import LaunchCircularViewF from './LaunchCircularView'
 
-type CGV = CircularViewModel
+// icons
+import DataUsageIcon from '@mui/icons-material/DataUsage'
 
 export default class CircularViewPlugin extends Plugin {
   name = 'CircularViewPlugin'
 
   install(pluginManager: PluginManager) {
-    pluginManager.addViewType(
-      () =>
-        new ViewType({
-          ReactComponent: lazy(
-            () => import('./CircularView/components/CircularView'),
-          ),
-          stateModel: stateModelFactory(pluginManager),
-          name: 'CircularView',
-        }),
-    )
-
-    pluginManager.addToExtensionPoint(
-      'LaunchView-CircularView',
-      // @ts-ignore
-      async ({
-        session,
-        assembly,
-        loc,
-        tracks = [],
-      }: {
-        session: AbstractSessionModel
-        assembly?: string
-        loc: string
-        tracks?: string[]
-      }) => {
-        const { assemblyManager } = session
-        const view = session.addView('CircularView', {}) as CGV
-
-        await when(() => view.initialized)
-
-        if (!assembly) {
-          throw new Error(
-            'No assembly provided when launching circular genome view',
-          )
-        }
-
-        const asm = await assemblyManager.waitForAssembly(assembly)
-        if (!asm) {
-          throw new Error(
-            `Assembly "${assembly}" not found when launching circular genome view`,
-          )
-        }
-
-        view.setDisplayedRegions(asm.regions || [])
-
-        tracks.forEach(track => view.showTrack(track))
-      },
-    )
+    CircularViewF(pluginManager)
+    LaunchCircularViewF(pluginManager)
   }
 
   configure(pluginManager: PluginManager) {
@@ -80,8 +35,8 @@ export default class CircularViewPlugin extends Plugin {
 }
 
 export {
-  BaseChordDisplayModel,
   baseChordDisplayConfig,
+  BaseChordDisplayModel,
   BaseChordDisplayComponent,
 } from './BaseChordDisplay'
 

package/dist/BaseChordDisplay/components/RpcRenderedSvgGroup.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-declare function RpcRenderedSvgGroup({ model, }: {
-    model: {
-        data: any;
-        html: string;
-        filled: boolean;
-        renderingComponent: React.FC<any>;
-        renderProps: Function;
-    };
-}): JSX.Element;
-declare const _default: typeof RpcRenderedSvgGroup;
-export default _default;

package/dist/BaseChordDisplay/components/RpcRenderedSvgGroup.js

@@ -1,73 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const mobx_state_tree_1 = require("mobx-state-tree");
-const mobx_react_1 = require("mobx-react");
-const react_dom_1 = require("react-dom");
-const util_1 = require("@jbrowse/core/util");
-function RpcRenderedSvgGroup({ model, }) {
-    const { data, html, filled, renderingComponent } = model;
-    const ssrContainerNode = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const domNode = ssrContainerNode.current;
-        function doHydrate() {
-            if (domNode && filled) {
-                if (domNode.innerHTML) {
-                    domNode.style.display = 'none';
-                    (0, react_dom_1.unmountComponentAtNode)(domNode);
-                }
-                // setting outline:none fixes react "focusable" element issue. see
-                // https://github.com/GMOD/jbrowse-components/issues/2160
-                domNode.style.outline = 'none';
-                domNode.innerHTML = html;
-                // use requestIdleCallback to defer main-thread rendering
-                // and hydration for when we have some free time. helps
-                // keep the framerate up.
-                (0, util_1.rIC)(() => {
-                    if (!(0, mobx_state_tree_1.isAlive)(model)) {
-                        return;
-                    }
-                    const mainThreadRendering = react_1.default.createElement(renderingComponent, { ...data, ...model.renderProps() }, null);
-                    (0, util_1.rIC)(() => {
-                        if (!(0, mobx_state_tree_1.isAlive)(model)) {
-                            return;
-                        }
-                        (0, react_dom_1.hydrate)(mainThreadRendering, domNode);
-                    });
-                });
-            }
-        }
-        doHydrate();
-        return () => {
-            if (domNode) {
-                (0, react_dom_1.unmountComponentAtNode)(domNode);
-            }
-        };
-    });
-    return react_1.default.createElement("g", { ref: ssrContainerNode });
-}
-exports.default = (0, mobx_react_1.observer)(RpcRenderedSvgGroup);
-//# sourceMappingURL=RpcRenderedSvgGroup.js.map

package/dist/BaseChordDisplay/components/RpcRenderedSvgGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RpcRenderedSvgGroup.js","sourceRoot":"","sources":["../../../src/BaseChordDisplay/components/RpcRenderedSvgGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgD;AAChD,qDAAyC;AACzC,2CAAqC;AACrC,yCAA2D;AAC3D,6CAAwC;AAExC,SAAS,mBAAmB,CAAC,EAC3B,KAAK,GAWN;IACC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAA;IAExD,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAA;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAA;QACxC,SAAS,SAAS;YAChB,IAAI,OAAO,IAAI,MAAM,EAAE;gBACrB,IAAI,OAAO,CAAC,SAAS,EAAE;oBACrB,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;oBAC9B,IAAA,kCAAsB,EAAC,OAAO,CAAC,CAAA;iBAChC;gBAED,kEAAkE;gBAClE,yDAAyD;gBACzD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;gBAC9B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAA;gBACxB,yDAAyD;gBACzD,uDAAuD;gBACvD,yBAAyB;gBACzB,IAAA,UAAG,EAAC,GAAG,EAAE;oBACP,IAAI,CAAC,IAAA,yBAAO,EAAC,KAAK,CAAC,EAAE;wBACnB,OAAM;qBACP;oBACD,MAAM,mBAAmB,GAAG,eAAK,CAAC,aAAa,CAC7C,kBAAkB,EAClB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,EAAE,EACnC,IAAI,CACL,CAAA;oBACD,IAAA,UAAG,EAAC,GAAG,EAAE;wBACP,IAAI,CAAC,IAAA,yBAAO,EAAC,KAAK,CAAC,EAAE;4BACnB,OAAM;yBACP;wBACD,IAAA,mBAAO,EAAC,mBAAmB,EAAE,OAAO,CAAC,CAAA;oBACvC,CAAC,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;aACH;QACH,CAAC;QACD,SAAS,EAAE,CAAA;QACX,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,EAAE;gBACX,IAAA,kCAAsB,EAAC,OAAO,CAAC,CAAA;aAChC;QACH,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,qCAAG,GAAG,EAAE,gBAAgB,GAAI,CAAA;AACrC,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,mBAAmB,CAAC,CAAA"}

package/esm/BaseChordDisplay/components/RpcRenderedSvgGroup.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-declare function RpcRenderedSvgGroup({ model, }: {
-    model: {
-        data: any;
-        html: string;
-        filled: boolean;
-        renderingComponent: React.FC<any>;
-        renderProps: Function;
-    };
-}): JSX.Element;
-declare const _default: typeof RpcRenderedSvgGroup;
-export default _default;

package/esm/BaseChordDisplay/components/RpcRenderedSvgGroup.js

@@ -1,48 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { isAlive } from 'mobx-state-tree';
-import { observer } from 'mobx-react';
-import { hydrate, unmountComponentAtNode } from 'react-dom';
-import { rIC } from '@jbrowse/core/util';
-function RpcRenderedSvgGroup({ model, }) {
-    const { data, html, filled, renderingComponent } = model;
-    const ssrContainerNode = useRef(null);
-    useEffect(() => {
-        const domNode = ssrContainerNode.current;
-        function doHydrate() {
-            if (domNode && filled) {
-                if (domNode.innerHTML) {
-                    domNode.style.display = 'none';
-                    unmountComponentAtNode(domNode);
-                }
-                // setting outline:none fixes react "focusable" element issue. see
-                // https://github.com/GMOD/jbrowse-components/issues/2160
-                domNode.style.outline = 'none';
-                domNode.innerHTML = html;
-                // use requestIdleCallback to defer main-thread rendering
-                // and hydration for when we have some free time. helps
-                // keep the framerate up.
-                rIC(() => {
-                    if (!isAlive(model)) {
-                        return;
-                    }
-                    const mainThreadRendering = React.createElement(renderingComponent, { ...data, ...model.renderProps() }, null);
-                    rIC(() => {
-                        if (!isAlive(model)) {
-                            return;
-                        }
-                        hydrate(mainThreadRendering, domNode);
-                    });
-                });
-            }
-        }
-        doHydrate();
-        return () => {
-            if (domNode) {
-                unmountComponentAtNode(domNode);
-            }
-        };
-    });
-    return React.createElement("g", { ref: ssrContainerNode });
-}
-export default observer(RpcRenderedSvgGroup);
-//# sourceMappingURL=RpcRenderedSvgGroup.js.map

package/esm/BaseChordDisplay/components/RpcRenderedSvgGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RpcRenderedSvgGroup.js","sourceRoot":"","sources":["../../../src/BaseChordDisplay/components/RpcRenderedSvgGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAExC,SAAS,mBAAmB,CAAC,EAC3B,KAAK,GAWN;IACC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAA;IAExD,MAAM,gBAAgB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAA;QACxC,SAAS,SAAS;YAChB,IAAI,OAAO,IAAI,MAAM,EAAE;gBACrB,IAAI,OAAO,CAAC,SAAS,EAAE;oBACrB,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;oBAC9B,sBAAsB,CAAC,OAAO,CAAC,CAAA;iBAChC;gBAED,kEAAkE;gBAClE,yDAAyD;gBACzD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;gBAC9B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAA;gBACxB,yDAAyD;gBACzD,uDAAuD;gBACvD,yBAAyB;gBACzB,GAAG,CAAC,GAAG,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;wBACnB,OAAM;qBACP;oBACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAC7C,kBAAkB,EAClB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,EAAE,EACnC,IAAI,CACL,CAAA;oBACD,GAAG,CAAC,GAAG,EAAE;wBACP,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;4BACnB,OAAM;yBACP;wBACD,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAA;oBACvC,CAAC,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;aACH;QACH,CAAC;QACD,SAAS,EAAE,CAAA;QACX,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,EAAE;gBACX,sBAAsB,CAAC,OAAO,CAAC,CAAA;aAChC;QACH,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,2BAAG,GAAG,EAAE,gBAAgB,GAAI,CAAA;AACrC,CAAC;AAED,eAAe,QAAQ,CAAC,mBAAmB,CAAC,CAAA"}

package/src/BaseChordDisplay/components/RpcRenderedSvgGroup.tsx

@@ -1,69 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { isAlive } from 'mobx-state-tree'
-import { observer } from 'mobx-react'
-import { hydrate, unmountComponentAtNode } from 'react-dom'
-import { rIC } from '@jbrowse/core/util'
-
-function RpcRenderedSvgGroup({
-  model,
-}: {
-  model: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any
-    html: string
-    filled: boolean
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderingComponent: React.FC<any>
-    renderProps: Function
-  }
-}) {
-  const { data, html, filled, renderingComponent } = model
-
-  const ssrContainerNode = useRef<SVGGElement>(null)
-
-  useEffect(() => {
-    const domNode = ssrContainerNode.current
-    function doHydrate() {
-      if (domNode && filled) {
-        if (domNode.innerHTML) {
-          domNode.style.display = 'none'
-          unmountComponentAtNode(domNode)
-        }
-
-        // setting outline:none fixes react "focusable" element issue. see
-        // https://github.com/GMOD/jbrowse-components/issues/2160
-        domNode.style.outline = 'none'
-        domNode.innerHTML = html
-        // use requestIdleCallback to defer main-thread rendering
-        // and hydration for when we have some free time. helps
-        // keep the framerate up.
-        rIC(() => {
-          if (!isAlive(model)) {
-            return
-          }
-          const mainThreadRendering = React.createElement(
-            renderingComponent,
-            { ...data, ...model.renderProps() },
-            null,
-          )
-          rIC(() => {
-            if (!isAlive(model)) {
-              return
-            }
-            hydrate(mainThreadRendering, domNode)
-          })
-        })
-      }
-    }
-    doHydrate()
-    return () => {
-      if (domNode) {
-        unmountComponentAtNode(domNode)
-      }
-    }
-  })
-
-  return <g ref={ssrContainerNode} />
-}
-
-export default observer(RpcRenderedSvgGroup)