@jbrowse/plugin-circular-view 2.9.0 → 2.10.1

package/dist/BaseChordDisplay/models/model.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/RendererType';
 import { AnyReactComponentType, Feature } from '@jbrowse/core/util';
-import { ExportSvgOptions } from '../../CircularView/models/CircularView';
+import { ExportSvgOptions } from '../../CircularView/models/model';
 import { ThemeOptions } from '@mui/material';
 export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;

package/dist/BaseChordDisplay/models/model.js

@@ -18,7 +18,8 @@ const renderReaction_1 = require("./renderReaction");
 const configSchema_1 = require("./configSchema");
 /**
  * #stateModel BaseChordDisplay
- * extends `BaseDisplay`
+ * extends
+ * - [BaseDisplay](../basedisplay)
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
 exports.BaseChordDisplayModel = mobx_state_tree_1.types

package/dist/CircularView/components/CircularView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const CircularView: ({ model }: {
     model: CircularViewModel;
 }) => React.JSX.Element;

package/dist/CircularView/components/Controls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const Controls: ({ model }: {
     model: CircularViewModel;
 }) => React.JSX.Element;

package/dist/CircularView/components/ExportSvgDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExportSvgOptions } from '../models/CircularView';
+import { ExportSvgOptions } from '../models/model';
 export default function ExportSvgDlg({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

package/dist/CircularView/components/Ruler.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Slice } from '../models/slices';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const Ruler: ({ model, slice, }: {
     model: CircularViewModel;
     slice: Slice;

package/dist/CircularView/index.js

@@ -28,11 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
-const CircularView_1 = __importDefault(require("./models/CircularView"));
+const model_1 = __importDefault(require("./models/model"));
 exports.default = (pluginManager) => {
     pluginManager.addViewType(() => new ViewType_1.default({
         ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/CircularView')))),
-        stateModel: (0, CircularView_1.default)(pluginManager),
+        stateModel: (0, model_1.default)(pluginManager),
         name: 'CircularView',
         displayName: 'Circular view',
     }));

package/dist/CircularView/models/{CircularView.d.ts → model.d.ts}

@@ -8,12 +8,15 @@ import { SliceRegion } from './slices';
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
-    Wrapper?: React.FC<any>;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
     themeName?: string;
 }
 /**
  * #stateModel CircularView
- * extends `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;

package/dist/CircularView/models/{CircularView.js → model.js}

@@ -45,7 +45,8 @@ const viewportVisibleRegion_1 = require("./viewportVisibleRegion");
 const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/ExportSvgDialog'))));
 /**
  * #stateModel CircularView
- * extends `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pluginManager) {
     const minHeight = 40;

package/dist/CircularView/svgcomponents/SVGCircularView.d.ts

@@ -1,4 +1,4 @@
-import { ExportSvgOptions, CircularViewModel } from '../models/CircularView';
+import { ExportSvgOptions, CircularViewModel } from '../models/model';
 type CGV = CircularViewModel;
 export declare function renderToSvg(model: CGV, opts: ExportSvgOptions): Promise<string>;
 export {};

package/dist/CircularView/svgcomponents/SVGCircularView.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = void 0;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const server_1 = require("react-dom/server");
 const mobx_1 = require("mobx");
 const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 const Ruler_1 = __importDefault(require("../components/Ruler"));
 async function renderToSvg(model, opts) {
@@ -18,6 +18,8 @@ async function renderToSvg(model, opts) {
     const { themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children) } = opts;
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const { width, tracks, height } = model;
     const shift = 50;
     const displayResults = await Promise.all(tracks.map(async (track) => {
@@ -28,12 +30,12 @@ async function renderToSvg(model, opts) {
     const { staticSlices, offsetRadians, centerXY } = model;
     const deg = (0, util_1.radToDeg)(offsetRadians);
     // the xlink namespace is used for rendering <image> tag
-    return (0, server_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
+    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
         react_1.default.createElement(Wrapper, null,
             react_1.default.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width + shift * 2, height].toString() },
                 react_1.default.createElement(SVGBackground_1.default, { width: width, height: height, shift: shift }),
                 react_1.default.createElement("g", { transform: `translate(${centerXY}) rotate(${deg})` },
                     staticSlices.map((slice, i) => (react_1.default.createElement(Ruler_1.default, { key: i, model: model, slice: slice }))),
-                    displayResults.map(({ result }, i) => (react_1.default.createElement(react_1.default.Fragment, { key: i }, result))))))));
+                    displayResults.map(({ result }, i) => (react_1.default.createElement(react_1.default.Fragment, { key: i }, result))))))), createRootFn);
 }
 exports.renderToSvg = renderToSvg;

package/dist/index.d.ts

@@ -6,4 +6,4 @@ export default class CircularViewPlugin extends Plugin {
     configure(pluginManager: PluginManager): void;
 }
 export { baseChordDisplayConfig, BaseChordDisplayModel, BaseChordDisplayComponent, } from './BaseChordDisplay';
-export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/CircularView';
+export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/model';

package/esm/BaseChordDisplay/models/model.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/RendererType';
 import { AnyReactComponentType, Feature } from '@jbrowse/core/util';
-import { ExportSvgOptions } from '../../CircularView/models/CircularView';
+import { ExportSvgOptions } from '../../CircularView/models/model';
 import { ThemeOptions } from '@mui/material';
 export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;

package/esm/BaseChordDisplay/models/model.js

@@ -12,7 +12,8 @@ import { renderReactionData, renderReactionEffect } from './renderReaction';
 import { baseChordDisplayConfig } from './configSchema';
 /**
  * #stateModel BaseChordDisplay
- * extends `BaseDisplay`
+ * extends
+ * - [BaseDisplay](../basedisplay)
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
 export const BaseChordDisplayModel = types

package/esm/CircularView/components/CircularView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const CircularView: ({ model }: {
     model: CircularViewModel;
 }) => React.JSX.Element;

package/esm/CircularView/components/Controls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const Controls: ({ model }: {
     model: CircularViewModel;
 }) => React.JSX.Element;

package/esm/CircularView/components/ExportSvgDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExportSvgOptions } from '../models/CircularView';
+import { ExportSvgOptions } from '../models/model';
 export default function ExportSvgDlg({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

package/esm/CircularView/components/Ruler.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Slice } from '../models/slices';
-import { CircularViewModel } from '../models/CircularView';
+import { CircularViewModel } from '../models/model';
 declare const Ruler: ({ model, slice, }: {
     model: CircularViewModel;
     slice: Slice;

package/esm/CircularView/index.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import stateModelFactory from './models/CircularView';
+import stateModelFactory from './models/model';
 export default (pluginManager) => {
     pluginManager.addViewType(() => new ViewType({
         ReactComponent: lazy(() => import('./components/CircularView')),

package/esm/CircularView/models/{CircularView.d.ts → model.d.ts}

@@ -8,12 +8,15 @@ import { SliceRegion } from './slices';
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
-    Wrapper?: React.FC<any>;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
     themeName?: string;
 }
 /**
  * #stateModel CircularView
- * extends `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;

package/esm/CircularView/models/{CircularView.js → model.js}

@@ -17,7 +17,8 @@ import { viewportVisibleSection } from './viewportVisibleRegion';
 const ExportSvgDialog = lazy(() => import('../components/ExportSvgDialog'));
 /**
  * #stateModel CircularView
- * extends `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pluginManager) {
     const minHeight = 40;

package/esm/CircularView/svgcomponents/SVGCircularView.d.ts

@@ -1,4 +1,4 @@
-import { ExportSvgOptions, CircularViewModel } from '../models/CircularView';
+import { ExportSvgOptions, CircularViewModel } from '../models/model';
 type CGV = CircularViewModel;
 export declare function renderToSvg(model: CGV, opts: ExportSvgOptions): Promise<string>;
 export {};

package/esm/CircularView/svgcomponents/SVGCircularView.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { when } from 'mobx';
-import { getSession, radToDeg } from '@jbrowse/core/util';
+import { getSession, radToDeg, renderToStaticMarkup } from '@jbrowse/core/util';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import Ruler from '../components/Ruler';
 export async function renderToSvg(model, opts) {
@@ -12,6 +12,8 @@ export async function renderToSvg(model, opts) {
     const { themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children) } = opts;
     const session = getSession(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { createRootFn } = getRoot(model);
     const { width, tracks, height } = model;
     const shift = 50;
     const displayResults = await Promise.all(tracks.map(async (track) => {
@@ -28,5 +30,5 @@ export async function renderToSvg(model, opts) {
                 React.createElement(SVGBackground, { width: width, height: height, shift: shift }),
                 React.createElement("g", { transform: `translate(${centerXY}) rotate(${deg})` },
                     staticSlices.map((slice, i) => (React.createElement(Ruler, { key: i, model: model, slice: slice }))),
-                    displayResults.map(({ result }, i) => (React.createElement(React.Fragment, { key: i }, result))))))));
+                    displayResults.map(({ result }, i) => (React.createElement(React.Fragment, { key: i }, result))))))), createRootFn);
 }

package/esm/index.d.ts

@@ -6,4 +6,4 @@ export default class CircularViewPlugin extends Plugin {
     configure(pluginManager: PluginManager): void;
 }
 export { baseChordDisplayConfig, BaseChordDisplayModel, BaseChordDisplayComponent, } from './BaseChordDisplay';
-export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/CircularView';
+export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/model';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "a50b6f67cf8c8f3c65a7b8cd858de2fcca1f2909"
+  "gitHead": "442b5f87efddfdf4ccf520b4d9dd01ddd370cb07"
 }